querySelector vs querySelectorAll: Key Differences in CSS Selection

I built my own mini Tailwind CSS engine using vanilla JavaScript Here’s what it does: • Parses custom utility classes (chai-) • Maps them to CSS properties • Applies styles dynamically via JavaScript • Reacts to DOM changes using MutationObserver This project helped me understand: • How utility-first CSS actually works • DOM traversal and dynamic styling • How reactivity can be implemented without frameworks • The trade-offs between static and runtime styling systems Live Demo 👇 https://lnkd.in/gnM67yiQ Source code 👇 https://lnkd.in/gKVgtZGp #javascript #webdevelopment #frontend #css #tailwindcss #learninginpublic #buildinpublic #developers #programming #100DaysOfCode

I built a simple Light Control Bulb project using HTML, CSS, and JavaScript 💡 This project demonstrates how to manipulate the DOM and handle user interactions with event listeners. Clicking ON and OFF buttons dynamically changes the bulb state. Still learning and improving every day 🚀 #WebDevelopment #JavaScript #Frontend #LearningByDoing

🚀 Built a simple "Guess the Number" Game using HTML, CSS, and JavaScript. Features: • Random number generation • Score tracking • Reset functionality This project helped me practice DOM manipulation and JavaScript logic. 🔗 Live-demo : https://lnkd.in/gDSVgTfT #JavaScript #WebDevelopment #Frontend #Learning

I thought buttons were the easiest thing in frontend… until I actually tried to understand them 👀 Today I explored different types of buttons and their behavior in forms. And wow… it’s not just about clicking 😅 Things I didn’t know before: 👉 A button inside a form submits by default 👉 type="button" vs type="submit" actually changes everything 👉 One small mistake → page reloads → your logic gone The biggest realization: Sometimes bugs are not in your logic… they’re in the default behavior of HTML itself Now I feel way more confident handling forms and events 💪 Learning step by step 🚀 #frontend #javascript #webdevelopment #learninginpublic

Explored HTMLCollection vs NodeList today 👇 • HTMLCollection → Live & only elements• NodeList → Static & includes all nodes Blog link:-https://lnkd.in/giPxyQFb Understanding this helps avoid DOM bugs while coding. #JavaScript #WebDevelopment #Frontend #cohort26 #chaiaurcode

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

Practicing and revising my JavaScript concepts by building a Simon Says Game using HTML, CSS, and JavaScript. In this project, the player needs to remember and repeat the sequence generated by the system. Through this, I practiced: • DOM events • Arrays for storing sequences • Game logic implementation • User interaction handling Building small projects is a great way to strengthen concepts. 💻✨ #javascript #webdevelopment #frontend #coding #learningbydoing #project #html #css

🌳 Ever wondered how the DOM Garden grows? JavaScript is the gardener! ✂️ element.remove() → Prune dead branches 🌱 element.appendChild() → Plant new leaves 🌿 innerHTML / textContent → Water the content 🎨 classList.add() → Add magical glow The DOM is a living tree — and you control every branch. #WebDev #JavaScript #DOM #Coding #Frontend

Today I practiced a small JavaScript program to change the background color when a button is clicked. When the button is pressed, JavaScript triggers a function that changes the page’s background color using DOM manipulation. This helped me understand: ✔ Event handling ✔ onclick function ✔ DOM manipulation ✔ How JavaScript interacts with HTML & CSS Small practice, better understanding 🚀 #JavaScript #WebDevelopment #Frontend #CodingPractice #LearningJourney

From basic tags to advanced frameworks, here is the breakdown: ✅ Days 1-20: The Foundations (HTML/CSS) ✅ Days 20-40: The Engine (JavaScript/React) ✅ Days 40-70: Real-world Application & Design ✅ Days 80-100: Optimization & Polish Which stage do you find the most challenging? For me, it was definitely mastering Advanced JS! #TechCommunity #CodeNewbie #FrontendDeveloper #Roadmap