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.
Overview
Syllabus
- Intro.
- Look at design for Latest Articles section.
- Start writing HTML markup for Articles grid.
- Start adding SCSS styles, using CSS grid for multi-column layout.
- Explain how CSS grid works, compared to flexbox.
- Using the Firefox Grid inspector.
- Responsive design vs intrinsic design approaches.
- Why I'm using the responsive approach for this.
- CSS Tricks article on auto-fit vs auto-fill.
- Start styling the card content-- card images.
- Add CSS grid gap and other spacing in card.
- Add background color and border-radius.
- Styling the card text.
- Add correct images and copy for each card.
- Add box-shadow to cards.
- Add hover state using transform and transition .
Taught by
Coder Coder
