CSS grid cards with animated hover effect | HTML/CSS

Опубликовано: 09 Октябрь 2024
на канале: Coder Coder

26,603

1.1k

🔥 My course: Responsive Design for Beginners! https://coder-coder.com/responsive/

💻 Become a full-stack web dev with Zero to Mastery: https://academy.zerotomastery.io/a/af...

In this video we will build some responsive cards in CSS using CSS grid!

Get the source code on GitHub: https://github.com/thecodercoder/card...

0:00 - Intro
0:30 - Set up files & folders
1:27 - Add boilerplate HTML
2:26 - Loading Google font
3:16 - Add HTML markup for cards
6:30 - Start adding SCSS styles
9:30 - Plan grid template in Adobe XD
12:13 - Add styles for mobile cards
23:50 - Create additional cards in a grid
26:11 - Add styles for desktop cards
30:48 - Give cards different images and text
32:52 - Add breakpoints to make grid responsive
42:23 - Adding hover state on cards

_____________________________________

SUPPORT THE CHANNEL
⭐ Join channel members and get perks:    / @thecodercoder
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: https://marketplace.visualstudio.com/...

WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: https://coder-coder.com/responsive/
🌟 Gulp for Beginners: https://coder-coder.com/gulp-course/

RECOMMENDATIONS
⌨ My keyboard-- get 10% off with code THECODERCODER -- https://vissles.com/?ref=mu96kxst5w
💻 Other gear -- https://www.amazon.com/shop/thecoderc...
📚 My Favorite Books -- https://coder-coder.com/best-web-deve...
📺 My Favorite Courses -- https://coder-coder.com/best-web-deve...

🔽 FOLLOW CODER CODER
Blog -- https://coder-coder.com/
Twitter --   / thecodercoder
Instagram --   / thecodercoder

#webdevelopment #coding #programming