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

Build a Chat UI application using CSS3 Flexbox
Coursera Project Network via Coursera
Build CSS3 Flexbox Holy Grail Layout in Angular
Coursera Project Network via Coursera
Build Responsive CSS3 Flexbox Holy Grail Layout
Coursera Project Network via Coursera
Build Responsive Image Gallery UI using CSS3 Flexbox
Coursera Project Network via Coursera
Build Responsive Service Page UI using CSS3 Flexbox
Coursera Project Network via Coursera