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
More Relevant Posts
-
𝗘𝘅𝗰𝗶𝘁𝗶𝗻𝗴 𝗺𝗶𝗹𝗲𝘀𝘁𝗼𝗻𝗲 🚀 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?
-
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
-
-
Building a Simple BMI Calculator with HTML, CSS, and JavaScript By Devendra Kumar Dixit Why I Built This I wanted a small, practical front-end project that I could complete without overengineering it. The focus was on clarity: simple logic, readable code, and a UI that doesn’t get in the way. I intentionally avoided frameworks to practice core HTML, CSS, and JavaScript fundamentals.... https://lnkd.in/ekQwYy-F
-
Built a dynamic Light/Dark theme toggle using JavaScript, CSS, and DOM manipulation with full support for system preference detection and persistent user settings. The implementation checks the user’s OS theme using window.matchMedia('(prefers-color-scheme: dark)') and applies the appropriate class to the <body> element. If a user manually toggles the theme, their preference is stored in localStorage, ensuring it persists across page reloads. The system also listens for real-time OS theme changes and updates the UI accordingly—without overriding a manually selected theme. The project demonstrates practical use of event listeners, class manipulation via classList, browser storage APIs, media query detection, and clean separation of concerns between styling (CSS) and behavior (JavaScript).
-
Day 12 – Built a Rock Paper Scissors Game with HTML, CSS & JavaScript Today I built a simple but fun Rock Paper Scissors game using pure HTML, CSS, and JavaScript. The game allows a user to choose Rock, Paper, or Scissors, and the bot randomly selects its move. The result is instantly displayed showing whether the player wins, the bot wins, or it’s a draw. What I practiced in this project: • DOM manipulation using JavaScript • Generating random choices for the bot • Game logic implementation • Interactive UI design with CSS • Handling user events (click interactions) Tech Stack HTML | CSS | JavaScript If you’re learning JavaScript, this is a great beginner project to understand how frontend logic works in real-time. #JavaScript #WebDevelopment #FrontendDevelopment #HTML #CSS #CodingJourney #BuildInPublic
-
-
🚀 Day 5/100 – Login Page Design (HTML & CSS) Here’s a quick demo of the Login Page I designed using only HTML & CSS. 💻 In this project, I focused on: ✔ Clean and structured form layout ✔ Proper input alignment & spacing ✔ Modern button styling with hover effects ✔ Simple and responsive UI This screen recording shows the practical implementation of my frontend fundamentals — no frameworks, just pure HTML & CSS practice. I’m grateful to Code Of School for providing the right learning environment and continuous support. Special thanks to my mentors Ritendra Gour and Avinash Gour for their valuable guidance and motivation throughout this journey. 🙌 Consistency + Guidance = Growth 🚀 #Day5 #100DaysOfCode #WebDevelopment #HTML #CSS #FrontendDeveloper #CodeOfSchool #LearningJourney #MERNStackLearner #BuildInPublic
-
Today I attended a fantastic DOU Live webinar by Сергій Бабіч on the topic: “JavaScript (almost) not needed: how to build functional UI with just HTML & CSS” 🚀 It was eye-opening to see how modern HTML and CSS features let us significantly reduce (or even eliminate) JavaScript and third-party libraries, resulting in simpler, cleaner, more performant code. We covered pure no-JS implementations of: - toggling a list between list and grid layouts with responsive design changes - a simple modal dialog - custom tooltips, tabs, and select-like components All without a single line of JavaScript! What impressed me the most was watching an experienced developer’s approach to project structure and mastering the cascade. Several techniques were either new to me or ones I’d only heard about: - @container queries - @layer for better cascade control - @starting-style - native <dialog> element - the powerful :has() pseudo-class - and a few more gems! I’m already planning to apply several of these ideas to my current landing page project - both to solidify the knowledge hands-on and to make the code cleaner and more maintainable. Who else is experimenting with “CSS-only” interactivity in 2026? What are your favorite modern CSS tricks that replace JS? 😄 Huge thanks to Сергій Бабіч for the inspiring session! #Frontend #CSS #HTML #NoJavaScript #WebDevelopment #LearningInPublic
-
⏰ Digital Clock Project – Real-Time with JavaScript I built a responsive Digital Clock using HTML, CSS, and Vanilla JavaScript that shows live time, day, and date with a modern glowing UI. 💡 This project helped me apply several core JavaScript concepts in a real-world example: 🧠 Concepts Used: • Date() object for real-time time & date • setInterval() for updating the UI every second • DOM Manipulation using getElementById() • Template literals for clean string formatting • Conditional (ternary) operator for leading zeros • 12-hour time conversion with AM/PM logic • Array usage to map numeric day → day name • Modulo operator (%) for hour formatting • padStart() for consistent time display 🚀 Features: • Live time update every second • 12-hour format with AM/PM • Current day & full date display • Responsive and centered layout • Orbitron font with neon glow effect This project strengthened my understanding of real-time UI updates, date handling, and clean formatting logic. To view my code visit my github:https://lnkd.in/dr_qam5F #JavaScript #FrontendDevelopment #WebProjects #100DaysOfCode #LearningByBuilding
-
🕒 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 13🚀 #𝟯𝟬𝗗𝗮𝘆𝘀𝗼𝗳𝗰𝗼𝗱𝗶𝗻𝗴 HTML, CSS, BOOTSTRAP, JAVASCRIPT👨🏼💻 I created Traffic Light Simulation.🚦🚦 🚦 Key JavaScript Concepts Used in Traffic Light Simulation. 🔹 **DOM Manipulation using document.getElementById().** Accessed specific HTML elements like bulbs and buttons using their unique IDs to dynamically control and update the UI. 🔹 **Event Handling with onclick functions.** Handled user interactions by triggering JavaScript functions when the Stop, Ready, and Go buttons are clicked. 🔹**Dynamic Style Updates using JavaScript** Used .style.backgroundColor to change the traffic light and button colors in real time without reloading the page. 🔹 **Function-based Logic Implementation** Created separate functions (redButton(), yellowButton(), greenButton()) for each traffic light state to keep the code clean and organized. 🔹** State Management Logic.** Ensured only one light is active at a time by resetting other lights to the default color, simulating real traffic light behavior. 🔹 **Interactive UI using JavaScript** Enabled real-time visual feedback and user control, making the application interactive and improving user experience. #NxtWave #CCBP #day13 #html #css #bootstrap #FrontendDevelopment #MiniProject #30DaysOfCode #MERN #JS
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development