Taking on a Frontend Mentor challenge | Responsive Product Preview Card Component

[@bryanFRDM]

If you could do more of these style videos that would be terrific! This give a great reference to how you approach a task in front of you and break it down while also briefly explaining each action that you're taking! I feel this has cleared a lot of things up while learning the ins and outs of CSS! Thanks!

[@asadullah517]

Yeah! Please upload like these more projects videos.

[@wynez1]

I did this challenge myself but I was not happy with my thought process and how I approached this challenge (it was totally a mess and not structured or organised at all) then I found your video! Not only you taught the basic steps of organising the HTML and CSS. You explained every single step how you approached this challenge! I'm so grateful to found this!

[@KevinPowell]

So glad that you enjoyed it 😊

[@Rubuz]

I did that challenge not so long ago. I consider myself a beginner in HTML and CSS and It's nice to see how it's done by someone who is a professional. You have shown and told me so many useful tips and tricks. Thank you so much.

[@lissalopes7717]

I've been studying HTML and CSS for a few months now and you're the best teacher I've had. This vídeo is simple, witg loads of why and how. It's truly amazing.

[@psychederik]

been banging my head on the wall over this exact project and little did i know, the goat himself has a video on it. poggers dude

[@SuperDarmino]

Just love the way you cover things slowly and however 'obvious' it might seem to others, you just go over it so smoothly.

[@mrsupertash]

I'm halfway through and can't believe what I'm seeing. What a quality education you're putting out here for free is unbelievable. How I wished educators like you were as easily available when I was first interested in programming as a teenager in the mid 90s. My life would have been so so different. Instead I got frustrated with big super-tedious programming books and gave up, only to come back 30 years later and starting all over again from square one. I can't tell you enough what your work means, how accessible you make a quality education. Thank you!

[@EmilYOo0]

I love the fact did you did nothing too fancy here but actually explained the importance of symantic html, 🖼picture element which is an amazing tag, working and organizing your project, naming conventions ect. Keep it up Kevin!

[@KevinPowell]

Glad that you enjoyed it!

[@zoflax]

These frontendmentor guides are so helpful, please keep making them :)

[@adeni4359]

Please do more Frontend Mentor challenges. Never seen someone teach the way you teach!

[@yawn8974]

This video was so helpful for me. I first completed the challenge on my own and then watched your video. I learned many valuable lessons. I appreciate you doing this challenge with a more simple mindset than I'm sure you're used to, because it makes it more approachable for novices like myself. Thanks again, Kevin!

[@RobMeijerUk]

Thank you so much for doing this! I completed this challenge a few months ago. It's great to be able to follow your decision making process, and see how it compares to mine.

[@anton9410]

you are definitely making things seem super easy and eloquent at the same time

[@JonTheJotter]

As someone who works for CHANEL and watching your videos to learn about web development for fun it’s so funny seeing these two topics together. 😂

[@joelwalkley3902]

You're live commentary is SOOO helpful! Thank you for talking out your process as you go especially your tooling (today I learned about the Emmet wrap)

[@jd-barman]

It would be really great if you can please continue making up more videos on this series. The little insights of every decision you are taking up to get to the solution is really very helpful. Thanks a lot! ❤

[@wasifalam545]

Please make these frontendmentor challanges more, It really guides us a lot about how to approach the project. Great stuff !!!

[@ayushkushwaha171]

Wow, this is the type of questions we get asked in the machine coding round of interviews. Your explanation did me a lot of help in preparing these.

[@michielderuyter8024]

I had no prior knowledge of Github nor Frontend Mentor, and for pushing my first excercise I was really struggling. So I wanted to thank you for including that in this video, I realized how easy it actually is.

[@arii4514]

Please make this a series. It’s beyond helpful🧡🙏

[@BunniesAI]

I just can't get enough of your CSS know-how Kevin 🙏 Love love love it

[@sgraham481]

