Campus Lost & Found Web Application UI Design

Most sliders just… slide. I wanted to build something with a different feel 🎯 A Carousel Slider with Blur Effects using HTML, CSS & JavaScript 💻 It started as a simple idea — left, right… images change. But during development, one thought stood out: “What if, when users see this… it feels like an experience?” That’s when I decided to integrate blur effects. The active item stays sharp and clear, while the other elements softly fade into the background. This keeps the UI clean, reduces unnecessary distractions, and naturally guides user focus to what matters most. Like a camera lens — only the important elements stay in focus 🎥 This approach creates a noticeable difference in user experience: • Clear visual hierarchy • Better attention guidance • Smooth, calm interaction flow 🛒 Especially for e-commerce / product websites, this can be impactful: • Improves product visibility • Increases user engagement • Makes decision-making easier • Can positively influence conversions It’s a small UI change… but it has the potential to influence user behavior in a meaningful way ⚡ This project pushed me to think beyond just code — how design decisions shape user experience. UI is not just what users see… it’s what they feel. Still improving this further: → Mobile swipe / drag interaction → Better transition timing → More depth & parallax effects Building step by step 🚀 #Frontend #JavaScript #UIUX #WebDevelopment #Ecommerce #JavaScriptMastery JavaScript Mastery w3schools.com

🎨 The 60–30–10 Rule — A Simple Trick for Better UI Design One of the easiest ways to make your designs look clean and professional 👇 👉 60% — Primary Color (background) 👉 30% — Secondary Color (UI elements) 👉 10% — Accent Color (highlights & CTAs) This rule helps create visual balance, improves readability, and makes your UI feel more polished. 💡 Why it works: It guides the user’s attention naturally — your accent color (10%) becomes the focus without overwhelming the design. 🧠 How I use it in projects: Background → neutral (60%) Cards / sections → secondary (30%) Buttons / highlights → accent (10%) 🔥 If your UI ever feels “off”, try applying this rule — it makes a huge difference. 📌 Save this for your next project! 💬 Do you follow any design rules while building UI? #UIUX #WebDesign #FrontendDevelopment #DesignTips #CSS #ReactJS #WebDevelopment #Developer #Coding #TechCommunity #100DaysOfCode

🧮 𝑆𝑖𝑚𝑝𝑙𝑒 𝐶𝑎𝑙𝑐𝑢𝑙𝑎𝑡𝑜𝑟 | 𝐹𝑟𝑜𝑛𝑡-𝐸𝑛𝑑 𝑃𝑟𝑜𝑗𝑒𝑐𝑡 Excited to share a project I recently built using 𝐇𝐓𝐌𝐋, 𝐂𝐒𝐒, and 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 — a modern, responsive calculator designed with a strong focus on clean UI, usability, and smooth user experience. 🔹 Implements core arithmetic operations with real-time calculations 🔹 Built using DOM manipulation to handle interactive button inputs 🔹 Fully responsive design that works across different screen sizes 🔹 Lightweight and fast performance with clean code structure Through this project, I strengthened my understanding of JavaScript logic, event handling, and dynamic UI updates, while also improving my front-end development skills. I also explored how small UI decisions can significantly improve user experience and interaction flow. 🌐 Live Demo: https://lnkd.in/gcsCzzTa 💻 GitHub: https://lnkd.in/gDZetHBU Looking forward to enhancing this project further with features like: 🕘 History tracking 🌙 Dark mode ➗ Advanced operations 🎨 UI animations Always learning, always building 🚀 #FrontendDevelopment #JavaScript #WebDevelopment #HTML #CSS #StudentDeveloper #Projects #BuildInPublic

