← All freeCodeCamp videos

Memory Card Game - JavaScript Tutorial

184,462 views 4,278 likes 2018-08-13 34:16 Watch on YouTube ↗ freeCodeCamp ↗
FrontendJavaScript

Chapters (12)

Show the creator's full description
Learn the fundamentals of pure javascript by building a memory card game. No frameworks or libraries, just vanilla JavaScript. This video will cover how to: ‣ select elements in the DOM with querySelector ‣ iterate through lists with forEach ‣ add/remove an element class ‣ add/remove event listeners ‣ timeout ‣ html5: data-attribute ‣ css3: positioning, flexbox, perspective, backface-visibility, transitions 🔗Demo: https://marina-ferreira.github.io/memory-game/ 💻Repo: https://github.com/code-sketch/memory-game/ 💻Finished files: https://marina-ferreira.github.io/projects/js/memory-game/ ❤️ Try interactive JavaScript courses we love, right in your browser: https://scrimba.com/freeCodeCamp-JavaScript (Made possible by a grant from our friends at Scrimba) ⭐️ Course Contents ⭐️ ⌨️ (00:00) Intro ⌨️ (00:47) Basic Structure / Create the Project ⌨️ (03:53) Board HTML ⌨️ (07:13) Board Styles ⌨️ (12:41) Flip Card ⌨️ (15:53) 3d Effect / CSS3 Perspective ⌨️ (18:25) Store Cards ⌨️ (22:37) Match Cards ⌨️ (25:12) Refactoring ⌨️ (27:27) Lock Board ⌨️ (28:53) Card Double Click ⌨️ (31:04) Shuffling 🎥Tutorial by Code Sketch. Check out the Code Sketch channel for more great tutorials: https://www.youtube.com/channel/UCHFmShpjG-8N52O0JD2ut3A/ -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://medium.freecodecamp.org

Description and video by freeCodeCamp.org. This page is an independent companion view; the video is embedded from YouTube.