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

CSS – The Complete Guide (incl. Flexbox, Grid & Sass)
CSS – The Complete Guide (incl. Flexbox, Grid & Sass)
English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 22.5 Hours | 3.14 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.

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.

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
Table of Contents

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Course Roundup
291 Course Roundup