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

[@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 :) kzbin.info/www/bejne/fGGqe5inZd-ikLs

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

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

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

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

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

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

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

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

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

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

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

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

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

[@fredoscott2346]

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

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

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

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

[@kushagra-aa]

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

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

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

[@Moltas]

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

[@alanlewis1625]

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

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

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

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

[@mohamadmhana9453]

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

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

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

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

[@muhmmadawd3206]

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

[@michelribbens8014]

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

[@NurioonSoftware]

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

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

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

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

[@bensonjunior833]

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.

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

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

[@naveenramkumar6123]

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

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

[@vasyaqwe2087]

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

[@nikhilarroju9759]

This kind of short format is awesome.

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

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

[@aaptabpathan9577]

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

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

[@girijeshthodupunuri1300]

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

[@hanshurtig5943]

Really like this faster pace!

[@kvetoslavnovak423]

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

[@conwaymagee449]

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

[@rickardelimaa]

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

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

[@nichtsooft]

To me this new video-format appears more practical because here all the little hints you explain are uncoupled from a certain objectives. So it's easer to focus and remember them until I'm at the keyboard the next time (as I mostly watch your clips on the go). 💡

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

[@LarsLinde]

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

[@karamel-loh7880]

I like this style way more than the previous videos. Nothing wrong with the previous videos, but this is a nice middle ground between having a 15 minute video of code quickly churned out, and a 2 hour long video for a relatively simple component. It allows me to compare my thought process to yours more quickly, while also showing new ways I've never thought of doing something.

[@marsrevolutionary]

It's a lot easier to type along (or slightly behind) and see the similar results. Jumping around the code seems less of a lesson and more of a demonstration or lecture. Maybe you could do a side channel for the audience that prefers that form? When the page content suddenly changes without seeing the change in code leading there is slightly jarring. I'd much rather see the whole process, mundanity, errors and all. When I see your occassional stumble, it revitalizes my belief that I could eventually become as skilled as you. It shows that perfection isn't instant, it's a process of refinement.

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

[@Tato88888]

For me, this format is a great way to understand CSS fast.

[@mcoria74]

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

[@kylevandeusen]

Definitely prefer when you type things out. I feel like I retain it better.

[@br1580]

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!

[@Furki4_4]

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 !

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

[@fk319fk]

I was so excited to see you do this, but then I realized I am still too much of a novice. (I did HTML before there was CSS) Waiting for your newbie tutorial for old geezers.

[@rodrigovazquez7117]

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

[@mubshergafar5417]

Actually I enjoyed watching it but personally i would prefer the slower version when you get to code line by line cuz am looking to learn how experts think about styling, specifically the first things when you setup variables .Thank you for you awesome videos 🙏

[@MegaHumanj]

The pacing was pretty alright to me, though I prefer the typing of code. But to those who have a good understanding of css, this pacing would be just right and you didn't rush through your setup but took time to explain things which was awesome! Please keep up the great work!

[@parklink87]

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

[@iam_adrenalin]

Typing the code out is preferable, though it’s pretty much slower but you tend to explain better Thank you Mr Kevin ❤

[@berkipekoglu]

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

[@anacris505]

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

[@PraiseYeezus]

Definitely a big fan of this style!

[@PicSta]

I think faster tutorials are great if you're experienced already. I am, so I can follow everything. And where it gets to a tricky part, you still took the time to explain it properly. So I prefer the faster ones over the very detailed and slower tutorials.

[@serg_ka]

Finished this challenge not long ago, and some of the techniques you used really made me question my CSS knowledge :))))

[@clevermissfox]

This is probably well known but blew my mind the other day: on icodethis a very talented individual named Muhammad separated out some elements using uls w lis where I would have always used divs with p’s! For example on the right side of the card where Reaction, Memory etc are, he was using a ul with two lis, inside each li are two spans or a span + p! Then add flex/background to the ul and flex to each li. Or maybe a span with two uls and an li for each child, flex/bg on span then flex on ul. I thought it was great in this situation for icodethis where semantic html isn’t too crucial and maybe it will blow someone else’s mind❤ thanks Muhammed !!

[@anuraghere4997]

You are a gem of a CSS developer!!!

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

[@ElTopDev]

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!

[@Erwin_t]

I like this type of videos, but would prefer where you type everything from scratch, so we see your roadblocks and class naming >.< Great content as always! Good luck on your move!

[@catarinaferreira9474]

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

[@jasonbrn8541]

I prefer this format. Awesome content as usual!

[@nabsbladeofmiquella2315]

At 7:45, you can use flexbox on the entire line of summary-item(icon + title + note) and set justify-content: space-between; and add margin-right: auto; to the title

[@samturner4630]

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

[@geexup]

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

[@tibrasilbr]

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

[@matthewbutner8696]

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

[@francescomerighi6458]

Thank you Kevin! Please continue with this type of video, they're super useful! ;)

[@breakoutgaffe4027]

Thanks for making this Kevin!! More of this style without the typing please.

[@themarquisfamily3112]

Great tutorial! Fun to watch and smooth. Thanks

[@phucnguyen0110]

I am fine either way, however since the CSS King of KZbin is here - I think taking a bit more time and seeing how you code and explain would be great!

[@webcodewonders]

Thank you Kevin, continues with videos like this one !

[@lukeclarke4269]

i love this format. we don't need to see you actually typing and we can pause for the code if we need. you are doing a great job. The biggest thing lost with tutorials is the problem solving or how to go about the work. I love this format just for that!

[@alvarojflores]

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

[@Jarreddesigns]

To be honest these style of videos are great, but I do like the slow paced ones of you thinking out loud as you go through the css because it gives me insights on resolving problems when you were expecting one thing but something else happened.

[@CERO12345]

I much appreciate the style of this video. Typing code out is pointless if I need to copy or think about it I can stop the vid. If after pasting the code you will quickly run through it I think it’s perfect. People should understand that this is “ how to build a layout and thinking behind it“ video not guide to flex box or grid. More this style of content please!

[@dearozero3631]

I'm voting for everything typed up already because the video pacing is better!