Build a responsive card - HTML and CSS tutorial

For some reason flex-direction: row; did not work for my card

Hi css Guro ,
After watching your recent videos I think button instead of a tag would be more accessibility. Am I right?

Thank you! Awesome!

where can we find the codes?

Trying to build my portfolio website for the first time and this is exactly the kind of thing I'm after for my landing page. Thanks man, you're a lifesaver!

this video was so helpful man! watched it twice ! haha thanks !!

this guy is awesome!

Hello Kevin,
I want first to thank you for your amazing videos!
I am working on a business card right now, and I have a question about semantics. Do you think that Microformats (h-card) is appropriate to use for this kind of information?
In addition to your business card, I have a phone number and email.
Thank you in advance for your response!

This video had so many crucial topics in CSS in such a short video. You are the CSS guru Kevin!

Thanks for the video, very cool.

lovely coding format Kevin, You have opened my mind. Thanks

Hello Kevin, thank you for all videos youre making! Your course on scrimba is amazing too, so much information. If i can recommend one thing for everyone who is starting this bootcamp, take breaks regularly, exactly like Kevin says after each module. Try to digest all of the information and content and most important tip, try to rebuild everything yourself after every project! It helped me a ton! Thank you so much.

I am thinking to use this kind of card as comments of my work and I will use it in my portfolio site. How can I do that? Any suggestion Sir?

Outstanding tutorial and love the energy too.

Awesome styling❤️

where can we use cards ? like for what ?
thank you.

thank you so much

Brilliant - love watching you work. Cards always give me heartburn and its so cool to see how easy you make it. Keep up the great work!

"Pravatar" thank you for this information

how can you make 2 or 3 cards in one row since the item is in the middle ?

there is one class missing, "position slidebar"

thank kevin wow....you are meticulous and i am learning so much

Please make a video about when to use em or rem.

Definitively learned something again as in all your super useful and energetic videos. Thank you!
Just one thing I can't get in my head. Today displays vary from around 250 ppi to up to 550 ppi (I actually had to look that up). That means displays of various (only) smartphones in (only) portrait mode range between 4,99 cm (1,96 in) and 7,34 cm (2,89 in) while being between 540 px and 1440 px wide. One third wider but triple the pixels.
As pixels don't represent the size of the screen, how do you represent that properly in media queries? Is "min-width" enough?
Thanks and regards

Where's the code my man? Is it on codepen or github?

Great work. I've learned a lot from you!

how do you write multiple elements at at same time?

I bought the course and it really rocks! When I see this video I can almost read ahead of what you are going to do. So much learned the past week! The course is great!

Great video! thanks million for your work Kevin. I haven't lernt anything new, but it's a really nice reminder that I'm doing things right. Nice card. By the way, Now I'm using pseudo elements much more than before. They are now something common in my develops. Thanks again ;) Have a good one!

ugh, I was going to buy the course with the introductory discount but got caught up in all my back to school stuff and now its full price. I am sad.

Even more than code specifics, I learn from your thinking process. Extremely helpful.

I missed the sales of your new course. Will you have it on sales in near future? Thanks!

i want to make new image Carousel like e-commerce site. on net same type of Carousel . do you make new type of Carousel.

Never heard of the "letter-spacing" property. Learned something new today. 💪🏼


Thank you Kevin! :)

Responsive course i offer19,95 € (poor man)

Dude can you please reduce the price of the course? I'm from India and the price is like half my salary for a month.

amazing extra pure css!!!!!!!!!!!!!!

Excellent video as usual! Thanks Kevin, have a great weekend :)

Sorry, but that just looks ugly.

Great Stuff Kevin, thanks a lot.

anyway to handle this without using media queries..

Apart from this amazing tutorial, I learned another way of vertically-centering a div in CSS.
height: // Give a height;
display: grid;
place-items: center;


Correct me if I'm wrong! Thank you, Kevin.

Amazing. I am new in designing
and this is really inspiring
Thanks Kevin😀

if u have any design course on UDEMY please inform me

Would you say that you're using BEM here Kevin although it's not 100% strict

Love all your videos 👍🏻 even though I am not a developer. Question: can you talk about font sizes? How to pick the right sizes and when to use px, rem, vw... I always struggle with that. Is it part of your course? Purchased it, but did not have time to look into it in detail.

i am mostly a backend developer, CSS kinda scares me, but the way you explain, it really breaks down the somewhat weird concepts of CSS nice and neat.