Learn how to use Sass and BEM class naming conventions to build a card UI for a social media dashboard in this comprehensive tutorial video. Explore the BEM (Block Element Modifier) approach for writing class names in Sass/SCSS, and apply it to create a responsive card layout. Follow along as the instructor demonstrates planning class names, adding markup and SCSS selectors, styling different card components, and implementing flexbox and CSS grid for layout. Gain insights into structuring and styling both top and bottom card sections, including follower counts and stat changes. By the end of this tutorial, master the techniques for creating a well-organized and visually appealing card UI using Sass and BEM methodology.
Overview
Syllabus
- Intro (whoops I forgot to record the webcam ).
- What is BEM? Planning out the class names.
- Adding the markup and the SCSS selectors for the cards.
- Styles for top part of card.
- Styles for the middle follower count number.
- Styles for the bottom stat change number.
- Layout for the card grid with flexbox, then CSS grid.
- Styling the top bars on the cards.
- Studying the bottom card grid in the design.
- Writing SCSS selectors and markup for bottom cards.
- Styles for bottom cards.
Taught by
Coder Coder
