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!
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!
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.
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.
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!
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!
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!
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.
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.
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)
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! ❤
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 🙏
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!
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.
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
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
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.
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! :)
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.
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!
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 !
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!
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.
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!
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.
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
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.
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
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. 🤓👍
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!
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 :)
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).
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!!
I love your video, I love your video edit, I love the entire thing, I hope you do more front end mentor challenges! You made it so easy! I have a question, say I'm building any project at all, can I start by adding these CSS reset from Josh??
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.
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!
Yeah! Please upload like these more projects videos.
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!
So glad that you enjoyed it 😊
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.
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.
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
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!
Glad that you enjoyed it!
Just love the way you cover things slowly and however 'obvious' it might seem to others, you just go over it so smoothly.
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!
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!
These frontendmentor guides are so helpful, please keep making them :)
Please do more Frontend Mentor challenges. Never seen someone teach the way you teach!
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.
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.
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)
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. 😂
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! ❤
you are definitely making things seem super easy and eloquent at the same time
I have already did this project but the way you completed this project is amazing ❤
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.
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 🙏
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!
Good insight into how the jobs are done. It would be great to have a series of these as they could get very technical.
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.
Thanks for including the steps to add source control and publishing! Easiest way to get a custom website live I've seen so far
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
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!
Please make this a series. It’s beyond helpful🧡🙏
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
1 Hour went by in a breeze. Thank you so much for this!
I just can't get enough of your CSS know-how Kevin 🙏 Love love love it
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.
Please make these frontendmentor challanges more, It really guides us a lot about how to approach the project. Great stuff !!!
nice trick with the grid gap 🤩I used margin-bottom on each element, but your trick is much cleaner
This was great. I would love to watch more of these. Thanks!
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! :)
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.
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!
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 !
Thanks a lot my friend! Thanks to you, I'm getting closer to my goals
I learn something(s) in every single one of your videos. tags!! Yes!
Your channel is the absolute best when it comes to web development!
Amazing presentation and explanation of concepts and the reasoning behind of certain technical decision. Thank you Kev.
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!
Thank you. Today I have learned something new about picture and source html elements.
Love this shorter duration and super informative walk through!
It was really helpful to see your workflow as a beginner. Please make more videos on frontend mentor newbie projects. Thanks!
That was a great tutorial and the netlify deployment taught me something too! Thanks Kevin!
Thanks Kevin, learnt so much from your video's. Would love if you did more of these 'follow-alongs' with projects, super helpful.
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.
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!
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.
Yea thanks a ton Kevin... I have completed this challenge already... Will surely learn something great from you...
There is lot of new stuff in single tutorial. Thanks a lot.
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
Ty so much for this! Please make this a regular serie on your channel :D
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.
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
What did you change? And what method?
You are way better than my teachers, I just learn a lot from you, Thank you so much!
OMG I didn't know there was an s tag! omg you never stop learning this stuff holyyyyy
The meaning of : perfection. Thanks. Mulțumesc.
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. 🤓👍
Great best-practices input! Thanks a bunch Kevin!
I was working on this this evening and I found your video haha, nice 😉
Please do more of these!
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!
Just finished this a minute ago, then I saw your video. I've learned a lot.
Once again thank you so much for your time and expertise
Thank you so much for this video!! Wish I had found this channel earlier!
Thanks for the video, learned a lot of useful things. You should do more of these Front-end Mentor challenges from time to time.
I went through the whole video, very well done...
Thanks for sharing, I learn a lot with your guides.
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
Awesome stuff! Really like that stuff u do... sometimes bit to fancy for an everyday use - but keep up the great work!
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 :)
YES this is exactly what I needed please make more
Very great video. I've learnt a bunch of things ! Thank you
thank you Kevin i have watched all the way to the end 😍
Thanks for making this video, it's great! 💪😎I hope you can do more frontend projects mentor please 🙏🙏🙏
Once again, thank you for your simple easy understanding courses. U rule
Very cool video, thanks for the great work!
You did it so easy, i've had multiple problems doing it haha
Thank you so much for this video. It's helped me a lot and I've learned so so so much
PLEASE DO MORE OF THESE!!!
please do more of these!
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).
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.
You are making me love css
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!!
Hey Kevin, Thank you for making me less ignorant (or maybe more intelligent ?! aha).
ALWAYS a great content, you're awesome !
Thank you. This one is really really good
I am enhancing my skills on Frontend Mentor doing challenges... 3 hours ago I downloaded some challenges and this one also to try.
Can you Please more project add your playlists. ❤❤❤❤
It’s really helpful. ❤
Thanks You.
Really enjoyed this one, Kevin! I need to use data-attributes more.
I'd love to see a "X number of ways to use data-attributes" video :)
Wanna see vanilla javaScript videos from you, please make some.❤
thank you so much for doing this
I love your video, I love your video edit, I love the entire thing, I hope you do more front end mentor challenges!
You made it so easy!
I have a question, say I'm building any project at all, can I start by adding these CSS reset from Josh??
thank you for the videos sir
I love videos like this.
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.
Great video. Thank you