Responsive card UI with flexbox and hover effects | HTML/CSS

[@os.mi9648]

Ty for everything! Months ago I started an internship as a frontend developer. My skills were very weak, so I watched your live coding videos and practiced a lot with them. Now I can help my company in two scrum projects! Ty for this channel❤️❤️

[@TheCoderCoder]

That's amazing!!! Congratulations on your hard work paying off 🔥

[@yashkapoor2377]

These kind of developers and channels should be more famous and receive more support.Great job by the way.

[@TheCodingOdyssey]

I've got to say I really like your way of talking to the viewer. Very soothing ha ha. Makes them feel..don't worry I got you. We can do this :D

[@tyranitarxd2819]

finally a developer channel with actual content

[@ozzyfromspace]

And this is why you're one of my favorite KZbinrs 🏆💙☮️. Explaining your thought process is such an under-appreciated skill for an educator, and you do it so graciously 🎊.

[@adrienngaland]

Definetely a video about CSS grid will be awesome

[@TheCoderCoder]

Great to hear!! 😁

[@scionax]

@@TheCoderCoder CSS Grid ------------------request { dimension: covering-all-aspect; time-duration: lengthy-as-hell; request-intensity: please-please-please -with-love}

[@james-perkins]

Great video as always, still loving that introduction.

[@TheCoderCoder]

Haha thanks!! 😁

[@BryanJenks]

Video aesthetic on point, lofi in the background too, so good

[@TheCoderCoder]

Thanks Bryan! It's Streambeats by Harris Heller, really good and copyright-free 👍

[@BryanJenks]

@@TheCoderCoder i use stream beats for everything now!

[@bryanworkman3902]

What an amazingly high quality channel!!!! every video is so refined

[@poppnik]

Thank you for another upload! Your videos are always fun to watch!

[@JamesQQuick]

THIS IS AMAZING!!

[@TheCoderCoder]

Thanks James!

[@Shakeel714]

Thank you Coder Coder for sharing your knowledge. Your videos are very helpful. Indeed your channel deserve million+ subscribers.

[@lenasokol777]

Eventually I found a programming KZbinr who is a pleasure to listen to. I love the way you're teaching! PS love lofi in the background, that's just perfect. Waiting for more videos!! You're awesome! Best wishes

[@TheCoderCoder]

Thanks so much!! Glad you like the background lofi music :)

[@SalmanHersi]

Best webdev teacher out there

[@mind_of_a_darkhorse]

Excellent job as always and very well explained and easy to follow. I would love to see a video on a grid card! Keep up the good work! Your my favorite web dev.

[@TheCoderCoder]

Thanks so much! I'll be making a grid version of this next 😁

[@momakplayz7985]

YES PLEASE :D MAKE MORE VIDS AND DO A GRID ONE ALSO! I LOVE YOUR CONTENT WITH THE SOFT BG MUSIC AND YOU PROVIDING MORE INFORMATION THAN OTHER DEVELOPERS! I hope you reach 200k subscribers!

[@asa07x]

Thanks for this great video! Question: is there a downside to using pixels vs. a relative scale (em, rem, ch) in the flex-grow property? Will it lead to any undesirable consequences on different viewports, e.g., mobile vs. desktop? What is your approach and advice regarding units? Many thanks!!!

[@Phreshie91]

Yr baaaaacccckkk! 😭😭 and with exactly the video I needed! Self-taught plebs rejoice!🙌🏾🙌🏾 I think you and Kevin Powell should collab....I'd love to see two great teachers do some cool things together!

[@TheCoderCoder]

Haha thank you! And thanks for the suggestion, that's awesome 😁

[@johncerpa3782]

Great video, learned so many things. Thank you

[@nebiyuelias1]

Awesome video! Can you explain your reasoning for choosing the rem values? I mean how do you know what pixel it's going to be without setting the root font size?

[@TheCoderCoder]

the default root font size is 16px in the browser, so unless you manually change it you can assume that 16px = 1rem :)

[@wedhimd]

I like the way she explain what and why she doing while doing it, so you can go with knowledge not Holywoody films coding like the others.

[@SkyKosiner]

Glad to see you back

[@DailyDeveloperNews]

Very useful video! Good explanations. Ty for your work.

[@fonncatalina6464]

Thank you for your amazing video as always! I'm not familiar with gulp, can I just use live sass extension ?

[@TheCoderCoder]

Yes! You can just use the Live Sass extension for the scss files-- either works :)

[@d-landevjs]

Excelent tutorial! Thank you!

[@gobideveloper111]

great video, but wanted to know which theme you will used ?

[@TheCoderCoder]

It's a custom one-- I'll try to publish it on the marketplace soon!

[@gobideveloper111]

@@TheCoderCoder very excited about that theme I really loved it so much .

[@danilomereles6671]

Estoy tratando de entender el inglés viendo tus vídeos jsjsjss, son muy buenos 😔❤️👊 sigue así

[@godbless3337]

WD is hard, but I must keep my guard up

[@huseyinkara123]

Hi,is there any resource you know to reading code ? Is it good to learn web development?

[@daeramchung4876]

Does anyone know how I can align the snippets on the same line for all the cards despite the number of lines that the title takes up?

