Day 18🚀 #𝟯𝟬𝗗𝗮𝘆𝘀𝗼𝗳𝗰𝗼𝗱𝗶𝗻𝗴 HTML, CSS, BOOTSTRAP, JAVASCRIPT👨🏼💻 🚀 Built a Custom Range Counter using JavaScript...... I recently worked on a small project where I created a Custom Range Counter that dynamically counts numbers between a user-defined range. 💡 What the project does: The user enters a From value and To value, and when the Start button is clicked, the counter automatically counts up or down every second until it reaches the target number. 🔧 Key Concepts Used: ✨ DOM Manipulation using document.getElementById() ✨ Handling button click events with onclick ✨ Validating user input before processing ✨ Converting string inputs to numbers using parseInt() ✨ Using setInterval() to update the counter every second ✨ Implementing conditional logic to count increment or decrement ✨ Stopping the timer with clearInterval() when the target is reached ✨ Dynamically updating the webpage using textContent 📚 This project helped me strengthen my understanding of JavaScript timers, DOM manipulation, and user interaction in web development. Excited to keep building more interactive web projects! 💻 #NxtWave #CCBP #Day18 #HTML #CSS #bootstrap #FrontendDevelopment #MiniProject #30DaysOfCode #MERN #JS #JavaScript #WebDevelopment #CodingJourney #LearnToCode #DeveloperLife

For 25 years, the <select> element has been impossible to style. Every project ends the same way -- you reach for React Select, Headless UI, or some custom div-based dropdown. 30KB of JavaScript just to make a dropdown look good. That era is ending. With appearance: base-select (Chrome 134+), you can now fully customise the native <select> using pure CSS: -- Style the dropdown panel with ::picker(select) -- Replace the arrow with ::picker-icon -- Put images, icons, and descriptions inside <option> -- Animate open/close with @starting-style -- Full keyboard and screen reader accessibility -- built in Zero JavaScript. ~20 lines of CSS. And browsers that don't support it still get a working native select. I wrote about the new elements, real code examples, and when you still need a JS library: https://lnkd.in/eT5i3VTC #CSS #HTML #WebDevelopment #FrontEnd #DesignSystems #Accessibility

Day 21🚀 #𝟯𝟬𝗗𝗮𝘆𝘀𝗼𝗳𝗰𝗼𝗱𝗶𝗻𝗴 HTML, CSS, BOOTSTRAP, JAVASCRIPT👨🏼💻 – Built a Speed Typing Test Web App! Today I created a Speed Typing Test using HTML, CSS (Bootstrap), and JavaScript. ✨ This small project helped me understand several important concepts in JavaScript and Web Development. Here are the key takeaways from today’s project 👇 💡 DOM Manipulation, Learned how to access and control HTML elements using document.getElementById() and dynamically update content on the page. ⏱️ Working with Timers, Implemented a timer using setInterval() to track how long a user takes to complete the typing test. 🌐 Fetching Data from an API, Used the fetch() method to get a random quote from an API and display it on the webpage. 🔄 Handling User Interactions, Added event listeners for Start, Submit, Reset buttons and keyboard actions to make the app interactive. ⌨️ Keyboard Event Handling, Used keydown events so pressing Enter automatically submits the typed text. 🧠 Conditional Logic, Compared the user’s typed text with the original quote to determine whether it is correct or incorrect. 🌀 Loading Indicators (Spinner), Displayed a loading spinner while fetching the quote from the API to improve user experience. 🧹 Reset Functionality, Implemented a reset button that clears the timer, input field, result message, and loads a new quote. ✨ Improving User Experience, Used Bootstrap components and simple styling to make the interface cleaner and more user-friendly. 📌 What I learned today: Building small projects is the best way to understand how JavaScript, APIs, and DOM manipulation work together in real-world applications. This is just the beginning — many more projects coming soon! 💻🔥 #WebDevelopment #CodingJourney #BuildInPublic #LearningByDoing #NxtWave #CCBP #Day21 #HTML #CSS #bootstrap #FrontendDevelopment #MiniProject #30DaysOfCode #MERN #JavaScript

💡 You don’t need JavaScript to show elements on hover. Many developers still reach for JavaScript when they want to show UI elements on hover. But in most cases, pure CSS can handle it cleanly. Recently, I used this Tailwind pattern: ------------------------------------- lg:opacity-0 lg:group-hover:opacity-100 lg:transition-opacity lg:duration-200 lg:ease-in-out -------------------------------------- This keeps the element hidden initially and smoothly reveals it when the parent element is hovered. But there is one important requirement 👇 The parent element must have the group class, otherwise group-hover will not work. Refer to the image attached. Why use `lg` here specifically? Hover interactions don't exist on most touch devices. By limiting this behavior to large screens, the interaction only activates on desktop environments where hover actually makes sense. On smaller screens, these elements remain visible by default. Why is this pattern useful? • Perfect for action buttons inside cards. • Keeps the UI clean until the user interacts. • No JavaScript event listeners needed. Sometimes the best frontend solution isn’t writing more JavaScript. It’s leveraging CSS the way it was designed to work. 🚀 #buildinpublic

🚀 Project Showcase: Dark Mode Toggle (HTML, CSS & JavaScript) I recently built a Dark Mode Toggle feature using HTML, CSS, and JavaScript to enhance user experience by allowing users to switch between light and dark themes effortlessly. 💡 Key Highlights: 🌗 Smooth Light/Dark mode switching 🎨 Clean and responsive UI design using CSS ⚡ JavaScript functionality for real-time theme toggling 💾 User preference can be easily extended to local storage for persistent settings This small project helped me better understand DOM manipulation, event handling, and UI state management in JavaScript while improving front-end design practices. 🔧 Tech Stack: HTML | CSS | JavaScript Projects like this show how small features can significantly improve usability and accessibility in modern web applications. I’m continuously exploring and building more front-end projects to strengthen my development skills. here checks my GitHub repo: 🔗 https://lnkd.in/gCz98WpX 🚀 Day 6 of #100DaysOfCode #WebDevelopment #FrontendDevelopment #JavaScript #HTML #CSS #DarkMode #Coding #LearningInPublic

