🎨 Practice Project: Real-Time Color Picker UI Built this project to practice real-time color updates, interactive UI, and smooth animations using HTML, CSS, and JavaScript. You can instantly change: Text color Background color Border color Primary & secondary theme colors All updates happen live, making it easy to visualize and experiment with color combinations. 🔗 Live Demo: 👉 https://lnkd.in/gHfBQ2Zf Always learning, experimenting, and improving 🚀 #HTML #CSS #JavaScript #ColorPicker #FrontendDevelopment #UIUX #PracticeProject #LearningByDoing

🚀 Just Launched: Diamond Rush 2026 💎 A retro-inspired puzzle adventure built with 100% Vanilla JavaScript! I’m excited to share my latest project, Diamond Rush 2026 — a modern, web-based reimagining of classic puzzle games like Boulder Dash, featuring a cyberpunk aesthetic and smooth, responsive gameplay across all devices. ✨ Key Features: 🔹 20 Challenging Levels across 4 unique biomes (Forest, Ice, Magma, Cyber) 🔹 Unlockable Characters: Explorer, Cyber Ninja, Magma Knight 🔹 Dynamic Visuals with custom particle effects & 3D CSS animations 🔹 Mobile-First Design with optimized touch controls 🔹 Victory System with anime-style cutscene and stats overlay 🛠️ Tech Stack: ✅ Core: Vanilla JavaScript (ES6 Modules) – No frameworks ✅ Rendering: HTML5 Canvas ✅ Styling: CSS3 (3D transforms & glassmorphism) ✅ Deployment: Netlify This project helped me strengthen my skills in game logic, performance optimization, and creative UI design. 🎮 Try it out here: 👉 https://lnkd.in/gSW22xxy I’d love to hear your feedback and suggestions! 😊 #WebDevelopment #GameDev #JavaScript #HTML5 #CSS3 #IndieDev #Frontend #Coding #Portfolio #VanillaJS

Here's the thing - using SVGs in React can be a real game-changer. But let's be honest, most of us are probably doing it wrong. It's easy to just download an SVG image and slap it into our project. Or, we might copy the SVG code and turn it into a custom React component. Simple, right? No. It's not that simple. These methods have some major drawbacks - like, have you ever tried to customize a downloaded SVG image? It's a nightmare. You need different variants of the same icon, like a different color for dark mode or hover states, and suddenly you're stuck with a bunch of extra files and code. The second approach is a bit better, I guess. You can customize SVGs using props and CSS, which is cool. But, it's still a lot of work - you have to manually create a component for every single SVG, and that can get old fast. So, what's the solution? Well, one approach is to create React components using SVG markup directly. This way, you can do some really cool stuff, like theme-based coloring, animations, and styling using CSS or Tailwind. But, let's be real - that sounds like a lot of work, too. And, that's where SVGR comes in - it's like a magic tool that lets you import SVG files directly as React components. You get all the good stuff: theme-based coloring, CSS and Tailwind animations, hover and active states, and cleaner code. To use SVGR, you just need to install it with npm and add it to your Webpack config - easy peasy. So, if you want to level up your React game, check out SVGR. Source: https://lnkd.in/g_HttEmN #React #SVGR #WebDevelopment #Innovation #Creativity #Strategy

