CSS – The Complete Guide 2020 (incl. Flexbox, Grid & Sass)

CSS – The Complete Guide 2020 (incl. Flexbox, Grid & Sass)

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 22.5 Hours | 3.24 GB


Learn CSS for the first time or brush up your CSS skills and dive in even deeper. EVERY web developer has to know CSS.

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

What you’ll learn

Build beautiful websites which don’t just contain great content but also look good
Use basic as well as advanced CSS features
Understand the concepts and theory behind CSS and certain CSS features


+ Table of Contents

Getting Started
1 Introduction
2 What is CSS
3 Join our Online Learning Community
4 CSS History Present Future
5 Course Outline
6 Choose Your Track
7 Course Prerequisites
8 How To Get The Most Out Of This Course
9 Recommended Tools
10 Where to Find the Source Code
11 Useful Resources Links

Diving Into the Basics of CSS
12 Module Introduction
13 Understanding the Course Project Setup
14 Adding CSS to our Project with Inline Styles
15 Understanding the style Tag Creating a .css File
16 Applying Additional Styles Importing Google Fonts
17 Theory Time – Selectors
18 Understanding the Cascading Style Specificity
19 Understanding Inheritance
20 Adding Combinators
21 Theory Time – Combinators
22 Summarizing Properties Selectors
23 Wrap Up
24 Useful Resources Links

Diving Deeper into CSS
25 Module Introduction
26 Introducing the CSS Box Model
27 Understanding the Box Model
28 Understanding Margin Collapsing and Removing Default Margins
29 Deep Dive on Margin Collapsing
30 Theory Time – Working with Shorthand Properties
31 Applying Shorthands in Practice
32 Diving Into the Height Width Properties
33 Understanding Box Sizing
34 Adding the Header to our Project
35 Understanding the Display Property
36 display none vs visibility hidden
37 HTML Refresher Block-level vs Inline Elements
38 Applying the Display Property Styling our Navigation Bar
39 Understanding an Unexpected inline-block Behaviour
40 Working with text-decoration vertical-align
41 Styling Anchor Tags
42 Adding Pseudo Classes
43 Theory Time – Pseudo Classes Pseudo Elements
44 Grouping Rules
45 Working with font-weight border
46 Adding Styling a CTA-Button
47 Adding a Background Image to our Project
48 Properties Worth to Remember
49 Wrap Up
50 Useful Resources Links

More on Selectors CSS Features
51 Module Introduction
52 Using Multiple CSS Classes Combined Selectors
53 Classes or IDs
54 (Not) using important
55 Selecting the Opposite with not()
56 CSS Browser Support
57 Wrap Up
58 Useful Resources Links

Practicing the Basics
59 Module Introduction
60 Adding Style to our Plans
61 Working on the Recommended Plan
62 Styling the Badge with border-radius
63 Styling our List
64 Working on the Title and the Price of our Packages
65 Improving our Action Button
66 Understanding Outlines
67 Presenting the Core Features to the User
68 Styling the Headline of the Core Features Section
69 Preparing the Content of the Key Feature Area
70 Adding the Footer
71 What we Achieved so Far
72 Adding the Packages Page
73 Your Challenge
74 Styling the Links
75 Styling our Package Boxes
76 Adding float to our Package
77 Fixing the Hover Effect
78 Adding the Final Touches
79 Useful Resources Links

Positioning Elements with CSS
80 Module Introduction
81 Why Positioning will Improve our Website
82 Understanding Positioning – The Theory
83 Working with the fixed Value
84 Creating a Fixed Navigation Bar
85 Using position to Add a Background Image
86 Understanding the Z-Index
87 Adding a Badge to our Package
88 Styling Positioning our Badge with absolute and relative
89 Diving Deeper into Relative Positioning
90 Working with overflow and Relative Positioning
91 Introducing sticky Positioning
92 Understanding the Stacking Context
93 Wrap Up
94 Useful Resources Links

Understanding Background Images Images
95 Optional Advanced Track Introduction
96 Module Introduction
97 Understanding background-size
98 Working with background-position
99 The background Shorthand – Theory
100 Applying background Origin Clip Attachment
101 Using the background Shorthand on our Project
102 Styling Images
103 Adding the Customers Page to our Website
104 Working on the Image Layout
105 Understanding Linear Gradients
106 Applying Radial Gradients
107 Stacking Multiple Backgrounds
108 Understanding Filters
109 Adding Styling SVGs – The Basics
110 Wrap Up
111 Useful Resources Links

Sizes Units
112 Module Introduction
113 Whats Wrong With Our Project Units
114 Where Units Matter
115 An Overview of Available Sizes Units
116 Rules to Remember Fixed Positioning
117 Rules to Remember Absolute Positioning
118 Rules to Remember Relative Static Positioning
119 Fixing the Height 100 Issue
120 Defining the Font Size in the Root Element
121 Using min-widthheight max-widthheight
122 Working with rem em
123 Adding rem to Additional Properties
124 Finishing rem
125 Understanding the Viewport Units vw vh
126 Windows Viewport Units Scrollbars
127 Choosing the Right Unit
128 Using auto to Center Elements
129 Cleaning Up our Code
130 Wrap Up
131 Useful Resources Links

Working with JavaScript CSS
132 Module Introduction
133 Adding a Modal
134 Selecting Manipulating Styles with JavaScript
135 Adding an Event Listener
136 Adding a Side Navigation Bar
137 Opening and Closing the Hamburger Menu
138 Manipulating Element Classes
139 Understanding Property Notations
140 Cleaning Up our Code
141 Wrap Up
142 Useful Resources Links

