Guided Course · Foundation

HTML, CSS & Accessible UI Foundations

Build the first static TaskFlow interface while learning semantics, layout, responsive design, and accessibility.

Track project: Build Static TaskFlow. Finish the lessons, then close the transcript and build the project using evidence instead of copy-paste. Open project →

HTML Document Anatomy

Here’s the simple reason this matters: This lesson is about HTML Document Anatomy. Keep the idea practical: in the accessible and responsive static TaskFlow interface, the worked example should show that the browser receives a valid HTML document with language, metadata, title, and one main content region. Once you can explain why that happens, the name is much easier to remember. We connect it to the course project so you can see the idea working instead of memorizing a definition.

≈ 1993 words 02

Semantic Page Structure

Here’s the simple reason this matters: This lesson is about Semantic Page Structure. Keep the idea practical: in the accessible and responsive static TaskFlow interface, the worked example should show that landmark and heading semantics communicate page structure to browsers, assistive technology, and developers. Once you can explain why that happens, the name is much easier to remember. We connect it to the course project so you can see the idea working instead of memorizing a definition.

≈ 1959 words 03

Forms, Labels, and Inputs

Here’s the simple reason this matters: This lesson is about Forms, Labels, and Inputs. Keep the idea practical: in the accessible and responsive static TaskFlow interface, the worked example should show that clicking the label focuses the input, the control has a programmatic name, and native required validation participates in form submission. Once you can explain why that happens, the name is much easier to remember. We connect it to the course project so you can see the idea working instead of memorizing a definition.

≈ 2045 words 04

Lists and Tables for Application UI

Here’s the simple reason this matters: This lesson is about Lists and Tables for Application UI. Keep the idea practical: in the accessible and responsive static TaskFlow interface, the worked example should show that use lists for a collection of peer items and tables only when row/column relationships are meaningful. Once you can explain why that happens, the name is much easier to remember. We connect it to the course project so you can see the idea working instead of memorizing a definition.

≈ 2133 words 05

Keyboard and Accessibility Basics

Here’s the simple reason this matters: This lesson is about Keyboard and Accessibility Basics. Keep the idea practical: in the accessible and responsive static TaskFlow interface, the worked example should show that native controls are keyboard reachable by default and expose useful semantics without recreating them in div elements. Once you can explain why that happens, the name is much easier to remember. We connect it to the course project so you can see the idea working instead of memorizing a definition.

≈ 2028 words 06

CSS Cascade, Inheritance, and Specificity

Here’s the simple reason this matters: This lesson is about CSS Cascade, Inheritance, and Specificity. Keep the idea practical: in the accessible and responsive static TaskFlow interface, the worked example should show that the final value depends on matching rules, specificity, source order, and inheritance—not on which line looks visually closest. Once you can explain why that happens, the name is much easier to remember. We connect it to the course project so you can see the idea working instead of memorizing a definition.

≈ 2069 words 07

Box Model and Sizing

Here’s the simple reason this matters: This lesson is about Box Model and Sizing. Keep the idea practical: in the accessible and responsive static TaskFlow interface, the worked example should show that with `border-box`, the declared width includes padding and border, making layout math easier to reason about. Once you can explain why that happens, the name is much easier to remember. We connect it to the course project so you can see the idea working instead of memorizing a definition.

≈ 2011 words 08

Flexbox Layout

Here’s the simple reason this matters: This lesson is about Flexbox Layout. Keep the idea practical: in the accessible and responsive static TaskFlow interface, the worked example should show that toolbar items align on one axis, can wrap, and the search control can grow while respecting a useful basis. Once you can explain why that happens, the name is much easier to remember. We connect it to the course project so you can see the idea working instead of memorizing a definition.

≈ 1957 words 09

Grid Layout

Here’s the simple reason this matters: This lesson is about Grid Layout. Keep the idea practical: in the accessible and responsive static TaskFlow interface, the worked example should show that grid explicitly defines the sidebar/content columns while `minmax(0, 1fr)` prevents overflowing content from forcing the grid wider. Once you can explain why that happens, the name is much easier to remember. We connect it to the course project so you can see the idea working instead of memorizing a definition.

≈ 1950 words 10

Responsive Design

Here’s the simple reason this matters: This lesson is about Responsive Design. Keep the idea practical: in the accessible and responsive static TaskFlow interface, the worked example should show that the same content reflows to one column at a narrow viewport without requiring separate mobile markup. Once you can explain why that happens, the name is much easier to remember. We connect it to the course project so you can see the idea working instead of memorizing a definition.

≈ 1933 words 11

Hover, Focus, Disabled, and Error States

Here’s the simple reason this matters: This lesson is about Hover, Focus, Disabled, and Error States. Keep the idea practical: in the accessible and responsive static TaskFlow interface, the worked example should show that mouse, keyboard, disabled, and validation states remain visually distinguishable and usable. Once you can explain why that happens, the name is much easier to remember. We connect it to the course project so you can see the idea working instead of memorizing a definition.

≈ 2064 words 12

CSS Custom Properties and Design Tokens

Here’s the simple reason this matters: This lesson is about CSS Custom Properties and Design Tokens. Keep the idea practical: in the accessible and responsive static TaskFlow interface, the worked example should show that components consume named design decisions instead of repeating raw values, so themes can change through tokens. Once you can explain why that happens, the name is much easier to remember. We connect it to the course project so you can see the idea working instead of memorizing a definition.

≈ 2093 words 13

Build Static TaskFlow

Here’s the simple reason this matters: This lesson is about Build Static TaskFlow. Keep the idea practical: in the accessible and responsive static TaskFlow interface, the worked example should show that the finished static prototype has semantic structure, accessible controls, reusable tokens, and a responsive layout before JavaScript is added. Once you can explain why that happens, the name is much easier to remember. We connect it to the course project so you can see the idea working instead of memorizing a definition.

≈ 2018 words

Track knowledge check

Check the mental models before the project

Answer from memory. If two options sound similar, explain the boundary difference before choosing.

01Which statement best explains “HTML Document Anatomy” in this track?

02Which statement best explains “Semantic Page Structure” in this track?

03Which statement best explains “Forms, Labels, and Inputs” in this track?

04Which statement best explains “Lists and Tables for Application UI” in this track?

05Which statement best explains “Keyboard and Accessibility Basics” in this track?

06Which statement best explains “CSS Cascade, Inheritance, and Specificity” in this track?

07Which statement best explains “Box Model and Sizing” in this track?

08Which statement best explains “Flexbox Layout” in this track?

09Which statement best explains “Grid Layout” in this track?

10Which statement best explains “Responsive Design” in this track?