Toast Notification Component Built with HTML, CSS & JavaScript

Hey everyone.... 🚀 Day 26 of #30DaysCodeChallenge Today I built a Magnetic Buttons UI with Cursor Glow Effect using HTML, CSS, and JavaScript. This project focuses on creating modern interactive UI elements often seen in advanced portfolio and product websites. The buttons dynamically respond to the user's cursor movement, creating a magnetic attraction effect that enhances user engagement and visual appeal. ✨ Key Features: • Magnetic hover interaction where buttons move toward the cursor • Custom glowing cursor effect that follows mouse movement • Smooth animations using JavaScript event handling • Modern gradient button design with hover glow • Clean and responsive UI layout 🧠 What I practiced: • DOM manipulation with JavaScript • Mouse position tracking • Advanced hover animations • Interactive UI/UX design techniques Projects like this help in understanding how small micro-interactions can significantly improve user experience in web applications. Looking forward to building more creative UI interactions in the coming days! #30DaysCodeChallenge #Day26 #HTML #CSS #JavaScript #FrontendDevelopment #WebDevelopment #UIDesign #CodingChallenge 🚀

🔐 Built a Password Toggle Website using HTML, CSS & JavaScript 🚀 Excited to share another mini project from my frontend development journey — a Password Toggle Feature for websites! This feature allows users to show or hide their password while typing, improving both usability and user experience in login or signup forms. 🔹 Tech Stack Used: ✅ HTML5 – Form structure ✅ CSS3 – Clean and responsive UI styling ✅ JavaScript – Toggle functionality and DOM interaction 🔹 Key Features: ✔️ Show / Hide password functionality ✔️ Interactive eye icon toggle ✔️ Simple and user-friendly interface ✔️ Responsive design for all devices Through this project, I improved my understanding of: 👉 DOM Manipulation 👉 JavaScript Event Handling 👉 Form UI Enhancements 👉 Building reusable UI components Small features like this are commonly used in modern authentication systems and help improve overall user experience (UX). 💡 🔗 Live Demo: https://lnkd.in/gBdi7MPw #WebDevelopment #FrontendDeveloper #JavaScript #HTML #CSS #UIDeveloper #ReactDeveloper #BuildInPublic #LearningByBuilding

🚀 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗠𝗶𝗻𝗶𝗺𝗮𝗹 𝗬𝗲𝘁 𝗣𝗼𝘄𝗲𝗿𝗳𝘂𝗹 𝗧𝗼-𝗗𝗼 𝗔𝗽𝗽 (𝗩𝗮𝗻𝗶𝗹𝗹𝗮 𝗝𝗦 𝗢𝗻𝗹𝘆) 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

Hey people 🖐 Just built a responsive profile webpage using HTML, CSS, and a bit of JavaScript — keeping it simple, clean, and beginner-friendly ✨ As someone in the field of UI/UX designing, I’ve realized something important: Design isn’t just about how things look, it’s also about how they work, and how your design is able to solve real world problems. Understanding code — even at a basic level — helps me: • Design more realistic and developer-friendly interfaces • Know what’s actually possible (and what’s not) • Communicate better with developers 🤝 • Think beyond screens and into real user interactions I’m not aiming to become a frontend developer, but learning the fundamentals gives me an edge as a designer — because great design and clean code always go hand in hand. This is just a small step toward bridging the gap between design and development 🚀 #UIUXDesign #WebDesign #FrontendBasics #ResponsiveDesign #LearningInPublic #DesignToCode #UIDesign #UXDesign #StudentDeveloper #CreativeTech #BuildInPublic #DesignJourney #frontend #HTML #CSS

🚀 Character Counter Web Application I recently built a Character Counter Web Application using React.js, where users can input text and instantly get the total character count in a clean and interactive interface. 🔷 Project Overview: This project features a modern split-screen UI design, with a creative visual section on the left and a functional input section on the right for real-time interaction. 🔷 Key Features: ◾ Accepts user input through a text field ◾Displays live character count dynamically as the user types ◾Built using React functional components and state management (useState) ◾Implemented event handling for real-time updates ◾Designed a responsive split-screen UI using CSS ◾Clean layout with focus on user experience and readability 🔷 Technologies Used: React.js | HTML | CSS | JavaScript This project helped me strengthen my understanding of React fundamentals, state management, event handling, and dynamic UI rendering, while building a practical and interactive component. 💡 Such features are commonly used in form validations, content editors, and social media platforms. #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #HTML #CSS #UIUX #Projects #LearningByBuilding

