MOIZ KZ’s Post

🚀 Just built an improved version of my Tic Tac Toe Game using HTML, CSS, and JavaScript! In this version, I focused on enhancing both UI and game functionality to make the experience more interactive and user-friendly. 🎯 Key Features: Clean and modern UI with gradient background Distinct colors for X and O for better visibility Real-time score tracking system Winner detection with result display Reset functionality for continuous gameplay Fully responsive design for mobile devices 💡 This project helped me strengthen my understanding of DOM manipulation, event handling, and managing game logic in JavaScript. 🔗 Live Demo: https://lnkd.in/dTf_RWvZ I’m continuously improving my skills by building and upgrading projects step by step. #javascript #frontenddeveloper #webdevelopment #coding #projects #learning #html #css

I used useEffect… everywhere 😅 Until it caused a weird UI flicker I couldn’t explain. That’s when I learned the real difference 👇 👉 useEffect Runs AFTER the browser paints the screen Best for: API calls, logging, side effects 👉 useLayoutEffect Runs BEFORE the screen updates Best for: measuring DOM, fixing layout issues 💡 Real example: I was calculating an element’s width on load With useEffect → UI rendered first, then adjusted (flicker ⚡) With useLayoutEffect → no flicker, smooth UI ✅ ⚠️ But don’t overuse it — it can block rendering and slow your app That one small change improved my UI a lot. Have you faced this issue before? 👇 #reactjs #frontend #webdevelopment #javascript

Built a 𝗧𝗶𝗰 𝗧𝗮𝗰 𝗧𝗼𝗲 game using React.js Hi Everyone! I recently developed a simple and interactive 𝗧𝗶𝗰 𝗧𝗮𝗰 𝗧𝗼𝗲 web game using React. This project helped me practice React state management, game logic, and UI design. Features included in this project: 🔹2 Player Mode (Player X vs Player O) 🔸Player vs Computer Mode 🔹6*6 Responsive Game Board 🔸Row, Column, and Diagonal winning detection 🔹Strike Line for winning moves 🔸Score tracking for both players 🔹Undo Move Functionality 🔸New Game Reset Option 🔹Winning Sound Effects 🔸Responsive Design (works on Mobile & Desktop) 🔹Clean and Simple UI using Tailwind CSS Tech Stack: 🔸React.js 🔹JavaScript 🔸Tailwind CSS Live Demo: https://lnkd.in/gtx8EQb2 #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #TailwindCSS #LearningByBuilding

🚀 Built Something Fun + Challenging This Weekend → Introducing SERPENT X 🐍🔥 I transformed the classic Snake game into a modern arcade experience using only HTML5, CSS3, and Vanilla JavaScript — with zero external libraries. This project helped me sharpen my frontend development skills while experimenting with game logic, UI/UX design, and performance optimization. 🎮 Features: ✅ 6 Unique Game Modes → Classic → Speed Rush → Survival → Infinite → Retro Arcade → Boss Battle ✅ Power-ups System (Slow Motion, Double Score, Ghost Mode, Magnet) ✅ Unlockable Skins & Achievements ✅ Fully Responsive Design (Desktop + Tablet + Mobile Support) ✅ Smooth Canvas Animations + Particle Effects ✅ Web Audio Integration for immersive gameplay ✅ High Score Storage using Local Storage What I learned while building this: 🔹 Managing complex game logic in JavaScript 🔹 Working with HTML5 Canvas for rendering 🔹 Creating responsive gaming experiences 🔹 Improving UI/UX with modern design principles 🔹 Optimizing browser performance for smoother gameplay 🎮 Play Live: https://lnkd.in/diuZX4Qh I’d love feedback from developers, gamers, and creators. Also, drop your high score in the comments 👇 Let’s connect if you’re interested in Web Development, AI, Game Development, or building cool projects. #WebDevelopment #JavaScript #FrontendDevelopment #GameDevelopment #HTML5 #CSS3 #VanillaJS #StudentDeveloper #BuildInPublic #Projects #CodingJourney #OpenToConnect

🚀 Day 11 of My Web Development Journey Today, I built an interactive “Avoid the Box” mouse game using HTML, CSS, and JavaScript. 🎮 The concept is simple but fun: Avoid touching the moving box with your cursor while the timer counts down! Sounds easy… but it gets harder as the box keeps shrinking 😄 💡 What I implemented in this project: Dynamic DOM manipulation Event handling using mouseenter Random positioning logic for smooth gameplay Timer and score tracking system Sound effects for better user experience Game over logic with restart functionality 📚 Key Learnings: Understanding how user interactions (mouse events) can be used to create real-time engaging experiences. Also improved my logic-building skills by adding difficulty progression (shrinking box). 🔗 Live Demo: https://lnkd.in/gASyevmH 🔗 Source Code: https://lnkd.in/g2z6YyAS This project helped me realize how small ideas can turn into addictive mini-games with just core JavaScript. 👉 What should I build next? Suggestions are welcome! #Day11 #WebDevelopment #JavaScript #Frontend #30DaysOfCode #CodingJourney #MiniProject #GameDev

