🚀 Built a Background Changer using HTML, CSS & JavaScript Excited to share my latest mini project where I created a Background Color Changer 🎨 💡 With just a click, the entire background changes — simple idea, but a great way to strengthen core concepts! 🔹 What I used: • HTML for structure • CSS for styling • JavaScript for interactivity 🔹 Key Learnings: • DOM manipulation in JavaScript • Handling events like clicks • Writing clean and interactive UI logic • Improving user experience with small features 🔗 Live Demo: https://lnkd.in/eSmF8Qdw 💻 GitHub Repo: https://lnkd.in/eU-N3P2J This project reminded me that even small builds can teach big concepts 💯 I’m focusing on building consistently and improving step by step 🚀 💬 What was the first JavaScript project you built? #WebDevelopment #JavaScript #HTML #CSS #Frontend #CodingJourney #BuildInPublic

Today I practiced JavaScript DOM Manipulation using HTML, CSS, and JavaScript in Google Colab. In this small hands-on project, I implemented a few beginner-level interactive features: 🔹 Adding two numbers using input fields and displaying the result dynamically 🔹 Built a simple “Guess the Number” game using JavaScript logic 🔹 Changed the color of a box using a button click with CSS and JavaScript 🔹 Dynamically resized elements using class manipulation 🔹 Created and appended HTML elements (<h1>) dynamically using JavaScript These exercises helped me understand: • How to use DOM Manipulation • Handling button click events • Updating HTML content dynamically with JavaScript • Basic interactive web development concepts Learning step by step and building small projects every day. Looking forward to learning more about frontend development and JavaScript. #JavaScript #HTML #CSS #WebDevelopment #DOMManipulation #CodingJourney #LearningInPublic

🚀 Web Development Journey - JavaScript Day 11 Today I focused on something really practical — manipulating element styles with JavaScript. This is where you move from just selecting elements… to actually controlling how they look and behave. Here’s what I worked on: 🔹 Changing styles directly using the style property 🔹 Using cssText to apply multiple styles at once 🔹 Understanding styles better with getComputedStyle() 🔹 Working with className 🔹 And using classList (add, remove, toggle, replace) Honestly, this part made things feel more real, like I’m actually building interactive UI, not just writing code. Didn’t do anything crazy today, but I showed up and made progress. That’s what matters. Next up: JavaScript Events ⚡ #WebDevelopment #JavaScript #100DaysOfCode #FrontendDevelopment #LearningInPublic

AI-Powered Full Stack Development Journey. Today I stopped just writing HTML and started controlling it with JavaScript. That's what the DOM is — the bridge between your code and the live page. Here's what I covered today: 🔍 Selecting Elements ▸ getElementById() — grab one element by its id ▸ getElementsByClassName() — get all elements with a class ▸ getElementsByTagName() — get all elements by tag name ▸ querySelector() — find the first match using CSS selector ▸ querySelectorAll() — find all matches using CSS selector 💻 Projects I built today: ▸ Random background color changer on button click ▸ Show / Hide password toggle — a real feature used in every login form 💡 Key insight: Before DOM, JavaScript was just logic sitting in a file. After DOM, JavaScript can READ, CHANGE, and REACT to anything on the page. That shift in thinking is what makes frontend development exciting. One concept at a time. One project at a time. 💪 #JavaScript #DOM #DreamTusk #WebDevelopment #FrontendDevelopment #LearningInPublic #CodingJourney #DreamTuskTechnologies

Today I explored some core concepts of JavaScript events, and here’s my simple understanding: 🔹 Event Bubbling Event bubbling means when an event starts from the element you interact with and then travels upward through its parent elements. For example, if I click a button inside a div, the event first happens on the button, then the div, then the body, and so on. A simple way to imagine it: If I’m dancing in my room, you can also say I’m dancing in my house, in my city, or even in my country. It’s like: room → house → city → country 🔹 Stopping Event Bubbling Sometimes we don’t want the event to go upward. We only want it to stay on that specific element. For that, we use: element.addEventListener("click", (event) => {  event.stopPropagation(); }); 🔹 setInterval() Used when we want something to run repeatedly after a fixed time interval. Example: setInterval(() => { /* code */ }, 3000); 🔹 setTimeout() Used when we want something to happen once after a delay. Example: setTimeout(() => { /* code */ }, 4000); Learning these small concepts is helping me understand how interactive web applications really work. #JavaScript #WebDevelopment #Learning #Frontend #Programming

