- Start adding SCSS styles, using CSS grid for multi-column layout
5
- Explain how CSS grid works, compared to flexbox
6
- Using the Firefox Grid inspector
7
- Responsive design vs intrinsic design approaches
8
- Why I'm using the responsive approach for this
9
- CSS Tricks article on auto-fit vs auto-fill
10
- Start styling the card content-- card images
11
- Add CSS grid gap and other spacing in card
12
- Add background color and border-radius
13
- Styling the card text
14
- Add correct images and copy for each card
15
- Add box-shadow to cards
16
- Add hover state using transform and transition
Description:
Learn how to create a responsive 4-column layout using CSS Grid in this 45-minute tutorial video. Explore the process of building a responsive website from scratch, focusing on the Blog Articles section of the Frontend Mentor Easybank landing page. Discover the differences between CSS Grid and Flexbox, utilize the Firefox Grid inspector, and understand responsive vs. intrinsic design approaches. Master techniques for styling card content, including images, spacing, background color, border-radius, and text. Implement hover states with transform and transition properties to enhance user interaction. Gain practical insights into modern web development practices and improve your CSS skills through this hands-on tutorial.
Responsive 4-Column Layout with CSS Grid - Build a Responsive Website from Scratch