This content originally appeared on DEV Community and was authored by CodeWithDhanian
Day 42: Creating a Responsive Layout
Challenge Title: Designing Websites That Adapt to All Screen Sizes
Welcome to Day 42 of our 180 Frontend Challenge. Over the last two days, we have styled a personal website, then worked on forms and tables. Today, we focus on a core skill every frontend developer must master—responsive design.
The ability to create layouts that work seamlessly on desktops, tablets, and mobile devices is one of the most valued skills in modern web development.
🔹 What is Responsive Design?
Responsive design ensures your website adapts to different screen sizes and devices without breaking its layout or usability.
It involves:
- Flexible layouts
- Fluid images that resize automatically
- Media queries to adjust styling for specific screen sizes
🔹 Folder Structure
responsive-layout/
│
├── index.html
├── style.css
└── images/
└── sample.jpg
🔹 Step 1: HTML Structure
We’ll build a simple 3-section layout that adapts to mobile screens.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Layout</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>My Responsive Website</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Projects</a>
<a href="#">Contact</a>
</nav>
<main>
<section class="card">
<img src="images/sample.jpg" alt="Sample Image">
<h2>Section 1</h2>
<p>This is a sample section of the website. It should adjust well on all devices.</p>
</section>
<section class="card">
<img src="images/sample.jpg" alt="Sample Image">
<h2>Section 2</h2>
<p>Responsive layouts keep your content accessible and readable on every device.</p>
</section>
<section class="card">
<img src="images/sample.jpg" alt="Sample Image">
<h2>Section 3</h2>
<p>Mobile-first design ensures small screens are prioritized before scaling up.</p>
</section>
</main>
<footer>
<p>© 2025 My Responsive Website</p>
</footer>
</body>
</html>
🔹 Step 2: CSS Styling
Let’s make this layout responsive using Flexbox and media queries.
/* style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, sans-serif;
line-height: 1.6;
background: #f8f9fa;
color: #333;
}
header {
background: #007bff;
color: white;
text-align: center;
padding: 1.5rem;
}
nav {
background: #222;
text-align: center;
}
nav a {
color: white;
text-decoration: none;
padding: 1rem;
display: inline-block;
}
nav a:hover {
background: #007bff;
}
main {
display: flex;
gap: 1rem;
padding: 1rem;
}
.card {
background: white;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
flex: 1;
}
.card img {
max-width: 100%;
border-radius: 6px;
}
footer {
background: #222;
color: white;
text-align: center;
padding: 1rem;
margin-top: 2rem;
}
🔹 Step 3: Media Queries for Responsiveness
We’ll use a mobile-first approach—starting with small screens and adding rules for larger screens.
/* Mobile-first: One column layout is default */
@media (min-width: 768px) {
main {
flex-direction: row;
}
}
@media (max-width: 767px) {
main {
flex-direction: column;
}
nav a {
display: block;
border-top: 1px solid #333;
}
}
🔹 Step 4: What You’ve Learned
- Mobile-first design: Start styling for small devices, then enhance for larger screens.
- Flexible layouts: Used Flexbox to adapt layout dynamically.
- Fluid images: Ensured images resize without breaking the layout.
- Media queries: Adjusted styling at breakpoints for tablets and desktops.
🔹 Pro Tips for Responsive Design
- Use percentages or
max-widthinstead of fixed pixel widths for flexibility. - Test layouts on multiple devices and browsers.
- Keep touch targets (buttons, links) large enough for mobile users.
- Avoid horizontal scrolling on small screens.
🔹 Boost Your Frontend Skills
If you want to master responsive design, grids, and component-based layouts, my Frontend Mastery eBook provides step-by-step guidance with real-world examples and full projects.
Inside, you’ll find:
- Flexbox and CSS Grid mastery
- Mobile-first workflow explained
- Responsive navigation menus
- Real-world responsive projects
👉 Grab it here: https://codewithdhanian.gumroad.com/l/sxpyzb
🔹 Your Task Today
- Build the layout exactly as shown above.
- Test it on mobile, tablet, and desktop viewports.
- Customize colors, spacing, and typography to your style.
- Upload to GitHub or host on Netlify and share your work.
This content originally appeared on DEV Community and was authored by CodeWithDhanian
CodeWithDhanian | Sciencx (2025-08-10T07:36:03+00:00) Day 42: Creating a Responsive Layout – lesson for the 180 Frontend Challenge. Retrieved from https://www.scien.cx/2025/08/10/day-42-creating-a-responsive-layout-lesson-for-the-180-frontend-challenge/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.