Sign Up Form | Figma to HTML CSS
9.8K views · 2020-07-27
UI Design
Watch Part 1 Design Tutorial here: https://www.youtube.com/watch?v=B4_VtUnRUzw
In this video I go over how to create this Sign Up form using only HTML and CSS. 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 styling and effects with CSS. I use Flexbox for the layout of the form elements and then add hover and focus states. I created this animated sign up form by including transitions so the design animates from the regular state to the hover and then to the focus state.
Enjoy this design to code mini-series? Subscribe to stay up to date with my latest content: https://www.youtube.com/channel/UC_TjoSnaI3CTgIgmSn3rruA?sub_confirmation=1
Codepen: https://codepen.io/angeladelise/pen/PoZpeyW
In this video I show you:
0:58 - Figma design overview
1:19 - Starting Code
1:42 - HTML Code
4:13 - CSS Code
7:11 - Sign Up Form CSS
12:02 - Hover and Focus States
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: https://medium.com/@angeladelise
#signupform #htmlcss #designtocode
In this video I go over how to create this Sign Up form using only HTML and CSS. 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 styling and effects with CSS. I use Flexbox for the layout of the form elements and then add hover and focus states. I created this animated sign up form by including transitions so the design animates from the regular state to the hover and then to the focus state.
Enjoy this design to code mini-series? Subscribe to stay up to date with my latest content: https://www.youtube.com/channel/UC_TjoSnaI3CTgIgmSn3rruA?sub_confirmation=1
Codepen: https://codepen.io/angeladelise/pen/PoZpeyW
In this video I show you:
0:58 - Figma design overview
1:19 - Starting Code
1:42 - HTML Code
4:13 - CSS Code
7:11 - Sign Up Form CSS
12:02 - Hover and Focus States
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: https://medium.com/@angeladelise
#signupform #htmlcss #designtocode