From Design to Code // HTML & CSS from scratch // Frontend Mentor
Vložit
- čas přidán 9. 07. 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 CZcams 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 :)
czcams.com/video/F0GJeq0zoZY/video.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.
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
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!
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
Kevin, it's so cool to watch and code along with you like this, thank you!
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!
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 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.
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
I love when you do these FrontEnd Mentor challenges. Keep them coming!
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 :)
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’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!
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
Love the format of this video. Great job!
This kind of short format is awesome.
I just absolutely love these types of videos, please upload more of these please
Love your content btw.
Thank you Kevin, continues with videos like this one !
I prefer both of the formats but this, showing how you think when you see a layout, It's amazing!!!!
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 💯🔥
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 love these kind of videos! Great opportunity for us all to learn more deeply by going along with you. Please keep doing these!
Great format, love it!
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.
This was amazing, thank you Kevin!
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
Thank you very much kevin 🌹
I work and learn more than 8 hours a day trying to get to your level🤝🏽
I prefer this format. Awesome content as usual!
Your thought process is phenomenal, you make css look so easy
Really like this faster pace!
Great content! Super easy to follow and see the thought process is what really stands out.
Great! 🎉. I really like this format. Perfectly balanced hybrid between a long detailed (slow) tutorial vs super fast one topic one.
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
I love this type of tutorials, thank you.
I find this approach very instructive. I can always pause and repeat as desired. Thanks!
For me, I thought the video format was great. I particularly appreciate the description of the custom properties. Thanks for that additional help.
Definitely a big fan of this style!
Love this format!
Amazing! Thank you, we definitely need more of this!!!
I haven’t seen any of your older videos doing a project but I really enjoyed this one.
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 love this format!
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.
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 tutorial! Fun to watch and smooth. Thanks
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.
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
I like to use currentColor in svg stroke property, then you can just set color
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.
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.
I really like the format of this video :)
New format better. Less time wasted writing coding, more time making explaination. I like that
This video had a LOT of hidden gem nuggets of other info in them; just awesome! Thank you again for these!
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
Explaining every details from a project it's a really nice format
i like this format a lot (i like the typed one too, they're both great in different ways)!
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.
You are doing well! Thank you, Kevin! for sharing your knowledge and resources. Be healthy and successful! 👍🏻💪🏻
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.
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.
It's fine, and thanks a lot for your effort trying to explain the project. Regards from México :)
i like this approach more than the old , and love to see more templates from frontend mento6
I am totally impressed the way you wrote and think about css code 😍😍😍
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!
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🙂
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.
You are a gem of a CSS developer!!!
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 :)
Really like to see these kind of videos. Sometimes it was a bit fast to follow, but in general it was great! :)
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
I do love this kind of videos. You're awesome
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.
Yay! I love Frontend Mentor!
That’s really cool! More video like this
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 😍
another frontendmentor video! thanks sir 😊
I love this, in my opinion you should continue
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
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.
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 ❤
Kevin you are a Superman and Superdad! Love the video and how you presented. Many thanks!
Great way of teaching. Really love it
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!
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
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.
Good point about how to use h1. Will think of that more in the future!
I like both ways just fine. Must say with this video the explanations given do help a lot. cheers
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.
The format is great! because, the time consumed on typing could distract from your explanation of why you choose to do that, And this series of videos are really helpful for us to get a big picture and understanding of how all of those pieces fit together when planning and creating a component. Thanks Kevin!
I just solved this challenge last night and saw this video. I realized what I've done wrong and correct. I like this concept, I hope that you keep it going !
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...
I like this type of format :D
Amazing video format 🎉
Can you plzzz do more of these. Know someone’s thought process can help people grow exponentially!! 💯