🎮 Just built a simple Tic-Tac-Toe game using HTML, CSS, and JavaScript. Nothing too complex — just wanted to strengthen my fundamentals and understand how things work behind the scenes without using any frameworks. What I worked on: • Handling game logic (win conditions, turns) • Updating UI with DOM manipulation • Reset functionality Honestly, small projects like this help a lot in getting comfortable with core concepts. Thinking of improving it next by adding an AI opponent or better UI. Open to suggestions 👀 #JavaScript #HTML #CSS #WebDevelopment #Learning

#Day43 of #100DaysOfCode Today I created an interactive Star Rating System using HTML, CSS, and JavaScript Features I implemented: Clickable 1 to 5 star rating system Dynamic highlighting of selected stars Live rating display update (e.g., 3/5) Clean and responsive card UI design What I learned: Handling multiple elements using`getElementsByClassName` Using loops to update UI dynamically Adding & removing classes with `classList` Improving user interaction with simple logic This project helped me understand how rating systems work in real-world applications like reviews and feedback Building small features like this is boosting my JavaScript confidence Code Of School - Avinash Gour & Ritendra Gour #Day43 #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #100DaysOfCode

🧠 Day 22 — JavaScript Array Methods (map, filter, reduce) If you work with arrays, these 3 methods are a must-know 🚀 --- ⚡ 1. map() 👉 Transforms each element 👉 Returns a new array const nums = [1, 2, 3]; const doubled = nums .map(n => n * 2); console.log(doubled); // [2, 4, 6] --- ⚡ 2. filter() 👉 Filters elements based on condition const nums = [1, 2, 3, 4]; const even = nums.filter(n => n % 2 === 0); console.log(even); // [2, 4] --- ⚡ 3. reduce() 👉 Reduces array to a single value const nums = [1, 2, 3]; const sum = nums.reduce((acc, curr) => acc + curr, 0); console.log(sum); // 6 --- 🧠 Quick Difference map → transform filter → select reduce → combine --- 🚀 Why it matters ✔ Cleaner & functional code ✔ Less loops, more readability ✔ Widely used in React & real apps --- 💡 One-line takeaway: 👉 “map transforms, filter selects, reduce combines.” --- Master these, and your JavaScript will feel much more powerful. #JavaScript #ArrayMethods #WebDevelopment #Frontend #100DaysOfCode 🚀

🚀 Built a Simple Calculator using HTML, CSS & JavaScript! Today I worked on a beginner-friendly project — a fully functional Calculator 💻✨ 🔧 Tech Stack: • HTML – Structure • CSS – Styling & UI • JavaScript – Logic & Functionality 💡 Features I implemented: ✔️ Basic arithmetic operations (+, −, ×, ÷) ✔️ Clear (AC) and Delete (DEL) functions ✔️ Responsive button-based input ✔️ Clean and modern UI design ⚡ What I learned: • Handling DOM elements using JavaScript • Using event listeners effectively • Managing user input dynamically • Debugging small but tricky errors (like class name mismatches & syntax issues 😅) This project helped me strengthen my fundamentals and confidence in frontend development. 📌 Next Step: I’m planning to improve this by adding keyboard support and better error handling! #WebDevelopment #JavaScript #HTML #CSS #BeginnerProject #CodingJourney #FrontendDevelopment #BCA #LearningByDoing

#day48 of #100DaysCodingChallenge 🕒 Built an Analog Clock using HTML, CSS & JavaScript I created a fully functional analog clock that dynamically updates in real-time using JavaScript. ✨ Key Highlights: • Real-time clock using Date object • Smooth rotation of hour, minute, and second hands • Accurate angle calculations (360° logic) • Clean and responsive UI design • Custom styled clock with numbers (1–12) 💡 Concepts Used: • DOM Manipulation • setInterval() • CSS Transform (rotate) • Positioning & Layout 🚀 Future Improvements: • Smooth sweeping second hand • Dark/Light mode toggle • Dynamic number generation using JavaScript • Add digital clock support 🔗Github Link :https://lnkd.in/dBuyP46D Code Of School || Ritendra Gour || Avinash Gour #JavaScript #WebDevelopment #Frontend #Projects #Coding

