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