Your website shouldn’t just exist — it should engage, convert, and impress. This Weekly Review highlights my latest frontend work using Next.js, React, HTML & CSS — from micro-interactions to full-scale UI systems. ✨ What’s included: • Interactive team avatars with hover states • Animated navigation with smooth transitions • High-converting CTA components • Explore overlays & visual storytelling UI • Full-service website & dashboard capabilities I don’t just build websites — I craft interactive user experiences that increase engagement and retention. Follow me on LinkedIn, Like 👍🏻, Comment 💬 & Repost ♻️. Need a Frontend Developer partner? 👉🏻 Link in the comments. #buildinpublic #css #web #saas #producthunt #html #reactjs #nextjs #webdev #frontend #coding #programming #websites #website #landingpage #landingpages #dashboard #dashboards #producthunt #ui #uicomponents #webcomponents #ux #indiehackers #animations #microinteractions #webdevelopment #frontend #frontenddevelopment

SoftGrowTech 🚀 New Project Alert: Myson Zone Premium Image Slider 🎨 I’ve just built a Premium Image Slider using HTML, CSS, and JavaScript, and I’m excited to share it! 💻 Project Highlights: ✨ Smooth sliding animations with a modern UI 🎯 Interactive navigation buttons (Next & Previous) 🔘 Clickable indicator dots for easy slide control ⏱ Auto-slide functionality with pause-on-hover feature 🖼 Beautiful image transitions with captions 📱 Responsive and clean design 💡 This project helped me sharpen my skills in: JavaScript DOM manipulation Event handling & timers (setInterval) Creating interactive UI components Improving user experience with animations 🎯 The goal was to build a reusable, professional image slider that can be integrated into websites like portfolios, business pages, or e-commerce platforms. I’m continuously pushing myself to create more real-world, interactive web components as I grow in my frontend development journey 🚀 💬 I’d love your feedback and suggestions! #WebDevelopment #JavaScript #HTML #CSS #FrontendDeveloper #UIUX #CodingProjects #WebDesign #DeveloperJourney

 My Development Evolution: From Basics to Building They say the best way to learn is to build, and looking back at my first HTML file compared to my current projects, I can see why. The Foundation 🏗️ I started with the essentials: HTML5, CSS3, and the logic of how the web breathes. The Level-Up ⚡ Modern Styling: Moving from vanilla CSS to the speed and efficiency of Tailwind. Interactivity: Using JavaScript to create real-world functionality. Design-First Thinking: Shifting focus toward UI/UX, spacing, and accessibility. Current Projects 💻 I’m currently applying these skills to a Premium Beauty Product site, focusing on high-end animations and seamless user experiences. I'm also diving into the logic behind industrial/construction-themed dashboards. The road from a basic webpage to a full-featured application is long, but I’m enjoying every bit of the process! #WebDesign #Javascript #React #Frontend #CodingLife #UI #UXDesign #CareerGrowth

Is CSS finally losing its grip on layout? Cheng Lou created Pretext, and it’s one of those projects that makes you rethink how we build for the web. Essentially, it’s a lightweight TypeScript library that handles multiline text measurement and layout completely outside the DOM. It manages text wrapping, line breaks, and sizing across different fonts and languages—without relying on CSS layout engines at all. Why is this a big deal? Speed: It’s potentially up to 500x faster than CSS layout. Precision: Total cross-browser accuracy (no more "it looks different in Safari" headaches). Environment Agnostic: Since it doesn't need the DOM, you can use it in environments where CSS doesn't even exist. The immediate thought? Someone needs to adapt this for responsive game UX. In games, where performance is everything and UI often needs to be rendered in a canvas or WebGL context, standard CSS is often too heavy or too limited. Pretext could be the bridge to high-performance, perfectly typeset game interfaces. Is TypeScript going to replace CSS for layout entirely? Probably not for your average landing page. But for high-performance apps and complex UI, the "Layout in JS" movement is getting very hard to ignore. Check it out: https://lnkd.in/geDRxHVn What do you think? Is moving layout logic into TypeScript a step forward, or are we over-complicating the web? #WebDevelopment #TypeScript #GameDev #SoftwareEngineering #CSS #TechTrends

🚀 New Project Alert: Drag & Drop Web Interface I recently built a Drag and Drop feature using HTML, CSS, and JavaScript, focusing on creating a smooth and interactive user experience. 🔧 Tech Stack: • HTML – Structured the elements • CSS – Styled the interface for a clean and responsive design • JavaScript – Implemented drag-and-drop functionality for dynamic interaction ✨ Key Features: • Intuitive drag-and-drop interaction • Real-time visual feedback while dragging items • Lightweight and responsive design • Clean and maintainable code structure This project helped me strengthen my understanding of DOM manipulation, event handling, and interactive UI development in JavaScript. Always excited to keep learning and building more interactive web experiences! 🚀 here checkout my GitHub repo: 🔗 https://lnkd.in/gCz98WpX 👏 Day7 of #100DaysOfCode #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #LearningByDoing #CodingProjects