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

Today, I'm taking on a popular Frontend Mentor challenge. We'll look at doing everything from downloading the files to putting the challenge together with HTML & CSS, and finally putting it on GitHub and getting it online using Netlify.
🔗 Links
✅ The project I’m working on: www.frontendmentor.io/challen...
✅ My finished code: github.com/kevin-powell/produ...
✅ Live server extension: marketplace.visualstudio.com/...
✅ How to use heading levels (h1 - h6): • The most common HTML m...
✅ Josh Comeau’s CSS reset: www.joshwcomeau.com/css/custo...
✅ Custom Properties in-depth playlist: • CSS Variables - An int...
✅ More on visually-hidden: www.scottohara.me/blog/2017/0...
✅ More on :is(): • How you can simplify y...
✅ More on the picture element: • The HTML picture eleme...
⌚ Timestamps
00:00 - Introduction
00:34 - What we’re starting with
02:18 - Setting things up
05:34 - Writing the HTML
16:30 - Responsive Mode
17:30 - CSS Reset
20:00 - Setting up the custom properties
23:33 - Getting the fonts
25:33 - General styling
28:54 - Styling the flex-group class
30:07 - Styling the product content
39:58 - The prices
44:56 - The button
50:28 - The button icon
54:50 - The desktop version
56:45 - Changes images with the picture element
59:15 - Fixing the layout at large sizes
1:01:52 - Putting our project online with GitHub and Netlify
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

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

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

[@zoflax]

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

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

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

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

[@SuperDarmino]

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

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

[@anton9410]

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

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

[@adeni4359]

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

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

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

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

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

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

[@angelsv]

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

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

[@alex-pattison]

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

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

[@BunniesAI]

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

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

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

[@wasifalam545]

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

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

[@istanbul-pera2206]

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

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

[@arii4514]

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

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

[@sanfords]

Great best-practices input! Thanks a bunch Kevin!

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

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

[@br1580]

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

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

[@brandoncbh]

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

[@LearnMYOG]

Love this shorter duration and super informative walk through!

[@git-tauseef]

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

[@anuragnepal331]

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

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

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

[@hcmac100]

Once again thank you so much for your time and expertise

[@ricardohernandezmendez4207]

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

[@MateoEstudiante]

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

[@aymanayman8209]

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

[@AmaanDevelops]

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

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

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

[@valery3149]

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

[@Dipenparmar12]

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

[@poly_xp]

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

[@ArtSledUA]

Very cool video, thanks for the great work!

[@LaElijah]

YES this is exactly what I needed please make more

[@TheMetalMag]

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

[@abdulhadisafi4250]

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

[@Seros0000]

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

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

[@andreakarimecruz6851]

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

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

[@drive-lotus2094]

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

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

[@DanieleManca1983]

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

[@ismaelvarela9193]

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

[@topanime7563]

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

[@jimshtepa5423]

Thank you. This one is really really good

[@junsu-ho]

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

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

[@pythonicd1239]

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

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

[@abomayeeniatorudabo8203]

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.

[@pythonicd1239]

Please do more of these!

[@keeplearning5647]

thank you so much for doing this

[@Andy-fs4bb]

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

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

[@justsaybobby]

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

[@arigrafik]

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

[@PawelGrzelak]

You are making me love css

[@boris7258]

Love it!

[@p20ph37]

I love videos like this.

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

[@underflowexception]

please do more of these!

[@gxgbuc1978]

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

[@Luba_z_mesta]

PLEASE DO MORE OF THESE!!!

[@pauljohn3898]

Well done!

[@digrinha5350]

Great video. Thank you

[@lomasko1093]

thank you for the videos sir

[@fedespot]

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

[@ernesto7952]

thank you teacher!

[@tibrasilbr]

Awesome!!!!

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

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

[@kylevandeusen]

Really enjoyed this one, Kevin! I need to use data-attributes more.

[@kylevandeusen]

I'd love to see a "X number of ways to use data-attributes" video :)

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

[@DeineWebschmiede]

the master is back. :D

[@thomas-gk9jp]

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

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

[@DeLaFaKoNaM]

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

[@JaGaNezhil]

Superior ❤

[@habiblimon9828]

Can you Please more project add your playlists. ❤❤❤❤ It’s really helpful. ❤ Thanks You.

[@starjuda363]

thanks to king of css