YoVDO

JavaScript Tutorial - Create a Card Game

Offered By: freeCodeCamp

Tags

Javascript Courses Computer Science Courses Flexbox Courses HTML Courses Responsive Design Courses Media Queries Courses CSS Grid Courses Animation Effects Courses

Course Description

Overview

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

Related Courses

Advanced Styling with Responsive Design
University of Michigan via Coursera
Benefits of Bootstrap
Coursera Project Network via Coursera
Web Development - CSS3 - Scratch till Advanced Project Based
Udemy
Creating Responsive Web Design
Udemy
Complete JAVASCRIPT with HTML5,CSS3 from zero to Expert-2024
Udemy