XD to HTML & CSS Tutorial

wilsmex

FollowAndrew

Posted on March 19, 2020

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
💖 💪 🙅 🚩
wilsmex
FollowAndrew

Posted on March 19, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

XD to HTML & CSS Tutorial
css XD to HTML & CSS Tutorial

March 19, 2020