Competencies
| Topic | Competency | Evaluation Methods |
|---|---|---|
| Review Topics | Illustrate and label the box model |
|
| Recognize the structure of CSS style rules: selector, declaration, property |
|
|
| Identify the appropriate use of the following CSS selector types: element selectors, ID selectors, class selectors, pseudo-class selectors, and descendant selectors |
|
|
| Provide examples of proper semantic names for id and class selectors |
|
|
| Identify the difference between id and class selectors |
|
|
| Provide concrete examples of how web standards development techniques benefit businesses and Web users |
|
|
| CSS Shorthand | Recognize and write CSS shorthand techniques that can make CSS code less verbose |
|
| Use CSS shorthand techniques for the background, border, font, color, margin, and padding properties to create efficient and concise style sheets |
|
|
| Positioning Schemas | Identify the differences between static, relative, absolute, and fixed positioning schemas |
|
| Explain the term "document flow" |
|
|
| Recognize browser support for static, relative, absolute, and fixed positioning schemas |
|
|
| Recognize which of the positioning schemas are within the document flow and which are outside of the document flow |
|
|
| Use positioning schemas to layout a web page |
|
|
| Floating Elements | Recognize that floated elements are outside of the document flow |
|
| Recognize that floated elements are automatically block level elements |
|
|
| Recognize that floated elements descend into the content that follows |
|
|
| Use the CSS float property to create a multi-columned page layout |
|
|
| Use the CSS float property to transform an unordered list of navigation links into a horizontal navigation bar |
|
|
| Identify and use techniques to clear floated elements so that they can be contained by a parent element |
|
|
| (X)HTML Forms | Describe and diagram the relationship between (X)HTML forms and server-side technologies |
|
| Define form validation and describe how it is accomplished |
|
|
| List popular server-side technologies often used to process content sent from (X)HTML form |
|
|
| Create an accessible (X)HTML form using using these elements: form, fieldset, legend, label, input (radio, checkbox, submit, reset, image, password, hidden), textarea, select, option, button |
|
|
| Connect a (X)HTML form to a server-side script for processing |
|
|
| Use CSS to make a (X)HTML form attractive and usable |
|
|
|
Advanced (X)HTML Elements |
Recognize the appropriate use for the elements address, code, cite, abbr, acronym, dfn, superscript, subscript, hr, del, and ins |
|
| Recognize the appropriate use of the HTML 5 elements header, footer, nav, article, aside |
|
|
| Image Replacement Techniques | Use image replacement techniques to present unique design elements with accessible, search engine friendly text alternatives |
|
| List and describe popular image replacement techniques and identify the benefits and shortcomings of each |
|
|
|
Advanced CSS Selectors |
Describe the function of attribute selectors, selector grouping, child selectors, adjacent sibling selectors, and general sibling selectors in CSS |
|
| Recognize browser support for attribute selectors, selector grouping, child selectors, adjacent sibling selectors, and general sibling selectors |
|
|
| Use attribute selectors, selector grouping, child selectors, adjacent sibling selectors, and general sibling selectors when designing a web page |
|
|
| Microformats | Explain what microformats are and recognize the benefits of using them to markup various types of content |
|
| Define and describe the Semantic Web. |
|
|
| Use microformats to markup contact (hCard), and event (hCalendar) information |
|
|
| Use a microformats translation tool (such as http://technorati.com/contacts/) to create a link that allows users to download or move the content to another location (e.g. translate hCard to vCard for download into an address book program). |
|
|
| Use CSS to style microformat content |
|
|
| Image Tiling Techniques | Use the background property to tile images horizontally and vertically |
|
| Use image tiling techniques to create faux columns in order to resolve design problems when columns are of disparate heights |
|
|
| Use image tiling techniques to create the illusion of shadow, and depth |
|
|
| Trouble-shooting Layout Using Firebug | Identify display issues in a web page then use Firebug - a web development add-on for the Firefox browser - to quickly manipulate CSS and identify solutions to the problem. |
|
| Accessibility | Define the term accessibility. |
|
| Write markup that facilitates accessibility. |
|
|
| Recognize the role the W3C plays in defining accessibility standards. |
|
|
| Create a website that passes WCAG priority 1 validation. |
|
|
| Interantionalization | Identify core techniques required to present content in an international format. |
|