CSS Website Build Part 3

In this final episode, we add responsive design, animations, and polishing touches to complete our website.

Responsive Design with Media Queries

/* Tablet */
@media (max-width: 768px) {
    .hero h1 { font-size: 2rem; }
    .hero { padding: 4rem 1.5rem; }

    .nav-links {
        gap: 1rem;
        font-size: 0.9rem;
    }

    .cards {
        grid-template-columns: 1fr;
    }
}

/* Mobile */
@media (max-width: 480px) {
    nav {
        flex-direction: column;
        gap: 1rem;
    }

    .hero h1 { font-size: 1.75rem; }
    .hero p { font-size: 1rem; }
}

Animations

/* Fade-in on page load */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero h1 { animation: fadeInUp 0.6s ease forwards; }
.hero p  { animation: fadeInUp 0.6s ease 0.2s forwards; opacity: 0; }
.hero .btn { animation: fadeInUp 0.6s ease 0.4s forwards; opacity: 0; }

.card {
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
}

.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }

Smooth Scrolling and Selection

html { scroll-behavior: smooth; }

::selection {
    background: #764ba2;
    color: white;
}

/* Focus styles for accessibility */
a:focus-visible,
.btn:focus-visible {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

Final Tips

• Validate your CSS — use the W3C CSS Validator
• Test across browsers — Chrome, Firefox, Safari, Edge
• Use DevTools — inspect, debug, and experiment
• Keep learning — explore Flexbox, Grid, and CSS animations in depth

Congratulations! You have completed the CSS for Beginners course. You now have a solid foundation to style any web page. Keep practicing and building! 🎉