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

Поделиться
HTML-код
  • Опубликовано: 23 ноя 2024

Комментарии • 351

  • @MagicMan123ification
    @MagicMan123ification Год назад +434

    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
      @neilkanakia Год назад

      Hey I just posted a tutorial on this yesterday :)
      ruclips.net/video/F0GJeq0zoZY/видео.html

    • @junsu-ho
      @junsu-ho Год назад +22

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

    • @bradwallace5450
      @bradwallace5450 Год назад +2

      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
      @Hamzaelbouti Год назад

      I prefer that to 😢

    • @justsaybobby
      @justsaybobby Год назад +4

      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.

  • @justkailash
    @justkailash Год назад +1

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

  • @Sulleei
    @Sulleei Год назад +21

    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

  • @xiggywiggs
    @xiggywiggs Год назад +55

    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
      @KevinPowell  Год назад +10

      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

  • @black_sinister
    @black_sinister Год назад +7

    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

  • @yawn8974
    @yawn8974 Год назад +19

    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
    @TreyDubya Год назад +5

    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
    @SleepyJosus Год назад +24

    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.

  • @fredoscott2346
    @fredoscott2346 Год назад +1

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

  • @ABelugaWhale
    @ABelugaWhale Год назад +7

    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.

  • @kylevandeusen
    @kylevandeusen Год назад +1

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

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

  • @NurioonSoftware
    @NurioonSoftware Год назад +1

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

  • @vdvman1
    @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

  • @kushagra-aa
    @kushagra-aa Год назад +2

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

  • @PIOT23
    @PIOT23 Год назад +5

    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

  • @nikhilarroju9759
    @nikhilarroju9759 Год назад +1

    This kind of short format is awesome.

  • @christianwilliams1733
    @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

  • @Dimitar-T-Radev
    @Dimitar-T-Radev 11 месяцев назад

    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.

  • @bernardus3289
    @bernardus3289 Год назад +23

    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.

  • @bigpoppaz6481
    @bigpoppaz6481 Год назад +25

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

  • @CaptTragedy
    @CaptTragedy Год назад +1

    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

  • @hanshurtig5943
    @hanshurtig5943 Год назад +1

    Really like this faster pace!

  • @froxx93
    @froxx93 Год назад +4

    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.

  • @muhmmadawd3206
    @muhmmadawd3206 Год назад +1

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

  • @seankennedy7970
    @seankennedy7970 Год назад +6

    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!

  • @Show_Cast
    @Show_Cast Год назад +1

    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.

  • @shanedonlon
    @shanedonlon Год назад +1

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

  • @GalileoCap
    @GalileoCap Год назад +2

    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.

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

  • @nnguyeninn3686
    @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

  • @mohamadmhana9453
    @mohamadmhana9453 Год назад +2

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

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

  • @octothorpe12
    @octothorpe12 Год назад +6

    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.

  • @rdow
    @rdow Год назад +2

    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.

  • @rickardelimaa
    @rickardelimaa Год назад +1

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

  • @Moltas
    @Moltas Год назад +1

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

  • @ratbag_xl
    @ratbag_xl Год назад +1

    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!

  • @alanlewis1625
    @alanlewis1625 Год назад +1

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

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

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

  • @theseangle
    @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

  • @iam_adrenalin
    @iam_adrenalin Год назад

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

  • @Chimponaut
    @Chimponaut Год назад +1

    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.

  • @Tato88888
    @Tato88888 Год назад

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

  • @tejpratapsahu6756
    @tejpratapsahu6756 Год назад +1

    Typing the code is more easy for me to understand the process.!

  • @badcatdesign
    @badcatdesign Год назад +2

    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.

  • @nabsbladeofmiquella2315
    @nabsbladeofmiquella2315 Год назад +1

    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

  • @aaptabpathan9577
    @aaptabpathan9577 Год назад

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

  • @karamel-loh7880
    @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.

  • @michelribbens8014
    @michelribbens8014 Год назад +1

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

  • @PraiseYeezus
    @PraiseYeezus Год назад +1

    Definitely a big fan of this style!

  • @thulanimogale3913
    @thulanimogale3913 Год назад +5

    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.

  • @Riinhoji
    @Riinhoji Год назад +1

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

  • @girijeshthodupunuri1300
    @girijeshthodupunuri1300 Год назад

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

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

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

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

  • @mubshergafar5417
    @mubshergafar5417 Год назад +3

    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 🙏

  • @naveenramkumar6123
    @naveenramkumar6123 Год назад +1

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

  • @berkipekoglu
    @berkipekoglu Год назад +1

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

  • @christopherbarber7705
    @christopherbarber7705 Год назад +1

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

  • @chriseski
    @chriseski Год назад +5

    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!

  • @rituraj_79
    @rituraj_79 Год назад +1

    we want more content like this

  • @mjdev-i1p
    @mjdev-i1p Год назад +1

    I really like the format of this video :)

  • @vasyaqwe2087
    @vasyaqwe2087 Год назад +2

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

  • @NarcisoLobo
    @NarcisoLobo Год назад +2

    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!

  • @gr81matt
    @gr81matt Год назад

    I like the quicker format!

  • @Dorchwoods
    @Dorchwoods Год назад +3

    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

  • @alvarojflores
    @alvarojflores Год назад

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

  • @mcoria74
    @mcoria74 Год назад +1

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

  • @alexeysorokin7527
    @alexeysorokin7527 Год назад +1

    faster/ jumpy is better as long as you explain everything you paste in a fast mode (just like you did in this video)!

  • @gallantpawn
    @gallantpawn Год назад +1

    I like more detail too. Going fast seems to suit people who would already know almost as much as you do. They would not need too much help if their though process was as fast as yours.

  • @Someguy2236
    @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 😍

  • @ernestadonu9110
    @ernestadonu9110 Год назад +1

    I like yiu sharing thought process and typing

  • @conwaymagee449
    @conwaymagee449 Год назад

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

  • @kylecollie7813
    @kylecollie7813 Год назад

    While I don't "hate" this format, I think I do prefer walking along with you as you type it out. I almost always am coding along on your videos and this format tempts me to just go copy-paste from your repo rather than typing it out. Either way, I always learn something from your videos!

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

  • @anuraghere4997
    @anuraghere4997 Год назад

    You are a gem of a CSS developer!!!

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

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

  • @nichtsooft
    @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). 💡

  • @geexup
    @geexup Год назад +3

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

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

  • @beor1982
    @beor1982 Год назад +1

    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.

  • @junsu-ho
    @junsu-ho Год назад +2

    Great Kevin that you put out new frontendmentor project, but why so easy and simple?, I'd expect to learn from you advanved conepts & projects ;)
    the net is already overcrowded with high quality basics and fundamentals ;) Please target advance viewers next time, Thank you

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

  • @kvetoslavnovak423
    @kvetoslavnovak423 Год назад +1

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

  • @matthewbutner8696
    @matthewbutner8696 Год назад

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

  • @LarsLinde
    @LarsLinde Год назад +2

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

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

  • @marsrevolutionary
    @marsrevolutionary Год назад +2

    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.

  • @rodrigovazquez7117
    @rodrigovazquez7117 Год назад

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

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

  • @Maviya-Hasan
    @Maviya-Hasan Год назад +1

    First of all thanks for this video , I understand better with your explaination with typing simultaneous....

  • @dearozero3631
    @dearozero3631 Год назад

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

  • @ricklickferrodriguez195
    @ricklickferrodriguez195 Год назад +6

    Hi kevin, i really like this new format, but why not trying to combine the both methods, while you are coding you can share to us the most relevant things about that process, and resume others like you did in this video, Thanks for all of the inspiration to be a better programmer and keep the good work.

  • @RachidBenrabia-j3m
    @RachidBenrabia-j3m Год назад

    I also prefer when you are typing and explaining, this new method was so hard for me to concentrate and understand all what you did, but i think it was good, thank you anyway !

  • @samturner4630
    @samturner4630 Год назад

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

  • @themarquisfamily3112
    @themarquisfamily3112 Год назад +1

    Great tutorial! Fun to watch and smooth. Thanks

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