Slide 3

Latest Updates

In a world of infinite possibilities, Ability is everything. We develop Website & Mobile app for Business.

How I use Sass and BEM class names when building a card UI | FEM social media dashboard, Part 4

???? My course: Responsive Design for Beginners! https://coder-coder.com/responsive/ 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

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

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: https://www.youtube.com/playlist?list=PLUWqFDiirlsu5az5EIyxe8ZddyNO_kDuP

Source code on GitHub: https://github.com/thecodercoder/fem-dklt-toggle

Challenge on Frontend Mentor: https://www.frontendmentor.io/challenges/social-media-dashboard-with-theme-switcher-6oY8ozp_H

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

____________________________

LINKS & RESOURCES

???? Learn to code with a free 7-day trial to Team Treehouse:

https://treehouse.7eer.net/c/1296848/228915/3944

SUPPORT THE CHANNEL

???????? Hit the THANKS button in any video!

???? GitHub sponsors: https://github.com/sponsors/thecodercoder

???? 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-- get 10% off with code THECODERCODER -- https://vissles.com/?ref=mu96kxst5w

???? 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 #sass #bem

Slide
From a small room table to large meeting rooms

We’re working with companies of all sizes ranging from startups to large scale business industries! We have extensive experience working with companies in Canada, USA and global to help them build a great website and effectively improve their ROI.

Slide
wordpress-development-toronto
Joomla-web-development-toronto
magento-web-development-toronto
shopify-web-development-toronto
html-web-development-toronto
Drupal-Web-Development-toronto
square space web development toronto
Contact
Image is not available
We'd love to hear from you.

We’re accepting new projects and would love to hear about yours. Got a question? Let's chat!

Glass Button
Request a Call
Glass Button
Chat Now
Copyright © 2007 – 2025 All rights reserved. Website Design & Web Development Company Located in Toronto, Ontario, Canada.

Yes for your convenience we have premade different packages which includes Logo design, Branding, Hosting, And different types of website.

Request a Call