Today I built a simple Bird Game using HTML, CSS, and JavaScript — and this project helped me understand the real power of the DOM. Instead of just designing static pages, I focused on making the game interactive and dynamic using JavaScript. Here’s what I worked on 👇 🎮 Core Concepts Used 🔹 DOM Manipulation Used the Document Object Model to dynamically update positions, detect collisions, and control game behavior in real time. 🔹 Event Handling Handled keyboard/mouse inputs to control the bird’s movement. 🔹 Game Loop Logic Implemented continuous movement and obstacle generation using timing functions. 🔹 Collision Detection Tracked object positions and applied logic to determine game over conditions. 🔹 Dynamic UI Updates Updated score, reset states, and handled real-time rendering efficiently. Looking forward to building more interactive projects 🚀 #JavaScript #HTML #CSS #DOM #FrontendDevelopment #WebDevelopment #LearningInPublic #GameDevelopment LIVE LINK : https://lnkd.in/dRXBK_YZ

🚀 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

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

📸 Image Resizer Mini Project (HTML, CSS, JavaScript) Built a dynamic Image Resizer Application where users can increase or decrease image size interactively. 🔹 Increment & Decrement buttons adjust width by 5px 🔹 Real-time width display update 🔹 Smart boundary validation (Min: 100px | Max: 300px) 🔹 Warning messages for extreme size limits 🔹 Clean DOM manipulation & event handling This project helped me understand: ✔ DOM selection & styling ✔ Conditional logic in JavaScript ✔ Dynamic UI updates ✔ Handling edge cases like a real product Small project. Strong fundamentals. Learning to build with logic, not just code 💡 🔗: https://lnkd.in/gMY45-FQ #JavaScript #FrontendDevelopment #MiniProject #WebDevelopment #LearningByBuilding

🚀 Just built my own Tic Tac Toe game using HTML, CSS & JavaScript! Instead of just watching tutorials, I decided to build something from scratch — and this small project taught me a lot 👇 🧠 What I learned: ✔️ JavaScript DOM manipulation ✔️ Event handling & game logic ✔️ CSS styling & UI feedback ✔️ Writing cleaner, more readable code It’s a simple game, but it helped me understand how real logic flows in JavaScript, not just theory. 📌 Next goal: Add better UI animations and improve code structure. If you’re learning web development, I highly recommend building small games like this — they boost confidence massively 💪 👉 Feedback & suggestions are welcome! #JavaScript #WebDevelopment #Frontend #HTML #CSS #LearningInPublic #BuildInPublic #Projects #BeginnerDeveloper #100DaysOfCode

🚀 Mini Project: “Guess the Number” Game using HTML, CSS & JavaScript I built a simple and interactive Guess the Number game as a mini project to strengthen my fundamentals in JavaScript and DOM manipulation. 🎯 Project Idea The system randomly generates a number between 1 and 10, and the user tries to guess it. Based on the input, the program displays whether the guess is right or wrong and updates the score dynamically. 🛠️ Technologies Used HTML – Structure of the webpage CSS – Styling and responsive UI design JavaScript – Game logic and DOM interaction 💡 Key Concepts Practiced DOM manipulation using getElementById Event handling with button click Generating random numbers using Math.random() Conditional statements Dynamic text updates on the webpage Basic score tracking logic ✨ Features User-friendly interface Instant result display (Right/Wrong) Score decreases for every wrong attempt Random number generation for every game Simple and clean UI design 📚 This mini project helped me clearly understand how JavaScript interacts with HTML elements and how real-time updates happen on a webpage. Looking forward to building more interactive web projects! 💻🔥 #JavaScript #WebDevelopment #MiniProject #Frontend #HTML #CSS #LearningByDoing #DOM

🚦 Mini Project: Traffic Light Simulation Built an interactive Traffic Light system using HTML, CSS, and JavaScript. The project simulates real-world traffic signals with dynamic color transitions controlled through JavaScript logic. 🔧 What I practiced: DOM manipulation Timers & conditional logic CSS styling for UI realism Event-driven behavior Strengthening fundamentals through hands-on projects 💻 🔗 https://lnkd.in/gvA_brBv #WebDevelopment #JavaScript #HTML #CSS #MiniProject #Frontend

Continuing with my anime-themed platform, I just built out this market analysis dashboard. This section was the perfect excuse to revisit a core CSS fundamental: positioning (relative vs absolute). While Tailwind makes styling fast, effectively layering these cards and aligning the floating icons required a solid grasp of how absolute elements interact with their relative parents. It’s a reminder that mastering the basics makes using modern frameworks so much more powerful. Code is updated here: https://lnkd.in/gdmaCVfg (Avaliable in UI-Project folder) CSS Pop Quiz: Do you use absolute positioning often, or do you stick to Flexbox/Grid for everything? #ReactJS #CSS #WebDevelopment #Frontend #LearningByDoing #TailwindCSS

Built a Ludo Game using HTML, CSS, and JavaScript 🎲 This project helped me strengthen my understanding of: =>JavaScript game logic =>DOM manipulation =>CSS styling & layout =>User interaction handling Working on real projects like this makes learning web development exciting and practical. Feedback and suggestions are always welcome! 🙌 🔗 Watch the demo video below #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #GameDevelopment #LearningByDoing

💡 What is the <script> tag in HTML? Every interactive website you use — buttons, forms, pop-ups, animations — all of this works because of JavaScript. And the way we add JavaScript to a webpage is with the <script> tag. 🧠 In simple words The <script> tag tells the browser: 👉 “Run this JavaScript code.” 📍 Where is it used? Inside an HTML file to add JavaScript directly To connect an external JavaScript file To make webpages interactive and dynamic ⚙️ Common examples Showing an alert message when a button is clicked Validating a form before submitting Loading animations or sliders Fetching data from an API ⭐ Why is it important? Brings life to static HTML pages Improves user experience Essential for modern web development 👉 Without the <script> tag, a webpage would be just text and images with no interaction. Small tag… but huge power. 🚀 #HTML #JavaScript #WebDevelopment #Frontend #Programming #Coding #Developers #LearnToCode #TechLearning #CodingTips