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

Опубликовано: 07 Октябрь 2024
на канале: codeSTACKr

16,152

492

FREE! Sign up for Embold: https://embold.io/?utm_source=Youtube...

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-pa...
✅ Frontend Mentor Challenge: https://www.frontendmentor.io/challen...

❓ Do you want me to build the mobile and bonus version of this game?
Rock Paper Scissors Lizard Spock:    • The Big Bang Theory -- Rock, Paper, S...
_____________________________________

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

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

🛠️ Tools I use:
🟠 codeSTACKr Theme: https://marketplace.visualstudio.com/...
🟠 STACKr Code Font (Exclusive to my VS Code Course - https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/...
_____________________________________

⏱️ 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 -    • Web Development - Beginners Roadmap (...
_____________________________________

🌐 Connect With Me:
Website: https://www.codestackr.com
Twitter:   / codestackr
Instagram:   / codestackr
Facebook:   / 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