Adobe XD to HTML Full Process

I will cover the full process of taking an Adobe XD design and developing it with HTML and CSS.

In this video I cover:

• Exporting basic elements like IMG's, SVG's, etc
• Preparing and building the Header, Menu, Sections and Footer
• Using CSS to ensure the styling of the sections fit the design
• Explaining and showing the process of how some items that need to be converted don't always work and need some extra time to get things right.

Hopefully, this video will help those looking to see the process behind developing sites in day to day business. In the next article, we might take a look at importing this into WordPress, adding in Responsive Design, etc.

Follow and support me:

Special thanks if you subscribe to my channel :)

• Youtube
• Patreon
• Twitter

Want to see more:

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

• Full Tutorial on how to use SASS to improve your CSS
• 4 Simple CSS Hover Transitions for your Elements Background
• How to implement Dark Mode with CSS new media call: prefers-color-scheme
• Creating a Mobile Design and Developing it

Comments

[Pete Steven]

This is very informative for people that are starting out, so they can figure out how all this works. It would be great if you could cover automation tools too, like for instance Desech Studio that converts the adobexd file to html/css.

It's not 100% pixel perfect, but it does automate the nesting hierarchy, the grid positioning and most of the styling. You will only need to adjust the margins and sizes.

[Travis Simpson]

Followed this while working on an xd document I was given as a test for a job, super helpful and pointed out a lot of concepts to apply to it, thanks!