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

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

Start

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

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

Section: Getting Started

1. Introduction (1:39) Preview
2. What is CSS? (2:59) Preview
3. CSS History, Present & Future (1:50) Preview
4. Join our Online Learning Community (1:00) Preview
5. Course Outline (4:34) Preview
6. Course Prerequisites (0:43) Preview
7. How To Get The Most Out Of This Course (2:49) Preview
8. Recommended Tools (1:26) Preview
9. Useful Resources & Links (1:00) Preview
10. Where to Find the Source Code (1:00) Preview

Section: Diving Into the Basics of CSS

11. Module Introduction (0:55) Preview
12. Understanding the Course Project Setup (2:44) Preview
13. Adding CSS to our Project with Inline Styles (3:53) Start
14. Understanding the "style" Tag & Creating a .css File (6:27) Start
15. Applying Additional Styles & Importing Google Fonts (6:51) Start
16. Theory Time - Selectors (8:56) Start
17. Understanding the "Cascading" Style & Specificity (8:14) Start
18. Understanding Inheritance (5:47) Start
19. Adding Combinators (6:16) Start
20. Theory Time - Combinators (5:42) Start
21. Summarizing Properties & Selectors (3:49) Start
22. Assignment - The Basics (Problem) (3:15) Start
23. Assignment - The Basics (Solution) (12:40) Start
24. Wrap Up (2:02) Start
25. Useful Resources & Links (1:00) Start

Section: Diving Deeper into CSS

26. Module Introduction (1:19) Start
27. Introducing the CSS Box Model (3:36) Start
28. Understanding the Box Model (3:01) Start
29. Understanding Margin Collapsing and Removing Default Margins (3:05) Start
30. Deep Dive on "Margin Collapsing" (1:00) Start
31. Theory Time - Working with Shorthand Properties (3:48) Start
32. Applying Shorthands in Practice (2:05) Start
33. Diving Into the Height & Width Properties (6:07) Start
34. Understanding Box Sizing (6:43) Start
35. Adding the Header to our Project (5:37) Start
36. Understanding the Display Property (7:12) Start
37. display: none vs visibility: hidden (1:00) Start
38. HTML Refresher: Block-level vs Inline Elements (1:00) Start
39. Applying the Display Property & Styling our Navigation Bar (6:53) Start
40. Understanding an Unexpected "inline-block" Behaviour (2:03) Start
41. Working with "text-decoration" & "vertical-align" (4:54) Start
42. Styling Anchor Tags (4:00) Start
43. Adding Pseudo Classes (1:47) Start
44. Theory Time - Pseudo Classes & Pseudo Elements (5:38) Start
45. Grouping Rules (1:14) Start
46. Working with "font-weight" & "border" (2:04) Start
47. Adding & Styling a CTA-Button (4:09) Start
48. Adding a Background Image to our Project (1:50) Start
49. Properties Worth to Remember (1:29) Start
50. Assignment - Diving Deeper (Problem) (3:08) Start
51. Assignment - Diving Deeper (Solution) (16:26) Start
52. Wrap Up (2:31) Start
53. Useful Resources & Links (1:00) Start

Section: More on Selectors & CSS Features

54. Module Introduction (0:41) Start
55. Using Multiple CSS Classes & Combined Selectors (7:09) Start
56. Classes or IDs? (4:05) Start
57. (Not) using !important (3:15) Start
58. Selecting the Opposite with :not() (3:29) Start
59. CSS & Browser Support (3:51) Start
60. Wrap Up (1:06) Start
61. Useful Resources & Links (1:00) Start

Section: Practicing the Basics

62. Module Introduction (0:37) Start
63. Adding Style to our Plans (8:34) Start
64. Working on the Recommended Plan (6:33) Start
65. Styling the Badge with "border-radius" (3:22) Start
66. Styling our List (3:02) Start
67. Working on the Title and the Price of our Packages (4:33) Start
68. Improving our Action Button (6:40) Start
69. Understanding Outlines (2:17) Start
70. Presenting the Core Features to the User (1:22) Start
71. Styling the Headline of the Core Features Section (3:38) Start
72. Preparing the Content of the Key Feature Area (7:15) Start
73. Adding the Footer (6:49) Start
74. What we Achieved so Far (1:46) Start
75. Adding the Packages Page (6:24) Start
76. Your Challenge (1:31) Start
77. Styling the Links (3:55) Start
78. Styling our Package Boxes (7:15) Start
79. Adding "float" to our Package (5:14) Start
80. Fixing the Hover Effect (4:11) Start
81. Adding the Final Touches (3:01) Start
82. Useful Resources & Links (1:00) Start

