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

Apprenez à créer votre site web avec HTML5 et CSS3
EFREI via OpenClassrooms
HTML, CSS, and Javascript for Web Developers
Johns Hopkins University via Coursera
Introduction to CSS3
University of Michigan via Coursera
Desarrollo de servicios en la nube con HTML5, CSS3, JavaScript 6-7-8-9 y node.js
Universidad Politécnica de Madrid via Miríadax
Desarrollo en HTML5, CSS y Javascript de Apps Web, Android, IOS...
Universidad Politécnica de Madrid via Miríadax