JULY 20 · MODULE 3
Welcome to the Web · Responsive Design
WEEK 3 · JULY 20 · ADVANCED HTML + CSS
Make your page responsive. Meet a builder. Start your team website.
Open last week’s index.html and style.css.
TEST FIRST · 5 MIN
Record one overflow, tiny target or awkward line break. No DevTools? Resize the browser by hand.
HTML UPGRADE · 7 MIN
<header><p>Opportunities Club</p></header>
<nav aria-label="Main">
<a href="#join">Join us</a>
</nav>
<main>…your existing content…</main>
<footer>A student community project</footer>Reorganise your body; keep just one main. Replace the placeholder with your content, including the join section.
BUILD ALONG · INSIDE MAIN · 5 MIN
<div class="cards">
<article>
<h2>Coding club</h2>
<p>Build something with a friend.</p>
</article>
<article>
<h2>Design challenge</h2>
<p>Sketch a better school experience.</p>
</article>
</div>Use content for your capstone. The class lets one CSS rule style the group.
BUILD ALONG · STYLE.CSS · 10 MIN
* { box-sizing: border-box; }
.cards {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}A media query applies rules at a chosen width. Resize: one column should become two.
LAYOUT LAB · 5 MIN
img {
max-width: 100%;
height: auto;
}
a { overflow-wrap: anywhere; }Add these CSS rules. Test with an image you have permission to use and meaningful alt text.
Check that head still includes the viewport meta tag from Week 2.
PAIR TEST · 8 MIN
Your partner tests; you note the result. Then swap.
TECH JOURNEY · SPEAKER + Q&A · 15 MIN
No guest today? Interview your facilitator about a project and a mistake they learned from.
TEAM SPRINT · 15 MIN
Rotate builder, designer, tester and presenter roles. Pair up where needed.
THIS WEEK · SHOW THE DIFFERENCE
← → to navigate · F fullscreen
Slide 1 of 10