Section: Positioning Elements with CSS

83. Module Introduction (2:44) Start
84. Why Positioning will Improve our Website (2:32) Start
85. Understanding Positioning - The Theory (5:54) Start
86. Working with the "fixed" Value (9:50) Start
87. Creating a Fixed Navigation Bar (3:54) Start
88. Using "position" to Add a Background Image (6:03) Start
89. Understanding the Z-Index (6:59) Start
90. Adding a Badge to our Package (8:00) Start
91. Styling & Positioning our Badge with "absolute" and "relative" (3:10) Start
92. Diving Deeper into Relative Positioning (4:02) Start
93. Working with "overflow" and Relative Positioning (4:17) Start
94. Introducing "sticky" Positioning (6:53) Start
95. Understanding the Stacking Context (5:53) Start
96. Assignment - Positioning (Problem) (4:41) Start
97. Assignment - Positioning (Solution) (14:35) Start
98. Wrap Up (4:12) Start
99. Useful Resources & Links (1:00) Start

Section: Understanding Background Images & Images

100. Optional: Advanced Track Introduction (2:22) Start
101. Module Introduction (1:05) Start
102. Understanding "background-size" (8:41) Start
103. Working with "background-position" (5:00) Start
104. The "background" Shorthand - Theory (2:12) Start
105. Applying "background" Origin, Clip & Attachment (5:51) Start
106. Using the "background" Shorthand on our Project (2:19) Start
107. Styling Images (7:33) Start
108. Adding the Customers Page to our Website (3:19) Start
109. Working on the Image Layout (8:07) Start
110. Understanding Linear Gradients (6:16) Start
111. Applying Radial Gradients (5:41) Start
112. Stacking Multiple Backgrounds (4:50) Start
113. Understanding Filters (4:00) Start
114. Adding & Styling SVGs - The Basics (4:20) Start
115. Wrap Up (2:14) Start
116. Useful Resources & Links (1:00) Start

Section: Sizes & Units

117. Module Introduction (2:35) Start
118. What's Wrong With Our Project Units? (5:21) Start
119. Where Units Matter (6:02) Start
120. An Overview of Available Sizes & Units (4:24) Start
121. Rules to Remember: Fixed Positioning & "%" (4:15) Start
122. Rules to Remember: Absolute Positioning & "%" (8:14) Start
123. Rules to Remember: Relative / Static Positioning & "%" (8:53) Start
124. Fixing the Height 100% Issue (12:02) Start
125. Defining the Font Size in the Root Element (2:18) Start
126. Using "min-width/height" & "max-width/height" (5:27) Start
127. Working with "rem" & "em" (12:47) Start
128. Adding "rem" to Additional Properties (8:17) Start
129. Finishing "rem" (5:21) Start
130. Understanding the Viewport Units "vw" &"vh" (9:47) Start
131. Windows, Viewport Units & Scrollbars (1:00) Start
132. Choosing the Right Unit (5:30) Start
133. Using "auto" to Center Elements (1:42) Start
134. Cleaning Up our Code (1:06) Start
135. Wrap Up (4:23) Start
136. Useful Resources & Links (1:00) Start

Section: Working with JavaScript & CSS

137. Module Introduction (1:16) Start
138. Adding a Modal (4:13) Start
139. Selecting & Manipulating Styles with JavaScript (10:34) Start
140. Adding an Event Listener (6:05) Start
141. Assignment - Adding Style with JavaScript (Problem) (0:45) Start
142. Assignment - Adding Style with JavaScript (Solution) (3:58) Start
143. Adding a Side Navigation Bar (7:14) Start
144. Opening and Closing the Hamburger Menu (3:57) Start
145. Manipulating Element Classes (6:40) Start
146. Understanding Property Notations (3:12) Start
147. Cleaning Up our Code (5:31) Start
148. Wrap Up (1:15) Start
149. Useful Resources & Links (1:00) Start

Section: Responsive Design

