Styled Table Design with HTML & CSS | Dribbble UI Design to Code
10.7K views · 2020-12-14
UI Design
New to CSS Grid? Watch the full Crash Course here: https://www.youtube.com/watch?v=yOPCQ5nD1Vs&t=214s
In this video I go over how to create this stylized table using only HTML and CSS. I show you the full front end coding tutorial, where I recreate a Dribbble UI design with code. I go over the structure of the elements in HTML and then write all of the styling and effects with CSS.
Enjoying this tutorial? 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/mdEZzoe?editors=1100
In this video I show you:
0:00 - Intro
0:35 - Dribbble UI Design
1:16 - Starting Code
1:43 - HTML Code
3:15 - CSS Code
7:14 - Code Overview
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...
--
Gear
Microphone - https://amzn.to/34bDTxH
Hard Drive - https://amzn.to/30m5E5M
--
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise
--
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!
In this video I go over how to create this stylized table using only HTML and CSS. I show you the full front end coding tutorial, where I recreate a Dribbble UI design with code. I go over the structure of the elements in HTML and then write all of the styling and effects with CSS.
Enjoying this tutorial? 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/mdEZzoe?editors=1100
In this video I show you:
0:00 - Intro
0:35 - Dribbble UI Design
1:16 - Starting Code
1:43 - HTML Code
3:15 - CSS Code
7:14 - Code Overview
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...
--
Gear
Microphone - https://amzn.to/34bDTxH
Hard Drive - https://amzn.to/30m5E5M
--
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise
--
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!