Layout That Responds
Start the Lesson
By the end your bio page bends: the viewport line, flexible units, images that fit, one flexbox row that wraps, the palette as variables in one block, and one media query at a width you can defend from your own content. It has passed the four checks on a real phone and the laptop at 200 percent zoom, by the route your site uses. It has been heard with Narrator, keyed through and measured with the colour picker, and every barrier found is gone, one barrier per commit with the barrier named. The two AI asks of the day, the CSS draft and the junior auditor, are on a receipt, every line read and every finding reproduced on the real page or struck through.
Submit Your Work
What You Turn In
- Repo link: your responsive bio page
- Viewport line, flexible units, images that fit, one wrapping flexbox row, the palette as variables, one media query you can defend
- Phone and laptop screenshots, and a photo of the protocol card
- No sideways scroll and no pinch-zoom on a real phone; both devices and the route named; coach's initials
- Photo of the five-point audit sheet fill in on the hub
- A specific finding or an evidenced pass on every line; the keyboard pass shown, or the break named with its fix
- Commit history
- The pass in steps with why-messages, then one barrier per commit with the barrier named
- AI receipt, both asks fill in on the hub
- Spec, prompt, what was kept, what was deleted, where it was verified; label 'AI-assisted — directed by me'
- check-scs2.2 receipt fill in on the hub
- Every automatic line PASS, or each NOT YET on your fault list with its planned fix
- Local-sites sheet and method note fill in on the hub
- One local site through the four checks, in the owner's words; six lines, the sixth 'what I might be wrong about, and how I would find out'
How
- Asha, by Saturday's update.
Done when
- Responsive bio page in the repo: Viewport line, flexible units, images that fit, one wrapping flexbox row, palette as variables, one defended media query
- Phone and laptop screenshots + protocol card: No sideways scroll, no pinch-zoom on a real phone; both devices and the route named
- Five-point audit sheet: A specific finding or an evidenced pass on every line; keyboard pass shown or the break named with its fix
- Commit history as audit trail: Pass in steps with why-messages; then one barrier per commit, barrier named
- AI receipt, two asks: CSS draft and auditor ask: spec, prompt, kept, deleted, verified where; label
- check-scs2.2 receipt: Every automatic line PASS, or each NOT YET on the fault list with its fix
- Local-sites sheet + method note: One site through the four checks, in the owner's words; six lines, the sixth honest