🎮 Just Jump — Physics-Driven normal 2D Platformer (HTML5 #Canvas #JavaScript) 💻A pc or laptop basis game... First time try to build this type of game 😅.... Just Jump is a premium 2D physics-based platformer built using HTML5 Canvas and JavaScript, focused on realistic movement, smooth animations, and immersive audio—all without heavy engines. The goal is simple: jump smart, survive falls, and climb higher than ever. 🔴See Live: https://lnkd.in/g3Nb2r4A 🗃️GitHub Repo: https://lnkd.in/g9v-q7F4 🚀 What makes it stand out Realistic physics system: gravity, momentum, acceleration Single-jump gameplay: no spam jumping—pure skill Fall-damage logic: one wrong drop ends the run Dynamic camera follow for fluid vertical gameplay Modern premium UI/UX with particle effects and smooth transitions Procedural audio system (no external sound files) Cross-platform support: desktop, mobile, tablet HTML5 Canvas rendering for high performance and full control 🛠 Tech Highlights HTML5 Canvas for rendering JavaScript (ES6+) for game logic & physics Anime.js for smooth UI animations Procedural Audio (Web Audio API) Responsive & orientation-aware design This project demonstrates how pure web technologies can deliver a polished, engine-free gaming experience with strong performance and clean architecture. 🔖 Tags #GameDevelopment #Desktop #HTML5 #CanvasAPI #JavaScript #WebGames #Laptoponly #2DGame #canvas #JS #PhysicsBased #FrontendDevelopment #CreativeCoding #WebAudio #AnimeJS #GameDesign #AI

Just wrapped up my project with HexSoftwares! Presenting FitNova – a fully responsive luxury gym website built entirely with HTML5, CSS3, and vanilla JavaScript. The site features a dynamic video hero with typing animation, live fitness counters, interactive trainer cards, and working BMI/calorie calculators with metric/imperial toggles. Users can explore real transformations through before/after sliders, compare membership plans, filter weekly classes by category, and book consultations via a popup form. Additional touches include a testimonial carousel, FAQ accordion, and dark/light theme toggle. No frameworks, no shortcuts – just clean, responsive code. Check out the live demo and GitHub repository below! 🔗 GitHub: https://lnkd.in/d44hURzX 🌐 Live Demo: https://lnkd.in/dD3DDcbh #HexSoftwares #WebDevelopment #HTML #CSS #JavaScript #Coding #Frontend

useEffect vs useLayoutEffect.   99% of the time, you want `useEffect`. Here’s the 1% when you don’t. The core difference is timing. 👉 `useEffect` runs after the browser paints the screen.   The user sees the UI first, then the effect runs. This is perfect for things like data fetching, logging, and subscriptions because it doesn’t block the UI. 👉 `useLayoutEffect` runs before the browser paints.   It runs synchronously right after React updates the DOM, and it blocks the paint until it finishes. So when do you actually use the blocking one?   💡 When you need to read/measure the DOM and update layout immediately. Example: you need to measure the width of a div to decide where to position a tooltip.   If you use `useEffect`, the sequence is: render → paint → effect → reposition → paint   The user briefly sees the tooltip in the wrong place, then it jumps. With `useLayoutEffect`, React does: render → DOM update → layout effect (measure + reposition) → paint   The tooltip appears directly in the correct position. No visible jump. Rule of thumb:   - Default to `useEffect`.   - Reach for `useLayoutEffect` only if you see visual flicker or need pixel-perfect layout based on measurements. #ReactJS #FrontendTips #WebPerformance #JavaScript

🚀 GSAP Makes Life Easier: The Secret to High-End Web Motion Stop fighting with "janky" CSS keyframes or complex scroll logic. If you’re building modern web experiences, GSAP (GreenSock Animation Platform) is the ultimate cheat code. Why? Because it turns "impossible" scroll-driven animations into a few lines of readable code. The Game Changer: ScrollTrigger 🛠️ Instead of manually calculating window scroll positions, ScrollTrigger lets you: ✅ Pin elements in place while the background changes. ✅ Scrub animations so they play perfectly in sync with the user's thumb. ✅ Trigger reveals exactly when an element enters the viewport. ✅ Create parallax effects that actually feel smooth, not nauseating. The Workflow: It’s framework-agnostic. Whether you're a React fan, a Webflow pro, or a vanilla JS purist, GSAP handles the heavy lifting so you can focus on the creative side of coding. No more math. No more browser compatibility headaches. Just butter-smooth motion. BTW, what is your favorite GSAP plugin? ScrollTrigger, Draggable, or Flip? 👇 #WebDevelopment #GSAP #Frontend #UIUX #Animation #JavaScript #ScrollTrigger GitHub: https://lnkd.in/dfUd4TGt

Is your code actually finished, or does it just "look" finished? 🛑💻 As developers, we often obsess over the latest frameworks and sleek UI animations. But if your application isn't Accessible (a11y), you are effectively shutting the door on 15% of the global population. True Engineering Quality = Inclusivity. In this week's lesson on KooduPeluEsther, we are going back to first principles. We are discussing HTML Accessibility Basics and how to build semantic, inclusive interfaces from line one. Building for "everyone" isn't a feature request—it is the standard. Lesson 17 now on YouTube: https://lnkd.in/eqQiRqJA Let’s write code that counts. #InclusiveDesign #KooduPeluEsther #TechEducation #HTML5

🎬 Movie Search App (JavaScript, CSS Grid, Debounce, Skeleton UI) A focused project built to strengthen my frontend fundamentals. Key features implemented: 🔹 What I worked on: ✔ Debounced search input to reduce unnecessary API calls and improve performance ✔ Skeleton loading UI with shimmer animation for a modern, smooth loading experience ✔ Responsive movie grid layout using CSS Grid, auto-fill, and minmax() ✔OMDB API integration using async/await, error handling, and poster fallback logic ✔ DOM updates and event handling ✔ Dynamic DOM rendering for generating movie cards programmatically This project helped me strengthen my fundamentals in JavaScript, browser execution, and UI interactions. Learning step by step, focusing on depth over speed. 💡 🔗 GitHub Repository: https://lnkd.in/d5VtMdm3 🔗 Live Demo: https://lnkd.in/dNwSAfM8 Would love your feedback!

Day 54 of hashtag #100DaysofCoding Built an interactive 3D web experience using Three.js #Deployed first landing page model loading my take some time as its not compressed and add reviews in comments if there will be some add on. The experience unfolds on scroll Users can enter an interaction mode to explore the 3D model Camera movement + lighting are handled programmatically for a product-style feel 👉 Live demo: https://lnkd.in/gaTi23QK This project helped me explore: Three.js scene composition & lighting GSAP + ScrollTrigger for cinematic motion Interaction modes (scroll → inspect → exit) Real-world deployment challenges & optimization Still experimenting with how far 3D can enhance modern landing pages on the web. Would love feedback from people working with WebGL / Three.js 🙌 #threejs #webgl #frontend #creativecoding #javascript #portfolio