Build a Hamburger Menu with HTML, CSS, and JavaScript | Treehouse Tips

Поділитися
Вставка
  • Опубліковано 7 вер 2024
  • Follow along with Dustin on this super quick guide to building an interactive hamburger menu using HTML, CSS and just a little bit of JavaScript.
    Link to the GitHub repo: github.com/tre...
    Join our Discord: trhouse.co/Joi...
    We offer free trials - learn more front end development with us! trhouse.co/THt...
    #html #css #javascript #teamtreehouse #code #coding
    ---
    Learn how to build websites and apps, write code, or start a business at Treehouse. Learn from over 1,000 videos created by our expert teachers on web design, coding, business, and much more. Treehouse teaches the in-demand technology skills you need to land your dream job.

КОМЕНТАРІ • 41

  • @lukasreznicek4670
    @lukasreznicek4670 4 місяці тому +7

    Your video helped me with my school project. Simple, no garbage, straight to the point. Thank you so much!

    • @gotreehouse
      @gotreehouse  4 місяці тому

      Love to hear that, thank YOU!

  • @gustavomartin3681
    @gustavomartin3681 2 місяці тому +7

    For future reference for anyone else who uses this video and they dont know why it doesn't work u need to link your JS file to your html file. Just add this line of code at tye end of body tag but still inside body is how i do it:
    my JS file name is (app.js) so just replace that part of the code with ur file name

  • @NganLe-tb8bt
    @NganLe-tb8bt 16 днів тому

    This video sounds like a speedy cooking tutorial, lol, I can't follow but love the clarity, to the point. You have amazing skills of presenting and coding. I'm impressed and will sub.

  • @ZickPranks
    @ZickPranks 11 місяців тому +5

    Nice quick much needed refresher. Thanks

    • @gotreehouse
      @gotreehouse  11 місяців тому

      🙌 glad it was helpful!

  • @Paulina-sc1xd
    @Paulina-sc1xd 2 місяці тому +1

    quickly and effectively, just what I needed. Thanks a lot👍👍👍✌❤

  • @sangwaemmanuel6936
    @sangwaemmanuel6936 Місяць тому

    You are really great making things done simply and precise

  • @arnav-studies
    @arnav-studies 2 місяці тому +2

    Damn bro built it in 4 min.... well thanks for this short yet helpful video

  • @helenaose
    @helenaose 4 місяці тому +1

    This was AMAZING! You have great skills - coding AND video creation-wise!! 😍😄 Thanks!

  • @San_Teeee
    @San_Teeee 7 місяців тому +2

    This is too underrated.
    Much love bro❤

  • @econcept-vl8kd
    @econcept-vl8kd 18 днів тому

    Thanks very much at least am done with this part of the project

  • @noobtv2033
    @noobtv2033 Місяць тому

    Nice and quick video man, love it

  • @user-oi5df4sz3y
    @user-oi5df4sz3y 4 місяці тому +1

    thanks brother direct to the points

  • @AndyMorrisArt
    @AndyMorrisArt 28 днів тому

    right on, man

  • @EugeneKoshelev
    @EugeneKoshelev 2 місяці тому

    Cool menu, mate!

  • @bryanelmedawar8726
    @bryanelmedawar8726 6 місяців тому +1

    How do you add the arrow symbol in the JavaScript ?

    • @gotreehouse
      @gotreehouse  6 місяців тому +1

      It's just the font that I am using. It's called 'ligatures' :)

    • @syko095
      @syko095 4 місяці тому

      Use this =>

  • @I_Love_Lord
    @I_Love_Lord 4 місяці тому

    nice one

  • @chadjacobs6246
    @chadjacobs6246 4 місяці тому +1

    Some reason it says hmaMenu is null

    • @gotreehouse
      @gotreehouse  4 місяці тому

      We'll need to see your code to help debug, come join our Discord :) trhouse.co/JoinDiscord - We'll help you out!

  • @cucnguyen7278
    @cucnguyen7278 4 місяці тому

    can I get your tool supporting your code
    ex: you code "ham-menu" and the app automatically show "
    but I write "ham-menu" --> show "ham-menu"

  • @astroapk2456
    @astroapk2456 11 місяців тому

    TYSM

  • @Loading___50
    @Loading___50 4 місяці тому

    Bro why you sound like your making cooking recipe video Your Cool bro I like it

    • @gotreehouse
      @gotreehouse  4 місяці тому +1

      🤣 Thanks bro!

    • @Loading___50
      @Loading___50 4 місяці тому

      @@gotreehouse btw how do u make that arrow from 3:12

    • @aimpizza6823
      @aimpizza6823 Місяць тому

      @@Loading___50 Some fonts do that

  • @ahmadfaisal.9
    @ahmadfaisal.9 11 місяців тому

    Opacity 0 is not working for the middle one 😢

    • @gotreehouse
      @gotreehouse  11 місяців тому +2

      Oh no, let's take a look at your code! Hop on into our Discord server! trhouse.co/JoinDiscordYT

    • @ahmadfaisal.9
      @ahmadfaisal.9 11 місяців тому

      @@gotreehouse done thank you

  • @JuliusPablo-tt7wq
    @JuliusPablo-tt7wq 9 місяців тому

    Bto

    • @JuliusPablo-tt7wq
      @JuliusPablo-tt7wq 9 місяців тому

      Bro where I put the Javascript? In the html? Where part?

    • @gotreehouse
      @gotreehouse  9 місяців тому

      You'll want to create a separate file for the javascript! You can name it anything you'd like. Just make sure it has the .js extension and you include in the HTML file. If you need any help, come hang out with us in Discord and we can get you going! trhouse.co/JoinDiscord

  • @panka33
    @panka33 6 місяців тому +3

    I don't understand a word for it. Can you slow down a little bit? I have never used JavaScript before. This is for those who already know everything.

    • @gotreehouse
      @gotreehouse  6 місяців тому +7

      Sorry, this isn't meant to be a video on learning HTML, CSS or JavaScript but instead a quick guide on building a hamburger menu. You should have a decent understanding of those topics before consuming this kind of content. Check out our full JavaScript Basics course here: teamtreehouse.com/library/javascript-basics

  • @Enr1c0_online
    @Enr1c0_online 9 місяців тому

    The code doesn't work rly much

    • @gotreehouse
      @gotreehouse  9 місяців тому +1

      Hey there! If you're still looking for help, please join us on our community Discord server so we can more easily troubleshoot your code :) trhouse.co/JoinDiscord