Learn to build a responsive 4-column layout using CSS Grid for a Blog Articles section of a website. The course covers writing HTML markup, adding SCSS styles, understanding CSS grid vs. flexbox, using the Firefox Grid inspector, and implementing responsive design. Students will also learn about auto-fit vs. auto-fill, styling card content, adding hover states, and more. The course is suitable for beginners in web development looking to enhance their CSS skills and create responsive web layouts.
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
