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

🚀 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

🚀 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

🚀 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

🚀 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

🚀 Just built an advanced Tic Tac Toe Game using HTML, CSS, and JavaScript! This project helped me dive deeper into DOM manipulation, event handling, and game logic implementation. 🎯 Key Features: Dynamic player name input Real-time turn-based gameplay Winner detection with result display Automatic disabling of board after win New Game & Reset functionality Fully responsive design for mobile devices 💡 Through this project, I improved my ability to handle user interaction, manage game state, and build interactive web applications. 🔗 Live Demo: https://lnkd.in/d829cDrB⁠� I’m currently focusing on strengthening my JavaScript and frontend development skills by building real-world projects. #javascript #frontenddeveloper #webdevelopment #coding #projects #learning #html #css

Focused on clean design, smooth UI, and showcasing game elements. Great learning experience in web development 💻 Check the code below👇 🔗 GitHub HTML: [https://lnkd.in/gMGpNWBN] 🔗 GitHub CSS: [https://lnkd.in/gEXh2d9T] #WebDevelopment #Projects #Coding #Learning

🚀 From learning JavaScript to building my own Quiz App… When I first started learning JavaScript, I struggled to understand how everything connects — DOM, events, logic, and user interaction. So I decided to stop just learning theory and start building 💻 That’s when I created my JavaScript Quiz App using HTML, CSS, and JavaScript. 💡 Features: - Interactive quiz UI - Multiple questions with options - Real-time score tracking - Instant feedback after each question - Clean and responsive design 🎯 This project helped me improve: - DOM manipulation - Event handling in JavaScript - UI/UX design basics - Problem-solving skills 🔗 Live Demo: https://lnkd.in/gFxPjwMu 💻 GitHub Repo: https://lnkd.in/gUj54GTW I’m continuously learning and building more projects to strengthen my frontend skills. #JavaScript #WebDevelopment #Frontend #Coding #Projects #Learning #BuildInPublic

🪝: useState and useEffect are 20% of what hooks can do. Here are the others that actually matter. Everyone knows useState and useEffect. Here are the hooks I use constantly that don't get enough attention: useReducer → When useState has more than 2-3 related values, switch to useReducer → Especially useful for form state with validation → The logic is predictable and testable useRef → Not just for DOM access — use it to persist values across renders WITHOUT triggering re-renders → Storing previous values, debounce timers, animation frame IDs → Massively underused useMemo → Cache expensive computation results → But remember: useMemo itself has a cost. Don't use it for cheap operations. useCallback → Stabilise function references passed to child components → Prevents unnecessary re-renders when used with React.memo useContext → Perfect for theme, auth, or language — data that truly IS global → NOT a replacement for proper state management when state is complex Custom hooks — the real power → Every time I write the same logic in 2+ components, I extract it to a custom hook → useWalletConnection, useFormValidation, useDebounce → Your components become clean. Your logic becomes reusable. The rule I follow: If a component is longer than 100 lines, I probably need a custom hook. What's your most-used React hook that isn't useState or useEffect? #ReactHooks #ReactJS #JavaScript #FrontendDev #useReducer #useMemo #WebDevelopment #CleanCode

I didn't just rebuild Snow Bros. I remastered it. Vanilla HTML, CSS, and JavaScript. No engine. No framework. No dependencies. Just a canvas and way too many late nights. But this time I went further, better mechanics, smoother animations, improved effects, and a full glow-up on the feel of the game. Still retro. Still pixel-perfect. Just... better. And the best part? It runs on a toaster. Pure browser. Zero installs. What's inside Snow Bros: Rebuilt: 🎮 5 themed levels — blue night → purple dusk → amber cave → jungle boss → red volcano 👾 5 enemy types with unique behavior + a full boss fight ❄️ Snow throw, freeze states, chain-kill scoring 💥 Power-ups, lives system, animated UI 📱 Mobile-ready with a virtual joystick + touch controls 🔊 Web Audio API sound — no libraries, just code ⚙️ In-game settings panel for control customization The hardest part wasn't the enemies movement or physics. It was making it feel right that satisfying snowball wrap, the urgency when enemies speed up, the juice in every hit with sound effects. Games teach you things tutorials never will. You don't understand a game loop until your FPS tanks. You don't understand event handling until keyboard and touch have to work together perfectly. I'm a CS sophomore at Bahria University — this is how I learn. By building things I actually want to play. 🔗 Play it on ANY DEVICE: https://lnkd.in/d5J7RbE2 👨💻 GitHub: github.com/abdulwalidev 🎮 Game-Repo: https://lnkd.in/d_nf9REz #GameDev #JavaScript #WebDevelopment #HTML5 #CanvasAPI #BuildInPublic #CS