Wed 13 May 2026 Intake 26b ICT50220 · Week 9 Perth · Classroom 6

Bootstrap Out, CSS In.

Wrap up the Skywings / Apple clone, debrief the wins and the bloat, then roll into hand-written CSS with Flexbox & Grid. Finish strong with a first taste of JavaScript DOM.

Today's Focus

Topic

Closing out Bootstrap clone projects and bridging into vanilla CSS layout.

ICTWEB519 ICTWEB520 CSS · Flexbox · Grid

Outcomes

Submit Bootstrap clone (Skywings or Apple).
Recreate a layout in pure Flexbox.
Wire a button event with vanilla JS.

Energy

Hands-on day. Less slides, more code. Pair-up encouraged during the Flexbox sprint. Cap each demo at 8 minutes — students should be coding most of the session.

Schedule

09:00
Arrival & warm-up Sign-on sheet, laptops up, Discord open. Quick win: each student shares one thing they nailed and one thing that broke in their Bootstrap clone.
09:15
Bootstrap clone debrief Show 2–3 submitted sites on the big screen. Mark for code quality, not pixel-perfect. Common pitfalls: specificity wars, !important abuse, inline style creep.
10:00
Flexbox first principles Live demo: rebuild the Skywings nav from scratch in pure Flexbox. No Bootstrap classes. Talk through main-axis vs cross-axis, justify vs align.
10:45
Break 15 minutes. Coffee, stretch, vibes.
11:00
Flexbox Froggy sprint 20-minute timer. First to finish all 24 levels wins. Then CSS Grid Garden as a stretch goal.
11:30
Grid for layout Short demo: a 3-column card grid in 6 lines of CSS. Compare to the Bootstrap equivalent. Show why Grid wins for 2D layouts.
12:15
Lunch 45 minutes.
13:00
JavaScript: make the button do the thing Variables, functions, querySelector, addEventListener. Build a counter button live. Then a colour-changer. Then a toggle. Each ~10 min.
14:00
Inspect & Steal Open Stripe.com or Linear.app. Pick one component. Recreate the layout from scratch in 15 minutes. Compare results, vote best clone.
14:30
Wrap up + 1-on-1 catch-ups Quick recap. Then pull aside Hayden, Courtney, Beren — quick check-in on the recent absences. Set homework expectations.

Concepts to Cover

CSS Layout

Move beyond utility classes. Hand-write the layout primitives.

display: flex flex-direction justify-content align-items flex-wrap gap display: grid grid-template-columns grid-area minmax() repeat()

JavaScript DOM

First contact. Make a button do something visible on the page.

let / const function document.querySelector addEventListener element.textContent element.classList.toggle arrow functions template literals

Make It Fun

Flexbox Froggy Sprint
flexboxfroggy.com — 24 levels, 20-minute timer, winner gets bragging rights.

CSS Grid Garden
cssgridgarden.com — stretch goal for the speedrunners.

Inspect & Steal
Pick a component from Stripe / Linear / NYTimes. Recreate from scratch in 15 minutes.

Button Battle
Pair-up. Each pair builds one JS-powered button. Vote on cleverest output.

Resources

Kevin Powell — best free CSS instructor online MDN — Basic Concepts of Flexbox CSS-Tricks — Complete Guide to Flexbox

Flexbox Froggy CSS Grid Garden MDN — Manipulating Documents (DOM)

Homework

Due Friday 15 May

Submit your Bootstrap clone if you haven't already — Thursday catch-up is the safety net.
Finish Flexbox Froggy and CSS Grid Garden. Screenshot the finish screens, drop in Discord.
Build a single-page index.html with one button that changes its own text on click. Pure HTML + CSS + JS, no frameworks.

Stuck? Discord channel is the first stop. Email if it's urgent.

Today's Check-ins

Quiet word with these students during break or wrap-up — not a confrontation, just a temperature check.

Hayden — missed last two sessions after a solid run. 20% attendance. Quick "everything okay?" is enough.

Courtney Marlborough — same pattern. Two missed in a row. Check her Bootstrap clone is on track.

Beren Scott — sporadic May attendance. Also has a duplicate student number on the roster — flag with admin separately.

Fatemeh Imani — hasn't shown since 2 April. Phone call after class, not email.