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

Mobile Web Development
Google via Udacity
iDESWEB, Introducción al desarrollo web
Miríadax
Information Design
University of California, San Diego via Coursera
Advanced Styling with Responsive Design
University of Michigan via Coursera
Front-End Web UI Frameworks and Tools
The Hong Kong University of Science and Technology via Coursera