Mini Project – Responsive Website

Build a complete responsive website that adapts beautifully to mobile, tablet, and desktop screens using modern CSS techniques.

Responsive design means your website changes shape and layout automatically based on the screen size. Think of it like water in a container — it adapts to fit whatever space it's in. A responsive website looks perfect on a phone, tablet, and desktop computer without needing separate versions. The WanderLust team wants to create their main website that works flawlessly across all devices. Your job is to build a complete responsive homepage that showcases destinations, highlights features, and provides contact information — all while looking professional on every screen size.

Project Setup and Structure

Every responsive website needs a solid foundation. Start with the HTML structure that gives you flexibility to style different sections independently. The viewport meta tag tells mobile browsers how to scale your content properly.

<!-- Complete responsive website structure -->
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>WanderLust Travel - Discover Amazing Destinations</title>
</head>
<body>
  <header class="header">
    <nav class="nav">
      <div class="logo">WanderLust</div>
      <div class="nav-menu">
        <a href="#">Home</a>
        <a href="#">Destinations</a>
        <a href="#">Contact</a>
      </div>
    </nav>
  </header>
</body>
</html>

What just happened?

The viewport meta tag tells mobile browsers to respect your CSS measurements instead of zooming out. The semantic HTML structure gives you clean sections to style. Try this: Resize your browser window to see how content behaves without CSS styling.

Mobile-First Navigation

Start with mobile design first — it's easier to expand layouts than shrink them. The mobile-first approach means you write CSS for phones first, then add styles for bigger screens using media queries.

/* Mobile-first navigation - starts with phone layout */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* makes width calculations predictable */
}

.header {
  background: #0f172a;
  padding: 1rem;
}

.nav {
  display: flex;
  flex-direction: column; /* stack logo and menu vertically on mobile */
  gap: 1rem;
}

