Building a Light/Dark Dashboard, Part 4
🔥 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/af...
In this video I use the BEM (block element modifier) approach when writing my class names in Sass/SCSS, and use it to build a card UI for this Frontend Mentor challenge.
Full playlist: • Building a Light/Dark Dashboard
Source code on GitHub: https://github.com/thecodercoder/fem-...
Challenge on Frontend Mentor: https://www.frontendmentor.io/challen...
Live website: https://codercoder-darklight-toggle.p...
0:00 - Intro (whoops I forgot to record the webcam 🙈)
0:47 - What is BEM? Planning out the class names
12:02 - Adding the markup and the SCSS selectors for the cards
22:24 - Styles for top part of card
28:35 - Styles for the middle follower count number
36:55 - Styles for the bottom stat change number
51:44 - Layout for the card grid with flexbox, then CSS grid
1:08:12 - Styling the top bars on the cards
1:24:41 - Studying the bottom card grid in the design
1:27:09 - Writing SCSS selectors and markup for bottom cards
1:40:51 - Styles for bottom cards
____________________________
SUPPORT THE CHANNEL
⭐ Join channel members and get perks: / @thecodercoder
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: https://marketplace.visualstudio.com/...
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-- get 10% off with code THECODERCODER -- https://vissles.com/?ref=mu96kxst5w
💻 Other gear -- https://www.amazon.com/shop/thecoderc...
📚 My Favorite Books -- https://coder-coder.com/best-web-deve...
📺 My Favorite Courses -- https://coder-coder.com/best-web-deve...
🔽 FOLLOW CODER CODER
Blog -- https://coder-coder.com/
Twitter -- / thecodercoder
Instagram -- / thecodercoder
#webdevelopment #sass #bem
