From Adobe XD Prototype to HTML, CSS & JS - Making an Animated Mega Menu

Поділитися
Вставка
  • Опубліковано 6 вер 2024

КОМЕНТАРІ • 347

  • @DesignCourse
    @DesignCourse  5 років тому +27

    Likey? Subscribe! - My answer for today's question: Honestly, I don't use any plugins for CSS animations. I tried keyframes.app once and covered it, but I never found myself using it again much. There are a few tools online that I use (such as the one I covered today) just for some quick animation ideas. You?

    • @romanperera
      @romanperera 5 років тому

      Hi, would you please make a super simple horizontal menu (not multi level) with logo (brand) that can easily be customized (move the brand left, middle or right) and adaptable to any design and also responsive (slide out maybe) WITHOUT using bootstrap. May be use css grid. There are many online, but nothing so simple like your design ideas. I love your design ideas and would really like to see your approach to this. If you already have done this, please share the link. Thanks and You are awesome!

    • @maskman4821
      @maskman4821 5 років тому

      I use animate.css a lot

    • @UsmanYousafOfficial
      @UsmanYousafOfficial 5 років тому

      Hi I am not a developer, or know any html or css, I have good grip on ui ux design in web, If i have designed my template in XD, can I make it functional by exporting it along with its HTML & CSS ???

    • @omegahawkeye
      @omegahawkeye 4 роки тому

      @@romanperera ⁰üüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüó999999999999⁹99999999999999999999⁹9⁹9999999⁹99999999999999999⁹999⁹999999999999999⁹⁹9⁹9999⁹999⁹99999999⁹⁹9⁹9⁹⁹⁹⁹⁹⁹⁹⁹⁹⁹⁹⁹⁹⁹⁹9⁹⁹⁹⁹99⁹⁹⁹⁹

    • @ranjithsivanandham1927
      @ranjithsivanandham1927 3 роки тому

      Are you using AI to convert your prototype to front-end

  • @ZiRR0
    @ZiRR0 4 роки тому +12

    To anyone who wants an animation when closing, here are the steps:
    1. Just duplicate the "overlay" artboard
    2. Reposition it somewhere
    3. Delete the trigger from the new artboard to "overlay all" (The trigger will be duplicated along with the artboard, so you have to delete it)
    4. Create a "tap" trigger from the close button in "overlay all" to the new artboard
    5. Change "Ease In-Out" to "Ease Out", keep the rest of the settings
    6. Create a "time" trigger from the new artboard to "home"
    7. Change "Ease In-Out" to "Ease Out", keep the rest of the settings

    • @badhonebrahim7707
      @badhonebrahim7707 4 роки тому +1

      so helpful thanks bro.

    • @stefandespotovic2881
      @stefandespotovic2881 3 роки тому

      Hi there, is it problem to post a code if you have time for this? I don't quite understand what are you saying. Thanks in advance

  • @edd338
    @edd338 5 років тому +29

    You're exactly the kind of web developer I am working to become like: full-stack web developer and designer. Thank you for the awesome videos. You have become a mentor for me.

  • @AhmadShadeed
    @AhmadShadeed 5 років тому +7

    I came to this video from Recommendations. Thanks for your efforts, I want to point out to an important thing that you missed. You used an to act as a toggle for the menu, it's better and more accessible to use in that case, since the is not focusable element and a lot of beginners will do their work based on that.

  • @Joostered
    @Joostered 4 роки тому +6

    First off, this is a good tutorial and the result looks very nice.
    That said, whenever you find yourself adding a delay to a design so it takes longer to display the information the user asked for, stop right there. Take a step back and rethink your life choices.

    • @taigaaisaka3663
      @taigaaisaka3663 4 роки тому

      can you explain why please?

    • @2007bmpgti
      @2007bmpgti 4 роки тому

      @@taigaaisaka3663 Pretty self-explanatory... The goal of web design should be usability. If the user is hindered by design choices, and those hindrances are enough to make the user leave your site/app, you've failed as a designer. Adding a delay to the users' experience almost never improves that usability and therefore should be avoided.

  • @darkoefremovmkd
    @darkoefremovmkd 5 років тому +45

    Instead of using calc and subtracting fixed units, use
    box-sizing: border-box;
    And that will make your padding go inwards instead of outwards.

    • @darkoefremovmkd
      @darkoefremovmkd 5 років тому +14

      A good rule of thumb is to apply it to everything by doing:
      * {
      box-sizing: border-box;
      }
      And every element will get that rule applied automagically.

    • @AniketChaudhary_
      @AniketChaudhary_ 5 років тому

      OH thanq bruh

    • @CryptonianWar
      @CryptonianWar 4 роки тому

      @@darkoefremovmkd How exactly to do that, for us amateurs..

    • @darkoefremovmkd
      @darkoefremovmkd 4 роки тому

      Facer, I explained in a comment of my comment.

    • @CryptonianWar
      @CryptonianWar 4 роки тому

      @@darkoefremovmkd Thanks on reply. You mean to apply it to every possible container?

  • @lisarogers5873
    @lisarogers5873 3 роки тому

    Thank you for typing the code then immediately showing the result. Makes learning much easier.

  • @DrewNorman
    @DrewNorman 4 роки тому +2

    Gary you have helped many people feel young again with your spirit and energy to help teach this stuff. Keep up the great work. I have been a developer for nearly 30 years and you allow me to keep my skills sharp.

  • @huynhtanle3670
    @huynhtanle3670 5 років тому +65

    YOU ARE THE BEST, KEEP WORKING, absolutely want some ui ux video from you

  • @mckennamissfeldt933
    @mckennamissfeldt933 5 років тому +3

    You are legit the best design instructor I've followed!! Also love the humor!
    I don't usually use plugins for CSS animations... unless someone references one to me then I usually only use it once or twice

  • @zzzbyyy
    @zzzbyyy 3 роки тому +1

    after your vid i have great insight into the whole process from prototyping to coding ... well done

  • @biplabsharma5344
    @biplabsharma5344 4 роки тому

    No Skip, just concentrate, totally, Inspired me so much ......Love 💙💙💙💙 .....From India 💙💙💙This is the video, I really want for, which shows me how Adobe XD works and it'll help me to do my career right, love from India

  • @mikethemarquis
    @mikethemarquis 5 років тому +11

    Hello Gary, hello everybody
    first of all I wanna thank you for this amazing lesson you gave to us. I'm new to Adobe XD. I'm a front end developer.
    I have a few questions to ask if I may:
    - what's the purpose on sketching the interface and then redoing that again rewriting HTML? I mean, what's the reason of doing twice the same job?
    - I really like the design of the application, but, why one should first sketch the app and then write again the HTML/CSS for the same thing he or she did right before?
    - Can't you just use the Web export plugin ?
    I thank you in advance. I apologize if I'm obvious, but I'm new to Adobe XD, and it's an amazing tool for UX/UI and I want to make clear of everything.

    • @fleexie
      @fleexie 4 роки тому +3

      I know you asked DesignCourse. But I would just quickly tell the reason I was told by my instructors at education.
      You want to do a mockup of your website/app for a few reasons. First it's a good way to visualize your ideas before spending time on the coding. It may seem like you spend a lot of time first doing a mockup and then coding. However in larger scale projects it could cost you many more hours if/when you realize that it doesn't fit together. That's why doing a mockup is a fantastic idea.
      Another thing is, if you are doing a job for a company or someone else then you can present to them the mockup, so if they didn't like something about it you can change it fast. That way you are minimizing the risk of scrapping everything because the client didn't like it. Or at least you didn't waste the time coding everything. Sometimes the clients may change their mind about certain things so it's always a good idea to present them the work you have done. It's much easier with sketches, and less time consuming. Be mindful your mockups don't have to take weeks to make, they are like advanced wireframes (wireframes with a coating). Making good mockups does take some practice as well.
      Essentialy you can save lots of time, by spending time preparing in the beginning.

    • @kailusniroula8340
      @kailusniroula8340 4 роки тому

      @@fleexie thanks for the great info

    • @aztrodj82
      @aztrodj82 4 роки тому

      @@fleexie u are right in what u saying .. but what I'm understand from the questions is that it could be more simple if u just export the whole prototype as a html/css documents and img files to a map. if there isn't an issue when doing that. I'm trying doing it but all links u do in adobe xd prototype dose not apply in the html/css documents.
      so the question now is what needs to do to fix the links problems ... or what I'm doing wrong when I'm exporting the web page

    • @fleexie
      @fleexie 4 роки тому

      @@aztrodj82 Oh no. You do not use XD to make the actual sites. Only prototypes/mockups. Nothing more.
      After you made the prototype you are doing the coding, in another software. Since you already have the design and such it's actually pretty easy to code it afterwards.
      I know it would be nice if you could just get the website out from the XD project but it's a software for prototyping not making actual code for sites.

    • @mikethemarquis
      @mikethemarquis 4 роки тому

      @@fleexie Wow Fleexie, amazing. Thanks a lot for this! It's really clearifing. Nobody taught me this simple concepts at the university.
      Yeah, I really agree that doing sketching and prototyping will save you money even in the client/company scenario you described.
      That's a really great and valuable info.

  • @BroScro
    @BroScro 4 роки тому +1

    For those that hate this video at first, like i did, and just want to get out of it what you'll need, don't be lazy and fast about this.
    Follow along, type exactly what he types in to your own IDE word for word, but add notes in comments (using */ to open comment and */ to close) explaining what you've come to understand the line means.
    This will allow you to more intentionally and comprehensively pick up on the meaning behind it all. THIS is the most efficient way to consume the video.
    Don't be overwhelmed. Do it step by step, quit rushing around. Slow it down.

    • @hiryan7551
      @hiryan7551 3 роки тому

      agreed! no need to rush. I never thought of commenting throughout the process- I'll add this to my learning path.

  • @cindykee3719
    @cindykee3719 5 років тому

    Even though I am a developer, I have never done CSS animations. I didn't even know there were tools out there to help me do animation! Now I will be looking for tools!

  • @hobiethompson8986
    @hobiethompson8986 4 роки тому

    love how short & sweet and to the point you are, don't have to skip through like other tutorials, plus your tech-savvy, great videos, really appreciate them!

  • @lucisetumbrae
    @lucisetumbrae 3 роки тому

    Great video that fills in gap between Adobe XD and VS Code in the design process of websites. Thanks much!

  • @brutaldb92
    @brutaldb92 5 років тому +12

    Great tutorial. This type of things can be applied to page transitions also.

  • @NeelanshMathur
    @NeelanshMathur 4 роки тому +2

    I loved this video. For me, web design is the final product that I can view on my browser. Prototyping + Coding is just what I was looking for!

  • @kheyas
    @kheyas 5 років тому

    Gary, this is a great presentation of what a design to code workflow should be. Thank you for making it! I got to practice my css animations and emmet commands also while following the video. It's a great time to be a developer, considering people like you exist to instruct us with free, simple tools like Adobe XD and VS Code.

  • @elproducer6677
    @elproducer6677 4 роки тому

    everything in one video excellent explanation

  • @AllIndiaTalents
    @AllIndiaTalents 3 роки тому

    at 16:07 there is no time option in trigger pls anyone help me

  • @busyrand
    @busyrand 5 років тому +2

    I just played around with Anime.js yesterday. Awesome tutorial. Makes me interested in the design tools for a change.

  • @karlobaruela6771
    @karlobaruela6771 3 роки тому

    I'm getting inspired with this video and you see how chill he is keep it up bro

  • @tGxChief1
    @tGxChief1 5 років тому +9

    Great ! i think is just a matter of time till adobe or some other team releases a XD to HTML Plugin :) atleast i hope so, becousei just love XD.

  • @marektalpak4315
    @marektalpak4315 4 роки тому

    Thank you for the video! You nicely combined how to use HTML, CSS, and JS in one place. And please keep talking. It really helps newbies to understand what you are doing.

  • @houssembenothmen7250
    @houssembenothmen7250 5 років тому +3

    i was trying to rebuild this as practice but i faced a problem
    i either can make the side page come and go without a delay between the display block and display none
    or make the transition works on only one side
    anyhelp ?

  • @orkhanhuseynli6118
    @orkhanhuseynli6118 4 роки тому +19

    Hello, is there an easy way to export from adobe XD to html / css without writing code?

  • @mandalorian99
    @mandalorian99 2 роки тому

    Yet another great tutorial! thank you so much, I've been struggling implement a nice slide in navbar menu. thanks a lot!

  • @alayetmanel6986
    @alayetmanel6986 3 роки тому

    Wow you saved me ! I just started designing I don't know much yet but this tutorial helps especially with the js code ☺️☺️

  • @3agamygabr563
    @3agamygabr563 2 роки тому

    thank you for your detailed video, and We need more Tuts like this from XD prototypes to HTML/CSS , it's really confusing for people from a Dev. background .

  • @oliverladykillerbiscuit
    @oliverladykillerbiscuit 4 роки тому +7

    "Uuugh, I'm talking a lot" LMFAO You're the champ bro! Your talking performance reminds me my cocaine days :)

  • @elilumilay9405
    @elilumilay9405 4 роки тому +1

    From sir Brad Traversy's channel to this. I was inspired by how you teach UI fundamentals and I want to practice it even more :) thank you good sir.

  • @alexanderottosson329
    @alexanderottosson329 5 років тому +2

    No matter what i do i cannot get the Js to work. i have copies everything without result. Any thing i am doing incorrectly?

  • @Sol-vo8ys
    @Sol-vo8ys 5 років тому

    It is great and clear tutorial specifically for the biggers, thanks.

  • @jamil_mikael
    @jamil_mikael 3 роки тому +2

    I've made mine, but it gets weird the black overlay won't animate from right to left, the border above the h1 just sticks there constantly but at least the list items: home about us, etc behaves as it should, bouncing up like yours !!! ....mama mia where did I go wrong !? I did everything as you said !!

  • @englestiaedutech6755
    @englestiaedutech6755 Рік тому

    (1) In "Edison" it would be possible to create and play Loops in Any Order we like. Example. Loops=(2, 6, 8, 1) or (12, 1, 3, 6.10,) and

  • @codeaxen
    @codeaxen 4 роки тому

    wooow.... this is an awesome Tutorial i was wondering how to convert xd design but now have a clear understanding thanks.....

  • @faraldflanders
    @faraldflanders 4 роки тому

    Perfect! I loved it! Simple, well explained and direct to the point. Congratz

  • @HerrRectum
    @HerrRectum 4 роки тому +10

    So all the designing in Adobe XD is just to get a feel of how you want it to look? You still had to code it again once in visual studios?

    • @frials4757
      @frials4757 4 роки тому

      Yes, XD is for making prototypes (designing), after that you still need to code it

    • @sielledevelop4205
      @sielledevelop4205 3 роки тому +2

      @@frials4757 yea is only a preview and its very important!!

  • @laughingsheep
    @laughingsheep 2 роки тому

    small cry for help. When my transformation happens, the elements of my home-page are still visible until the transformation is finished. I wrote the code along with this video. For you it doesn't happen. What could be the problem? Couldn't find any solution when it comes to the transformation, the animation or the colors. Maybe you have an idea?
    Thanks in advance

  • @younessidbakkasse9742
    @younessidbakkasse9742 4 роки тому

    I can't believe you just made a fancy website in just 45min.

  • @melvinshirer8362
    @melvinshirer8362 4 роки тому

    Very Insightful......Must Learn XD To The Max.....

  • @binliu9929
    @binliu9929 2 роки тому

    Believe in yourself, our determination is sotNice tutorialng that never lets us down

  • @17Rasti
    @17Rasti 5 років тому +10

    Thanks for the video, I was just wondering how the frontend developer's work looks like after that the designer sends the adobe xd files :)

    • @DesignSparks
      @DesignSparks 3 роки тому

      hats off to the developers who code😂

  • @UsmanYousafOfficial
    @UsmanYousafOfficial 5 років тому +1

    Hi I am not a developer, or know any html or css, I have good grip on ui ux design in web, If i have designed my template in XD, can I make it functional by exporting it along with its HTML & CSS ???

  • @albertluta4782
    @albertluta4782 5 років тому

    Besides a great designer, you are an awesome teacher, keep it up!

  •  5 років тому +17

    @DesignCourse
    so in this way you work 2 times ? i though that XD tool will help exporting this to html and css

    • @mikahoy
      @mikahoy 4 роки тому +1

      It supposed to be worked by 2 person, a designer and frontend dev, if you are alone and need for rapid development you can use pingendo instead.

  • @kumarvishalben
    @kumarvishalben 5 років тому +40

    BTW coding starts at 19:15 😃

  • @waroakawa
    @waroakawa 3 роки тому

    thank you so much for sharing this tutorial ...

  • @jadelpino10
    @jadelpino10 5 років тому +1

    How could I add an animation when the .show-menu is remove, when we hit the cross bar to close the nav section??

  • @robertmullinslives
    @robertmullinslives 2 роки тому

    everything melts down in dreamweaver after applying the '&::before' statement in the scss. Also, floating the menu button doesn't really work. I do understand the process better, from XD to html. So there's that.

  • @reginajosephine1986
    @reginajosephine1986 Рік тому

    Woah, great video mate!

  • @jefffinity0323
    @jefffinity0323 2 роки тому

    Totally agree, bro!

  • @hammasahmed5592
    @hammasahmed5592 4 роки тому

    cool stuff but but im not able to perform the same css nested selection as you did that's doesn't work with me
    smth like html { margin: 0px ; a{ text-decoration : none ; } } the style will be applied to the html but not to any a inside that html tag !!! inline selection works fine buy the way ?? but the nested selection is a way more readable and handy .. anyone can help ??

  • @MuhAmmAdShoAib-ye3jq
    @MuhAmmAdShoAib-ye3jq 2 роки тому

    Awesome animation and gorgeous work!!

  • @mohamedhasanbasari
    @mohamedhasanbasari 5 років тому +2

    How would you animate for the close menu button?
    It just jumps straight back to the home page, i'm not familiar in java script

  • @ViniciusPrado
    @ViniciusPrado 5 років тому

    Excellent class! I learned a lot that I did not know. Thanks.

  • @bulp9893
    @bulp9893 5 років тому +1

    You rocking with many technology

  • @blueoceans4366
    @blueoceans4366 3 роки тому

    Hey could somebody tell me what's the use of building your paged in Adobe XD if you are going to code it in HTML anyway? I honestly don't see what's the point. He only used the hamburger menu .svg file for his coding? Why bother building the whole page in XD if you can't use it

  • @azeemsaleem2044
    @azeemsaleem2044 5 років тому +3

    Thanks for your best xd to html tutorial
    Love from Pakistan

  • @CoolScratcher
    @CoolScratcher 4 роки тому +5

    This is doing it all by hand... shouldn't there be a way for you to export FROM Adobe XD?

    • @raomuhammadusama9244
      @raomuhammadusama9244 4 роки тому

      There's an extension named "Web Export" and it can export html+css for you. Either in the same file or in different ones. but there's some problem with it the code can be messed up if you made slight mistake while naming objects

  • @bruceb85
    @bruceb85 Рік тому

    why not just export xd to html/css/javascript project? does it not have that feature?

  • @DylanTheClutchGuy
    @DylanTheClutchGuy 5 років тому +4

    Just a question, why not use "box-sizing: border-box" instead of the calc function?

    • @DesignCourse
      @DesignCourse  5 років тому +3

      Probably because I never tried that. Thanks!

    • @DylanTheClutchGuy
      @DylanTheClutchGuy 5 років тому

      @@DesignCourse it's really handy dandy, you're welcome

  • @StarNightsDream
    @StarNightsDream 5 років тому

    How would you animate for the close menu button? It just jumps straight back to the home page, and we skipped animating that part

  • @user-iq6yo2bo8p
    @user-iq6yo2bo8p 4 роки тому +1

    Great video. Informative. As a software engineer/tech lead, my take is that I unfortunately would keep going straight to code and not learn Adobe XD given it's nothing more than a way for non-coders to express ideas :( :( Really looking for something that can boost my design abilities. I'm neither great at CSS nor SVG nor anything of the likes..

  • @nhatquanghoang4691
    @nhatquanghoang4691 4 роки тому

    Hello. I cant install plugins from XD. It always shows the message "Plusgin installation failse". can you help me fix this on macbook with video?

  • @andywoo968
    @andywoo968 5 років тому +5

    i was wondering how do you get the perfect out of css values adobe xd how did you know to type in so you make is accuarte i was looking through alot of youtube video none of it really explanied

  • @DrewNorman
    @DrewNorman 4 роки тому +3

    I wish you would have provided a link to the code or XD files.

  • @primenet1142
    @primenet1142 5 років тому +1

    I love your tutorials,

  • @AniketChaudhary_
    @AniketChaudhary_ 5 років тому +2

    hey can anyone tell me , how to code the reverse for it , i'm having problem

    • @reyesdf
      @reyesdf 4 роки тому +1

      also looking in the comments. haha

    • @xer0six
      @xer0six 4 роки тому

      I got it to reverse back but now only works once. Might throw my computer out the window idk yet

  • @TheBawbag001
    @TheBawbag001 4 роки тому

    Hey, Im very new to Html and this is the first real bit of coding i've tried. However im having a difficulty with the "overlay.classlist.add" Chrome doesn't seem to like that line of code for me. Any ideas?

  • @maraya2374
    @maraya2374 3 роки тому

    you're amazing! thank you! definitely picked up a few tips & tricks :)

  • @adnanamin3666
    @adnanamin3666 5 років тому

    We'd appreciate a javascript tutorial series!

  • @pyrapon
    @pyrapon 4 роки тому +1

    Hey there, I'm trying to follow along in Adobe XD 2020, and the animation options seem different. I don't seem to have an option to use Time as the trigger for the menu animation. Is this something that they have removed or changed in 2020? Or am I perhaps overlooking something?

    • @beckendrof
      @beckendrof 4 роки тому

      It only works when you transition from one art board to another.

    • @eduardsandersons8793
      @eduardsandersons8793 4 роки тому

      Well I found that if I go in prototype mode and shift-click two artboards then the time trigger appears

  • @Jack-cm5ch
    @Jack-cm5ch 4 роки тому

    At 15:50, I don't see a time trigger on my drop-down menu?

  • @SilasMerrick
    @SilasMerrick Рік тому

    You deserve more than 1m sub

  • @PerfectLyricsStudio
    @PerfectLyricsStudio 2 роки тому

    Great Jobs!!! You got my suppose as usual

  • @caiosantosvargas
    @caiosantosvargas 5 років тому

    Wow, how cool !!
    My congratulations, I'm very happy to see this video lesson helped me more, congratulations.

  • @maskman4821
    @maskman4821 5 років тому +1

    Thanks for this awesome tutorial!

  • @arashdanesharaste5845
    @arashdanesharaste5845 5 років тому +6

    Nice tutorial, btw at the end you should place ‘opacity: 0’ for the ‘0%’ in your bounce animation. Thank you so much for such a great content.

  • @mfaizanattique
    @mfaizanattique 5 років тому

    should we use SVG as image src or just Paste the XML markup for SVG? why shouldn't we do it?

  • @ojbfalon1749
    @ojbfalon1749 2 роки тому

    This dude is the king of sarcasm 🤣🤣 I love him... See 9:05 to 9:15

  • @alansantos275
    @alansantos275 Рік тому

    tNice tutorials tutorial was very satisfying

  • @subramanyam.d24m56
    @subramanyam.d24m56 4 роки тому

    Really wonderful

  • @scalarious286
    @scalarious286 5 років тому +7

    26:44 display: border-box; ?

  • @DreXeT23
    @DreXeT23 5 років тому

    so basically if i'm only designing the website and not coding it, what do I send to the developper ? svg files ?

  • @captainsoap6003
    @captainsoap6003 5 років тому +1

    WoW I learned so much Thank you

  • @codaq4043
    @codaq4043 5 років тому

    hey can you please explain what you did at the start with the command prompt and how you got the last command, code . to work like that

  • @saidalkharusi7824
    @saidalkharusi7824 5 років тому

    I'm enjoying every bit of vanilla CSS. No frameworks, nothing. Grid has made a ton easier.

  • @duychuctruong6464
    @duychuctruong6464 5 років тому +1

    How cool your tutorial is! Thanks for your worth experience shared. ^^

    • @luunguyenphat9399
      @luunguyenphat9399 4 роки тому

      Hello, nice to see a Vietnamese here. Any product was launched after watching this video? :D

  • @MilasBunteWeltde
    @MilasBunteWeltde 5 років тому +2

    I´m getting crazy...whatever I do...my JS won´t work....I completely copied your scss but the .show-menu won´t function. I must be overlooking something...

    • @alexanderottosson329
      @alexanderottosson329 5 років тому

      Did you get it to work? I am having the same problem atm.

    • @MilasBunteWeltde
      @MilasBunteWeltde 5 років тому +1

      @@alexanderottosson329 afraid Not...there is just no click Event...cant find the error

    • @MilasBunteWeltde
      @MilasBunteWeltde 5 років тому

      @@alexanderottosson329 damn...it was a simple typing error at my side.... it works just fine

    • @Anaskvit13
      @Anaskvit13 5 років тому

      Hey , i am having the same problem, how did you get it work? plz tell me :D

    • @Anaskvit13
      @Anaskvit13 5 років тому +1

      hehe,I writed accidently documment with two m :D just a letter what can lead to :D

  • @HerrRectum
    @HerrRectum 3 роки тому

    When I create a main.scss file it doesnt come up "Watch Sass" for me like it does for him at 18:04 Why is that? :/

    • @hiryan7551
      @hiryan7551 3 роки тому

      add the ext. plugin via VSCode -- Live Sass Compiler by Ritwek Dey

  • @majordino6679
    @majordino6679 5 років тому

    Hey so I have Adobe XD it won't work.its opening and closing how to fix this issue help it's will be really helpful

  • @arako969
    @arako969 5 років тому +2

    Hey, I like the video very much. How I can reverse the animations when the menu close? Can you show these steps in another tutorial?

  • @douglasjason7
    @douglasjason7 5 років тому

    Thank you Gary. You're awesome!

  • @chairulazmi13
    @chairulazmi13 4 роки тому

    are you slways using cms when build website sir ? or just static web for example like company profile website ?
    please answer

  • @ZippyCoheny
    @ZippyCoheny Рік тому

    I need to create a free membership website with profiles. Do you have any videos on this because I having a hard time finding any videos on this.

  • @gentrithalili_
    @gentrithalili_ 5 років тому

    The way you implemented list item animation I dont think its the best way of doing it,”.
    If I add another item, I have to add css for that item to .
    Nice tutorial.

  • @TheGamingMaik
    @TheGamingMaik 5 років тому

    Animate.css is pure love 😍