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!
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.9
Rating
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
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
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.
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
- 250+ In-depth Courses
- 24 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
What They're Saying about Kevin Powell
Elijah Manor
Austin Akers
Nitya Narasimhan, PhD
Kelvin Omereshone
Rita Iglesias Gandara
Loved by 500k+ developers
This course was one of the best CSS courses I've taken! It gave me exactly what I needed, showing me how I can actually integrate my knowledge into a real codebase and how to architect a project so it's maintainable and its components are reusable. I'd definitely recommend it to everyone!
Benedek Kassai
Kevin explains everything in an understandable way, so you don't need to whirl back to understand it properly. I really liked the focus on accessibility, which gives you a lot of growth as a developer.
MukhammadBobur Pakhriev