CSS - The Complete Guide 2025 (incl. Flexbox, Grid & Sass)
All LevelsDesignCSS

CSS - The Complete Guide 2025 (incl. Flexbox, Grid & Sass)

Learn CSS for the first time or brush up your CSS skills and dive in even deeper. EVERY web developer has to know CSS.

Created by Academind by Maximilian Schwarzmüller, Maximilian Schwarzmüller, Manuel Lorenz
22.5 hours
Video Content
297
Lectures
110,530
Students
4.7
Rating
4.7
(110,530 students enrolled)

What you'll learn

Learn why CSS is amazing, not something to be afraid of!
Use basic as well as advanced CSS features
Flexbox, grid, animations, transitions, fonts, media queries and much more - it's all included!
Understand the concepts and theory behind CSS and certain CSS features
Build beautiful websites which don't just contain great content but also look good

Course Content

19 sections • 297 lectures • 22:45:58 total length

Getting Started

11 lectures • 17:06

Introduction01:39
What is CSS?02:59
Join our Online Learning Community00:25
CSS History, Present & Future01:50
Course Outline04:34
+6 more lectures

Diving Into the Basics of CSS

13 lectures • 01:01:43

Module Introduction00:55
Understanding the Course Project Setup02:44
Adding CSS to our Project with Inline Styles03:53
Understanding the <style> Tag & Creating a .css File06:27
Applying Additional Styles & Importing Google Fonts06:51
+10 more lectures

Diving Deeper into CSS

26 lectures • 01:24:15

Module Introduction01:19
Introducing the CSS Box Model03:36
Understanding the Box Model03:01
Understanding Margin Collapsing and Removing Default Margins03:05
Deep Dive on "Margin Collapsing"01:17
+22 more lectures

More on Selectors & CSS Features

8 lectures • 23:40

Module Introduction00:41
Using Multiple CSS Classes & Combined Selectors07:09
Classes or IDs?04:05
(Not) using !important03:15
Selecting the Opposite with :not()03:29
+4 more lectures

Practicing the Basics

21 lectures • 01:28:00

Module Introduction00:37
Adding Style to our Plans08:34
Working on the Recommended Plan06:33
Styling the Badge with "border-radius"03:22
Styling our List03:02
+16 more lectures

Positioning Elements with CSS

15 lectures • 01:14:30

Module Introduction02:44
Why Positioning will Improve our Website02:32
Understanding Positioning - The Theory05:54
Working with the "fixed" Value09:50
Creating a Fixed Navigation Bar03:54
+12 more lectures

Understanding Background Images & Images

17 lectures • 01:13:52

Optional: Advanced Track Introduction02:22
Module Introduction01:05
Understanding "background-size"08:41
Working with "background-position"05:00
The "background" Shorthand - Theory02:12
+12 more lectures

Sizes & Units

20 lectures • 01:49:12

Module Introduction02:35
What's Wrong With Our Project Units?05:21
Where Units Matter06:02
An Overview of Available Sizes & Units04:24
Rules to Remember: Fixed Positioning & "%"04:15
+15 more lectures

Working with JavaScript & CSS

11 lectures • 49:58

Module Introduction01:16
Adding a Modal04:13
Selecting & Manipulating Styles with JavaScript10:34
Adding an Event Listener06:05
Time to Practice - Adding Styles with JavaScript1 question
+7 more lectures

Making our Website Responsive

19 lectures • 01:59:02

Module Introduction01:45
Why our Project Should Become Responsive02:25
Understanding Hardware Pixels vs. Software Pixels10:29
Comparing the Viewport Metatag (HTML) and Media Queries (CSS)03:04
Understanding the "viewport" Metatag07:22
+15 more lectures

Adding & Styling Forms

12 lectures • 51:38

Module Introduction01:32
Adding the Unstyled Form02:37
Page Initialization06:35
Understanding Advanced Attribute Selectors06:02
Working on the General Layout07:15
+7 more lectures

Working with Text and Fonts

18 lectures • 01:41:44

Module Introduction01:20
Comparing Generic Families & Font Families02:56
Understanding the Browser Settings06:17
Using the Default Font Families06:53
Understanding the "font-family" Syntax06:18
+13 more lectures

Adding Flexbox to our Project

22 lectures • 01:49:36

Optional: Expert Track Introduction03:23
Module Introduction01:31
How we Could Improve our Project02:58
Understanding Flexbox03:18
Creating a Flex Container05:33
+19 more lectures

Using the CSS Grid

28 lectures • 01:55:08

Module Introduction01:14
What is the CSS Grid?01:27
Getting Started02:22
Turning a Container into a Grid03:21
Defining Columns & Rows05:49
+25 more lectures

