Adobe XD Web Design Tutorial

Adobe XD Web Design Tutorial


Learn how to make this mockup a reality in the browser:
(click show more)
Here’s a written tutorial of this video:

Download the assets needed to follow along with this tutorial here (this includes the final Adobe XD project file, too):


Note: I received written permission from Dennis Schäfer to use his Behance portfolio and creative works as the example portfolio for this project.

View his portfolio here:

…and his personal website here:

– – – – – – – – – – – – – – – – – – – – – –

Subscribe for NEW VIDEOS weekly!

My site:
My personal FB account:
Coursetro FB:
Coursetro’s Twitter:

Join my Discord!
^-Chat with me and others

– – – – – – – – – – – – – – – – – – – – – –

Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn,, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website

Come to my discord server or add me on social media and say Hi!


  1. At the end of this tutorial, you can continue on with the project by bringing to life the mockup you designed using Angular 2, and connecting to the Behance API to pull live projects from your account!

  2. Can it be exported in HTML5 ?

  3. how can I get a adobe xd software please prvide me a link .. or we need to buy ??

  4. Great Video but when I drag and drop the images the image fills the entire artboard not just in the rectangular portion please help

  5. thanks so much but always give us a preview of the finished project before we start. thanks again

  6. your teaching style is very good.thank you so much for sharing you experience.

  7. Thanks dude! Learning some XD.

  8. You could just use text for backend dev icon

  9. If you are just starting out as an online entrepreneur, This >> is a valid option to test out. It has lots of features that will come in handy later on when you are more experienced. BA even includes an email marketing service (Mailingboss), so you don’t have to purchase an external one.

  10. I am surprised you didn't even use the "align" buttons 😀 Nonetheless, great work! I learned things so thank you 🙂

  11. Thanks for this wonderful video man

  12. I'm still downloading XD, but if it's like PS you should hold Alt to copy stuff, instead of Ctrl CV.

  13. How do i get the link for it

  14. Trust me to use 1.5 speed. 😉

  15. 2019 and still no hover effect in XD :'(

  16. Hello, I am looking for alternatives to Adobe Muse because they will stop giving support in 2019-2020.

    In this video ( ) they talk about Adobe xD and I do not understand if it is really

    a template creator. Would it be better to use Adobe Spark or Squarespace?

    Thank you

  17. Sir your course in the description is your full course or your videos on utube is also covering full ui ux course ??plz reply I'm very confused…

Leave a Reply to Davis1337 Cancel Reply

Your email address will not be published. Required fields are marked *