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)
Part 2 which covers all the inners will be out next week. Happy quarantine to all!