Web Development Tutorial (JavaScript, HTML, CSS) Rock Paper Scissors Game

Channel:

codeSTACKr

Subscribers:

296,000

Published on April 9, 2021 1:00:11 PM ● Video Link: https://www.youtube.com/watch?v=P_H4_miTKsI

Category:

Tutorial

Duration: 1:29:12

8,857 views

363

FREE! Sign up for Embold: https://embold.io/?utm_source=Youtube&utm_medium=Video&utm_campaign=JesseApr21

Embold Community platform: https://community.embold.io/
_____________________________________

Today, we are going to tackle a Frontend Mentor challenge and build this Rock, Paper, Scissors game.
We'll use HTML, CSS, and JavaScript to build this game.

🔗 Source Code: https://github.com/codeSTACKr/rock-paper-scissors-video
✅ Frontend Mentor Challenge: https://www.frontendmentor.io/challenges/rock-paper-scissors-game-pTgwgvgH

❓ Do you want me to build the mobile and bonus version of this game?
Rock Paper Scissors Lizard Spock: https://youtu.be/iSHPVCBsnLw
_____________________________________

🦸 Become A VS Code SuperHero Today: https://vsCodeHero.com
🧑🏾🤝🧑🏽 Join my Discord developer community: https://discord.gg/A9CnsVzzkZ
_____________________________________

🚢 Deploy for FREE on Vercel: https://vercel.com/ambassadors/codestackr
📚 FREE 7-Day trial at Treehouse: https://treehouse.7eer.net/codeSTACKr
_____________________________________

🛠️ Tools I use:
🟠 codeSTACKr Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
🟠 STACKr Code Font (Exclusive to my VS Code Course - https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions
_____________________________________

⏱️ Timestamps ⏱️
00:00:00 - Intro
00:00:21 - Sponsor: Embold
00:01:12 - Project Overview
00:03:15 - HTML Clean-up
00:04:30 - Header HTML & CSS
00:16:02 - Game Component HTML & CSS
00:32:17 - Footer
00:34:15 - Rules HTML & CSS
00:37:25 - Rules Modal HTML & CSS
00:43:55 - Rules Model JavaScript
00:46:01 - Fix Animation on Page Reload
00:47:59 - Results HTML & CSS
00:53:26 - Results JavaScript
01:05:43 - Winner HTML & CSS
01:11:23 - Winner JavaScript
01:16:22 - Winner More CSS & JavaScript
01:20:14 - Play Again Button JavaScript
01:23:24 - Keep Score JavaScript
01:26:02 - Embold Demo
_____________________________________

💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________

👀 Watch Next:
Playlist: Web Development For Beginners - https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________

🌐 Connect With Me:
Website: https://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr
Facebook: https://facebook.com/codeSTACKr
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#codeSTACKr #WebDevelopment #learntocode