Making our Website Responsive
143 Module Introduction
144 Why our Project Should Become Responsive
145 Understanding Hardware Pixels vs. Software Pixels
146 Comparing the Viewport Metatag (HTML) and Media Queries (CSS)
147 Understanding the viewport Metatag
148 Designing Websites Mobile First
149 Adding our First Media Queries
150 Things to Keep in Mind when Working with Media Queries
151 Finding the Right Breaking Points
152 Creating the Mobile First Design for our Plans
153 Making the Plans Responsive
154 Your Challenge
155 Working with Logical Operators
156 Improving the Customers Page
157 Improving the Packages Page
158 Cleaning Up the Navigation Bar
159 Positioning our Footer Correctly
160 Wrap Up
161 Useful Resources Links

Adding Styling Forms
162 Module Introduction
163 Adding the Unstyled Form
164 Page Initialization
165 Understanding Advanced Attribute Selectors
166 Working on the General Layout
167 Restyling the Form Elements
168 Styling the Checkbox
169 Providing Validation Feedback
170 Styling the Signup Button
171 Fixing a Broken Link
172 Wrap Up
173 Useful Resources Links

Working with Text and Fonts
174 Module Introduction
175 Comparing Generic Families Font Families
176 Understanding the Browser Settings
177 Using the Default Font Families
178 Understanding the font-family Syntax
179 Working with Locally Saved Fonts
180 Working with Google Fonts
181 Understanding Font Faces font-style
182 Importing our Custom Fonts
183 Understanding Font Formats
184 Diving into Font Properties
185 Adding letter-spacing
186 Changing the Line Height
187 Applying text-decoration text-shadow
188 Understanding the font Shorthand
189 Loading Performance font-display
190 Wrap Up
191 Useful Resources Links

Adding Flexbox to our Project
192 Optional Expert Track Introduction
193 Module Introduction
194 How we Could Improve our Project
195 Understanding Flexbox
196 Creating a Flex Container
197 Using flex-direction flex-wrap
198 Understanding the Importance of Main Axis Cross Axis
199 Working with align-items justify-content
200 And What About align-content
201 Improving the Navigation Bar with Flexbox
202 Your Challenge – Working on the Mobile Navigation Bar
203 Improving the Footer
204 Flexbox and the Z-Index
205 [OPTIONAL] Assignment Solution
206 Adding Flexbox to the Customers Page
207 Using the order Property for a Flex Item
208 Working with align-self
209 Understanding flex-grow
210 Applying flex-shrink
211 Comparing flex-basis vs width height
212 Wrap Up
213 Useful Resources Links

Using the CSS Grid
214 Module Introduction
215 What is the CSS Grid
216 Getting Started
217 Turning a Container into a Grid
218 Defining Columns Rows
219 Positioning Child Elements in a Grid
220 Using element-sizing repeat minmax
221 Advanced Element Positioning
222 Working with Named Lines
223 Understanding Column Row Shorthands
224 Working with Gaps
225 Adding Named Template Areas
226 Creating Automatically Generated Grid Areas
227 Using the Grid on our Project
228 Working with fit-content
229 Positioning Grid Elements
230 Positioning the Entire Grid Content
231 Positioning Elements Individually
232 Understanding Responsive Grids
233 Applying Autoflow
234 Comparing the Explicit Implicit Grid
235 Understanding auto-fill auto-fit
236 Creating a Dense Grid
237 Styling the Project Form with Grid
238 Comparing Grid Flexbox
239 Next Steps
240 Wrap Up
241 Useful Resources Links

Transforming Elements with CSS Transforms
242 Module Introduction
243 Rotating Elements and setting transform-origin
244 Using Rotate and Translate
245 Working with skew and scale
246 Applying Transformation Shorthands
247 Rotating Elements in 3 Dimensions
248 Understanding the perspective Property
249 Moving Elements along the Z-Axis with translateZ
250 Rotating the Container with transform style
251 Flipping Elements backface-visibility
252 Wrap Up
253 Useful Resources Links

Transitions Animations in CSS
254 Module Introduction
255 Understanding and Applying Transitions
256 CSS transition Property Deep Dive
257 Working with Timing Functions
258 Transitions display
259 Using CSS Animations
260 CSS animation Property Deep Dive
261 Adding Multiple Keyframes
262 Adding Animations to our Customers Page
263 Using JavaScript Animation Event Listeners
264 Wrap Up
265 Useful Resources Links

Writing Future-Proof CSS Code
266 Module Introduction
267 CSS Modules Their Working Groups
268 Using CSS Variables
269 Understanding Using Vendor Prefixes
270 Which Prefixes Should You Use
271 Detecting Browser Support with supports
272 Polyfills
273 Eliminating Cross-Browser Inconsistencies
274 How to Name CSS Classes
275 Vanilla CSS vs Frameworks
276 Wrap Up
277 Useful Resources Links

Introducing Sass (Syntactically Awesome Style Sheets)
278 Module Introduction
279 What is Sass Scss
280 Installing Sass
281 Things to be Improved with Sass
282 Nesting Selectors
283 Adding Nested Properties
284 Understanding Variables
285 Storing Lists Maps in Variables
286 Built-In Functions
287 Adding Simple Arithmetics
288 Adding Better Import and Partials
289 Improving Media Queries
290 Understanding Inheritance
291 Adding Mixins
292 Using the Ampersand Operator
293 Wrap Up
294 Useful Resources Links

Course Roundup
295 Course Roundup
296 Bonus More Content