CSS - The Complete Guide 2022 (incl. Flexbox, Grid & Sass)

20h 54m 47s
English
Paid

Course description

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.

Read more about the course

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

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 266 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online CSS - The Complete Guide 2022 (incl. Flexbox, Grid & Sass)

0:00
/
#1: Introduction

All Course Lessons (266)

#Lesson TitleDurationAccess
1
Introduction Demo
01:40
2
What is CSS?
03:00
3
CSS History, Present & Future
01:51
4
Course Outline
04:35
5
Course Prerequisites
00:44
6
How To Get The Most Out Of This Course
02:50
7
Recommended Tools
01:27
8
Module Introduction
00:56
9
Understanding the Course Project Setup
02:45
10
Adding CSS to our Project with Inline Styles
03:54
11
Understanding the <style> Tag & Creating a .css File
06:28
12
Applying Additional Styles & Importing Google Fonts
06:52
13
Theory Time - Selectors
08:57
14
Understanding the "Cascading" Style & Specificity​
08:15
15
Understanding Inheritance
05:48
16
Adding Combinators
06:17
17
Theory Time - Combinators
05:43
18
Summarizing Properties & Selectors
03:50
19
Wrap Up
02:03
20
Module Introduction
01:20
21
Introducing the CSS Box Model
03:37
22
Understanding the Box Model
03:02
23
Understanding Margin Collapsing and Removing Default Margins
03:06
24
Theory Time - Working with Shorthand Properties
03:49
25
Applying Shorthands in Practice
02:06
26
Diving Into the Height & Width Properties
06:08
27
Understanding Box Sizing
06:44
28
Adding the Header to our Project
05:38
29
Understanding the Display Property
07:13
30
Applying the Display Property & Styling our Navigation Bar
06:54
31
Understanding an Unexpected "inline-block" Behaviour
02:04
32
Working with "text-decoration" & "vertical-align"
04:55
33
Styling Anchor Tags
04:01
34
Adding Pseudo Classes
01:48
35
Theory Time - Pseudo Classes & Pseudo Elements
05:39
36
Grouping Rules
01:16
37
Working with "font-weight" & "border"
02:05
38
Adding & Styling a CTA-Button
04:10
39
Adding a Background Image to our Project
01:51
40
Properties Worth to Remember
01:30
41
Wrap Up
02:32
42
Module Introduction
00:42
43
Using Multiple CSS Classes & Combined Selectors
07:10
44
Classes or IDs?
04:06
45
(Not) using !important
03:16
46
Selecting the Opposite with :not()
03:30
47
CSS & Browser Support
03:52
48
Wrap Up
01:07
49
Module Introduction
00:38
50
Adding Style to our Plans
08:35
51
Working on the Recommended Plan
06:34
52
Styling the Badge with "border-radius"
03:23
53
Styling our List
03:04
54
Working on the Title and the Price of our Packages
04:34
55
Improving our Action Button
06:41
56
Understanding Outlines
02:18
57
Presenting the Core Features to the User
01:23
58
Styling the Headline of the Core Features Section
03:39
59
Preparing the Content of the Key Feature Area
07:16
60
Adding the Footer
06:50
61
What we Achieved so Far
01:47
62
Adding the Packages Page
06:25
63
Your Challenge
01:32
64
Styling the Links
03:56
65
Styling our Package Boxes
07:16
66
Adding "float" to our Package
05:15
67
Fixing the Hover Effect
04:12
68
Adding the Final Touches
03:02
69
Module Introduction
02:45
70
Why Positioning will Improve our Website
02:33
71
Understanding Positioning - The Theory
05:56
72
Working with the "fixed" Value
09:51
73
Creating a Fixed Navigation Bar
03:55
74
Using "position" to Add a Background Image
06:04
75
Understanding the Z-Index
07:00
76
Adding a Badge to our Package
08:01
77
Styling & Positioning our Badge with "absolute" and "relative"
03:11
78
Diving Deeper into Relative Positioning
04:04
79
Working with "overflow" and Relative Positioning
04:19
80
Introducing "sticky" Positioning
06:54
81
Understanding the Stacking Context
05:54
82
Wrap Up
04:13
83
Optional: Advanced Track Introduction
02:23
84
Module Introduction
01:07
85
Understanding "background-size"
08:42
86
Working with "background-position"
05:01
87
The "background" Shorthand - Theory
02:13
88
Applying "background" Origin, Clip & Attachment
05:52
89
Using the "background" Shorthand on our Project
02:20
90
Styling Images
07:34
91
Adding the Customers Page to our Website
03:20
92
Working on the Image Layout
08:08
93
Understanding Linear Gradients
06:17
94
Applying Radial Gradients
05:42
95
Stacking Multiple Backgrounds
04:51
96
Understanding Filters
04:01
97
Adding & Styling SVGs - The Basics
04:21
98
Wrap Up
02:15
99
Module Introduction
02:36
100
What's Wrong With Our Project Units?
05:22
101
Where Units Matter
06:03
102
An Overview of Available Sizes & Units
04:25
103
Rules to Remember: Fixed Positioning & "%"
04:16
104
Rules to Remember: Absolute Positioning & "%"
08:15
105
Rules to Remember: Relative / Static Positioning & "%"
08:54
106
Fixing the Height 100% Issue
12:03
107
Defining the Font Size in the Root Element
02:19
108
Using "min-width/height" & "max-width/height"
05:28
109
Working with "rem" & "em"
12:48
110
Adding "rem" to Additional Properties
08:18
111
Finishing "rem"
05:22
112
Understanding the Viewport Units "vw" &"vh"
09:48
113
Choosing the Right Unit
05:31
114
Using "auto" to Center Elements
01:43
115
Cleaning Up our Code
01:07
116
Wrap Up
04:24
117
Module Introduction
01:17
118
Adding a Modal
04:14
119
Selecting & Manipulating Styles with JavaScript
10:35
120
Adding an Event Listener
06:06
121
Adding a Side Navigation Bar
07:15
122
Opening and Closing the Hamburger Menu
03:58
123
Manipulating Element Classes
06:41
124
Understanding Property Notations
03:13
125
Cleaning Up our Code
05:32
126
Wrap Up
01:16
127
Module Introduction
01:46
128
Why our Project Should Become Responsive
02:26
129
Understanding Hardware Pixels vs. Software Pixels
10:30
130
Comparing the Viewport Metatag (HTML) and Media Queries (CSS)
03:05
131
Understanding the "viewport" Metatag
07:23
132
Designing Websites "Mobile First"
01:55
133
Adding our First Media Queries
12:53
134
Things to Keep in Mind when Working with Media Queries
08:10
135
Finding the Right Breaking Points
03:46
136
Creating the Mobile First Design for our Plans
06:38
137
Making the Plans Responsive
08:36
138
Your Challenge
06:07
139
Working with Logical Operators
08:14
140
Improving the Customers Page
14:59
141
Improving the Packages Page
05:42
142
Cleaning Up the Navigation Bar
04:40
143
Positioning our Footer Correctly
10:11
144
Wrap Up
02:16
145
Module Introduction
01:33
146
Adding the Unstyled Form
02:38
147
Page Initialization
06:36
148
Understanding Advanced Attribute Selectors
06:03
149
Working on the General Layout
07:16
150
Restyling the Form Elements
06:30
151
Styling the Checkbox
06:53
152
Providing Validation Feedback
08:51
153
Styling the Signup Button
03:43
154
Wrap Up
01:30
155
Module Introduction
01:21
156
Comparing Generic Families & Font Families
02:58
157
Understanding the Browser Settings
06:18
158
Using the Default Font Families
06:54
159
Understanding the "font-family" Syntax
06:19
160
Working with Locally Saved Fonts
03:51
161
Working with Google Fonts
10:29
162
Understanding Font Faces & "font-style"
06:51
163
Importing our Custom Fonts
09:04
164
Understanding Font Formats
05:42
165
Diving into Font Properties
03:11
166
Adding "letter-spacing"
04:44
167
Changing the Line Height
06:08
168
Applying "text-decoration" & "text-shadow"
05:52
169
Understanding the "font" Shorthand
08:40
170
Loading Performance & "font-display"
09:50
171
Wrap Up
03:49
172
Optional: Expert Track Introduction
03:24
173
Module Introduction
01:33
174
How we Could Improve our Project
02:59
175
Understanding Flexbox
03:19
176
Creating a Flex Container
05:34
177
Using "flex-direction" & "flex-wrap"
05:37
178
Understanding the Importance of Main Axis & Cross Axis
07:28
179
Working with "align-items" & "justify-content"
11:00
180
And What About "align-content"?
02:41
181
Improving the Navigation Bar with Flexbox
12:03
182
Your Challenge - Working on the Mobile Navigation Bar
04:18
183
Improving the Footer
05:36
184
[OPTIONAL] Assignment Solution
08:33
185
Adding Flexbox to the Customers Page
03:17
186
Using the "order" Property for a Flex Item
06:08
187
Working with "align-self"
02:45
188
Understanding "flex-grow"
07:36
189
Applying "flex-shrink"
03:13
190
Comparing "flex-basis" vs "width" & "height"
08:36
191
Wrap Up
03:53
192
Module Introduction
01:15
193
What is the CSS Grid?
01:28
194
Getting Started
02:24
195
Turning a Container into a Grid
03:22
196
Defining Columns & Rows
05:50
197
Positioning Child Elements in a Grid
04:14
198
Using "element-sizing", "repeat" & "minmax"
06:46
199
Advanced Element Positioning
06:31
200
Working with Named Lines
03:54
201
Understanding Column & Row Shorthands
02:55
202
Working with Gaps
02:34
203
Adding Named Template Areas
06:40
204
Creating Automatically Generated Grid Areas
07:11
205
Using the Grid on our Project
09:11
206
Working with "fit-content"
03:32
207
Positioning Grid Elements
03:36
208
Positioning the Entire Grid Content
03:18
209
Positioning Elements Individually
01:36
210
Understanding Responsive Grids
05:31
211
Applying Autoflow
06:40
212
Comparing the Explicit & Implicit Grid
02:32
213
Understanding "auto-fill" & "auto-fit"
03:34
214
Creating a Dense Grid
03:23
215
Styling the Project Form with Grid
09:46
216
Comparing Grid & Flexbox
02:28
217
Next Steps
01:32
218
Wrap Up
03:50
219
Module Introduction
00:32
220
Rotating Elements and setting transform-origin
03:46
221
Using Rotate and Translate
04:58
222
Working with "skew" and "scale"
06:19
223
Applying Transformation Shorthands
02:25
224
Rotating Elements in 3 Dimensions
04:20
225
Understanding the "perspective" Property
03:38
226
Moving Elements along the Z-Axis with "translateZ"
03:55
227
Rotating the Container with "transform style"
03:45
228
Flipping Elements & "backface-visibility"
01:16
229
Wrap Up
01:15
230
Module Introduction
00:23
231
Understanding and Applying Transitions
07:24
232
Working with Timing Functions
02:51
233
Transitions & "display"
06:12
234
Using CSS Animations
09:02
235
Adding Multiple Keyframes
03:23
236
Adding Animations to our Customers Page
04:00
237
Using JavaScript Animation Event Listeners
03:25
238
Wrap Up
01:36
239
Module Introduction
00:35
240
CSS Modules & Their Working Groups
01:56
241
Using CSS Variables
07:32
242
Understanding & Using Vendor Prefixes
04:49
243
Which Prefixes Should You Use?
02:59
244
Detecting Browser Support with @supports
05:10
245
Polyfills
02:46
246
Eliminating Cross-Browser Inconsistencies
02:59
247
How to Name CSS Classes
04:53
248
Vanilla CSS vs Frameworks
08:37
249
Wrap Up
04:17
250
Module Introduction
00:43
251
What is Sass & Scss?
03:32
252
Installing Sass
04:26
253
Things to be Improved with Sass
01:34
254
Nesting Selectors
06:36
255
Adding Nested Properties
01:28
256
Understanding Variables
03:06
257
Storing Lists & Maps in Variables
05:59
258
Built-In Functions
03:19
259
Adding Simple Arithmetics
02:25
260
Adding Better Import and Partials
04:47
261
Improving Media Queries
02:25
262
Understanding Inheritance
03:34
263
Adding Mixins
06:46
264
Using the Ampersand Operator
02:58
265
Wrap Up
01:15
266
Course Roundup
01:57

Unlock unlimited learning

Get instant access to all 265 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Mastering CSS Layout

Mastering CSS Layout

Sources: fullstack.io
Learn the Best Practices and Design Patterns behind every CSS layout. Know exactly what you should and shouldn't do at all times. And develop the intuition to break every layout...
1 hour 27 minutes 20 seconds
Web Developer Bootcamp with Flask and Python in 2022

Web Developer Bootcamp with Flask and Python in 2022

Sources: udemy
Welcome to the Web Developer Bootcamp with Flask and Python! In this course, you'll learn how to build and deploy dynamic websites using Python, Flask, MongoDB,
19 hours 57 minutes 43 seconds
HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid

HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid

Sources: udemy
Hi and welcome to the HTML/CSS Bootcamp course, where we'll walk through the same course I teach code bootcamp students around the world.
20 hours 55 minutes 14 seconds