Responsive 4-Column Layout with CSS Grid - Build a Responsive Website from Scratch
Offered By: YouTube
Course Description
Overview
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.
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
Related Courses
HTML5 and CSS FundamentalsWorld Wide Web Consortium (W3C) via edX Build Responsive Real-World Websites with HTML and CSS
Udemy HTML5 & CSS3 Course: Build Responsive Websites from Scratch
Udemy Advanced CSS and Sass: Flexbox, Grid, Animations and More!
Udemy Modern HTML & CSS From The Beginning 2.0 (2024 Revamp)
Udemy