Responsive Profile Card | Figma to HTML & CSS
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 a responsive profile card using only HTML and CSS. I show you the full front end coding tutorial, where I take a design I created in FIgma and then map out the structure of the elements in HTML. I use CSS grid for the layout and then show you how to make the card match the Figma design with CSS styling and effects.
Codepen: https://codepen.io/angeladelise/pen/x...
In this video I show you:
0:29 - Figma Design Project
1:36 - Starting HTML Code
1:56 - Grid Layout HTML Code
2:10 - Profile Card HTML Code
4:17 - CSS Code - Variables
4:59 - CSS Grid
6:15 - CSS Container
11:39 - Responsive Design
12:00 - Minmax() Explained
13:11 - Responsive Tablet view
14:31 - Responsive Desktop view
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