From Syntax to Seamless UI. ☁️💻 I’ve just wrapped up this Weather Web App, built from the ground up using HTML5, CSS3, and Vanilla JavaScript. While the functionality is key, I wanted to push the boundaries of how a utility app feels. Moving away from standard templates, I engineered this "Premium Dark" interface to give it a cinematic, high-end dashboard vibe. Technical Highlights: Interactive Data Rendering: Leveraging Vanilla JavaScript to bridge the gap between complex weather data and a fluid, user-friendly interface. Custom CSS Architecture: Achieving that deep charcoal aesthetic with high-contrast cyan accents. Responsive Engineering: Ensuring the "Command Center" look remains pixel-perfect across all screen sizes. It’s one thing to design a mockup, but bringing it to life through clean, efficient code is where the real magic happens. 🌙 How do you like this "Command Center" aesthetic for a weather tool? Would love to hear your feedback! 🚀 #WebDevelopment #FrontendDeveloper #JavaScript #CodingLife #HTMLCSS #Programming #PortfolioUpdate #KarachiDevs

Built a Dynamic Weather App using HTML, CSS & JavaScript : Excited to share my latest project where I built a Weather Updates Web App that provides real-time weather information with a clean and interactive UI. Key Features: 🌍Search weather by city name 🌡️ Displays temperature (in °C), humidity, and wind speed 🌤️ Dynamic Day/Night detection using API (sunrise & sunset) 🌞🌙 Automatically changes icon (sun/moon) based on time 🎨 Background theme changes for night mode ⚡ Data fetched using OpenWeatherMap API 💡 Clean UI with proper alignment and responsive layout Tech Stack: * HTML * CSS (Flexbox for layout & styling) * JavaScript (DOM manipulation + API integration) This project helped me strengthen my understanding of Working with 1. APIs 2. Asynchronous JavaScript (async/await) 3. Dynamic UI updates 4. Real-world problem solving Still improving it by adding more features like weather-based animations and better UI enhancements! Would love to hear your feedback and suggestions 😊 #JavaScript #WebDevelopment #Frontend #API #Projects #Learning #UIUX #WeatherApp

Just built a Multi Step Donation Form using HTML, CSS, and JavaScript. This project helped me focus on user experience and smooth interaction between steps. Here’s what I implemented: • Step based form navigation (Next and Back functionality) • Smooth sliding transition between form sections • Dynamic progress bar that updates on each step • Live step counter (1/3 → 2/3 → 3/3) • Custom styled radio buttons with active state switching • Click based selection for donation amounts • Clean and structured UI layout The goal was simple: make the form easy to use and visually clear for users. It was a good hands on practice to improve both UI design and JavaScript logic together. Open to feedback and suggestions. #WebDevelopment #FrontendDevelopment #JavaScript #HTML #CSS #UIUX #WebDesign #LearningByDoing #CodingJourney #DeveloperLife

🚀 **BMI Checker – Health Calculator (Frontend Project)** I recently built a **BMI Checker**, a simple and user-friendly web application designed to calculate Body Mass Index and provide health insights. 💡 **Project Overview** This is a frontend-based application that allows users to input their height and weight to instantly calculate their BMI and understand their health category. The focus was on clean UI, usability, and responsive design. ✨ **Key Features** • Instant BMI calculation • Displays health categories (Underweight, Normal, Overweight, Obese) • Clean and intuitive user interface • Fully responsive design (Mobile, Tablet, Desktop) • Input validation for better user experience 🛠 **Tech Stack** HTML5 | CSS3 | JavaScript | Bootstrap / Tailwind CSS | Git | GitHub 🌐 **Live Demo** https://lnkd.in/ecckVEbn 💻 **GitHub Repository** https://lnkd.in/exhkMe-J 📌 This project helped me improve my JavaScript logic, DOM manipulation, and responsive design skills. --- #WebDevelopment #FrontendDevelopment #JavaScript #HTML #CSS #ResponsiveDesign #StudentProject #Portfolio

Project: Weather UI Dashboard I recently built a simple, clean, and responsive Weather UI Dashboard developed using HTML, CSS, and JavaScript. This project was a great hands on experience that strengthened my understanding of working with real time data and crafting engaging user interfaces Key Features: Provides real time weather updates based on the user’s entered city One of the most exciting features I implemented is a dynamic background system, where the UI adapts based on the weather conditions of the selected location creating a more immersive and context aware experience. Alongside this, I focused on maintaining a minimal and clean UI design, enhanced with Glassmorphism effects and custom fonts to give it a modern and polished look. What I Learned: Gained a deeper understanding of how the fetch() API works to retrieve data from external sources. Explored handling of raw response data (ReadableStream) and why it cannot be accessed directly. Learned to transform raw data into usable format using .json(), making it easy to work with API responses. Enhanced my frontend design skills by implementing Glassmorphism effects in CSS, giving the UI a modern and elegant look. Experimented with custom fonts and styling techniques to improve visual appeal and user engagement. I strengthened my understanding of error handling using try-catch, ensuring the application behaves gracefully under unexpected scenarios. Overall, this project not only enhanced my frontend development skills but also gave me practical exposure to working with APIs, handling asynchronous data, and designing intuitive user interfaces. Acknowledgment: A heartfelt thanks to Sheryians Coding School for providing such high-quality learning resources and guidance throughout my ongoing MERN journey. The concepts and support truly make a difference! This project may be simple, but it represents a solid step forward in building practical, real-world applications and improving my frontend development skills. Harsh Vandana Sharma Sarthak Sharma #FrontendDevelopment #JavaScript #WebDevelopment #APIIntegration #CSS #HTML #UIUX #Glassmorphism #LearningByDoing #Projects #CodingJourney

