Technology & Coding

Building Your First Website with HTML and CSS

Go from a blank file to a real, responsive, published web page you wrote and styled yourself.

This course is for members

$9 unlocks every course in the library, this one included, plus a credit to build a topic of your own and at least 10 new courses every month.

Join for $9Sign in

What you will learn about Building Your First Website with HTML and CSS

The 7-day sprint
  1. Your First HTML File. A web page is just a plain text file with tags in it, and a browser is a program that reads that file and draws it.
  2. Structure and Meaning. Choose HTML tags for what the content means, not for how it looks, because meaning is what browsers, search engines, and screen readers rely on.
  3. Links, Images, and Attributes. Attributes go inside the opening tag and configure an element, and the two you will use most are href for where a link goes and src for what image to load.
  4. CSS, Selectors, and the Cascade. CSS is a list of rules that say which elements to target and what to change about them, and when rules collide the more specific and later rule wins.
  5. The Box Model and Spacing. Every element is a rectangular box made of content, padding, border, and margin, and nearly every layout frustration is really a spacing question.
  6. Layout with Flexbox. Flexbox lays out a row or column of items inside a container and controls how leftover space is distributed between them.
  7. Responsive Design and Going Live. A good page adapts to the screen it lands on, and putting it on the internet is a free, ten-minute task once the files are in order.
The 80/20: the 6 concepts that matter most
  • Semantic HTML and the document tree
  • The box model
  • Selectors, the cascade, and specificity
  • Flexbox for layout
  • Responsive design with flexible units
  • Developer tools as your feedback loop
The core idea, explained like you are 5

A web page is a nested set of boxes: HTML names each box and puts content in it, CSS tells the browser how to draw each box, and the browser does the rest.

Then the quiz and the ladder

10 questions that correct you when you are wrong, and beginner, intermediate, advanced levels, each with a practical exercise.