Sass, BEM, & Responsive Design (4 hr beginners course)

🔥 My course: Responsive Design for Beginners! https://coder-coder.com/responsive/

💻 Become a full-stack web dev with Zero to Mastery: https://academy.zerotomastery.io/a/aff_338z7xnj/external?affcode=441520_ti97uk6b

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 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

____________________________

SUPPORT THE CHANNEL
⭐ Join channel members and get perks: https://www.youtube.com/channel/UCzNf0liwUzMN6_pixbQlMhQ/join
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme

WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: https://coder-coder.com/responsive/
🌟 Gulp for Beginners: https://coder-coder.com/gulp-course/

RECOMMENDATIONS
⌨ My keyboard, Vissles V84 — https://vissles.com/?ref=mu96kxst5w — 🔥 get 10% off with code THECODERCODER —
💻 Other gear — https://www.amazon.com/shop/thecodercoder?listId=1LMCKGUTMVYXD
📚 My Favorite Books — https://coder-coder.com/best-web-development-books/
📺 My Favorite Courses — https://coder-coder.com/best-web-development-courses/

🔽 FOLLOW CODER CODER
Blog — https://coder-coder.com/
Twitter — https://twitter.com/thecodercoder
Instagram — https://www.instagram.com/thecodercoder

#webdevelopment #coding #programming