Learn CSS basics by Building a card component in 19 minutes | CSS tutorial 2021

If you want to make your website look attractive, you need to know CSS.

In this tutorial, we are going to learn CSS basics by building a card component.

There are 2 main parts: building the component and key takeaways.

If you want to follow along, be sure to get the design:

__________ 🔖 Tutorial Structure __________

- INTRODUCTION --
[00:00] - Introduction

-- Building Card component --
[00:42] - Working with HTML
[02:49] - Working with CSS

-- Key takeaways --
[16:15] - Apply CSS to HTML
[17:00] - CSS ruleset
[18:16] - Box model
[18:32] - Margin
[18:58] - Border
[19:22] - Padding

-- Happy coding --
[19:39] - Happy Coding

__________ 🐣 About me __________

[studentveneti]

Excellent content! I'm looking forward to the next video.

[commess]

my highschool teacher gave my class to see this video as a homework. i liked it 👍👍

[mehdizaiem]

Excellent. Now it seems so easy an clear !

[colorwrld]

I love it when coders do a tutorial and never leave the source code...its so amazing...

[paddymcglone]

Fantastic short video - looking forward to the next one :-)

[gonzalogauna]

good video, I don't speak English much but I understood you very well. Thanks for the content :)

[trine]

Tks A nhiều ... Mong A ra nhiều video thêm :D

[erwinjohnjerusalem]

please continue making tutorials Im learning too much from your tutorials

[jocelinkolar]

Great video! You should someday explain in which case use 'vh' instead of %

[muhammadsaad]

You should have javascript tutorials series, you are amazing

[Fatima-iekj]

as always awesome content & easy to understand btw kindly can u make a simple project using just typescript & react thanks

[cyber_steve]

When you make multiple cards, how do you make them arrange horizontally?

[shubhamsagar]

hello I am loving your videos helping me a lot but i have one question, when centering the button instead of setting its display block to i tried setting it to display : inline-block but it didnot work ..why

[Murphy_]

the link you have mentioned is not working kindly provide the new one

[studentveneti]

What is the name of program at 0:45 please?

[abdihakimguliye]

Why are you using line-height:150% Can you just set it to 1.5