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)
Windows, Viewport Units & Scrollbars
Choosing the Right Unit (5:30)
Using "auto" to Center Elements (1:42)
Cleaning Up our Code (1:06)
Wrap Up (4:23)
Useful Resources & Links
Working with JavaScript & CSS
Module Introduction (1:16)
Adding a Modal (4:13)
Selecting & Manipulating Styles with JavaScript (10:34)
Adding an Event Listener (6:05)
Assignment - Adding Style with JavaScript (Problem) (0:45)
Assignment - Adding Style with JavaScript (Solution) (3:58)
Adding a Side Navigation Bar (7:14)
Opening and Closing the Hamburger Menu (3:57)
Manipulating Element Classes (6:40)
Understanding Property Notations (3:12)
Cleaning Up our Code (5:31)
Wrap Up (1:15)
Useful Resources & Links
Responsive Design
Module Introduction (1:45)
Why our Project Should Become Responsive (2:25)
Understanding Hardware Pixels vs. Software Pixels (10:29)
Comparing the Viewport Metatag (HTML) and Media Queries (CSS) (3:04)
Understanding the "viewport" Metatag (7:22)
Designing Websites "Mobile First" (1:54)
Adding our First Media Queries (12:52)
Things to Keep in Mind when Working with Media Queries (8:09)
Finding the Right Breaking Points (3:45)
Creating the Mobile First Design for our Plans (6:37)
Making the Plans Responsive (8:35)
Your Challenge (6:06)
Assignment - Responsive Websites (Problem) (3:00)
Assignment - Responsive Websites (Solution) (8:07)
Working with Logical Operators (8:13)
Improving the Customers Page (14:58)
Improving the Packages Page (5:41)
Cleaning Up the Navigation Bar (4:39)
Positioning our Footer Correctly (10:09)
Wrap Up (2:15)
Useful Resources & Links
Adding & Styling Forms
Module Introduction (1:32)
Adding the Unstyled Form (2:37)
Page Initialization (6:35)
Understanding Advanced Attribute Selectors (6:02)
Working on the General Layout (7:15)
Restyling the Form Elements (6:29)
Styling the Checkbox (6:52)
Providing Validation Feedback (8:50)
Styling the Signup Button (3:42)
Fixing a Broken Link
Wrap Up (1:29)
Useful Resources & Links
Working with Text and Fonts
Module Introduction (1:20)
Comparing Generic Families & Font Families (2:56)
Understanding the Browser Settings (6:17)
Using the Default Font Families (6:53)
Understanding the "font-family" Syntax (6:18)
Working with Locally Saved Fonts (3:50)
Working with Google Fonts (10:28)
Understanding Font Faces & "font-style" (6:49)
Importing our Custom Fonts (9:03)
Understanding Font Formats (5:41)
Diving into Font Properties (3:10)
Adding "letter-spacing" (4:43)
Changing the Line Height (6:07)
Applying "text-decoration" & "text-shadow" (5:51)
Understanding the "font" Shorthand (8:39)
Loading Performance & "font-display" (9:49)
Wrap Up (3:47)
Useful Resources & Links
Adding Flexbox to our Project
Optional: Expert Track Introduction (3:23)
Module Introduction (1:31)
How we Could Improve our Project (2:58)
Understanding Flexbox (3:18)
Creating a Flex Container (5:33)
Using "flex-direction" & "flex-wrap" (5:35)
Understanding the Importance of Main Axis & Cross Axis (7:27)
Working with "align-items" & "justify-content" (10:59)
And What About "align-content"? (2:40)
Improving the Navigation Bar with Flexbox (12:02)
Your Challenge - Working on the Mobile Navigation Bar (4:16)
Improving the Footer (5:35)
Assignment - Flexbox (Problem) (4:19)
Assignment - Flexbox (Solution) (8:32)
Flexbox and the Z-Index
Adding Flexbox to the Customers Page (3:16)
Using the "order" Property for a Flex Item (6:07)
Working with "align-self" (2:44)
Understanding "flex-grow" (7:35)
Applying "flex-shrink" (3:12)
Comparing "flex-basis" vs "width" & "height" (8:35)
Wrap Up (3:52)
Useful Resources & Links
Using the CSS Grid
Module Introduction (1:14)
What is the CSS Grid? (1:27)
Getting Started (2:22)
Turning a Container into a Grid (3:21)
Defining Columns & Rows (5:49)
Positioning Child Elements in a Grid (4:13)
Using "element-sizing", "repeat" & "minmax" (6:45)
Advanced Element Positioning (6:30)
Working with Named Lines (3:53)
Assignment - Grid (Problem) (0:49)
Assignment - Grid (Solution) (9:14)
Understanding Column & Row Shorthands (2:54)
Working with Gaps (2:33)
Adding Named Template Areas (6:39)
Assignment - Diving Deeper (Problem) (0:38)
Assignment - Diving Deeper (Solution) (3:22)
Creating Automatically Generated Grid Areas (7:10)
Using the Grid on our Project (9:10)
Working with "fit-content" (3:31)
Positioning Grid Elements (3:35)
Positioning the Entire Grid Content (3:17)
Positioning Elements Individually (1:34)
Understanding Responsive Grids (5:30)
Applying Autoflow (6:39)
Comparing the Explicit & Implicit Grid (2:31)
Understanding "auto-fill" & "auto-fit" (3:33)
Creating a Dense Grid (3:22)
Styling the Project Form with Grid (9:45)
Comparing Grid & Flexbox (2:27)
Next Steps (1:31)
Wrap Up (3:49)
Useful Resources & Links
Transforming Elements with CSS Transforms
Module Introduction (0:31)
Rotating Elements and setting transform-origin (3:45)
Using Rotate and Translate (4:57)
Working with "skew" and "scale" (6:18)
Applying Transformation Shorthands (2:23)
Rotating Elements in 3 Dimensions (4:19)
Understanding the "perspective" Property (3:37)
Moving Elements along the Z-Axis with "translateZ" (3:54)
Rotating the Container with "transform style" (3:44)
Flipping Elements & "backface-visibility" (1:15)
Wrap Up (1:14)
Useful Resources & Links
Transitions & Animations in CSS
Module Introduction (0:22)
Understanding and Applying Transitions (7:23)
CSS "transition" Property Deep Dive
Working with Timing Functions (2:50)
Transitions & "display" (6:11)
Assignment - CSS Transitions (Problem) (0:48)
Assignment - CSS Transitions (Solution) (2:12)
Using CSS Animations (9:00)
CSS "animation" Property Deep Dive
Adding Multiple Keyframes (3:22)
Adding Animations to our Customers Page (3:59)
Assignment - Animations (Problem) (0:33)
Assignment - Animations (Solution) (3:03)
Using JavaScript Animation Event Listeners (3:24)
Wrap Up (1:35)
Useful Resources & Links
Writing Future-Proof CSS Code
Module Introduction (0:34)
CSS Modules & Their Working Groups (1:55)
Using CSS Variables (7:31)
Understanding & Using Vendor Prefixes (4:47)
Which Prefixes Should You Use? (2:58)
Detecting Browser Support with @supports (5:09)
Polyfills (2:45)
Eliminating Cross-Browser Inconsistencies (2:58)
How to Name CSS Classes (4:52)
Vanilla CSS vs Frameworks (8:36)
Wrap Up (4:16)
Useful Resources & Links
Introducing Sass (Syntactically Awesome Style Sheets)
Module Introduction (0:42)
What is Sass & Scss? (3:30)
Installing Sass (4:25)
Things to be Improved with Sass (1:33)
Nesting Selectors (6:35)
Adding Nested Properties (1:27)
Understanding Variables (3:05)
Storing Lists & Maps in Variables (5:58)
Built-In Functions (3:18)
Assignment - Sass (Problem) (0:49)
Assignment - Sass (Solution) (3:42)
Adding Simple Arithmetics (2:24)
Adding Better Import and Partials (4:46)
Improving Media Queries (2:24)
Understanding Inheritance (3:33)
Adding Mixins (6:45)
Using the Ampersand Operator (2:57)
Wrap Up (1:13)
Useful Resources & Links
Course Roundup
Course Roundup (1:56)
HTML Refresher: Block-level vs Inline Elements
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock