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

Подписаться 916 тыс.

Просмотров 156 тыс.

50% 1

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 RU-vid 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!

Опубликовано:

12 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 349

@MagicMan123ification Год назад

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.

@neilkanakia Год назад

Hey I just posted a tutorial on this yesterday :) ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-F0GJeq0zoZY.html

@junsu-ho Год назад

true, appearing code out of nowhere gives a harder cognitive time

@bradwallace5450 Год назад

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.

@Hamzaelbouti Год назад

I prefer that to 😢

@justsaybobby Год назад

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.

@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.

@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.

@KevinPowell Год назад

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

@seankennedy7970 Год назад

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!

@froxx93 Год назад

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.

@yawn8974 Год назад

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!

@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!

@tossichugs Год назад

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.

@fredoscott2346 11 месяцев назад

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

@bernardus3289 Год назад

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.

@mar-tin702 Год назад

It takes weeks for me

@husler7424 Год назад

same bro

@PIOT23 Год назад

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

@michelribbens8014 Год назад

I love when you do these FrontEnd Mentor challenges. Keep them coming!

@Moltas Год назад

I like this speedy format. It's only because of your excellent way of explaining things! Thanks!

@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

@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.

@vasyaqwe2087 Год назад

Kevin, it's so cool to watch and code along with you like this, thank you!

@NarcisoLobo Год назад

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!

@theseangle 10 месяцев назад

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

@alanlewis1625 Год назад

For me, I thought the video format was great. I particularly appreciate the description of the custom properties. Thanks for that additional help.

@nikhilarroju9759 Год назад

This kind of short format is awesome.

@NurioonSoftware Год назад

New format better. Less time wasted writing coding, more time making explaination. I like that

@kushagra-aa Год назад

I prefer both of the formats but this, showing how you think when you see a layout, It's amazing!!!!

@christianwilliams1733 Год назад

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

@bigpoppaz6481 Год назад

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

@muhmmadawd3206 Год назад

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

@GammerAdam Год назад

I love these kind of videos! Great opportunity for us all to learn more deeply by going along with you. Please keep doing these!

@naveenramkumar6123 Год назад

I just absolutely love these types of videos, please upload more of these please Love your content btw.

@hanshurtig5943 Год назад

Really like this faster pace!

@thulanimogale3913 Год назад

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.

@vikisneakers 6 месяцев назад

Your thought process is phenomenal, you make css look so easy

@CaptTragedy Год назад

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

@mitetoOoOoO 5 месяцев назад

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.

@matthewbutner8696 Год назад

I haven’t seen any of your older videos doing a project but I really enjoyed this one.

@mohamadmhana9453 Год назад

Thank you very much kevin 🌹 I work and learn more than 8 hours a day trying to get to your level🤝🏽

@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.

@Show_Cast Год назад

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.

@beor1982 Год назад

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.

@geexup Год назад

I like to use currentColor in svg stroke property, then you can just set color

@conwaymagee449 Год назад

I find this approach very instructive. I can always pause and repeat as desired. Thanks!

@kvetoslavnovak423 Год назад

Great! 🎉. I really like this format. Perfectly balanced hybrid between a long detailed (slow) tutorial vs super fast one topic one.

@berkipekoglu Год назад

Please more Frontend Mentor project videos! :)Thank you!

@octothorpe12 Год назад

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.

@FuzzyAnkles Год назад

Great content! Super easy to follow and see the thought process is what really stands out.

@rodrigovazquez7117 Год назад

Explaining every details from a project it's a really nice format

@webcodewonders Год назад

Thank you Kevin, continues with videos like this one !

@jasonbrn8541 Год назад

I prefer this format. Awesome content as usual!

@aaptabpathan9577 11 месяцев назад

I am totally impressed the way you wrote and think about css code 😍😍😍

@samturner4630 Год назад

This video format was awesome really focused in on what was important

@vdvman1 Год назад

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

@PraiseYeezus Год назад

Definitely a big fan of this style!

@themarquisfamily3112 Год назад

Great tutorial! Fun to watch and smooth. Thanks

@alvarojflores Год назад

You are doing well! Thank you, Kevin! for sharing your knowledge and resources. Be healthy and successful! 👍🏻💪🏻

@ticeicebby Год назад

This was amazing, thank you Kevin!

@gwemula Год назад

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!

@Originallyright Год назад

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.

@peymanschanne9776 9 месяцев назад

I love this type of tutorials, thank you.

@badcatdesign Год назад

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.

@Riinhoji Год назад

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

@dannymacedo8772 Год назад

Great format, love it!

@anuraghere4997 Год назад

You are a gem of a CSS developer!!!

@Dorchwoods Год назад

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

@tclark Год назад

Love the format of this video. Great job!

@mymi_coding Год назад

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.

@GalileoCap Год назад

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.

@TheOveragedDeveloper 11 месяцев назад

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🙂

@CyberTechBits 28 дней назад

Love this format!

@justkailash Год назад

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...

@ratbag_xl Год назад

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!

@bensonjunior833 11 месяцев назад

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.

@CosCFI777 Год назад

Great way of teaching. Really love it

@ajhandsome01 Год назад

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.

@Allformyequine Год назад

This video had a LOT of hidden gem nuggets of other info in them; just awesome! Thank you again for these!

@LarsLinde Год назад

I actually quite like this kind of video. Nice pace, not too hard to follow along.

@parklink87 8 месяцев назад

i like this format a lot (i like the typed one too, they're both great in different ways)!

@MrThedaimonmore Год назад

I love this, in my opinion you should continue

@marijamalesevic9587 10 месяцев назад

Amazing! Thank you, we definitely need more of this!!!

@alessandrocurcu1740 Год назад

I love this format!

@okrunner Год назад

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!

@olegkremianski5744 Год назад

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.

@markojozic3944 Год назад

I really like the format of this video :)

@JuanCastro-C 10 месяцев назад

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 ❤

@rickardelimaa Год назад

Good point about how to use h1. Will think of that more in the future!

@nnguyeninn3686 Год назад

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

@andreimade3261 Год назад

this is amazing explanation of how to build a page, Thank you

@anacris505 Год назад

Kevin you are a Superman and Superdad! Love the video and how you presented. Many thanks!

@Someguy2236 Год назад

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 😍

@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!

@tibrasilbr 9 месяцев назад

Thank you so much for making this kind of content and making it available for free. Success!!!

@Daniel-cc5ph Год назад

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

@mcoria74 Год назад

It's fine, and thanks a lot for your effort trying to explain the project. Regards from México :)

@catarinaferreira9474 Год назад

Really like to see these kind of videos. Sometimes it was a bit fast to follow, but in general it was great! :)

@girijeshthodupunuri1300 Год назад

Can you plzzz do more of these. Know someone’s thought process can help people grow exponentially!! 💯

@opueneoyeinbomo9634 Год назад

I do love this kind of videos. You're awesome

@gr81matt Год назад

I like the quicker format!

@christopherbarber7705 Год назад

I like both ways just fine. Must say with this video the explanations given do help a lot. cheers

@shanedonlon Год назад

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 ❤️

@rdow Год назад

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.

@penguinxed Год назад

another frontendmentor video! thanks sir 😊

@br1580 11 месяцев назад

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!