If you've ever tried to build a drag-and-drop grid in React Native, you know the struggle. Getting those smooth, fluid animations while items reshuffle their positions without dropping frames is a massive performance hurdle. Most solutions end up feeling "janky" because they can't handle the heavy layout calculations fast enough on the main thread. 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗿𝗲𝘀𝗵𝘂𝗳𝗳𝗹𝗲𝗱 is a specialised grid layout library designed to solve exactly that. 𝗪𝗵𝗮𝘁’𝘀 𝗶𝗻𝘀𝗶𝗱𝗲? ➡️ 𝗡𝗶𝘁𝗿𝗼-𝗽𝗼𝘄𝗲𝗿𝗲𝗱 𝗘𝗻𝗴𝗶𝗻𝗲: The library now utilises 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗻𝗶𝘁𝗿𝗼-𝗺𝗼𝗱𝘂𝗹𝗲𝘀. This allows for near-instant communication between the native side and JavaScript, ensuring that complex grid reshuffling remains butter-smooth even with dozens of items. ➡️ 𝗼𝗻𝗗𝗿𝗮𝗴𝗘𝗻𝗱 𝗪𝗼𝗿𝗸𝗹𝗲𝘁 𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸𝘀: You can now execute custom logic directly on the 𝗨𝗜 𝘁𝗵𝗿𝗲𝗮𝗱 when a drag interaction finishes. By using 𝘄𝗼𝗿𝗸𝗹𝗲𝘁𝘀, you bypass the asynchronous nature of the standard bridge, allowing for immediate response and state synchronisation. ➡️ 𝗢𝗽𝘁𝗶𝗺𝗶𝘇𝗲𝗱 𝗚𝗿𝗶𝗱 𝗟𝗼𝗴𝗶𝗰: The underlying reshuffling algorithm has been refined to handle dynamic item movements more predictably, eliminating the "flicker" often seen in less optimised grid libraries. 𝗪𝗵𝘆 𝗶𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀? The biggest challenge in mobile UI development isn't just making it look good—it's making it feel responsive. By leveraging 𝗡𝗶𝘁𝗿𝗼 and 𝘄𝗼𝗿𝗸𝗹𝗲𝘁𝘀, 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗿𝗲𝘀𝗵𝘂𝗳𝗳𝗹𝗲𝗱 minimises the execution time for expensive layout changes. It transforms the drag-and-drop experience from a heavy JavaScript task into a high-performance native interaction. If you're building a dashboard, a photo gallery, or a customisable home screen, this update makes 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗿𝗲𝘀𝗵𝘂𝗳𝗳𝗹𝗲𝗱 one of the most performant ways to handle interactive grids in the ecosystem right now. #ReactNative #NitroModules #MobileDev #OpenSource #JavaScript #TypeScript #UIUX #GridToolkit #SoftwareEngineering #Reanimated #DeveloperTools #MobileApps

Just shipped my new portfolio and this time, I focused heavily on design details that actually change how it feels to use. The highlight? A liquid glass navbar. Instead of a static bar, it adapts to the background with a subtle blur and transparency, creating that smooth, layered look you usually see in high-end interfaces. It’s a small shift, but it makes the whole experience feel more modern and alive. Beyond visuals, the goal was simple: Build a portfolio that clearly communicates what I do while still feeling polished and intentional. Tech + design decisions I focused on: • Clean hero section with strong positioning • Glassmorphism UI with depth and contrast • Clear CTAs (Let’s Talk, Download CV) • Structured skill highlights for quick scanning • Performance-first layout What this really means is… I’m trying to move beyond “just another developer portfolio” and build something that reflects both engineering and product thinking. Would love to hear your thoughts especially on the UI direction. #Portfolio #WebDevelopment #Frontend #UIUX #Glassmorphism #React #NextJS #Developer

Clean HTML, modular CSS, and a focus on one thing: making the experience feel smooth from browsing the menu to placing an order. The goal was simple, not just to make it look good, but to make it feel effortless to use. 💡 Clean UI, reusable CSS structure, and a responsive layout that works perfectly on mobile and desktop. If you’re into frontend, UI design, or building clean user experiences, let’s connect 🤝 Always down to share ideas and learn from others in the space. #WebDesign #FrontendDevelopment #UIUX #CSS #ResponsiveDesign #CleanCode #BuildInPublic #TechCommunity #Developers #DesignInspiration

🚀 New Tool Launch on DevToolLab: PX to REM Converter If you’ve worked on responsive design, you already know this struggle: Design comes in px, but scalable, accessible UI needs rem. And suddenly you're doing manual calculations again and again… That tiny friction adds up fast. So we built a free PX to REM Converter on DevToolLab 👇 👉 https://lnkd.in/gWttbsdk ⚡ What it helps you do: • Convert px to rem instantly • Customize base font size (16px, 14px, etc.) • Build scalable and responsive layouts • Improve accessibility across devices 💡 Why it matters: Using rem units helps create consistent, scalable UI systems, making designs more responsive and user-friendly across different screen sizes and accessibility settings. 💡 Perfect for: Frontend developers, UI engineers, and designers building modern web applications. Enter px → Convert → Use in your CSS 🚀 The difference between good UI and great UI often comes down to small details like this. What practical frontend tool should we launch next on DevToolLab? 👇 #DevToolLab #FrontendDevelopment #CSS #WebDevelopment #ResponsiveDesign #Developers #DevTools #BuildInPublic #UIUX #Programming

