CSS Responsive Card & Hover Effects with Flexbox | HTML CSS3 Tutorials 2021

In this video, you're going to learn how to make Responsive Cards with CSS Flexbox and we'll also add a nice transition for improving the hovering effects.
Link for my other CSS Flexbox Tutorials: • CSS Flexbox Tutorials ...
(Free Images) Credit: unsplash.com/
#CSS #flexbox #webdevelopment #responsivedesign #frontend #frontenddev

[@sivas4061]

Man, you're the lifesaver... Been checking tons of tutorials but never found anything like this.. explained precisely from top to bottom .. Keep it up man. Subscribed 👍💪

[@kartikahirrao6684]

Watched so many videos and tried this with so many pre-existing codes but kept facing problems just for you to teach me this from scratch in just 9 minutes! You sir deserve a subscribe!

[@oscarborge2543]

Just what I was looking for. Crisp explanation, with very simple steps, very easy to follow. Keep creating great content!

[@RouteDeTours]

Outstanding tutorial. I wholeheartedly agree with the others on here who agree that it is far better than the vast majority of other attempts. Thankyou!

[@freetoothpicks]

gold! everything done by using very easy ways and every single part is crystal clear.

[@WilsonJoseph-xp5sr]

I'm watching this video and it seems like I'm in another world with your explanation, man you're a genius, that makes sense you were born to teach, you're one of the best who teaches on TH-cam, congratulations, even the deaf can understand what you're transmitting, you gain another subscriber to your channel. I seem to be inside a class.

[@SchwarzerFalke]

Üstad adamsın adam. 6-7 aydır kod öğrenmeyi bırakmıştım. Tek videoda bir çok bilgi hatırladım. Eline sağlık.

[@shashankkhandelwal4559]

I must say- the tutorial is very awesome. You explained everything in a perfect way to make it understand. Thanks a lot for such beautiful video..

[@11i22hope33this]

Awesome tutorial! Clear and easy-to-follow explanations!

[@thenatricvibe3661]

This tutorial is amazing!! taught me a few new tricks I didn't know!

[@lollilolli4582]

It's a big favor for me ! I liked how you also explain the steps .Thank you :)

[@Cobey_yt]

Man, you actually saved my Life with this video. Thanks a lot

[@MeezanTheFairBloke]

Very clear and precise. Keep teaching man!

[@diegocenicerosdominguez7309]

You are excellent at explaining the process, subscribed!

[@gotdamngoblin2266]

This is a great tutorial. Will be using this method on my next project. Thank you!! 🙌

[@jatinvikram5333]

Thank you, I had lots of fun adding this in my website.

[@felixhabarugira7680]

This guy just saved my life 🤯👊🏾

[@ritikastudies]

omg this made everything so much easier,thanks a ton!

[@aaronl8443]

It could be one of the best CSS videos, for sure!

[@uodige1]

awesome tutorial, clean and easy follow thru. thank you!

[@UnjustCrow]

Exactly what I was after! Thanks so much!

[@edmat6710]

Indeed, very well explained! 👏👏👏

[@rayc9426]

Thank you so much! I like the way you explain that is very clear.

[@rodsaunders149]

Excellent tutorial: clear and calm. Thanks very much.

[@dineshkumar-sn5me]

Keep it up Cem. Appreciate it👍

[@Harmon_me]

This was so helpful!! Thank you

[@TrinaGish]

Excellent explanation and instructions!

[@Real_Burundian]

like the Way you make it simple👏🏼

[@dreerable]

Brillant, helped with with my bootcamp

[@youtischia]

This is a very nice walk thru of how to create cards. Thanks.

[@cemeygimedia]

Glad you liked it, thank you! :)

[@levankutaladze2347]

Perfect video ! Thank you

[@maremeaxi3344]

please more about flexbox !! You are the best !!!

[@jokubas6180]

For me, HTML cards was a bit of a problem, but with your explanation you helped me a lot!

[@ermasalvador1196]

Thank you so much! I've learned a lot and applied it to my webpage assignment. #Newbie here!

[@lucaslorenzi6247]

thanks man, u are the best! S2

[@shemosus]

straight forward , thank you sir.

[@amalianascimento8547]

Thanks for this content, it helped me a lot

[@realredraud]

Oh my god it really helps. thank u!

[@diamoua8572]

Thank you so much man!!

[@EntertainmentInfo123]

Thanks friend for amazing tutorial

[@markanthonybasmayor8377]

THANK YOU SO MUCH!

