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

⌚ 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

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

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

[chhavimanichoubey]

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

[fakefury]

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-gocr]

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.

[nomaddv]

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!

[zacmonroe]

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!

[kugh]

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

[MattRose]

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.

[robeastv]

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

[boarnerges_olu]

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

[yahayaoyinkansola]

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

[lux-conl]

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

[mikeandrewfernandez]

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.

[Ayan-odhk]

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.

[chrisphillips]

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]

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

[rpf]

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

[huhwhat]

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

[pablopronsky]

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

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

[smohammadhn]

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