HTML, CSS & JavaScript

Overview

The three languages every browser on Earth speaks fluently. HTML gives pages structure. CSS makes them look like something. JavaScript makes them respond. Master these and 95% of frontend work is just variations on what you already know.

What you'll learn

• Semantic HTML that screen readers and search engines actually understand.
• The CSS box model, flexbox, and grid — the three foundations of every layout you'll ever build.
• Modern JavaScript: variables, functions, the DOM, events, and async/await without the panic.
• Why Tailwind CSS won and how to use it without writing 80-character class soup.

Lessons in this chapter

All lessons are free and open — start anywhere, in any order.

1. 1

   HTML — The Skeleton

   Tags, structure, semantics. Build pages search engines and screen readers actually understand.

   112 min
2. 2

   CSS — The Style

   Selectors, the box model, flexbox & grid. The art of making things not ugly.

   116 min
3. 3

   JavaScript — The Brain

   Variables, functions, the DOM, events. The language that makes pages do things.

   118 min
4. 4

   Common Mistakes & How to Avoid Them

   The 5 traps beginners fall into when working on html, css & javascript — and the fix for each.

   111 min
5. 5

   A Real-World Walkthrough

   A start-to-finish example of applying html, css & javascript to a real project you can copy.

   111 min
6. 6

   Mental Models That Actually Help

   The 3 mental models we keep coming back to when things get hard in html, css & javascript.

   111 min

Glossary

Key terms used throughout this chapter.

DOM

Document Object Model — the live tree of HTML elements your JavaScript can read and change.

Selector

A CSS rule that targets HTML elements (`.btn`, `#logo`, `a:hover`).

Box model

Every element has content, padding, border, margin. Get this wrong and everything is misaligned.

Flexbox

1-D layout for rows or columns. Easiest way to align things.

Grid

2-D layout for actual grids. More powerful than flex when you need columns AND rows.

Closure

A JS function that 'remembers' the variables from where it was created.

Async/await

Modern JavaScript syntax for handling code that takes time (API calls, file reads).