html-and-css-outline.md

HTML and CSS

HTML

• Structure
  • Basic building blocks (doctype, body etc.)
• Elements
  • The most basic elements
    • Headlines
    • Paragraphs
    • div
    • (span)
  • More advanced elements
    • Lists
    • Tables
    • Forms
  • Less common elements
    • Blockquotes etc.
  • New HTML5 elements
• Semantic markup

CSS

Basics of CSS

• Basic styling
  • Pseudo classes
• Basic layout
• Box model
• Positioning
• The cascade (inheritance, specificity)
  • multiple IDs, classes etc.
• Styling of forms
• Media queries

Tools

• Firebug / Inspector

Extra curricular stuff

• CSS3 fallbacks, how to degrade well in older browsers
• Maintainable CSS
• Agent (browser), reader and author stylesheets (?)

Lab structure

Method

• Labs are divided into steps
• Participants begin with an empty file
• Instructor displays the complete, rendered result in browser
• Participants should interpret and try to replicate
• Each lab is divided into a subfolder named labX containing an index.html and a solution.html

lab1/
    index.html
    solution.html
lab2/
    index.html
    solution.html
lab3/
    index.html
    solution.html

HTML basics (no styling)

Lab 1

• Create the basic document structure (HTML, HEAD, BODY etc.)
• Start with basic markup (set up a header, some paragraphs with linked text, an image etc.)

Lab 2

• How to create two lists (ordered & unordered)

Lab 3

• How to create a table

Lab 4

• How to create a form

Lab 5

• Walkthrough of classes and IDs
• Grouping with divs

Styling with CSS

Start with the basics

• How selectors work (element, class and ID)
• Properties
• Pseudo selectors (:link, :hover, :active, :visited)

Lab 6

• Tools
  • Chrome Inspector
  • Mention Firebug

Lab 7

• Basic layout
  • Floating an image
  • Inline vs block
  • Make two divs appear side by side
  • Positioning (static, fixed, relative, absolute)

Lab 8

• The cascade
  • How inheritance works
  • Specificity (chaining classes and IDs)