intro-html-css

intro-html-css

Feb.10-11, 2018 taught by Karen Dickenson

• Changes
  • changed IDE from Sublime to VS Code

Outline

• Session 1 (day 1)
  1. HTML (10am)
     1. What is HTML?
     2. Visual Studio set up Exercise
     3. Folder Structure Exercise - Create files
     4. Exercise - HTML skeleton in index.html
  2. Break (11am)
     1. Paragraphs & Headers with Exercise
     2. Links with Exercise
     3. Self-closing tags (img, br, hr) with Exercise
     4. POP QUIZ
  3. Break (11:30am)
     1. Unordered and Order Lists with Exercise
     2. HTML comments
     3. Tables, Character Codes, & debugging
  4. LUNCH (12:30pm)
  5. CSS (1pm)
     1. Intro to CSS with Exercise: add link in HTML
     2. Basic of CSS, elemenbt rules, attributes, focus on Color with Exercise
     3. Fonts with Exercise
     4. Child selectors with Exercise
     5. CSS comments; Inline, Embedded. & Linked CSS, Cascade
     6. "What's wrong with my code?"
  6. Assign homework, Q&A if needed (2:45)

• Session 2 (day 2)
  1. Review & Set Up (10am)
     1. Quick review of HTML, CSS, & debugging
     2. Exercise - Create new files
  2. HTML5 (10:30am)
     1. Intro to HTML5 structural elements (header, footer, main, aside, nav) with 2 Exercises
     2. Inline vs Block, Box Model
     3. Border with Exercise
     4. Padding with Exercise
     5. Margin with Exercise
     6. Properties: width, height with Exercise
  3. Lunch (12pm)
  4. POP QUIZ (12:30pm)
     1. Divs with Exercise
     2. IDs & Classes with Exercise
     3. Spans with Exercise
     4. Positioning: Static, Relative with Exercise
     5. Positioning: Fixed
  5. Break (1:30pm)
     1. Floats with Exercise
     2. Clear with Exercise
     3. Z-index with Exercise
  6. Conclusion (2:30pm)
     1. Debugging, and quiz
     2. Servers
     3. Domain
     4. Server, Domain & You
     5. What next?
     6. Q&A
     7. Workshop Survey