How To Build A Simple Card Game With JavaScript -

How To Build A Simple Card Game With JavaScript

Web Dev Simplified
Views: 117971
Like: 2771
The first 1000 people to use the link will get a free trial of Skillshare Premium Membership:

JavaScript Simplified Course:

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:
CSS Data Attribute Blog Article:
Emmet Tutorial:

🧠 Concepts Covered:

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

🌎 Find Me Here:

My Blog:
My Courses:

⏱️ 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

This video was sponsored by Skillshare

#CardGame #WDS #JavaScript


  1. Your videos are great…succinct and informative.

  2. how do add a picture after the even of winning or losing happens?

  3. I would love for your help to develop an app! This is amazing!

  4. Love watching your videos!
    Note: your shuffle function will never have the last card remain in the last slot.

  5. Github Copilot knows a bunch of this code already

Leave a Reply

Your email address will not be published.