Creating a deck of cards with just CSS may seem easy, but it is quite a bit more difficult than you think. In this video I will attempt to create an entire deck of cards with CSS that looks exactly like a normal deck of cards. I am also attempting to solve this problem live for the first time ever so you can see my thought process as I go through everything.


Materials/References:

GitHub Code: https://github.com/WebDevSimplified/css-deck-of-cards
Example Site: https://deck.of.cards/old


Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
01:28 - Card HTML
03:18 - Basic Card CSS
05:30 - Card Pip CSS
17:26 - Card Corner Numbers CSS
23:53 - Basic Card JavaScript
30:52 - Finishing Cards 3-10
50:05 - Ace and Face Cards


#CSS #WDS #LiveCoding