CSS grid cards with animated hover effect | HTML/CSS
🔥 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
On this page of the site you can watch the video online CSS grid cards with animated hover effect | HTML/CSS with a duration of hours minute second in good quality, which was uploaded by the user Coder Coder 08 December 2020, share the link with friends and acquaintances, this video has already been watched 26,603 times on youtube and it was liked by 1.1 thousand viewers. Enjoy your viewing!
