YoVDO

Learn How to Create a Responsive CSS Grid Layout

Offered By: Kevin Powell via YouTube

Tags

HTML & CSS Courses Web Development Courses HTML Courses Responsive Design Courses

Course Description

Overview

Explore the creation of a dynamic, responsive CSS grid layout in this comprehensive 32-minute tutorial video. Dive into essential CSS properties like aspect-ratio and object-fit while learning to structure HTML, set up a basic grid, style cards, and implement image aspect ratios. Master techniques for stacking content, making grids dynamic with auto-fit, and creating featured cards. Discover how to optimize layouts for small screens and gain insights into CSS resets, Emmet usage, and advanced grid concepts. Access additional resources, including a GitHub repository and related videos, to further enhance your CSS grid skills and create visually appealing, responsive web designs.

Syllabus

- Introduction
- Writing the HTML
- Setting up a basic grid
- Styling the cards
- Using aspect-ratio on the images
- Stacking content with grid
- Styling the card content
- Adding aspect-ratio to the cards
- Making the grid dynamic with auto-fit
- Creating a featured card
- Styling the featured card
- Fixing things for small screens


Taught by

Kevin Powell

Related Courses

Software as a Service
University of California, Berkeley via Coursera
Intro to Computer Science
University of Virginia via Udacity
Web Development
Udacity
Software Engineering for SaaS
University of California, Berkeley via Coursera
CS50's Introduction to Computer Science
Harvard University via edX