🎮 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

Built a Simple Student Card UI using HTML, CSS & JavaScript! I’ve been exploring core web development concepts and created a small project that simulates component-based design without using any frameworks. 🔹 Key Highlights: • Designed a clean and responsive student form UI • Implemented a reusable "StudentCard" component using JavaScript functions • Managed state using plain JavaScript objects • Practiced event handling to capture and render user input dynamically • Understood the basics of props by passing data into components This project helped me strengthen my fundamentals in DOM manipulation and structuring code in a component-like approach. Sometimes, going back to basics is the best way to truly understand how things work under the hood! Next step: Try building the same using React to see the difference. #NunnariAcademy #WebDevelopment #JavaScript #FrontendDevelopment #LearningByDoing #HTML #CSS #CodingJourney

🚀 Just built a simple Dark Mode feature using HTML, CSS, and JavaScript I’ve recently started learning web development, and this is one of my small projects while exploring how things actually work in real applications. In this project, I implemented: Theme toggling using JavaScript Basic styling with CSS Saving user preference using localStorage It may look simple, but building it helped me understand how UI and logic connect behind the scenes. Still learning and improving step by step. Would appreciate any feedback or suggestions 🙌 🔗 Live Demo: https://lnkd.in/grFg658j Github Repository link https://lnkd.in/gq43AtQp #webdevelopment #javascript #css #html #learning #beginners #codingjourney #buildinpublic #learning

Exploring the DOM with a Small Dynamic Project After learning JavaScript basics, I started working with the DOM, and this is where things became more practical and interesting. Instead of just using the console, I built a small interactive project where I can create, update, and delete elements dynamically. What is DOM? The DOM represents HTML as a structure where each element can be accessed and modified using JavaScript. What I learned: Selecting elements: 1. Using getElementById() to access elements. 2. Using querySelector() for flexible selection. DOM Manipulation: 1. Creating elements using createElement(). 2. Adding elements using appendChild(). 3. Updating content dynamically. 4. Removing elements using removeChild(). Styling using DOM: 1. Changing styles dynamically using element.style. 2. Applying properties like color, font size, background, alignment. 3. Understanding how UI can be controlled directly with JavaScript. Event Handling: 1. Using addEventListener() to handle user actions. 2. Performing operations like add, update, and delete. Project I built: 1. Add a new element dynamically. 2. Update existing content. 3. Delete elements from the page. 4. Input-based dynamic list with Edit and Delete options. Project files: HTML → dynamic.html JavaScript → dynamic.js Challenges I faced: 1. Understanding how dynamically created elements behave. 2. Updating and deleting elements without errors. 3. Managing user input and UI updates. 4. Debugging small logic mistakes. How I improved: 1. Broke problems into smaller steps. 2. Used console logs to track execution. 3. Practiced multiple times to understand flow. One important realization: DOM is not just about selecting elements. It is about dynamically controlling the UI and user interaction. Still learning and improving step by step. Would love your feedback. #JavaScript #WebDevelopment #Frontend #CodingJourney #MERN #Learning

Day 28 of my JavaScript journey 🚀 Built a Coming Soon Page with a live countdown timer using HTML, CSS, and JavaScript. Features: ⏳ Real-time countdown timer 🎯 Dynamic date calculation using JavaScript 📱 Responsive and clean UI This project helped me understand how to work with time-based logic and create engaging landing page components. 🔗 Live Demo: https://lnkd.in/gxAnkF3v 💻 GitHub Repo: https://lnkd.in/gPimcWEY Exploring how small features like countdowns can improve user engagement. 💻 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney