🤞Calculator Web Application | HTML • CSS • JavaScript I’m excited to share a calculator web app that I designed and built using pure HTML, CSS, and Vanilla JavaScript. -> Structured the UI using semantic HTML -> Styled the calculator using CSS (flexbox-based layout, button sizing, hover & active states) -> Implemented a clean, terminal-style screen using monospace fonts -> Used event delegation for efficient button handling -> Added features like clear (C), backspace (←), and arithmetic operations (+, −, ×, ÷) -> Real-time display updates using DOM manipulation This project helped me understand how layout, styling, and logic come together to build an interactive web application from scratch. 🎥 Demo video attached below 👇 💻 GitHub Repo: https://lnkd.in/egBgbvWU Feedback and suggestions are always welcome! #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #LearningByDoing

🚀 Built a Feature-Rich To-Do Web Application using HTML, CSS & JavaScript This project helped me strengthen my understanding of frontend development, DOM manipulation, application state management, and real-time UI updates. 🔑 Key Features: - Add, edit, delete, and complete tasks - Automatic task status detection (Pending / Incomplete / Completed) based on real date & time - Live clock and date display - Real-time progress tracking with animated circular indicators - Persistent data storage using browser localStorage (tasks survive refresh & reload) - Responsive design for mobile, tablet, and desktop - Visual task highlighting based on status - Smart handling of deadlines (date-only, time-only, or full deadlines) 🛠️ Built entirely with Vanilla JavaScript (no frameworks) Focused on clean logic, performance, and user experience. 🔗 GitHub Repository: https://lnkd.in/d8kMqqxv 🔗 Live Demo: https://lnkd.in/drSrcbNK Feedback and suggestions are welcome! 🙌 #JavaScript #FrontendDevelopment #WebDevelopment #HTML #CSS #VanillaJS #LocalStorage #ResponsiveDesign #UIUX #PortfolioProject #LearningByBuilding #SoftwareEngineering #CodingJourney #StudentDeveloper #WebApps

💻 Budget App I developed a Budget Management Web Application using HTML, CSS, and Vanilla JavaScript to practice front-end fundamentals and real-world problem solving. This app allows users to: ✅ Set a total budget 🧾 Add expenses with a product title and cost 📊 Automatically calculate total expenses and remaining balance ✏️ Edit existing expenses 🗑️ Delete expenses dynamically 📋 View all expenses in an organized list 🔑 Key Highlights - Real-time calculations using JavaScript - DOM manipulation for dynamic UI updates - Input validation with user-friendly error messages - Clean, modern, and responsive UI design - Icons integrated using Font Awesome 🛠️ Technologies Used - HTML5 – Structure - CSS3 – Styling & responsiveness - JavaScript (ES6) – Logic, events, and DOM handling This project helped me strengthen my understanding of event handling, DOM manipulation, conditional logic, and UI state management while building a practical application. Check out the code on https://lnkd.in/gebvCj2Q and feel free to connect or share your thoughts! #WebDevelopment #JavaScript #HTML #CSS #Frontend #Projects #Learning #StudentDeveloper

🎠 Project Showcase #8 – Testimonial Slider (Flickity + JavaScript) Continuing my journey of sharing the projects I built while learning frontend development, I’m excited to share a responsive Testimonial Slider built using HTML, CSS, JavaScript, and Flickity. This project focuses on UI layout structuring, responsiveness, and integrating a JavaScript library with custom controls. Check the code- https://lnkd.in/g7XcP_Vx ✨ Key Features: 🔹 Responsive testimonial slider (desktop, tablet, mobile) 🔹 Built using HTML, CSS, and Flickity JS 🔹 Custom previous & next navigation buttons 🔹 Infinite loop slider (wrap-around functionality) 🔹 Touch & swipe support for mobile devices 🔹 Clean and minimal UI design 🔹 Equal-height testimonial cards for better visual balance 💡 What I learned while building this project: 🔹 Structuring scalable and semantic HTML 🔹 Designing responsive layouts using CSS and media queries 🔹 Understanding how JS-based sliders calculate widths and positions 🔹 Integrating and configuring a third-party library (Flickity) 🔹 Building custom slider controls instead of default ones 🔹 Debugging real-world UI issues related to layout and responsiveness Building this project helped me understand how CSS layout decisions directly impact JavaScript-based components and why clean structure is important for scalable UI. #FrontendDevelopment #WebDevelopment #JavaScript #CSS #HTML #Flickity #UIUX #LearningInPublic #ProjectShowcase #FrontendProjects

📘 𝙋𝙧𝙤𝙟𝙚𝙘𝙩 𝟯𝟴 - 𝙒𝙖𝙫𝙚 𝘽𝙡𝙤𝙜 𝘼𝙥𝙥 🌊 Built a clean and modern multi-page blog application using React Router that simulates a real-world blogging website with navigation, routes, and dynamic content rendering. This project focuses on routing, component composition, and UI consistency across pages. 💻 𝙏𝙚𝙘𝙝 𝙎𝙩𝙖𝙘𝙠 ⚛️ React JS 🧭 React Router DOM 🟨 JavaScript 🎨 CSS3 🌟 𝙆𝙚𝙮 𝙃𝙞𝙜𝙝𝙡𝙞𝙜𝙝𝙩𝙨 🧭 Multi-Page Navigation • Home (/) • About (/about) • Contact (/contact) • Not Found route for invalid URLs 🔗 SPA Routing • Implemented <Switch> and <Route> for client-side navigation • No page reloads while navigating 📄 Dynamic Blog Listing • Blog data rendered using reusable BlogItem and BlogList components • Clean UI separation between content and layout 👤 User Profile Section • Displays profile image, name, and designation 🚫 404 Not Found Page • Custom fallback route for invalid paths 📌 Reusable Header with Links • Built using <Link> from React Router • Maintains navigation across all pages 🧭 𝙇𝙚𝙖𝙧𝙣𝙞𝙣𝙜 𝙏𝙖𝙠𝙚𝙖𝙬𝙖𝙮 This project strengthened my understanding of: 🧠 Single Page Application (SPA) navigation 🧠 Routing with React Router 🧠 Creating reusable page layouts 🧠 Building 404 handling logic 🧠 Structuring large React apps cleanly It gave me real experience in how modern websites handle multiple pages without reloading. 🔗 𝙋𝙧𝙤𝙟𝙚𝙘𝙩 𝙇𝙞𝙣𝙠𝙨 🔗 GitHub: https://lnkd.in/gKRspr_r 🌐 Live Demo: https://lnkd.in/gmwRmhe9 #ReactJS #Frontend #JavaScript #ReactProjects #WebApps #CodingJourney #DeveloperLife #FrontendDevelopment #WebDevelopment #LearningByBuilding #UIUX #Nxtwave #JaganKonda

Getting Started with HTML Web Components I’ve been exploring HTML Web Components lately, and they’re actually a clean way to build reusable UI without relying on any framework. They let you create your own custom HTML tags like <product-card> or <user-profile> and reuse them anywhere in your app. What stood out to me: 1) Reusable and easy to maintain 2) Styles stay scoped via Shadow DOM 3) Supported by all modern browsers If you’re learning frontend or thinking about long-term UI architecture, Web Components are definitely worth checking out. #HTML #WebComponents #FrontendDevelopment #JavaScript #LearningFrontend

🚀 Just wrapped up another exciting project: a Temperature Converter web app built with HTML, CSS, and JavaScript! Task 3 is Successfully Completed! This tool allows users to seamlessly convert temperatures between Celsius, Fahrenheit, and Kelvin with an intuitive interface. Key features include: User-friendly input field for temperature values Dropdown menus to select conversion units Real-time conversion with precise calculations (rounded to 2 decimal places) Error handling for invalid inputs and same-unit selections Reset functionality to clear all fields Responsive design for mobile and desktop use Accessibility features like ARIA labels and live regions for screen readers Perfect for quick temperature conversions in daily life or educational purposes. Demonstrates skills in DOM manipulation, event handling, and conditional logic in vanilla JS. #WebDevelopment #JavaScript #HTML #CSS #TemperatureConverter #CodingProjects #OasisInfobyte

Day 8 of 8 Days Web Development Challenge 🚀 Today I worked on building a Star Rating UI component using pure HTML & CSS ⭐ No JavaScript — just clean structure, smart selectors, and visual logic. What I focused on today: Implementing a 5-star rating system using radio buttons + labels Handling hover vs selected states correctly Using CSS sibling selectors (~) effectively Fixing UI issues like pale colors by improving contrast and depth Creating a smooth emoji transition based on rating selection This exercise helped me understand how CSS logic and visual order matter just as much as design. Small selector changes can completely change user experience. #WebDevelopment #CSS #Frontend #30DaysChallenge #HTML

Task 4 : Built a Modern Dark-Themed To-Do App using HTML, CSS & JavaScript Excited to share my latest frontend project — Task Master, a sleek and responsive to-do application designed to improve focus and productivity. This project helped me strengthen my understanding of UI/UX design, state management, and DOM manipulation, while also paying attention to visual aesthetics and user experience. ✨ Key Features: Add, edit, delete, and complete tasks Task prioritization (High / Medium / Low) Date & time scheduling for tasks Filters for Active, Completed, and High Priority tasks Animated statistics for total, completed, and pending tasks LocalStorage integration to persist data Fully responsive dark UI with smooth animations 🛠 Tech Stack: HTML5 CSS3 (Glassmorphism, gradients, animations) Vanilla JavaScript (ES6, LocalStorage, DOM APIs) This project gave me hands-on experience in building clean interfaces and writing maintainable frontend logic — and I’m excited to keep improving it further 🚀 Feedback and suggestions are always welcome! 🔗 GitHub: https://lnkd.in/dbCXN_9B #WebDevelopment #Frontend #JavaScript #HTML #CSS #UIDesign #Projects #LearningByBuilding #TaskManagement #SkillCraftTechnology