Building Fun with Code: My Connect 4 Game 🎮 I recently challenged myself to create a Connect 4 game entirely in pure JavaScript, HTML, and CSS, and the result is a playful, interactive game that runs directly in the browser no setup required! Features I implemented: Classic Connect 4 mechanics: two players alternate dropping discs into a 6×7 grid. Real-time win detection: horizontal, vertical, and diagonal. Interactive UI: hover effects, smooth color changes, and reset functionality. Fun, attractive design: the game is wrapped in a creamy, soft-colored box with rounded corners and playful styling. #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #CodingFun #Projects

🚀 Small Projects, Big Lessons One thing this challenge continues to prove is that complex applications are often built from very simple ideas. A small UI experiment can quickly turn into a lesson about: • event handling • browser rendering • asynchronous data fetching • dynamic UI updates This week I completed Part 9, covering Projects 81–90. 🔗 Projects 81–90 (GitHub Links) 81. Animated Images Website — https://lnkd.in/gu4jMUea 82. Emoji Catcher Game — https://lnkd.in/gzCF_RSk 83. Twitter Follow Component — https://lnkd.in/gG8_JqHw 84. BookList Project — https://lnkd.in/gnMGYrqf 85. Timer — https://lnkd.in/gbhs23Fq 86. Typing Game — https://lnkd.in/gjirRp4B 87. Shape Clicker Game — https://lnkd.in/gbXrvd-s 88. Word Counter — https://lnkd.in/gv62dcUQ 89. Random User — https://lnkd.in/g-6HKfSu 90. Construction Landing Page — https://lnkd.in/gPTy6nY3 💡 Highlights From These Projects 🔹 Emoji Catcher Game Building my first small game showed how JavaScript timers like setInterval() and setTimeout() can drive interactive gameplay logic. 🔹 Timer Logic Creating a timer reinforced the importance of working with Date.now() and managing elapsed time across multiple start/stop cycles. 🔹 Shape Clicker Game Using getBoundingClientRect() helped calculate element positions and generate shapes in random locations. 🔹 Word Counter Regular expressions (regex) made it possible to efficiently count letters, spaces, and words from user input. 🔹 Random User API Working with fetch() and JSON responses demonstrated how modern applications dynamically populate UI with external data sources. These projects showed how interactive web experiences are created by combining UI design with logical problem-solving. 90 projects completed — the challenge is almost done. 🚀 #html #css #javascript #frontenddevelopment #webdevelopment #100projects #learningjourney #growthmindset

🎮 Just built a browser-based strategy game from scratch — Stone vs Stick! A 3×3 tactical board game built purely with HTML, CSS & JavaScript. No frameworks, no libraries — just clean vanilla code. What's inside: 🪨 vs 🪵 two-player strategy on a connected node grid Two phases — Placement & Movement Win by lining up 3 pieces: horizontal, vertical, or diagonal First to 5 rounds wins the match 🤖 AI opponent with strategic blocking & winning logic 🪙 Animated coin toss to decide who goes first 🎨 4 immersive themes — Forest, Mountain, Water & Fire 📱 Fully responsive — works on mobile & desktop Drag & drop piece movement with snap-to-node validation This was a fun challenge in pure JS game logic — turn management, win detection, AI decision trees, CSS 3D animations, and touch/drag interactions all without a single dependency. 🔗 Play it here: [https://lnkd.in/ggtXKhVU] Built and deployed via GitHub Pages. #buildinpublic #javascript #webdev #gamedev #opensource #html #css #frontenddevelopment

🚀 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

🚀 Excited to share my mini project – Rock Paper Scissors Game! 🔗 Live Demo: https://lnkd.in/gMUZPkXq I built this interactive game using HTML, CSS, and JavaScript, where users can play against the computer in real-time. The computer generates random moves, and the game logic determines the winner instantly. ✨ Key Features: 🎮 User vs Computer gameplay ⚡ Randomized computer choices 📊 Real-time result display 🎨 Clean and responsive UI This project helped me strengthen my understanding of: JavaScript logic & event handling DOM manipulation Building interactive web applications Rock-Paper-Scissors is a classic game often used in beginner projects to practice core web development concepts like logic building and user interaction . 💡 Looking forward to improving this further by adding animations, score tracking, and better UI/UX! #WebDevelopment #JavaScript #FrontendDevelopment #Projects #LearningByDoing

