Web design

Build Blog Article Cards from Scratch | Complete Figma to HTML CSS Tutorial



New to CSS Grid? Watch the full Crash Course here:

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:

Codepen:

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:

Let’s Connect
Dribbble:
Blog:

#completehtmlcss #designtocode #fullwebdesigntutorial

What's your reaction?

Excited
0
Happy
0
In Love
0
Not Sure
0
Silly
0

You may also like

Leave a reply

More in:Web design