🪄Magic Navigation Menu Indicator | Html CSS Javascript

Create a 🪄 Magic Navigation Menu Indicator using just Html CSS Javascript, step-by-step from scratch.
______________________________________________________________
🌱💜Support our channel from as little as $1-3 by becoming a Patreon because by doing that, you will help our Channel and also you will have access to 🖥️ Source Code of our videos!
______________________________________________________________
⏱️Chapters:
00:00:00 = Intro to our Project
00:00:52 = Creating the Boilerplate
00:01:46 = HTML - Create NAV, UL and LIs and 2 spans using EMMET
00:03:35 = HTML - Adding Text and Icons
00:04:50 = CSS - Importing Fonts | css Reset | and why we need it
00:05:57 = css - Creating variables and apply css to the body
00:06:40 = CSS - Setting Rules to the NAV
00:08:18 = CSS - Applying Size and Layout to the Nav UL
00:08:30 = CSS - Applying Rules to our Lists
00:09:01 = CSS - Positioning and Applying Layout to Anchor tags
00:09:53 = CSS - Positioning the Sizing the Icons
00:10:54 = CSS - Applying Hover Effects to Icons and Text
00:13:07 = CSS - Making Adjust on Markup
00:13:43 = CSS - Making Adjust on Markup
00:14:06 = CSS - Indicator Element giving it Color, Size & Position
00:16:48 = JavaScript - Getting List Reference to the DOM, Create Function and run it triggered by
00:18:54 = CSS - Creating Animation li Actives & Indicator
______________________________________________________________
📚Resources
______________________________________________________________
🏆Recommended Videos🏆

🎬Login & Registration Form Using HTML & CSS & JS✨

🎬Neumorphism Login Form | HTML & CSS✨

🎬CSS Text Typing Animation | HTML & CSS✨

🎬Top 10 CSS & JavaScript Projects✨

🎬Build a Step Progress Bar | JavaScript✨
______________________________________________________________
🛴 Follow me on:
______________________________________________________________
🎵Background Music for Videos:

Music from Uppbeat (free for Creators!):
License code: QYJLBIQRS1691ECL
______________________________________________________________
📨 Business Inquiries: such as Sponsor or Collab.

[DevMadeEasy]

If you find this video helpful, give it a like👍🏻 as this would help it reach even more people!
Also, subscribe if you haven't !
Thank you! 🙏

[lucas-sqjs]

Freaking amazing dude . New subscriber keep up the great work

[theBATfamiliar]

I just dropped a like, and I will check on this at night, thanks a lot

[hafn]

Help me. When I added my href to a, the green circle move but without animation.
I dont know how to repair that.

[kalynndier]

this all seems to work really well until it's time to add the links to the appropriate pages. Whether using an <a href> or <Link to>, it takes 2-3 clicks on the icon before the navigation will scroll to the appropriate icon, even though the appropriate page appears. I believe it's because they all have the same class name so it's going to home first, every time. I tested this with console logs. If I put a console log on the home button but click the message button (for example) it still console logs "home." I've tried deleting the <a href> and just using <Link to> but that doesn't fix it either. Any suggestions? If this can't be resolved, the wonderful navigation bar is useless.

[icccricket]

Sir problem

list.forEach is not a function

[saidkamol]

it would be good if you write in android studio