150. Module Introduction (1:45) Start
151. Why our Project Should Become Responsive (2:25) Start
152. Understanding Hardware Pixels vs. Software Pixels (10:29) Start
153. Comparing the Viewport Metatag (HTML) and Media Queries (CSS) (3:04) Start
154. Understanding the "viewport" Metatag (7:22) Start
155. Designing Websites "Mobile First" (1:54) Start
156. Adding our First Media Queries (12:52) Start
157. Things to Keep in Mind when Working with Media Queries (8:09) Start
158. Finding the Right Breaking Points (3:45) Start
159. Creating the Mobile First Design for our Plans (6:37) Start
160. Making the Plans Responsive (8:35) Start
161. Your Challenge (6:06) Start
162. Assignment - Responsive Websites (Problem) (3:00) Start
163. Assignment - Responsive Websites (Solution) (8:07) Start
164. Working with Logical Operators (8:13) Start
165. Improving the Customers Page (14:58) Start
166. Improving the Packages Page (5:41) Start
167. Cleaning Up the Navigation Bar (4:39) Start
168. Positioning our Footer Correctly (10:09) Start
169. Wrap Up (2:15) Start
170. Useful Resources & Links (1:00) Start

Section: Adding & Styling Forms

171. Module Introduction (1:32) Start
172. Adding the Unstyled Form (2:37) Start
173. Page Initialization (6:35) Start
174. Understanding Advanced Attribute Selectors (6:02) Start
175. Working on the General Layout (7:15) Start
176. Restyling the Form Elements (6:29) Start
177. Styling the Checkbox (6:52) Start
178. Providing Validation Feedback (8:50) Start
179. Styling the Signup Button (3:42) Start
180. Fixing a Broken Link (1:00) Start
181. Wrap Up (1:29) Start
182. Useful Resources & Links (1:00) Start

Section: Working with Text and Fonts

183. Module Introduction (1:20) Start
184. Comparing Generic Families & Font Families (2:56) Start
185. Understanding the Browser Settings (6:17) Start
186. Using the Default Font Families (6:53) Start
187. Understanding the "font-family" Syntax (6:18) Start
188. Working with Locally Saved Fonts (3:50) Start
189. Working with Google Fonts (10:28) Start
190. Understanding Font Faces & "font-style" (6:49) Start
191. Importing our Custom Fonts (9:03) Start
192. Understanding Font Formats (5:41) Start
193. Diving into Font Properties (3:10) Start
194. Adding "letter-spacing" (4:43) Start
195. Changing the Line Height (6:07) Start
196. Applying "text-decoration" & "text-shadow" (5:51) Start
197. Understanding the "font" Shorthand (8:39) Start
198. Loading Performance & "font-display" (9:49) Start
199. Wrap Up (3:47) Start
200. Useful Resources & Links (1:00) Start

Section: Adding Flexbox to our Project

201. Optional: Expert Track Introduction (3:23) Start
202. Module Introduction (1:31) Start
203. How we Could Improve our Project (2:58) Start
204. Understanding Flexbox (3:18) Start
205. Creating a Flex Container (5:33) Start
206. Using "flex-direction" & "flex-wrap" (8:55) Start
207. Understanding the Importance of Main Axis & Cross Axis (7:27) Start
208. Working with "align-items" & "justify-content" (10:59) Start
209. And What About "align-content"? (2:40) Start
210. Improving the Navigation Bar with Flexbox (12:02) Start
211. Your Challenge - Working on the Mobile Navigation Bar (4:16) Start
212. Improving the Footer (8:55) Start
213. Assignment - Flexbox (Problem) (4:19) Start
214. Assignment - Flexbox (Solution) (8:32) Start
215. Flexbox and the Z-Index (1:00) Start
216. Adding Flexbox to the Customers Page (3:16) Start
217. Using the "order" Property for a Flex Item (6:07) Start
218. Working with "align-self" (2:44) Start
219. Understanding "flex-grow" (7:35) Start
220. Applying "flex-shrink" (3:12) Start
221. Comparing "flex-basis" vs "width" & "height" (8:35) Start
222. Wrap Up (3:52) Start
223. Useful Resources & Links (1:00) Start

Section: Using the CSS Grid

