tutorpackSee prices
All courses

Programming · course 14 of 105

HTML & CSS With No Surprises

Build your first web page with clean HTML, then predict exactly what your CSS will do: which elements a selector picks, which rule wins, and how wide a box really is.

4 modules

Try a question

Not on sale yet. When sales open: $4.99 USD for this course, paid once, or every course for $9.99 USD a month. Prices

Runs in Claude (claude.ai, the Claude apps or Claude Code) with your own Claude account. A course opens there as soon as your payment goes through; nothing is shipped.

Preview

What it teaches

How to write a clean HTML page (tags, attributes, links, images with good alt text, lists, headings, the head and the doctype), how CSS selectors pick elements, and how to predict what your CSS will do: which rule wins (specificity, order, inline styles, inheritance) and how big a box really is (padding, border, margin, box-sizing). The AI asks 3 questions, places you, shows a short card per module, then gives you one item at a time: you write the markup, name what a selector picks, or say what colour or width the browser will show, and it checks you against an answer key: everything about what the browser shows was read from a real browser.

How long

51 items. About 35-60 rounds plus a 12-item final: 2-3 sessions (estimate, not timed with a real student). The tutor gives a one-line save code at the end of each session.

The modules

4 modules, drilled one item at a time.

  1. M0

    The words

    Concept questions

  2. M1

    Writing HTML

    Say what the browser shows, or write the markup

  3. M2

    CSS selectors

    Name which elements a selector picks, or write the selector

  4. M3

    Which rule wins, and how big is the box

    Cascade, specificity, box model

Before it teaches, it asks

  1. 1
    What do you want to build (a page for a business, a portfolio, a school task), and have you written any HTML or CSS before?
    AI voice (ElevenLabs)
  2. 2
    What text does the visitor see, and which page does a click open?<a href="contact.html">Write to us</a>
  3. 3
    Which elements does .card p select?
    Show the code it asks about (23 lines)<header><h1 class="title">Rosa's Bakery</h1><nav><a href="/" class="active">Home</a><a href="/menu">Menu</a></nav></header><main><p class="intro">Fresh bread daily.</p><section class="card" id="bread"><h2>Bread</h2><p>Sourdough</p><p class="price">$6</p></section><section class="card special" id="cake"><h2>Cake</h2><p>Carrot cake</p><p class="price">$4</p></section></main><footer><p>Open 7 to 3</p></footer>

What’s exact, and what isn’t

Show

Straight from the course’s own notes.

Produced by a real browser
Every answer about what a browser does (which words end up italic, which elements a selector picks, every colour, width and gap) was read from Google Chrome 155 running the item’s exact code. Of the 31 listed wrong answers, the ones for 9 questions were produced by running or recomputing the mistake in Chrome; the rest are only checked to differ from the right answer. A planted-error test (4 deliberate errors) was caught.
Computed
Specificity counts (ID-CLASS-TYPE), from MDN’s three-column rule.
Sourced
Definitions and rules from MDN Web Docs, short quotes matched word for word on the pages on 2026-10-10.
Honest limit
The tutor can’t run your code. It grades what you type against each question’s required points, and the browser answers come from Chrome; other browsers should agree on what is taught here, but that was not tested.
Not in it yet
JavaScript, layout (flexbox, grid), responsive design, forms, deeper accessibility.