DEV Community

Cover image for Adobe XD to Wordpress | Full Development Process for Making a Website
Adrian Twarog
Adrian Twarog

Posted on • Updated on

Adobe XD to Wordpress | Full Development Process for Making a Website

This tutorial is long (4-5 hours) but will cover everything required for developing every aspect along the way. We will start with an Adobe XD design for Desktop, Tablet and Mobile, with the home page and subpages, and see exactly what is required to build all the elements out.

I spent a lot of time on this, so I hope you like it.

Full Playlist: Adobe XD to WordPress

This is the process for developing a full website, including converting all images, making sure it's responsive and integrated with a CMS like WordPress takes a long time.

In this video, we cover topics such as:

  • Exporting Elements from Adobe XD
  • Installing WordPress and a theme builder
  • Setting up our theme file in CSS / SCSS
  • Creating our Header Navigation
  • Creating our Home page content
  • Developing a Footer
  • Adding Responsive design to all elements on the page
  • Ensuring a Tablet and Mobile design based on XD

I also have timestamps for this video which will include:

I have also put together a second part to this series where I built out the other parts of the website. See part 2 below:


Part 2 | Adobe XD to WordPress

In this video we cover:

I hope you enjoy the whole process. I will be doing another video to talk more about the development of this site for those who want to follow along!

Part 3 is on it's way...

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 (4)

Collapse
 
qm3ster profile image
Mihail Malo

Rawr xD lol

Collapse
 
kerriclarkdes profile image
Kerri Clark Designs

I notice that it's not subtitled for the deaf and hard of hearing. I strongly suggest you guys be WCAG compliant. I wish I could understand what you're saying in the video.

Collapse
 
kerriclarkdes profile image
Kerri Clark Designs

Just saw that the second video is subtitled.

Collapse
 
yasithakasthuri profile image
Yasitha Kasthuri

XD to WordPress Starting from 5USD.
fiverr.com/share/plwWxZ