Hey Kevin! Just wanted to THANK YOU for reiterating the header tag usage and reminding folks to not style on those semantic tags. We're actually going through years of legacy code right now dealing with this as a revamp for 508 compliance and some super funky things were done over the years. 🌮🌮🌮 Tacos for you!

[@AmaanDevelops]

Your channel is the absolute best when it comes to web development!

[@ElementoryMyDearWatson]

Thank you so much for this incredibly useful and informative tutorial, with special thanks for taking the time to go over the HTML mark up, which personally I continue to find more problematic and confusing than CSS. Most instructors tend to gloss over the HTML markup and go straight to 'the cool stuff' i.e. the CSS.

[@AamirKhan-nm4jt]

I have already did this project but the way you completed this project is amazing ❤

[@LearnMYOG]

Love this shorter duration and super informative walk through!

[@makingtheweb6620]

Good insight into how the jobs are done. It would be great to have a series of these as they could get very technical.

[@HardWera]

Kevin thank you very much for these types of videos, you've been programming for long time but still take the time to explain for beginners different concepts! Very appreciate it, bless you 🙏

[@Lordyung89]

My initial approach to this design was using bootstrap 5. But the more I used bootstrap, the more I was confused. I find it quite easy to find bootstrap components, add them, and manipulate them to fit my styles. The problems with bootstrap for me is that, it becomes very difficult for me to read and organize as I just see a huge div soup. With this initial approach, I was able to code around 60% of the project. I then started looking for solutions on the web to this project. I came across Kevin Powell's solution. I decided to code it along with him. I know this might not be the true way to go about the challenge, but I believe it was very necessary. It is true that there are still many things that I don't quite fully grasp, but his process got me thinking in a very professional and organized manner. I am very grateful for Kevin Powell's concise and informative teachings. I plan on recreating the card for some other concepts in order to hammer down the techniques that this project is responsible for. After all, learning the concepts requires being able to do it more than once for different scenarios. 1. how to properly organize my CSS 2. hidden property 3. how to name my CSS classes 4. how to deploy to github directly from VScode 5. how to deploy a live version directly to netlify from github

[@cerstar5725]

I had done this same challenge a couple of days before this video and I am happy to see the different paths that come with experience Thank you Kevin for this new way of doing it

[@Oluz1975]

Really loved the fact that you went into detail about uploading it to GitHub/Netlify, instead of just leaving on your drive somewhere... Thanks for the video.

[@HarmlessJan]

Thanks for including the steps to add source control and publishing! Easiest way to get a custom website live I've seen so far

[@alex-pattison]

This was great. I would love to watch more of these. Thanks!

[@jamesablanco]

Kevin, you are making me like CSS more I struggle with it as i'm learning it I just need to constantly practice, practice, practice. Thanks for all the work you do. Cheers.

[@poly_xp]

1 Hour went by in a breeze. Thank you so much for this!

[@meaartis]

Everytime I watch one of your videos I learn atleast one new thing! Espacially as a student of programming. Very enjoyable to learn new things!

[@alessandrj]

Que aula que você deu com esse vídeo, eu estava desistindo de Front-end, porque a dificuldade em organizar projetos complexos estava me deixando frustrada. Muito obrigada! :)

[@pythonicd1239]

Please do more of these!

[@Dipenparmar12]

There is lot of new stuff in single tutorial. Thanks a lot.

[@lulusaikou221]

Thank you Kevin! I watched this video two times and it's really helpful, expecially your coding steps! The resources link are also useful and I learned a lot! Thank you again and best wishes to you !

[@talkingnpc]

I wrote to myself many great tips from this video! I love this code along videos, mostly because of learning about the thinking process and work flow of others. Thanks a lot!

[@DevDissent]

I think the correct approach is to *let the content on the details area dictate the height of the product card* so it's more dynamic and you don't have to resort to eyeballing the max width. That should solve as well the consistent padding that we want between the flow items.

[@angelsv]

Amazing presentation and explanation of concepts and the reasoning behind of certain technical decision. Thank you Kev.

