From Design to Code // HTML & CSS from scratch // Frontend Mentor
HTML-код
- Опубликовано: 13 июн 2024
- Taking on a Frontend Mentor challenge to explore how I go from design to code, including breaking down some of my thought processes along the way. This project is a fun exploration of flexbox, grid, custom properties, and variable fonts, to name a few things.
🔗 Links
✅ The project: www.frontendmentor.io/challen...
✅ My finished code: github.com/kevin-powell/resul...
✅ More on variable fonts: • Getting started with V...
✅ More on custom properties: • CSS Custom Properties
✅ Playlist of Frontend Mentor projects: • Frontend Mentor projects
⌚ Timestamps
00:00 - Introduction
00:56 - Analysing the design and writing the HTML
11:20 - CSS - setting up the font-face declaration
12:11 - The custom properties
14:33 - A simple reset
15:22 - The base styles
17:17 - The result-summary layout
18:54 - The result section
26:40 - The relationship between the two columns
27:44 - The summary section
33:10 - Fixing the padding
#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 RUclips 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!
I prefer you typing the code out and explaining. It's gives me time to wrap my head around what the properties are doing. and it's also better in the way that it feels like i'm part of the processes seeing the code develop rather than seeing the static prewriten code.
Hey I just posted a tutorial on this yesterday :)
ruclips.net/video/F0GJeq0zoZY/видео.html
true, appearing code out of nowhere gives a harder cognitive time
Partial Agreement. It does take time to comprehend, but parts that are a bit confusing I can always just hit the pause. If it's not confusing, just let it play which speeds up the video.
I prefer that to 😢
Nah. I think it’s better when he points and explains instead of getting bogged up with typos, backspacing, and general errors. Point and explain.
Dont ever stop Kevin. Your content and style played a huuuuge part in getting me out of a rot and finally knuckled down to pick up frontend development work again after so many years. Honestly I cant thank you enough for the work you're doing. When I get back on the circuit I'm buying you a beer, or a coffee
this was fun! I might be alone here but despite actually being a professional dev I actually always really appreciate seeing people's setup process, maybe it's just adhd but I find starting projects to be one of the hardest things, so seeing your process of thinking through it and getting it laid out is really insightful!
I think the pace was pretty good, it's tough cause I know pacing is basically where the compromise has to happen on youtube, since *the algorithm* so clearly prefers the shortest possible videos, but topics like these aren't terribly compressible, I'd say this was a good compromise.
The algorithm likes videos that people watch a lot of, since it tracks video retention, so that tends to favor faster pace. (lot of other things to, but that's one of the factors). It also likes videos with higher click through rates, and I think that when a video is
Love this style with the code blocks just coming in and then talking through them. It keeps the video smoother in my opinion without the "down time" of actually typing everything out.
Despite doing it all week at work I look forward to your videos. So long or short versions I don't mind, it's fascinating seeing how others work and still learning new things after 20 years!
I love the format. 0-100% videos are always great to understand the whole thought process that's flowing into realizing something. Would love to see more of it.
Hi Kevin, I decided to start learning web development this year and, so far, I've learned a ton from your videos. I also started doing Frontend Mentor challenges and it's awesome watching how you approach them and comparing what I did to what you did.
As for the format, I personally prefer the longer style where you don't skip a lot, but it doesn't make that much of a difference to me.
Thank you so much for your excellent content!
I really like this style. It lets you focus on the why and how of what you're doing more than just watching you type. It's still slow enough that I can read the CSS and track whats happening without having to pause. If I needed to swipe code, I would have to pause the video anyway, so it's not taking anything away other that you sounding out words.
Also, that SVG & custom property trick is great!
I really appreciate videos like these. I find a huge barrier for me is understanding the thought process and being able to see how to break things down into smaller chunks. Would definitely appreciate more videos like these.
Your teaching style is perfect. Not too fast and not too slow. If I miss anything, I can just go back or pause. Love your tuts, and I have learned so much from you. Thanks and greetings from Norway :)
This one was actually quite fun. I thought I could speed run it and do it in 30 min, but alas, it took me one hour. It's still an improvement bc these types of projects takes me an entire day.
It takes weeks for me
same bro
Love the video style. As a beginner, this is a great blend of stuff I can consume vs stuff I need to go back and understand. Perfect
I love when you do these FrontEnd Mentor challenges. Keep them coming!
I like this speedy format. It's only because of your excellent way of explaining things! Thanks!
As a beginner who wants to learn more CSS i like that format with your detailed explanation its good / practical/straight to the point and understandable thank you for making these videous
I like this format a lot--going quickly over simple concepts and spending more time on the interesting parts feels like a good balance to me.
Kevin, it's so cool to watch and code along with you like this, thank you!
I’m a fan of these long form “this is my process” videos. And I also prefer the pasting in of your already written code.
Been watching your videos for a couple of years now. First time commenting. Thanks for all the help, Kevin. DFTBA!
For me, I thought the video format was great. I particularly appreciate the description of the custom properties. Thanks for that additional help.
Kevin you're the GOAT! You're the main reason websites today are usable and not that janky :) So many "homemade web developers" would create horrible messes of web services that we would use daily if it were not for you
This kind of short format is awesome.
New format better. Less time wasted writing coding, more time making explaination. I like that
I prefer both of the formats but this, showing how you think when you see a layout, It's amazing!!!!
I was having trouble getting the project to work and watching the video help me realize the things I need to learn to up my html css work flow. Thanks
Crazy thing is I just did this project this morning 😂😂
It is really interesting to see someone else's thought process on something similar.
Took me about 2hrs to finish and I can say I'm proud of myself considering I'm still learning.
Great video 💯🔥
i like this approach more than the old , and love to see more templates from frontend mento6
I love these kind of videos! Great opportunity for us all to learn more deeply by going along with you. Please keep doing these!
I just absolutely love these types of videos, please upload more of these please
Love your content btw.
Really like this faster pace!
Great step by step video and it is very easy to learn whilst coding it. Makes it easier actually to kind of see what can come next as you code.
I've been struggling to do this problem on FEM for 3 days, your video just happened to pop up which was perfect timing but I liked the pace of the video. For an absolute beginner like myself I like the discussions about what styles are doing what exactly as well as why you're choosing to use what you're using. This does help beginners like myself to better understand your process. You make it look very easy! Thank you
Your thought process is phenomenal, you make css look so easy
I haven’t seen any of your older videos doing a project but I really enjoyed this one.
Thank you very much kevin 🌹
I work and learn more than 8 hours a day trying to get to your level🤝🏽
You've no idea how much this helped me. I did this challenge all the way, it looked just like the design except I had an enormous gap between "76" and "of 100". The funny thing is that i did the whole thing without any other problem even though grid is not my strongest side, but a simple "line-height: 1" got me banging my head on the wall so i had to look for tutorials. But I'm glad i found yours. Thank you.
I did this one on frontend mentor as my second thing after their suggested starter which was a qr code. Was fun with a bit more challenge.
Great video like always, Kelvin. Since you asked for feedback, typing while explaining gives a better understanding of your thinking process, which is one of the greatness of your videos.
Also if you allow me to dare to give you another piece of feedback, I would say to reduce the size of the face cam circle, I have OCD and that circle over the content was driving me crazy during all video. 😂
Again, great video and content and thank you for sharing all your knowledge with us.
I did this project a week ago using react and now seeing you do this. I have been doing frontend projects and they have helped me a lot in my styling.
I find this approach very instructive. I can always pause and repeat as desired. Thanks!
Great! 🎉. I really like this format. Perfectly balanced hybrid between a long detailed (slow) tutorial vs super fast one topic one.
Please more Frontend Mentor project videos! :)Thank you!
I like the format! I think the thing to consider is the chunk of pasted content so when you go back to explain it, it's not so overwhelming. I was able to follow this one pretty easily, but I'm also familiar with the subject matter, and your general approach to projects.
I like to use currentColor in svg stroke property, then you can just set color
Great content! Super easy to follow and see the thought process is what really stands out.
Explaining every details from a project it's a really nice format
Thank you Kevin, continues with videos like this one !
I am totally impressed the way you wrote and think about css code 😍😍😍
I prefer this format. Awesome content as usual!
This video format was awesome really focused in on what was important
As someone with ADHD, I love this faster format, it's easier for me to focus on what is being talked about
This format also has the benefit of focusing on the important things instead of the specific syntax/names, i.e. the actual logic of what is happening
Definitely a big fan of this style!
Great tutorial! Fun to watch and smooth. Thanks
You are doing well! Thank you, Kevin! for sharing your knowledge and resources. Be healthy and successful! 👍🏻💪🏻
This was amazing, thank you Kevin!
What a great video! Although I'm used to you typing out the code and explaining as you type, this new way of doing it works as well and can definitely help you make your videos shorter when you need them to be shorter. Kudos!
I enjoy this type of teaching because I first finish the task, then look for a better way to accomplish it, understand the concept, and then return to re-do the challenge.
I love this type of tutorials, thank you.
Love these walkthroughs. I often approach working out clean HTML first - with no CSS. In this case it feels like a table would work too. Of course that changes the styling approach quite a bit.
I really that kind of format. having just few tips is good but sometimes it sooooo nice to see how it works from A to Z :)
Great format, love it!
You are a gem of a CSS developer!!!
Love this format Kevin, more of these would be great. One suggestion, maybe talk through your process of setting the width on the overall container. I see you set it to a max-width of 46rem or something like that, and just curious how you get to that value
Love the format of this video. Great job!
This format is the best of all the different videos you do. Especially when it comes to, for example, defining utility classes, variables, etc. Stuff like that you can see just one time. We don't really need to see you set up your variables on every project. The speed is fine as long as the viewer has some familiarity with the concepts, which someone can get from some of your other videos if needed. Something to consider is that when you paste a code block in there, you can kind of allow the viewer some leeway to reorient. You just about achieved the balance. The thing is that it takes the eyes a little bit to go, "oh here's this new block of code, let me figure out what it says." The greatest benefit of this format is that you really reinforce the structure of the app throughout. You introduce the big picture and then fill in the details at a speed which allows us to see how the whole app works as a system. My lengthy comment here is because I really loved this video and want you to know that this format really does work for some of us, especially intermediate learners.
I really like this format (and I prefer it over the old one) because it's more focused and it's easier to see how each block of lines of CSS affects the final product.
This was awesome, Kevin. Trying to decide on whether to start doing the frontend mentor challenges. This was very informative and I can see how I would benefit from attempting the challenges. Also learning a lot about code organisation here. Thank you so much for such great content🙂
well... its completely depends on who is seeing your video... the beginner or much experienced.... so i just say when it is going over 20-30 min you can use copy paste code below this you can type ... typing code has better experience when you do mistakes and resolve it..... love the way you teach...
Love this format!
In my opinion, your approach to the product card which is titled "taking on a frontend mentor challenge" is the best approach. You gave people the opportunity to learn new css properties and learn how to professionally approach a project. It is the best way to make a tutorial in my opinion. It is more practical and puts everything you've been teaching on your channel into perspective. Please do more of these project/challenge based projects, explaining how and why certain things were used without dwelling too much on it. Thank you so much for sharing priceless knowledge.
Just did this challenge a few days ago! As a new web dev student it is awesome to see how similar my code was with the CSS master!
Great way of teaching. Really love it
was literally stuck on how to approach this challenge, this video was very helpful. personally I think I learn more when you type everything out and explain as you go it's just a little bit easier to follow.
I actually quite like this kind of video. Nice pace, not too hard to follow along.
This video had a LOT of hidden gem nuggets of other info in them; just awesome! Thank you again for these!
i like this format a lot (i like the typed one too, they're both great in different ways)!
I love this, in my opinion you should continue
Amazing! Thank you, we definitely need more of this!!!
I love this format!
I learned a ton from this video. I actually did the project by myself first before I watched your video to see how I'll compare with your process. While mine wasn't terrible, your implementation is definitely more polished and I prefer your process. In particular I really like your use of custom properties. I didn't know about these before. Thanks for walking us through your process!
Another great video, Kevin! Thank you so much. I prefer to code along with you so seeing all your code being typed definitely helps. But shorter version as this video is also fine.
I really like the format of this video :)
Hi Kevin AWESOME video this one and the other ones. It is mind blowing how you analyze the design and then give your solution. It looks easy but I know it takes a lot of practice. Thank you for sharing that with us ❤
Good point about how to use h1. Will think of that more in the future!
i do like this a lot. I did the challenge but i knew I didnt do it correctly. Doing it by myself the first time taught me what I was missing out and such. By you showing your work flow. You slowly understand where he is thinking and how to get the end results
this is amazing explanation of how to build a page, Thank you
Kevin you are a Superman and Superdad! Love the video and how you presented. Many thanks!
thx mr kevin I just started this challenge yesterday and got stuck on it, but thx to you it now looks more clear to me 😍
Hey Kevin! I personally prefer to watch the whole process starting from scratch and typing all the way to the end. This way you give us some of your thought process, the path you are following along with the mistakes that you do and must correct in this process. Seeing the mistakes you do on the way, or how you change your mind and how you find a solution, is much more educational in my opinion. And maybe satisfying some times finding a mistake just a second before you do hehe :) But we all love your work any way you do it. Thank you so much!
Thank you so much for making this kind of content and making it available for free. Success!!!
Very COOL, Kevi! I"d like to learn more from your "entire project walk throughs"! What i also like is when you are showing it as like You normally do it... compared to the one full project in the playlist, where you often said: "Normally i would do it different, but here..."
Great Work, thank you!
Daniel
It's fine, and thanks a lot for your effort trying to explain the project. Regards from México :)
Really like to see these kind of videos. Sometimes it was a bit fast to follow, but in general it was great! :)
I do love this kind of videos. You're awesome
Can you plzzz do more of these. Know someone’s thought process can help people grow exponentially!! 💯
I like both ways just fine. Must say with this video the explanations given do help a lot. cheers
I like the quicker format!
I'm assuming that this is from your old place, but just to take a moment. Best of luck with your new place. I know it is a big move for kids, I hope they make friends soon, and hope everyone settles in quickly ❤️
Mix the learning styles. Beginners benefit more from a full line by line, detailed, walk-through, while intermediate+ benefit from the concepts.
This video has a lot of great patterns that don't make much sense to do in a small project, but pay dividends in long term maintenance of larger code bases.
Thanks Kevin, really love your video's. I've finished my first semester of Web development (Starting at 37 years old :)) and your videos have helped tremendously. I def prefer you typing out so we can code along. That being said this was so helpful. I'd really like for you to of explained in more details those custom CSS properties as well. Thanks for the video once again, im coding this project out in my own time then I'll code along watching your video as well to see how I can improve my coding. Really love watching your vids when you code along for projects (and join in) from design to code so hopefully we get some more soon!
another frontendmentor video! thanks sir 😊