Section 1 : Getting Started
1
Introduction Preview
2
What is CSS?
3
CSS History, Present & Future
4
Course Outline
5
Course Prerequisites Preview
6
How To Get The Most Out Of This Course
7
Recommended Tools

  Section 2 : Diving Into the Basics of CSS
8
Module Introduction
9
Understanding the Course Project Setup
10
Adding CSS to our Project with Inline Styles
11
Understanding the style Tag & Creating a .css File
12
Applying Additional Styles & Importing Google Fonts
13
Theory Time - Selectors Preview
14
Understanding the "Cascading" Style & Specifity
15
Understanding Inheritance
16
Adding Combinators
17
Theory Time - Combinators
18
Summarizing Properties & Selectors
19
Wrap Up

  Section 3 : Diving Deeper into CSS
20
Module Introduction Preview
21
Introducing the CSS Box Model
22
Understanding the Box Model
23
Understanding Margin Collapsing and Removing Default Margins
24
Theory Time - Working with Shorthand Properties
25
Applying Shorthands in Practice
26
Diving Into the Height & Width Properties
27
Understanding Box Sizing Preview
28
Adding the Header to our Project
29
Understanding the Display Property
30
Applying the Display Property & Styling our Navigation Bar
31
Understanding an Unexpected "inline-block" Behaviour
32
Working with "text-decoration" & "vertical-align"
33
Styling Anchor Tags
34
Adding Pseudo Classes
35
Theory Time - Pseudo Classes & Pseudo Elements
36
Grouping Rules
37
Working with "font-weight" & "border"
38
Adding & Styling a CTA-Button
39
Adding a Background Image to our Project
40
Properties Worth to Remember
41
Wrap Up

  Section 4 : More on Selectors & CSS Features
42
Module Introduction Preview
43
Using Multiple CSS Classes & Combined Selectors
44
Classes or IDs?
45
(Not) using !important
46
Selecting the Opposite with :not()
47
CSS & Browser Support
48
Wrap Up

  Section 5 : Practicing the Basics
49
Module Introduction Preview
50
Adding Style to our Plans
51
Working on the Recommended Plan
52
Styling the Badge with "border-radius"
53
Styling our List
54
Working on the Title and the Price of our Packages
55
Improving our Action Button
56
Understanding Outlines
57
Presenting the Core Features to the User
58
Styling the Headline of the Core Features Section
59
Preparing the Content of the Key Feature Area
60
Adding the Footer
61
What we Achieved so Far
62
Adding the Packages Page
63
Your Challenge
64
Styling the Links
65
Styling our Package Boxes
66
Adding "float" to our Package
67
Fixing the Hover Effect
68
Adding the Final Touches

  Section 6 : Positioning Elements with CSS
69
Module Introduction
70
Why Positioning will Improve our Website
71
Understanding Positioning - The Theory
72
Working with the "fixed" Value
73
Creating a Fixed Navigation Bar
74
Using "position" to Add a Background Image
75
Understanding the Z-Index
76
Adding a Badge to our Package
77
Styling & Positioning our Badge with "absolute" and "relative"
78
Diving Deeper into Relative Positioning
79
Working with "overflow" and Relative Positioning
80
Introducing "sticky" Positioning
81
Understanding the Stacking Context
82
Wrap Up

  Section 7 : Understanding Background Images & Images
83
Optional: Advanced Track Introduction
84
Module Introduction
85
Understanding "background-size"
86
Working with "background-position"
87
The "background" Shorthand - Theory
88
Applying "background" Origin, Clip & Attachment
89
Using the "background" Shorthand on our Project
90
Styling Images
91
Adding the Customers Page to our Website
92
Working on the Image Layout
93
Understanding Linear Gradients
94
Applying Radial Gradients
95
Stacking Multiple Backgrounds
96
Understanding Filters
97
Adding & Styling SVGs - The Basics
98
Wrap Up

  Section 8 : Sizes & Units
99
Module Introduction
100
What's Wrong With Our Project Units?
101
Where Units Matter
102
An Overview of Available Sizes & Units
103
Rules to Remember: Fixed Positioning & "%"
104
Rules to Remember: Absolute Positioning & "%"
105
Rules to Remember: Relative / Static Positioning & "%"
106
Fixing the Height 100% Issue
107
Defining the Font Size in the Root Element
108
Using "min-width/height" & "max-width/height"
109
Working with "rem" & "em"
110
Adding "rem" to Additional Properties
111
Finishing "rem"
112
Understanding the Viewport Units "vw" &"vh"
113
Choosing the Right Unit
114
Using "auto" to Center Elements
115
Cleaning Up our Code
116
Wrap Up

  Section 9 : Working with JavaScript & CSS
117
Module Introduction
118
Adding a Modal
119
Selecting & Manipulating Styles with JavaScript
120
Adding an Event Listener
121
Adding a Side Navigation Bar
122
Opening and Closing the Hamburger Menu
123
Manipulating Element Classes
124
Understanding Property Notations
125
Cleaning Up our Code
126
Wrap Up

  Section 10 : Making our Website Responsive
127
Module Introduction
128
Why our Project Should Become Responsive
129
Understanding Hardware Pixels vs. Software Pixels
130
Comparing the Viewport Metatag (HTML) and Media Queries (CSS)
131
Understanding the "viewport" Metatag
132
Designing Websites "Mobile First"
133
Adding our First Media Queries
134
Things to Keep in Mind when Working with Media Queries
135
Finding the Right Breaking Points
136
Creating the Mobile First Design for our Plans
137
Making the Plans Responsive
138
Your Challenge
139
Working with Logical Operators
140
Improving the Customers Page
141
Improving the Packages Page
142
Cleaning Up the Navigation Bar
143
Positioning our Footer Correctly
144
Wra