HTML & CSS: Level 1

An introductory course about HTML & CSS principles and practices, taught by Beck Johnson for the School of Visual Concepts in Seattle.

Week 1: Getting started


Topics
  • Anatomy of a basic HTML document
  • HTML elements
  • Building a simple web page
  • Introduction to CSS
Slides for Week 1
Homework
  • Create a website about a topic you're interested in
    • Build at least two pages that link to each other
    • Use the tags we discussed in class
    • Add some styles in the head of your document
Optional: read chapters 1-5 of HTML and CSS: Design and Build Websites
Tools
  • Validate your markup with the W3C Validator
  • Use View source to see how any website is made!
    • In your browser, right-click, then click View source
    • Or, right-click, then click Inspect to access DevTools. The default view shows the site's markup.
  • Learn more about relative vs absolute pathnames

Week 2: More CSS


Topics
  • Image format overview
  • Optimizing web images
  • CSS background images and pseudo-elements
Slides for Week 2
Homework
  • Optimize your images
  • Create a "hero image" for your website
  • Move your styles to an external stylesheet
  • Style some pseudo-elements
Optional: read chapters 10-12 and 16 of HTML and CSS: Design and Build Websites
Tools

Week 3: the CSS box model


Topics
  • Block versus inline elements - demo
  • The CSS box model
  • Understanding classes and ids
Slides for Week 3
Homework
  • Demonstrate the box model by adjusting padding, margins, and borders
  • Create a horizontal nav menu using display properties
Optional: read chapter 13 of HTML and CSS: Design and Build Websites
Tools
Optional: read chapter 8 of HTML and CSS: Design and Build Websites

Week 4: Floats, Classes & IDs, Web fonts


Topics
  • Class and ids
  • Floats and positioning - demo
  • Using web fonts
Slides for Week 4
Homework
  • Apply classes and IDs and use them for styling
  • Create a design that uses floats
  • Use custom fonts and Font Awesome icons on your site
Optional: read chapters 15 and 17 of HTML and CSS: Design and Build Websites
Tools

Week 5: Layouts, tables, forms, Javascript


Topics
  • Positioning
  • Creating a form
  • The table tag and when to use it
  • Supplemental technologies: Javascript, jQuery
Slides for Week 5
Homework
  • Add a form and a table and style them
  • Ask any burning questions you still have!
Optional: read chapters 6-7 of HTML and CSS: Design and Build Websites

Contact me


Feel free to email me anytime at beckjohnson@gmail.com