Skip to main content
CSS for Beginners
CHAPTER 12 Beginner

Build a Complete Responsive Website with CSS

Updated: May 10, 2026
5 min read

# Final Project: Complete Responsive Website

1. Introduction

Congratulations! You've learned selectors, colors, box model, flexbox, grid, and responsiveness. Now, it's time to put it all together to build a complete, modern, responsive landing page from scratch.

2. Project Requirements

We will build a landing page for an app called "TaskFlow". It must include:
  • A responsive navigation bar (Flexbox).
  • A Hero section with a background gradient.
  • A 3-column Features section (CSS Grid).
  • A responsive Footer.

3. The HTML Structure

html
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TaskFlow</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- Navigation -->
    <nav class="navbar">
        <div class="logo">TaskFlow.</div>
        <ul class="nav-links">
            <li><a href="#">Features</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#" class="btn-primary">Sign Up</a></li>
        </ul>
    </nav>

    <!-- Hero Section -->
    <header class="hero">
        <div class="hero-content">
            <h1>Manage your tasks effortlessly.</h1>
            <p>The ultimate productivity tool for modern teams.</p>
            <button class="btn-large">Get Started Free</button>
        </div>
    </header>

    <!-- Features Section -->
    <section class="features">
        <h2>Why Choose TaskFlow?</h2>
        <div class="features-grid">
            <div class="feature-card">
                <h3>Fast</h3>
                <p>Lightning quick performance.</p>
            </div>
            <div class="feature-card">
                <h3>Secure</h3>
                <p>Enterprise-grade security.</p>
            </div>
            <div class="feature-card">
                <h3>Collaborative</h3>
                <p>Work with your team in real-time.</p>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <p>© 2024 TaskFlow Inc. All rights reserved.</p>
    </footer>

</body>
</html>

4. The CSS Implementation

css
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 
/* --- 1. Variables & Reset --- */
:root {
    --primary: #4f46e5;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --bg-light: #f9fafb;
}

* {
    margin: 0; padding: 0; box-sizing: border-box;
}

body {
    font-family: &#039;Inter', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
}

/* --- 2. Navigation (Flexbox) --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.logo { font-size: 1.5rem; font-weight: 900; color: var(--primary); }

.nav-links {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 30px;
}

.nav-links a { text-decoration: none; color: var(--text-dark); font-weight: 500; }
.btn-primary { background: var(--primary); color: white !important; padding: 10px 20px; border-radius: 6px; }

/* --- 3. Hero Section (Flexbox & Gradients) --- */
.hero {
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    padding: 0 20px;
}

.hero h1 { font-size: 4rem; margin-bottom: 20px; letter-spacing: -1px; }
.hero p { font-size: 1.25rem; color: var(--text-light); margin-bottom: 30px; }
.btn-large { background: var(--primary); color: white; padding: 15px 30px; border: none; border-radius: 8px; font-size: 1.1rem; cursor: pointer; transition: transform 0.2s; }
.btn-large:hover { transform: translateY(-3px); }

/* --- 4. Features Section (CSS Grid) --- */
.features {
    padding: 80px 5%;
    text-align: center;
    background: var(--bg-light);
}

.features h2 { margin-bottom: 40px; font-size: 2.5rem; }

.features-grid {
    display: grid;
    /* Auto-responsive magic! */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.feature-card {
    background: white;
    padding: 40px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

.feature-card:hover { transform: translateY(-10px); }

/* --- 5. Footer --- */
.footer {
    text-align: center;
    padding: 40px;
    background: #111827;
    color: white;
}

/* --- 6. Mobile Responsiveness --- */
@media (max-width: 768px) {
    .nav-links { display: none; /* Hide links on mobile for simplicity */ }
    .hero h1 { font-size: 2.5rem; }
}

5. Summary

You did it! You have built a fully functional, responsive, professional webpage using raw HTML and CSS. You utilized Flexbox for alignments, CSS Grid for the layout structure, Gradients for aesthetics, and Media Queries to ensure it looks perfect on mobile devices. Welcome to the world of Frontend Development!

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter CSS Best Practices and Modern Design

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6

🎥 Related Videos 1