Build the HTML and CSS foundation

What you will build

Build semantic pages, responsive layout, design tokens, and static core states.

Understand the idea first

Build semantic pages, responsive layout, design tokens, and static core states.

Build it step by step

app/
├─ index.html
├─ css/{tokens,base,components,layout}.css
├─ js/app.js
└─ assets/

1. Open the previous project and record its result.
2. Type the example and complete: Represent empty, normal, and error states in HTML, then style three widths.
3. Change one input, predict, then verify.
4. Create and repair: Skipping static states makes structure and logic fail together.

Read the important lines

• Build semantic pages, responsive layout, design tokens, and static core states.
• Read input, processing, and output separately.
• Verify another input and an edge case.

Common mistakes and what to check

Practice without copying

Represent empty, normal, and error states in HTML, then style three widths.

Completion check

• I produced the required visible result
• I can explain the input, processing, and output
• I tested normal, edge, and failure cases