Introduction to HTML & CSS

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

Cover of HTML and CSS: Design and Build Websites Recommended reading: HTML and CSS: Design and Build Websites

Week 1: Getting started

Topics
Slides for Week 1
Homework
  • Add an "About me" page to the website you created in class
    • Create a new HTML document
    • Use CSS to make your page look nice
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
  • CSS box model - margin and padding
  • Organizing your website, move your styles to an external stylesheet
  • Create a "hero image" for your website using a CSS background image
Slides for Week 2
Homework
  • Move your styles for "About me" to an external stylesheet
  • Add a style override on an element or in the page head
Optional: read chapters 10-12 and 16 of HTML and CSS: Design and Build Websites
Tools

Week 3: More CSS box model

Topics
  • Block versus inline elements - demo
  • CSS box model - borders
  • Understanding classes and ids
  • Style some pseudo-elements
  • Create a horizontal nav menu using display properties
Slides for Week 3
Homework
  • Add a class to an element on your webpage and style it
  • Add an id to an element on your webpage and style it
  • Consider adding a "jump link" to an element with an id
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 and flex, media queries, web fonts

Topics
  • Floats (demo) and flex for layout
  • Using web fonts
  • Using @media for responsive design
Slides for Week 4
Homework
  • Add a footer to your site
  • Use an icon font to create links to social media
  • Use flex or float to put your content into columns
Optional: read chapters 15 and 17 of HTML and CSS: Design and Build Websites
Tools

Week 5: Positioning, CSS animation, forms, Javascript

Topics
  • Positioning
  • CSS filters, transition, opacity
  • Supplemental technologies: Javascript, jQuery
Slides for Week 5
Homework
  • Ask any burning questions you still have!
Tools

Contact me

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