I. Course Learning Outcomes (at the end of this course, the student will be able to ...)
Digital Image Concepts
crop, scale, and export images in a web friendly image file format using an image editing tool
describe the differences between the GIF, JPEG, and PNG file formats and when to use which format on the web.
explain the difference between lossy and lossless compression algorithms.
HTML
Define and explain the following XML terms: element, tag, attribute, node, tree, child, parent, children
Validate an HTML page utilizing validator.w3.org
Explain the difference between structural and semantic tags
Create a valid web page that uses the following tags: html,head,style,link,body,h1-h6,p,div,span,img,b,i,em,strong,a,del
Create a valid web page that uses HTML5 semantic tags: header, section, article, aside, footer,date,
Create a valid web page that displays tabular data utilizing HTML table tags: table,tr,td,th
Create HTML links. Use the anchor tag to create a hypertext link to: a different web site, a different web page on the same web site, a different part of the same page,
a mailto: link, and a link that opens a new tab or window. Use the :link, :visited, :active, and :hover selectors to style the link. Utilize the title attribute to add a tooltip to the link.
Lists - create unordered lists, ordered lists, and definition lists in HTML. Use styles to change the default bullets or numbering.
CSS
define and explain the following CSS terms: selector, rule, cascade, inheritance.
explain the difference between type, class, and id selectors.
create a web page that uses the following CSS features: type, class and ID selectors, external style sheets, CSS3 selectors, CSS3 media queries, and Web Fonts
show familiarity with many of the CSS3 selectors
Explain the CSS box model
explain the following CSS properties: color, background, padding, margin, border, ...
Be able to create web pages with the following layouts: single-column, multi-column, multi-column with footer, and all of the foregoing fluid.
Design concepts
Color concepts
Information Architecture
discuss the following organizational schemes: bottom-up, top-down
discuss the following navigation systems: audience specific, task oriented, (site map)
JavaScript and W3C DOM
discuss the following web standards entities: W3C, WHATWG, ECMA
discuss the following browser engines: Webkit, Blink, Mozilla, IE
explain what the W3C DOM is
explain what it means when we say that JS variables are "weakly typed"
declare JS variables in the local or global scope.
write both named and anonymous functions
work with the following built-in JS classes: Array, Date, Function, Math, Number, Object
write JS that detects when a web page has completely loaded
write JS that is able to get a reference to one or more DOM elements on the page.
write event handling JS code that responds to mouse and button clicks and utilizes the JS Event object
write JS that can modify the text and attributes of existing HTML elements
write JS that can create new HTML elements, set their text and attributes, and add them to the page DOM
utilize each of these W3C DOM methods: getElementsByTagName(), getElementById(), querySelector(), querySelectorAll(), getAttribute(), setAttribute(), appendChild(),removeChild()
store application data in arrays and a JS Object literal
explain what "use strict"; does
explain what the this keyword represents in JS
Web Applications
utilize HTML form elements and jQuery.ajax() to load JSON-P web service data from another domain.
validate user input for appropriate values
dynamically modify the ajax query string to change the results returned by the web service.
write code that parses the JSON-P data returned by the web service.
write code that modifies the page DOM in order to display the data in a meaningful way
jQuery
II. Course Outline by Topic
Module 0 - Fundamentals of Single-page web publishing (Weeks 1-2) - 2013-2014 only