NEW! Curricular Projects • Test Your Skills and Get Expert Feedback
We independently test and review every course that we recommend.
Please support us by joining our mailing list, and recommending this guide to others.
Updated: January 5, 2024
Scrimba
By Per Harald Borgen
This is one of the most impressive beginner-friendly HTML and CSS courses available. Well made, effective, engaging, and a lot of fun.
This course teaches HTML and CSS by building five different websites. Each tutorial in this course builds on one another, and applies increasingly advanced concepts as you progress.
The entire course curriculum is available for free, so you could choose to learn entirely for free. But we highly recommend purchasing a Pro subscription for a month or two while going through this course in order to get a certificate, full access to the community, and code reviews.
Frontend Masters
By Various
Solid on-ramp to CSS, going from the basics to professional-level CSS, with a particular emphasis on real-world frontend development.
Frontend Masters has some incredible instructors in their CSS path, coming from the front lines of some of the world’s top startups, as well as one of the world's leading experts in CSS, Lea Verou.
The courses are broken up into focused deep dives on particular topics, so you'll get a thorough understanding of techniques like animations, variables, responsive design, and more.
You'll learn incredibly valuable real-world CSS tips and avoid rookie mistakes like adding too many animations to your web page.
We really liked that each of the courses is chock-full of practical application and real-world scenarios.
Our initial research involved spending hours reading hundreds of reviews of various course options, and perusing forums for recommendations and user preferences. From this research, we narrowed down to a list of 12 highly-rated candidate courses.
We graded the candidate courses against the following criteria:
From this thorough research and testing, we're confident this is the single best guide to CSS courses available.
Codecademy
By Various Authors
Solid hands-on option for learning how to design, build, and deploy simple websites.
The course material is almost entirely comprised of short readings and coding exercises to teach you each concept. This keeps your hands on the keyboard from the first lesson.
Each section of the course includes a hands-on project, most of which include detailed step by step instructions. The scenarios for these projects aren't always the most relevant to professional web development, but are typically engaging and illustrate the core concepts well.
The path wraps up with a capstone project where you have to apply all the skills you've learned to design and build a landing page for a school, given a set of wireframes. This fairly meaty project will definitely put your skills to the test.
FreeCodeCamp
By Various Authors
If you’re brand new to programming, this is a great starting point for learning the basics, especially since it's free. After getting up to speed with the basics, you should consider moving to another more robust solution grounded in real world application.
This learning path starts with the basics and covers the essentials of designing and coding websites through a series of guided projects. After completing this path, you’ll understand various aspects of web page styling, including modern techniques like variables and pseudo-classes. You'll get lots of practice making web designs responsive and accessible.
Udemy
By Jonas Schmedtmann
The most popular HTML and CSS course on Udemy, this course is primarily video lecture plus some code-along projects, where Jonas builds websites for scenario companies.
Very approachable course for beginners that teaches what's needed to build a website using CSS. Not quite as focused on professional-grade development as other courses, but for the price point, it's a good value.
The course includes scenarios that will help you learn to apply your CSS knowledge to real-world situations.
One of the most valuable sections is where Jonas reviews design principles and best practices; this is a bit beyond the scope of learning CSS, but most courses leave out this practical real-world knowledge.
Udemy
By Colt Steele
A decent option for those who prefer to learn with videos. Colt Steele specializes in teaching beginners and novices to become professional-level programmers.
The course covers everything from the basics of HTML and CSS to more intermediate and advanced topics like CSS variables and pseudo-classes. It's heavy on professional-level intermediate CSS topics, including in-depth coverage of CSS layouts using Flexbox and CSS Grid, and responsive layouts.
Along the way, the course includes code-along projects to apply the concepts to different scenarios. To get the most out of the course, we recommend using these projects as independent practice, and use Colt's videos as solution walkthroughs.
The course ends with a final project built from scratch - a landing page for a SaaS app. This project combines everything taught in the course into a fairly ambitious design, and Colt walks through every step.
Cascading Style Sheets (CSS) is a markup and styling language for programming the visual appearance of HTML documents. CSS controls website layout and behavior, including colors, fonts, and other visual aspects of a web page. CSS works by targeting HTML elements and applying rules and styles to define how they should be displayed in the browser.
When starting out with CSS, developers should focus on learning the following key topics:
Selectors and Specificity: CSS uses selectors to target specific elements on the page. Learn about the different types of selectors, combinators, pseudo-classes, and pseudo-elements. Gain knowledge of specificity and how it affects the application of styles to different elements in the hierarchy of an HTML document.
Box Model: The box model defines how elements are structured and sized in CSS. You should develop an understanding of concepts such as margin, padding, border, and content areas and how they impact the layout and spacing of elements in an HTML document.
Layout and Positioning: Explore CSS layout techniques such as floats, positioning (static, relative, absolute, fixed), and CSS Grid or Flexbox. Understand how these techniques can be used to create various page layouts and achieve desired element positioning.
Responsive Design: Learn about responsive design principles and techniques for creating websites that adapt to different screen sizes and devices. Understand media queries, viewport meta tag, and techniques like fluid grids and responsive images.
CSS Transitions and Animations: Gain knowledge of CSS transitions and animations, which allow you to add visual effects and motion to elements on your web pages. Learn how to define keyframes, specify timing functions, and apply CSS animations.
By focusing on these key topics, you will establish a strong foundation in CSS development and be well-equipped to create visually appealing and responsive web pages.
Learning CSS doesn't have strict prerequisites, but having a basic understanding of the following concepts and technologies will make the learning process smoother:
HTML: Familiarity with HTML (Hypertext Markup Language) is essential as CSS is used to style and layout HTML elements. Understanding HTML tags, attributes, and the structure of web pages will help you apply CSS styles effectively.
Basic Web Development: Having a basic understanding of web development concepts like client-server architecture, HTTP requests, and how web pages are served will provide context for CSS usage in real-world scenarios.
Text Editors or IDEs: Familiarize yourself with a text editor or integrated development environment (IDE) of your choice. Popular options include Visual Studio Code, Sublime Text, or Atom. Learn how to create and save HTML and CSS files using your preferred editor.
Help us out by joining our email list to get notified when we release new guides, and recommending this guide to others.
Thanks for reading!