Transforming Elements with CSS Transforms

12 lectures • 35:58

Module Introduction00:31
Rotating Elements and setting transform-origin03:45
Using Rotate and Translate04:57
Working with "skew" and "scale"06:18
Applying Transformation Shorthands02:23
+7 more lectures

Transitions & Animations in CSS

12 lectures • 39:25

Module Introduction00:22
Understanding and Applying Transitions07:23
CSS "transition" Property Deep Dive00:33
Working with Timing Functions02:50
Transitions & "display"06:11
+9 more lectures

Writing Future-Proof CSS Code

12 lectures • 46:27

Module Introduction00:34
CSS Modules & Their Working Groups01:55
Using CSS Variables07:31
Understanding & Using Vendor Prefixes04:47
Which Prefixes Should You Use?02:58
+7 more lectures

Introducing Sass (Syntactically Awesome Style Sheets)

18 lectures • 54:48

Module Introduction00:42
What is Sass & Scss?03:30
Important: Installing Sass00:11
Installing Sass04:25
Things to be Improved with Sass01:33
+14 more lectures

Course Roundup

2 lectures • 01:15

Course Roundup00:55
Bonus: More Content!00:20

Description

Join this bestselling CSS course to learn all about CSS from the ground up, in great depth!

CSS ( Cascading Style Sheets) is a "programming language" you use to turn your HTML pages into real beautiful websites.

This course covers it all - we start at the very basics (What is CSS? How does it work? How do you use it)? and gradually dive in deeper and deeper. And we do this by showing both practical examples as well as the theory behind it.

Getting started with CSS might look easy but there actually is a lot of depth to CSS - hence this course provides different "Tracks" or "Entry points" to exactly meet your demands and reflect you current knowledge level:

  • The Basics Track: Start from scratch, learn CSS from the ground up. You start with lecture 1 and simply follow through to the end.

  • The Advanced Track: You already know the CSS basics, you know what selectors are and how it works but you want to dive in deeper and learn some advanced features and usages.

  • The Expert Track: You got the advanced knowledge, too, but you want to dive into things like Flexbox, CSS Grid, CSS Variables or Sass. This track is for you.

Of course this course offers the theory and practical examples - we'll build an entire real course project throughout the course - but there also are multiple assignments, quizzes and challenges for you to practice individual concepts taught throughout the course.

Talking about the course project - we'll build the frontend (no backend) of a fictional web hosting company. We'll have a starting screen which has different sections, we got a responsive design with an animated side-drawer, we got modals and forms and in general we got a lot of CSS animations, font styles and more!

Here's what's inside the course in detail - this is all also applied to the mentioned course project:

  • The basics about selectors, combinators and how you set up styling rules in general

  • Properties, values and decalarations

  • How specifity and inheritance work and why it's called "Cascading" Style Sheets

  • Important theoretical concepts like the "Box Model"

  • How the default position of elements can be changed

  • Styling backgrounds (e.g. gradients) and images

  • Which units and dimensions you typically use in CSS (px, rem, % and more)

  • How JavaScript and CSS interact

  • Responsive design and what "Mobile First" means

  • Styling forms and form inputs

  • Working with text, fonts and text styles

  • Flexbox! How it works and how to use it

  • Using the CSS Grid and how it differs from Flexbox

  • Transforming and animating HTML elements with the help of CSS

  • Writing future-proof CSS with features like CSS variables or best-practice class names

  • Using Sass and what it actually is all about

Is this course for you?

It's for you if

  • you started with learning web development and you want to build more beautiful websites

  • you already know CSS but want to dive deeper

  • you're using CSS in a trial-and-error manner and want to change this (you should!)

You might come back later if

  • you're an absolute CSS pro and you know the CSS working group drafts by heart

  • you're a backend-only developer (Node, PHP, NO HTML or frontend JavaScript)

  • you're a total newcomer to web development and you don't know the basics about HTML

If that sounds good to you, we'd be more than happy to welcome you in this course!

Who this course is for:

  • Anyone who wants to learn CSS for the first time or wants to sharpen his or her CSS skills
  • Anyone who's excited to learn about the latest CSS features like Flexbox, CSS Grid or CSS Variables
  • Anyone who knows CSS but wants to dive deeper

This course includes:

  • 22.5 hours on-demand video
  • 31 articles
  • 303 downloadable resources
  • Access on mobile and TV
  • Full lifetime access
  • Certificate of completion

Instructors

Academind by Maximilian Schwarzmüller

Maximilian Schwarzmüller

Manuel Lorenz

Students also download

Explore related courses to expand your learning journey.