HTML and CSS, from one file to a page you can send someone

The journey from a typed URL to a drawn page, the three languages that make it, and your first file open in a browser.

1. 1What Sits Between a URL and a PageBetween pressing Enter and seeing a page, seven things happen, and none of them are magic. Follow one request from your keyboard to a server on another continent and back, and see exactly which step you will be writing.→
2. 2Three Languages, Three JobsHTML, CSS, and JavaScript are not three ways to do the same thing — they answer three different questions, and mixing up which is which is the root of most beginner confusion. Strip a page back to each layer in turn.→
3. 3One File, One Browser, Nothing InstalledYou need a text editor and a browser, both of which you already have. Write eleven lines, save the file, double-click it, and you are a web developer — then learn the two habits that stop the next hundred files from being painful.→

Every element you will actually use, what each one means, and why the tag you choose is a claim about content rather than a choice of appearance.

1. 4Elements, Tags, and the Ones That Never CloseAn element, a tag, an attribute, and a value are four different things that everybody calls tags. Take one line of HTML apart piece by piece, and meet the handful of elements that have no closing tag at all.→
2. 5The Skeleton Every Page HasEvery page on the internet starts with the same dozen lines, and each one is doing a job you can name. Then see the same markup as a tree, because that is what the browser turns it into and what CSS selects from.→
3. 6Marking Words Up So They Mean SomethingThere are six heading levels and they are an outline, not six font sizes — using h3 because it looked right is a common HTML mistake. Learn what each text element claims, and which two look identical and are not.→
4. 7The Two Elements That Made the WebA link and an image are the whole reason the web is a web rather than a pile of documents. Both are one tag with one critical attribute — and both have a second attribute people skip that decides whether the page works at all.→
5. 8Data That Has ShapeLists are the most-used element on the web and most of them are not visibly lists. Tables are the most-abused element in its history. Learn what each is for, and the one rule that decides between them.→
6. 9Asking the Visitor for SomethingA form is the only part of HTML that sends data anywhere, and one unlabelled input is the difference between a usable form and an unusable one. Meet the input types that give phones the right keyboard for free.→
7. 10div Is the Last Resort, Not the FirstA div says nothing about its contents, and a page built from thirty of them is invisible to a screen reader, a search engine, and reader mode alike. Swap them for the elements that mean something and lose nothing at all.→

Getting styles onto a page, choosing what they apply to, and the two mechanisms — the cascade and the box model — behind most of what confuses people.

1. 11Three Ways In, One You Should UseCSS can be written in an attribute, in the head, or in its own file, and only one of those scales past a single page. See what a rule is made of, then meet the styles the browser applied before you wrote anything.→
2. 12Choosing What to StyleEverything CSS does begins with picking elements, and about eight selectors cover most of the cases you will meet. Try each against a real document and watch exactly which elements light up.→
3. 13Why Your Rule Did Not ApplyTwo rules target the same element and one of them wins, by a procedure that is completely deterministic and almost never taught. Score two selectors against each other and find out why the one you wrote lost.→
4. 14Every Element Is a Box With Four LayersSet an element to 300 pixels wide, add 20 pixels of padding, and measure it: it is 340. That one behaviour has confused every person who has ever learned CSS, and one line of code fixes it permanently.→
5. 15Readable First, Pretty SecondMost of what makes a page look designed is line height, line length, and contrast — three properties, none of them exciting. Learn the four ways to write a colour and why the default line-height is wrong for body text.→

Normal flow, then the two systems that replaced twenty years of workarounds, then making one page work on every screen.

1. 16Block, Inline, and the Normal FlowBefore any layout system, the browser already has one, and half of learning CSS layout is understanding what it does by default. Find out why width does nothing on a span and why an image leaves a gap underneath it.→
2. 17One Dimension, SolvedFlexbox exists because centring a box vertically used to require a genuine trick. Set four properties, watch a row become a column and back, and learn which axis each property is actually talking about.→
3. 18Two Dimensions, SolvedGrid is the first CSS layout system designed for layout rather than adapted into it, and it makes a page skeleton about four lines long. Draw columns, span a cell across two of them, and meet the unit that only exists here.→
4. 19One Page, Every ScreenA large share of the people reading your page are holding it in one hand, and a page that ignores that is unusable rather than merely ugly. Drag a viewport across a breakpoint and watch a media query fire.→

One page, start to finish. All of the markup before any of the styling, on purpose — and the reason that order matters.

1. 20The Whole Page in HTML, Before Any CSSBuild a complete personal site as markup alone — no styles, no colours, nothing but structure. It will look like a 1994 document, and it will already be readable, navigable, and correct, which is the entire point.→
2. 21From Unstyled Markup to Something You Would Show SomeoneTake the page from the last chapter and style it in five passes, in an order that stops you from repainting the same thing four times. Reset, tokens, typography, layout, detail — and no markup changes at all.→

Making it work for everyone, reading what the browser actually did with your code, and getting the result onto the internet.

1. 22It Works for Everyone or It Does Not WorkMost accessibility is not extra work — it is the HTML you already know, used correctly, plus enough contrast to read. Check a real colour pair against the standard and find out how many popular palettes fail it.→
2. 23Reading What the Browser Actually DidEvery browser ships a tool that shows you the live page, every rule applied to any element, and which ones were crossed out and why. Most beginners never open it, and it answers nearly every question they ask.→
3. 24Getting It on the InternetA folder of HTML files is a website the moment somebody else can open it, and for a static page that is free and takes about five minutes. Then the three checks worth doing before you send anyone the link.→