🚀 Exploring Interactive Web Design with CSS & JavaScript Recently, I built a small project that combines CSS radial gradients with JavaScript event handling to create a dynamic overlay effect. ✨ The idea: A looping background video sets the stage. An overlay uses a radial gradient variable (--x, --y) that updates in real time with mouse movement. The gradient highlights text (DEPOT) by following the cursor, blending creativity with code. 🔧 Tech stack highlights: CSS Variables for flexible gradient control JavaScript (mousemove event) to update gradient coordinates SCSS nesting for clean, structured styling Demo Link 🔗: https://lnkd.in/girjx8xx Github Repo 📂: This project reminded me how powerful small touches of interactivity can be in web design — turning a static page into something immersive. 💡 I’d love to hear how others are using gradients, overlays, or creative CSS variables in their projects. #WebDevelopment #CSS #JavaScript #Frontend #CreativeCoding #sheriyansCodingSchool

🚀 **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

🚀 Built a Responsive Image Carousel using HTML, CSS & JavaScript! Excited to share my latest mini project — a Watch Image Carousel UI ⌚✨ 🔹 Key Features: Smooth image switching functionality Clickable thumbnails for quick preview Clean and responsive design Navigation arrows for better user experience 🔹 Tech Stack: HTML5 CSS3 (Flexbox for layout) JavaScript (DOM manipulation & event handling) 💡 This project helped me strengthen my understanding of: DOM selection & event listeners Dynamic image rendering UI/UX design basics 📌 Small projects like these are stepping stones toward building larger, real-world applications. Would love your feedback and suggestions! 🙌 #WebDevelopment #JavaScript #FrontendDeveloper #HTML #CSS #CodingJourney #Projects #Learning #UIUX

Built a YouTube UI Clone using HTML & CSS! Excited to share my latest mini project where I recreated a YouTube-style interface from scratch What I practiced: • Layout design using Flexbox & Grid • Hover effects for interactive UI • Proper spacing using padding & margins • Responsive structure (clean alignment & sections) Tech Stack: HTML | CSS This project helped me understand how real-world UIs are structured and how small details like hover effects and spacing can make a big difference in user experience. Next step: Adding JavaScript to make it dynamic! I’m currently practicing daily and sharing my progress. Feedback and suggestions are always welcome #HTML #CSS #WebDevelopment #Frontend #100DaysOfCode #LearningJourney #UIClone

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

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

🎓 Parallax Website Demo | HTML & CSS 🔗 Live Demo: [https://lnkd.in/gMhV4JCu) As part of my learning journey in frontend development, I created a Parallax Scrolling Website using HTML and CSS. This project helped me explore how visual effects can enhance user experience and make web pages more engaging. The parallax effect is implemented using CSS, where background images remain fixed while the content scrolls, creating a sense of depth and smooth interaction. 💡 What I practiced through this project: • Applying parallax scrolling using CSS properties • Structuring web pages with multiple sections • Designing with light and dark themes for better contrast • Positioning and styling overlay text • Improving responsiveness for different screen sizes 🛠️ Technologies Used: HTML5 | CSS3 This project was a great opportunity to strengthen my understanding of layout design and modern UI techniques. I look forward to building more such projects as I continue learning. I would appreciate any feedback or suggestions! #WebDevelopment #FrontendLearning #HTML #CSS #StudentDeveloper #UIUX

🎯 Interactive Grading System — HTML, CSS & JavaScript Built a simple grading system that takes marks as input and instantly shows the grade with real-time feedback. A great practice project for strengthening JavaScript logic, DOM manipulation, and clean responsive UI. A simple concept turned into a great exercise for strengthening my core frontend fundamentals and creating interactive web experiences. #FrontendDevelopment #HTML #CSS #JavaScript #PortfolioProject #UIUX #LearningByBuilding

🚀 #day46 of #100DaysCodingChallenge Create an interactive website using HTML, CSS, and JavaScript where users can: • Enter a number to dynamically change an image using an API. • Type text to see real-time style changes (color, background, font style). • Enter a number in another input box to dynamically increase the font size of text. • Use buttons and dropdowns for better user interaction The website should demonstrate DOM manipulation, event handling, and dynamic UI updates. 🔹 Features API-based image change Real-time text styling Dynamic font size control Font style selection (dropdown) Button-based interactions Clean and responsive UI Instant user feedback 🔗Github Link :https://lnkd.in/dzcuQ6yM Big thanks to my mentors 🙏 Ritendra Gour Sir and Avinash Gour Sir from Code Of School for their guidance and support. #WebDesign #UIDesign #FrontendDeveloper #HTML #CSS #JavaScript #WebDeveloper #UIInspiration #LuxuryDesign #LandingPageDesign #CodingLife #DeveloperIndia #FrontendProject #WebDevelopment #DesignInspiration #PortfolioProject #TechCreative #UIUXDesign #PerfumeBrand #LuxuryUI

🚀#Day_Progress_Update_Frontend_Journey Today’s learning was all about making the UI more interactive and dynamic using HTML, CSS, and JavaScript. 🎯 I built a small project where bubbles appear on the screen exactly at the position where the user clicks. 🫧✨ 🔍 What I worked on: • Capturing user click events using JavaScript • Getting exact mouse coordinates (X & Y position) • Dynamically creating elements using DOM manipulation • Styling bubbles with CSS (shape, color, animation) • Positioning elements precisely on the screen 💡 What I learned: This project helped me understand how real-time user interaction works in web applications. I also got more comfortable with event handling and how JavaScript connects with HTML & CSS to create engaging UI effects. ⚡ It may look like a small feature, but it’s a big step toward building interactive web apps and improving my frontend skills. Consistency is key — learning something new every day! 💻🔥 #WebDevelopment #JavaScript #Frontend #CodingJourney #LearningInPublic #100DaysOfCode