🚀 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

💡 Interactive Light Bulb with Click Sound using HTML, CSS & JavaScript 🔊 Ever wanted to bring a simple UI idea to life with a touch of realism? I recently built a fun mini-project where a light bulb turns ON and OFF with a click — complete with a satisfying switch sound! ⚡ Here’s what this project covers: 🔹 HTML – Structure for the bulb and switch 🔹 CSS – Styling the bulb glow effect and smooth transitions 🔹 JavaScript – Handling click events and toggling states 🔹 Sound Integration – Adding a realistic click sound for better user experience ✨ Key Features: Toggle light ON/OFF with a single click Visual glow effect when the bulb is ON Realistic click sound for interaction feedback Beginner-friendly and great for practicing DOM manipulation 🚀 This is a great project if you're starting with JavaScript and want to understand how interactivity works in real-world UI elements. 💻 Concept: Use an image or div for the bulb Toggle a CSS class on click Play audio using JavaScript when switching states Small projects like these make learning fun and practical! If you'd like, I can share the full code snippet as well. Let me know in the comments! 👇 🚀 Here Check my GitHub repo: 🔗 https://lnkd.in/g6MgHkh2 🚀 Day 19 of #100DaysOfcode #WebDevelopment #JavaScript #HTML #CSS #Frontend #CodingProjects #LearningByDoing

🚀 Week 5 Complete — From Basic HTML to Real UI Thinking Most people learn coding like this: 👉 Watch tutorials 👉 Copy code 👉 Forget everything I decided to do it differently. This week, I didn’t just “learn CSS”… I learned how real interfaces are built. 💡 Here’s what I mastered: 🔹 Semantic HTML → Writing clean, SEO-friendly structure 🔹 Forms & Inputs → Building real login/signup systems 🔹 CSS Box Model → Finally understanding why layouts break 🔹 Flexbox → Align anything like a pro 🔹 Positioning → Absolute, relative, sticky (no more confusion) 🔹 Responsive Design → Mobile-first mindset 📱 🔹 Typography → Making UI look premium 🔹 Clean CSS → Reusable, scalable structure 🔹 Animations → Bringing UI to life ✨ ⚡ Biggest Realization: Frontend is NOT about making things look good… It’s about making things usable, scalable, and structured 📈 From now on, I’m not just building pages — I’m building systems 🎯 Next Step: JavaScript + DOM → Making everything interactive If you’re learning dev, remember: Consistency beats motivation. 📂 Check out my work here: https://lnkd.in/gFyM9ntj Feedback is welcome 🙌 #webdevelopment #frontend #css #html #javascript #buildinpublic

Learning and practicing advanced, modern CSS while upgrading my styling skills 🎯 Built a hover effect using pure HTML & CSS—focusing on writing cleaner, more dynamic styles without JavaScript. As part of this practice, I explored: • Custom CSS properties (variables) – to make styles reusable, scalable, and easier to maintain • @property – to define and control how custom properties behave, enabling smoother and more predictable animations • CSS animations & keyframes – to create structured, step-by-step motion effects • Transition effects – for smooth and responsive hover interactions • Linear + conic gradients – combined creatively to achieve more modern and visually rich UI effects This project helped me better understand how powerful CSS alone can be for building interactive experiences, while also strengthening my fundamentals. Consistent practice and revisiting core concepts really make a difference. 🚀 #CSS #FrontendDevelopment #WebDevelopment #UI #LearningInPublic #CodeNewbie

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

