Build Your Own Memory Card Game with HTML, CSS, and JavaScript - Beginner-Friendly Tutorial

Опубликовано: 07 Февраль 2023
на канале: JavaScript Academy
26,342
341

Learn how to build a memory card game from scratch with HTML, CSS, and JavaScript in this beginner-friendly tutorial! In this project, we will use a JSON file as a source of data and a CSS grid to create a visually appealing layout. We will also implement a Fisher-Yates shuffle algorithm to randomize the cards and a scoring system to keep track of your progress. The animation of the card flip will add an extra touch of excitement to the game. Whether you're new to web development or just looking to brush up on your skills, this tutorial is perfect for you! Follow along and create your own memory card game with #javascript and enhance your front-end development skills. Get started now! #beginner #tutorial.

Source code:
https://github.com/javascriptacademy-...

⏱ Timestamps
00:00 Introducing the project
00:36 Implementing the HTML markup
02:26 Adding the styles with CSS
05:22 Start javascript implementation
06:45 Fisher-Yates Shuffle algorithm
07:19 Writing the game logic
10:43 The finished game
11:02 Outro

📢 Shoutout:
Fruit icons created by Smashicons - Flaticon: https://www.flaticon.com/free-icons/f...

🔗 Links:
🌐 https://javascriptacademy.dev
🍺 Support free education and buy me a beer: https://ko-fi.com/adamnagy 💬 Join our community on Discord:   / discord  
📧 Newsletter https://www.getrevue.co/profile/dev_a...
🐦 Twitter:   / dev_adamnagy  
📷 Instagram   / javascriptacademy  


Смотрите видео Build Your Own Memory Card Game with HTML, CSS, and JavaScript - Beginner-Friendly Tutorial онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь JavaScript Academy 07 Февраль 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 26,34 раз и оно понравилось 34 людям.