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.
Enroll in Course
CSS - short for Cascading Style Sheets - is a "programming language" you use to turn your raw 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
20+
hours
250+
lessons
Course Curriculum
-
PreviewIntroduction (1:39)
-
PreviewWhat is CSS? (2:59)
-
PreviewCSS History, Present & Future (1:50)
-
PreviewJoin our Online Learning Community
-
PreviewCourse Outline (4:34)
-
PreviewCourse Prerequisites (0:43)
-
PreviewHow To Get The Most Out Of This Course (2:49)
-
PreviewRecommended Tools (1:26)
-
PreviewUseful Resources & Links
-
PreviewWhere to Find the Source Code
-
StartThe Academind Pro Referral Program
-
PreviewModule Introduction (0:55)
-
PreviewUnderstanding the Course Project Setup (2:44)
-
StartAdding CSS to our Project with Inline Styles (3:53)
-
StartUnderstanding the "style" Tag & Creating a .css File (6:27)
-
StartApplying Additional Styles & Importing Google Fonts (6:51)
-
StartTheory Time - Selectors (8:56)
-
StartUnderstanding the "Cascading" Style & Specificity (8:14)
-
StartUnderstanding Inheritance (5:47)
-
StartAdding Combinators (6:16)
-
StartTheory Time - Combinators (5:42)
-
StartSummarizing Properties & Selectors (3:49)
-
StartAssignment - The Basics (Problem) (3:15)
-
StartAssignment - The Basics (Solution) (12:40)
-
StartWrap Up (2:02)
-
StartUseful Resources & Links
-
StartModule Introduction (1:19)
-
StartIntroducing the CSS Box Model (3:36)
-
StartUnderstanding the Box Model (3:01)
-
StartUnderstanding Margin Collapsing and Removing Default Margins (3:05)
-
StartDeep Dive on "Margin Collapsing"
-
StartTheory Time - Working with Shorthand Properties (3:48)
-
StartApplying Shorthands in Practice (2:05)
-
StartDiving Into the Height & Width Properties (6:07)
-
StartUnderstanding Box Sizing (6:43)
-
StartAdding the Header to our Project (5:37)
-
StartUnderstanding the Display Property (7:12)
-
Startdisplay: none vs visibility: hidden
-
StartHTML Refresher: Block-level vs Inline Elements
-
StartApplying the Display Property & Styling our Navigation Bar (6:53)
-
StartUnderstanding an Unexpected "inline-block" Behaviour (2:03)
-
StartWorking with "text-decoration" & "vertical-align" (4:54)
-
StartStyling Anchor Tags (4:00)
-
StartAdding Pseudo Classes (1:47)
-
StartTheory Time - Pseudo Classes & Pseudo Elements (5:38)
-
StartGrouping Rules (1:14)
-
StartWorking with "font-weight" & "border" (2:04)
-
StartAdding & Styling a CTA-Button (4:09)
-
StartAdding a Background Image to our Project (1:50)
-
StartProperties Worth to Remember (1:29)
-
StartAssignment - Diving Deeper (Problem) (3:08)
-
StartAssignment - Diving Deeper (Solution) (16:26)
-
StartWrap Up (2:31)
-
StartUseful Resources & Links
Course Prerequisites
You should know the very basics about HTML and web development in general
NO advanced HTML or web development knowledge is required though
NO CSS knowledge is required at all! You'll learn it all in this course!
All pre-requisites are covered by courses in our "Academind Pro" Membership.
Don't take my word for it - here's what other students are saying.
Mohammad Agha
After hating CSS in university, i really wanted to study a CSS course to improve my knowledge and to remove that hate. I'm looking to be a web developer and for sure i can't keep on hating CSS whenever i see it. Thankfully this course did the trick and now I'm in love with how CSS is really awesome and fun to work with.
Carlos Barbosa
It was a great learning! I have reviewed all my basic and advanced CSS knowledge and I filled my lack. All expert track is a lot of new knowledge for me.
Kayla Petersen
This course has been extremely helpful in showing me exactly why css reacts the way it does. I have spent hours trying to figure out why something wasn't working and now because of this course I am going to save so much time putting my website together! Very happy! Thank you!
30 Day Money Back Guarantee - No Questions Asked!
Our courses helped thousands of students learn something new and improve their lives.
We're so convinced by our course quality that we guarantee your success and provide a full refund within the first 30 days if you're not happy with the course.
Your Instructor
As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 2,500,000 students worldwide as well as a successful YouTube channel with 900.000 subscribers is the best proof for that.
The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content.
That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.
Frequently Asked Questions
Join 9985 happy students!
Single-Course License
Full access to "CSS - The Complete Guide (incl. Flexbox, Grid & Sass)
$69
Access to this course only.
This is a one-time payment that grants access to this course only, not to any other courses.
Academind Pro Membership
Unlimited access to this and all other current & future courses!