DEV Community

Cover image for XD to HTML & CSS Tutorial

Posted on

XD to HTML & CSS Tutorial

Just pushed another tutorial. This time we cover converting an Adobe XD mockup into a full responsive HTML & CSS website! We build the layout using the modern CSS Grid, as well as using Flexbox for menus and other 'inner' elements. Hope you enjoy!

Please consider subscribing to the YouTube Channel!

Here are a few of the CSS tips & tricks used in the video

  • CSS Grid Template Columns - To create a 6 column grid
  • CSS Grid Template Rows Rows - To create rows based on fixed height and content height
  • CSS Grid Template Rows Areass - To align each of our main content areas into the grid via grid-area names
  • CSS Grid Areas - Define the area names of each of our main content divs
  • CSS Media Queries - Adding a simple media query to make our CSS wireframe responsive

Top comments (1)

wilsmex profile image

Part 2 which covers all the inners will be out next week. Happy quarantine to all!