The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: https://skl.sh/webdevsimplified11201

JavaScript Simplified Course: https://javascriptsimplified.com

Card games may appear simple on the surface, but there is actually a lot of planning and problem solving that goes into creating a card game. In this video I show you how to create a deck of cards in JavaScript and CSS. Then I show you how to build a the simple card game war with this deck of cards.


Materials/References:

GitHub Code: https://github.com/WebDevSimplified/War-Card-Game
CSS Data Attribute Blog Article: https://blog.webdevsimplified.com/2019-10/use-data-attributes-in-css
Emmet Tutorial: https://youtu.be/V8vizNQKtx0


🧠 Concepts Covered:

- OOP JavaScript
- CSS data attributes
- JavaScript modules
- How to plan a large project


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:31 - Demo
02:16 - Deck of Cards Setup
13:58 - HTML
15:39 - CSS
24:56 - Dynamically Render Cards
28:19 - Implement Game Logic
42:48 - Outro

Disclaimer:
This video was sponsored by Skillshare

#CardGame #WDS #JavaScript