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?
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!
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 ???
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
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.
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.
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 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.
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.
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
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
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.
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.
@@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
@@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.
@@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.
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!
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.
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!
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.
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.
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 .
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 !!
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 ?
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..
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.
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
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
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 ???
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.
So what I gather from this, Adobe XD is a waste of time. You build it XD then have to rebuild it from scratch code in HTML/JS/CSS? Hard pass! I was excited to see how to just export code that might be generated from XD but this does nothing. So disappointing.
XD or prototyping is an essential step to designing. If you were working with a client or company too, you’d want the project approved in XD or other app before moving on to coding. It makes less work in the end by getting a proper structure and design before trying to come up with it on your own. Viewing Ui design in apps like XD is a great step because you can see how something might look before implementing it (it’s much easier to change an idea in a prototype than it is to change via html and css)
I agree with o.p exporting direct to html css would be awesome sve you ha ING to write out the whole code for this especially for someone not so competent with html css would act as a tutorial for them. I want this page to do this how does it do it. But I guess its harder for the prototype transitions and such as well do you want it in python js c c# c++ OR other flavours.
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 ??
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?
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!
I use animate.css a lot
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 ???
@@romanperera ⁰üüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüó999999999999⁹99999999999999999999⁹9⁹9999999⁹99999999999999999⁹999⁹999999999999999⁹⁹9⁹9999⁹999⁹99999999⁹⁹9⁹9⁹⁹⁹⁹⁹⁹⁹⁹⁹⁹⁹⁹⁹⁹⁹9⁹⁹⁹⁹99⁹⁹⁹⁹
Are you using AI to convert your prototype to front-end
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
so helpful thanks bro.
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
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.
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.
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.
can you explain why please?
@@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.
YOU ARE THE BEST, KEEP WORKING, absolutely want some ui ux video from you
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.
Instead of using calc and subtracting fixed units, use
box-sizing: border-box;
And that will make your padding go inwards instead of outwards.
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.
OH thanq bruh
@@darkoefremovmkd How exactly to do that, for us amateurs..
Facer, I explained in a comment of my comment.
@@darkoefremovmkd Thanks on reply. You mean to apply it to every possible container?
Thank you for typing the code then immediately showing the result. Makes learning much easier.
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
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
after your vid i have great insight into the whole process from prototyping to coding ... well done
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.
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.
@@fleexie thanks for the great info
@@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
@@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.
@@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.
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!
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.
agreed! no need to rush. I never thought of commenting throughout the process- I'll add this to my learning path.
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!
"Uuugh, I'm talking a lot" LMFAO You're the champ bro! Your talking performance reminds me my cocaine days :)
Great video that fills in gap between Adobe XD and VS Code in the design process of websites. Thanks much!
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!
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.
Great tutorial. This type of things can be applied to page transitions also.
I'm getting inspired with this video and you see how chill he is keep it up bro
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.
everything in one video excellent explanation
I just played around with Anime.js yesterday. Awesome tutorial. Makes me interested in the design tools for a change.
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.
Perfect! I loved it! Simple, well explained and direct to the point. Congratz
Woah, great video mate!
Yet another great tutorial! thank you so much, I've been struggling implement a nice slide in navbar menu. thanks a lot!
Wow you saved me ! I just started designing I don't know much yet but this tutorial helps especially with the js code ☺️☺️
BTW coding starts at 19:15 😃
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 .
I can't believe you just made a fancy website in just 45min.
Besides a great designer, you are an awesome teacher, keep it up!
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 !!
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.
wooow.... this is an awesome Tutorial i was wondering how to convert xd design but now have a clear understanding thanks.....
It is great and clear tutorial specifically for the biggers, thanks.
Awesome animation and gorgeous work!!
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 :)
hats off to the developers who code😂
Believe in yourself, our determination is sotNice tutorialng that never lets us down
Hello, is there an easy way to export from adobe XD to html / css without writing code?
wix
yes us the app anima for example.
@@maamouhinda7722 is it free
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?
Yes, XD is for making prototypes (designing), after that you still need to code it
@@frials4757 yea is only a preview and its very important!!
Excellent class! I learned a lot that I did not know. Thanks.
(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
thank you so much for sharing this tutorial ...
Very Insightful......Must Learn XD To The Max.....
you're amazing! thank you! definitely picked up a few tips & tricks :)
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 ?
Thanks for your best xd to html tutorial
Love from Pakistan
Thanks for this awesome tutorial!
You rocking with many technology
Totally agree, bro!
I love your tutorials,
Love it! Thanks for this tutorial :)
You deserve more than 1m sub
Wow, how cool !!
My congratulations, I'm very happy to see this video lesson helped me more, congratulations.
Great Jobs!!! You got my suppose as usual
No matter what i do i cannot get the Js to work. i have copies everything without result. Any thing i am doing incorrectly?
Awesome work dude! You rock.
WoW I learned so much Thank you
I wish you would have provided a link to the code or XD files.
26:44 display: border-box; ?
Love your vids!
This dude is the king of sarcasm 🤣🤣 I love him... See 9:05 to 9:15
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.
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..
How cool your tutorial is! Thanks for your worth experience shared. ^^
Hello, nice to see a Vietnamese here. Any product was launched after watching this video? :D
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.
This is doing it all by hand... shouldn't there be a way for you to export FROM Adobe XD?
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
We'd appreciate a javascript tutorial series!
Thank you so much! This tutorial was a pleasure to watch! Please do more of these! ❤
Really wonderful
@DesignCourse
so in this way you work 2 times ? i though that XD tool will help exporting this to html and css
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.
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
great video! keep up the good work!
thank u soo much it helped a lot
Oh man, you are a blessing! Thank you so much!
How could I add an animation when the .show-menu is remove, when we hit the cross bar to close the nav section??
Thank you Gary. You're awesome!
All of this code for small result , it's crazy
I'm enjoying every bit of vanilla CSS. No frameworks, nothing. Grid has made a ton easier.
Thank u so much for tutorial
tNice tutorials tutorial was very satisfying
Awesome tut! Vanilla JS is cool!
at 16:07 there is no time option in trigger pls anyone help me
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 ???
really i so long search this video. thx u very much.
Thank You so much!
Awesome stuff !
Thank you =)
Good Video and Thank You
What do I do if I accidentally clicked x and there is just a fruit on the screen
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.
Dope content as always!
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?
So what I gather from this, Adobe XD is a waste of time. You build it XD then have to rebuild it from scratch code in HTML/JS/CSS? Hard pass! I was excited to see how to just export code that might be generated from XD but this does nothing. So disappointing.
great!!
Whats the use of designing in XD then replicating again with coded html
It's called prototyping, but I'm agree with you, this is double work...
XD should just export as a web project using at least bootstrap
XD or prototyping is an essential step to designing. If you were working with a client or company too, you’d want the project approved in XD or other app before moving on to coding. It makes less work in the end by getting a proper structure and design before trying to come up with it on your own. Viewing Ui design in apps like XD is a great step because you can see how something might look before implementing it (it’s much easier to change an idea in a prototype than it is to change via html and css)
I agree with o.p exporting direct to html css would be awesome sve you ha ING to write out the whole code for this especially for someone not so competent with html css would act as a tutorial for them. I want this page to do this how does it do it. But I guess its harder for the prototype transitions and such as well do you want it in python js c c# c++ OR other flavours.
@@reggy698 Is it possible, using html, css and js to create complex transitions and animation that we can make easly on adobe xd?
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 ??
How do you also animate the menu closing?