In our previous articles, we’ve explored the importance of structured HTML and how CSS Flexbox simplifies web layouts. This article builds on those concepts by bringing them together to create something practical, a responsive card layout. Think of it as a way to solidify everything we’ve learned so far, while also leveling up your web development skills.
When building web layouts, card components are everywhere, product-listings, blog posts and more. A well-designed card is both functional and visually appealing, and its responsive design ensures it looks great on any device. In this article, we'll walk through how to build responsive card layouts step-by-step using semantic HTML and CSS Flexbox.
What we'll build
We will create a responsive card layout that:
1. Displays multiple cards side-by-side on larger screens.
2. Stacks the cards vertically on smaller screens.
3. Uses semantic HTML for accessibility and maintainability.
4. Demonstrates flexbox for alignment and spacing.
STEP 1: Write the HTML
Let's start by creating a structure for our cards. We will make use of semantic HTML to ensure the content is meaningful and accessible.
<body>
<section class="card-container">
<article class="card">
<img src="./assets/nike-sneakers.jpg" alt="sneakers" class="card-image" />
<header class="card-header">
<h2>Sneakers</h2>
<p class="card-description">
A pair of comfortable sneakers made from high-quality materials.
</p>
</header>
<footer class="card-footer">
<button>Read More</button>
<button>Bookmark</button>
</footer>
</article>
<article class="card">
<img src="./assets/nike-sneakers.jpg" alt="sneakers" class="card-image" />
<header class="card-header">
<h2>Sneakers</h2>
<p class="card-description">
A pair of comfortable sneakers made from high-quality materials.
</p>
</header>
<footer class="card-footer">
<button>Read More</button>
<button>Bookmark</button>
</footer>
</article>
<article class="card">
<img src="./assets/nike-sneakers.jpg" alt="sneakers" class="card-image" />
<header class="card-header">
<h2>Sneakers</h2>
<p class="card-description">
A pair of comfortable sneakers made from high-quality materials.
</p>
</header>
<footer class="card-footer">
<button>Read More</button>
<button>Bookmark</button>
</footer>
</article>
<article class="card">
<img src="./assets/nike-sneakers.jpg" alt="sneakers" class="card-image" />
<header class="card-header">
<h2>Sneakers</h2>
<p class="card-description">
A pair of comfortable sneakers made from high-quality materials.
</p>
</header>
<footer class="card-footer">
<button>Read More</button>
<button>Bookmark</button>
</footer>
</article>
</section>
</body>
Key Points:
- Use
sectionfor the container, as it groups related content. - Each card is an
article, signifying that it's a self-contained piece of content. - The
img,header, andfooterare semantically grouped to enhance readability and accessibility.
STEP 2: Add Basic Styles
Let's define some basic styles;
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
text-align: center;
}
.card-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
padding: 1rem;
}
.card {
display: flex;
flex-direction: column;
gap: 1rem;
width: 300px;
border: 1px solid #ddd;
border-radius: 8px;
padding: 1rem;
background-color: #fff;
}
.card-image {
width: 100%;
border-radius: 8px;
}
.card-header h2 {
font-size: 1.5rem;
color: black;
font-weight: bold;
}
.card-footer {
display: flex;
justify-content: space-between;
}
button {
background-color: palevioletred;
color: black;
font-weight: bold;
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: plum;
}
Key Points:
- The
.card-containerusesflex-wrap: wrapto allow cards to stack when the screen size shrinks. - Each
.cardis styled with a flexible column layout and proper spacing between elements.
STEP 3: Let's make it Responsive
Now, it's time to make sure the card layout looks great on all screen sizes.
@media (max-width: 768px) {
.card-container {
flex-direction: column;
align-items: center;
}
}
Key Points:
- For screens smaller than 768px, the
.card-containerswitches from a row layout to a column layout. - This ensures the cards are stacked vertically, making them easier to read on mobile devices.
FINAL LOOK
- On larger screens : the cards will align side-by-side with space between them.👇
- On smaller screens : the cards will stack on top of each other for a clean layout. 👇
Wrapping Up
To wrap things up, here’s what we’ve learned:
Semantic HTML: Write clean, accessible, and maintainable code.
Flexbox Fundamentals: Use Flexbox to align and space elements effortlessly.
Responsive Design: Apply media queries to make layouts adapt to different devices.
What’s Next?
Take this example and make it your own. Experiment with different card designs, just play around with it because the more you practice, the better you’ll get.
Until next time, your friendly neighborhood writer, MJ. 👋 Bye!!!
Top comments (0)