Animated Responsive Navbar Tutorial

Поделиться
HTML-код
  • Опубликовано: 2 фев 2025

Комментарии • 768

  • @craigjohnson8279
    @craigjohnson8279 5 лет назад +556

    I love that you use HTML, CSS and JavaScript. NO jQuery nor Bootstrap. You explain everything in a easy to understand way. Thanks for sharing the knowledge! :)

    • @leg3ndtariq
      @leg3ndtariq 5 лет назад +10

      Bootstrap & jquery is built in many lines of code... So why use them when we can simply write 30 line of code do our work...

    • @cerealrakist7360
      @cerealrakist7360 4 года назад

      Pi can you write out an example that’s easy to understand?

    • @vilwenVivekking
      @vilwenVivekking 4 года назад

      i need to know make this nav bar fixed

    • @cerealrakist7360
      @cerealrakist7360 4 года назад

      vivek patiz / position:fixed;

    • @LifewithEluededieu_
      @LifewithEluededieu_ 4 года назад +1

      yeah every time i need help with all three programming languages i go to him he is my favorite coding youtuber he explain very good

  • @georgesmith3022
    @georgesmith3022 5 лет назад +390

    your biggest strength is the positive energy you radiate. keep it up dude

    • @finfluence3873
      @finfluence3873 5 лет назад +2

      George Smith preach

    • @claudiusuwal
      @claudiusuwal 4 года назад +2

      oOo GOOD COMMENT oOo

    • @kfp87
      @kfp87 4 года назад

      exactly what i as going to comment haha

    • @CrimsonShadow304
      @CrimsonShadow304 4 года назад +3

      So his nucleus is not stable

    • @pathshala-mb7yz
      @pathshala-mb7yz 3 года назад

      navbar does not close on click , help ‼️

  • @liamsalinova976
    @liamsalinova976 5 лет назад +6

    Please never stop making videos, cause I really enjoy watching them. So clear, a bit of entertainment here and there, I learn way more stuff watching your videos than what I learn at my college. Please, keep on going making these quality content videos, you're amazing!

  • @nith.p
    @nith.p 5 лет назад +74

    I love that how he write codes and laugh all the time.

    • @pathshala-mb7yz
      @pathshala-mb7yz 3 года назад

      navbar does not close on click , help ‼️

    • @GamingTSH
      @GamingTSH 3 года назад +1

      🙋💞👉ruclips.net/video/HI9ZI8ymxsA/видео.html👈 This is so Good too ...FOR HTML CSS EFFECTS.. Please Check

  • @bikashsaud9026
    @bikashsaud9026 4 года назад +16

    he is my favorite code, the way to teach and his expressions.

  • @polardroid1667
    @polardroid1667 4 года назад +7

    Damn this guy has gotten so good. I've started watching his videos from the time he created his channel and he's gotten so good with making them. This is the number one channel for me when it comes to web development and I'd *totally* recommend it to anyone out there who is struggling with web development. 👍

  • @Nikita-iv4jp
    @Nikita-iv4jp 5 лет назад +7

    You have a great charisma, i love watching your videos. Not only they are giving me motivation, but also making my mood for the rest of the day

    • @janek1822
      @janek1822 5 лет назад +1

      Ikr feel the same

    • @Nikita-iv4jp
      @Nikita-iv4jp 5 лет назад

      @@janek1822 Yestarday I learned sooo much within a day because of him. Glad that I'm not the only one)

  • @King-Gilamashur2758
    @King-Gilamashur2758 4 года назад +5

    Man I love this stuff. I can't do stuff like this on my own yet but it makes me motivated to keep learning so one day I can. When you're studying the boring basics you need to be able to visualize to what end you're learning all of it and to me this is creativity is what I wish to achieve.

  • @MistaT44
    @MistaT44 5 лет назад +7

    RUclips recommended me this channel a couple days ago and it has become my favorite already. Cheers!

  • @b.o.r.o
    @b.o.r.o 4 года назад +1

    Keep up the good work dev dude, we need more people like u.

  • @tacva2607
    @tacva2607 3 года назад

    I love that you use only html/css/ and Javascript. No libraries. You are legend. Thanks for everyhting

  • @Colstonewall
    @Colstonewall 5 лет назад

    Your analogy/example of clip-path was excellent. Simple, but got the point across perfectly.

  • @suyashdhumal3
    @suyashdhumal3 4 года назад

    This is so informative. I have never seen a youtuber explaining in this much detail and that tooo in a fun way. Hands off you are the best.
    You got a sub!

  • @caapja
    @caapja 5 лет назад +12

    You’re so charming and creative, man! Really cool content.

  • @whatamidoing1811
    @whatamidoing1811 5 лет назад +2

    You are the most amazing programmer I have ever seen in my life. Please tell me I'm not the only one who thinks this...

  • @alextheblockchaindev
    @alextheblockchaindev 5 лет назад +5

    That expansion effect is so cool! Thanks for sharing!

  • @santiagomorelle6816
    @santiagomorelle6816 4 года назад

    Just amazing! It's hard to find people like you these days. It seems that you're showing your true personality and that you really like this.

  • @shishirsharma8193
    @shishirsharma8193 5 лет назад

    I like the way you teach with joy and smile on your face.

  • @diegorocha2186
    @diegorocha2186 5 лет назад +10

    You're amazing man, I love your tutorials!!!

  • @sashakalin
    @sashakalin 4 года назад

    From Russia with love.Your submission of material is so light and needly.Thanks

  • @PradeepYadav-ky1bn
    @PradeepYadav-ky1bn 5 лет назад

    Awesome video brother. And the ease and with that smiling face with which u explain the code is really appreciatable

  • @santhoshkashyap9405
    @santhoshkashyap9405 5 лет назад +16

    Most underrated developer channel on RUclips ♥️

  • @ripplesr5655
    @ripplesr5655 3 года назад

    Dude, you have been a biggest inspiration until now. Thanks for these playful mini tutorials. Hope you are doing fine my man!

  • @ujwalc9226
    @ujwalc9226 5 лет назад

    1)I typed navbar to search
    2)saw some awesome animation on thumbnail- clicked on
    3) saw you at the starting of the
    4)liked it- know I will enjoy the enjoy the vedio💕

  • @BeingDane
    @BeingDane 3 года назад

    You are a natural in explaining CSS tricks

  • @joshuamaliwat9532
    @joshuamaliwat9532 5 лет назад

    I always watch this video because its so easy to follow and for me I learned a lot from this. If I forgot something while making a navbar I just search for this. And I think I can do it now. Thanks Dev Ed!!! I appreciate your videos!!! helps me a lot

  • @chetankankani9880
    @chetankankani9880 3 года назад

    Really encouraging.please post these type of content regularly

  • @ettorecar9317
    @ettorecar9317 Год назад

    Hi Ed, i just did my first animated responsive navbar. Your tutorial helped me out so well. Thank you

  • @zualahmed197
    @zualahmed197 3 года назад

    Hello brother.. you are the only programming youtuber i have ever seen over internet with such an amazing sense you humor..you videos kindaa like comedy part along with cool programming skills...i enjoy watching your video....

  • @yamelamadorfdez5382
    @yamelamadorfdez5382 5 лет назад

    Thats a decent, fun and instructive HTML/CSS/JS tut without any framework, "A capella" lets say. Good job.

  • @deepeshdhakal7476
    @deepeshdhakal7476 4 года назад +1

    hey man really like the tutorial as well as your presentation that makes it even more interesting. Always keep smiling x

  • @tx_m
    @tx_m 5 лет назад +2

    Hey Ed, I never comment on RUclips posts, but to be honest, I think you are awesome. I practice most of these stuff. Thank you for making it easy my friend .. :)

    • @vinayak1487
      @vinayak1487 5 лет назад

      can we use a div at the place of svg hamburger

  • @ulisesa.chavez9526
    @ulisesa.chavez9526 4 года назад +1

    No hablo ingles, pero mirando el codigo pude entender, y te admiro por lo pasivo que eres al explicar tu contenido. Saludos.

  • @moalysss
    @moalysss 4 года назад

    Sometimes coding can get a bit tiring, but you always keep me inspired to keep it up. Nice work man!

  • @hyeobbbbyu
    @hyeobbbbyu 5 лет назад +3

    This is the best lecture I've ever seen on the RUclips.

  • @seydaozdemir
    @seydaozdemir 4 года назад

    It's the first time i watch JavaScript and CSS together and i like it.

  • @DoheSeGyaan
    @DoheSeGyaan 5 лет назад +21

    superb!

    • @hammavaqttv2273
      @hammavaqttv2273 4 года назад

      ruclips.net/video/vh7obWOC3jY/видео.html

    • @pathshala-mb7yz
      @pathshala-mb7yz 3 года назад

      navbar does not close on click , help ‼️

  • @albertofreddo7845
    @albertofreddo7845 5 лет назад +2

    Thank you so much! I'm using this navbar for my future projects, you're awesome! I'd like to have such a great knowledge of coding, especially Javascript

    • @americanconstitutionparty2339
      @americanconstitutionparty2339 4 года назад

      do not copy learn concept I bit u if someone change few codes u be lost in ocean try it body LEARN CONCEPT IF NOT U NEVER GOING TO BE ????

  • @kris10an64
    @kris10an64 5 лет назад +5

    Nice effect! Love the new studio too 🤠

  • @tijani3141
    @tijani3141 5 лет назад +1

    The content on this channel is soo sick

  • @maplestoryinchinese
    @maplestoryinchinese 5 лет назад +1

    Wow these tutorials on how to build beautiful websites with cool #effects truly motivate me to program thank you !

  • @kalachnikovdmitri8690
    @kalachnikovdmitri8690 3 года назад

    I LIKE THE WAY YOU SMILE. YOU'RE THE BEST.

  • @abrahamgonzalez5572
    @abrahamgonzalez5572 5 лет назад

    You are awesome! I had never used javascript but I'm glad I was able to get a little intro to it in this video (even though I was only copying). Thank you! This animation looks amazing!

  • @peterphoenix7257
    @peterphoenix7257 4 года назад

    You just earned yourself a sub.
    Really like your video and the positive energy you exude.

  • @TheGodlikeBlock
    @TheGodlikeBlock 5 лет назад +1

    thank you for making this! i learned that classlist.toggle is a thing!!!! i wrote so many unnecessary things to do that manually

  • @amircahyadi9219
    @amircahyadi9219 4 года назад

    your design is really cool,i love it ^^

  • @AhmadAli-ml8xr
    @AhmadAli-ml8xr 5 лет назад

    skimmed through the video as I came to just lurk, I HATE YOU! That fade effect on the responsive menu was beautiful. I'll add you to my list of people who are the reason I will never finish my portfolio website because you keep raising the standards *cries*

  • @charlesukanga4835
    @charlesukanga4835 5 лет назад +11

    I will follow you in all social media bro truly you are my hero 🙌🙌👏👏👏

  • @jacobkabutey6629
    @jacobkabutey6629 4 года назад

    Dude knows exactly what he is doing
    Very interesting and interactive

  • @mikeb2604
    @mikeb2604 4 года назад

    Thank you for this. I'm new to coding, this helped a lot! I was getting frustrated centre aligning things but this video give the additional infos I was looking for!

  • @giovanniciaramella7180
    @giovanniciaramella7180 5 лет назад

    Maybe the best video, simple and funny. Thanks, I hope you'll continue to make videos like this.

  • @beeTechSE
    @beeTechSE 4 года назад

    very perfect ! i really need this responsive navbar for my project and thanks for your useful tutorials

  • @peteryu4353
    @peteryu4353 3 года назад

    Ed, this was very helpful. Exactly what I needed. Now I am going to play with this and see if I can implement it to my site. Thanks a bunch!

  • @nextrie
    @nextrie 5 лет назад +1

    Great refreshing personality for teaching. Nice tutorial. You got a new subscriber.

  • @siriokds
    @siriokds 4 года назад

    Awesome tutorial. Great youtuber. Sincerity appreciate your clear way to spread your know how! Kudos for ya.

  • @monirul0814
    @monirul0814 3 года назад

    clip-path - was new for me. Learnt something new. thanks.

  • @himanshigupta9382
    @himanshigupta9382 3 года назад

    Awesome. Looking forward to seeing such small tutorials

  • @janschneider12
    @janschneider12 4 года назад

    Nice explanation. Love the way how you delivered it.

  • @ktmalex
    @ktmalex 3 года назад

    Salut, Ed. Mulțumesc pentru cursurile tale online. Sunt excelente!

  • @johndrichardson2talks733
    @johndrichardson2talks733 4 года назад +1

    Ed, as always, Great!

    • @hammavaqttv2273
      @hammavaqttv2273 4 года назад

      ruclips.net/video/vh7obWOC3jY/видео.html

  • @kelvinlau9019
    @kelvinlau9019 4 года назад

    I have no idea what you are talking about but I love it

  • @Matisantillandev
    @Matisantillandev 4 года назад

    Super cool and faster tutorial! I'm really enjoyed it

  • @kimcodemonkey
    @kimcodemonkey 5 лет назад

    Awesome! Simple, but tricky tutorial. I love this so much

  • @durantetest
    @durantetest 5 лет назад +2

    Wow. Thank you for sharing. I'm just beginning so this is still out of my league. I do love, however, that the screen where you type the code is perfectly focused and that helps me immensely. Hopefully you have videos for beginners.

  • @MrSemenCh
    @MrSemenCh 4 года назад

    О да, очень круто, наконец-то нашёл кого-то кто показывает как писать компоненты, а не копировать их с bootstrap/vuetify.

  • @chunshenghu4207
    @chunshenghu4207 4 года назад

    You are a real polyglot in both computer languages and human languages

  • @sachinmodha71
    @sachinmodha71 4 года назад

    wow man your explaining and teaching style is awesome :) :)

  • @adeleke5140
    @adeleke5140 4 года назад

    thank you so much. I was stuck on this for a couple of hours and you helped clarify it.

  • @maymyatmon4155
    @maymyatmon4155 4 года назад

    Thanks! This help me a lot and I love the way your guiding throughout the process :)

  • @TheBastiii97
    @TheBastiii97 5 лет назад

    You can build the Hamburg button with after and before element and transform them to an X on click and then if you close them by clicking on the X button it transform back to the Hamburg button. Really nice little effect.

  • @islablack7857
    @islablack7857 5 лет назад +1

    Dude you are amazing! Thank you so much for your videos!

  • @kenankerimli3390
    @kenankerimli3390 Год назад +1

    I love it. Basic and clean explain

  • @Br00tyful
    @Br00tyful 4 года назад

    Learning something while I have to smile at the same time.
    Keep it up!

  • @danilosantos2931
    @danilosantos2931 5 лет назад

    I'm from Brazil, and your videos have helped me a lot! thank you

  • @ellsonmds5310
    @ellsonmds5310 5 лет назад

    I really liked the analogy :D
    great vids by the way!

  • @komronayubov2546
    @komronayubov2546 3 года назад

    Добрый день! парень очень позитивный, да уроки классные но настрой самого парня это что с чем то только за его настрой можно заново и заново смотреть уроки. Спасибо за не легкий труд!

  • @psykoonthestreet8640
    @psykoonthestreet8640 5 лет назад

    The analogy is actually pretty great. I liked it lol

  • @Danilo0717
    @Danilo0717 5 лет назад +5

    Who disked this amazing tutorial!! Thanks man, very beautiful code!

  • @SidwSace
    @SidwSace 4 года назад

    "After that terrible analogy" had me rolling. Thank you Ed! Keep it up

  • @ariolverab
    @ariolverab 3 года назад

    Always great to learn something from you Ed and of course get some fun 🤣 , awesome example with mask definition Thanks!

  • @joel9909
    @joel9909 4 года назад

    Just finished it Ed, I love it Sir

  • @start8755
    @start8755 5 лет назад

    Man, your vids are awesome. Keep it up!

  • @Rubenjr005
    @Rubenjr005 5 лет назад

    Thank you for creating this tutorial. This helped me finish my first project / portfolio!

  • @dailyWalker1
    @dailyWalker1 3 года назад

    you are awesome dude happy to learn this from you.

  • @sedad5341
    @sedad5341 3 года назад

    no one can explain like this genius.

  • @gangalatharva
    @gangalatharva 3 года назад

    PS: That analogy was just perfect

  • @yahyafati
    @yahyafati 3 года назад

    You have the most underrated intro music

  • @rishabh8480
    @rishabh8480 4 года назад +1

    very good , amazing stuff!!!

  • @SadDamniT
    @SadDamniT 3 года назад

    Wow I love how easy you make all this

  • @RickM90
    @RickM90 5 лет назад

    I never heard of clip-path before, thanks for sharing it. I'm going to use this navbar for a site I'm doing for a client.

    • @developedbyed
      @developedbyed  5 лет назад +1

      Yeah it's pretty cool! Hope it works out!

  • @usama57926
    @usama57926 5 лет назад +1

    love your explanation

  • @starasav
    @starasav 4 года назад

    thank you so much for the effort you put into making this video--- it really shows!! you have made it really easy for me to understand difficult concepts :)

  • @vaibhavkaul2
    @vaibhavkaul2 5 лет назад

    Really very helpful. Thank you and do make such great videos .Your way of explaining is very simple but yet very good. Keep it up

  • @knotcircle2844
    @knotcircle2844 3 года назад

    Thanks for this awesome tutorial! I was able to make this work on my Vue.js project

  • @rexowebhostingsolution6905
    @rexowebhostingsolution6905 4 года назад

    You are awesome brother. Loved it.

  • @kchausheva
    @kchausheva 5 лет назад

    I am in a search of pure css hamburger menu but it is a nice video, good job.

  • @roving-camera_72
    @roving-camera_72 3 года назад

    Sure glad I found this tut. Excellent job, thanks so much.

    • @GamingTSH
      @GamingTSH 3 года назад

      🙋💞👉ruclips.net/video/HI9ZI8ymxsA/видео.html👈 This is so Good too ...FOR HTML CSS EFFECTS.. Please Checkoo

  • @FlavioZanoni
    @FlavioZanoni 4 года назад

    I love the way you teach and interact +1 subscriber, great work !!!!

  • @huckfaters
    @huckfaters 5 лет назад

    Great work dev ed