Autoplay
Autocomplete
Previous Lesson
Complete and Continue
CSS - The Complete Guide (incl. Flexbox, Grid & Sass)
Getting Started
Introduction (1:39)
What is CSS? (2:59)
CSS History, Present & Future (1:50)
Join our Online Learning Community
Course Outline (4:34)
Course Prerequisites (0:43)
How To Get The Most Out Of This Course (2:49)
Recommended Tools (1:26)
Useful Resources & Links
Where to Find the Source Code
The Academind Pro Referral Program
Diving Into the Basics of CSS
Module Introduction (0:55)
Understanding the Course Project Setup (2:44)
Adding CSS to our Project with Inline Styles (3:53)
Understanding the "style" Tag & Creating a .css File (6:27)
Applying Additional Styles & Importing Google Fonts (6:51)
Theory Time - Selectors (8:56)
Understanding the "Cascading" Style & Specificity​ (8:14)
Understanding Inheritance (5:47)
Adding Combinators (6:16)
Theory Time - Combinators (5:42)
Summarizing Properties & Selectors (3:49)
Assignment - The Basics (Problem) (3:15)
Assignment - The Basics (Solution) (12:40)
Wrap Up (2:02)
Useful Resources & Links
Diving Deeper into CSS
Module Introduction (1:19)
Introducing the CSS Box Model (3:36)
Understanding the Box Model (3:01)
Understanding Margin Collapsing and Removing Default Margins (3:05)
Deep Dive on "Margin Collapsing"
Theory Time - Working with Shorthand Properties (3:48)
Applying Shorthands in Practice (2:05)
Diving Into the Height & Width Properties (6:07)
Understanding Box Sizing (6:43)
Adding the Header to our Project (5:37)
Understanding the Display Property (7:12)
display: none vs visibility: hidden
HTML Refresher: Block-level vs Inline Elements
Applying the Display Property & Styling our Navigation Bar (6:53)
Understanding an Unexpected "inline-block" Behaviour (2:03)
Working with "text-decoration" & "vertical-align" (4:54)
Styling Anchor Tags (4:00)
Adding Pseudo Classes (1:47)
Theory Time - Pseudo Classes & Pseudo Elements (5:38)
Grouping Rules (1:14)
Working with "font-weight" & "border" (2:04)
Adding & Styling a CTA-Button (4:09)
Adding a Background Image to our Project (1:50)
Properties Worth to Remember (1:29)
Assignment - Diving Deeper (Problem) (3:08)
Assignment - Diving Deeper (Solution) (16:26)
Wrap Up (2:31)
Useful Resources & Links
More on Selectors & CSS Features
Module Introduction (0:41)
Using Multiple CSS Classes & Combined Selectors (7:09)
Classes or IDs? (4:05)
(Not) using !important (3:15)
Selecting the Opposite with :not() (3:29)
CSS & Browser Support (3:51)
Wrap Up (1:06)
Useful Resources & Links
Practicing the Basics
Module Introduction (0:37)
Adding Style to our Plans (8:34)
Working on the Recommended Plan (6:33)
Styling the Badge with "border-radius" (3:22)
Styling our List (3:02)
Working on the Title and the Price of our Packages (4:33)
Improving our Action Button (6:40)
Understanding Outlines (2:17)
Presenting the Core Features to the User (1:22)
Styling the Headline of the Core Features Section (3:38)
Preparing the Content of the Key Feature Area (7:15)
Adding the Footer (6:49)
What we Achieved so Far (1:46)
Adding the Packages Page (6:24)
Your Challenge (1:31)
Styling the Links (3:55)
Styling our Package Boxes (7:15)
Adding "float" to our Package (5:14)
Fixing the Hover Effect (4:11)
Adding the Final Touches (3:01)
Useful Resources & Links
Positioning Elements with CSS
Module Introduction (2:44)
Why Positioning will Improve our Website (2:32)
Understanding Positioning - The Theory (5:54)
Working with the "fixed" Value (9:50)
Creating a Fixed Navigation Bar (3:54)
Using "position" to Add a Background Image (6:03)
Understanding the Z-Index (6:59)
Adding a Badge to our Package (8:00)
Styling & Positioning our Badge with "absolute" and "relative" (3:10)
Diving Deeper into Relative Positioning (4:02)
Working with "overflow" and Relative Positioning (4:17)
Introducing "sticky" Positioning (6:53)
Understanding the Stacking Context (5:53)
Assignment - Positioning (Problem) (4:41)
Assignment - Positioning (Solution) (14:35)
Wrap Up (4:12)
Useful Resources & Links
Understanding Background Images & Images
Optional: Advanced Track Introduction (2:22)
Module Introduction (1:05)
Understanding "background-size" (8:41)
Working with "background-position" (5:00)
The "background" Shorthand - Theory (2:12)
Applying "background" Origin, Clip & Attachment (5:51)
Using the "background" Shorthand on our Project (2:19)
Styling Images (7:33)
Adding the Customers Page to our Website (3:19)
Working on the Image Layout (8:07)
Understanding Linear Gradients (6:16)
Applying Radial Gradients (5:41)
Stacking Multiple Backgrounds (4:50)
Understanding Filters (4:00)
Adding & Styling SVGs - The Basics (4:20)
Wrap Up (2:14)
Useful Resources & Links
Sizes & Units
Module Introduction (2:35)
What's Wrong With Our Project Units? (5:21)
Where Units Matter (6:02)
An Overview of Available Sizes & Units (4:24)
Rules to Remember: Fixed Positioning & "%" (4:15)
Rules to Remember: Absolute Positioning & "%" (8:14)
Rules to Remember: Relative / Static Positioning & "%" (8:53)
Fixing the Height 100% Issue (12:02)
Defining the Font Size in the Root Element (2:18)
Using "min-width/height" & "max-width/height" (5:27)
Working with "rem" & "em" (12:47)
Adding "rem" to Additional Properties (8:17)
Finishing "rem" (5:21)
Understanding the Viewport Units "vw" &"vh" (9:47)