12. Projects & Best Practices

Level: AdvancedDuration: 1h

Mini Projects

In this module, you will bring together everything you've learned in CSS by building practical, real-world components and layouts.

css

// Responsive Navbar (Flexbox/Grid)
<nav class="navbar">
  <ul class="nav-menu">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

/* Flexbox layout */
.navbar .nav-menu {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

css

// Card Layout with Hover Effects
.card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0,0,0,0.2);
}

css

// Landing Page Hero Section
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 4rem;
  align-items: center;
  background: linear-gradient(to right, #3498db, #9b59b6);
}

css

// Animated Portfolio Gallery
.gallery-item {
  position: relative;
  overflow: hidden;
}
.gallery-item img {
  width: 100%;
  transition: transform 0.4s ease;
}
.gallery-item:hover img {
  transform: scale(1.1);
}

Performance & Optimization

Writing beautiful CSS is one thing, but making it efficient is equally important. This section covers best practices to optimize your CSS and site performance.

css

// Critical CSS: extract above-the-fold styles
/* Inline minimal CSS for hero and navbar */
.hero, .navbar { /* essential styles */ }

// Minification: remove whitespace and comments before production
/* Use tools like cssnano or PostCSS */

Other techniques include removing unused CSS with tools like PurgeCSS, optimizing images, and leveraging caching for faster load times.

Accessibility in CSS

Good CSS isn't just about looks—it should make your site usable for everyone. This includes focus indicators, reduced motion preferences, color contrast, and readable typography.

css

/* Focus Indicator */
button:focus {
  outline: 3px solid #3498db;
  outline-offset: 2px;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* Color contrast */
h1, h2, p {
  color: #222;
  background-color: #fff;
  font-size: 1rem;
}

Mini Project Step

Build a full responsive landing page using Flexbox and Grid. Include a responsive navbar, hero section, card layout for features, and an animated portfolio gallery. Apply hover effects, optimized CSS, and ensure accessibility features are included.

MDN CSS Layout Guide

Web.dev Accessibility Best Practices