DEV Community

Cover image for Adobe XD to Fully Responsive WordPress Site
Adrian Twarog
Adrian Twarog

Posted on

Adobe XD to Fully Responsive WordPress Site

Converting an Adobe XD design by actually coding it by hand to work with WordPress and be fully responsive is no small task.

If you are interested in what it takes to move a design from just UI and develop it manually, including all the steps if literally starting with a blank canvas and coding out every container, class and style, I take you through the entire process here.

Included in this video:

  • Installing WordPress
  • Adding Understrap theme builder
  • Preparing the theme for usage
  • Developing the code with HTML from our design (Header, Hero Banner, Sections, Footer, etc)
  • Adding styling to our code using CSS
  • Adding responsive design

This is a slightly longer video, but hopefully, this video gives you insights into the whole process of how a design to development job is normally completed.

Follow and support me:

Special thanks if you subscribe to my channel :)

Want to see more:

I will try to post new great content every day. Here are the latest items:

Top comments (3)

ramshengale profile image
Ram Shengale

Thanks for sharing the super comprehensive tutorial on how to convert XD design to WordPress. We at Fantastech provide this as a service, but follow different workflow and prefer to build sites using a base theme and a builder like Beaver Builder. That makes the development process super fast.

eddsaura profile image
Jose E Saura

Dude, I HAVE to see this. Im just commenting here to remind, also saved he post.

I'm really interested in this.

Have you tried frontity?

yasithakasthuri profile image
Yasitha Kasthuri

XD to WordPress Starting from 5USD.