A starter path that actually ships pages

2026-05-25 · HTML / CSS · first month

Beginners rarely lack content—they lack finish lines. Fifty tutorials can leave you with zero pages you are willing to show, which makes every new tutorial feel like a reset. The path below is boring on purpose: it optimizes for shipped HTML you can explain, not for the illusion of progress.

Step 1 — Pick one docs tab and treat it as law

Pin MDN Web Docs as your default appeal court. When a blog post, a video, and your browser disagree, MDN wins until you prove otherwise in a test file.

Use W3Schools the way you use a cheat sheet: after you know the idea, when you only need syntax in a hurry. Reading W3Schools alone is like learning recipes without tasting food.

Suggested reading order inside MDN (with a page to build after each block):

• Document structure (html, head, body) → ship a blank titled page
• Text, links, lists → ship a bio with ten real outbound links
• Box model and display → ship a two-column text layout
• Flexbox basics → ship a row of cards that wraps on narrow screens

Step 2 — Ship ugly pages on a deadline

Give each exercise a time box you cannot cheat:

• Two hours — personal intro with headings and one external link
• One evening — a link hub that mirrors what this site’s Resources page does
• Weekend — a styled index with a sidebar, even if the colors hurt

Neocities (or any static host) matters here: uploading forces you to confront paths, filenames, and case sensitivity—bugs you will not meet if everything stays on disk as file://.

Step 3 — Close the feedback loop in the browser

DevTools is not optional decoration. Train the reflex: select an element on screen, find the node in markup, edit one property, refresh once. If you use a live-preview tab with two-way highlight, use the same discipline—click first, then change.

Within your first ten pages, resize the window to phone width at least once per session. Layouts that only exist at 1280px are unfinished layouts; retro grids are especially good at punishing late fixes.

Step 4 — Write in public, but in the right drawer

Put URLs on your Resources shelf with a when-to-use line—public writing forces you to justify the bookmark. Put narratives in the Journal when you have a story about mistakes, not when you have another link. See Split your notes: shelf vs. story for why the drawers differ.

Traps that look like learning

• Framework first — abstractions hide broken HTML; you will debug someone else’s mental model
• Endless redesign — changing fonts for a week without a saved “done” copy means you never diff what improved
• Bookmark hoarding — collecting Udemy courses without a shipped page is a hobby, not practice
• Parallel curricula — two unrelated course orders will fight over vocabulary and priorities

What “done” looks like at day thirty

You do not need mastery. You need evidence:

• At least three live URLs you authored
• One page you can walk through line by line in view-source
• A short list of links you personally reopened—and sentences that say why