🚀 I’ve built a simple and responsive Calculator Web App using #HTML, #CSS, and #JavaScript. This project performs basic arithmetic operations like addition, subtraction, multiplication, and division — all through a clean and intuitive user interface. ✨ Features: Perform basic mathematical operations ( +, −, ×, ÷ ) Clear and reset buttons for easy use Attractive UI with responsive design for all devices Real-time display update using DOM manipulation Simple and beginner-friendly code structure 🧠 This project helped me strengthen my skills in: JavaScript logic building and event handling DOM manipulation and dynamic updates CSS layout and styling for responsive UIs Building interactive front-end applications This project was a great exercise to understand the fundamentals of JavaScript-based interactivity and improve my front-end development skills. 🔗 Check out the code on GitHub: 👉 https://lnkd.in/ggKayjx3 #HTML #CSS #JavaScript #WebDevelopment #Frontend #Coding #PortfolioProject #Learning

🚀 Just built an Expense Tracker App using HTML, CSS, and JavaScript! 💸 This project helps users add, view, and delete expenses with a clean and modern UI. The best part? 💾 Your data is automatically saved in the browser using local Storage, so even after refreshing — your expenses stay right there! 🙌 ✨ Key Features: Add and remove expenses dynamically 🧾 Data persistence using local Storage 💾 Modern glass morphism UI with gradient styling 🎨 Fully responsive for mobile and desktop devices 📱💻 Simple, fast, and user-friendly experience ⚡ This project helped me polish my DOM manipulation, JavaScript event handling, and UI design skills. Every little interaction feels smoother now! 😄 🔗 Live Demo: [ https://lnkd.in/dRgvCUdG ] 💻 GitHub Repo: [ https://lnkd.in/dxSaabtu ] #WebDevelopment #JavaScript #Frontend #HTML #CSS #Coding #ExpenseTracker #Project

🧮 Simple Calculator App Excited to share my latest Front-End project — a Simple Calculator built from scratch using HTML, CSS, and JavaScript ⚡ The app features a clean, responsive design with smooth interactions and reliable performance. It handles all basic arithmetic operations, includes clear/delete functionality, and manages syntax errors gracefully. ✨ Key Highlights: Minimal and responsive UI Real-time calculation updates Smart error handling 💡 This project was a great way to sharpen my JavaScript DOM manipulation and event handling skills. 🔗 Live Demo: https://lnkd.in/debsZ7aQ

🚀 Just Built a Document & File Manager Web App! 📁 I'm excited to share my latest project — a drag & drop file manager with user authentication and a beautiful, modern UI! ✨ Features • 📁 Drag & drop file organization • 👤 User authentication & authorization • 🎨 Beautiful glass-morphism UI with smooth animations • 🏷️ Automatic file type detection & color coding • 📱 Fully responsive design • 💾 Local storage with IndexedDB for large files • 🔍 Real-time file search • 📤 One-click file downloads 🛠️ Tech Stack • Frontend: React.js, Motion for animations, Tailwind CSS • Icons: React Icons • Storage: IndexedDB (handles videos/audio/large files) • Auth: JWT-like localStorage implementation 🎯 Key Highlights • Files automatically categorized by type (PDF, Images, Documents, etc.) • Each file type has distinct color coding • Smooth drag-and-drop functionality • Persistent user sessions • Optimized for large file handling 💡 Inspired By:- Sheryians Coding School 📚 What I Learned ✅ React state management & hooks ✅ File handling in browsers ✅ IndexedDB for client-side storage ✅ UI/UX design principles ✅ Authentication flows 🔗 Live Demo: https://lnkd.in/dgG8B27u 📁 Source Code: https://lnkd.in/dkU6pbdW #ReactJS #WebDevelopment #Frontend #JavaScript #FileManager #WebApp #Coding #Programming #ProjectShowcase #TailwindCSS

🚀 Just built an Advanced To-Do List App using HTML, CSS, and JavaScript! This app helps users stay organized with a clean and modern interface — plus it saves your tasks even after you refresh the page! 💪 ✨ Key Features: ✅ Add, edit, delete, and mark tasks as completed ✅ Data saved in Local Storage ✅ Smooth glass morphism design with gradient UI ✅ Fully responsive for all devices ✅ Real-time DOM updates 💡 Building this project strengthened my understanding of JavaScript logic, local Storage, and DOM manipulation, while also improving my frontend design sense. 🔗 Live Project: https://lnkd.in/d_Mp7nRe 💻 GitHub Repository: https://lnkd.in/deZShmcd #JavaScript #WebDevelopment #Frontend #HTML #CSS #LearningByBuilding #ProjectShowcase #GitHub

🚀 Just shipped a full-featured Quiz Master web app — built completely from scratch with modern React tooling! 💻 What’s inside: • React 18 + Vite 5 → blazing-fast dev experience • React Router v6 → clean, protected routing • Tailwind CSS → responsive, modern UI • Framer Motion → smooth animations & micro-interactions • Lucide React icons → crisp visuals ⚙️ Core Features: • Secure user authentication with protected routes & session persistence • Admin dashboard to create, edit, delete quizzes (saved to localStorage) • Real-time quiz experience with: – Timers & auto-save every 5 s – Progress restore on return – Question navigator + incomplete-warning before submit • Rich results page with: – Animated score ring – Pass/fail status & accuracy stats – Detailed per-question review with correct answers • Personal dashboard with aggregated performance stats 🧠 Tech Highlights: • Modular architecture with pages, reusable components, and utils services • LocalStorage services for users, progress & results • Default quizzes via data/quizzes.js + extendable custom quiz model • Clean DX using npm run dev, build, and preview Go to 👉:-https://lnkd.in/d4AxTrNj 💡 Why I Built This: To practice end-to-end app design — from auth → data → UX → animation — and to create a reusable learning-platform template for internal or educational use. 🎥 Watch the walkthrough video to see it's output! 💬 I’d love your feedback and suggestions for the next iteration. 👉 Want a backend version with real DB/auth? Comment “API next.” 👉 Need the repo link or a detailed breakdown thread? Comment “Docs.” #react #vite #tailwindcss #frontenddevelopment #javascript #quizapp #uiux #reactrouter #framermotion #webdevelopment #programming #webdev #portfolioProject #softwaredevelopment #fullstackdeveloper

A lot of developers (including me, a few years back) think that if an API responds fast, the UI should also feel fast. But the real bottleneck often lies in what happens after the data arrives — when the browser starts to render it. And here comes reflow, repaint and composite: 𝐋𝐚𝐲𝐨𝐮𝐭 (𝐑𝐞𝐟𝐥𝐨𝐰): The browser figures out where every element should sit and how big it should be. Even something as small as changing font size or toggling a hidden div can trigger this. 𝐏𝐚𝐢𝐧𝐭 (𝐑𝐞𝐩𝐚𝐢𝐧𝐭): Once layout is done, it starts coloring things — text, borders, shadows, etc. 𝐂𝐨𝐦𝐩𝐨𝐬𝐢𝐭𝐞: Finally, it combines all the painted layers into a frame you actually see. Now here’s where things go wrong 👇 When JavaScript keeps changing styles or reading layout properties in between DOM updates, the browser is forced to redo this work again and again — what we call 𝐥𝐚𝐲𝐨𝐮𝐭 𝐭𝐡𝐫𝐚𝐬𝐡𝐢𝐧𝐠. That’s when your app feels sluggish, even though everything “looks fine” in the code. A few practical things that actually help: - Avoid triggering layout reads right after DOM writes. Use transform and opacity for animations (don’t move elements using top or left). - Debounce heavy scroll or resize handlers. - And if you can — batch your DOM changes instead of doing them one by one. It’s not about “micro-optimizing” — it’s about understanding how browsers think. Once you get that, performance tuning becomes way more predictable. #FrontendPerformance #BrowserRendering #WebPerformance #FrontendEngineering #ReactJS #TypeScript #WebDevTips

💻 I recently built a To-Do List web app that merges clean functionality ✅  with a stunning glassmorphism design 💎 for a modern, elegant touch. 🚀 This project was a practical way to enhance my front-end skills ⚙️ and understand how design 🎨 and functionality 🛠️ complement each other in modern web apps. 🧠 Core Features: ✏️ Add, edit, delete, and mark tasks as complete 💾 Persistent storage using localStorage — tasks stay even after refreshing the page ⚡ Inline editing with smooth “edit → save” toggles 🎯 Responsive layout and accessible interface 🌙 Modern night-sky background with soft blur and transparency effects 🛠️ Tech Stack: 🧩 HTML5 — Semantic structure and accessibility 🎨 CSS3 — Glassmorphism, blur filters, shadows, and transitions 💡 Vanilla JavaScript (ES6) — DOM manipulation, event handling, and localStorage logic 🔍 What I Learned: 🧠 Managing state and interactivity without frameworks 📝 Implementing editable content safely with dynamic icons 🎨 Creating clean UI using only CSS and focusing on user experience 💾 Leveraging localStorage for front-end data persistence 🔗 GitHub Repository: https://lnkd.in/dBEHVpqJ ✨ This project showed me that even a simple idea can evolve into a powerful learning journey when you focus on polish 💫, interactivity 🎮, and structure 🧱. #WebDevelopment #FrontEnd #JavaScript #CSS #HTML #Glassmorphism #CodingProjects #UIUX #GitHub

🚀 Day 11 — Mini Project: Searchify 🔍 Today I built a new mini project — Searchify a simple and clean JavaScript Search Functionality App that filters users by their name or email in real time! ⚡ This project helped me understand how to: ✨ Work with arrays of objects (user data) ✨ Use DOM manipulation effectively ✨ Implement real-time filtering using input events ✨ Make a clean and responsive UI with CSS ✨ Connect logic between HTML, CSS, and JS I’ve used: 💻 HTML – Structure 🎨 CSS – Clean responsive styling ⚙️ JavaScript – Logic for live searching This project might look simple — but it’s a great practice for learning how real search boxes work in modern web apps! 🔗 Live Demo: https://lnkd.in/gAstq426 📦 GitHub Repo: https://lnkd.in/gQGsnbbH 💬 If you’re also learning JavaScript, I’d love to hear what mini projects you’re building. Let’s grow together 🚀 #️⃣ #Day11 #JavaScript #FrontendDevelopment #MiniProject #WebDevelopment #HTML #CSS #SearchApp #LearningInPublic #100DaysOfCode #FrontendJourney