🚀 Day 2 – Dark Mode Toggle Website Today I built a simple and clean Dark Mode Toggle feature using HTML, CSS, and JavaScript. ✨ Features: Smooth theme transition. Toggle button interaction. Light & Dark UI design. DOM manipulation using JS. Consistency > Motivation 🔥 🔗 GitHub: https://lnkd.in/gigPv7Cd #30DaysChallenge #WebDevelopment #FrontendDeveloper #JavaScript #BuildInPublic

I thought a To-Do List was “too basic”… until I actually built one. While working on this project, I realized how many small details matter in real frontend development 👇 ❌ My first version had logic issues ❌ Edit & save functionality felt confusing ❌ The UI didn’t feel smooth So I improved it step by step and finally built a fully functional To-Do List using HTML, CSS & JavaScript ✅ 🚀 Features: • Add, edit & delete tasks • Clean UI with subtle animations • Proper DOM manipulation • Focused on readability & user experience 📚 What I learned: • How event listeners actually work • Difference between textContent and innerText • Writing cleaner JS logic instead of messy conditions • Why small UI details really matter This project may look simple, but it strengthened my JavaScript fundamentals a lot 💡 👉 Question: What feature should I add next? ✔ LocalStorage ✔ Dark mode ✔ Drag & drop tasks Would love your suggestions 🙌 Thanks to @Suryamani Kumar for the guidance and support 🙌 #FrontendDevelopment #JavaScript #WebDevelopment #LearningByDoing #Projects #HTML #CSS

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

Many Svelte UI libraries rely on Tailwind CSS for styling, but not every developer prefers a utility-first approach. Whether it’s the number of utility classes, the learning curve, or simply a preference for semantic CSS, there is a clear demand for alternatives. In this case, SVAR Svelte Core can be a solid option. It offers 30+ customizable UI components styled with pure CSS — no utility framework required. The components are semantic, production-ready, and include built-in dark and light themes 🌓 The Core library covers the most common needs for business applications: form controls, date picker, popups, notifications, toolbar, menu, side panel, to-do list, and more. Learn more about SVAR Svelte Core 👉 https://lnkd.in/dG7RMDJE #webdev #svelte #sveltejs #opensource #uilibrary #css #javascript

🚀 Just Discovered: Oat — A Breath of Fresh Air for Frontend Development Really impressed by the simplicity and clarity of Oat. Great work by Kailash Nadh and team 👏👏👏 If you’ve ever felt weighed down by complex build systems, heavy frameworks, or endless dependencies — this might excite you. I came across Oat, an ultra-lightweight HTML/CSS UI component library that actually lives up to its name. At ~8KB (minified + gzipped), it gives you: 🔹 Semantic, zero-dependency UI components 🔹 No frameworks, no build tooling, no class pollution 🔹 Minimal JS (WebComponents) where needed 🔹 Styles native HTML elements contextually out of the box 💡 Perfect for: ✔ Developers who value semantic HTML ✔ Projects where performance really matters ✔ Anyone tired of bloated UI frameworks Check it out here 👉 https://oat.ink/� #FrontendDevelopment #WebDevelopment #UIEngineering #WebComponents #SemanticHTML #CSS #JavaScript #PerformanceMatters #MinimalismInTech

🪶Not every project needs to be huge to teach you something real 🎯 I built a Rock–Paper–Scissors mini game to sharpen my front-end fundamentals—and surprisingly, this small game covered a lot. 🕹️ What’s happening inside the game: ✧ Pure JavaScript logic for win / lose / draw scenarios ✧ Real-time score tracking using DOM manipulation ✧ Dynamic UI feedback (messages + color changes based on results) ✧ Structured HTML for clarity and maintainability ✧ Styling with a mix of custom CSS + Bootstrap (not just plug-and-play) 📱 Responsive design using media queries for different screen sizes This project reinforced something important for me 👇 Understanding why the code works > just making it work. Small builds. Strong fundamentals. Consistent progress 🚀 #WebDevelopment #Frontend #JavaScript #HTML #CSS #Bootstrap #ResponsiveDesign #MiniProject #LearningByDoing

Just a small time pass Built a small front-end experiment using HTML, CSS, and JavaScript to strengthen my DOM manipulation skills Created 5 flexbox-aligned boxes and used JavaScript to generate random RGB colors dynamically. Each box gets a unique background color every time the page loads. 💻 Core Logic let boxes = document.querySelector(".container").children; function getRandomColor() { let r = Math.floor(Math.random() * 256); let g = Math.floor(Math.random() * 256); let b = Math.floor(Math.random() * 256); return `rgb(${r}, ${g}, ${b})`; } Array.from(boxes).forEach(box => { box.style.backgroundColor = getRandomColor(); }); 🧠 What I Practiced DOM selection using querySelector Working with HTMLCollection and Array.from() Generating dynamic values using Math.random() Styling elements dynamically with JavaScript Small projects like this sharpen fundamentals. Control the DOM. Control the UI. More improvements coming — transitions, hover effects, and interactive color changes next. #JavaScript #WebDevelopment #Frontend #LearningInPublic

✨ “The same ideas, built the right way.” Previously, my frontend projects were built using HTML, CSS, and JavaScript. Now, I’m building UI components using React.js, focusing on a component-based approach and a reusable structure. This project helped me practice: •Structuring components effectively •Using props for data flow •Styling with Tailwind CSS •Building a smooth, scrollable single-page layout Small projects like these help me clearly understand how React improves structure, reusability, and scalability compared to traditional DOM-based development. GitHub link 👇 https://lnkd.in/g4TYuWVS #ReactJS #WebDevelopment #JavaScript #TailwindCSS #LearningByBuilding

“Why async JavaScript still blocks your UI” 👇 Because async ≠ non-blocking. JavaScript is still single-threaded on the main thread. What async/await actually does 👇 ✅ Makes code look asynchronous ❌ Does not move work off the main thread So this still blocks your UI: `` await heavyCalculation(); `` Why? Because: - async pauses your function - But CPU-heavy work still runs on the main thread - Rendering, input, animations → all wait Common UI killers 👇 ❌ Large JSON parsing ❌ Complex loops & calculations ❌ Image/data processing ❌ Synchronous third-party libraries The browser can’t render while JS is busy. The real fix 🧠 - async/await → helps with I/O - Web Workers → required for CPU-heavy work. 🧵 Smooth UI isn’t about async code. It’s about protecting the main thread. 💬 Honest question: What’s the heaviest thing running on your main thread right now? #JavaScript #FrontendPerformance #WebDevelopment #SoftwareEngineering