CSS - The Complete Guide (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.

19 sections, 316 lectures
Total duration: 22h 30m

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

Course Overview

About This Course

You can write HTML that works—and still feel stuck when it comes to making it look the way you imagine. Maybe your layouts break as soon as the screen size changes, or you’re tweaking styles by trial and error and hoping nothing else collapses.

This course gives you a clear path through CSS, with different entry points depending on where you are: start from scratch, jump into advanced usage, or go straight to expert topics. You’ll get both the “why” behind CSS behavior and practical examples that make the rules feel predictable.

By the end, you’ll be able to style pages confidently, create responsive layouts, and add polished UI details that make a site feel real—without guessing. You’ll know how to approach a design, implement it cleanly, and troubleshoot when the browser doesn’t do what you expected.

What You'll Learn

You’ll go from writing basic styling rules to building responsive, animated interfaces using modern layout systems and maintainable CSS patterns.

Write solid CSS rules
Create styling rules with selectors and combinators, and work confidently with properties, values, and declarations so you can target elements precisely instead of “trying random things.”
Control the cascade
Predict which styles win by understanding specificity, inheritance, and why CSS is called “Cascading” Style Sheets—so you can fix conflicts quickly and avoid fragile overrides.
Master sizing and layout
Use the Box Model, positioning, and common units like px, rem, and % to build layouts that behave consistently across components and screen sizes.
Build responsive UIs
Implement responsive design with media queries and a Mobile First approach, so your pages adapt cleanly from small screens to large displays without redesigning everything.
Create modern layouts
Lay out pages with Flexbox and CSS Grid, and choose the right tool for the job by understanding how Grid differs from Flexbox in real layout scenarios.
Add polish and maintainability
Style text, fonts, backgrounds (including gradients), images, forms, and inputs; add transitions, transforms, and animations; and write future‑proof CSS with CSS variables, best‑practice class names, and Sass.

Ready to get started?

See enrollment options

Prerequisites

You should know the very basics of HTML and web development in general.
No CSS knowledge is required.

Who Is This Course For?

New web learners
You’ve started learning web development and can write basic HTML, but your pages still look plain. This course helps you turn that structure into designs you’re proud to share.
CSS self-taught users
You already use CSS, but it’s mostly trial-and-error and you’re never sure why something works. You’ll get the mental model that makes styling decisions feel reliable.
Improving CSS developers
You know selectors and the basics, and you’re ready to go deeper into modern CSS features and workflows. This course is a focused next step to sharpen and expand your day-to-day CSS skills.

Curriculum Overview

Start Now

Preview the structure and pacing of this course before you begin.

Getting Started11 lectures16m
- 01Introduction1:39 min
- 02What is CSS?2:59 min
- 03CSS History, Present & Future1:50 min
- 04Join our Online Learning Community0:00 min
- 05Course Outline4:34 min
- 06Course Prerequisites0:43 min
- 07How To Get The Most Out Of This Course2:49 min
- 08Recommended Tools1:26 min
- 09Useful Resources & Links0:00 min
- 10Where to Find the Source Code0:00 min
- 11The Academind Pro Referral Program0:00 min
Diving Into the Basics of CSS15 lectures1h 17m
- 01Module Introduction0:55 min
- 02Understanding the Course Project Setup2:44 min
- 03Adding CSS to our Project with Inline Styles3:53 min
- 04Understanding the "style" Tag & Creating a .css File6:27 min
- 05Applying Additional Styles & Importing Google Fonts6:51 min
- 06Theory Time - Selectors8:56 min
- 07Understanding the "Cascading" Style & Specificity8:14 min
- 08Understanding Inheritance5:47 min
- 09Adding Combinators6:16 min
- 10Theory Time - Combinators5:42 min
- 11Summarizing Properties & Selectors3:49 min
- 12Assignment - The Basics (Problem)3:15 min
- 13Assignment - The Basics (Solution)12:40 min
- 14Wrap Up2:02 min
- 15Useful Resources & Links0:00 min
Diving Deeper into CSS28 lectures1h 40m
- 01Module Introduction1:19 min
- 02Introducing the CSS Box Model3:36 min
- 03Understanding the Box Model3:01 min
- 04Understanding Margin Collapsing and Removing Default Margins3:05 min
- 05Deep Dive on "Margin Collapsing"0:00 min
- 06Theory Time - Working with Shorthand Properties3:48 min
- 07Applying Shorthands in Practice2:05 min
- 08Diving Into the Height & Width Properties6:07 min
- 09Understanding Box Sizing6:43 min
- 10Adding the Header to our Project5:37 min
- 11Understanding the Display Property7:12 min
- 12display: none vs visibility: hidden0:00 min
- 13HTML Refresher: Block-level vs Inline Elements0:00 min
- 14Applying the Display Property & Styling our Navigation Bar6:53 min
- 15Understanding an Unexpected "inline-block" Behaviour2:03 min
- 16Working with "text-decoration" & "vertical-align"4:54 min
- 17Styling Anchor Tags4:00 min
- 18Adding Pseudo Classes1:47 min
- 19Theory Time - Pseudo Classes & Pseudo Elements5:38 min
- 20Grouping Rules1:14 min
- 21Working with "font-weight" & "border"2:04 min
- 22Adding & Styling a CTA-Button4:09 min
- 23Adding a Background Image to our Project1:50 min
- 24Properties Worth to Remember1:29 min
- 25Assignment - Diving Deeper (Problem)3:08 min
- 26Assignment - Diving Deeper (Solution)16:26 min
- 27Wrap Up2:31 min
- 28Useful Resources & Links0:00 min
More on Selectors & CSS Features8 lectures23m
- 01Module Introduction0:41 min
- 02Using Multiple CSS Classes & Combined Selectors7:09 min
- 03Classes or IDs?4:05 min
- 04(Not) using !important3:15 min
- 05Selecting the Opposite with :not()3:29 min
- 06CSS & Browser Support3:51 min
- 07Wrap Up1:06 min
- 08Useful Resources & Links0:00 min
Practicing the Basics21 lectures1h 27m
- 01Module Introduction0:37 min
- 02Adding Style to our Plans8:34 min
- 03Working on the Recommended Plan6:33 min
- 04Styling the Badge with "border-radius"3:22 min
- 05Styling our List3:02 min
- 06Working on the Title and the Price of our Packages4:33 min
- 07Improving our Action Button6:40 min
- 08Understanding Outlines2:17 min
- 09Presenting the Core Features to the User1:22 min
- 10Styling the Headline of the Core Features Section3:38 min
- 11Preparing the Content of the Key Feature Area7:15 min
- 12Adding the Footer6:49 min
- 13What we Achieved so Far1:46 min
- 14Adding the Packages Page6:24 min
- 15Your Challenge1:31 min
- 16Styling the Links3:55 min
- 17Styling our Package Boxes7:15 min
- 18Adding "float" to our Package5:14 min
- 19Fixing the Hover Effect4:11 min
- 20Adding the Final Touches3:01 min
- 21Useful Resources & Links0:00 min
Positioning Elements with CSS17 lectures1h 33m
- 01Module Introduction2:44 min
- 02Why Positioning will Improve our Website2:32 min
- 03Understanding Positioning - The Theory5:54 min
- 04Working with the "fixed" Value9:50 min
- 05Creating a Fixed Navigation Bar3:54 min
- 06Using "position" to Add a Background Image6:03 min
- 07Understanding the Z-Index6:59 min
- 08Adding a Badge to our Package8:00 min
- 09Styling & Positioning our Badge with "absolute" and "relative"3:10 min
- 10Diving Deeper into Relative Positioning4:02 min
- 11Working with "overflow" and Relative Positioning4:17 min
- 12Introducing "sticky" Positioning6:53 min
- 13Understanding the Stacking Context5:53 min
- 14Assignment - Positioning (Problem)4:41 min
- 15Assignment - Positioning (Solution)14:35 min
- 16Wrap Up4:12 min
- 17Useful Resources & Links0:00 min
Understanding Background Images & Images17 lectures1h 13m
- 01Optional: Advanced Track Introduction2:22 min
- 02Module Introduction1:05 min
- 03Understanding "background-size"8:41 min
- 04Working with "background-position"5:00 min
- 05The "background" Shorthand - Theory2:12 min
- 06Applying "background" Origin, Clip & Attachment5:51 min
- 07Using the "background" Shorthand on our Project2:19 min
- 08Styling Images7:33 min
- 09Adding the Customers Page to our Website3:19 min
- 10Working on the Image Layout8:07 min
- 11Understanding Linear Gradients6:16 min
- 12Applying Radial Gradients5:41 min
- 13Stacking Multiple Backgrounds4:50 min
- 14Understanding Filters4:00 min
- 15Adding & Styling SVGs - The Basics4:20 min
- 16Wrap Up2:14 min
- 17Useful Resources & Links0:00 min
Sizes & Units20 lectures1h 48m
- 01Module Introduction2:35 min
- 02What's Wrong With Our Project Units?5:21 min
- 03Where Units Matter6:02 min
- 04An Overview of Available Sizes & Units4:24 min
- 05Rules to Remember: Fixed Positioning & "%"4:15 min
- 06Rules to Remember: Absolute Positioning & "%"8:14 min
- 07Rules to Remember: Relative / Static Positioning & "%"8:53 min
- 08Fixing the Height 100% Issue12:02 min
- 09Defining the Font Size in the Root Element2:18 min
- 10Using "min-width/height" & "max-width/height"5:27 min
- 11Working with "rem" & "em"12:47 min
- 12Adding "rem" to Additional Properties8:17 min
- 13Finishing "rem"5:21 min
- 14Understanding the Viewport Units "vw" &"vh"9:47 min
- 15Windows, Viewport Units & Scrollbars0:00 min
- 16Choosing the Right Unit5:30 min
- 17Using "auto" to Center Elements1:42 min
- 18Cleaning Up our Code1:06 min
- 19Wrap Up4:23 min
- 20Useful Resources & Links0:00 min

And 11 more sections in the full course.

Ready to Get Started?

Choose the option that works best for you.

Single Course

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

One Payment. Lifetime Access.

$69one-time

One-time payment
All future updates for this course
Downloadable resources & code
Certificate of completion
Hands-on exercises & projects
Self-paced learning
English captions on all videos
Lifetime access

Buy CSS

Single course license

All-Access Membership

Everything we teach. One subscription.

$25/mo

$4,729+ worth of courses

Full access to all courses
All future courses included
Downloadable resources & code
Certificates of completion
Hands-on exercises & projects
Self-paced learning
English captions on all videos
Cancel anytime

Subscribe Now

61 courses included

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

Write solid CSS rules

Control the cascade

Master sizing and layout

Build responsive UIs

Create modern layouts

Add polish and maintainability

New web learners

CSS self-taught users

Improving CSS developers