Learn How to Create a Responsive CSS Grid Layout
Offered By: Kevin Powell via YouTube
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 ServiceUniversity 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