After my last post about Vanilla CSS, a few people asked: "But how do you handle the 'click' state without JavaScript?" The answer is simpler than you think: The Checkbox Hack. By using a hidden <input type="checkbox"> and the :checked pseudo-class, you can: Toggle menus with zero JS. Keep your HTML semantic. Ensure 100% performance on low-end devices. Here’s the 3-step logic: 1.HTML: Wrap your menu in a label connected to a hidden checkbox. 2.CSS: Set the menu to display: none (or transform: scale(0) for better animation). 3.The Magic: Use input:checked ~ .menu { display: block; }. Modern CSS features like :focus-within and the new popover API are making JavaScript "glue code" a thing of the past. Are you still writing document.querySelector for basic UI toggles, or have you explored these native CSS alternatives? Let’s chat in the comments—I’m looking to connect with more devs who love building lightweight, high-performance web apps! #WebDevelopment #CSS #Frontend #CleanCode #ProgrammingTips #VanillaCSS

🚀 Continuing Web Development Journey – DOM Manipulation & Events in JavaScript After learning advanced JavaScript concepts, I explored DOM Manipulation and Events, which are essential for making web pages interactive and dynamic. 🔹 What is DOM (Document Object Model)? The DOM represents the HTML structure as a tree of objects. JavaScript can use the DOM to access, modify, and update web page elements. 🔹 Selecting Elements JavaScript allows selecting HTML elements using different methods. let heading = document.getElementById("title"); let items = document.getElementsByClassName("item"); let para = document.querySelector("p"); 🔹 Changing Content We can modify text or HTML content. document.getElementById("title").innerHTML = "Updated Text"; 🔹 Changing Styles JavaScript can dynamically change styles. document.getElementById("title").style.color = "blue"; 🔹 Creating & Adding Elements let newElement = document.createElement("p"); newElement.innerText = "New Paragraph"; document.body.appendChild(newElement); 🔹 Removing Elements let element = document.getElementById("title"); element.remove(); 🔹 Events in JavaScript Events allow JavaScript to respond to user actions. Common events: • click • mouseover • keypress • submit 🔹 Event Handling Example <button onclick="showMessage()">Click Me</button> <script> function showMessage() { alert("Button Clicked!"); } </script> 🔹 Using addEventListener (Best Practice) document.getElementById("btn") .addEventListener("click", function() { console.log("Button clicked"); }); 🔹 Why DOM & Events are Important • Make web pages interactive • Dynamically update content • Handle user input efficiently • Essential for modern web applications Learning DOM manipulation and events is helping me build interactive and user-friendly web applications. #JavaScript #DOM #WebDevelopment #FrontendDevelopment #DotNetDeveloper #LearningJourney

SSR sounds simple in theory. In practice? It's one of the trickiest parts of React performance. Here's what actually happens: Without SSR (Client-Side Rendering): 1. Browser gets empty HTML: <div id="root"></div> 2. Downloads JavaScript (slow) 3. Executes JavaScript (slow) 4. Builds the page in the browser 5. User finally sees content With SSR (Server-Side Rendering): 1. Server builds the complete HTML 2. Browser receives ready content immediately 3. User sees the page instantly 4. JavaScript loads in the background 5. Page becomes interactive (this step is called Hydration) Step 5 is where it gets interesting. What is Hydration? The server sends HTML that LOOKS interactive. But it isn't. Not yet. Hydration is React re-running on the client, attaching event listeners to that HTML, and making everything actually work. The dangerous gap: Between "looks ready" and "actually ready" there is a window. User sees a button. Clicks it. Nothing happens. Because hydration hasn't finished yet. This frustrates users more than a loading spinner. At least with a spinner, they know to wait. How to handle it well: → Show skeleton screens during hydration → Disable interactive elements until hydrated → Use streaming to hydrate parts of the page progressively The big lesson from this book: SSR is not just "render on server, done." You need to think about the entire lifecycle: Server render → Send HTML → Hydrate → Interactive Frameworks like Next.js handle most of this for you. But understanding what's happening underneath makes you a much better developer. And a much more confident one in interviews. Have you ever encountered a hydration mismatch error? Drop your experience in the comments.

Now we can do much more with CSS, without relying on Javascript libraries. Anchor, Popover, Transitions, custom Select, and more... https://lnkd.in/e5vPqD7w

Built a Utility-First CSS Engine using JavaScript I recently completed a project where I built Chai CSS, a lightweight utility-first CSS engine that works entirely in the browser using JavaScript. Instead of writing traditional CSS, developers can use classes like: chai-p-10 → padding: 10px chai-bg-red → background-color: red chai-text-center → text-align: center The JavaScript engine: • Scans the DOM after page load • Detects classes starting with chai- • Parses the utility pattern • Dynamically converts them into inline styles I also implemented reusable UI utilities such as: • Buttons (primary, outline, secondary, danger) • Cards with hover effects (primary and secondary) • Flexbox utilities • Spacing and typography helpers This project helped me better understand DOM manipulation, pattern parsing, and how utility-first CSS frameworks work internally. My primary focus was building the engine itself, not the demo site — the demo is just a simple implementation to showcase how the system works. 🌐 Live Demo: https://lnkd.in/g7PgFCV3 You can also check the source code on GitHub: 💻 GitHub: https://lnkd.in/gpFfkmDy #JavaScript #WebDevelopment #Frontend #BuildInPublic