CSS Grid Tutorial: Responsive Card Design

In-depth, step-by-step web design tutorial on how to create a responsive card layout using CSS Grid and CSS Flexbox.

⏰ TIMESTAMPS ⏰

Project Setup: 0:16

Live Server: 1:43

HTML Overview: 2:04

Import Google Fonts: 3:03

Import Unsplash Stock Photos: 4:19

CSS Overview: 7:19

CSS Grid Example: 8:22

CSS Image Aspect Ratio: 16:25

How to Center an Image in a Div with Absolute Positioning: 19:00

CSS Card Hover Animation: 23:19

Add Media Queries to Create Responsive Design: 24:13

💥GET THE FILES 💥

Code: https://codesandbox.io/embed/responsive-card-layout-with-css-grid-sbxow

🔗 HELPFUL RESOURCES 🔗

Visual Studio Code: https://code.visualstudio.com/

Live Server: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Visual Studio Code on macOS (code Terminal shortcut): https://code.visualstudio.com/docs/setup/mac

Google Fonts: https://fonts.google.com/

Ultimate CSS Grid Guide: https://css-tricks.com/snippets/css/complete-guide-grid/

Ultimate CSS Flexbox Guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Box Sizing Border Box Overview: https://www.paulirish.com/2012/box-sizing-border-box-ftw/

👋 FOLLOW US 👋

Instagram: https://instagram.com/skillthrive/

#CSS #WebDesign #WebDev

Post Author: hatefull