Build a responsive website with HTML & CSS | Part one: Analyzing the project and setting the stage

Starting a new project is always fun! In this one, we're starting with nothing and building out a Frontend Mentor project from scratch, looking at potential problems we can run into and how I would tackle them.
This is part 1 of this series, which will span the next few weeks.
🔗 Links
✅ The Frontend Mentor project: www.frontendmentor.io/challen...
✅ Andy Bell's reset: piccalil.li/blog/a-modern-css...
✅ Josh Comeau's reset: www.joshwcomeau.com/css/custo...
✅ More on prefers-reduced-motion: web.dev/prefers-reduced-motion/
⌚ Timestamps
00:00 - Introduction
00:51 - How I am going to approach this series
02:18 - Analysing the layout
08:12 - Getting started with Vite
11:49 - Making sure everything is working
13:40 - Adding a reset
20:18 - Setting up custom properties
43:01 - Creating utility classes
#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 KZread 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!

Пікірлер: 442

  • @chhavimanichoubey9437
    @chhavimanichoubey9437 Жыл бұрын

    I lost track of my studies, but now I'm back.

  • @tonyf2a_

    @tonyf2a_

    Жыл бұрын

    Same here. Starting class in the fall!!

  • @chhavimanichoubey9437

    @chhavimanichoubey9437

    Жыл бұрын

    @@tonyf2a_ i hope i can now do something monetary with CSS bcuz I don't want to miss out on landing a job in css

  • @SS-bb1nc

    @SS-bb1nc

    Жыл бұрын

    @@chhavimanichoubey9437 and where does one get work with mainly css?

  • @chhavimanichoubey9437

    @chhavimanichoubey9437

    Жыл бұрын

    @@SS-bb1nc many sources but i prefer kevin and firefox mdn

  • @TechWaveDaily

    @TechWaveDaily

    Жыл бұрын

    Same to you friends lots of dipression and falls.

  • @nomadd3v
    @nomadd3v Жыл бұрын

    Everyone else focuses on the "how" and not the "why". Thank you for giving an explanation on both. Your really one of the only WebEd channels I can watch and learn from!

  • @prudenceabanulo8870

    @prudenceabanulo8870

    2 ай бұрын

    please how can I cannot find the link to download the files

  • @fakefury1198
    @fakefury1198 Жыл бұрын

    Can't wait for the rest of the series! I love these new kinds of videos where we watch you create projects for the first time and can see all of the potential issues that may come up and how you tackle them!

  • @RohitSaini-go3cr
    @RohitSaini-go3cr Жыл бұрын

    I was watching your old videos of doing these kind of series and here you are again with those amazing learning-packed series. Thank you for actually making CSS easier. Thank you Kevin.

  • @zacmonroe1211
    @zacmonroe1211 Жыл бұрын

    Looks like this was your 500th video! Thank you for putting out such useful and understandable videos on this stuff, it really helps and gets me energized about frontend work!

  • @kugh2384
    @kugh2384 Жыл бұрын

    This is your best series. Please keep them coming and thank you so much for completing them.

  • @MattRose30000
    @MattRose30000 Жыл бұрын

    I've just started web design and this is all still very ethereal for me. But I appreciate that we're able to hear your thought processes behind your work. That's very inspiring.

  • @ConquerJS
    @ConquerJS Жыл бұрын

    I'm embarassed to say. I've been a software engineer for 4 years now at a major tech company. But I need to come back to this to remember how to make a basic website. Once you start working at these places they get you doing all sorts of crap that has nothing to do with actually coding websites, even when you're a frontend engineer. You spend years working with frameworks that do it all for you, focusing on optimising state, fixing bugs that have more to do with the glue between frontend and backend than the frontend itself. THen you get pulled into other teams that have nothing to do with what your expertise is. Then you got a close friend or family member asking for help to build a simple website and you're like "Duuuurrrrr wut."

  • @mindlessdrive

    @mindlessdrive

    Жыл бұрын

    woah I didnt think it would end up being that way, I just started to program and thats kinda shocking lol.

  • @mhmdawad6726

    @mhmdawad6726

    Жыл бұрын

    wow , that true , when my brother ask my to help him in his html home work , i stuck and go to w3 school to learn table and and how to do simple stuff . I'am here to learn how to write clean css code not pat shit like before

  • @johnryder8464

    @johnryder8464

    Жыл бұрын

    Just because you're a software designer doesnt mean you can build a website.

  • @boarnerges_olu3648
    @boarnerges_olu3648 Жыл бұрын

    Thanks Kelvin. Your conquering responsive layout course has helped my journey literally. I'll definitely be joining in for this series 🙌🙌🙌

  • @lux-co3nl
    @lux-co3nl Жыл бұрын

    Thanks so much for making this. Seeing real world projects from start to finish is incredibly valuable content!

  • @robeastv
    @robeastv11 ай бұрын

    The way you explain is so easy to follow. I just went through the whole HTML & CSS playlist yesterday. Learned so much. Thank you.

  • @mikeandrewfernandez9797
    @mikeandrewfernandez9797 Жыл бұрын

    Thank you so much Mr. Kevin. On a single video I learned, semantics and real world decision making in modern web development. Your channel is really something else.

  • @yahayaoyinkansola8258
    @yahayaoyinkansola8258 Жыл бұрын

    I like your thought process on how you choose your classes and custom properties, it was really insightful and helpful. We as devs hardly think about this and it's really important

  • @rpf23543
    @rpf23543 Жыл бұрын

    The explanations and the „why“ is really the key. You are so awesome, thank you!!!

  • @chrisphillips963
    @chrisphillips963 Жыл бұрын

    Great video Kevin. I appreciate the detail provided for setting up the root variables as well as the number of tricks/shortcuts you sprinkled throughout (color picker, multi-line select, opening the same doc multiple times, etc.). Thank you!

  • @CMDR_Vod
    @CMDR_Vod Жыл бұрын

    Just wanted to say thank you for this video (and your other ones!). Very informative and easy to follow. As someone starting out in front end, these have been a lifesaver

  • @Ayan-od8hk
    @Ayan-od8hk Жыл бұрын

    This was a really really great video. Not only because you are a great developer, but you actually show us your thought process while building this.

  • @charlesbovalis6591
    @charlesbovalis6591 Жыл бұрын

    These series were so much needed Kevin !!!! God Bless you !!!

  • @RockerStarrr
    @RockerStarrr Жыл бұрын

    I was actually starting a FrontEnd Mentor project today! Thanks so much Kevin!

  • @huhwhat8831
    @huhwhat8831 Жыл бұрын

    More of this Kevin. Very informative, and big help for learners like me on how the thought process is for creating the front-end.

  • @pablopronsky7364
    @pablopronsky7364 Жыл бұрын

    thanks kevin, me and my friends we all group in my home twice a week to watch your videos and practice. really appreciate it!

  • @NathanPhelpsMcPhelpsius

    @NathanPhelpsMcPhelpsius

    Жыл бұрын

    This is so cool! How do you find people willing to even do that?

  • @Epikht

    @Epikht

    Жыл бұрын

    @@NathanPhelpsMcPhelpsius I wish I had friends like this

  • @DanDerkson
    @DanDerkson Жыл бұрын

    Nice stuff Kevin. Really looking forward to the rest. I would love to know how you would normally set up your font sizes if the sizing wasn't so wonky like in this one.

  • @maksymandrzejdrzyzgiewicz5096
    @maksymandrzejdrzyzgiewicz5096 Жыл бұрын

    PLEASE PLEASE PLEASE!!!! The "analysing the layout" section is *EVERYTHING* for me. From the depths of my heart, please post more videos about your thought process when you see a design you want to do. It is *INVALUABLE* for me.

  • @smohammadhn
    @smohammadhn Жыл бұрын

    the best sort of advanced css tutorial on the internet by far, can't wait for the next one ...

  • @outpost31737
    @outpost31737 Жыл бұрын

    Great work Kevin. I never stop learning CSS!

  • @Shakeel714
    @Shakeel714 Жыл бұрын

    And this is called the professional way of getting started with frontend web dev!!! Thanks Kevin for sharing your knowledge

  • @nathanrampersaud2165
    @nathanrampersaud21659 ай бұрын

    I've been looking for this style of teaching for the longest. Thanks!

  • @khanh3348
    @khanh3348 Жыл бұрын

    Thank you Kevin. I'm new to web dev and I really need this kind of video to understand how a pro doing stuffs. I want to do it right!

  • @cory8079
    @cory8079 Жыл бұрын

    I hope to see many more of these! This video was very helpful.

  • @digvijayyamagekar4300
    @digvijayyamagekar4300 Жыл бұрын

    please do more of this videos, they relly give us broader idea on how things works.

  • @MrBrancomusic
    @MrBrancomusic Жыл бұрын

    Thank you Kevin,can't wait for part 2.

  • @arnosfarm3442
    @arnosfarm3442 Жыл бұрын

    I love this! I've been looking for a tutorial just like this. Thank you!

  • @tnixc6356
    @tnixc6356 Жыл бұрын

    THIS IS WHAT I'VE BEEN WAITING FOR!!!

  • @sonoftroy8572
    @sonoftroy8572 Жыл бұрын

    Hey Kevin, I really like these responsive website builds!

  • @bbrixon
    @bbrixon Жыл бұрын

    Wow. Watching you do it correctly is making me feel bad that I've been doing it wrong all these years. My only regret is that I didn't find your channel a decade ago.

  • @lulusaikou221
    @lulusaikou221 Жыл бұрын

    Thank you Kevin, it's really helpful, it's not overkill it's long term thinking. 👏

  • @nicolaskorner9351
    @nicolaskorner9351 Жыл бұрын

    Absolute steal that this is free. Thank you so much!

  • @dojnishi
    @dojnishi Жыл бұрын

    This is so amazing! Please more!!!

  • @iamundefinedv
    @iamundefinedv Жыл бұрын

    The designer who made these files for you are so creative! They deserve a raise for sure. It’s reallyyy hard to copy another creators idea and throw it into figma lol

  • @roxannestahl2596
    @roxannestahl2596 Жыл бұрын

    I am transitioning careers and began my journey through UX/UI and fell in love with Front-End instead (it probably has to do with my previous career). This is VERY interesting! I have watch many UI vids and have wondered how it flows to the next level. I have seen rants from UI community members rant about how web devs need to (insert something here). It really goes both ways and I'm hoping that with some background knowledge I can be helpful.

  • @nielslytzdk
    @nielslytzdk Жыл бұрын

    Very nice as usual! I like the way you think. Looking forward to the next video:)

  • @qifrey2472
    @qifrey2472 Жыл бұрын

    You're a hero. As someone who's still busy learning programming, making a website is one of the few basics I suck at. This will help a lot. Saving this for later tho, because I gotta go to bed. Thanks in advance tho.

  • @pokerabend1
    @pokerabend17 ай бұрын

    late but must say watching your videos is fun. I get a lot out of them, they'll answer questions I didn't have and plus the goodmooded happy way you present these makes them more fun.

  • @billetuco
    @billetuco Жыл бұрын

    Thank you Kevin for the amazing videos. i love those series.

  • @davidlepen1360
    @davidlepen1360 Жыл бұрын

    This is what I was waiting! Let's go!

  • @ryanbalaguer3481
    @ryanbalaguer34816 ай бұрын

    the only real tutorial that teaches you each step of the way. Gonna give coffee when I'm earning soon.

  • @archiem6323
    @archiem6323 Жыл бұрын

    Great information to learn. Thank you, Kevin😊

  • @sambhavsharma2780
    @sambhavsharma27808 ай бұрын

    Your thought process on global CSS variables is really impressive.

  • @AM-rl8lv
    @AM-rl8lv Жыл бұрын

    Super awesome series!!!!! Thanks a lot Kevin

  • @taalaibeko
    @taalaibeko Жыл бұрын

    Hello from Kyrgyzstan - from Central Asia Country. I love your chanel and your style explaning the css. I am learning from you a lot

  • @danielassis255
    @danielassis255 Жыл бұрын

    Seeing you coding is amazing, so much to absorb

  • @vinaypatil8009
    @vinaypatil8009 Жыл бұрын

    Yes that's I needed , thank you sir for this playlist

  • @hxxzxtf
    @hxxzxtf Жыл бұрын

    I learn a lot in the introduction video itself. More such videos will be appreciated.

  • @extrempty
    @extrempty Жыл бұрын

    this is awesome, thank you so much Kevin.

  • @igalanga
    @igalanga Жыл бұрын

    Thank you for sharing! This is really helpful for us !

  • @yugiohsc
    @yugiohsc Жыл бұрын

    Hey! Your intro is much more clear now! Nice

  • @Mikairuu
    @Mikairuu Жыл бұрын

    As always, amazing!

  • @andreisolero192
    @andreisolero192 Жыл бұрын

    Man, I really need this. Thanks a lot!!!

  • @bobdinitto
    @bobdinitto Жыл бұрын

    Thanks Kevin, another great tutorial video! Great work as always. It's hard for me to imagine you scratching your head, yet I seem to scratch mine continuously.

  • @80Vikram
    @80Vikram Жыл бұрын

    This is super awesome & helpful man, thanks a zillion for your efforts. God bless you.

  • @sam-harrison
    @sam-harrison Жыл бұрын

    Looking forward to watching this one 👍

  • @silvanoseric5925
    @silvanoseric5925 Жыл бұрын

    Installing "Color Highlight" VS Code extension is a great way to instantaneously get more information about a color, without having to look it up. The color is literally shown in your editor as a shade.

  • @WadieGamer
    @WadieGamer Жыл бұрын

    Yes thanks! I NEEDED this.

  • @GermanPaak
    @GermanPaak Жыл бұрын

    Great work Kevin. Thanks.

  • @yariveon
    @yariveon Жыл бұрын

    Hi Kevin, thank you for the great tutorial! it really helps to build a structure in the css workflow! I have one question regarding the font size: Why did you decide not to change the font size in the universal selector to 10px, so the rem unit will be easier to calculate? Can't wait to watch the next part 🤓🙏

  • @hrobertson4
    @hrobertson4 Жыл бұрын

    Backend developer, have always been frustrated and confused by CSS: your videos are actually making me excited about front end :D

  • @anand_dudi
    @anand_dudi Жыл бұрын

    Thanks kevin i was really need it this time when i have to start a project

  • @AttkBeast
    @AttkBeast Жыл бұрын

    Thanks for walking us through the css reset. Very informative! I'm not understanding the ' :root ' stuff though...I've never seen that.

  • @muhammadk23
    @muhammadk23 Жыл бұрын

    great, waiting for next part👌

  • @mohamedatta7866
    @mohamedatta7866 Жыл бұрын

    There is always something to learn here thank you 🙏

  • @tanny_edits
    @tanny_edits Жыл бұрын

    thank you for providing this premium content Kevin, God bless you

  • @filippodembech7659
    @filippodembech7659 Жыл бұрын

    A day fullfilled with Good Practices and tips is a wonderful day.

  • @abogame6852
    @abogame6852 Жыл бұрын

    By far the best tutorial i found to tNice tutorials in a short ti

  • @mohammadmahdialvansaz8001
    @mohammadmahdialvansaz8001 Жыл бұрын

    Awesome series! Thanks

  • @ExtraAshishKushwaha
    @ExtraAshishKushwaha Жыл бұрын

    Thanks a lot for this type of series. Please create this type of series on SCSS. Please! Please!

  • @NguyenCuong-rw9zr
    @NguyenCuong-rw9zr Жыл бұрын

    I hope you will release more video about Building website as this video. This is useful for newbie FE. Thank you Kevin

  • @charlesavul1016
    @charlesavul1016 Жыл бұрын

    Kevin you should be voted world president of css teaching. I hope to send a contribution to you some day . Your commitment to helping people is invaluable.!

  • @azzen_v
    @azzen_v Жыл бұрын

    It would be so cool if you could show how you would make a real caroussel. I tried one time and it was not that good. The hardest part was to make the caroussel seem endless, to show the first element after the last element when you click on the next button again.Seeing your approach on an automated caroussel would be very interesting as well :)

  • @lewisone
    @lewisone Жыл бұрын

    I've always thought I spend way too much time on forward thinking..... until i watched this video and am at peace with it.

  • @K3K900
    @K3K900 Жыл бұрын

    You produce really good content; I am just starting with code and these tutorials are really helpful, greetings from Venezuela

  • @greendragon0009
    @greendragon0009 Жыл бұрын

    Thank you Kevin. Needed this dude. :)

  • @taiyeagboola6692
    @taiyeagboola6692 Жыл бұрын

    So sad I didn't get to be the first viewer. KZread has to notify me earlier next time. Thank you sir for your videos. You help me tackle my CSS fears. Thank you for yet another great video. Please do release the others in good time. I am a Nigerian wanting to be a front end developer. I wouldn't mind you to be my mentor. What do you think?

  • @TonyoPet
    @TonyoPet Жыл бұрын

    OOOHHHHH!!! You're saying "Hello my Frontend friends"!!! I don't know why this video was different from all the others, but I always thought you said "Hello my friend and friends". Frontend friends is way better.

  • @alialrahem9817
    @alialrahem981710 ай бұрын

    Thank you so much this is know a real course to learn how to make a decision which best layouts for each device

  • @madhusmita2207
    @madhusmita2207 Жыл бұрын

    I am a beginner and really liked this detailed specifications of properties but yeah I felt a little overwhelmed as well but overall it's good :) I think going through the basics again would be a better choice for me though 😄

  • @s7v7n97

    @s7v7n97

    Жыл бұрын

    Use mdn

  • @rafaelperes4140
    @rafaelperes4140 Жыл бұрын

    not gonna lie, I watch Kevin's videos at night to relax while learning CSS! The way he teaches is so damn good, I always know I will understand the subject! And the way the teaches is so calm and welcoming I always feel like someone will come and serve me some coffee with cookies while I watch it! 😅

  • @goggins8471

    @goggins8471

    Жыл бұрын

    Any other youtuber you would suggest for frontend?

  • @rafaelperes4140

    @rafaelperes4140

    Жыл бұрын

    @@goggins8471 I don't watch many, but the channel Web Dev Simplified is also good, but he goes way fast and I confess sometimes I get lost on it

  • @ardet1527

    @ardet1527

    Жыл бұрын

    ​@@goggins8471 The Net Ninja is also great teacher. He teaches detailed and slowly so you can understand function of what he teaches. He also has amazing JS tutorials.

  • @goggins8471

    @goggins8471

    Жыл бұрын

    @@ardet1527 thanks

  • @rafaelperes4140

    @rafaelperes4140

    Жыл бұрын

    @@ardet1527 thanks 🙏

  • @jenstornell
    @jenstornell Жыл бұрын

    The thing with utility classes. It's like Tailwind without Tailwind. I've not yet decided if I like it or not. On one hand going plain makes it dependency free. On the other hand it's kind of reinventing the wheel. 🤔

  • @KevinPowell

    @KevinPowell

    Жыл бұрын

    I don't go all-in with them. And you could use Tailwind to generate the ones I use for sure, and would be a totally valid way to work. I was going to use my own system to generate them, but decided to keep it a bit more beginner friendly this time around. I'll look at something a little more robust one of these days though ☺️

  • @ScriptyVijay
    @ScriptyVijay Жыл бұрын

    That's ❤️ great i was waiting for this video

  • @pouyam4326
    @pouyam4326 Жыл бұрын

    Let's gooooo that's what I'm thinking about😍😍😍

  • @1909jaya
    @1909jaya Жыл бұрын

    Love your work and your haircut 👌

  • @mashayogini
    @mashayogini Жыл бұрын

    Hi Kevin, I've just checked out your courses they are amazing! Thanks a lot for free resources. 🙏🌷

  • @eugeniopereira2831
    @eugeniopereira2831 Жыл бұрын

    This was part of my frontend 1 final exam, the academy where I'm studying gave us this design for us to code. Wish you had uploaded this series a couple of months ago 🤣

  • @kensiu1833
    @kensiu18337 ай бұрын

    Thank you Kevin great tutorial.

  • @synnergames1340
    @synnergames134010 ай бұрын

    have literally just realised you say hello my front end friends, always thought you were saying friend and friends LOLZ!! Absolutely love the videos thank you so much.

  • @system2072
    @system2072 Жыл бұрын

    please make more of these series.. most jobs requirements mention ability to convert figma design to actual code also sass is a required qualification.. please use sass for the next series...

  • @msaeedkhan933
    @msaeedkhan933 Жыл бұрын

    Man i love your content, and when its free 😍😍😍♥️♥️♥️♥️

  • @dayanasilvacaffarel
    @dayanasilvacaffarel Жыл бұрын

    Dear, Kevin we needed this video last week🥺

  • @drawingfever7
    @drawingfever7 Жыл бұрын

    We must protect this human at all costs.

  • @kwabenaboateng7405
    @kwabenaboateng7405 Жыл бұрын

    I learnt a lot from this video. Thanks.

  • @peruvianidol
    @peruvianidol Жыл бұрын

    Good stuff, Kevin! I hate how wildly inconsistent the FEM designs are. A ran into similar issues when I did one on stream and ended up just changing the design. Having font sizes 1px apart makes it really hard to establish a visual hierarchy and I would fight the designer on this. 😂