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, Lynda.com, Pluralsight and Envato Network.

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

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

31 comments

  1. Hi! Thanks for the videos! Is there a way for XD to show you the code so you can copy it without writing it? I’m new to this and am struggling to understand all the coding. Thank you !!

  2. I see someone creating a mockup but where is the design? isnt design by definition the creation of something by optimizing for a specific need?

  3. So if you want to build an interactive website in adobe xd you have to work with multiple sectons right? now one big design?

  4. Great video. This is the Best Web Design Professional Expert Designer Tehran.

    Leave the design of your own website to the professional design team of Spad Company. Your website reflects the values, beliefs and identity of your business, also referred to as a virtual office. (Best Web Design Professional Expert Designer Tehran)(بهترین طراح متخصص حرفه ای طراحی وب تهران)With a professional website, your business will be available to anyone who needs your services anywhere in the world, 24 hours a day, 7 days a week. Contact us if you need professional website design.

    More information Click this Links:https://www.spad.co/services/website-design

  5. Thanks a lot bro. I just started learning Xd. Probably the best free tutorial I could get to learn.
    I would request you to make a video on the latest Xd features of 2020.
    Would be really helpful, Thanks 🙂

  6. You know that you shouldn't highlight backend development on your portfolio when you decide to illustrate it with HTML brackets xD

  7. Sorry for the stupid question maybe, but these fonts sizes are the most ideal to use in web? because sometimes I get in doubt about what is the best sizes for it. Thanks in advance for who can answer me this little doubt!

  8. I would like to build a 7-10 player social party game. Is such a thing possible via Adobe XD? That includes people logging in, clicking on buttons when it's their turn to play, and a scuffle cards build in function as well as randomizing cards, etc…

  9. Thanks for this, but this one thing is driving me nuts: 'Front End' is two words and 'Back End' is two words. Oy.

Leave a comment

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