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

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.

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

Let's Connect

#completehtmlcss #designtocode #fullwebdesigntutorial

[geryardmon]

Watching a video does not make you a coder, nor watching a tutorial, as if you were listening to an audio book, will get you anywhere. What I love the most from @Angela Delise is her style, she gives from her heart, does not hide critical concepts, and guides you step by step with a clear voice explaining what is going on, and what to expect. This makes you understand how things work in css. A million thank you! (I know words are cheap, but I really do thank you for the pleasure you bring me every time. )

[narendrasudrik]

Excellent voice modulation! Crisp and logical flow!! Helped a lot to understand with ease. Thanks for all your efforts Angela.

[sammarie]

Thanks so much for this video, it helped me a lot! Like many other comments said you deserve way more views! Your videos are so awesome and I'm so glad I clicked on this video because it's well explained instead of someone just randomly typing or copying and pasting code! Thanks so much for your time in making this! Have a fantastic day! :)

[asce]

Hey @Angela Delise ! what if we were to add extra text in the card description of some cards? some will look bigger and the other will look smaller, how can we fix this for all the cards to stay the same size?

[nasimajosefi]

Best explanation, thank you :) please make more videos!

[MilanB]

Subscribed. I like your content, especially related to figma🤗 Do you consider creating more prototyping tutorials in figma?

[baso]

in this syntax transition:250ms all ease-in-out what is the use of the word all?

[LoveandKindness_Z]

Thanks for a very helpful tutorial, Angela. I have a question; if I want to make the tag stay at the bottom right of the div, what can I do? I see that the default once you set the position to be Absolute is the top left. So if I want it to be at the bottom right, is there a way to achieve that without adding the top bottom left right properties?

[nishantjadhav]

I also do frontend but today I got to learn how to do it systematically, beautiful tutorial

[drishtisaraf]

Do you know how to make chrome extension?

[justcurious]

Would it be possible to make a horizontal carousel of these cards using only html & css?

[christopherolsson]

Great video! Just one question. Is it possible to make the cards responsive to? Śo that they will get more narrow before they jump down ? That seems Hard to för with images?

[michaelwiginton]

Nice, I wish I could have seen this videos a few weeks ago. I was working on a similar item as your category tag and I spent way too much time getting it correct.

[cgianimationtv]

Please 🙏 code different types of blog layouts and article page design

[ricardosouza]

Can I use your code in my website? Its content free? Great Job.