[@junsu-ho]

nice trick with the grid gap 🤩I used margin-bottom on each element, but your trick is much cleaner

[@brandonbh04]

That was a great tutorial and the netlify deployment taught me something too! Thanks Kevin!

[@jcstelt]

I used your video as a check of my own version of this project and I must say I made a lot of the same choices you did. I even used the same hsl values for the hover state of the button! Luckily there were also some differences I learned from concerning accessibility issues with the current and original price, and the srcset attribute (I went for a background img that changed on a media query but off course that’s not good for accessibility reasons) Keep it up, Kevin!

[@istanbul-pera2206]

Thanks a lot my friend! Thanks to you, I'm getting closer to my goals

[@gxgbuc1978]

The meaning of : perfection. Thanks. Mulțumesc.

[@Andy-fs4bb]

I learn something(s) in every single one of your videos. tags!! Yes!

[@anuragnepal331]

It was really helpful to see your workflow as a beginner. Please make more videos on frontend mentor newbie projects. Thanks!

[@aymanayman8209]

You are way better than my teachers, I just learn a lot from you, Thank you so much!

[@git-tauseef]

Yea thanks a ton Kevin... I have completed this challenge already... Will surely learn something great from you...

[@b0banum]

Thank you for saying out loud what I think. I also begin with the html for the desktop for the same reason. It often helps me decide if I use flex or grid (or block) for some elements.

[@sanfords]

Great best-practices input! Thanks a bunch Kevin!

[@CERO12345]

Fantastic video! I'm new to all this after submitting my finished project I made a new one along your video. It really helps seeing perspective, work flow and thought process of pro like yourself. Make more of them please it's extremely helpful!

[@LaElijah]

YES this is exactly what I needed please make more

[@pa7064]

it’s funny I was just started to work on this project last night and was stuck on the css part and man thank you so much you make css so easy to understand. Well tbh I’m just start to learn about front end development

[@br1580]

Thanks Kevin, learnt so much from your video's. Would love if you did more of these 'follow-alongs' with projects, super helpful.

[@Seros0000]

Ty so much for this! Please make this a regular serie on your channel :D

[@abdulhadisafi4250]

thank you Kevin i have watched all the way to the end 😍

[@this1s3mpire]

I just finished this project. My method was different, but as a beginner it was nice to see I got the logic! I did not use BEM nor data for icon, but I am happy that I had the same idea :) nice video, nice explanation, nice and clean code! keep up the good work Kevin

[@DevDissent]

What did you change? And what method?

[@justsaybobby]

OMG I didn't know there was an s tag! omg you never stop learning this stuff holyyyyy

[@start-media]

@Kevin Powell - the real Frontend Mentor! 👏

[@topanime7563]

Just finished this a minute ago, then I saw your video. I've learned a lot.

[@ricardohernandezmendez4207]

Thank you. Today I have learned something new about picture and source html elements.

[@hcmac100]

Once again thank you so much for your time and expertise

[@ismaelvarela9193]

I went through the whole video, very well done...

[@yickysan]

Hey Kevin I'm completely new to html and css and thanks to you I was able to challenge myself and build a website fto showcase a machine learning model.

[@nasrisami17]

Thanks for the video, learned a lot of useful things. You should do more of these Front-end Mentor challenges from time to time.

[@justinstewart3060]

Thanks for the video, I actually did this same challenge a couple months ago. Def nice to see how a professional codes it all out though. I learned a lot, might even redo the project again to incorporate some stuff. 🤓👍

[@DanieleManca1983]

I was working on this this evening and I found your video haha, nice 😉

[@getellied]

Awesome stuff! Made my own before watching the video, really interesting to see how some things I did weren't necessary, there are a lot of simplifications which can assist on code maintenance as well! Thanks for the video!

[@MateoEstudiante]

Thanks for sharing, I learn a lot with your guides.

[@pythonicd1239]

Thank you so much for this video!! Wish I had found this channel earlier!

