CSS Final Project

Build the complete WanderLust Travel website using everything you've learned across 39 lessons of CSS mastery.

Time to put it all together. You've learned selectors, layouts, animations, and responsive design. Now we'll build the complete WanderLust Travel website from scratch, combining every concept into one cohesive project that looks professional and works beautifully on any device.

Project Overview

The final WanderLust website consists of four connected pages: a stunning homepage with hero animations, a destinations gallery using CSS Grid, a booking form with custom styling, and an about page showcasing the team. Each page demonstrates different CSS techniques while maintaining consistent branding.

HOME
Hero + Navigation

DESTINATIONS
Grid Gallery

BOOKING
Form Styling

ABOUT
Team Cards

Each page uses different CSS techniques while sharing the same design system

Homepage Structure

The homepage serves as the centerpiece, featuring a full-screen hero section with gradient overlays, smooth scrolling navigation, and animated call-to-action buttons. The layout uses flexbox for the header and CSS Grid for the features section.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WanderLust Travel - Explore the World</title>
  <style>
    /* Global reset and typography */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', roboto, sans-serif;
      line-height: 1.6;
      color: #0f172a;
    }
    
    /* Header navigation with flexbox */
    .header {
      position: fixed;
      top: 0;
      width: 100%;
      background: rgba(15, 23, 42, 0.95);
      backdrop-filter: blur(10px);
      z-index: 1000;
      transition: all 0.3s ease;
    }
    
    .nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .logo {
      font-size: 1.5rem;
      font-weight: 900;
      color: #0ea5e9;
      text-decoration: none;
    }
    
    .nav-links {
      display: flex;
      list-style: none;
      gap: 2rem;
    }
    
    .nav-links a {
      color: #f8fafc;
      text-decoration: none;
      transition: color 0.3s ease;
    }
    
    .nav-links a:hover {
      color: #0ea5e9;
    }
    
    /* Hero section with gradient overlay */
    .hero {
      height: 100vh;
      background: linear-gradient(135deg, rgba(14, 165, 233, 0.8), rgba(249, 115, 22, 0.8)),
                  linear-gradient(45deg, #0f172a, #1e293b);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
    }
    
    .hero-content h1 {
      font-size: 3.5rem;
      font-weight: 900;
      margin-bottom: 1rem;
      animation: slideUp 1s ease-out;
    }
    
    .hero-content p {
      font-size: 1.25rem;
      margin-bottom: 2rem;
      opacity: 0.9;
      animation: slideUp 1s ease-out 0.2s both;
    }
    
    .cta-button {
      background: linear-gradient(45deg, #f97316, #ea580c);
      color: white;
      padding: 1rem 2rem;
      border: none;
      border-radius: 50px;
      font-size: 1.1rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s ease;
      animation: slideUp 1s ease-out 0.4s both;
    }
    
    .cta-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(249, 115, 22, 0.3);
    }
    
    /* Features section with CSS Grid */
    .features {
      padding: 5rem 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .features h2 {
      text-align: center;
      font-size: 2.5rem;
      margin-bottom: 3rem;
      color: #0f172a;
    }
    
    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
    }
    
    .feature-card {
      background: white;
      padding: 2rem;
      border-radius: 16px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      border: 1px solid #e2e8f0;
    }
    
    .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    
    .feature-card h3 {
      color: #0ea5e9;
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }
    
    /* Animations */
    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    /* Responsive design */
    @media (max-width: 768px) {
      .hero-content h1 {
        font-size: 2.5rem;
      }
      
      .nav-links {
        display: none;
      }
      
      .features {
        padding: 3rem 1rem;
      }
    }
  </style>
</head>
<body>
  <header class="header">
    <nav class="nav">
      <a href="#" class="logo">WanderLust</a>
      <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">Destinations</a></li>
        <li><a href="#">Booking</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </nav>
  </header>
  
  <section class="hero">
    <div class="hero-content">
      <h1>Explore the World</h1>
      <p>Discover amazing destinations and create unforgettable memories</p>
      <button class="cta-button">Start Your Journey</button>
    </div>
  </section>
  
  <section class="features">
    <h2>Why Choose WanderLust?</h2>
    <div class="features-grid">
      <div class="feature-card">
        <h3>Expert Guides</h3>
        <p>Our experienced guides know every hidden gem and local secret to make your trip extraordinary.</p>
      </div>
      <div class="feature-card">
        <h3>Best Prices</h3>
        <p>We guarantee the best prices on all destinations with our price-match promise.</p>
      </div>
      <div class="feature-card">
        <h3>24/7 Support</h3>
        <p>Round-the-clock customer support ensures your peace of mind throughout your journey.</p>
      </div>
    </div>
  </section>
</body>
</html>

What just happened?

The homepage combines a fixed navigation with backdrop blur, animated hero section using CSS keyframes, and responsive grid cards that lift on hover. Try this: resize the browser window to see the mobile layout adapt automatically.

Destinations Gallery Page

The destinations page showcases CSS Grid at its finest, creating a masonry-style layout where each destination card has different heights based on content. Grid-template-columns with repeat(auto-fit, minmax(320px, 1fr)) ensures the layout adapts perfectly to any screen size.

/* Destinations page styling */
.destinations-hero {
  background: linear-gradient(135deg, #0ea5e9, #7c3aed);
  color: white;
  text-align: center;
  padding: 8rem 2rem 4rem;
}

.destinations-hero h1 {
  font-size: 3rem;
  font-weight: 900;
  margin-bottom: 1rem;
}

.destinations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  padding: 4rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.destination-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

.card-content {
  padding: 1.5rem;
}

.card-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.5rem;
}

.card-price {
  color: #f97316;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 1rem 0;
}

.card-description {
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.book-button {
  background: #0ea5e9;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
  width: 100%;
}

.book-button:hover {
  background: #0284c7;
}

/* Filter buttons */
.filter-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  flex-wrap: wrap;
}

.filter-btn {
  background: white;
  border: 2px solid #e2e8f0;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn.active,
.filter-btn:hover {
  background: #0ea5e9;
  color: white;
  border-color: #0ea5e9;
}

Booking Form Styling

The booking form demonstrates advanced form styling with custom input designs, floating labels, and interactive validation states. Each form element uses focus-within pseudo-classes for smooth label animations and transition properties for polished interactions.

/* Booking form advanced styling */
.booking-form {
  max-width: 600px;
  margin: 4rem auto;
  padding: 3rem;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.form-group {
  position: relative;
  margin-bottom: 2rem;
}

.form-input {
  width: 100%;
  padding: 1.25rem 1rem 0.75rem;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 1rem;
  background: transparent;
  transition: all 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.form-label {
  position: absolute;
  top: 1.25rem;
  left: 1rem;
  color: #64748b;
  font-size: 1rem;
  pointer-events: none;
  transition: all 0.3s ease;
  background: white;
  padding: 0 0.5rem;
}

.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label {
  top: -0.5rem;
  left: 0.75rem;
  font-size: 0.875rem;
  color: #0ea5e9;
  font-weight: 600;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 1rem center;
  background-repeat: no-repeat;
  background-size: 1rem;
  padding-right: 3rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.submit-button {
  width: 100%;
  background: linear-gradient(45deg, #0ea5e9, #7c3aed);
  color: white;
  padding: 1.25rem 2rem;
  border: none;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

.submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(14, 165, 233, 0.3);
}

/* Form validation states */
.form-input:valid {
  border-color: #15803d;
}

.form-input:invalid:not(:placeholder-shown) {
  border-color: #dc2626;
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .booking-form {
    margin: 2rem 1rem;
    padding: 2rem;
  }
}

Performance Optimization

The final project includes several performance optimizations that make the website load faster and run smoother. These techniques reduce CSS file size, improve rendering speed, and create a better user experience across all devices.

CSS Minification

Remove whitespace, comments, and unnecessary characters to reduce file size by 30-40%

Critical CSS

Inline above-the-fold styles to eliminate render-blocking requests

CSS Grid vs Flexbox

Use Grid for 2D layouts, Flexbox for 1D alignment — better performance

Hardware Acceleration

Use transform and opacity for animations to leverage GPU processing

Best Practices Checklist

Your final WanderLust website should follow these professional development standards that separate amateur projects from production-ready websites. Each practice improves maintainability, accessibility, and user experience.

Category	Requirement	Impact
Accessibility	Minimum 4.5:1 color contrast ratio	Screen reader compatibility
Performance	CSS file under 50KB compressed	Faster load times on mobile
Responsive	Works on 320px to 2560px widths	Universal device support
Browser Support	Works in Chrome, Firefox, Safari, Edge	Reaches 95% of users

Project Deployment

Once your WanderLust website is complete, deployment makes it live on the internet for real users. GitHub Pages provides free hosting for static websites, while services like Netlify and Vercel offer automatic deployments from your code repository. The deployment process involves connecting your HTML and CSS files to a hosting service, configuring custom domains if desired, and setting up automatic updates when you make changes. Your final project demonstrates mastery of CSS fundamentals, layout systems, responsive design, animations, and professional development practices. This complete WanderLust Travel website represents everything you've learned across 39 lessons: from basic selectors and box model concepts to advanced Grid layouts and animation techniques. The project showcases real-world application of CSS skills that employers value and users appreciate.

Quiz

Up Next: CSS Course Wrap-Up

Celebrate your CSS mastery and discover the next steps in your web development journey.

← Previous Course Index Next →