🚀 Built a Rock Paper Scissors Game using Pure HTML, CSS & JavaScript!
Excited to share my recent mini project — a fully functional Rock Paper Scissors Game built using only HTML, CSS, and basic JavaScript (no frameworks, no AI tools).
💡 Features:
🎮 Interactive Rock, Paper, Scissors gameplay
📊 Live Scoreboard
💾 Score persistence using Local Storage
🔄 Reset button to clear scores instantly
🔁 Automatically restores latest score even after closing & reopening the browser
This project helped me strengthen my understanding of:
-DOM Manipulation
-Local Storage
Basic Game Logic Implementation
Clean UI structuring with CSS
Small projects like these are helping me build strong fundamentals in JavaScript and frontend development.
More projects coming soon 🚀
#HTML#CSS#JavaScript#WebDevelopment#FrontendDeveloper#LearningByDoing#Projects
🚀 Day 25 of #30DaysOfJavaScript
Just built a ✊ Rock Paper Scissors Game using HTML, CSS & JavaScript!
🎮 It’s a simple game but helped me strengthen my core JavaScript concepts like logic building, DOM manipulation, and event handling.
🔥 Features:
✅ Player vs Computer gameplay
✅ Random AI moves
✅ Live score tracking
✅ Win / Lose / Draw logic
✅ Dark / Light mode toggle 🌙☀️
✅ Fully responsive UI 📱
🌐 Live Demo:
https://lnkd.in/gGdkuZaT
💻 GitHub Code:
https://lnkd.in/g5JkVdx3
📚 What I learned:
- Writing clean game logic
- Handling user interactions
- Updating UI dynamically
- Improving UI/UX with simple features
Consistency is the key 🔑 — 25 days strong and still going 💪
#JavaScript#WebDevelopment#FrontendDeveloper#100DaysOfCode#CodingJourney#HTML#CSS#Projects
🚧 Building in Public: Creating Monopoly with HTML, CSS & JavaScript 🎲
What started as a simple idea turned into a real challenge… so I decided to build a Monopoly game from scratch using pure HTML, CSS, and JavaScript.
From designing the board 🎯
To handling player movement 🧍♂️
To coding game logic and interactions ⚙️
It’s been fun, frustrating, and incredibly rewarding at the same time.
Here’s a quick preview of my progress 👇
I’m still improving it — adding smarter gameplay, better UI, and more features.
💡 If you were to play this, what feature would you want me to add?
#BuildInPublic#JavaScript#WebDevelopment#CodingJourney#FrontendDeveloper#Projects#100DaysOfCode
Built a Snake Game using HTML, CSS & JavaScript 🎮
Today I built the classic Snake Game from scratch using pure frontend
technologies 🚀
🛠 Tech Used:
HTML – Structure
CSS – Styling & Game Board Design
JavaScript – Game Logic & Movement
💡 What I implemented:
✔ Snake movement using arrow keys
✔ Food generation at random positions
✔ Score tracking system
✔ Collision detection (wall + self)
✔ Game Over logic
This project helped me understand:
DOM manipulation deeply
Event listeners (keydown events)
setInterval & game loops
Array manipulation for snake body tracking
Real-time UI updates
Building small games is one of the best ways to improve JavaScript logic 🔥
Next goal: Add levels & increasing speed 😎
What was the first game you built while learning JavaScript?
#JavaScript#WebDevelopment#FrontendDeveloper#CodingJourney#LearningInPublic
Just Built a Rock Paper Scissors Game Using JavaScript! ✨
I recently developed a Rock Paper Scissors game and it turned out to be a really fun and insightful learning experience.
Through this project, I strengthened my understanding of:
• DOM manipulation
• Event handling
• Game logic implementation
• Writing clean and structured JavaScript code
One thing I truly realized during this
It doesn’t matter how small the project is — what matters is consistency and learning by building.
JavaScript is such a powerful and exciting language
It allows us to create interactive and realistic applications from scratch.
Features of my project:
• Interactive UI
• Random computer moves
• Score tracking system
• Restart/New Game functionality
I’m continuously improving my frontend skills and excited to build more projects like this
🔗 Check it out here: [https://lnkd.in/dtCyARpX]
🔗 Live Demo here :[https://lnkd.in/dR_6wr48]
#JavaScript#WebDevelopment#FrontendDevelopment#CodingJourney#Projects#LearningByDoing
🎮 Built a Snake Game using HTML, CSS & JavaScript — with persistent high scores!
This project was more than just recreating a classic game. I focused on making it interactive and state-aware.
💡 Highlights:
• Smooth snake movement & keyboard controls
• Real-time score tracking
• 🧠 High score saved using LocalStorage (persists even after refresh)
• Game over + restart functionality
• Clean UI for better user experience
⚙️ One interesting challenge was managing game state and ensuring the high score updates correctly without breaking the flow.
This project helped me understand DOM manipulation, event handling, and how browsers can store data locally.
🚀 Next: Adding levels, sound effects, and mobile responsiveness!
Would love your thoughts and suggestions 🙌
#JavaScript#WebDevelopment#Frontend#Projects#Coding#100DaysOfCode
Just wrapped up building a Web Based Memory Matching Game using HTML, CSS, and JavaScript under the supervision of Ma'am Juhinah Batool
In this game, players flip cards to find matching pairs, with a move counter, timer, and audio feedback for correct or wrong matches. Images remain hidden until flipped, adding a fun challenge, and the dark neon theme gives it a clean, modern look.
Skills I practiced while building this:
DOM manipulation with jQuery
Event handling and game logic
CSS transitions and styling for a polished UI
Timer and state management in JavaScript
It was a great exercise in combining dynamic functionality with visual design, and it really strengthened my front-end development skills.
Check out the project and try it yourself:
https://lnkd.in/g8ctU5VX#WebDevelopment#JavaScript#HTML#CSS#FrontEnd#Coding
🐍 Built a Snake Game using HTML, CSS, and JavaScript!
I recently worked on building the classic Snake Game from scratch using Vanilla JavaScript. This project helped me practice DOM manipulation, game logic, and state management while creating an interactive browser game.
✨ Features of the game:
• Dynamic grid-based game board
• Smooth snake movement using keyboard arrow keys
• Random food generation
• Score system that increases when the snake eats food
• High score saved using Local Storage
• Timer to track gameplay duration
• Start Game and Game Over modals
• Restart functionality to play again instantly
🧠 Concepts I practiced while building this:
• DOM manipulation
• Event handling with keyboard input
• Game loops using setInterval()
• Working with arrays and objects for game state
• Using Local Storage to persist data
Projects like this are a great way to strengthen JavaScript fundamentals and understand how interactive applications work in the browser.
I’m planning to improve this further by adding:
🎯 Self-collision detection
🎯 Better animations and UI
🎯 Mobile controls
🔗 Live Demo: https://lnkd.in/g8ZDj5hy#JavaScript#WebDevelopment#FrontendDevelopment#Coding#BuildInPublic#100DaysOfCode
Day-7/21.
🚀 Built a Classic Snake Game using HTML, CSS & JavaScript.
I recently developed a fully functional Snake Game using pure HTML, CSS, and Vanilla JavaScript — focusing completely on logic building, DOM manipulation, and game mechanics.
This project strengthened my fundamentals in core web development without using any frameworks.
🎮 Game Features:
✅ Smooth snake movement using 'requestAnimationFrame'.
✅ Keyboard controls (Arrow keys).
✅ Self-collision detection.
✅ Wall collision detection.
✅ Dynamic food generation at random positions.
✅ Real-time score tracking.
✅ Snake growth animation after eating food.
✅ Speed control logic.
✅ Background music integration.
✅ Food sound effect.
✅ Game over sound effect.
✅ Restart functionality after collision
✅ Grid-based responsive board using CSS Grid.
✅ Styled snake head & body with gradients.
✅ Fully playable in browser without external libraries.
🎨 Tech Stack Used:
HTML (Structure).
CSS (Grid layout, styling, gradients, responsiveness).
JavaScript (Game logic, movement system, collision detection, DOM
rendering).
💡 What I Learned:
Building this project helped me understand:
✅ How real-time browser-based games work.
✅ Managing state without frameworks.
✅ Optimizing DOM updates.
✅ Writing clean and structured JavaScript logic.
Sometimes the best way to grow is by mastering the basics.
More advanced projects coming soon 🚀.
#FrontendDevelopment#WebAnimation#SheryiansCodingSchool#UIUX#FullStackDevelopment#21DaysChallenge
🎲 Just Built a Dice Roll Game using HTML, CSS & JavaScript!
🌐 Live Demo: [https://lnkd.in/g6PtRh2P]
💻 GitHub Repository: [https://lnkd.in/gRDY-dE3]
Excited to share my latest mini project — a Dice Roll Game that I built from scratch using core web technologies. This project helped me strengthen my understanding of DOM manipulation, event handling, and basic game logic.
🚀 Features:
• Random dice generation on each roll
• Dynamic UI updates using JavaScript
• Clean and responsive design with CSS
• Simple and interactive gameplay
💡 What I learned:
Working on this project improved my problem-solving skills and gave me hands-on experience in connecting JavaScript logic with UI elements. It also reinforced how powerful vanilla JavaScript can be when building interactive applications.
Feel free to check it out and share your feedback!
#JavaScript#WebDevelopment#FrontendDevelopment#HTML#CSS#JS#Projects ❤️
A few weeks ago, I didn't fully understand what the Event Loop actually meant.
Today, I built a gaming website — and honestly? I'm still processing it. 😅
🎮 Introducing ARCADEVERSE — a fully playable browser gaming site I built from scratch using nothing but HTML, CSS, and JavaScript.
No React. No Vue. No frameworks. Just pure fundamentals.
---
Here's what's inside 👇
🐍 Snake Game
🧩 2048 Puzzle
⌨️ Typing Speed Test
🎯 Whack-a-Mole
🃏 Blackjack
🌌 Asteroid Shooter
All 6 games are playable directly in the browser — no downloads, no installs.
---
🛠️ Tech Stack:
→ HTML5 + CSS3 (Grid, Flexbox, CSS Variables, Animations)
→ Vanilla JavaScript (ES6+)
→ GSAP + ScrollTrigger for animations
→ Canvas API for Snake & Asteroids
→ Lenis-style smooth scroll
---
Every single game was built to demonstrate real JavaScript concepts:
✅ DOM Manipulation — cards, scores, timers update live
✅ Higher Order Functions — map, filter, reduce, flatMap in every game
✅ Callbacks — every click, keypress, and touch is a callback
✅ Promises — dealer reveals, card flip delays, mole timers
✅ Async / Await — sequential animations and fetch simulations
✅ Event Loop — setInterval ticks, setTimeout queues, rAF game loops
✅ GSAP — scroll reveals, stagger entrances, parallax, hover effects
---
The thing nobody tells you when you start coding:
The best way to understand a concept is to BUILD something with it.
I didn't fully get Promises until I had to delay a card flip and wait for the result.
I didn't truly understand the Event Loop until my snake was moving on a setInterval tick.
Building games made abstract concepts feel real.
---
If you're learning JavaScript right now, build something playable. You'll surprise yourself. 🙌
#JavaScript#WebDevelopment#HTML#CSS#GSAP#VanillaJS#ShowAndTell#LearningInPublic#FrontendDevelopment
Keep going ! All the best 👍