Before you begin
You can identify an HTML element and have seen a basic CSS rule.
What you are working towards
A small responsive layout whose widths, spacing and alignment you can reason about.
Follow the stations in order, or revisit a topic when you need it. Use your browser’s Back command to return here. This path does not track or save your progress.
Confirm what your rule selects
Find the element a selector actually matches before changing values.
Count the complete box
Use the lab to compare content-box and border-box. Predict the outer width before checking.
Identify the winning declaration
Change one rule in the lab and explain why it wins.
Trace horizontal overflow
Find the element causing the extra width instead of hiding it on the whole page.
Build a flexible arrangement
Adjust the column minimum and available width. Explain when a new column fits.
Study a complete responsive example
Resize the gallery and explain the grid rule and intrinsic image dimensions.
Repair a contained failure
Solve the overflow exercise and describe why the other proposed fixes miss the cause.
Your final task
Create three cards in a flexible layout. Introduce one deliberate width error in your practice copy, record its symptom, repair it and explain the calculation.
Check your understanding
- Check a narrow viewport without sideways page scrolling.
- Increase text size and confirm that content remains reachable.
- Explain whether padding is included in your declared width.
- Identify the winning rule instead of adding an unexplained !important.
Using AI along the way
You may ask an AI tool to explain a line or suggest an alternative. Then predict the result, inspect the output and test it yourself. Do not treat a confident answer as proof. This project was itself developed with substantial AI assistance: read the transparent account and Mario’s web journey.
Practise predicting what code does · Practise reviewing AI code