Note: This document is a work in progress. You can help improve it.

Come Visit Mars


Introduce the project, a Martian travel brochure website.

Semantic Markup

Talk about marking up the HTML required for the document.

Tags and Attributes

Semantic vs. Non-semantic Tags

Talk about tags with semantic meaning, vs. those without it. Define "semantic" in the context of HTML.

Typography and Theme

Basic CSS

CSS Selectors

The "cascading" nature of CSS: Specificity and Precedence

Linking to External Media

  • External Stylesheets <link>
  • Adding Images <img>

Basic Layout

Begin laying out the page with some basic layout CSS:

  • A single centered column
  • Centered images with captions
  • An aside, inset in the text.
  • Start laying the foundations of mobile-first responsive design.


  • Add additional pages to the website
  • Navigation styling, <nav>, <ul>, etc.


  • A simple contact <form> and related CSS

Responsive Layouts


  • Switch to a two-column layout for the page.

Media Queries

  • Keep a single column on small screens
  • Two columns where available.