🚀 Day 18 – Advanced JavaScript Game Project I’m excited to share my latest project: “Avoid The Box – Level 2” 🎮 This is an upgraded version of my previous mouse-avoidance game, now enhanced with more interactive features and improved gameplay mechanics. 🔹 Key Features: • Dynamic box movement with increasing difficulty • Real-time score tracking and countdown timer • High score system using local storage • Interactive sound effects for start, touch, and game over • Responsive gameplay with mouse and touch support • Smart positioning logic (box avoids UI sections) • Color-changing box on every interaction • Smooth UI with modern glassmorphism design 🌐 Live Demo: https://lnkd.in/gR9qkqVb 💻 Source Code: https://lnkd.in/gaHq9n-V This project helped me strengthen my understanding of DOM manipulation, event handling, game logic, and UI/UX design in JavaScript. I’m continuously working on improving my projects and building more interactive web experiences. Feedback is always welcome 🙌 #JavaScript #WebDevelopment #Frontend #Coding #Projects #30DaysOfCode #GitHub #GameDevelopment

🚀 Just built my Tic Tac Toe game using HTML, CSS & JavaScript! As part of my JavaScript learning journey, I created a fully functional game that covers: 🎯 DOM Manipulation 🎯 Event Handling 🎯 Game Logic Implementation 🎯 Responsive UI Design This project helped me understand how real-world applications manage state, user interactions, and logic behind the scenes. ✨ Features: * Interactive 2-player gameplay * Win detection algorithm * Reset & New Game functionality * Modern mobile-inspired UI 💡 Next step: Planning to add an AI opponent and turn this into a smarter game. 🔗 Check out the project here: https://lnkd.in/gPVZPyK9 Would love your feedback! 🙌 #JavaScript #WebDevelopment #Frontend #LearningInPublic #Projects #100DaysOfCode #ApnaCollege

🚀 Built a Memory Card Game using React + Tailwind CSS! Excited to share my latest project where I implemented a fun and interactive memory card game. 🔹 Features: • Smooth UI with Tailwind CSS • State management using React Hooks • Game logic with card matching functionality • Responsive design 💡 This project helped me improve: • Component structuring • State handling • UI design skills 🔗 Live Demo: https://lnkd.in/gZ3Ajude 🔗 GitHub Repo: https://lnkd.in/gEgueXny I’m currently focusing on building real-world projects and improving my frontend skills. Would love your feedback! 🙌 #ReactJS #TailwindCSS #WebDevelopment #FrontendDeveloper #Projects #LearningInPublic

🚀 Just Built a Memory Game with React.js! Excited to share one of my recent projects — a fully interactive Memory Game built using React.js 🎯 🔹 Features: - Clean and responsive UI - Smooth card flip animations - Game logic using React state & hooks - Dynamic score tracking - Optimized performance for better user experience This project helped me strengthen my understanding of: 💡 Component-based architecture 💡 State management in React 💡 Event handling & logic building I’m continuously working on improving my frontend development skills and building more interactive projects like this. demo: https://lnkd.in/gBdwh_Yn 🎥 Check out the demo video below! #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #Projects #LearningByDoing

Nostalgia trip! 🚀 I was digging through some old folders today and stumbled upon a gaming web project I built round about two years ago. It’s a neon themed platform layout featuring dynamic filtering, hover animations, and a fully responsive design. Looking back at this code is surreal it really puts into perspective how much my development skills have grown since then. Back then, I built this using: 🔹 HTML & CSS 🔹 Vanilla JavaScript 🔹 Bootstrap 🔹 React To any students or aspiring developers currently building their first projects, here are 3 quick tips from my journey: 1️⃣ Master the Fundamentals: Frameworks are powerful, but deeply understanding vanilla JavaScript and core CSS will make learning anything else 10 times easier. 2️⃣ Build What You Love: Tie your projects to your hobbies. It keeps you motivated when the bugs get frustrating! 3️⃣ Embrace "Ugly" Code: If you don't cringe a little at your old code, you aren't growing. Just make it work, then learn how to make it better next time. Keep building, keep breaking things, and keep learning! #WebDevelopment #ReactJS #JavaScript #CodingJourney #StudentAdvice #FrontendDevelopment