Summary

Keywords

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

Full Transcript

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