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.

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

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.