🌐 Introducing Book Library – A Smart and Interactive Online Book Discovery Platform! 📚🚀 Book Library is a fully responsive web application designed to help users discover, explore, and manage books seamlessly. Built using modern frontend technologies, this project integrates with the Open Library API to fetch real-time book data and provides a smooth and interactive reading experience for users. The platform allows users to search books, filter by categories, view detailed descriptions, and maintain a personal reading list — all within a clean and user-friendly interface. 🔥 Key Features: ✅ Dynamic Book Search System – Users can search for books in real-time using the Open Library API. ✅ Category-Based Filtering – Explore books by genres like fiction, horror, thriller, kids, and more. ✅ Detailed Book View Page – Displays complete book information including title, author, description, and cover image. ✅ Reading List Feature – Users can add and remove books from a persistent reading list stored in localStorage. ✅ Interactive UI Design – Clean card-based layout with responsive Bootstrap design for all devices. ✅ API Integration – Fetches live data from Open Library API for updated book information. ✅ Fully Responsive Design – Optimized for mobile, tablet, and desktop screens. 🛠️ Tech Stack: 🚀 Frontend: 🔹 HTML5 – Structured and semantic layout 🔹 CSS3 – Custom styling and UI enhancements 🔹 Bootstrap 5 – Responsive grid system and components 🔹 JavaScript (ES6+) – DOM manipulation, API handling, and application logic 🌐 API Used: 🔹 Open Library API – For fetching book data and metadata 🌐 Live Website: https://lnkd.in/gHPYMp7e 💻 GitHub Repository: https://lnkd.in/gXNcYhwG 💡 Building this project helped me strengthen my skills in JavaScript DOM manipulation, API integration, localStorage handling, and responsive UI design. I focused on creating a real-world experience similar to modern digital library platforms. I’m continuously improving my frontend development skills by building practical, real-world projects and exploring new technologies. 🚀 #WebDevelopment #FrontendDeveloper #JavaScript #Bootstrap #HTML #CSS #API #OpenLibrary #ResponsiveDesign #PortfolioProject #BuildInPublic 📚 Special thanks to Athulya Aji and Lakshmi Priya K M for their support in this project.

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

#Task 33 – Modal Login App Today, I built a Modal Login Web App using HTML, CSS, and JavaScript. In this project, I focused on creating an interactive popup modal with login functionality, including smooth animations and form validation. Key Features of the Project • Animated modal popup (open/close) • Overlay background effect • Click outside to close modal • Dynamic Continue → Login form transition • Email & password validation system • Error & success messages display • Smooth scaling and fade animations What I Learned (Main Focus) This project helped me improve my understanding of: • DOM manipulation using JavaScript • Event handling (onclick, form submit) • Class toggling (classList.add/remove) • Form validation logic • UI state changes dynamically Challenge I faced While building this project, I faced challenges in managing modal state, handling multiple button events, and validating user input properly. How I solved it I solved these issues by using event listeners, conditional validation logic, and class-based UI control for smooth interaction. This project strengthened my skills in JavaScript interactivity, UI/UX behavior, and real-world form handling. Code Of School – Ritendra Gour || Avinash Gour #WebDevelopment #WebDeveloper #FrontendDeveloper #DeveloperIndia #CodingLife #HTML #CSS #JavaScript #DOM #WebDesign #UIDesign #UIUXDesign #FrontendProject #PortfolioProject #TechCreative #FrontendDevelopment #WebDevLife

🚀 **Mini Web Project: Interactive Pet Selector** I recently built a simple yet interactive web application that allows users to select a pet from a dropdown menu and dynamically updates the displayed image based on the selection. 🔹 **Key Features:** * Dynamic image rendering using JavaScript * Event handling with `change` event listener * Clean and responsive UI using Bootstrap * Efficient mapping of data using JavaScript objects 🔹 **Tech Stack:** HTML | CSS | JavaScript | Bootstrap 🔹 **What I Learned:** * Handling DOM manipulation effectively * Working with event-driven programming * Structuring clean and maintainable front-end code * Improving user experience with real-time updates This project helped me strengthen my fundamentals in front-end development and understand how small interactive features can enhance user engagement. Looking forward to building more dynamic and user-friendly applications! 💻✨ #WebDevelopment #JavaScript #Frontend #LearningByDoing #Projects

🚀 Day 28/100 – #100DaysOfCode Core Web Concepts: Rendering & Architecture 🔹 Single Page Application (SPA) vs Multiple Page Application (MPA) SPA: Loads a single HTML page and dynamically updates content without reloading. MPA: Loads a new page from the server on every request. -Use SPA for fast, interactive apps (dashboards, SaaS). -Use MPA for SEO-heavy or content-driven sites (blogs, news). 🔹 What is Rendering? Rendering is the process of converting code (HTML, CSS, JS) into a visible UI in the browser. -It happens when the browser builds the DOM and paints it on the screen. 🔹 Rendering vs Re-rendering Rendering: Initial display of UI Re-rendering: Updating the UI when state or data changes -Efficient re-rendering is key for performance in frameworks like React.| 🔹 What is Reactivity? Reactivity means the UI automatically updates when data changes. -You change the state → UI updates automatically (no manual DOM manipulation). 🔹 Server-Side Rendering (SSR) vs Client-Side Rendering (CSR) SSR: HTML is generated on the server and sent to the browser CSR: Browser builds the UI using JavaScript Use SSR for: -Better SEO -Faster initial load Use CSR for: -Highly interactive apps -Faster navigation after load 28 days down, 72 more to go. #Day28 #100DaysOfCode #WebDevelopment #ReactJS #JavaScript #FrontendDevelopment #MERN