224. Module Introduction (1:14) Start
225. What is the CSS Grid? (1:27) Start
226. Getting Started (2:22) Start
227. Turning a Container into a Grid (3:21) Start
228. Defining Columns & Rows (5:49) Start
229. Positioning Child Elements in a Grid (4:13) Start
230. Using "element-sizing", "repeat" & "minmax" (6:45) Start
231. Advanced Element Positioning (6:30) Start
232. Working with Named Lines (3:53) Start
233. Assignment - Grid (Problem) (0:49) Start
234. Assignment - Grid (Solution) (9:14) Start
235. Understanding Column & Row Shorthands (2:54) Start
236. Working with Gaps (2:33) Start
237. Adding Named Template Areas (6:39) Start
238. Assignment - Diving Deeper (Problem) (0:38) Start
239. Assignment - Diving Deeper (Solution) (3:22) Start
240. Creating Automatically Generated Grid Areas (7:10) Start
241. Using the Grid on our Project (9:10) Start
242. Working with "fit-content" (3:31) Start
243. Positioning Grid Elements (3:35) Start
244. Positioning the Entire Grid Content (3:17) Start
245. Positioning Elements Individually (1:34) Start
246. Understanding Responsive Grids (5:30) Start
247. Applying Autoflow (6:39) Start
248. Comparing the Explicit & Implicit Grid (2:31) Start
249. Understanding "auto-fill" & "auto-fit" (3:33) Start
250. Creating a Dense Grid (3:22) Start
251. Styling the Project Form with Grid (9:45) Start
252. Comparing Grid & Flexbox (2:27) Start
253. Next Steps (1:31) Start
254. Wrap Up (3:49) Start
255. Useful Resources & Links (1:00) Start

Section: Transforming Elements with CSS Transforms

256. Module Introduction (0:31) Start
257. Rotating Elements and setting transform-origin (3:45) Start
258. Using Rotate and Translate (4:57) Start
259. Working with "skew" and "scale" (6:18) Start
260. Applying Transformation Shorthands (2:23) Start
261. Rotating Elements in 3 Dimensions (4:19) Start
262. Understanding the "perspective" Property (3:37) Start
263. Moving Elements along the Z-Axis with "translateZ" (3:54) Start
264. Rotating the Container with "transform style" (3:44) Start
265. Flipping Elements & "backface-visibility" (1:15) Start
266. Wrap Up (1:14) Start
267. Useful Resources & Links (1:00) Start

Section: Transitions & Animations in CSS

268. Module Introduction (0:22) Start
269. Understanding and Applying Transitions (7:23) Start
270. CSS "transition" Property Deep Dive (1:00) Start
271. Working with Timing Functions (2:50) Start
272. Transitions & "display" (6:11) Start
273. Assignment - CSS Transitions (Problem) (0:48) Start
274. Assignment - CSS Transitions (Solution) (2:12) Start
275. Using CSS Animations (9:00) Start
276. CSS "animation" Property Deep Dive (1:00) Start
277. Adding Multiple Keyframes (3:22) Start
278. Adding Animations to our Customers Page (3:59) Start
279. Assignment - Animations (Problem) (0:33) Start
280. Assignment - Animations (Solution) (3:03) Start
281. Using JavaScript Animation Event Listeners (3:24) Start
282. Wrap Up (1:35) Start
283. Useful Resources & Links (1:00) Start

Section: Writing Future-Proof CSS Code

284. Module Introduction (0:34) Start
285. CSS Modules & Their Working Groups (1:55) Start
286. Using CSS Variables (7:31) Start
287. Understanding & Using Vendor Prefixes (4:47) Start
288. Which Prefixes Should You Use? (2:58) Start
289. Detecting Browser Support with @supports (5:09) Start
290. Polyfills (2:45) Start
291. Eliminating Cross-Browser Inconsistencies (2:58) Start
292. How to Name CSS Classes (4:52) Start
293. Vanilla CSS vs Frameworks (8:36) Start
294. Wrap Up (4:16) Start
295. Useful Resources & Links (1:00) Start

Section: Introducing Sass (Syntactically Awesome Style Sheets)

296. Module Introduction (0:42) Start
297. What is Sass & Scss? (3:30) Start
298. Installing Sass (4:25) Start
299. Things to be Improved with Sass (1:33) Start
300. Nesting Selectors (6:35) Start
301. Adding Nested Properties (1:27) Start
302. Understanding Variables (3:05) Start
303. Storing Lists & Maps in Variables (5:58) Start
304. Built-In Functions (3:18) Start
305. Assignment - Sass (Problem) (0:49) Start
306. Assignment - Sass (Solution) (3:42) Start
307. Adding Simple Arithmetics (2:24) Start
308. Adding Better Import and Partials (4:46) Start
309. Improving Media Queries (2:24) Start
310. Understanding Inheritance (3:33) Start
311. Adding Mixins (6:45) Start
312. Using the Ampersand Operator (2:57) Start
313. Wrap Up (1:13) Start
314. Useful Resources & Links (1:00) Start

Section: Course Roundup

315. Course Roundup (1:56) Start

Course Instructor

Image

Maximilian Schwarzmüller

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students worldwide as well as a successful YouTube channel is the best proof for that.

The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content. That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.