New to CSS Grid? Watch the full Crash Course here:    • CSS Grid Crash Course | Beginners Tut...  

In this video I go over how to create this complete website using only HTML and CSS. I show you how I take Sketch designs to turn it into HTML and CSS. Then I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the CSS. I use CSS Grid, Flexbox and CSS Variables to make a fully responsive layout from Desktop to Mobile View.

Codepen: https://codepen.io/angeladelise/pen/Q...

In this video I show you:
0:38 Sketch UI Design
1:28 HTML Code
2:10 Structure defined in the Design File
4:17 Start CSS coding
4:55 CSS Variables
5:19 How to declare a CSS Variable
6:00 What is EM unit
7:30 How to use a CSS Variable
8:39 How to make a responsive navbar
9:54 How to use flexbox
11:40 How to change the color of an SVG
12:09 How to change the flex position of the first child
13:29 How to make a responsive header with flexbox
14:41 How to design the search bar
17:00 How to use CSS Grid
17:52 How to define the number of columns for CSS Grid
19:20 How to style the containers
22:30 Mobile layout design
22:52 How to make the mobile layout with CSS Media Query
23:31 How to make the CSS Grid Responsive
24:04 How to make Flexbox Responsive
25:44 Why to use EM instead of pixels
26:22 How to override CSS Variables locally
27:18 How to change the proportion of all the elements with font size
27:54 Before and After
28:06 Final Review

Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...

Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog:   / angeladelise  

#designtocode #sketchtocode #sketchtohtmlcss