🚀 Built a Fully Functional Connect 4 Game using HTML, CSS & JavaScript! Excited to share my latest frontend project — a classic Connect 4 game developed completely from scratch 🎯 🔹 Tech Stack: • HTML – Structured the game board • CSS – Designed a clean and responsive UI • JavaScript – Implemented game logic & interactions 🔹 Key Features: ✔️ Two-player gameplay (Yellow vs Orange) ✔️ Smart piece drop (auto-falls to lowest empty slot) ✔️ Win detection: • Horizontal • Vertical • Diagonal & Anti-diagonal ✔️ Real-time turn updates ✔️ Clean and bug-free interaction This project helped me strengthen my understanding of DOM manipulation, event handling, and game logic design. Looking forward to adding more features like AI opponent, animations, and mobile responsiveness 🚀 💡 Feedback and suggestions are always welcome! #WebDevelopment #JavaScript #FrontendDevelopment #Projects #Coding #HTML #CSS #GameDevelopment #InternPe

🚀 Project Showcase: Tic Tac Toe Game using HTML, CSS & JavaScript Excited to share one of my recent mini-projects – a Tic Tac Toe Game built using HTML, CSS, and JavaScript! 🎮 This project helped me strengthen my understanding of DOM manipulation, game logic, and responsive UI design. 🔹 Key Features: Interactive 2-player gameplay Dynamic win detection logic Clean and responsive user interface Reset game functionality 🔹 Technologies Used: HTML – Structure of the game board CSS – Styling and layout JavaScript – Game logic and interactivity Building this project was a great way to practice JavaScript fundamentals and problem-solving skills while creating something fun and interactive. Looking forward to building more projects and continuously improving my development skills! 💻✨ Check my GitHub repo : 🔗 https://lnkd.in/gCz98WpX Day 5 of #100DaysOfCode #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #CodingProjects #LearningJourney

I built a real-time audio visualizer using Vanilla JS and HTML5 Canvas. The app performs real-time frequency analysis to create responsive animations that pulse and dance to your local audio files. From "Classic Bars" to "Radial Rings," it’s been a fun journey exploring how to bridge the gap between audio processing and visual art. Tech Stack: JavaScript, HTML5 Canvas, Web Audio API. github- https://lnkd.in/gqxFkgxA live- https://lnkd.in/g3YpQE2h #Programming #CreativeCoding #JS #WebDev #Portfolio

🚀 Mini Project #4: Interactive Bubble Generator A simple interactive project demonstrating dynamic user interactions on a webpage. • Click anywhere on the screen to create a bubble • Bubble appears at the exact cursor position • Each bubble contains a randomly generated word • Interactive and dynamic user experience 🛠️ Tech Used: • DOM manipulation • Event handling • Randomization logic • Dynamic styling & positioning • Helped improve understanding of user-driven interactions in web development #WebDevelopment #JavaScript #FrontendDevelopment #MiniProject #Coding

🚀 I built a Dino Runner game from scratch – no frameworks, just pure HTML/CSS/JS! Ever wanted to understand how classic endless runners work? I challenged myself to recreate the Chrome Dino Game as a beginner‑friendly project. 🎮 Live demo: https://lnkd.in/gPHSD8eT 📂 Code & README: https://lnkd.in/gNsSXyvE What’s inside? Canvas‑based animation & game loop Collision detection & simple physics (gravity, jump) Dynamic difficulty (speed & spawn rate increase with score) Responsive design + mobile tap support Deployed on GitHub Pages – one click to play Why I’m proud of it: It’s 100% vanilla – no libraries, no builds. Just HTML, CSS (Flexbox + media queries), and JavaScript. A great way to practice DOM manipulation, requestAnimationFrame, and event handling. Try to beat my high score! 🦖💨 👇 Feedback & suggestions are very welcome. 🎯 From idea to live game – my first HTML/CSS/JS project: Dino Runner When I started learning web dev, I never thought I could build an interactive game. Two weeks later, here it is – a complete endless runner inspired by Chrome’s offline dinosaur. What I learned: How requestAnimationFrame() powers smooth animations Simple gravity & jump mechanics Collision detection between rectangles Using localStorage? (not here, but next time 😄) Deploying instantly with GitHub Pages The best part? The entire game fits in one index.html file. No complex setup – open it and play. 🔗 Live demo + full code in the comments If you’re also learning to code – just start building. It doesn’t have to be perfect, it just has to be yours. #buildinpublic #learntocode #webdev #javascript #gamedevelopment