🚨 𝐂𝐒𝐒 𝐢𝐬 𝐧𝐨 𝐥𝐨𝐧𝐠𝐞𝐫 𝐣𝐮𝐬𝐭 𝐬𝐭𝐲𝐥𝐢𝐧𝐠. With CSS Wrapped 2025, we're seeing CSS evolve into something much closer to a UI programming language. Things that once required JavaScript can now be done natively with CSS and HTML: • 𝑩𝒖𝒊𝒍𝒅 𝒊𝒏𝒕𝒆𝒓𝒂𝒄𝒕𝒊𝒗𝒆 𝒄𝒂𝒓𝒐𝒖𝒔𝒆𝒍𝒔 𝒘𝒊𝒕𝒉 ::𝒔𝒄𝒓𝒐𝒍𝒍-𝒃𝒖𝒕𝒕𝒐𝒏 𝒂𝒏𝒅 ::𝒔𝒄𝒓𝒐𝒍𝒍-𝒎𝒂𝒓𝒌𝒆𝒓 • 𝑺𝒕𝒚𝒍𝒆 𝒏𝒂𝒕𝒊𝒗𝒆 <𝒔𝒆𝒍𝒆𝒄𝒕> 𝒆𝒍𝒆𝒎𝒆𝒏𝒕𝒔 (𝒇𝒊𝒏𝒂𝒍𝒍𝒚!) • 𝑪𝒓𝒆𝒂𝒕𝒆 𝒉𝒐𝒗𝒆𝒓 𝒑𝒓𝒆𝒗𝒊𝒆𝒘𝒔 𝒂𝒏𝒅 𝒕𝒐𝒐𝒍𝒕𝒊𝒑𝒔 𝒘𝒊𝒕𝒉 𝒊𝒏𝒕𝒆𝒓𝒆𝒔𝒕-𝒇𝒐𝒓 • 𝑾𝒓𝒊𝒕𝒆 𝒄𝒐𝒏𝒅𝒊𝒕𝒊𝒐𝒏𝒂𝒍 𝒍𝒐𝒈𝒊𝒄 𝒖𝒔𝒊𝒏𝒈 𝒊𝒇() 𝒊𝒏 𝑪𝑺𝑺 • 𝑼𝒔𝒆 𝒄𝒐𝒏𝒕𝒂𝒊𝒏𝒆𝒓 & 𝒔𝒄𝒓𝒐𝒍𝒍 𝒔𝒕𝒂𝒕𝒆 𝒒𝒖𝒆𝒓𝒊𝒆𝒔 𝒇𝒐𝒓 𝒔𝒎𝒂𝒓𝒕𝒆𝒓 𝒍𝒂𝒚𝒐𝒖𝒕𝒔 • 𝑪𝒓𝒆𝒂𝒕𝒆 𝒔𝒕𝒂𝒈𝒈𝒆𝒓𝒆𝒅 𝒂𝒏𝒊𝒎𝒂𝒕𝒊𝒐𝒏𝒔 𝒘𝒊𝒕𝒉 𝒔𝒊𝒃𝒍𝒊𝒏𝒈-𝒊𝒏𝒅𝒆𝒙 • 𝑹𝒆𝒐𝒓𝒅𝒆𝒓 𝑫𝑶𝑴 𝒆𝒍𝒆𝒎𝒆𝒏𝒕𝒔 𝒘𝒊𝒕𝒉𝒐𝒖𝒕 𝒍𝒐𝒔𝒊𝒏𝒈 𝒔𝒕𝒂𝒕𝒆 𝒖𝒔𝒊𝒏𝒈 𝒎𝒐𝒗𝒆𝑩𝒆𝒇𝒐𝒓𝒆 • 𝑩𝒖𝒊𝒍𝒅 𝒑𝒐𝒑𝒐𝒗𝒆𝒓𝒔, 𝒅𝒊𝒂𝒍𝒐𝒈𝒔, 𝒂𝒏𝒅 𝒊𝒏𝒕𝒆𝒓𝒂𝒄𝒕𝒊𝒗𝒆 𝑼𝑰 𝒘𝒊𝒕𝒉𝒐𝒖𝒕 𝑱𝑺 𝗜𝗻 𝘀𝗵𝗼𝗿𝘁: CSS is becoming stateful, logical, and interaction-driven. The web platform is shifting toward native UI capabilities, reducing the need for heavy JavaScript for common patterns. If you're a frontend developer, this is a moment worth paying attention to. The platform is getting seriously powerful. Explore all the features visually from official docs: https://lnkd.in/dnXM6tcR #CSS #Frontend #WebDevelopment #WebPlatform #ChromeDev #FrontendEngineering

🎨 Turning simple images into interactive stories with CSS! Today I explored image styling, effects, and hover overlays using W3Schools—and honestly, it felt like giving life to static visuals. Before this, an image was just… an image. Now? It responds, it reacts, it engages. ✨ 💡 Here’s what I learned: • How to style images for a clean, modern look • Adding smooth hover effects that grab attention • Creating overlay layers to display text & actions • Making UI feel more interactive without JavaScript It’s amazing how a few lines of CSS can transform the entire user experience. Small details, big impact. 🚀 Every day I’m getting one step closer to becoming a better front-end developer—learning, building, and improving. If you're also learning web development, what did you build today? Let’s grow together! 👩💻🌱 #WebDevelopment #CSS #FrontendDevelopment #CodingJourney #UIUX

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

🚀 Project Showcase: Responsive Website Development I followed a tutorial from @Sheriyans Coding School and transformed a design into a fully functional, responsive website 💻 ✨ Tech Stack: HTML + Tailwind CSS + JavaScript + SVG Filters 💡 What I Learned: • Real-world project structuring • Responsive design across devices • Writing clean and maintainable code • Creating gooey (liquid merge) effects using blur & contrast ✨ It was amazing to see how simple concepts can create smooth and interactive UI experiences! From static design ➡️ fully responsive website 📱💻 This is just the beginning… more projects coming soon 🚀 #codingjourney #webdev #frontend #tailwindcss #javascript #learningbydoing

𝐏𝐫𝐨𝐣𝐞𝐜𝐭 𝐔𝐩𝐝𝐚𝐭𝐞: 𝐇𝐓𝐌𝐋, 𝐂𝐒𝐒 & 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐈𝐧𝐭𝐞𝐫𝐚𝐜𝐭𝐢𝐯𝐞 𝐁𝐮𝐭𝐭𝐨𝐧 After working on my JavaScript skills, I built a simple yet engaging project -an animated download button using HTML, CSS, and JavaScript. This project focuses on creating a smooth user experience. When the button is clicked, it triggers an animation that visually represents a download process. The button expands, a progress-like effect runs using CSS animations, and after a few seconds, it changes into a “Completed” state with an updated icon. Through this project, I practiced: • DOM manipulation in JavaScript • Event handling • Using setTimeout for timed actions • CSS animations and transitions • Creating interactive UI elements It’s a small project, but it helped me understand how frontend technologies work together to create dynamic and user-friendly interfaces. Below is the link of the project: https://lnkd.in/dGkNSnqW #WebDevelopment #JavaScript #CSS #HTML #CodingJourney #LearnToCode #Programming #DeveloperLife