Complete Website in HTML & CSS | Responsive CSS Grid, Flexbox & CSS Variables | Sketch to Code
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
Watch video Complete Website in HTML & CSS | Responsive CSS Grid, Flexbox & CSS Variables | Sketch to Code online without registration, duration hours minute second in high quality. This video was added by user Angela Design 08 April 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 30,75 once and liked it 1 thousand people.