New to CSS Grid? Watch the full Crash Course here: • CSS Grid Crash Course ...
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: 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: www.youtube.com/watch?v=D3ZF2...
Let's Connect
Dribbble: dribbble.com/angeladelise
Blog: / angeladelise
#designtocode #sketchtocode #sketchtohtmlcss
7 апр 2020
