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!
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.
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.
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.
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
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!
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 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.
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.!
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.
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!
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.
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!
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.
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."
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
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.
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.
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
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 😄
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.
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.
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
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.
This is a really good video, it's really helpful to hear about your methodology and process instead of just the "Okay now type this," you get in other tutorials, I cant wait to build the rest of the site! I think I'll be using the Tailwind library after this, though 😅I really see how having those built-in color and font size/weight variables saves a lot of time now.
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.
Guru ji mai bhi Bihar ke danapur se hu mera maths bahut weak tha maine aapka mypathsala app purchase kiya tha jisse mera jo growth hua wo unbelievable hai mera ek friend nit patna se padha hua hai wo bhi cgl ka tyari karta hai aur wo mujhse dishonest seller ka bola ki kaise solve karte ho to maine use samjhaya aapke tarike se aur uska achha laga to maine video bhi share kiya thanks mera maths me achhe marks ke liye
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. 🤔
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 ☺️
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.
So sad I didn't get to be the first viewer. TH-cam 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?
So envious of being able to build an entire layout and design system from scratch without a being bogged down by a decade plus of legacy code and trying to work around systems held together by duct tape and unicorn wishes.
9:55 Somewhere between Vite version 2.9.9 as you installed here, to the current latest of 4.3.2, the names, and the order of the choices, changed: **"Vanilla-ts" >> "Typescript" **"Vanilla" >> "JavaScript" 05-02-23 2209 PT
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...
You don't need the Windows color picker. The Figma inspector shows you all the color information you need. Also, I loved watching Kevin discover 3 levels of the Design Token abstraction pyramid in real time!
I should really spend more time thinking of the project and planning it out before starting. I thought kevin would just go in and make this entire project in 50 min, but this was just the planning phase. Prob should do the same.
This caught my attention because of the "Be Vietnam" font. But then every other explanation in here is really valueable. And a quick note, I think the shortcut Windows + Shift + C comes from PowerToys.
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 🤣
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 :)
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!
please how can I cannot find the link to download the files
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.
thanks kevin, me and my friends we all group in my home twice a week to watch your videos and practice. really appreciate it!
This is so cool! How do you find people willing to even do that?
@@NathanPhelpsMcPhelpsius I wish I had friends like this
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.
How is your web design going 2 years on?
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.
I lost track of my studies, but now I'm back.
Same here. Starting class in the fall!!
@@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
@@chhavimanichoubey9437 and where does one get work with mainly css?
@@SS-bb1nc many sources but i prefer kevin and firefox mdn
Same to you friends lots of dipression and falls.
I've always thought I spend way too much time on forward thinking..... until i watched this video and am at peace with it.
This is your best series. Please keep them coming and thank you so much for completing them.
The way you explain is so easy to follow. I just went through the whole HTML & CSS playlist yesterday. Learned so much. Thank you.
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
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!
And this is called the professional way of getting started with frontend web dev!!! Thanks Kevin for sharing your knowledge
the only real tutorial that teaches you each step of the way. Gonna give coffee when I'm earning soon.
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! 😅
Any other youtuber you would suggest for frontend?
@@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
@@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.
@@ardet1527 thanks
@@ardet1527 thanks 🙏
The explanations and the „why“ is really the key. You are so awesome, thank you!!!
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.!
the best sort of advanced css tutorial on the internet by far, can't wait for the next one ...
Hello from Kyrgyzstan - from Central Asia Country. I love your chanel and your style explaning the css. I am learning from you a lot
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.
please do more of this videos, they relly give us broader idea on how things works.
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.
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!
We must protect this human at all costs.
Whenever I see CSS problem to solve , I see your face automatically generated to get resources from your videos, big thanks for good work.
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.
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!
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.
Backend developer, have always been frustrated and confused by CSS: your videos are actually making me excited about front end :D
Your thought process on global CSS variables is really impressive.
I've been looking for this style of teaching for the longest. Thanks!
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."
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
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.
As a designer, I got my eye twiching, when I saw this approach to fonts in design
Thanks so much for making this. Seeing real world projects from start to finish is incredibly valuable content!
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.
I was actually starting a FrontEnd Mentor project today! Thanks so much Kevin!
Dear, Kevin we needed this video last week🥺
Thanks Kelvin. Your conquering responsive layout course has helped my journey literally. I'll definitely be joining in for this series 🙌🙌🙌
Junior developers, you are not the only one who is touching their hair, face & thinking what the he** going on here LOL
These series were so much needed Kevin !!!! God Bless you !!!
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
Absolute steal that this is free. Thank you so much!
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 😄
Use mdn
Great work Kevin. I never stop learning CSS!
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.
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!
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.
A day fullfilled with Good Practices and tips is a wonderful day.
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
Seeing you coding is amazing, so much to absorb
Thank you Kevin, it's really helpful, it's not overkill it's long term thinking.
👏
I learn a lot in the introduction video itself. More such videos will be appreciated.
More of this Kevin. Very informative, and big help for learners like me on how the thought process is for creating the front-end.
By far the best tutorial i found to tNice tutorials in a short ti
Very nice as usual! I like the way you think. Looking forward to the next video:)
Thank you Kevin,can't wait for part 2.
Hey Kevin, I really like these responsive website builds!
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.
This is a really good video, it's really helpful to hear about your methodology and process instead of just the "Okay now type this," you get in other tutorials, I cant wait to build the rest of the site!
I think I'll be using the Tailwind library after this, though 😅I really see how having those built-in color and font size/weight variables saves a lot of time now.
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.
Guru ji mai bhi Bihar ke danapur se hu mera maths bahut weak tha maine aapka mypathsala app purchase kiya tha jisse mera jo growth hua wo unbelievable hai mera ek friend nit patna se padha hua hai wo bhi cgl ka tyari karta hai aur wo mujhse dishonest seller ka bola ki kaise solve karte ho to maine use samjhaya aapke tarike se aur uska achha laga to maine video bhi share kiya thanks mera maths me achhe marks ke liye
I hope to see many more of these! This video was very helpful.
thank you for providing this premium content Kevin, God bless you
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. 🤔
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 ☺️
This is what I was waiting! Let's go!
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.
Hey! Your intro is much more clear now! Nice
I’m a newbie and this would help me a lot in learning css.
you deserve to have 5 million subs
I hope you will release more video about Building website as this video. This is useful for newbie FE. Thank you Kevin
So sad I didn't get to be the first viewer. TH-cam 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?
Thanks a lot for this type of series.
Please create this type of series on SCSS.
Please! Please!
dude i hate CSS. but you make it bearable thank you SO SO much
Just sit back with a cup of coffee and enjoy some blazing css.... epic CSS king
Looking forward to watching this one 👍
So envious of being able to build an entire layout and design system from scratch without a being bogged down by a decade plus of legacy code and trying to work around systems held together by duct tape and unicorn wishes.
Great information to learn. Thank you, Kevin😊
That's ❤️ great i was waiting for this video
Awesome! Did this from Frontend Mentor just last weekend 😂
Now I'm excited to see how you do it in 45mins!!!
Took me 5 hours 😂💔
share with us. brother
Haha, just part 1, whole thing will be a lot longer than 45 minutes 😅
@@KevinPowell I noticed later on 😂
I'm done watching this one.
Staying tuned for part 2 😌
When ever i want to sharp my css skill
I come to KP ✅
Hello Kevin, as a self-learner, your videos helps me a lot.. A LOT. Thanks for doing this.
9:55 Somewhere between Vite version 2.9.9 as you installed here, to the current latest of 4.3.2, the names, and the order of the choices, changed:
**"Vanilla-ts" >> "Typescript"
**"Vanilla" >> "JavaScript"
05-02-23 2209 PT
Love the new hair cut
Let's gooooo that's what I'm thinking about😍😍😍
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...
Thanks for walking us through the css reset. Very informative!
I'm not understanding the ' :root ' stuff though...I've never seen that.
I love this! I've been looking for a tutorial just like this. Thank you!
Swiper is my go to carousel. I highly recommend it ! It is very customisable.
aw man next thing i know it's the end of the video, excited for Part 2 man.
You don't need the Windows color picker. The Figma inspector shows you all the color information you need.
Also, I loved watching Kevin discover 3 levels of the Design Token abstraction pyramid in real time!
I should really spend more time thinking of the project and planning it out before starting. I thought kevin would just go in and make this entire project in 50 min, but this was just the planning phase. Prob should do the same.
FIGMA: * 3 colors *
Kevin: *sorry man but that's gonna be 500 css variables*
😂
This is so amazing! Please more!!!
This caught my attention because of the "Be Vietnam" font. But then every other explanation in here is really valueable. And a quick note, I think the shortcut Windows + Shift + C comes from PowerToys.
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 🤣
Thank you Kevin for the amazing videos. i love those series.
Super awesome series!!!!! Thanks a lot Kevin
Thanks kevin i was really need it this time when i have to start a project
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 :)
1:39 keep in mind people, even Kevin has those problems where it looks like they are impossible to solve