Here’s a fun project I built during my early development journey 🚀 🌙 Dark Mode Toggler – Chrome Extension Built using HTML, CSS, JavaScript, and JSON (Manifest v3). I created this extension purely for fun — at that time I had a craze for using my own tools and experimenting with ideas. The result was a simple toggle that switches any webpage between light and dark mode instantly. Building this helped me understand: ✔ How Chrome extensions work ✔ Using manifest files ✔ Injecting scripts into webpages ✔ Improving UI/UX even in small tools It’s a fun, beginner-friendly project, but it taught me a lot about browser APIs and custom functionality. 🔗 Try it here: https://lnkd.in/g9GiEu8c #ChromeExtension #WebDevelopment #JavaScript #FrontendDeveloper #CodingJourney #DarkMode #DeveloperGrowth #Projects

Stop over-engineering your Modals! 🛑 Did you know HTML has a native way to build them? For years, creating a modal/popup meant: 1️⃣Importing a 50kb+ JavaScript library. 2️⃣Managing complex z-index issues. 3️⃣Fighting with "focus trapping" for accessibility. In 2025, you don't need any of that. The HTML <dialog> element handles it all natively with better performance and built-in accessibility. Why the <dialog> tag is a game-changer: ✅ Built-in Backdrop: Use the ::backdrop pseudo-element to style the background without extra divs. ✅ Auto-Focus: The browser automatically handles focus when the modal opens and closes. ✅ Escape Key Support: It closes automatically when the user hits 'Esc'—no custom JS listeners needed. ✅ Top Layer: It automatically sits above all other elements, ending the "z-index wars." How to use it: <dialog id="myModal"> <h2>Native is Better! 🚀</h2> <p>This modal is light, fast, and accessible.</p> <button onclick="myModal.close()">Close</button> </dialog> <button onclick="myModal.showModal()">Open Modal</button> Styling the Backdrop: dialog::backdrop { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); } Pro-Tip: Use .showModal() instead of just .show(). The "Modal" version locks the rest of the page and gives you that professional darkened backdrop effect. By choosing native elements over heavy libraries, you’re making the web faster and more accessible for everyone. Are you still using a library for your modals, or have you made the switch to <dialog>? Let’s talk clean code! 👇 #WebDev #HTML5 #FrontEnd #CodingLife #WebDesign #Performance #CleanCode

 Made a functional Weather App made using HTML, CSS, and JavaScript. It fetches real-time weather data using an API and displays temperature, wind speed, visibility, and weather icons in an organized UI. #WebDevelopment #JavaScript #FrontendDevelopment #Projects #LearningToCode #WeatherApp #HTMLCSS

Mastering Scroll Events (and Overcoming Resistance) ‎ ‎Day 10 of the JavaScript Challenge! 🚀 ‎ ‎Honestly, I almost didn't post today. I’m currently coding on an HP Stream with a cracked screen that is bleeding "ink" down the display. Between the hardware issues and the end-of-year fatigue, the temptation to quit was high. ‎ ‎But I remembered that code doesn't care if your screen is perfect; it only cares if your logic is sound. So, I pushed the editor to the bottom half of the screen and got to work. ‎ ‎Today, I built a ScrollSpy Landing Page. The goal was seamless navigation on both desktop and mobile. ‎ ‎✨ Key Features: ‎ ‎Sticky Navbar: Used window.pageYOffset to detect when the user scrolls past the header, triggering a CSS class to lock the navbar to the top. ‎ ‎Auto-Closing Mobile Menu: A common UX bug in mobile menus is that they stay open after you click a link. I fixed this by looping through all navigation links (querySelectorAll) and forcing the menu to close (classList.remove) whenever a link is clicked. ‎ ‎Back-to-Top Button: A dynamic button that only appears after the user has scrolled down 500px. ‎ ‎💻 Code Snippet: ‎ ‎JavaScript ‎ ‎// Auto-close menu on link click ‎scrollLinks.forEach((link) => { ‎ link.addEventListener("click", () => { ‎ linksContainer.classList.remove("show-links"); ‎ }); ‎}); ‎These small UX details make a huge difference in how a site feels. It wasn't easy to focus today, but showing up when it's hard is part of the job. ‎ ‎On to Day 11! 💪 ‎ ‎#JavaScript #100DaysOfCode #WebDesign #Frontend #Resilience #BuildingInPublic ‎

Built using HTML, CSS, and JavaScript, this Weather App fetches real-time weather details using the OpenWeather API. It displays key information such as temperature, weather type, humidity, wind speed, and city details, all within a clean and responsive UI. This project helped me enhance my skills in API integration, asynchronous JavaScript, DOM manipulation, and UI design. A heartfelt thanks to Suraj Pawar Sir for his consistent guidance and mentorship throughout my learning journey. 🔗 Live Demo (Vercel): https://lnkd.in/gc6ap33E #FrontendDevelopment #JavaScript #APIIntegration #OpenWeatherAPI #WebProjects #HTML #CSS #UIUX #LearningByBuilding #LeadSoftPlacementAcademy #FullStackWebMastery

