🚀 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗠𝗶𝗻𝗶𝗺𝗮𝗹 𝗬𝗲𝘁 𝗣𝗼𝘄𝗲𝗿𝗳𝘂𝗹 𝗧𝗼-𝗗𝗼 𝗔𝗽𝗽 (𝗩𝗮𝗻𝗶𝗹𝗹𝗮 𝗝𝗦 𝗢𝗻𝗹𝘆) Just shipped a clean, dark-themed To-Do List Web App — built without any frameworks, bundlers, or dependencies. Only pure 𝗛𝗧𝗠𝗟, 𝗖𝗦𝗦, 𝗮𝗻𝗱 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 💻 🔗 𝗟𝗶𝘃𝗲 𝗗𝗲𝗺𝗼: https://lnkd.in/gYN48NJV 💡 𝗞𝗲𝘆 𝗙𝗲𝗮𝘁𝘂𝗿𝗲𝘀 • Add tasks instantly (Enter or + button) • Mark tasks complete with smooth animations • Expand/collapse long task text • Clear all completed tasks in one click • Live progress bar tracking completion • Displays today’s date on load • Persistent storage using localStorage • Fully responsive design (mobile + desktop) • Custom SVG favicon (no extra assets) ⚙️ 𝗧𝗲𝗰𝗵 𝗛𝗶𝗴𝗵𝗹𝗶𝗴𝗵𝘁𝘀 • Vanilla JavaScript (ES6 classes, event delegation) • Clean state management using a single array • Efficient DOM updates via a single render flow • Smart use of 𝗹𝗼𝗰𝗮𝗹𝗦𝘁𝗼𝗿𝗮𝗴𝗲 (no accidental overwrites) • DocumentFragment for better rendering performance • CSS animations + modern layout (Flexbox) 🧠 𝗪𝗵𝗮𝘁 𝗜 𝗙𝗼𝗰𝘂𝘀𝗲𝗱 𝗢𝗻 Instead of relying on frameworks, I focused on: ✔ Writing clean, maintainable logic ✔ Optimizing rendering performance ✔ Keeping memory usage efficient ✔ Building a real-world usable UI 🚀 Deployed on Vercel with Analytics & Speed Insights enabled. This project really helped me strengthen my JavaScript fundamentals and UI architecture without abstraction layers. Would love your feedback! 🙌 #JavaScript #WebDevelopment #Frontend #100DaysOfCode #BuildInPublic #Vercel #UIUX

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day68 Project: Real Estate Platform (Dynamic Property Listing + Search) What I built Today I upgraded my Real Estate Landing Page into a dynamic property listing platform with search functionality and interactive property cards. This feels closer to a real-world real estate website where users can explore and filter properties. Technologies Used HTML5 CSS3 (Grid, Animations, Glassmorphism UI) JavaScript (DOM Manipulation, Array Methods, Fetch API) Challenge I faced Managing dynamic data rendering while keeping UI smooth and ensuring search functionality works correctly with real-time updates. How I solved it Used JavaScript array methods like filter() and map() to handle dynamic data, and structured reusable rendering functions for better performance and clean code. Live Demo: https://lnkd.in/dyw58cWs Feedback is always welcome! Code Of School Avinash Gour | Ritendra Gour #JavaScript #FrontendDeveloper #WebDevelopment #100DaysOfCode #CodingJourney #Projects #UIUX

🚀 Temperature Converter Website | Mini Project I’m excited to share my latest mini project — a Temperature Converter Website 🌡️ This project allows users to easily convert temperatures between Celsius and Fahrenheit, with an additional option for Kelvin conversion. ✨ Key Features: ✔️ User-friendly input field with validation ✔️ Option to select temperature unit (Celsius / Fahrenheit / Kelvin) 💡 This project helped me strengthen my skills in HTML, CSS, and JavaScript, especially in handling user input, DOM manipulation, and basic logic building. 🔧 Looking forward to adding more advanced features and improving UI/UX in upcoming projects! #WebDevelopment #JavaScript #FrontendDevelopment #MiniProject #Coding #StudentDeveloper #100DaysOfCode

Hello #connections I finally built something I’ve been meaning to for a while, which is a Sorting Algorithm Visualizer! This project started off pretty simply: I wanted to actually understand how sorting algorithms behave step-by-step instead of just reading theory or memorizing time complexities. But somewhere along the way, it turned into something much more meaningful for me. This was also my first time working with React, which made the whole process both exciting and slightly chaotic. → I had to wrap my head around components, state, re-renders, and how everything ties together → Managing animations alongside algorithm logic was way trickier than I expected → And I definitely underestimated how much small UI decisions matter when you're trying to visualize something clearly The visualizer currently supports: → Bubble Sort → Merge Sort → Quick Sort → Heap Sort Quick breakdown of what each does (in very simple terms): → Bubble Sort: repeatedly swaps adjacent elements until everything is sorted (simple but slow) → Merge Sort: divides the array into halves, sorts them, then merges them back together → Quick Sort: picks a pivot and partitions the array around it recursively (fast in practice) → Heap Sort: builds a heap and repeatedly extracts the maximum/minimum element Each algorithm is animated so you can actually see how elements move, swap, and settle into place, which honestly helped me understand them way better than just code ever did. The attached video is at a faster animation speed, but you can check it out for yourself in the link provided! I used React and Vanilla CSS for this project. Honestly, my CSS isn’t very polished in this project. I focused way more on getting the logic and animations right than making everything look perfect. Also, the mobile UI is kinda terrible right now, but I will try fixing it later on. What I learned from this: → Visualizing algorithms forces you to truly understand them → React makes dynamic UI powerful, but you have to think carefully about state updates → Even “simple” projects can get complex when you care about the details Link: https://lnkd.in/gRkqVeGQ Repo: https://lnkd.in/g7YKV8uq Would love any feedback, suggestions, or ideas on what I can add next.

