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