ITD 110 (Web Page Design I)

Competency List

Development Environment
  • Manage files and directories on a Unix web server.
  • Edit text files with a text editor.
  • Log-on to a remote server and move files between the remote and local machines.
  • List the components of a minimal html page that passes w3c validation.
  • Use http://validator.w3.org to check web pages for correct syntax.
  • Interpret syntax checker error and warning messages and make corrections accordingly.
  • Correctly use the <title></title> element paired with an h1 element at the beginning of the body.
  • Use heading elements to label sections and subsections of a web page.
  • Create syntactically correct ordered, unordered, and definition lists.
  • Demonstrate an understanding of the difference between block level and inline elements.
  • Correctly use <pre></pre> elements for preformatted text.
  • Use <strong></strong>, <b></b>, <em></em>, <i></i>, <q></q>, <code></code>, <kbd></kbd>, <sup></sup>, <sub></sub>, and <button></button> elements appropriately.
  • Use object elements <br> and <hr> to insert line breaks and horizontal lines.
  • Use <img> elements to insert images into a web page.
  • Use hyperlink (<a></a>) elements with hypertext references to create links between documents.
  • Recognize and use special characters for displaying <, >, and & for marking up html source examples.
  • Use <table></table>, <tr></tr>, <th></th>, and <td></td> elements to create tables.
  • Use the new html 5 <header></header>, <footer></footer>, <nav></nav>, <main></main>, and <section></section> elements in a semantically appropriate way.
CSS Concepts
  • Recognize selectors, declaration blocks, declarations, and property-value pairs in a style sheet.
  • Create syntactically correct styles and validate style sheets using the w3c CSS syntax checker.
  • Apply style sheets to a web page using inline, internal, and external style sheets.
  • Use <div></div> elements to create styles that act on a section (division) of a document.
  • Use the CSS list-style-type property to customize lists.
  • Use :link, :visted, :hover, and :active pseudo-classes to style hyperlink elements.
  • Use group selectors to style a group of elements.
  • Use class and id selectors to localize styles.
  • Use descendent selectors to style elements with specified nesting.
  • Use child selectors to style child elements.
  • Use adjacent sibling selectors to style adjacent elements.
  • Use the universal selector (*) both alone or as part of a decendant selector.
CSS Design
  • Use color and background-color properties with keyword, hexidecimal, and rgb values to color page elements containing text.
  • Use the text-align property to align text elements.
  • Use font-family, font-style, and font-weight properties to style text.
  • Use the font-size property with keyword, pixel, percent, em, and vh/vw values to specify text size.
  • Use text-transform, font-varient, and text-decoration properties to alter the display of text.
  • Demonstrate an understanding of the CSS box model by using margins, borders, and padding effectively.
  • Use the float property to arrange elements on a page.
  • Read and write numbers in hexadecimal notation.
  • Demonstrate an understanding of the difference between absolute and relative size units.
  • Describe the effect that inheritance of the font-size property with relative units has on nested lists.