Build Blog Article Cards from Scratch | Complete Figma to HTML CSS Tutorial
8985 次观看 · 2020-08-03
UI 设计
New to CSS Grid? Watch the full Crash Course here: https://www.youtube.com/watch?v=yOPCQ5nD1Vs&t=214s
In this video I go over how to create Blog Article Cards using only HTML and CSS. I show you the full front end coding tutorial, where I use the Figma design to create the structure of the elements in HTML and then write all of the styling and effects with CSS. I use Flexbox for the layout and then add hover effects.
Enjoying this front end tutorial? Subscribe to stay up to date with my latest content: https://www.youtube.com/channel/UC_TjoSnaI3CTgIgmSn3rruA?sub_confirmation=1
Codepen: https://codepen.io/angeladelise/pen/Bajdvav
In this video I show you:
0:34 - Overview of Figma Design
1:21 - Guides of HTML Structure
2:36 - Starting HTML and CSS Code
3:05 - HTML Code
7:17 - CSS Code - Body & Card
8:52 - Card Banner Section
11:25 - Card Body Section
13:40 - Card Profile Section
16:47 - Card Wrapper Flex
17:53 - Card Hover Effect
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise
#completehtmlcss #designtocode #fullwebdesigntutorial
In this video I go over how to create Blog Article Cards using only HTML and CSS. I show you the full front end coding tutorial, where I use the Figma design to create the structure of the elements in HTML and then write all of the styling and effects with CSS. I use Flexbox for the layout and then add hover effects.
Enjoying this front end tutorial? Subscribe to stay up to date with my latest content: https://www.youtube.com/channel/UC_TjoSnaI3CTgIgmSn3rruA?sub_confirmation=1
Codepen: https://codepen.io/angeladelise/pen/Bajdvav
In this video I show you:
0:34 - Overview of Figma Design
1:21 - Guides of HTML Structure
2:36 - Starting HTML and CSS Code
3:05 - HTML Code
7:17 - CSS Code - Body & Card
8:52 - Card Banner Section
11:25 - Card Body Section
13:40 - Card Profile Section
16:47 - Card Wrapper Flex
17:53 - Card Hover Effect
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise
#completehtmlcss #designtocode #fullwebdesigntutorial