Quick Start Guide · 08 · Level 2
Stop guessing at design — build a system.
Nine chapters that replace trial-and-error CSS with decisions you can defend: real layout tools, a spacing and type scale, colour that passes contrast, and motion with restraint.
30-day money-back guarantee. Payment is handled by Paddle, our Merchant of Record. See the refund policy and terms.
Quick Start Guide · 08
HTML & CSS Level 2
A real
interface
Level 2
What's inside
Nine chapters, from layout to shipped.
01
Where level 2 picks up
A short look at the layout problems flexbox actually solves, and what you already know.
02
Flexbox, properly
Main axis, cross axis, wrapping, and the alignment properties that end the fiddling.
03
CSS grid for page structure
Named areas, sidebars, and card grids that reflow without a media query.
04
Responsive design, mobile first
Breakpoints as a content decision, min-width queries, and fluid units that need fewer of them.
05
Design tokens: spacing, type, and naming
Custom properties, a type scale, and choosing values once instead of every time.
06
Colour, contrast, and dark mode
Contrast that passes, colours named by role, and a dark mode built on the same names.
07
Accessibility: semantics, labels, and focus
Semantic HTML, labelled inputs, visible focus, and a keyboard pass over your own page.
08
Motion, transitions, and states
What to animate, what never to, and respecting people who ask for less movement.
09
Polish and shipping
Favicons, link previews, a performance checklist, and the last pass before anyone sees it.
Look inside
Three real pages from the 33-page PDF.
Rendered straight from the file you'll download — an explanation, a worked step, and a page from the build. No mock-ups, no stock screenshots of someone else's screen.
CheckMate — the small task tracker every SecondNature code guide builds — is what these pages are working towards. Foundations gets it running; Level 2 makes it real. See the rest of the collection →
Who it's for
People whose pages work but never look finished.
You can build a page. This guide gives you the reasons behind the choices — why this spacing, this size, this colour — so the result looks deliberate instead of nudged into place.
Still no frameworks and no build tools. A text file, a browser, and a system you can reuse on anything.
Questions
Before you buy
Do I need the beginner HTML & CSS guide?
It helps, but any working knowledge of tags and selectors is enough to start.
Is this Tailwind or Bootstrap?
No. It's plain CSS — the understanding every framework assumes you already have.
Does it cover accessibility seriously?
Yes, a full chapter: semantics, labels, focus states, keyboard use, and contrast.
What do I get after checkout?
An instant download link for a clean, print-friendly PDF. Yours to keep, on any device or printed.
The collection this belongs to
All five Level 2 guides for $77.
The same five subjects one level up: related tables behind the app, a real interface on top, code with structure, and a deploy that happens on its own. Each guide adds a feature to the project the beginner five built.
Python Level 2 · SQL Level 2 · HTML & CSS Level 2 · JavaScript Level 2 · Git & GitHub Level 2 · 166 pages in total
$77
$90 bought separately · save $13
Instant download · 30-day money-back guarantee · payment handled by Paddle.
An interface, not just a page.
33 pages · $18 · instant download · yours to keep.
Free sample chapter
Read chapter one before you spend anything
Seven pages from the Python guide — the start of CheckMate, the small task tracker the code guides build. It shows you exactly how a guide reads: what the tool is for, where it fits in a real app, and how the next guide picks the project up. Send us an address and it lands in your inbox in a moment.