Complete the lab with a working the box model and layout example with an explicit success and failure check.
Guided practice · The Box Model and Layout
Guided Lab: The Box Model and Layout in HTML and CSS Foundations
HTML and CSS Foundations — The Box Model and Layout lab: Build a two-column component that collapses cleanly on a narrow viewport and preserves readable spacing.
Outcome summary
Know what success looks like before you begin
Save verification evidence: the relevant output, test, log, query result, or rendered state for The Box Model and Layout.
- I completed the module-specific practice task.
- I produced a working the box model and layout example with an explicit success and failure check.
- I saved the relevant output, test, log, query result, or rendered state for The Box Model and Layout.
- I diagnosed and corrected one realistic The Box Model and Layout failure.
Stop before using production credentials, important data, shared permissions, live infrastructure, or destructive commands that are not required by the lab.
Jump to a section
Lab brief
Know the problem and the evidence you need
Build a two-column component that collapses cleanly on a narrow viewport and preserves readable spacing.
a working the box model and layout example with an explicit success and failure check
Complete the task, verify the relevant output, test, log, query result, or rendered state for The Box Model and Layout, then diagnose one failure that is specific to The Box Model and Layout.
Control size, spacing, flow, alignment, and responsive behavior without relying on fragile fixed dimensions.
Safety and setup
Prepare before changing anything
Have this ready
- Open a small local project or disposable lab environment.
- Confirm the runtime, toolchain, or service needed for the module.
- Prepare one valid input and one invalid or boundary input.
Field checks
0 of 5 checks completeRun the lab
Complete one check at a time. Record the evidence before moving on.
Interpret results
Match the evidence to the next action
If you seeNext action
The expected result appears and the boundary case behaves correctly
Save the result and continue to the module checkpoint.
The normal case works but the failure or boundary case does not
Return to the diagnostic step and inspect the module-specific state or output before changing more code.
The result changes between runs
Compare the relevant input, dependency, configuration, data, state, or runtime version for this module.
Choose the next action
Complete the lab when you can reproduce the working result, explain the important module decision, and recover from the tested failure.
Confirm the evidence you produced
Finished record: a working the box model and layout example with an explicit success and failure check
- I completed the module-specific practice task.
- I produced a working the box model and layout example with an explicit success and failure check.
- I saved the relevant output, test, log, query result, or rendered state for The Box Model and Layout.
- I diagnosed and corrected one realistic The Box Model and Layout failure.