🚧 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

🚀 Just built a Hangman Game using HTML, CSS & JavaScript! 🎯 Features: • Letter-by-letter guessing system • Hint provided for each word • Maximum 6 wrong attempts • 😢 Sad emoji on loss • 🎉 Victory emoji on success This project helped me strengthen my understanding of: ✔ DOM Manipulation ✔ Event Handling ✔ Game Logic Implementation 💡 It was fun designing the logic behind tracking wrong guesses and updating the UI dynamically. 🔗 Check out the code here: https://lnkd.in/gMnvFf-i #WebDevelopment #JavaScript #FrontendDevelopment #CodingProjects #100DaysOfCode

🚀 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

Work in progress: Building the Snake Game using JavaScript logic Yesterday I shared the idea and visual design of the Snake Game. Today I started implementing the core logic in JavaScript. The first step was creating the board dynamically instead of writing HTML for every cell. The board is divided into blocks using fixed block width and height. Using the board's width and height, I calculate how many rows and columns can fit inside the board. I then use two nested loops to generate the grid. For each row and column, a new div element is created and added to the board. Each block is also stored inside an object using coordinates like row-column so that it can be accessed quickly later. Next comes the snake structure. The snake is represented as an array of objects where each object contains x and y coordinates. These coordinates represent the position of each segment of the snake on the grid. The render function is responsible for displaying the snake on the board. It loops through each segment of the snake and finds the corresponding block using its coordinates. Then it adds a class to visually fill that block, making it appear as part of the snake. This approach makes the board behave like a coordinate system where every cell can be accessed instantly using its row and column values. The next steps will be implementing movement logic, keyboard controls, food generation, collision detection, and score updates. Currently focusing on building the core logic step by step. #JavaScript #WebDevelopment #GameDevelopment #LearningByBuilding #FrontendDevelopment

🎮 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

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 memory matching game using HTML, CSS, and JavaScript. It's a browser-based card flipping game where you match pairs of food emojis against the clock. The game has 3D card flip animations, a live move counter and timer, randomized shuffling every round, and a best score tracker. Everything runs in a single HTML file with no frameworks needed. This project helped me get a better understanding of how CSS animations, game state management, and DOM manipulation work together in a real project. Building something you can actually play makes the learning process a lot more enjoyable. I also want to thank Mam Juhinah Batool for her guidance and support. GitHub: https://lnkd.in/dBfWHUKK Medium: https://lnkd.in/dNVPBUYu #WebDevelopment #JavaScript #jQuery #HTML #CSS #StudentProject #Project #100DaysOfCode #OpenSource #GitHub #Learning

🚀 Built a Simon Game using JavaScript! I created a memory-based Simon Game where players must repeat an increasing sequence of colors as levels progress. ✨ Features: • Dynamic level progression • Button flashing • Game over detection • Highest score tracking 🛠️ Tech Stack: HTML, CSS, JavaScript This project helped me practice DOM manipulation, event handling, and game logic in JavaScript. Demo video below 👇 #JavaScript #WebDevelopment #Frontend #Coding

Built a Pac-Man from scratch. No libraries. No frameworks. Just vanilla JavaScript, HTML5 Canvas, and CSS. 👾 The result? Pac-Man Neon Arcade — a fully functional, neon-themed recreation of the classic game, running entirely in the browser. Here's what's under the hood: 🕹️ Game logic built with ES6 Modules — character movement, collision detection, and a full state machine 🎨 HTML5 Canvas for rendering the maze, Pac-Man, and ghost animations 👻 Individual AI written for each ghost — they don't all behave the same 🔊 Sound effects, high score tracking, multiple difficulty levels, and pause/resume The most challenging part? Writing the ghost AI from scratch. Each ghost has its own targeting logic, which is what makes the original game feel alive — and replicating that without any game engine was a great exercise in thinking algorithmically. No npm install. No build step. Just clone and open index.html. 🔗 GitHub: https://lnkd.in/gg7ybRS5 🔗 Live Link: https://lnkd.in/gYYxsmaQ Would love feedback from fellow devs — especially on the architecture and AI logic! #JavaScript #HTML5Canvas #GameDev #VanillaJS #BuildInPublic #WebDevelopment #OpenSource

🚀 Just Built an Escape Room Game using HTML & JavaScript! 🎮🔥 Excited to share my latest project – a fully interactive Escape Game developed using core web technologies! 🧠💡 In this game, players must solve puzzles, unlock clues, and make smart decisions to escape within a limited time. It’s designed to challenge logical thinking, problem-solving skills, and creativity. 🔧 Tech Used: • HTML for structure • CSS for styling & UI • JavaScript for game logic & interactivity ✨ Key Features: ✔️ Interactive puzzles & challenges ✔️ Timer-based gameplay ⏳ ✔️ Dynamic clues & user responses ✔️ Smooth and engaging UI This project helped me strengthen my concepts in DOM manipulation, event handling, and logic building in JavaScript. 💭 Building this game was not just fun, but also a great learning experience in creating real-world interactive applications. 🎥 Check out the demo video below and let me know your feedback! #WebDevelopment #JavaScript #HTML #Coding #GameDevelopment #FrontendDeveloper #Projects #LearningByDoing #TechWithArjun