🚀#Day_Progress_Update_Frontend_Journey Today’s learning was all about making the UI more interactive and dynamic using HTML, CSS, and JavaScript. 🎯 I built a small project where bubbles appear on the screen exactly at the position where the user clicks. 🫧✨ 🔍 What I worked on: • Capturing user click events using JavaScript • Getting exact mouse coordinates (X & Y position) • Dynamically creating elements using DOM manipulation • Styling bubbles with CSS (shape, color, animation) • Positioning elements precisely on the screen 💡 What I learned: This project helped me understand how real-time user interaction works in web applications. I also got more comfortable with event handling and how JavaScript connects with HTML & CSS to create engaging UI effects. ⚡ It may look like a small feature, but it’s a big step toward building interactive web apps and improving my frontend skills. Consistency is key — learning something new every day! 💻🔥 #WebDevelopment #JavaScript #Frontend #CodingJourney #LearningInPublic #100DaysOfCode

🚀 Exploring Anime.js Tried working with Anime.js, a lightweight JavaScript library for creating smooth and interactive web animations — and honestly, it felt really interesting to use. 🔹 Highlights: ✔ Smooth and flexible animations ✔ Easy to integrate with JavaScript ✔ Makes UI more interactive and engaging It’s always exciting to explore tools that make web development more creative and fun. 💡 Building and sharing as I go! #JavaScript #AnimeJS #WebDevelopment #Frontend #CodingJourney #Learning

A visual guide on React component useEffect lifecycle. How components mount and re-render in React and their relation with the useEffect hook is one of the most important concepts in React. To summarize, 1. When first-time components are inserted in the DOM, they're referred to as "mounted," then updated via rendering, and later "unmounted." 2. While mounting, a component initializes. 3. In the render stage, a virtual DOM gets created and compared, and in the commit stage, it gets painted to the browser. 4. Any effect gets executed during the commit. If the state changes, the component re-renders with vDOM creation during rendering, painting, and attaching to real DOM during the commit phase. Would you be interested in learning React/JavaScript with visuals and to-the-point explanations of how things work under the hood? I do a deep dive into foundational concepts & how things work under the hood. You can consider connecting with or following me, Ali Raza, to get along with the journey. Thanks. #react #javascript #frontend

🪝: 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

🚀 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

🚀 Excited to Share My Latest Learning! I recently built a GTA 6-inspired website using React.js by following a step-by-step tutorial from Sheryians Coding School. This project helped me improve my frontend skills and understand how to create modern UI with React. 💡 What I learned: ✔ Building responsive UI using React.js ✔ Creating reusable components ✔ Adding smooth animations ✔ Working on a real-world style project ⚡ Challenges & Solutions: ✔ Component structure confusion → Broke UI into smaller reusable components ✔ Styling issues → Used proper CSS Flexbox & Grid ✔ Animation lag → Optimized transitions ✔ Bugs/errors → Debugged step-by-step using console 🎥 I’ve attached the video I followed—check it out! Excited to keep building and learning 🚀 #ReactJS #WebDevelopment #Frontend #JavaScript #Developers #Learning #ProjectBasedLearning #UIUX

✨ Custom animations — smooth scrolling & micro-interactions 🖤 Design: clean black & white with bold orange accents 5 sections, fully built: Hero · About · Awards · Portfolio · Footer Where I actually struggled (the good stuff): → Animations that don't kill performance → Mobile responsiveness that doesn't just "kinda work" → Reusable components that don't become a mess → Getting Tailwind to do EXACTLY what the design says Every struggle taught me something a tutorial never would. If you're learning React + Tailwind — clone a design you love. Build it. Break it. Fix it. That's the real curriculum. 📚 Drop 🔥 for the GitHub link. Drop ❓ if you want a breakdown of any part! #ReactJS #TailwindCSS #Vite #FrontendDevelopment #JavaScript #WebDesign #Portfolio #100DaysOfCode #OpenToWork

Frontend looks easy… until it really isn’t 😅 At first, it feels like: “Just some HTML, CSS, and a bit of JavaScript… should be straightforward.” Then you start building 👇 • Pixel-perfect design 🎯 That tiny 2px difference? Yeah… it suddenly matters more than you expected. • Cross-browser issues 🌐 Everything looks perfect on Chrome… Then Safari humbles you real quick. • Mobile responsiveness 📱 A clean desktop layout can turn into a completely different story on smaller screens. • That one CSS bug 🐛 You fix one thing… and somehow three new issues show up. • And then come animations ✨ Modern UIs almost expect them now. But getting them right? • Smooth timing • Natural feel • Good performance That’s where things get interesting (and sometimes frustrating). Frontend isn’t just about making things look good — It’s about creating an experience that feels right across every screen, browser, and interaction. And honestly, that challenge is what makes it worth it 🚀 #frontend #webdevelopment #javascript #animation #uiux #developerlife

I've been experimenting with custom route transitions to make navigating between pages feel a bit more native and alive. To build this, I used Next.js and next-transition-router to handle the actual page rendering logic, custom SVGs for the wave layers, and GSAP to animate the sweeps. Getting the animations to sync perfectly with the route changes took a bit of fine-tuning, but the final result makes the whole site feel much more cohesive. I've opened up the source code for anyone who wants to check it out. You're welcome to refer to the logic or just copy the setup straight into your own builds: https://lnkd.in/gM7GDChZ #nextjs #gsap #frontenddevelopment #webdevelopment #reactjs #uiengineering #webanimation #javascript #frontend #css #softwareengineering