Web Development Learning Series — Part 2 of 10 · Beginner to Intermediate
A course catalog should remain readable when the browser is narrow, the text is enlarged, or a card appears in a sidebar. In this lesson, build a small catalog without hard-coding a separate layout for every device.
You need basic HTML and a stylesheet. Start with three cards containing a title, a short description, and a lesson link. Use real course names so you can notice when a longer title breaks the layout.
Start with meaningful card content
<div class="catalog">
<article class="course">
<h2>HTML Foundations</h2>
<p>Build clear pages and links.</p>
<a href="html.html">Explore HTML Foundations</a>
</article>
<article class="course">
<h2>Responsive Web Design</h2>
<p>Make layouts adapt to available space.</p>
<a href="css.html">Explore Responsive Web Design</a>
</article>
<article class="course">
<h2>JavaScript Practice</h2>
<p>Add useful browser interactions.</p>
<a href="javascript.html">Explore JavaScript Practice</a>
</article>
</div>
Create those destination files before deploying, or replace the links with working URLs. Put the following in your CSS file and connect it with a stylesheet link in the document head.
Let the grid choose the column count
* { box-sizing: border-box; }
body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
.catalog {
max-width: 70rem;
margin-inline: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1rem;
}
.course {
border: 1px solid #b7c4d4;
border-radius: .75rem;
padding: 1.25rem;
overflow-wrap: anywhere;
}
a { color: #124c91; }
a:focus-visible { outline: 3px solid #124c91; outline-offset: 4px; }
The cards share available space, with a preferred minimum width of 16rem. The inner minimum prevents that preference from forcing horizontal overflow in a very narrow container. This is a layout choice, not a requirement to use exactly 16rem in every design.
Viewport queries and container queries
A media query responds to the viewport. A size container query responds to an eligible ancestor's size. The latter is useful when the same component appears in both a full-width catalog and a narrow panel. Add a wrapper around a component and define a baseline layout that works without the enhancement.
.course-slot { container-type: inline-size; }
.course-summary { display: block; }
@container (min-width: 32rem) {
.course-summary {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1rem;
}
}
The queried element must be inside the container; a container does not query its own size to restyle itself this way. Check compatibility for your actual audience before relying on newer features, and keep a usable fallback.
Test content, not just screen widths
Try a long course title, an unusually long URL, and a description twice as long as the others. Narrow the window slowly instead of checking only two preset device sizes. Zoom to 200 percent, then verify that the links remain reachable. Avoid fixed card heights that cut off text.
If images are added, reserve their dimensions and use a responsive width. Do not fix overflow by hiding essential content. Find the element causing the overflow and change its sizing or wrapping rules.
Practice task
Add six courses and a narrow sidebar version of one course summary. Write down the width at which its layout becomes uncomfortable, then choose a breakpoint based on that observation. Your result should explain its design decision without referring to a particular phone model.
Review question: Why should a reusable card respond to its available container width instead of assuming the full browser width?
Continue your learning
Previous lesson: HTML for Beginners: Build a Semantic Course Landing Page. Explore our web development series and the HTML multimedia project.
Reference: Official documentation for this lesson. Examples are learning exercises; adapt and test them for your own application.
Comments
Post a Comment