Build a Modern Website from Scratch

Build a fully responsive site using modern CSS features like custom properties, nesting, grid, and utilities. Add polish with animations, view transitions, and bento layouts. Deploy with GitHub Actions to Netlify and show off your skills!

Build a Modern Website from Scratch

Why Learn CSS?

Master CSS to Build Responsive UIs Faster and with Less Code

Modern CSS Techniques

Make full use of the latest CSS features to tackle layout and styling challenges with less code and more control. Tools like cascade layers, custom properties, and new layout techniques help simplify even the trickiest designs.

Enhance User Experience with Animations

Add polish to your websites using animations, custom view transitions, and advanced layouts. More engaging experiences help retain users and showcase your CSS skills.

Hands-On Project-Based Learning

Build a complete professional site from scratch, starting from a Figma design and ending with a live deployment. Learn by doing, applying modern CSS techniques in a real-world workflow.

Ship It

Deploy your site using a GitHub Actions workflow to Netlify to showcase your work to the world. Whether working alone or on a team, use a deployment pipeline that scales.

What You'll Learn

Gain the Skills to Write Professional CSS and Deploy Production-Ready Websites

59
Lessons
9.1
Hours
4.89
Rating
Certificate of Completion
Learn at Your Own Pace

Build a complete website from scratch using modern CSS, responsive layouts, and a scalable professional workflow.

  • Start with a Figma design and build structured base styles using custom properties
  • Create responsive layouts using intrinsic design, CSS Grid, Flexbox, and media queries
  • Use CSS layers, scoped custom properties, and progressive enhancement for maintainable, scalable styles
  • Add polish with view transitions, scroll-driven animations, and dynamic filtering with JavaScript
  • Ship your site to a Netlify production environment with a real-world GitHub Actions workflow
Instructor Kevin Powell
Kevin Powell Kevin Powell Media Inc.

Your (Awesome) Instructor

I don’t just want you to build this one project. I want you to walk away with techniques you can adapt and reuse in all your future work.

A Self-Taught Developer Helping Others Learn and Grow

Kevin’s goal is to help make your journey easier and more enjoyable, every step of the way.

YouTube @KevinPowell

Weekly videos and shorts to help you build beautiful websites—with how-tos, tips, and tutorials that show just how powerful and fun CSS can be.

KevinPowellCSS

Most of what I do is over on YouTube, with regular videos every Tuesday and Thursday. Twitch is for having fun, learning new things, experimenting, and learning in public. My Youtube content is more structure tutorials.

Coursework

Introduction
5 minutes
The Structure
12 minutes
Base CSS Styles
1 hour, 1 minute
Layout & Utility Classes
1 hour, 18 minutes
Responsive Web Design
44 minutes
Component Styling
32 minutes
GitHub Workflow with Netlify
1 hour, 7 minutes
Creating a Second Page
2 hours, 1 minute
Filtering Cards
51 minutes
Animation Techniques
52 minutes
Theming and Customization
13 minutes
Wrapping Up
1 minute
Total Time to Build a Website From Scratch
9 hours, 4 minutes
Frontend Masters course player

Best in Class Course Player

Your Professional CSS Learning Adventure Begins Here

  • Course Progress: Learn at your own pace and pick up right where you left off.
  • Robust Note-Taking: Take notes alongside transcripts to easily reference information while learning.
  • Q&A and Code Corrections: Submit and view questions and answers, as well as code corrections.
Sample completion certificate

Earn a Completion Certificate

After completing this course, you'll receive a certificate of completion that serves as proof of your achievement, showcasing your expertise, and commitment to professional development. You can easily share this certificate on your LinkedIn profile to highlight your new skills and demonstrate continuous learning to potential employers and professional connections.

Get Started with Professional CSS and Much More

  • 200+ In-depth Courses
  • 21 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops

What They're Saying about Kevin Powell

Elijah Manor Elijah Manor
Austin Akers Austin Akers
Nitya Narasimhan, PhD Nitya Narasimhan, PhD
Kelvin Omereshone Kelvin Omereshone
Rita Iglesias Gandara Rita Iglesias Gandara
Loved by 100K+ developers
This is the best CSS course for anyone wanting to build a professional site with CSS! Kevin is an amazing instructor!
Mark Eagle
Mark Eagle
That feeling when you think you're an expert, then you take a course on FEM and realize you're not! This course was excellent. Now I'm going to refactor the dark/light code on my personal site.
Miguel Fondeur
Miguel Fondeur