Build a Responsive Sidebar in 10 minutes | HTML, CSS & JavaScript
HTML-код
- Опубликовано: 20 май 2024
- Learn how to build a simple and easy responsive animated sidebar in under 10 minutes using HTML, CSS & JavaScript!
Source code: github.com/TylerPottsDev/html...
// JOIN THE DISCORD SERVER!
/ discord
// BECOME A MEMBER TO UNLOCK MORE CONTENT!
ruclips.net/user/tylerpottsjoin
// MY GEAR FOR CODING AND RUclips
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
Screenbar Light: amzn.to/3iFRS7w
All of these products I own and have tested!
// FOLLOW ME ON TWITTER
/ tyler_potts_
// INTERESTED IN GAME DEV?
Game development channel: / muddywolf
// CHECK OUT MY GAME
play.google.com/store/apps/de...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE
// Timestamps
0:00 Intro
0:44 HTML
2:20 CSS
4:14 Responsive + Hamburger
7:44 JavaScript
8:24 Thanks for watching 
Хобби
Did you enjoy this style of video?
Yeahhhh
no
thanks brother
@@Mohamedbyd Another no here
would you recommend a wrapper around it?
Hello,
Thank you for your work, very well explained. You deserve a big compliment there.
Love it, keep up this series / content
Thanks, if you like this format I'll definitely do more like it! :D
@@TylerPotts yea I like smaller tutorials 🤭👍
Great tutorial!
Realy quick and clean!
Cool, i like the nav button animation
Thanks daily meow!
how can i make the sidebar disapear
Thank you good sir!
You're welcome, Coding Fox!
Thank you for good tips! I have a question: how to make this sidebar scrollable with a lot of menu-items? iPhone screen fits only 11 items
overflow-y
This was quick !
That was my goal! Quick but still have the required learning material!! :D
but without a position fixed if your page has too much content when you scroll your links in sidebar will be hidden
thank you
You're welcome
First time seeing an "aside" tag in action haha. What are the benefits of using this over a standard div that is styles adequately? Or does it have SEO benefits?
Haha I know, semantics are more for informational purposes, like letting user know the header, nav, footer sidebar, it allows the developer to have more structured content than just using divs, I believe that it also has accessibility purposes too for screen readers
@@TylerPotts
Good point. Can imagine screen readers relying on these to make sense of the page layout.
Thank s
Welcome
Quick and precise, thanks
Ps: theme of vscode plzzzzz!
SynthWave 84
@@TylerPotts thanks
No offense but I feel like I learned nothing from this but to copy lol
and that's how you learn. copy, weak it, improve
Same here except that even when I copied the code from github, it did not give the required results .. I did not see the hamburger
@@dev-ps9zn that is not how you learn. If you do something without knowing what you are doing then all you are doing is learning to do that one thing and you will be limited on how to do things like it
@@secretsilver8962 What you should do instead is follow along with the code, try to understand what he does and try to change small things and see what changes. Look up the elements/ actions you dont understand. Then try to do it all by yourself once you think you understand it. This way it will be engraved into your brain
@@aza7866 the point of “how to” in code is to explain to you how to make something. If f I wanted to know how to make a responsive sidebar I’d just look up the code online. People look at RUclips videos to learn how to make something not to copy and paste