.logo {
  color: #0ea5e9;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}

.nav-menu {
  display: flex;
  flex-direction: column; /* stack menu items vertically */
  gap: 0.5rem;
}

.nav-menu a {
  color: white;
  text-decoration: none;
  padding: 0.5rem;
  text-align: center;
  border-radius: 4px;
  transition: background 0.3s; /* smooth hover effect */
}

.nav-menu a:hover {
  background: #0ea5e9;
}

What just happened?

The navigation stacks vertically on mobile screens, making links easy to tap with your finger. Box-sizing: border-box makes padding and borders count inside element width instead of adding to it. Try this: Hover over the menu links to see the smooth color transition.

Hero Section with Flexible Content

The hero section grabs attention with a compelling message and call-to-action button. Flexible units like rem and % help content scale smoothly across different screen sizes instead of breaking at specific widths.

/* Hero section that adapts to any screen size */
.hero {
  background: linear-gradient(135deg, #0ea5e9, #0369a1);
  color: white;
  padding: 3rem 1rem;
  text-align: center;
  min-height: 60vh; /* takes up 60% of screen height */
  display: flex;
  flex-direction: column;
  justify-content: center; /* centers content vertically */
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 4rem); /* scales between 2rem and 4rem */
  margin-bottom: 1rem;
  line-height: 1.2;
}

.hero p {
  font-size: clamp(1rem, 3vw, 1.25rem);
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto; /* centers text block */
}

.btn {
  background: #f97316;
  color: white;
  padding: 1rem 2rem;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  display: inline-block;
  transition: transform 0.3s, box-shadow 0.3s;
}

.btn:hover {
  transform: translateY(-2px); /* lifts button on hover */
  box-shadow: 0 10px 25px rgba(249, 115, 22, 0.3);
}

What just happened?

The clamp() function makes text size automatically adjust between minimum and maximum values based on screen width. The hero section uses viewport height (vh) to stay proportional to screen size. Try this: Resize the preview to see how text scales smoothly.

Responsive Grid Layout

CSS Grid creates flexible layouts that automatically adjust column counts based on available space. The auto-fit and minmax functions work together to create responsive grids without media queries.

/* Responsive destinations grid - adapts automatically */
.destinations {
  padding: 4rem 1rem;
  max-width: 1200px;
  margin: 0 auto; /* centers the container */
}

.destinations h2 {
  text-align: center;
  color: #0f172a;
  font-size: clamp(1.8rem, 4vw, 3rem);
  margin-bottom: 3rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem; /* space between grid items */
}

.card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.card-image {
  background: linear-gradient(45deg, #0ea5e9, #f97316);
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

.card-content {
  padding: 1.5rem;
}

.card h3 {
  color: #0f172a;
  margin-bottom: 0.5rem;
}

.card p {
  color: #64748b;
  line-height: 1.6;
}

What just happened?

Auto-fit automatically creates new columns when space allows, while minmax(280px, 1fr) ensures cards never get smaller than 280px but can grow to fill available space. The hover effects add interactivity without JavaScript. Try this: Resize to see columns automatically adjust.

Media Queries for Larger Screens

Media queries add specific styles when screens reach certain widths. Think of them as conditional styles — they only apply when the condition (screen width) is met. This enhances the mobile-first design for tablets and desktops.

/* Media queries - enhance layout for bigger screens */

/* Tablets and larger phones (768px and up) */
@media (min-width: 768px) {
  .nav {
    flex-direction: row; /* horizontal navigation */
    justify-content: space-between;
    align-items: center;
  }
  
  .nav-menu {
    flex-direction: row; /* horizontal menu items */
    gap: 2rem;
  }
  
  .hero {
    padding: 5rem 2rem;
  }
  
  .destinations {
    padding: 5rem 2rem;
  }
}

/* Desktop screens (1024px and up) */
@media (min-width: 1024px) {
  .hero h1 {
    font-size: 4rem; /* larger headlines on desktop */
  }
  
  .hero p {
    font-size: 1.25rem;
  }
  
  .grid {
    gap: 3rem; /* more space between cards */
  }
  
  .card {
    transition: transform 0.4s ease-out;
  }
  
  .card:hover {
    transform: translateY(-8px) scale(1.02);
  }
}

/* Large desktops (1440px and up) */
@media (min-width: 1440px) {
  .destinations {
    max-width: 1400px; /* wider container on large screens */
  }
  
  .card-content {
    padding: 2rem; /* more generous padding */
  }
}

What just happened?

Media queries progressively enhance your design as screens get larger. The navigation transforms from stacked (mobile) to horizontal (tablet+). Each breakpoint builds upon the previous styles instead of replacing them. Try this: Slowly resize the browser to see the navigation snap at 768px.

Complete Responsive Website

Combine all responsive techniques into one cohesive website that works beautifully across every device. The progressive enhancement approach ensures core functionality works everywhere, with enhanced experiences on capable devices.

<!-- Complete responsive WanderLust website -->
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>WanderLust Travel - Discover Amazing Destinations</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: system-ui, sans-serif; line-height: 1.6; }
    
    .header { background: #0f172a; padding: 1rem; }
    .nav { display: flex; flex-direction: column; gap: 1rem; }
    .logo { color: #0ea5e9; font-size: 1.5rem; font-weight: bold; text-align: center; }
    .nav-menu { display: flex; flex-direction: column; gap: 0.5rem; }
    .nav-menu a { color: white; text-decoration: none; padding: 0.5rem; text-align: center; border-radius: 4px; transition: background 0.3s; }
    .nav-menu a:hover { background: #0ea5e9; }
    
    .hero { background: linear-gradient(135deg, #0ea5e9, #0369a1); color: white; padding: 3rem 1rem; text-align: center; display: flex; flex-direction: column; justify-content: center; }
    .hero h1 { font-size: clamp(2rem, 5vw, 4rem); margin-bottom: 1rem; }
    .hero p { font-size: clamp(1rem, 3vw, 1.25rem); margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; }
    .btn { background: #f97316; color: white; padding: 1rem 2rem; text-decoration: none; border-radius: 8px; font-weight: bold; display: inline-block; transition: all 0.3s; }
    .btn:hover { transform: translateY(-2px); }
    
    .footer { background: #0f172a; color: white; text-align: center; padding: 2rem; }
    
    @media (min-width: 768px) {
      .nav { flex-direction: row; justify-content: space-between; align-items: center; }
      .nav-menu { flex-direction: row; gap: 2rem; }
      .logo { text-align: left; }
      .nav-menu a { text-align: left; }
      .hero { padding: 5rem 2rem; }
    }
  </style>
</head>
<body>
  <header class="header">
    <nav class="nav">
      <div class="logo">WanderLust</div>
      <div class="nav-menu">
        <a href="#">Home</a>
        <a href="#">Destinations</a>
        <a href="#">Contact</a>
      </div>
    </nav>
  </header>
  
  <section class="hero">
    <h1>Discover Amazing Places</h1>
    <p>Explore breathtaking destinations around the world with WanderLust Travel. Your next adventure starts here.</p>
    <a href="#" class="btn">Start Your Journey</a>
  </section>
  
  <footer class="footer">
    <p>© 2024 WanderLust Travel. Making dreams come true, one destination at a time.</p>
  </footer>
</body>
</html>

What just happened?

You built a complete responsive website that adapts seamlessly from mobile to desktop. The viewport meta tag, flexible units, CSS Grid, and media queries work together to create a professional experience on any device. Try this: Test on different screen sizes to see how each section adapts.

Pro Tip: Use browser developer tools to test responsive designs. Press F12, click the device icon, and select different screen sizes to see exactly how your website behaves across devices. This saves time compared to testing on actual devices.

Your responsive website now handles phones, tablets, and desktops gracefully. The mobile-first approach ensures fast loading and accessibility, while progressive enhancement adds polish for larger screens. Real-world responsive design combines flexible layouts, scalable typography, and thoughtful breakpoints to create websites that work everywhere.

Quiz

Up Next

Build reusable UI components like cards, buttons, and forms that work perfectly across your responsive websites.

← Previous Course Index Next →