🚀 I finally understand the DOM — not just memorized it. Most beginners (including me earlier) think: 👉 “DOM = something to manipulate HTML” But here’s what actually clicked for me: The DOM is a tree of objects (nodes) created by the browser — so JavaScript never touches HTML directly. Instead: HTML → parsed by browser → converted into DOM (objects) → JS interacts with it 💡 Key realizations: • `window` is the global object (not part of DOM) • `document` is the root of the DOM tree • Everything is a node: * Element nodes (`div`, `p`, `h1`) * Text nodes (actual content) * Comment nodes • Selectors are just shortcuts: Instead of painful traversal like: `document.body.children[4].children[1]...` we use: `querySelector()` and friends • `innerText` vs `textContent` vs `innerHTML` — not the same ⚠️ • DOM = live structure → change it with JS → UI updates instantly 🔥 Next step: I’m going to build my own versions of: * `getElementById` * `getElementsByClassName` To truly understand how browsers work under the hood. If you're learning frontend: 👉 Don’t just use the DOM — understand it. Shared Detailed Notes below (provided by CoderArmy youtube channel): Course Instructor: Rohit Negi | Youtube Channel: CoderArmy. Special thanks to Rohit Negi, he explained everything from first thought principle, why we even need DOM and builds understanding on top of that. #JavaScript #WebDevelopment #Frontend #DOM #LearningInPublic #fullstackdevelopment #coding

Built a Task Tracker using JavaScript. But the real learning wasn’t the UI, it was debugging real problems. This project helped me move beyond “writing code” to actually understanding how things break in real-world scenarios. Some challenges I faced: • Data not persisting correctly due to localStorage handling • Events not working on dynamically created elements • API-like behavior issues with async flow and DOM updates • UI breaking due to incorrect DOM manipulation • CSS bugs caused by specificity and layout issues Instead of patching things blindly, I debugged and fixed each issue step by step. Key things I learned: • Why JSON.parse is necessary when using localStorage • Difference between response-level errors vs data-level errors • Importance of event delegation for dynamic elements • How small DOM mistakes can break the entire UI • CSS pitfalls like flex overflow, specificity, and animation conflicts I also improved the user experience by: • Adding proper task states (pending/completed) • Ensuring smooth UI updates without reloads • Handling edge cases like empty inputs and invalid actions This project was less about building a “task app” and more about learning how to think like a developer. Project Repo: https://lnkd.in/gCgxHuWC Live Website: https://lnkd.in/gC3CJNx8 Would appreciate feedback! #javascript #webdevelopment #html #css #beginnerdev #100daysofcode #frontenddevelopment #vanillajs

📚 Learning: How Browsers Turn Code into Pixels Recently, I explored the Critical Rendering Path (CRP) — the process that happens behind the scenes when a webpage loads. It’s interesting to see how quickly the browser transforms simple code into a fully visible UI. 🔍 What I understood: >The browser first downloads HTML, CSS, and JS >HTML is converted into a DOM >CSS is converted into a CSSOM Both combine to form the Render Tree Then comes Layout (positioning) and Paint (pixels),finally, everything is composited and displayed. ⚠️ Small but important insight: Not all resources are equal —some can block rendering, especially: >CSS (until styles are ready). >JavaScript (if not handled properly). 💡 My takeaway: Even small optimizations like: using async/defer reducing unused CSS keeping DOM simple.

I have been rebuilding my understanding of JavaScript by focusing on how UI systems behave - not just how to make them work. Recently, I built two small DOM-based projects as part of a structured learning path: • Toggle Text Component • Theme Toggle System Instead of focusing on features, I focused on how UI systems behave: → State-driven UI updates → Persistent state using localStroge → Clear interaction feedback → Consistent visual behavior across components Live demo: https://lnkd.in/dt94TTW5 Code: https://lnkd.in/dDA8u28H The biggest shift for me was realizing: UI is not just HTML + CSS + JS - it is a system that reacts to state over time. I am continuing to build JavaScript projects with focus on engineering thinking, system design and user perception. #JavaScript #FrontentDevelopment #WebDevelopment #LearningInPublic

Before frameworks, I went back to the basics — and it changed the way I code If I could summarize this project in one sentence, it would be: going back to the basics completely changes the way you see code. Continuing my posts about returning to my studies: after some time away, I decided to go back to the fundamentals, revisiting core concepts and rebuilding a more solid understanding. This was one of the first projects I developed during this return — a login screen built with pure HTML and CSS, and a simple interaction in JS. Feel free to try out the interactions and explore how it works: https://lnkd.in/edqRCevN It’s a simple project, but I like it precisely for that reason, for the opportunity to practice basic concepts. Even though there are frameworks like Bootstrap and Tailwind that make development much easier, the idea here was to reinforce the essentials: understanding how elements behave, how CSS works in practice, and how properties relate to each other, before moving on to tools that abstract these processes. In this project, I worked with concepts such as responsiveness and mobile first, understanding in practice how specificity and inheritance work, and truly grasping the CSS cascade. I consider this project an important part of my review process because, when you truly understand the fundamentals — especially concepts like cascade, specificity, and inheritance — code stops being trial and error and becomes a more conscious and intentional construction. #webdevelopment #frontend #html #css #javascript #responsivedesign #mobilefirst #coding #programming #100daysofcode #learningtocode #devjourney