From Design to Code // HTML & CSS from scratch // Frontend Mentor

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

⌚ 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

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

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 YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[MagicManification]

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.

[xiggywiggs]

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.

[sijiadegoke]

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

[ABelugaWhale]

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.

[TreyDubya]

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!

[SleepyJosus]

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.

[yawn]

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!

[bernardus]

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.

[black_sinister]

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

[froxx]

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.

[seankennedy]

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!

[PIOT]

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

[theseangle]

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

[fredoscott]

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 :)

[Chimponaut]

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.

[chriseski]

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!

[muhmmadawd]

i like this approach more than the old, and love to see more templates from frontend mento6

[bigpoppaz]

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 💯🔥

[vdvman]

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

[mitetoOoOoO]

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.