[@stephenhammond1745]

I saw this challenge on the Frontend Mentor website and decided to give it a try. I'm a complete newbie trying to get out of tutorial-video hell and wanted to try coding something myself. I didn't download any of the files associated with this challenge; just looked at the image and tried to replicate it as close as possible. I haven't yet watched your video on this yet so I'm interested to see how you approached it and if I was on the right track. I know there are probably several ways to accomplish this. I also completed their 3-column preview page; the one about cars, using almost the same method (flex display) as I used for this but did a few thing differently (and hopefully, more efficiently).

[@Quiestre]

i literally started this 2 days ago. havent had the time to finish it but I guess I just watch your video haha, like a playthrough

[@TheMetalMag]

Once again, thank you for your simple easy understanding courses. U rule

[@ArtSledUA]

Very cool video, thanks for the great work!

[@WePiphany]

Never mind, figured it out - you are moving the default cursor postion between the div tags to the end and selecting at same time, then dragging end tag. (I think I often see you drag a closing tag, such as to a new line - how do you do that in VS Code? For example at 13:36, how are you getting the entire "" to be selected before dragging?) This is one of the things in Dreamweaver that I was still trying to replace in VS Code. Great video BTW!!

[@drive-lotus2094]

Awesome stuff! Really like that stuff u do... sometimes bit to fancy for an everyday use - but keep up the great work!

[@PawelGrzelak]

You are making me love css

[@valery3149]

Very great video. I've learnt a bunch of things ! Thank you

[@Luba_z_mesta]

PLEASE DO MORE OF THESE!!!

[@fedespot]

You did it so easy, i've had multiple problems doing it haha

[@MikaVarshanidze]

Dear Kevin, First of all, thank you for this video, I like the modern styling approach with all the accessibility features, also giving great explanations, learned a lot. As a beginner, it would be great if you had couple of same difficulty challenge solution videos to strengthen knowledge. For e.g. Frontend mentor "Results summary component" solution video would be great for beginners IMHO :)

[@underflowexception]

please do more of these!

[@thomas-gk9jp]

Hey Kevin, Thank you for making me less ignorant (or maybe more intelligent ?! aha). ALWAYS a great content, you're awesome !

[@nrdygrnma]

Awesome tutorial! I can't do more such tutorials from you :) I would prefer that you type in the code instead of pasting it, just like another commenter added. This way, I have time to think it through. Thanks for providing such great content and I am looking forward to more tutorials regarding CSS!

[@andreakarimecruz6851]

Thank you so much for this video. It's helped me a lot and I've learned so so so much

[@arigrafik]

Thanks for making this video, it's great! 💪😎I hope you can do more frontend projects mentor please 🙏🙏🙏

[@jimshtepa5423]

Thank you. This one is really really good

[@DeLaFaKoNaM]

I am enhancing my skills on Frontend Mentor doing challenges... 3 hours ago I downloaded some challenges and this one also to try.

[@lomasko1093]

thank you for the videos sir

[@senirudinil]

thank you so much kevin

[@salmanfarshisajib6512]

Wanna see vanilla javaScript videos from you, please make some.❤

[@olawumisegun5898]

Hi Mr Powell, I tried applying this same layout to a form and I realized that the place-content: center on the css body tag doesn't work well. What would you suggest?

[@DevDissent]

I ran into that issue trying this layout as well. I ended up using grid / place items center instead. When I tried place content center, I lose my padding top for some reason.

[@p20ph37]

I love videos like this.

[@BNakato]

Great video.. I would love to see a container query implementation for this. I tried it for learning purpose and it sorta works. Love your contents.

[@b0banum]

I tend to use h1 when the content is independent from the other elements. Like the reason you used an article. I ask myself if, in an other context, an h2 or h3 would still make sense. So yes I think an h1 is appropriate. My 2 cents.

[@alexanderkekule7054]

Kevin, why did you set the icon on a button using background-image property, and not the content property?