HTML & CSS

The elements that give a document structure and meaning, before any styling exists.

1. 1What Is HTML and CSS?7 minThree technologies behind every web page — what HTML, CSS and JavaScript do, how a browser turns a document into what you see, and why separating structure from presentation matters.
2. 2Document Structure and Boilerplate7 minThe handful of lines every HTML page starts with — doctype, lang, head metadata and body — and why each one exists, plus comments, void elements and whitespace collapsing.
3. 3Text, Headings and Lists8 minThe elements that carry almost all written content — headings, paragraphs, emphasis, line breaks, and ordered, unordered and description lists.
4. 4Links and Navigation8 minThe anchor element — relative and absolute paths, linking within a page, opening links safely in a new tab, and mailto and tel links.
5. 5Images and Media8 minThe img element and why alt text is never optional, width and height as a layout-shift fix rather than a sizing tool, figure and figcaption, and embedding audio and video.
6. 6Semantic HTML9 minheader, nav, main, article, section, aside and footer — the elements that expose real landmark roles to assistive technology, and when div and span are still the right choice.
7. 7Tables7 minMarking up real tabular data correctly with table, thead, tbody, th and scope — and why using tables for page layout is a historical anti-pattern to avoid.

Collecting input from a visitor, and building pages that work for everyone who visits.

1. 8Forms and Inputs9 minform, label, input types, select, textarea and button — how to collect input correctly, associate labels with controls, and avoid the common button-type gotcha.
2. 9Form Validation8 minBuilt-in HTML validation — required, pattern, min/max, length limits — styling with :valid/:invalid, grouping with fieldset, and why client-side validation is UX, not security.
3. 10Accessibility Fundamentals10 minTying together semantic HTML, alt text and labels with new ground — WCAG contrast ratios, visible focus states, tabindex, skip links, and why no ARIA is better than bad ARIA.

Selectors, the cascade, and the box model — the rules that decide how anything looks.

1. 11Introducing CSS6 minThe three ways to attach CSS to a page — inline styles, a style block, and an external stylesheet — and the basic rule syntax every stylesheet is built from.
2. 12Selectors and Specificity9 minType, class, ID, attribute and combinator selectors, plus pseudo-classes and pseudo-elements, and the real rule for which of two conflicting rules wins.
3. 13The Cascade and Inheritance8 minHow equal-specificity rules resolve by source order, which properties inherit down the document by default and which don't, and the inherit, initial and unset keywords.
4. 14The Box Model9 minContent, padding, border and margin as nested boxes, the real difference between content-box and border-box sizing, and how vertical margins collapse between block elements.
5. 15Display and Visibility8 minThe core display values — block, inline, inline-block and none — and the real three-way distinction between display:none, visibility:hidden and opacity:0 for hiding an element.
6. 16Units and Sizing8 minpx, em, rem, percentages and viewport units, what each is relative to, the em compounding gotcha, why rem is the common default, and why unitless line-height usually wins.

Flexbox and grid, and the positioning rules that sit underneath both.

1. 17Flexbox Fundamentals9 mindisplay flex and the main axis — flex-direction, justify-content, align-items, flex-wrap, and the flex-grow/shrink/basis shorthand that makes items share space.
2. 18Flexbox in Practice9 minReal flexbox patterns — a navbar with space-between, equal-height cards via stretch, centering with justify-content/align-items, gap instead of margin hacks, order, and align-self.
3. 19CSS Grid Fundamentals9 mindisplay grid, grid-template-columns/rows with the fr unit, gap, naming regions with grid-template-areas/grid-area, and placing items by line number with grid-column/grid-row.
4. 20CSS Grid in Practice9 minA full-page header/sidebar/main/footer layout with grid-template-areas, a responsive card grid using repeat(auto-fit, minmax()), and when to reach for grid versus flexbox.
5. 21Positioning8 minstatic, relative, absolute, fixed and sticky positioning, what each is relative to, the nearest positioned ancestor rule for absolute, the sticky/overflow gotcha, and z-index.

Building one page that genuinely works from a phone to a widescreen monitor.

1. 22Responsive Design and Media Queries9 minWhat "responsive" means as a design goal, @media query syntax, min-width versus max-width breakpoints, and why the viewport meta tag must be present for any of it to work on a phone.
2. 23Responsive Images9 minsrcset and sizes for letting the browser pick the right resolution, <picture> for art direction, object-fit/object-position for fixed-size containers, and the loading="lazy" attribute.
3. 24Mobile-First Design8 minWriting base CSS for the smallest screen and layering on complexity with min-width queries, why that's simpler than desktop-first, and touch-target/hover-state realities for phones.

Colour, type, motion and polish — the difference between working and finished.

1. 25Colors and Backgrounds8 minThe color formats CSS understands — keyword, hex, rgb() and hsl() — background-image with linear-gradient, controlling size/position/repeat, and the currentColor keyword.
2. 26Typography9 minFont stacks and the five generic fallback families, loading a web font, font-weight/style/line-height, text-align/letter-spacing/text-transform, and the zero-download system font stack.
3. 27CSS Custom Properties (Variables)8 minDeclaring --custom properties on :root, reading them with var(--name, fallback), the one-line theme-change use case, and how they inherit and can be overridden per scope.
4. 28Shadows, Borders and Gradients8 minborder-radius including elliptical corners and pill/circle shortcuts, box-shadow syntax with inset and stacked shadows, radial-gradient(), and text-shadow.
5. 29Transitions and Animations9 minThe transition shorthand and why not every property can meaningfully transition, @keyframes and the animation shorthand for multi-step motion, and respecting prefers-reduced-motion.
6. 30Transforms7 mintranslate(), scale(), rotate() and skew(), combining multiple functions in one declaration, transform-origin, and why transform/opacity are best for smooth animation.

The tools and habits that turn writing HTML and CSS into a repeatable practice.

1. 31Browser DevTools8 minOpening your browser's devtools — editing the DOM in Elements, reading the Styles pane and cascade, the box model diagram, the Computed tab, and the responsive device toolbar.
2. 32Debugging Common Layout Bugs10 minA checklist of common CSS layout bugs — margin collapsing, flex/grid overflow, whitespace gaps, dead z-index, clipped shadows, and box-sizing mismatches — and how to fix them.