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

🐍 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

🚀 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

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

🚀 #Day 34 Today I built a mini project — Simon Says Game using HTML, CSS, and JavaScript 🎮 This project helped me apply DOM manipulation + events in a real interactive game. 📌 Concepts Used: • DOM Selection & Manipulation – Updating colors dynamically • Event Listeners – Detecting user clicks • Random Number Generation – Creating random color sequence • Arrays – Storing game pattern & user pattern • Functions – Structuring game logic cleanly • setTimeout() – Creating delay effects for animations • Game Logic Handling – Comparing user input with generated sequence • Level System – Increasing difficulty step by step 📌 What I Learned: ✅ How to manage game state ✅ How to compare two arrays step-by-step ✅ How to reset the game when user loses ✅ How small logic mistakes can break full functionality Building this game improved my confidence in writing real interactive JavaScript logic, not just theory. Day 34 complete ✅ 👍🏻 🚀 #Day34 #100DaysOfCode #JavaScript #MiniProject #DOM #WebDevelopment #MERNStack

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

𝗝𝘂𝘀𝘁 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗚𝗮𝗹𝗮𝘅𝘆-𝗧𝗵𝗲𝗺𝗲𝗱 𝗠𝗲𝗺𝗼𝗿𝘆 𝗠𝗮𝘁𝗰𝗵𝗶𝗻𝗴 𝗚𝗮𝗺𝗲! 🌌 I recently developed an interactive Memory Matching Game using HTML, CSS, JavaScript, and jQuery as part of my learning in web development. The game challenges players to flip cards and find matching pairs within a 60-second time limit. Each match reveals a space-themed symbol, and the game includes sound effects, animations, a move counter, and dynamic card shuffling to make the experience engaging and interactive. ✨ Key Features: • Dynamic card generation and random shuffling • Card flip animations and smooth UI effects • 60-second countdown timer • Move tracking system • Sound feedback for correct and wrong matches • Restart functionality for a new shuffled game This project was completed under the supervision of Mam Juhinah Batool 🎥 I’m attaching a video demo of the game below. 🔗 The complete project is available on GitHub: https://lnkd.in/dWXBBFJJ #WebDevelopment #JavaScript #jQuery #FrontendDevelopment #StudentProject #LearningByDoing #CodingJourney #InteractiveWeb

Thrilled to share my latest JavaScript project: Rock-Paper-Scissors (Human vs Computer)! 🎮 Built from scratch with HTML, CSS & pure JavaScript: > Real-time gameplay with dynamic UI updates > Score tracking (user vs computer) > Win/Draw/Lose messages with color feedback > Responsive design & smooth event handling This project helped me master DOM manipulation, events (click), array methods, conditions, and logic flow. GitHub: https://lnkd.in/d7VequBY Watch the gameplay below! Excited to keep building more interactive projects. Feedback & suggestions welcome! #JavaScript #WebDevelopment #Frontend #GameDev #DOM #CodingJourney #SelfTaught

🚀 I'm excited to share my latest personal project: 🏃♂️ Muñelocos Racing - A speed-based mini-game !! Right after finishing my Web Development training, I applied that new knowledge to create this fun little game. Recently, I revisited the code to polish some styling aspects, and this is the result. Built with just Vanilla JavaScript and HTML Canvas — keeping it simple when nothing more is needed (KISS principle at its best!). ✨ Key Features: - Pick your favorite character - Press the arrow keys alternately as quickly as you can to run - Reach the goal line before your AI rivals to advance to the next level - See how far you can go! 👉 Give it a try: [https://lnkd.in/dp-b5RwM] 💻 GitHub Repository: [https://lnkd.in/dDqhvsXd] I'd love to hear your feedback! What score can you get? 🏁 #HTMLcanvas #CSS #WebDevelopment #PersonalProject #JavaScript #MiniGame #IndieDev #Frontend

🎮 Excited to Share My Tic-Tac-Toe Game Project! 🚀 I’ve built and deployed a fully functional **Tic-Tac-Toe game** using **HTML, CSS, and JavaScript** — and it’s now live! 🔗 Play here: https://lnkd.in/gFHsDd7y ✨ Features: • Interactive 3x3 game board • Player turn switching (X & O) • Winner detection logic • Draw condition handling • Reset & New Game functionality • Clean and responsive UI This project helped me strengthen my understanding of: ✔ DOM Manipulation ✔ Event Handling ✔ Game Logic Implementation ✔ Conditional Checking Patterns ✔ Clean UI Structuring Building small projects like this really improves problem-solving skills and logical thinking. Every line of JavaScript written for winner checking and game reset improved my debugging ability. I’m continuously learning and building — feedback is always welcome! 🙌 #JavaScript #WebDevelopment #FrontendDeveloper #HTML #CSS #Projects #LearningByBuilding