Responsive Project — Complete Guide
DodaTech
Updated 2026-06-28
6 min read
In this tutorial, you will learn about Responsive Project. We cover key concepts, practical examples, and best practices to help you master this topic.
Build a complete responsive website from scratch using mobile-first principles with fluid grids, flexible images, media queries, performance optimization, and accessibility compliance.
What You'll Learn
- Planning a responsive project
- Setting up a mobile-first workflow
- Implementing all responsive patterns
- Performance and accessibility auditing
- Deployment and testing strategy
Why It Matters
- A portfolio project demonstrates your responsive skills
- Real projects combine all the techniques from this course
- A systematic approach ensures quality
Real-World Use
- A freelance developer builds a responsive portfolio
- A team ships a responsive marketing site
- A redesign project converts a fixed layout to responsive
flowchart LR A[Project Plan] --> B[Mobile Design] A --> C[Desktop Design] B --> D[HTML Structure] D --> E[Mobile CSS] E --> F[Media Queries] F --> G[Desktop Enhancements] G --> H[Performance] G --> I[Accessibility] H --> J[Launch] I --> J
Project Overview
Build a fully responsive portfolio website for a fictional web developer. The site includes a hero section, about section, services grid, portfolio gallery, testimonials carousel, contact form, and footer.
Requirements
- Mobile-first CSS with min-width media queries
- Fluid grid using CSS Grid auto-fill/minmax
- Responsive images with srcset and WebP
- Off-canvas mobile navigation
- Accessible with 44px touch targets
- Core Web Vitals passing (LCP under 2.5s, CLS under 0.1)
- Works on 320px to 1920px viewports
- Print stylesheet included
Code Example: Project Structure
project/
index.html
css/
critical.css # Inlined critical styles
styles.css # Full responsive stylesheet
js/
main.js # Navigation toggle, lazy loading
images/
hero-400.webp
hero-800.webp
hero-1200.webp
portfolio-1.webp
...
favicon.ico
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jane Developer | Responsive Portfolio</title>
<meta name="description" content="Jane Developer builds responsive, accessible, and performant websites for clients worldwide.">
<link rel="canonical" href="https://janedeveloper.dev">
<style>
/* Critical CSS inlined */
:root {
--primary: #0066CC;
--text: #1a1a2e;
--bg: #ffffff;
--spacing: 1rem;
}
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
font-family: system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.6;
color: var(--text);
background: var(--bg);
}
.skip-link {
position: absolute;
top: -100%;
left: 0;
background: var(--primary);
color: #fff;
padding: 0.5rem 1rem;
z-index: 10000;
}
.skip-link:focus { top: 0; }
.hero {
min-height: 70vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 2rem var(--spacing);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; } }
</style>
<link rel="preload" href="css/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="css/styles.css"></noscript>
<link rel="preload" href="images/hero-1200.webp" as="image" type="image/webp" media="(min-width: 1024px)">
<link rel="preload" href="images/hero-800.webp" as="image" type="image/webp" media="(min-width: 600px) and (max-width: 1023px)">
</head>
<body>
<a href="#main" class="skip-link">Skip to main content</a>
<!-- Rest of the page -->
</body>
</html>
Code Example: Full Responsive Stylesheet
/* styles.css - Full responsive stylesheet */
/* === Base (Mobile) === */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
/* Navigation */
.nav {
position: fixed;
top: 0;
left: -280px;
width: 280px;
height: 100%;
background: #fff;
box-shadow: 2px 0 8px rgba(0,0,0,0.1);
transition: left 0.3s ease;
z-index: 1000;
padding: 2rem 1rem;
}
.nav.open { left: 0; }
.nav a {
display: block;
padding: 0.75rem;
min-height: 44px;
display: flex;
align-items: center;
color: var(--text);
text-decoration: none;
}
.nav-toggle {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 1001;
min-width: 44px;
min-height: 44px;
background: var(--primary);
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 999;
}
.overlay.visible { opacity: 1; pointer-events: auto; }
/* Services Grid */
.services-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 2rem 0;
}
.card {
padding: 1.5rem;
border: 1px solid #eee;
border-radius: 8px;
transition: transform 0.3s ease;
}
@media (hover: hover) {
.card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,0,0,0.1); }
}
/* Portfolio Gallery */
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
}
.portfolio-item {
aspect-ratio: 4 / 3;
overflow: hidden;
}
.portfolio-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Contact Form */
.contact-form {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 600px;
margin: 0 auto;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid #ccc;
border-radius: 4px;
min-height: 44px;
font-size: 1rem;
}
.contact-form button {
min-height: 44px;
font-size: 1rem;
}
/* === Tablet (768px+) === */
@media (min-width: 768px) {
.nav {
position: static;
width: auto;
box-shadow: none;
padding: 0;
}
.nav a { display: inline-block; padding: 0.5rem 1rem; }
.nav-toggle, .overlay { display: none; }
.services-grid { grid-template-columns: 1fr 1fr; }
}
/* === Desktop (1024px+) === */
@media (min-width: 1024px) {
.services-grid { grid-template-columns: 1fr 1fr 1fr; }
.hero { padding: 4rem 2rem; }
.container { padding: 0 2rem; }
}
/* === Print === */
@media print {
.nav, .nav-toggle, .overlay, .contact-form button { display: none !important; }
body { font-size: 12pt; color: #000; background: #fff; }
a[href^="http"]::after { content: " (" attr(href) ")"; }
}
Code Example: JavaScript for Responsive Features
// main.js
document.addEventListener('DOMContentLoaded', () => {
const nav = document.getElementById('nav');
const toggle = document.getElementById('nav-toggle');
const overlay = document.getElementById('overlay');
function openMenu() {
nav.classList.add('open');
overlay.classList.add('visible');
toggle.setAttribute('aria-expanded', 'true');
document.body.style.overflow = 'hidden';
nav.querySelector('a').focus();
}
function closeMenu() {
nav.classList.remove('open');
overlay.classList.remove('visible');
toggle.setAttribute('aria-expanded', 'false');
document.body.style.overflow = '';
toggle.focus();
}
toggle.addEventListener('click', () => {
nav.classList.contains('open') ? closeMenu() : openMenu();
});
overlay.addEventListener('click', closeMenu);
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && nav.classList.contains('open')) closeMenu();
});
// Lazy loading images
if ('loading' in HTMLImageElement.prototype) {
document.querySelectorAll('img[loading="lazy"]').forEach(img => {
img.src = img.dataset.src;
});
} else {
// Fallback: load all images immediately
document.querySelectorAll('img[data-src]').forEach(img => {
img.src = img.dataset.src;
});
}
});
Common Mistakes
- Not planning the breakpoints before coding — Identify content-based breakpoints first. Code around them, not the other way around.
- Skipping the accessibility audit — Run axe DevTools or WAVE before launch. Many accessibility issues are easy to fix but easy to miss.
- Not testing on real devices — DevTools emulation is not enough. Test on a real phone and tablet.
- Forgetting the 404 page — Users land on broken links. Make the 404 page responsive too.
- No print stylesheet — Users will print your page. Remove navigation and optimize for paper.
- Ignoring 3xx redirects in performance — Redirects add latency. Ensure all URLs point directly to the final destination.
- No performance budget — Without a budget, pages bloat over time. Set limits and monitor them.
Practice Questions
- What is the first step in a responsive project? Plan the content hierarchy and identify content-based breakpoints before writing CSS.
- Why is the skip link important in Responsive Design? It allows keyboard users to bypass navigation, which is especially valuable on mobile with off-canvas menus.
- How do you ensure responsive images are optimized? Use srcset with WebP, provide multiple resolutions, set explicit width/height, and use modern formats.
- What is the final step before launching a responsive site? Run a comprehensive audit: Lighthouse (mobile + desktop), axe DevTools accessibility, real device testing, and print preview.
FAQ
Mini Project
This lesson is the final project. Build the complete responsive portfolio site as described above. Include off-canvas navigation, responsive image gallery with srcset, services grid using auto-fill/minmax, contact form with validation, print stylesheet, skip link, 44px touch targets, Core Web Vitals optimization, and prefers-reduced-motion support. Deploy the site to a hosting service (Netlify, Vercel, or GitHub Pages). Run Lighthouse mobile audit targeting 90+ in all categories. Test on a real mobile device. Submit the URL for review.
What's Next
You have completed all 30 lessons of the Responsive Design module. Continue with Introduction to CSS Preprocessors in the next topic.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro