Chapters (17)
- 0:00Introduction
- 5:26Getting Started
- 7:00Live Server Extension
- 9:50Create Cards - HTML
- 14:44Create the Game Play Grid
- 19:55Create Cards Dynamically - JS Code
- 28:46Initialise Card Positions
- 34:39Load Game and Start Game
- 38:43Stack Cards
- 41:53Flip Cards
- 45:14Shuffle Cards
- 49:28Deal Cards
- 54:37Choose Card
- 1:16:56Styling and Layout
- 1:24:28Animation
- 1:32:39Responsive Layout
- 1:36:43Local Storage
Show the creator's full description
Improve your JavaScript skills by creating a basic card game with HTML and CSS. ♣️♥️♠️♦️
This tutorial not only covers creating a basic card game using JavaScript
but also:
- how to create dynamic user interactive code using vanilla JavaScript
- Creating some animation effects
- Responsive layout design using CSS grid, CSS FlexBox and media queries
- How to dynamically change the positions of grid cells, so as to randomize the positions of the cards contained in a css grid using JavaScript,
- localStorage functionality
- And much More…
💻 Code: https://github.com/GavinLonDigital/HuntTheAceJSGame
✏️ Gavin Lon created this tutorial. Check out his channel: https://www.youtube.com/@GavinLon
❤️ Try interactive JavaScript courses we love, right in your browser: https://scrimba.com/freeCodeCamp-JavaScript (Made possible by a grant from our friends at Scrimba)
⭐️ Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:05:26) Getting Started
⌨️ (0:07:00) Live Server Extension
⌨️ (0:09:50) Create Cards - HTML
⌨️ (0:14:44) Create the Game Play Grid
⌨️ (0:19:55) Create Cards Dynamically - JS Code
⌨️ (0:28:46) Initialise Card Positions
⌨️ (0:34:39) Load Game and Start Game
⌨️ (0:38:43) Stack Cards
⌨️ (0:41:53) Flip Cards
⌨️ (0:45:14) Shuffle Cards
⌨️ (0:49:28) Deal Cards
⌨️ (0:54:37) Choose Card
⌨️ (1:16:56) Styling and Layout
⌨️ (1:24:28) Animation
⌨️ (1:32:39) Responsive Layout
⌨️ (1:36:43) Local Storage
🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan
--
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
Description and video by freeCodeCamp.org. This page is an independent companion view; the video is embedded from YouTube.