Unified CSS Component Library: Responsive Navbar & Animations

Built a Dark/Light Theme Switcher using HTML, CSS, and Vanilla JavaScript. 🔹 Detects system theme preference using prefers-color-scheme 🔹 Automatically applies dark or light mode based on the user’s OS settings 🔹 Allows manual theme switching 🔹 Persists user preference using localStorage 🔹 Ensures the last selected theme remains active on page reload This project helped me understand DOM manipulation, CSS variables, system-level theme detection, and improving user experience through persistent UI state. GitHub: https://lnkd.in/gVVViejd Live: https://lnkd.in/gYZNawYS #WebDevelopment #JavaScript #FrontendDevelopment #CSS  

Revisited HTML & CSS fundamentals and built a YouTube homepage clone (for learning purposes) to strengthen my frontend basics. Focused on: • Semantic HTML structure • Flexbox & Grid layouts • Precise spacing and alignment • Clean UI replication This project helped me understand how structured layouts are built in real-world applications. 🔗 GitHub: [https://lnkd.in/giNYPaKt] 🎥 Tutorial: [https://lnkd.in/g5kYZ9mM] Open to feedback as I continue improving and moving toward JavaScript next. #HTML #CSS #FrontendDevelopment #WebDevelopment #LearningJourney

🚀 Popover with Anchor Position – Modern CSS Demo I’ve built a small demo on CodePen exploring CSS Popover API with anchor positioning. This implementation focuses on: • Using the native popover attribute • Anchor positioning for dynamic placement • Clean semantic HTML structure • Minimal JavaScript • Lightweight, performant UI behavior Anchor positioning opens up powerful possibilities for building tooltips, dropdowns, contextual menus, and floating UI elements without relying on heavy third-party libraries. This approach improves: ✔️ Maintainability ✔️ Performance ✔️ Accessibility (when structured properly) ✔️ Reduced JS dependency 🔗 Live demo: https://lnkd.in/dz4-S7wn I’m experimenting more with modern CSS features — feedback and discussions are welcome 👇 #FrontendDevelopment #CSS #html #WebStandards #JavaScript #CodePen

𝗘𝘅𝗰𝗶𝘁𝗶𝗻𝗴 𝗺𝗶𝗹𝗲𝘀𝘁𝗼𝗻𝗲 🚀  I just published my very first blog post: “𝗠𝗼𝗱𝗲𝗿𝗻 𝗖𝗦𝗦 𝗜𝘀 𝗥𝗲𝗽𝗹𝗮𝗰𝗶𝗻𝗴 𝗬𝗼𝘂𝗿 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 (𝗔𝗻𝗱 𝗬𝗼𝘂 𝗗𝗶𝗱𝗻’𝘁 𝗡𝗼𝘁𝗶𝗰𝗲)” 🎉 For years, we relied on JavaScript for UI logic like toggling states, handling 𝗱𝗿𝗼𝗽𝗱𝗼𝘄𝗻𝘀, or responsive layouts. But modern CSS has evolved—features like :𝗵𝗮𝘀(), 𝗰𝗼𝗻𝘁𝗮𝗶𝗻𝗲𝗿 𝗾𝘂𝗲𝗿𝗶𝗲𝘀, the 𝗣𝗼𝗽𝗼𝘃𝗲𝗿 𝗔𝗣𝗜, 𝗰𝗹𝗮𝗺𝗽(), and 𝗹𝗶𝗴𝗵𝘁-𝗱𝗮𝗿𝗸() are now powerful enough to replace much of that JS. In this article, I break down these features with examples showing how CSS can simplify code, reduce bundle size, and make components more resilient. 👉 𝗖𝗵𝗲𝗰𝗸 𝗶𝘁 𝗼𝘂𝘁 𝗵𝗲𝗿𝗲: https://lnkd.in/gxDwt2ss I’d love to hear your thoughts—do you see CSS becoming the new default for UI logic in your projects?

🕒 Built an Interactive Analog Clock using HTML, CSS & JavaScript In this project, I implemented: • Real-time clock using Date() object • DOM manipulation • CSS transforms & rotation logic • Circular indexing using modulo operator • Dynamic background switching with button click • Smooth transitions using cubic-bezier One of the key concepts I practiced: currentIndex = (currentIndex + 1) % images.length; This helped me understand circular array logic in a practical way. Small project — but big learning. Consistency > Complexity 💯 #JavaScript #WebDevelopment #Frontend #100DaysOfCode #LearningInPublic

🚀 Day 5/30 – Tip Calculator Continuing my 30 Days JavaScript Projects Challenge. Today I built a Tip Calculator using HTML, CSS, and JavaScript. This project calculates the tip amount, total bill, and how much each person needs to pay when splitting the bill. 💡 Features: • Calculate tip instantly • Split bill among multiple people • Simple and clean UI 🛠 Tech Stack HTML | CSS | JavaScript 🌐 Live Demo https://lnkd.in/gFUy8h3t 💻 GitHub Repository https://lnkd.in/gZRUXmyr Through this project I practiced DOM manipulation, user input handling, and JavaScript calculations. 25 more projects to go 🚀 #javascript #webdevelopment #codingjourney #30daysofcode #mernstack #github

Just built a simple calculator using HTML, CSS, and JavaScript! This project gave me hands-on experience with DOM manipulation, event handling, and dynamic UI updates ○ Key learnings: ⁃ Handling button clicks with event listeners ⁃ Using string operations for calculations - Updating input fields in real-time This is a small step, but it boosted my confidence in frontend development Looking forward to adding more features like calculation history and scientific functions., ◦ Feedback and suggestions are most welcome #JavaScript #WebDevelopment #FrontendDevelopment #LearningJourney #BeginnerProject

Shipped a CSS Specificity Calculator: a lightweight JavaScript tool that breaks down any CSS selector into its A-B-C specificity score. Enter a selector, click calculate, and instantly see which IDs, classes, pseudo-classes, elements, and pseudo-elements are contributing to the score and which column they belong to. Built with accessibility as a first principle. Aria-live result announcements, :focus-visible keyboard navigation, WCAG 2.1 AA contrast in both light and dark modes, and dynamic ARIA labels on the theme toggle. Live demo: https://lnkd.in/gcJ3dKRZ GitHub: https://lnkd.in/g5upWsga #Frontend #JavaScript #CSS #WebAccessibility #WCAG

🚀 Project #02 – Camera Sidebar Landing Page Built a simple camera-themed webpage using HTML & CSS. Main focus was creating a toggle sidebar menu and practicing layout, positioning, and transitions. No JavaScript — keeping it simple while strengthening fundamentals. 🎥 Demo in the video below 📂 Code: https://lnkd.in/gbr5B3ag More projects coming → from basics to real-world builds. #HTML #CSS #FrontendDevelopment #WebDev #LearnInPublic

Hey Everyone, I’ve started #30DaysCodingChallenge, and today marks #Day15 of this journey. 🔹 Day 15 Task: Today, I built a Stopwatch Application using HTML, CSS, and JavaScript. The focus was on implementing real-time time functionality and improving my understanding of JavaScript logic, DOM manipulation, and event handling. 🔹 Purpose: 1.Stopwatch functionality helps in understanding how JavaScript handles time intervals using setInterval() and clearInterval(). 2.Building this project strengthens logic-building skills and improves understanding of dynamic content updates in web applications. What I Created: 1.A stopwatch display that starts from 00:00:00 format (HH:MM:SS). 2.A Start button that begins the timer and updates every second. 3.A Stop button that pauses the running timer. 4.A Reset button that clears the timer and resets it back to 00:00:00. 5.Automatic time handling logic where seconds convert to minutes and minutes convert to hours after reaching 60. 6.A clean and centered UI layout styled using CSS with gradient background, box shadow, and Flexbox for button alignment. What I Learned: 1.Using setInterval() to create real-time functionality. 2.Using clearInterval() to control and stop timers properly. 3.Managing seconds, minutes, and hours with proper logical conditions. 4.Updating UI dynamically using DOM manipulation. This challenge is helping me move from static web pages to interactive applications, and it’s boosting my confidence in building real-time features step by step. #Day15 #30DaysCodingChallenge #HTML #CSS #JavaScript #Stopwatch #WebDevelopment #FrontendDevelopment #LearningJourney #Consistency