Memory Card Game - JavaScript Tutorial

Channel:
United States freeCodeCamp.org
Subscribers:
10,700,000
Published on ● Video Link: https://www.youtube.com/watch?v=ZniVgo8U7ek


Duration: 34:16
174,895 views
4,188

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/

⭐️ 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



Other Videos By freeCodeCamp.org


2018-08-222018 Top Contributor Party in New York City - Highlights and Interviews
2018-08-21Build a Chat App - React Tutorial Course
2018-08-20Logic for Programmers: Set Theory
2018-08-18Top Contributors 2018 Party in New York City for freeCodeCamp.org
2018-08-17ASP.NET Core 2.0 Gallery App with Azure - Tutorial
2018-08-16The Five Ws of Atomic Design
2018-08-15C Programming Tutorial for Beginners
2018-08-14S3 Operations with AWS Lambda
2018-08-14Answering tricky JavaScript interview questions
2018-08-13React, Node, and the Salesforce API (P5D92) - Live Coding with Jesse
2018-08-13Memory Card Game - JavaScript Tutorial
2018-08-13CSS Shapes & Friends: upgrade your page layouts
2018-08-09Pug Template Engine - Full Tutorial for Beginners
2018-08-09The Dangers of Being a Web Developer
2018-08-08React Routing, Props, and Inputs (P5D91) - Live Coding with Jesse
2018-08-08Learn Java 8 - Full Tutorial for Beginners
2018-08-07Parallax Tutorial - Scrolling Effect using CSS and Javascript
2018-08-07JavaScript Modules Past & Present
2018-08-06React Search Filters (P5D90) - Live Coding with Jesse
2018-08-03Python Django Framework Full Course - Learning with the Docs
2018-08-02Developing for the rest of the world


Tags:
javascript
javascript tutorial
learn javascript
javascript tutorial for beginners
vanilla javascript
javascript course
javascript game
pure javascript
pure javascript game
pure javascript projects
pure js game
pure js project
vanilla js
learn javascript for beginners
vanilla javascript project
vanilla javascript game
vanilla js game
vanilla js project
vanilla js tutorial
javascript game for beginners
javascript game tutorial
tutorial
beginners
how-to