Can I Create This Tricky Animated CSS Sidebar?
HTML-код
- Опубликовано: 16 май 2024
- Sidebars are an integral part of web development and can get pretty complicated. The RUclips sidebar is a perfect example of a complex yet elegant sidebar and in this video I will be attempting to create RUclips sidebar live for the first time.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/y...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:30 - Setup
01:34 - HTML
03:55 - Header CSS
09:44 - Sidebar CSS
45:32 - Sidebar JavaScript
46:50 - Sidebar Animation
#CSSAnimation #WDS #CSS
Kyle: Can I Code This Tricky Sidebar?
Me: * checks video length *
Me: Yea, probably.
🤣
Pro tip: you can slow down the animations in the Chrome devtools to really see in detail what kind of animations are being applied to the elements.
Excellent - I'd try to avoid width/height for transitions - that'll trigger repaints. Scale/Translate = better.
Yes, translate is way better. Performance is very good. Avoiding top, left, right, bottom and hwight width is recomandwd
I agree, but what would you do to prevent things from squeezing when using "scale"?
True. But another approach is to only optimise if the performance is bad because it will add complexity as well. Here there aren't many components and the animation seems fluid.
@@elieanimations you are right
@@elieanimations While I agree premature optimizations are bad. I think it would be important to explain and show why it's bad. For example, somebody taking the code from this video, without thinking about the ramifications when they have a lot of content in the body, might incorrectly assume this is the way to do it.
Thank you for your vids, I'm only a month new in HTML CSS and JS, and your vids helped me a LOT in understanding the concepts when applying it. Thank u so much!
Was great to see you figuring out solutions on the run. really learned a lot, great video
I liked more when you try something you have not done before . So we all see how to handle , fix or walk around errors, issues. Thanks
Love it. I am learning so much just watching how you work and think. I appreciate it.
I just got into computer science and am currently learning python, however, I stumbled upon this video and it was so interesting I couldn't believe how entertaining you and watching you code is. This video rocks, thanks!
Amazing.
Found something really interesting in free time ☺️
3 minutes into the video and I'm blown away man. This is going to help so much with work. Thanks, this info is so valuable
Are you a front end developer?
@@Wanderer2035 yes
I was searching for this since 1 year. None of them were perfect.
Now its perfect.
Thank You Sir.
For box-shadows, using multiple, layered shadows usually results in a more natural gradient, adding additional realism to the effect.
This! They can be a bit of a headache to understand at first but the result is simply stunning
Can you share an example please?
Absolutely love the new format. Thanks for keeping the errors and troubleshooting in.
You make me think I can actually get a job. Seeing you struggle there for a good hour really gave me confidence that other people need time as well.
Very clean explanations and excellent content/tempo ratio...thanks for sharing.
i like how you run into problems, struggle in inspecting your own code as if someone else has written it and then solve the issue. feel it!
Unfortunately that's CSS programming in a nut shell lol. I really hate the language, but no one realized at the time of its creation, that websites would become the new software applications...
@@Aedaeum just letting you know that css and html arent a programming language
@@JeloOW Actually a very hotly debated topic that is not settled one way or another. If you're a purist, you believe a programming language must be Turing complete, however I'm in the other camp. I believe if you are writing instructions that create a unique behavior through their interpretation, then you have successfully programmed something and I would call those instructions a programming language.
Its nice & amazing to see how you code all this
Well, as pointed already, I would use scale/translate for transitions. Also you forgot about the opened dashboard overlapping the content, and adding a dark filter to the main content.
You gained my "like" at the calc property. Good show sir, good show indeed!🧐
Need more videos like this
Love u, good work. U r very helpful thank u
I really like these videos! Please make more :)
30,000 subscribers in the last 28 days? Damn, you're killing it! Great job.
Thanks. This last month has been by far the best ever for my channel.
@@WebDevSimplified Rightfully so
Hi! I really enjoy your videos, thanks!
Thank you !
Very powerful video, so much technics in just one example!
The one thing you need to work on and what is it your playlist please organize your playlist when someone looking for a beginner to advanced JavaScript course your playlist is mashed up we all love your content and your design so consider this bro Love from Pakistan 🚀
This is just awesome, can you also create this over react please
It would be awesome if you make a video doing a functional multilanguage system with just html and js
Awesome.... :) Thank you
Excellent
Excellent video and topic! Could you please make a video on LottieFiles and how to integrate them in a website? Perhaps a loading animation or something… thanks 🙏🏻
great job
Awesome 👍
Thank you so much Kyle! I have one question: how can I make the sidebar stay open when moving to a new page like content.html (for example)?
Is there a reason why you don't use SCSS? I find it easier when nesting for different components. Also have you thought about JS hooks opposed to data attributes?
One thing I noticed is the positioning of text on RUclips is not actually moving but just appearing when it's open. But overall, great CSS!
Nice!
I was waiting for customized scrollbar as youtube, seems like you kinda missed it. Otherwise great video!
So good
Awesome
At the 6:00 point in the video, Kyle wraps the SVG element in a button, to "make it more accessible"... what exactly is meant by this?
Can the SVG element itself not be made to have the similar functionality of a button that may be later required?
I am not challenging or doubting this method/approach... I am just wondering what exactly is meant by "accessible" in this case.
Thank you. Great content!
Great video, Kyle! Sometimes you sound like I'm watching at 1,25x speed
box-shadow for me especially with light background colors like white is something like 0 2px 3px rgba(0,0,0,0.2)
Hey Kyle! Could you please make a video or project about React Native ? It would help so much
The king showing us his channel dashboard.
Great
I can't believe that you've spent an hour perfectly replicating the style and animation of that sidebar but you didn't spend the second it would've taken you to add "font-family: sans-serif" 💀
yes
This video is a classic example of the divide between what developers **think** looks the same, and what actually looks the same. 😂
can you please make a Custom Js framework like React JS from scratch
What VSC plugins are used here? Please and thanks.
If u add the scroll bar and change the font ll looks like same
anyone know why when I use a class for the li's, it wont change the color of the svg? Mine only seems to work if I put the fill in the a tags class.
why did you use * as well as *::after and *::before? doesn't * apply to those elements as well?
How to use swipe gestur in this sidebar?
Now I'm gonna try recreate this in Oxygen Builder :)
hey Kyle Please make a video on reducing bundle size of React app in production. please.
Try implementing lazy loading in ur react app
Its cool. Now, how to make it work, when you click on the sidebar link, render the content into the main area, without reloading the whole page? Do you use jquery, httprequest, or must to use a framework like react, vue ? Can you contiue this example with the rest of the functionality?
So you could theoretically have multiple sections in the "content" container. Set them to display:none.
And then in JS set an "active" like class on the section corresponding to the clicked button.
Not the best way, as I would probably just reach for a framework if that was the case
There are a million different ways to solve this.
@@d.sherman8563 I already know that. But would like to see than view solutions..
Can you create one project using mongodb, node js and javascript. It would be great if you create one ecommerce site
can you make videos of learning JavaScript from scratch to pro
Love you from algeria
❤️❤️
Lets go...
Always keep your errors in so much better.
He is a good programmer.
Yeah, he is a good programmer
Can I use your sidebar as an inspiration for a react sidebar-component?
why did u use position sticky on sidebar? why not fixed. is there any difference?
Can anybody please share their journey about how you started creating websites without much help like without watching tutorials that takes you from A-Z? Like ofcourse while using resources like Google and stack overflow and using RUclips tutorials to understand basic topics but creating things on your own.
You: *uses inspect element to get the svgs and colors and play around with the box shadow*
Also you: *doesn't use inspect element to copy the box shadow to save time*
I kid of course
well i just learned about lorem in vs code
Yeah debugging videos are great because people can see the process.
"And that's all it took to create RUclips sidebar..."
It took literally 1 hour to replicate it.
El Niño?
Jordi?
778,822 SUBSCRIBERS BTW
First view from Hyderabad (India)
First view from india
Like the Bob Ross of the next generation...
A tutorial video made for people that dont need tutorials videos. Xd
Slick move editing the DOM to change the revenue number to "????". Or does RUclips make all content creators wonder what this number is? 🤔
It's the DOM
any chance this video can be shorter?
I’m so triggered that you didn’t change the font.
If you had used Sass/Less or at least use some naming convention like BEM you could have achieved the same result in half the time.
CSS is easy but annoying for me to do idk why.
First
Please share css of your hair.
.hair{
display:flex;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(45deg, brown, wheat);
transform: skewY(2.5deg);
}
npm i --save @kyle-hair
Best theme for Vscode?
Material theme 👌🏻
Cyberpunk theme
Retro themes
Namerlp
CSS is difficult
no not really
Close the damn sidebar of vscode jeez
Beautiful, but not responsive. :-)
I'm new to web dev and I wanted to ask what about JS for this? but I think this sum up the answer 😃
@@starwaveprime7398 The JS part only trigger the button and add css-class to sidebar. It's the easiest way for it.
@@alex01at
Actually all of this could be recreated with just html +Css really simply without Javascript.
Wouldn't make a tonne of sense since this is theoretically the sidebar for a SPA but still easy and possible