Can I make this animated navigation design with HTML & CSS?
HTML-код
- Опубликовано: 23 фев 2022
- This was harder than I expected it to be 😅
✅ The design on Dribble: dribbble.com/shots/2980874-Sl...
✅ tubik's Dribbble profile: dribbble.com/Tubik
✅ My Twitch channel: / kevinpowellcss
✅ The GitHub repo: github.com/kevin-powell/dribb...
#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 RUclips 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!
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.
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
Thanks Kevin! Love the unedited versions! Best way to learn.
Great video, it’s so cool to see how you take on these challenges and what your thought process is!
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.
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
Yes!! This type of content that you, coder coder and others do is the most helpful content to learners! :)
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
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!❤❤❤
i really emjoy these long videos, keep up the great work!
Kevin you are just incredible, I am using so many of your incredible tutorials in my classes, THANK YOU! You are a lifesaver!
Damn i am becoming your huge fan with each passing day...All your video are so so informative.
Thanks Kevin
Great to see another awesome 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!
Bro can you make a full course includes every important thing in css html JavaScript for FRONT END WEB DEVELOPERS.
thx a lot Kevin its amazing work you do keep it up that way
I like this kind of videos it shows us how are pro developer think and how they solve problems , Thank you Kevin :)
Thank you Kevin..you are just amazing!
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 ❤❤❤
Thanks always for the great content.
This was so great!
great quality content. thank you.
I love your videos Kevin!
EvanWebDev on the chat is so annoying 😂😂
The Master of css illuminates us once again =)
Constantly amazed by the challenges this dude finds for himself.
🤟👍🤟🥳
Lovely Kevin!
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
thank you sir!🥰
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. 😊
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 🤣
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...?
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.
I'm sure to 100% 😄you can make everything with html and css 👏🏻
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
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?
loved it
Fhank you Kevin
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 🤣
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
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?
5:30 what extension is he using to nest elements with the shortcut syntax?
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 👍
how can i get such scrolling effect as it is in this dribble project?
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.
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?
Hello @kavin and all , can we highlights Google maps are with zip code help of JS?
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?
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 =)
We need a KP unit so you don't have to declare variables for your sizes ;).
alt+0151 for em dash and alt+015 for en dash :)
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.
Just started watching.... Just letting you know, if there's no smooshing involved I'm not going to be impressed!
🤣🤣
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
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.
First Comment 😍
Use webflow instead …it’s way fast and no code platform
I'd love to see this built with Webflow!
"Can I make this animated navigation design with HTML & CSS?".
> Uses Javascript.
> mfw
The cynical server microscopically drip because judo originally strengthen into a lavish mosque. aromatic, aware william
🤔
some bot comments haha
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.
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?