[@isamaug]

Thank you so much I enjoyed your explanation.

[@rizkygabriel7587]

Thanks for the tutorial.

[@andybrandonbernalpacheco3944]

You are a hero, thank u

[@FitnessTipsOnly0]

Very informative!!! And one doubt bro. If i create 10 cards in which there will be 5 in 1 row, if i give wrap property, will they collide each other when i decrease the screen size?

[@alanrobbo6980]

Thank you, very Helpful.

[@jerarldlorica1151]

Finally I found one thank you

[@juhairfahmid3431]

that was very helpful😊. thank you

[@heykunaal]

Thank you brother!!

[@stanleymaina8480]

A great tutorial ,i do like your explanation

[@eyob2020]

Thank you I like how you explain things

[@rhymekidstv]

Thank you for this tutorial

[@puneethroy8785]

Really helpful , good content for students. By the way the display : flex is not working for me , what could be the reason ?

[@irniscibra5898]

just fantastic 🙃🙃

[@DiegoGarcia-cl8qh]

me salvastes amigo y eso que pude entenderlo bien sin saber casi nada de ingles te agradezco mucho

[@kirzaa1830]

You're god.
Thanks

[@unigamerderp7430]

Thanks dude! This is really helpful

[@cemeygimedia]

Thank you man good luck!

[@ayushpal7504]

That's very helpful video for me

[@tamilsoldiertechnical8853]

Its a very nice video for a beginner

[@Mycreatop]

Thanks man ❤️

[@reignsvicky]

Your video helped me👍

[@aer0449]

Brother thank you so much

[@ijaidamarkus8425]

Superp tutorial, thank you sir

[@Ian-bb7vv]

thank you for the video.

[@PRODMOUS]

Subbed thankyou !

[@to_al1mov]

Bro Thank you so much im so happy

[@LeonardoSantos-jk1tp]

excellent explanation thanks

[@alexmercatto]

Excellent

[@davidross1332]

how can we move the button to the bottom of the card, no matter how long the card description is? If the description is shorter than in the video, the button moves up.

[@ismailzaidi7967]

thanks that helped me a lot (y)

[@mayura642]

Very nice and easy explanatiom

[@nadeeradulan9231]

Smart Tutorial

[@verawat]

Good job sir.

[@monikadesai8251]

Helpful... Thank u

[@kidsconner]

the best

[@_talhaijaz]

This is very helpful tutorial but you missed one thing which is that if the content of each card is different in terms of number of lines then how to set the alignment of cards so that each section of the card would be start from same point.

[@samanehsoltani5204]

thanks, very good

[@deamore1106]

thx so much 😊

[@alentragesitwicaksono8405]

Thank you so much

[@musicforyou4444]

Why the h2 and p tags cannot load when I set the background color, I don't what to do. Could you help me?

[@jonas8083branding]

good tutorial! How can i change that items in the next row will start on the left side instead of the middle? thanks!

[@DrGoldenFlap]

justify-content: space-between;

[@garylee450]

thank you so much!

[@cemeygimedia]

you're welcome :)

[@ALKASHIF-]

nice

[@alfredonovela8032]

Best Video

[@bacltdbacltd7310]

good explanation

[@zacharysnyder5068]

Does anyone know how to make a full box under the cards?

[@user-pe2rs8wu1d]

How do i add a heading tag on top?
Like i want to add something or words on top like Welcome or something about my things like CARDS FOR YOU!
But it keeps going down?

[@LeonardoSantos-jk1tp]

Could you put the images in the html? or wrong series?

[@syedyaseen5033]

🧡

[@sudharshanm.p2599]

❤❤

[@xviewmytubex]

What's the difference between this and just using flex values? Thanks! =)

[@jitendrajaintwal6503]

Thank you sir

[@user-di3vn4gs4k]

😍

[@mathematicalgeek8657]

This was an awesome tutorial. It helped me with a project. Please could you like link the place where you got those car images.

[@cemeygimedia]

Thank you, you can find these free images on unsplash.com/

[@start4285]

very good

[@debrad.castleberry2457]

Simple And easy

[@Bruce_Wayne1720]

thanks

[@b7x21]

How can I make them horizontal also how to make them 4x4

[@arsarip786]

Hello, how to add this in google site?

[@-yuvan2017]

Its really very helpful but a small doubt when we decrease size it will display 3 cards but I want that 3rd card be placed to left instead of middle for this what can be done sir could you please help me to sort it out

[@cemeygimedia]

you can try "order" property with media queries.