Sass and BEM for beginners
๐ฅ Learn how to build a responsive website from a Figma design with HTML, SCSS, JS โก๏ธ https://coder-coder.com/responsive/
๐ Join the Coder Coder Club and get sneak peeks of videos: https://courses.coder-coder.com/p/club
๐ Get my hoodie here: https://coder-coder.com/merch
____________________________
In this video I'll walk you through the basics of Sass, BEM (block-element-modifier), and the principles of responsive design. This is a standalone course in Sass that's taken from my full course, Responsive Design for Beginners.
0:00 - Intro
0:22 - What is Sass?
1:17 - Compiling Sass with Vโฆ
Watch on YouTube โ
(saves to browser)
Chapters (16)
Intro
0:22
What is Sass?
1:17
Compiling Sass with VS Code extensions
12:49
Sass partials
26:17
Sass variables and CSS custom properties
43:45
Building the demo responsive website
50:00
Sass and BEM
57:08
Building the responsive mobile layout
1:04:30
Building the desktop layout
1:18:10
Setting widths
1:36:08
Sass mixins
2:06:35
Responsive typography
2:33:24
Sass functions
3:03:39
Why I use em units in media queries
3:10:49
Nesting and BEM
3:35:23
Helper/Utility classes
DeepCamp AI