YoVDO

Responsive 4-Column Layout with CSS Grid - Build a Responsive Website from Scratch

Offered By: YouTube

Tags

HTML & CSS Courses Flexbox Courses HTML Courses Responsive Web Design Courses CSS Grid Courses

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

Web Development
Udacity
Programming Languages
University of Virginia via Udacity
Building a Basic Website
University of Massachusetts Amherst via Independent
Web-Technologien
openHPI
iDESWEB, Introducción al desarrollo web
Miríadax