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

(Source Youtube)

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

Why you’re not progressing (and how to fix it)

Blog

01-26-2021

Why you’re not progressing (and how to fix it)

After seeing thousands of designers go through our courses, there's something I've come to notice that makes or breaks a designer. A well-rounded designer who is pretty

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