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!

[@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 KZbin, congratulations, even the deaf can understand what you're transmitting, you gain another subscriber to your channel. I seem to be inside a class.

[@oscarborge2543]

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

[@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.

[@Cobey_yt]

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

[@freetoothpicks]

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

[@thenatricvibe3661]

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

[@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!

[@aaronl8443]

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

[@_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.

[@gotdamngoblin2266]

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

[@rodsaunders149]

Excellent tutorial: clear and calm. Thanks very much.

[@jokubas6180]

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

[@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..

[@diegocenicerosdominguez7309]

You are excellent at explaining the process, subscribed!

[@ermasalvador1196]

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

[@lollilolli4582]

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

[@ritikastudies]

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

[@jatinvikram5333]

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

[@felixhabarugira7680]

This guy just saved my life 🤯👊🏾

[@11i22hope33this]

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

[@rayc9426]

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

[@MeezanTheFairBloke]

Very clear and precise. Keep teaching man!

[@MalaravanM]

So, this is how you explain the hardest one to simplest way?

[@uodige1]

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

[@Harmon_me]

This was so helpful!! Thank you

[@Real_Burundian]

like the Way you make it simple👏🏼

[@EntertainmentInfo123]

Thanks friend for amazing tutorial

[@kiemtienonl11]

So informative, thanks a lot!

[@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! :)

[@UnjustCrow]

Exactly what I was after! Thanks so much!

[@maremeaxi3344]

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

[@amalianascimento8547]

Thanks for this content, it helped me a lot

[@TrinaGish]

Excellent explanation and instructions!

[@levankutaladze2347]

Perfect video ! Thank you

[@edmat6710]

Indeed, very well explained! 👏👏👏

[@style11780]

Oh my god it really helps. thank u!

[@shemosus]

straight forward , thank you sir.

[@unigamerderp7430]

Thanks dude! This is really helpful

[@cemeygimedia]

Thank you man good luck!

[@isamaug]

Thank you so much I enjoyed your explanation.

[@eyob2020]

Thank you I like how you explain things

[@bishwadas]

Thank you..... Thank thank....... Thank you so much brother. I was looking for this thing for a long time but there is no one who says properly. Once again thank you so much. 🥰❤️❤️❤️👍

[@cemeygimedia]

Glad it was helpful, you're welcome! 👍

[@ayushpal7504]

That's very helpful video for me

[@DiegoGarcia-cl8qh]

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

[@lucaslorenzi6247]

thanks man, u are the best! S2

[@andybrandonbernalpacheco3944]

You are a hero, thank u

[@dineshkumar-sn5me]

Keep it up Cem. Appreciate it👍

[@rizkygabriel7587]

Thanks for the tutorial.

[@Vikas-x4c]

Thank you so much sir 😢

[@puneethroy8785]

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

[@jerarldlorica1151]

Finally I found one thank you

[@diamoua8572]

Thank you so much man!!

[@markanthonybasmayor8377]

THANK YOU SO MUCH!

[@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/

[@heykunaal]

Thank you brother!!

[@alanrobbo6980]

Thank you, very Helpful.

[@stanleymaina8480]

A great tutorial ,i do like your explanation

[@tamilsoldiertechnical8853]

Its a very nice video for a beginner

[@kirzaa1830]

You're god. Thanks

[@to_al1mov]

Bro Thank you so much im so happy

[@Mycreatop]

Thanks man ❤️

[@juhairfahmid3431]

that was very helpful😊. thank you

[@aer0449]

Brother thank you so much

[@rhymekidstv]

Thank you for this tutorial

[@ijaidamarkus8425]

Superp tutorial, thank you sir

[@reignsvicky]

Your video helped me👍

[@alentragesitwicaksono8405]

Thank you so much

[@LeonardoSantos-jk1tp]

excellent explanation thanks

[@solvian9284]

Sadly the Readmore part it didnt show on my end its just a black block but its good content

[@Ian-bb7vv]

thank you for the video.

[@irniscibra5898]

just fantastic 🙃🙃

[@monikadesai8251]

Helpful... Thank u

[@deamore1106]

thx so much 😊

[@ismailzaidi7967]

thanks that helped me a lot (y)

[@jitendrajaintwal6503]

Thank you sir

[@mayura642]

Very nice and easy explanatiom

[@xviewmytubex]

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

[@garylee450]

thank you so much!

[@cemeygimedia]

you're welcome :)

[@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?

[@samanehsoltani5204]

thanks, very good

[@PRODMOUS]

Subbed thankyou !

[@bacltdbacltd7310]

good explanation

[@codecret1]

But why did you give cards fixed size in px instead of 33%

[@offtrash5279]

the flex dosent work for me

[@alexmercatto]

Excellent

[@nadeeradulan9231]

Smart Tutorial

[@kidsconner]

the best

[@armaankhokhar512]

if we click on Read More btn then no any command show, what we do please help me😢

[@HeneralAntonioLuna-s1d]

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?

[@ALKASHIF-]

nice

[@emreuras2168]

Hey Cem Front and Wep development hocam senin linkini atmıs tutorial olarak başarılar ^^

[@alfredonovela8032]

Best Video

[@laurendonehue4703]

Love this, but my images refuse to go on :( It doesn't like applying a background image to car-1, etc, but that same background-image will work for .card-image (but I obviously don't want the same image on every card. I've been hitting walls like this all the time, what should work doesn't work.

[@abahiduh3246]

the problem could be that u have to create a class selector with a background url to add the images to the properties the go back to the html and add the selector to an existing class

[@ogbuoaloysius7656]

i tried this and still the image is not displaying on my .car-1@@abahiduh3246

[@LeonardoSantos-jk1tp]

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

[@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.

[@verawat]

Good job sir.

[@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;

[@wademorris1276]

Card-1 won't pull image in css