THE MOCK QUESTION, MADE VISUAL
See where it goes.
Remember why.
A guided video workshop that turns Question 1 into four clear page zones. Watch, predict, then build it yourself. Now with a simpler, step-by-step JavaScript solution for Question 2.
Watch on YouTube ↗ · Open the original mock question (PDF)
Loading the YouTube lesson…
NOW LEARNING · 01 / 15
Build the page in your head.
Press play to begin. Turn on captions with the video’s CC control.
Read this chapter’s transcript
TRY IT · PREDICT BEFORE YOU CLICK
The 12-slice playground
Change the viewport and recipe. These are real Bootstrap columns, so the browser shows the actual wrapping behavior.
390px: 12 units per card → 1 card per line.
FROM WATCHING TO DOING
Make your own answer.
Draw H → A → P → F before opening the worked example. Then build one correct card and repeat its column.
Teaching sources and accuracy notes
Based on your mock question (pp. 1–3), Bootstrap Basics: Place It On The Page (pp. 2–8), Bootstrap Cards, Made Simple (pp. 2–9), Thinking in Modals (pp. 2–7), and The Mark Calculator (pp. 2–12).
The lesson clarifies several shortcuts in the guides: cards do not add shadows automatically; navbars are not fixed automatically; grid wrapping is normal; .modal-dialog-centered adds vertical centering; tabindex="-1" permits programmatic focus; and 425 ÷ 5 is 85.00. Question 1 does not explicitly require a modal. The two-across tablet layout is a teaching choice, not a required marking rule.
Technical checks: Bootstrap grid, navbar, cards, modal. Video authored and rendered with Hyperframes. Original product illustrations and local synthetic English narration.
Sample business details and social destinations must be replaced in a real business website. Caption timing is phrase-based. Practice scores are saved only in your browser. The embedded video is served by YouTube.