#SheriyansCodingSchool Spent the entire day building with Tailwind CSS in React. Not gonna lie, it felt weird at first writing utility classes instead of custom CSS. Built a complete landing page today - navbar, hero section, cards, stats, and about section. What clicked for me: the speed. No jumping between files, no thinking of class names, no CSS specificity headaches. The struggle: Remembering all the class names. Visited the Tailwind docs like 50 times today. px-4 vs py-4, justify-center vs items-center... it's a lot. The win: Responsive design is incredibly simple. Just add md: or lg: prefixes. Hover effects? One class. In traditional CSS, this would be 10+ lines. My className strings are getting long (some divs have 10+ classes), but I'm seeing why developers love this approach. The consistency and speed are real. Tomorrow: refactoring and exploring animations. Day 71, let's go! 🚀 What's your take on Tailwind? Love it or hate it? Source : https://lnkd.in/gJmCd4ns #100DaysOfCode #React #TailwindCSS #WebDevelopment

🚀 Weekend Project: Merging API Logic with Creative 3D CS. ⚡ Revision Session: JavaScript APIs + Advanced CSS Styling This weekend, I decided to brush up on my API integration skills, but I didn't want to build just another standard weather app. I wanted to add some creativity and push my CSS skills further. 🎨💻 I built a Weather forecast page named it as CloudCrush a little funny name, So Dashboard that doesn't just show numbers—it reacts to them. What I built: 🔹 Dynamic Environments: If it's cold, the theme turns icy blue with falling snow. If it's hot, it shifts to a summer sunset gold. 🔹 3D Integration: Used Three.js to create a rotating wireframe globe and floating asteroids in the background. 🔹 Glassmorphism UI: Revised advanced CSS styling (backdrop-filters, gradients) to create a futuristic "heads-up display" look. 🔹 API Logic: Fetched real-time data using WeatherAPI and wrote logic to map weather conditions to visual themes. It was a great way to revise key JavaScript concepts while having fun with the frontend design! Check it out here 👇 🔗 Live Demo: [https://lnkd.in/g2GMUHsJ] #JavaScript #WebDevelopment #ThreeJS #CSS #WeekendProject #Coding #API #Frontend #LearningByDoing

If a web page still feels like a pile of static HTML, every interactive bug can look mysterious. The truth is your browser builds a live structure called the Document Object Model so the page can change the moment JavaScript talks to it. This is the layer that makes the web feel alive. No full reloads. Just real-time updates you can control. - Buttons change color on hover. - Pop-ups slide in. - Panels show or hide instantly. When you learn HTML, CSS, and JavaScript, mastering the DOM is the key to real web interaction. You see how a page is assembled, and you gain the skill to modify it with intent. If you use React or Vue, you do not touch the DOM directly as often. But understanding it pays off. You grasp what happens under the hood and you troubleshoot far faster when something goes off the rails. This is for new developers, career switchers, and framework users who want clarity, confidence, and control. Worried you do not have time to go deep on theory? Focus on DOM fundamentals and apply them in small, practical exercises. Think you only need framework magic? Again and again we see that a solid DOM mental model speeds up debugging and helps you ship smoother UI. At borntoDev, we connect fundamentals with modern frameworks so you understand the browser’s map of your page and how to bend it to your will. 12.12 borntoDev+ year-end deal: 3 days only from 12/11/2025 3:00 PM GMT+7 to 12/14/2025. Start here and level up your frontend skills. 🚀 https://lnkd.in/gBnjWUuF #borntoDev #WebDevelopment #JavaScript #Frontend #DOM #Upskill

Can I show you a small trick that has saved me from losing my sanity more times than I can count? Sometimes your UI looks wrong but you can’t tell why. The spacing feels off, something is shifting, a button refuses to sit where it should but nothing looks obviously broken. Here’s the hack: Turn on outlines for every element. Just add this temporarily to your global CSS: * { outline: 1px solid red; } (Don’t worry, you remove it once you’re done debugging.) The moment you do, your entire layout becomes visible like switching to x-ray mode. Every box, wrapper, div, and spacing becomes visible. Once you turn it on, you’ll instantly spot things like: - hidden padding pushing your layout - weird margins - wrappers you didn’t know existed - elements stretching too far - spacing that looked “small” but is actually huge Most “hard” UI problems become easy the moment you see the skeleton of your layout. This trick has saved me from so many confusing CSS battles. If you ever feel stuck, don’t fight the layout blindly. Make everything visible first. The problem will reveal itself. I’m Rapheal Daniel .A, a frontend developer. I build fast, responsive, and scalable websites for businesses and individuals. #LinkedIn #Google #Coding #SoftwareEngineering #Programming #HTML #JuniorDevelopers #Javascript #Python #BuildInPublic #100devs #100daysOfCode

I recently challenged myself to build a high-performance landing page for Online Sports Mart from scratch. My focus wasn't just on making it look good, but on writing clean, scalable, and responsive frontend code. 🔸 Technical Breakdown: >Layout Architecture: Leveraged CSS Grid for complex product galleries and Flexbox for the navigation system to ensure a seamless "mobile-first" experience. =>Modern UI Patterns: Implemented Glassmorphism effects using backdrop-filter and custom CSS variables for a consistent design system. ==>Navigation & Flow: Structured a multi-page architecture connecting the Hero section to dedicated Shop, Deals, and Contact pages. ===>Clean Code: Focused on semantic HTML5 to ensure accessibility (a11y) and SEO-friendly structure. This project was a great exercise in balancing visual hierarchy with technical performance. Check out the repository here: 🔗 https://lnkd.in/gd2AVCWY I'd love to hear your thoughts on the code structure! #FrontendDevelopment #Coding #WebDev #HTML #CSS3 #JavaScript #ResponsiveDesign #GitHub #PortfolioProject