🚀 Day 18: Perfecting the Details with UI Micro-Interactions! I am happy to share my progress on Day 18 of my MERN Stack Journey. Today was all about polish and focusing on the small details that make a big difference in User Experience (UX). 🛠️ Today's Focus: Call-to-Action (CTA) Polish After making my Laundry Web Page fully responsive yesterday, I realized the main "Book a Service Today!" button needed a bit more life. Today, I applied my recent learnings in CSS transitions and transforms to create a smooth, satisfying hover effect for it. Why this matters: Visual Feedback: A well-designed hover effect instantly tells the user that an element is clickable, improving navigation. Premium Feel: Smooth transitions (rather than abrupt color jumps) make the entire web page feel much more professional and modern. [🎥 Check out the short preview video attached to see the new button effect in action!] 🌍 Live Preview I have updated my deployed project on GitHub Pages with these new interactions. I love being able to push updates and see them live instantly! 🔗 View the live project here: [https://lnkd.in/ggfPWPnZ] 💬 Let’s Connect! To the frontend developers out there: What is your favorite CSS property to animate on a hover effect? Do you prefer subtle background color changes, or do you like adding a slight transform: scale() to make the button "pop"? Thank you again to Tutedude for the continuous guidance. The layout is solid, the interactions are smooth, and I am excited for what comes next! #MERNStack #WebDevelopment #100DaysOfCode #CSS3 #UIUX #MicroInteractions #Tutedude #FrontendDeveloper #BuildInPublic #CodingJourney #GitHubPages

🚀 𝗕𝘂𝗶𝗹𝘁 𝗮𝗻 𝗜𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝘃𝗲 𝗖𝗮𝗹𝗲𝗻𝗱𝗮𝗿 𝘄𝗶𝘁𝗵 𝗥𝗮𝗻𝗴𝗲 𝗦𝗲𝗹𝗲𝗰𝘁𝗶𝗼𝗻 & 𝗡𝗼𝘁𝗲𝘀 I recently worked on a frontend challenge where the goal was to turn a static wall calendar design into a fully interactive component — and I took it as an opportunity to focus on both functionality and product experience. 🔹 Key features: • 📅 Dynamic month navigation with smooth animations • 🎯 Date range selection (with reverse handling & hover preview) • ✍️ Notes system attached to selected date ranges • 💾 Persistent data using localStorage • 🖼 Dynamic hero images for each month • 🎨 Clean, responsive UI inspired by real wall calendars Instead of over-engineering, I focused on: → Clean architecture using custom hooks → Avoiding unnecessary state libraries (kept it simple & scalable) → Improving UX with small but impactful details 🔗 Live Demo: https://lnkd.in/gwfBCZw4 💻 GitHub: https://lnkd.in/gTPyR8zm Would love to hear your feedback! #react #frontend #javascript #webdevelopment #tailwindcss #framerMotion #uiux

𝗗𝗔𝗬 4: 𝗘𝘅𝗽𝗲𝗿𝗶𝗺𝗲𝗻𝘁𝗶𝗻𝗴 𝘄𝗶𝘁𝗵 𝗘‑𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗜𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝘃𝗲 𝗢𝗯𝗷𝗲𝗰𝘁𝘀 I wanted this specific interaction, the weight, the snapping, and the visual depth. The built-in features just weren't getting me there, so I went under the hood and forced the logic from scratch using custom JavaScript and CSS. It’s called 𝗔𝘅𝗶𝘀 𝗖𝗼𝗿𝗲. I spent a lot of time obsessing over the viewport math to make sure the cards "clunk" into place perfectly, regardless of screen size. 𝗪𝗮𝗻𝘁 𝘁𝗼 𝘂𝘀𝗲 𝘁𝗵𝗶𝘀 𝗶𝗻 𝘆𝗼𝘂𝗿 𝗽𝗿𝗼𝗷𝗲𝗰𝘁? Comment the word "Axis Core" below and I’ll send you the source file. (Make sure to send me connection request if we are not connected yet) 𝗣𝗦: I’m not a Pro Developer or UI/UX designer. I just like learning things my own way and making things happen by any means necessary. :) #ELearningDevelopment #Javascript #InstructionalDesign #Storyline360 #WebObjects #AxisCore