Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

JavaScript Tutorial - Create a Card Game

via freeCodeCamp

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
Enhance your JavaScript skills by creating a basic card game with HTML and CSS in this comprehensive tutorial. Learn to develop dynamic user-interactive code using vanilla JavaScript, implement animation effects, and design responsive layouts using CSS grid, FlexBox, and media queries. Explore techniques for randomizing card positions in a CSS grid, utilize localStorage functionality, and much more. Follow along as you build a complete card game from scratch, covering topics such as creating cards dynamically, initializing card positions, implementing game logic for shuffling and dealing cards, and adding interactive features like card flipping and selection. Dive into styling and layout techniques, including responsive design principles, to create a polished and professional-looking game. By the end of this 1-2 hour tutorial, you'll have gained practical experience in combining JavaScript, HTML, and CSS to create an engaging and interactive web-based card game.

Syllabus

⌨️ Introduction
⌨️ Getting Started
⌨️ Live Server Extension
⌨️ Create Cards - HTML
⌨️ Create the Game Play Grid
⌨️ Create Cards Dynamically - JS Code
⌨️ Initialise Card Positions
⌨️ Load Game and Start Game
⌨️ Stack Cards
⌨️ Flip Cards
⌨️ Shuffle Cards
⌨️ Deal Cards
⌨️ Choose Card
⌨️ Styling and Layout
⌨️ Animation
⌨️ Responsive Layout
⌨️ Local Storage

Taught by

freeCodeCamp.org

Reviews

Start your review of JavaScript Tutorial - Create a Card Game

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.