Day 10: The Masterpiece

We’ve covered selectors, colors, flexbox, grid, and responsiveness. Now, we build a Landing Page.

The Architecture

We will build landing.html and style.css.

1. The Structure (HTML)

<header class="hero">
    <nav>
        <div class="logo">MyBrand</div>
        <ul class="nav-links">
            <li><a href="#">Features</a></li>
            <li><a href="#">Pricing</a></li>
        </ul>
    </nav>
    <div class="hero-content">
        <h1>Paint the Web</h1>
        <p>Master CSS in 10 days.</p>
        <button class="cta">Get Started</button>
    </div>
</header>

<section class="features">
    <div class="card">Feature 1</div>
    <div class="card">Feature 2</div>
    <div class="card">Feature 3</div>
</section>

2. The Style (CSS)

Reset & Typography:

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; line-height: 1.6; }

The Hero (Flexbox):

.hero {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 2rem;
    min-height: 80vh; /* 80% of Viewport Height */
    display: flex;
    flex-direction: column;
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}

The Features Grid (Grid):

.features {
    display: grid;
    /* Auto-fit columns (min 300px). Responsive magic! */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 4rem 2rem;
}

.card {
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

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

Mobile Responsiveness:

@media (max-width: 768px) {
    .nav-links { display: none; /* Hide nav on mobile for now */ }
    .hero-content h1 { font-size: 2rem; }
}

Conclusion

You are now a CSS Artist! 🎨 You can layout pages, color them, animation them, and make them work on any device.

Where to go from here?

• Sass (SCSS): CSS with superpowers (variables, nesting).
• Tailwind CSS: Utility-first CSS (very popular).
• CSS Architecture: BEM (Block Element Modifier).

Have fun building!