Most developers use the browser every day. Far fewer actually understand what it’s doing. And that’s why a lot of “random UI performance issues” aren’t random at all. A simplified browser rendering pipeline: HTML → DOM CSS → CSSOM DOM + CSSOM → Render Tree Layout → Paint → Composite Why this matters: Because not all visual updates cost the same. Layout / reflow = expensive Paint = cheaper Composite = usually fastest That’s why animations using transform and opacity often feel much smoother than changing: width, height, top left If you understand how the browser renders, you stop guessing and start optimizing intentionally. This is one of those topics that separates “it works” from “it performs well.” What still confuses more developers in your opinion: reflow, repaint, or compositing? #javascript #webdevelopment #frontend #reactjs #performance #browser #softwareengineering

🚀 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

🚀 Building a Random Password Generator using useState, useEffect, useRef & useCallback I recently built a Random Password Generator project and gained some valuable hands-on experience with React hooks. Here are my key learnings: 🔹 useCallback – Optimizing Performance I learned that when you don’t want a function to be recreated on every render, you can use useCallback. By specifying dependencies, React only recreates the function when needed, improving overall efficiency. 🔹 useEffect – Controlling Side Effects If you want React to re-run a function after a state change, useEffect is the way to go. In my project, whenever the password length or character options changed, I needed to regenerate the password. So I used: useEffect(() => { generate(); }, [length, numbers]) This ensured the password updates automatically whenever dependencies change. 🔹 useRef – Direct DOM Access For better UX, I used useRef to directly access the HTML element when needed, avoiding unnecessary re-renders. 🔹 Clipboard Feature – Improving UX I implemented a copy-to-clipboard feature using: window.navigator.clipboard.writeText(password) This makes it super easy for users to copy the generated password instantly. 💡 Key Takeaway: Understanding when and how to use these hooks can significantly improve both performance and user experience in React applications. #React #WebDevelopment #JavaScript #FrontendDevelopment #LearningInPublic #Projects

