We independently test and review every course that we recommend.
Please support us by leaving us feedback, and recommending this guide to others.
Updated: July 18, 2023
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.
This free Intro to HTML and CSS is the first real module of Scrimba’s Frontend Developer Career Path (titled Web dev basics). While this course is a good starting point, and an incredible value for a free course, this course on its own isn’t enough to prepare you to work with HTML and CSS professionally.
To learn some of the more robust fundamentals of CSS like transitions and responsive design, you’ll want to purchase a subscription in order to access some of the additional courses on the Frontend Developer Career Path, including Essential CSS Concepts and Responsive Design.
Scrimba subscriptions are cheaper than most other learning options, and a terrific value.
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.
The core courses in the path are more than enough to get you up to speed with building CSS. The elective coursework gets deeper into more advanced topics.
As a subscriber, you have access to a Discord server where Frontend Masters staff and instructors hang out and answer questions. It's one of the more valuable learning communities out there.
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 these projects are guided, with step by step instructions. The scenarios aren't always the most relevant to professional web development, but are usually engaging and good illustrations of the core concepts.
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. It's a fairly meaty project and will definitely put your skills to the test.
This path combines the Learn CSS course and Intermediate CSS courses, which are available for free. But if you subscribe and take this path, you also get access to some guided projects, practices, and the capstone project.
Most of the hands-on projects are guided, with step by step instructions. This means they're not terribly challenging, so you may reach the capstone project and find it takes a while to adjust.
If you already know some HTML and CSS, you probably want to skip ahead, and complete the practices for each section that you already know.
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.
Many of the challenges are actually quite simple to game or guess at, because the reading gives away too many clues. We would prefer to see more difficult challenges built into the curriculum in order to help students build skills along the way. You may want to take on some additional challenges at LeetCode to practice the concepts as you’re learning them.
Some of the projects aren't quite real world. So if you're looking to launch a career as a frontend web developer, make sure you continue with some independent projects that follow a real-world scenario.
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 neededto 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 it's practical real-world knowledge that most courses leave out.
Jonas takes a very deliberate process to teaching the course. The information is good, but we felt the course needed to be sped up to at least 1.5x.
The most helpful parts of this course are coding through the project alongside Jonas. A few options to get the most out of the course: code along with Jonas through the first project and gradually release responsibility - meaning with the second and third project, try to build the projects on your own given the requirements, and then watch the videos back to compare with how Jonas builds it.
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.
At times, during the explanations of concepts, Colt feels like he’s improvising. For example, he’ll say something like "we’ll give this a color of... I don’t know... orange." This gives his videos a natural, conversational feeling, but it also hurts the rewatchability of his videos. I don’t want to use these explanations as topic recaps because I’m annoyed the second time. Also, it undercuts some of the value of professional paid video training, as you can find more polished presentations on YouTube.
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.
Box Model: Understanding the concept of the box model is important as CSS styling is based on it. Familiarize yourself with the concept of content, padding, border, and margin, and how they affect the size and spacing of elements.
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 leaving us feedback, joining our email list to get notified when we release new guides, and recommending this guide to others.
Thanks for reading!
