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