YoVDO

Memory Card Game - JavaScript Tutorial

Offered By: freeCodeCamp

Tags

Javascript Courses Game Development Courses Flexbox Courses HTML5 Courses CSS3 Courses Event Listeners Courses

Course Description

Overview

Build a memory card game using pure JavaScript in this comprehensive tutorial. Master fundamental concepts like DOM manipulation, event handling, and advanced CSS techniques. Learn to select elements with querySelector, iterate through lists using forEach, manage element classes, implement timeouts, and utilize HTML5 data attributes. Explore CSS3 features including positioning, flexbox, perspective, backface-visibility, and transitions. Follow along as the tutorial covers creating the basic structure, designing the game board, implementing card flipping mechanics, adding 3D effects, storing and matching cards, refactoring code, locking the board, handling double-clicks, and shuffling cards. Access the demo, source code repository, and finished files to enhance your learning experience.

Syllabus

) Intro.
) Basic Structure / Create the Project.
) Board HTML.
) Board Styles.
) Flip Card.
) 3d Effect / CSS3 Perspective.
) Store Cards.
) Match Cards.
) Refactoring.
) Lock Board.
) Card Double Click.
) Shuffling.


Taught by

freeCodeCamp.org

Related Courses

Programming Languages
University of Virginia via Udacity
Building a Basic Website
University of Massachusetts Amherst via Independent
iDESWEB, Introducción al desarrollo web
Miríadax
Web Engineering II: Developing Mobile HTML5 Apps
Technische Hochschule Mittelhessen via iversity
Web Application Architectures
University of New Mexico via Coursera