𝐇𝐨𝐰 𝐭𝐨 𝐎𝐩𝐭𝐢𝐦𝐢𝐳𝐞 𝐑𝐞𝐧𝐝𝐞𝐫𝐢𝐧𝐠 𝐏𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞 𝐢𝐧 𝐭𝐡𝐞 𝐁𝐫𝐨𝐰𝐬𝐞𝐫 🚀 Many developers focus on 𝐀𝐏𝐈 𝐬𝐩𝐞𝐞𝐝 𝐨𝐫 𝐛𝐚𝐜𝐤𝐞𝐧𝐝 𝐨𝐩𝐭𝐢𝐦𝐢𝐳𝐚𝐭𝐢𝐨𝐧, but forget one important thing — 𝐡𝐨𝐰 𝐟𝐚𝐬𝐭 𝐭𝐡𝐞 𝐛𝐫𝐨𝐰𝐬𝐞𝐫 𝐫𝐞𝐧𝐝𝐞𝐫𝐬 𝐭𝐡𝐞 𝐔𝐈. Even with a fast backend, poor rendering can make your app feel slow and laggy. 𝐇𝐞𝐫𝐞 𝐚𝐫𝐞 𝐬𝐨𝐦𝐞 𝐩𝐫𝐚𝐜𝐭𝐢𝐜𝐚𝐥 𝐰𝐚𝐲𝐬 𝐭𝐨 𝐨𝐩𝐭𝐢𝐦𝐢𝐳𝐞 𝐫𝐞𝐧𝐝𝐞𝐫𝐢𝐧𝐠 𝐩𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞: 🔹 𝟏. 𝐑𝐞𝐝𝐮𝐜𝐞 𝐃𝐎𝐌 𝐒𝐢𝐳𝐞 A large and deeply nested DOM increases the browser’s rendering work. Keep your HTML structure clean and minimal. 🔹 𝟐. 𝐀𝐯𝐨𝐢𝐝 𝐋𝐚𝐲𝐨𝐮𝐭 𝐓𝐡𝐫𝐚𝐬𝐡𝐢𝐧𝐠 Frequent DOM reads and writes force the browser to recalculate layout multiple times, which slows down rendering. 🔹 𝟑. 𝐔𝐬𝐞 𝐭𝐫𝐚𝐧𝐬𝐟𝐨𝐫𝐦 𝐚𝐧𝐝 𝐨𝐩𝐚𝐜𝐢𝐭𝐲 𝐟𝐨𝐫 𝐀𝐧𝐢𝐦𝐚𝐭𝐢𝐨𝐧𝐬 Properties like top, left, width, and height trigger layout recalculations. Instead, use transform and opacity, which are often GPU accelerated. 🔹 𝟒. 𝐋𝐚𝐳𝐲 𝐋𝐨𝐚𝐝 𝐑𝐞𝐬𝐨𝐮𝐫𝐜𝐞𝐬 Load images and components only when needed. Example: <𝐢𝐦𝐠 𝐥𝐨𝐚𝐝𝐢𝐧𝐠="𝐥𝐚𝐳𝐲" /> 🔹 𝟓. 𝐌𝐢𝐧𝐢𝐦𝐢𝐳𝐞 𝐑𝐞𝐟𝐥𝐨𝐰𝐬 𝐚𝐧𝐝 𝐑𝐞𝐩𝐚𝐢𝐧𝐭𝐬 Frequent UI changes can trigger expensive browser operations. Batch DOM updates when possible. 🔹 𝟔. 𝐔𝐬𝐞 𝐫𝐞𝐪𝐮𝐞𝐬𝐭𝐀𝐧𝐢𝐦𝐚𝐭𝐢𝐨𝐧𝐅𝐫𝐚𝐦𝐞 𝐟𝐨𝐫 𝐀𝐧𝐢𝐦𝐚𝐭𝐢𝐨𝐧𝐬 It synchronizes animations with the browser’s rendering cycle for smoother performance. 🔹 𝟕. 𝐕𝐢𝐫𝐭𝐮𝐚𝐥𝐢𝐳𝐞 𝐋𝐚𝐫𝐠𝐞 𝐋𝐢𝐬𝐭𝐬 If you render thousands of items in the DOM, the browser will struggle. Use list virtualization to render only visible elements. 💡 𝐒𝐢𝐦𝐩𝐥𝐞 𝐑𝐮𝐥𝐞: 𝐋𝐞𝐬𝐬 𝐃𝐎𝐌 + 𝐟𝐞𝐰𝐞𝐫 𝐥𝐚𝐲𝐨𝐮𝐭 𝐜𝐚𝐥𝐜𝐮𝐥𝐚𝐭𝐢𝐨𝐧𝐬 + 𝐆𝐏𝐔-𝐟𝐫𝐢𝐞𝐧𝐝𝐥𝐲 𝐚𝐧𝐢𝐦𝐚𝐭𝐢𝐨𝐧𝐬 = 𝐅𝐚𝐬𝐭𝐞𝐫 𝐔𝐈.⚡ Small optimizations in rendering can significantly improve user experience and Core Web Vitals. #WebPerformance #FrontendDevelopment #JavaScript #ReactJS #PerformanceOptimization #CoreWebVitals #shohelranabaig #codewithbaig

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day61 Project: Mood Vibe Generator What I built Today I built a Mood Vibe Generator where users can select their mood and get a curated visual vibe experience. Technologies Used HTML5 CSS3 JavaScript (DOM, Dynamic Rendering) Challenge I faced Designing a clean and aesthetic UI while keeping it interactive and responsive. How I solved it Used modern CSS effects (blobs, gradients) and dynamic rendering using JavaScript arrays. Features Multiple mood options Beautiful UI with ambient effects Smooth animations Live Demo: https://lnkd.in/d4WqXGQ3 Note: This project is not fully completed yet — more features coming soon Open to feedback and suggestions Code Of School Avinash Gour | Ritendra Gour #FrontendDeveloper #JavaScript #WebDevelopment #100DaysOfCode #DeveloperJourney #Coding #UIUX

🎯 From a Simple Idea to a Smarter Game Experience What started as a basic “Guess the Number” game turned into an interesting challenge — 👉 How do you make a simple logic feel engaging, interactive, and user-friendly? Instead of stopping at just “Too High / Too Low”, I focused on improving the experience. 💡 I asked myself: How can I guide the user instead of making them guess blindly? That led me to build: 🔹 Multiple difficulty levels with dynamic ranges 🔹 A timer-based challenge to add pressure ⏱ 🔹 A smart hint system (range narrowing + “Very Close” feedback) 🔹 Bonus logic-based hints (Even/Odd after multiple attempts) 🔹 Score tracking to encourage better performance 🏆 🔹 Clean, responsive UI with Dark Mode 🌙 What I realized while building this: It’s not just about writing logic — it’s about designing how users interact with that logic. This project helped me think beyond code and focus on: ✨ User experience ✨ Real-time feedback systems ✨ Writing scalable and structured frontend logic 🔗 Live Demo: https://lnkd.in/dQ_48trb 🔗 Github Repository: https://lnkd.in/dtgmC67b Still improving it — would love your feedback! 😊 #WebDevelopment #Frontend #JavaScript #UIUX #Projects #BuildInPublic