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