Complex, unedited videos are THE BEST in my humble opinion. I want to see what the process actually looks like when performed by a skilled professional.
i highly support repeating this kind of tutorials. Benefiting from your experience through sharing your thinking-mentality while creating any project is priceless.
2 months ago. I started studying HTML, CSS and JavaScript. I started with FreeCodeCamp and got my first certificate. When I was working on those projects and it didn't work, I felt like giving up. Now seeing this video. I realized that professionals also face this problem. You have no idea how much you have helped me with this video and I thank you from the bottom of my heart and I am grateful that I discovered you. You are awesome! Thank you, Kevin!❤❤❤
Hey Kevin! ER doctor here, been learning the basics of coding over the last 5 weeks, and now in deep dive CSS and JS courses. I went from thinking HTML is part of the URL you enter, to now doing basic stuff in HTML and CSS as a reflex! All this started with me wanting to build a medical app, and I figured Id just do it myself. Anyway, just came across this and I see I have a ton to learn from you and others so Im happy to sub! PS JS is kicking my bumbum haha!
You really are a genius. Sometimes your thought process jumps about, but that is what makes you Kevin. I really enjoyed this video, if I didn't understand it all. Thanks
@@KevinPowell learning can be shared through video 😜 would love to see you tackle something you feel overwhelmed with. Much like what we all do sometimes with projects or work
not necessarily it has to be threejs, there are other things as well like scroll animations, svg animations, page transitions, horizontal scrolling and many more! it's just a suggestion thanks!
@@KevinPowell even watching you going through creative websites and talking about how a rough idea of how you would maybe approach them would be something id like to see
I think this was way over complicated than it should be. It's a lot simpler than illustrated. It's not easy for a beginner to follow a long. Thanks for uploading. It's a fantastic video.
I have to say I've been really enjoying your channel since I've subscribed. As someone who is looking to become a front-end web developer, your channel definitely keeps me motivated.
I haven't seen the lesson yet, but I'm sure it will be filled with a lot of information. I'll see it and go to sleep until my brain can absorb this amount WOW ❤❤❤ YOU DESERVE TO BE THE MASTER SIR ❤❤❤
Hint: if you follow this excellent video while using SASS and Live Sass Compiler by Ritwick Dey in VSC, you may run into trouble (as I did) when you set the height for the body element as "height: calc(100vh - ($body__padding * 2))". The Sass Compiler by Ritwick Dey has issues translating the embedded custom properties into CSS. Just switch to Live Sass Compiler by Glenn Marks and this particular problem will be no more.
Can you make more videos of implementing the designs on dribbble. It would be really great to learn from you on your approachs to tackle those complex designs
May be you can create project again in better way (as you are saying in this video) in a new video, so we can learn way more things. BTW love your work and learned all my CSS from your videos
Hi Kevin, thanks for this great video! Really enjoying learning from you. Can you or anybody tell me what Kevin is using at 8:53? I get something else for Windows + Shift + C? (Z?). Is that colour picker vscode extension or...?
Color picker is not working in VS Code new update... I 've role-backed to previous version. There it's working fine. The emmet is also malfunctioning in the new version.
That black thing... can it be fixed by using svg or css filter instead of mix-blend? The transition just doesn’t seem as clean as the prototype and I was wondering if you noticed or bothered to tweak it any more?
I have some stuff planned for more Sass + PostCSS stuff in the not too distant future :) - and I have an OpenProps + PostCSS coming in a few weeks too 👍
Great work Kevin, thanks a lot ❤️ I run the code on firefox and once I click on "menu" the animation is fine but in google chrome the animation is slow so why that happened?
It was a good video tutorial but can't help think that he made it more complicated than it needed to be. Should have built the video section first then start the main navigation menu section after.
You should create a flag variable that you set on click event listener and use that flag to determine what todo. Trying to add a data attribute and change it is easy but more redundant to update the dom with a new attribute value.
Awesome stuff but watching these long videos is painful. It's far too long and I don't get much by seeing the process play out. At the end of the day you are going to make mistakes regardless. And a smaller video with the essentials is much easier to retain than a video with 10 mistakes and solutions to all of them. You can't file away all that in your mind - far too many details. It actually gets worse. Because you are live coding there's huge pressure which means you make sub optimal decisions and write code that isn't the best that you could write without such pressure. Now, people get bad advice because they think that's what they should also emulate.
I don't feel any pressure when I'm live coding at all, I've been doing it weekly for a few years now and it's a lot of fun :D. I make mistakes because I think we all make mistakes when working on something we don't really know how to do, and trying for the first time, and my goal with videos like this is to highlight that, and the thinking, more than "here is how to accomplish X". I know a lot of people like seeing this side (based on feedback), and realizing that no one really just makes things perfectly the first time, which a lot of tutorials can give the impression of. I also think I was pretty upfront from the beginning of the video, as well as throughout the video, that my solution wasn't perfect, and I didn't want to give that impression at all! I do agree that shorter, more polished videos are better for learning how to accomplish a specific things, and those won't be going anywhere either :)
@@KevinPowell I really enjoy watching and listening I guess to your problem solving skills and actually your process in how you go about tackling a challenge is really insightful. If I want to learn how to program I’ll watch these type of videos. If I want to learn how to code I’ll watch the smaller tutorials. Thanks for your hard work man
Anyone manage to find the actual website to see how this was built in production? “Slopes” is waaay too generic to be googleable, even with a few phrases from the visible text.
Complex, unedited videos are THE BEST in my humble opinion. I want to see what the process actually looks like when performed by a skilled professional.
Please, please many more of these!!
@@PerryCodes yess
i highly support repeating this kind of tutorials. Benefiting from your experience through sharing your thinking-mentality while creating any project is priceless.
2 months ago. I started studying HTML, CSS and JavaScript. I started with FreeCodeCamp and got my first certificate. When I was working on those projects and it didn't work, I felt like giving up. Now seeing this video. I realized that professionals also face this problem. You have no idea how much you have helped me with this video and I thank you from the bottom of my heart and I am grateful that I discovered you. You are awesome! Thank you, Kevin!❤❤❤
Hey Kevin! ER doctor here, been learning the basics of coding over the last 5 weeks, and now in deep dive CSS and JS courses. I went from thinking HTML is part of the URL you enter, to now doing basic stuff in HTML and CSS as a reflex! All this started with me wanting to build a medical app, and I figured Id just do it myself. Anyway, just came across this and I see I have a ton to learn from you and others so Im happy to sub! PS JS is kicking my bumbum haha!
For an app, you want React-native
Yes!! This type of content that you, coder coder and others do is the most helpful content to learners! :)
Thanks Kevin! Love the unedited versions! Best way to learn.
You really are a genius. Sometimes your thought process jumps about, but that is what makes you Kevin. I really enjoyed this video, if I didn't understand it all. Thanks
this is amazing Kevin!!! It would be really great if you could start creative web development series on youtube, like deconstruct awwwards websites!!
The problem with a lot of those is they usually use things like three.js and other crazy stuff with that just leaves me clueless, lol.
@@KevinPowell learning can be shared through video 😜 would love to see you tackle something you feel overwhelmed with. Much like what we all do sometimes with projects or work
Let's learn three js together
not necessarily it has to be threejs, there are other things as well like scroll animations, svg animations, page transitions, horizontal scrolling and many more! it's just a suggestion thanks!
@@KevinPowell even watching you going through creative websites and talking about how a rough idea of how you would maybe approach them would be something id like to see
More like this!! Super helpful to see the way you go about things
I think this was way over complicated than it should be. It's a lot simpler than illustrated. It's not easy for a beginner to follow a long. Thanks for uploading. It's a fantastic video.
I have to say I've been really enjoying your channel since I've subscribed. As someone who is looking to become a front-end web developer, your channel definitely keeps me motivated.
Awesome, so glad that you're enjoying my content!
Great video, it’s so cool to see how you take on these challenges and what your thought process is!
i really emjoy these long videos, keep up the great work!
I haven't seen the lesson yet, but I'm sure it will be filled with a lot of information. I'll see it and go to sleep until my brain can absorb this amount WOW ❤❤❤
YOU DESERVE TO BE THE MASTER SIR ❤❤❤
Damn i am becoming your huge fan with each passing day...All your video are so so informative.
Thanks Kevin
I like this kind of videos it shows us how are pro developer think and how they solve problems , Thank you Kevin :)
Kevin you are just incredible, I am using so many of your incredible tutorials in my classes, THANK YOU! You are a lifesaver!
Bro can you make a full course includes every important thing in css html JavaScript for FRONT END WEB DEVELOPERS.
I was today years old when I realized he was saying "hello front end friends" not "hello friend and friends"
Seems to be a *very* common thing, so I'm trying a lot to slow it down, lol.
@@KevinPowell it did seem like you were enunciating rather aggressively lately 🤣
Hint: if you follow this excellent video while using SASS and Live Sass Compiler by Ritwick Dey in VSC, you may run into trouble (as I did) when you set the height for the body element as "height: calc(100vh - ($body__padding * 2))". The Sass Compiler by Ritwick Dey has issues translating the embedded custom properties into CSS. Just switch to Live Sass Compiler by Glenn Marks and this particular problem will be no more.
Great to see another awesome video
The Master of css illuminates us once again =)
thx a lot Kevin its amazing work you do keep it up that way
Can you make more videos of implementing the designs on dribbble. It would be really great to learn from you on your approachs to tackle those complex designs
That's just a gif
Great challenge! I'm going to try it too. I will definitely do it live on my Twitch channel. Maybe without javascript :)?
Oh, awesome. You'll probably do better than I did 🤣
I'm sure to 100% 😄you can make everything with html and css 👏🏻
i thought its goin to be smooth and easy to him. Now i know his just a being like us 😁, looking forward with this kind of content. 😊
EvanWebDev on the chat is so annoying 😂😂
This was so great!
I really like using backdrop-filter: blur() along with opacity to create a 'frosted glass' effect. Not sure how well it's supported though.
It's a lot better now, I think it's only FF where it isn't supported, so having a fallback is a good idea still
Constantly amazed by the challenges this dude finds for himself.
🤟👍🤟🥳
Lovely Kevin!
thank you sir!🥰
May be you can create project again in better way (as you are saying in this video) in a new video, so we can learn way more things. BTW love your work and learned all my CSS from your videos
Thanks always for the great content.
I love your videos Kevin!
great quality content. thank you.
We need a KP unit so you don't have to declare variables for your sizes ;).
Hi Kevin, thanks for this great video! Really enjoying learning from you.
Can you or anybody tell me what Kevin is using at 8:53? I get something else for Windows + Shift + C? (Z?). Is that colour picker vscode extension or...?
Fhank you Kevin
Nice sweater! I live near Owl's Head
Nice! I've skied there basically my entire life 👍
@@KevinPowell Where you from? Vermont or Québec?
Color picker is not working in VS Code new update... I 've role-backed to previous version. There it's working fine. The emmet is also malfunctioning in the new version.
That black thing... can it be fixed by using svg or css filter instead of mix-blend? The transition just doesn’t seem as clean as the prototype and I was wondering if you noticed or bothered to tweak it any more?
Will You make more videos of these kind, but with sass, postCss, openProps etc. (instead of plain css)?
I have some stuff planned for more Sass + PostCSS stuff in the not too distant future :) - and I have an OpenProps + PostCSS coming in a few weeks too 👍
loved it
Great work Kevin, thanks a lot ❤️
I run the code on firefox and once I click on "menu" the animation is fine
but in google chrome the animation is slow
so why that happened?
It was a good video tutorial but can't help think that he made it more complicated than it needed to be. Should have built the video section first then start the main navigation menu section after.
Just started watching.... Just letting you know, if there's no smooshing involved I'm not going to be impressed!
🤣🤣
Hello @kavin and all , can we highlights Google maps are with zip code help of JS?
40.30 Can anybody tell me what Kevin did at this timestamp to add the .stack class ? How do you call that input bar for class insertion?
how can i get such scrolling effect as it is in this dribble project?
5:30 what extension is he using to nest elements with the shortcut syntax?
alt+0151 for em dash and alt+015 for en dash :)
What extension are you using to get all the colors of the website?
It's PowerToys for Windows, which comes with a great color picker thingy :)
@@KevinPowell Thanks for your quick answer =)
I like challenges , I saw a website so I challenged with my self making a Nas academy crypto website almost 80% I created the website
"Can I make this animated navigation design with HTML & CSS?".
> Uses Javascript.
> mfw
Use webflow instead …it’s way fast and no code platform
I'd love to see this built with Webflow!
You should create a flag variable that you set on click event listener and use that flag to determine what todo. Trying to add a data attribute and change it is easy but more redundant to update the dom with a new attribute value.
First Comment 😍
Designed in Ukraine.
Guess that's kind of appropriate with what's going on atm. I really hope things somehow calm down a little, really sad & scary what's happening.
The cynical server microscopically drip because judo originally strengthen into a lavish mosque. aromatic, aware william
🤔
some bot comments haha
Awesome stuff but watching these long videos is painful. It's far too long and I don't get much by seeing the process play out.
At the end of the day you are going to make mistakes regardless. And a smaller video with the essentials is much easier to retain than a video with 10 mistakes and solutions to all of them. You can't file away all that in your mind - far too many details.
It actually gets worse. Because you are live coding there's huge pressure which means you make sub optimal decisions and write code that isn't the best that you could write without such pressure. Now, people get bad advice because they think that's what they should also emulate.
I don't feel any pressure when I'm live coding at all, I've been doing it weekly for a few years now and it's a lot of fun :D.
I make mistakes because I think we all make mistakes when working on something we don't really know how to do, and trying for the first time, and my goal with videos like this is to highlight that, and the thinking, more than "here is how to accomplish X". I know a lot of people like seeing this side (based on feedback), and realizing that no one really just makes things perfectly the first time, which a lot of tutorials can give the impression of. I also think I was pretty upfront from the beginning of the video, as well as throughout the video, that my solution wasn't perfect, and I didn't want to give that impression at all!
I do agree that shorter, more polished videos are better for learning how to accomplish a specific things, and those won't be going anywhere either :)
@@KevinPowell hard to watch 2 hour videos mate. That's the thing. Far too long.
But don't get me wrong. Content is excellent.
@@KevinPowell I really enjoy watching and listening I guess to your problem solving skills and actually your process in how you go about tackling a challenge is really insightful.
If I want to learn how to program I’ll watch these type of videos. If I want to learn how to code I’ll watch the smaller tutorials.
Thanks for your hard work man
Anyone manage to find the actual website to see how this was built in production? “Slopes” is waaay too generic to be googleable, even with a few phrases from the visible text.
It's not an actual site anywhere, it's just a design on Dribbble
why do you use aria , why you don't just use just:
if (navbar.style.transform == "VALUE WHEN OPENED")
{
OPEN IT
}
else{
CLOSE IT
}
menuToggle.toggleAttribute("arrai-expebanded", true), I assume this is the JS function you were looking for?