[@justcoding001]

i like everything about you u know stuff an your quality is on another level...

[@HN-if9qt]

Can you explain more in details what overflow: hidden does here? I’m confuse on why border radius didn’t show up when you add padding to cards and then showed up again once you add overflow: hidden. Thank you!

[@TheCoderCoder]

Setting overflow hidden to the card clips everything outside the rounded corners, so any child elements of the card parent, including the image will get clipped. Hope this helps explain better!

[@tommieb8623]

Your vids are awesome. I made a project with this card system as frontend and spring boot, mysql as backend.

[@danielahermosillo8991]

Your videos are amazing work. Thank you so much for your effort, your tutorials really help me for my projects!

[@abhishekmaurya8330]

Great one again !!

[@subrayag2099]

Mam I don't know why my mixins function is not working can you please help me out 🙏🙏

[@raphaelcardosos]

another great video as usual 😄👏🏻

[@Lucas-ve8bz]

when I use the property "flex: 0 0 150px;" the background-image doesn't show up, but when I use "height: 100vh;" instead, it works. why does that happens?

[@TheCoderCoder]

This is probably because the element doesn't have any content, so it will have zero height until the height is explicitly set. Hope this helps!

[@chrisdizzle313]

Awesome video! I could have used this earlier in the year with the "read more" link lol. Tried doing this EXACT thing and couldn't figure it out for the life of me.

[@TheCoderCoder]

Glad it could help!

[@ExpirationDay]

Following along with your easybank landing page tutorials! Your explanations are v easy to understand. Question though, what's the diff b/w watch sass VS extension && Gulp/BrowserSync?

[@TheCoderCoder]

They do the same thing, compile scss to css, but with Gulp you can do a lot more like process JavaScript files etc. Also the extension hasn't been updated in a long time so it may get out of date eventually

[@chn92694]

Yay new video! 🙌🙌

[@codingislife4818]

I Like your hardwork.thanku for the free help.

[@emilyhorn8952]

Thank you! You're really fun to watch and listen to, and this is going to help me style my capstone project. New Subscriber *

[@unchart_d]

Wow, your are back.

[@samiasama1032]

I love your videos. They are informative and useful.❤️❤️❤️

[@daengridwan8904]

What's a name theme you use in vscode?

[@jawad9757]

Very informative, thank you 👍

[@sakthivels5275]

I lub that old intro 🤧💔

[@sarjengengti4732]

When are you going to release your Responsive course?

[@TheCoderCoder]

Unfortunately probably not for quite a few months. My day job has been quite busy in the recent past, but I should have more time to work on the course now 🙂

[@Liftercode]

Is ok to do the following. . card { . card-title { } . card-desc { } }

[@dineshrout2527]

First comment..cause its a tradition on youtube.

[@karthikvijay]

this is really helpful mam

[@medinazina6537]

Your voice is amazing

[@bhatiashivam]

Why did you use '__' in naming the cards? A naming style rule?

[@steveox152]

Great video. One alternative would be that you could still use the tag inside the div you created. You can still add the src url in the markup and you can account for accessibility. You can use something like object-fit on the parent .card__image to make it more responsive like a background image, just set your dimensions on the parent and the image will scale. My rule of thumb over the years was that if the image could be considered content, use the image tag, if it is considered part of the design and not important to content then use the background image. Just a thought! Awesome video!

[@zstudio6127]

Love you jessica 🎉💙

[@manuelzevallos123]

what is your config of ur vscode theme? can you share it?

[@TheCoderCoder]

It's a custom theme, I'll try to post it soon!

[@raphaelcardosos]

just starting the video but omg what's the name of this theme? this is so golden 🤩

[@TheCoderCoder]

Thank you!! It's a custom theme, I'll try to put it on the VS Code marketplace soon!

[@FRONTRUS]

Very nice 👍

[@zahidkazi3559]

I hit the like turned to 1k, but really thanks for making the video 👏

[@RainOnline]

the female version of kevin powell, i love it!

[@msharyal-hazmi9716]

Thank you❤️

[@parth-darji]

Video after a long time😐 But nice video...

[@nadinecoelho3256]

I love your videos

[@breakers8514]

Very nice

[@Daddasoft]

thanks for sharing

[@charlz.]

Coder coder made me like Sass

[@raphaelcardosos]

same!

[@TheCoderCoder]

Awesome!! I like Sass a lot 😁

[@aussie14ap]

ok

[@samsaifi8338]

Plz make videos on html advance

[@tiaan_va]

Please define what "advanced" html is in your eyes? Because html is html, and html was never that advanced to begin with.

[@deepakvishwakarma2043]

How's your voice so clear ?

[@ridoatshauri6402]

Indonesia hadirr kak

[@kaimubro9548]

nice video

[@techlordgyan9961]

Nice

[@samsaifi8338]

I want to learn advance html but you don't have videos

[@MdFahim-gy8el]

Hi...

[@mallikarjunaraoarumalla3123]

Add subtitles please

[@gobideveloper111]

just type C in your keyboard

[@mallikarjunaraoarumalla3123]

@@gobideveloper111 thank you 🙏🏻

[@darioinversiones]

why did you put ::before and ::after wtf this tutorial need more explanations