CSS – The Complete Guide 2025 (incl. Flexbox, Grid & Sass)
-
Getting Started
-
Diving Into the Basics of CSSModule Introduction0sUnderstanding the Course Project Setup0sAdding CSS to our Project with Inline Styles0sUnderstanding the <style Tag & Creating a .css File0sApplying Additional Styles & Importing Google Fonts0sTheory Time – Selectors0sUnderstanding the “Cascading” Style & Specificity0sUnderstanding Inheritance0sAdding Combinators0sTheory Time – Combinators0sSummarizing Properties & Selectors0sSelectors & CombinatorsTime to Practice – The BasicsWrap Up0sUseful Resources & Links
-
Diving Deeper into CSSModule Introduction0sIntroducing the CSS Box Model0sUnderstanding the Box Model0sUnderstanding Margin Collapsing and Removing Default Margins0sDeep Dive on “Margin Collapsing”Theory Time – Working with Shorthand Properties0sApplying Shorthands in Practice0sDiving Into the Height & Width Properties0sUnderstanding Box Sizing0sAdding the Header to our Project0sUnderstanding the Display Property0sdisplay: none vs visibility: hiddenHTML Refresher: Block-level vs Inline ElementsApplying the Display Property & Styling our Navigation Bar0sUnderstanding an Unexpected “inline-block” Behaviour0sWorking with “text-decoration” & “vertical-align”0sStyling Anchor Tags0sAdding Pseudo Classes0sTheory Time – Pseudo Classes & Pseudo Elements0sGrouping Rules0sWorking with “font-weight” & “border”0sAdding & Styling a CTA-Button0sAdding a Background Image to our Project0sProperties Worth to Remember0sTime to Practice – Diving Deeper into CSSWrap Up0sUseful Resources & Links
-
More on Selectors & CSS Features
-
Practicing the BasicsModule Introduction0sAdding Style to our Plans0sWorking on the Recommended Plan0sStyling the Badge with “border-radius”0sStyling our List0sWorking on the Title and the Price of our Packages0sImproving our Action Button0sUnderstanding Outlines0sPresenting the Core Features to the User0sStyling the Headline of the Core Features Section0sPreparing the Content of the Key Feature Area0sAdding the Footer0sWhat we Achieved so Far0sAdding the Packages Page0sYour Challenge0sStyling the Links0sStyling our Package Boxes0sAdding “float” to our Package0sFixing the Hover Effect0sAdding the Final Touches0sUseful Resources & Links
-
Positioning Elements with CSSModule Introduction0sWhy Positioning will Improve our Website0sUnderstanding Positioning – The Theory0sWorking with the “fixed” Value0sCreating a Fixed Navigation Bar0sUsing “position” to Add a Background Image0sUnderstanding the Z-Index0sAdding a Badge to our Package0sStyling & Positioning our Badge with “absolute” and “relative”0sDiving Deeper into Relative Positioning0sAre you a “position” expert?Working with “overflow” and Relative Positioning0sIntroducing “sticky” Positioning0sUnderstanding the Stacking Context0sTime to Practice – PositioningWrap Up0sUseful Resources & Links
-
Understanding Background Images & ImagesOptional: Advanced Track Introduction0sModule Introduction0sUnderstanding “background-size”0sWorking with “background-position”0sThe “background” Shorthand – Theory0sApplying “background” Origin, Clip & Attachment0sUsing the “background” Shorthand on our Project0sStyling Images0sAdding the Customers Page to our Website0sWorking on the Image Layout0sUnderstanding Linear Gradients0sApplying Radial Gradients0sStacking Multiple Backgrounds0sUnderstanding Filters0sAdding & Styling SVGs – The Basics0sWrap Up0sUseful Resources & Links
-
Sizes & UnitsModule Introduction0sWhat’s Wrong With Our Project Units?0sWhere Units Matter0sAn Overview of Available Sizes & Units0sRules to Remember: Fixed Positioning & “%”0sRules to Remember: Absolute Positioning & “%”0sRules to Remember: Relative / Static Positioning & “%”0sFixing the Height 100% Issue0sDefining the Font Size in the Root Element0sUsing “min-width/height” & “max-width/height”0sWorking with “rem” & “em”0sAdding “rem” to Additional Properties0sFinishing “rem”0sUnderstanding the Viewport Units “vw” &”vh”0sWindows, Viewport Units & ScrollbarsChoosing the Right Unit0sUsing “auto” to Center Elements0sCleaning Up our Code0sWrap Up0sUseful Resources & Links
-
Working with JavaScript & CSSModule Introduction0sAdding a Modal0sSelecting & Manipulating Styles with JavaScript0sAdding an Event Listener0sTime to Practice – Adding Styles with JavaScriptAdding a Side Navigation Bar0sOpening and Closing the Hamburger Menu0sManipulating Element Classes0sUnderstanding Property Notations0sCleaning Up our Code0sWrap Up0sUseful Resources & Links
-
Making our Website ResponsiveModule Introduction0sWhy our Project Should Become Responsive0sUnderstanding Hardware Pixels vs. Software Pixels0sComparing the Viewport Metatag (HTML) and Media Queries (CSS)0sUnderstanding the “viewport” Metatag0sDesigning Websites “Mobile First”0sAdding our First Media Queries0sThings to Keep in Mind when Working with Media Queries0sFinding the Right Breaking Points0sCreating the Mobile First Design for our Plans0sMaking the Plans Responsive0sYour Challenge0sTime to Practice – Creating a Responsive Design with Media QueriesWorking with Logical Operators0sImproving the Customers Page0sImproving the Packages Page0sCleaning Up the Navigation Bar0sPositioning our Footer Correctly0sWrap Up0sUseful Resources & Links
-
Adding & Styling FormsModule Introduction0sAdding the Unstyled Form0sPage Initialization0sUnderstanding Advanced Attribute Selectors0sWorking on the General Layout0sRestyling the Form Elements0sStyling the Checkbox0sProviding Validation Feedback0sStyling the Signup Button0sFixing a Broken LinkWrap Up0sUseful Resources & Links
-
Working with Text and FontsModule Introduction0sComparing Generic Families & Font Families0sUnderstanding the Browser Settings0sUsing the Default Font Families0sUnderstanding the “font-family” Syntax0sWorking with Locally Saved Fonts0sWorking with Google Fonts0sUnderstanding Font Faces & “font-style”0sImporting our Custom Fonts0sUnderstanding Font Formats0sDiving into Font Properties0sAdding “letter-spacing”0sChanging the Line Height0sApplying “text-decoration” & “text-shadow”0sUnderstanding the “font” Shorthand0sLoading Performance & “font-display”0sWrap Up0sUseful Resources & Links
-
Adding Flexbox to our ProjectOptional: Expert Track Introduction0sModule Introduction0sHow we Could Improve our Project0sUnderstanding Flexbox0sCreating a Flex Container0sUsing “flex-direction” & “flex-wrap”0sUnderstanding the Importance of Main Axis & Cross Axis0sWorking with “align-items” & “justify-content”0sAnd What About “align-content”?0sTime for another quiz – are you a Flexbox expert already?Improving the Navigation Bar with Flexbox0sYour Challenge – Working on the Mobile Navigation Bar0sImproving the Footer0sFlexbox and the Z-IndexTime to Practice – Flexbox[OPTIONAL] Assignment Solution0sAdding Flexbox to the Customers Page0sUsing the “order” Property for a Flex Item0sWorking with “align-self”0sUnderstanding “flex-grow”0sApplying “flex-shrink”0sComparing “flex-basis” vs “width” & “height”0sWrap Up0sUseful Resources & Links
-
Using the CSS GridModule Introduction0sWhat is the CSS Grid?0sGetting Started0sTurning a Container into a Grid0sDefining Columns & Rows0sPositioning Child Elements in a Grid0sUsing “element-sizing”, “repeat” & “minmax”0sAdvanced Element Positioning0sWorking with Named Lines0sTime to Practice – GridUnderstanding Column & Row Shorthands0sWorking with Gaps0sAdding Named Template Areas0sTime to Practice – Diving deeper into the CSS GridCreating Automatically Generated Grid Areas0sUsing the Grid on our Project0sWorking with “fit-content”0sPositioning Grid Elements0sPositioning the Entire Grid Content0sPositioning Elements Individually0sUnderstanding Responsive Grids0sApplying Autoflow0sComparing the Explicit & Implicit Grid0sUnderstanding “auto-fill” & “auto-fit”0sCreating a Dense Grid0sStyling the Project Form with Grid0sComparing Grid & Flexbox0sNext Steps0sWrap Up0sUseful Resources & Links
-
Transforming Elements with CSS TransformsModule Introduction0sRotating Elements and setting transform-origin0sUsing Rotate and Translate0sWorking with “skew” and “scale”0sApplying Transformation Shorthands0sRotating Elements in 3 Dimensions0sUnderstanding the “perspective” Property0sMoving Elements along the Z-Axis with “translateZ”0sRotating the Container with “transform style”0sFlipping Elements & “backface-visibility”0sWrap Up0sUseful Resources & Links
-
Transitions & Animations in CSSModule Introduction0sUnderstanding and Applying Transitions0sCSS “transition” Property Deep DiveWorking with Timing Functions0sTransitions & “display”0sTime to Practice – CSS TransitionsUsing CSS Animations0sCSS “animation” Property Deep DiveAdding Multiple Keyframes0sAdding Animations to our Customers Page0sTime to Practice – CSS AnimationsUsing JavaScript Animation Event Listeners0sWrap Up0sUseful Resources & Links
-
Writing Future-Proof CSS CodeModule Introduction0sCSS Modules & Their Working Groups0sUsing CSS Variables0sUnderstanding & Using Vendor Prefixes0sWhich Prefixes Should You Use?0sDetecting Browser Support with @supports0sPolyfills0sEliminating Cross-Browser Inconsistencies0sHow to Name CSS Classes0sVanilla CSS vs Frameworks0sWrap Up0sUseful Resources & Links
-
Introducing Sass (Syntactically Awesome Style Sheets)Module Introduction0sWhat is Sass & Scss?0sImportant: Installing SassInstalling Sass0sThings to be Improved with Sass0sNesting Selectors0sAdding Nested Properties0sUnderstanding Variables0sStoring Lists & Maps in Variables0sBuilt-In Functions0sTime to Practice – SassAdding Simple Arithmetics0sAdding Better Import and Partials0sImproving Media Queries0sUnderstanding Inheritance0sAdding Mixins0sUsing the Ampersand Operator0sWrap Up0sUseful Resources & Links
-
Course Roundup
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!
What's included
- 22.5 hours on-demand video
- 31 articles
- 303 downloadable resources
- Access on mobile and TV
- Certificate of completion