The Life Starter
0 of 6 complete0%
Course Library · Lesson 6 of 6
Digital · Guided lesson

Deliver the repaired layout and verification scope

About 29 minutes · 7 reading + 22 practice and checks
Time includes reading, practice, and questions. Extra videos or further study are optional.
See this course’s project requirements

A local community schedule with Grid/Flexbox, long-label wrapping, narrow-screen source order, zoom checks and a four-case layout stress test.

Keep your working files in your own notebook or software. Save a private description, checklist, and work link in My Proof.

What to include

  • Deliver a repeatable overflow trigger and an observed element/viewport record.
  • Demonstrate and explain the combined track, item-minimum, and long-text wrapping repair.
  • Produce aligned source, visual, and keyboard-order evidence at a narrow viewport.
  • Verify wrapped navigation and an inspectable wide table without ordinary whole-page overflow.
  • Complete a four-condition rendered stress matrix or identify the exact unperformed conditions.
  • Deliver the fixed selected layout, failing baseline, source assertions, and honest rendered test record.

Review and revise

Use these criteria to check your work and choose what to improve.

  • The implementation or declared simulation follows the supplied contract and retains inspectable original inputs.
  • Normal, boundary and rejected cases are recorded with expected versus observed results.
  • The changed case has a correct explanation and does not rely on hidden state.
  • The project includes source, outputs, instructions and honest tool, privacy and verification limits.
Open the full course project
Want more background?
Before you begin

The idea in everyday life

Use schedule.html, fixed.css, broken.css and test-layout.py. Serve locally with python3 -m http.server 8765 --bind 127.0.0.1. The final source links fixed.css; switch that link temporarily to broken.css to reproduce the supplied narrow/long-content stress case.

The idea

The final artifact should contain the intentional repair, a reproducible failing baseline, and separate static versus rendered evidence.

Follow along

Deliver the repaired layout and verification scope — original worked practice

The final artifact should contain the intentional repair, a reproducible failing baseline, and separate static versus rendered evidence.

Use schedule.html, fixed.css, broken.css and test-layout.py. Serve locally with python3 -m http.server 8765 --bind 127.0.0.1. The final source links fixed.css; switch that link temporarily to broken.css to reproduce the supplied narrow/long-content stress case.

  1. 1. Step 1

    Run python3 test-layout.py and retain its exact artifact-check output.

    You should see: Six declared source invariants pass if the delivered files match.

    The final artifact should contain the intentional repair, a reproducible failing baseline, and separate static versus rendered evidence.

  2. 2. Step 2

    Compare final schedule.html linking fixed.css with the original broken.css baseline.

    You should see: The intended final stylesheet is selected.

    The final artifact should contain the intentional repair, a reproducible failing baseline, and separate static versus rendered evidence.

  3. 3. Step 3

    Collect the four-case matrix, focus order, and table-access observations.

    You should see: Performed rendered evidence is retained.

    The final artifact should contain the intentional repair, a reproducible failing baseline, and separate static versus rendered evidence.

  4. 4. Step 4

    Package the source, baseline, tests, and findings; do not claim complete accessibility certification.

    You should see: A content-resilient schedule project with exact verification limits.

    The final artifact should contain the intentional repair, a reproducible failing baseline, and separate static versus rendered evidence.

Now change one thing

Static CSS assertions pass but long-content browser rendering fails. Is the final layout ready on that evidence?

Your work

What to finish

Deliver the fixed selected layout, failing baseline, source assertions, and honest rendered test record.

Common mistake

Watch for this

Treating the presence of expected CSS declarations as proof that every rendered condition passed.

How can I tell I understand it?

Demonstrate the rule: The final artifact should contain the intentional repair, a reproducible failing baseline, and separate static versus rendered evidence. Use the supplied variant to distinguish a changed result from a broken implementation.

Try 3 questions

Quick knowledge check

Answer all 3 questions. Get at least 2 right and the lesson completes automatically.

Not yet passed

You’ll get an explanation for each answer. Signed in? Your results save to your account.

1What do the six CSS artifact assertions establish?
2Which final link must schedule.html contain?
3What should happen after a confirmed long-title overflow in the final page?
0 of 3 answeredApply the lesson to a short question, then review the explanation.
6
Finish this lesson

Pass the check. We’ll save the progress.

Answer all 3 questions above and get at least 2 right. You can review the explanations and try again.

Go to the knowledge check
Tools, templates, and lesson sources

Tools and templates

Tools open in a new tab so you can keep your place here.

Sources and further reading

Explore the references behind this lesson.

developer.mozilla.org — Grid_layout
Source & access notes · checked 2026-10-01

Relevant documented module/API behavior inspected during expansion authoring; actual execution evidence is recorded separately. No grant eligibility is established.

Access: Official page retrieved with the web reader on 2026-10-01. Documentation reading does not certify execution in every native tool or browser.

Reuse: Original local practice files, fictional data, worked examples and questions. Concepts paraphrased and linked; source exercises are not copied.

developer.mozilla.org — CSS_flexible_box_layout
Source & access notes · checked 2026-10-01

Relevant documented module/API behavior inspected during expansion authoring; actual execution evidence is recorded separately. No grant eligibility is established.

Access: Official page retrieved with the web reader on 2026-10-01. Documentation reading does not certify execution in every native tool or browser.

Reuse: Original local practice files, fictional data, worked examples and questions. Concepts paraphrased and linked; source exercises are not copied.

developer.mozilla.org — overflow wrap
Source & access notes · checked 2026-10-01

Relevant documented module/API behavior inspected during expansion authoring; actual execution evidence is recorded separately. No grant eligibility is established.

Access: Official page retrieved with the web reader on 2026-10-01. Documentation reading does not certify execution in every native tool or browser.

Reuse: Original local practice files, fictional data, worked examples and questions. Concepts paraphrased and linked; source exercises are not copied.

Report a problem with this lesson

Tell us what went wrong. Please leave out personal information and private project contents.

No sign-in needed.