Animating News Article Cards | CSS Grid & Flexbox
New to CSS Grid? Watch the full Crash Course here: • CSS Grid Crash Course | Beginners Tut...
Responsive CSS Grid without Media Queries:
• Responsive CSS Grid No Media Queries
Pseudo Elements with Font Awesome Icons:
• Pseudo Elements with Font Awesome Icons
In this video I go over how to create an animating article card design using only HTML and CSS. I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the styling and effects with CSS. I use CSS Grid for the layout, flexbox for the card layout and then add hover effects with a pseudo element.
Enjoying this tutorial? Subscribe to stay up to date with my latest content: / @angeladesign737
Codepen: https://codepen.io/angeladelise/pen/R...
In this video I show you:
0:00 - Intro
0:33 - Starting HTML Code
1:11 - HTML Code
3:14 - CSS Code
4:31 - Card CSS Code
8:41 - Hover Effects
11:20 - Review
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...
--
Gear
Microphone - https://amzn.to/34bDTxH
Hard Drive - https://amzn.to/30m5E5M
--
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: / angeladelise
--
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!
Watch video Animating News Article Cards | CSS Grid & Flexbox online without registration, duration hours minute second in high quality. This video was added by user Angela Design 12 October 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 3,17 once and liked it 17 people.