JavaScript Frontend Practice Projects & Learning

Built a Rock Paper Scissors Game to sharpen my JavaScript skills. As part of improving my frontend development skills, I created this simple but interactive project using HTML, CSS, and JavaScript. It was a great hands-on way to practice: 💠 DOM manipulation 💠 Event handling 💠 Game logic implementation 💠 Dynamic UI updates Working on small projects like this helps strengthen core concepts and builds confidence in writing better JavaScript. I’ve attached a short demo video of the project below. You can also check out the live project here: https://lnkd.in/dBgzzbm4 #JavaScript #WebDevelopment #FrontendDevelopment #100DaysOfCode #CodingProjects #HTML #CSS #LearningByBuilding

 Just built a QR Code Generator using HTML, CSS, and JavaScript 💻✨ This small project helped me strengthen my understanding of core frontend concepts. 🔥 What I learned from this project: ✔ DOM manipulation in JavaScript ✔ Handling user input dynamically ✔ Working with APIs (QR Code generation API) ✔ CSS Flexbox for layout design ✔ Responsive design using media queries ✔ Button interactions and UI effects Github: https://lnkd.in/dUNqSDrs 💡 Key takeaway: Small projects teach the biggest lessons. Every bug I faced made me understand JavaScript and better than before. 🎯 Features of this project: Generate QR Code from text or URL Instant preview of QR code Simple and clean UI Responsive design for all devices I’m still learning and improving step by step, and this is one of many projects in my journey. 💬 I’d love feedback or suggestions from developers! #HTML #CSS #JavaScript #WebDevelopment #Frontend #GitHub #LearningInPublic #100DaysOfCode

🚀 Day 5 of My Frontend Development Journey Today, I explored something powerful behind modern websites… 👉 DOM Manipulation (Document Object Model) 💡 What I learned: How JavaScript connects with HTML elements Selecting elements using getElementById, querySelector Changing content dynamically (innerText, innerHTML) Handling user actions using events (click, input) 🛠️ Mini Project: Built a simple interactive feature where: Button click changes text User input updates content instantly #FrontendDevelopment #JavaScript #DOM #WebDevelopment #Day5 #LearningInPublic #CodingJourney

🎨 Fresh Project: Building a Color Scheme Generator with Vanilla JS! I’m excited to share my latest frontend project: a Color Scheme Generator! 🚀 As I continue to sharpen my responsive design and JavaScript skills, I wanted to build something that solves a common problem for creators—finding the perfect palette. Whether you need a complementary contrast or a subtle monochrome vibe, this tool fetches it all in real-time using Vanilla JS and TheColorAPI. demo : https://lnkd.in/dk74nWT5 Git repo: https://lnkd.in/d9rhtt47 #WebDevelopment #Frontend #JavaScript #CodingJourney #CSS #ResponsiveDesign #LearnToCode

🔹 Still confused about the DOM? This is the concept that separates beginners from real frontend developers 👇 Most people jump into JavaScript… without truly understanding what they’re controlling. 👉 That’s the DOM (Document Object Model) 💡 What the DOM really is Think of it as a tree structure of your HTML: ✔ Every element = a node ✔ JavaScript can access & modify these nodes ✔ Any change = instant UI update ⚡ Why this matters: If you understand the DOM, you can: ✔ Update content dynamically ✔ Build interactive UI ✔ Handle user actions (clicks, inputs) ✔ Understand React, Vue, and other frameworks easily 🧠 Real Insight: Most developers struggle with JavaScript… not because JS is hard — but because they don’t understand the DOM 🚀 Pro Tip: Before jumping into React 👇 👉 Master how DOM works 👉 Practice selecting & updating elements 👉 Learn event handling Everything else becomes 10x easier. 🎯 Final Thought 👉 HTML = Structure 👉 CSS = Style 👉 DOM = Bridge 👉 JavaScript = Control Miss the DOM… and nothing fully makes sense. 🔁 Your Turn: What confuses you more right now? 👉 DOM manipulation 👉 or React state & props? 🤔 #JavaScript #DOM #FrontendDevelopment #WebDevelopment #LearnInPublic #CodingJourney #100DaysOfCode

🚀 JavaScript forEach vs map — Know the Difference Like a Pro! Many developers use forEach and map interchangeably… but they serve completely different purposes 👀 Let’s break it down 👇 🔹 forEach() 👉 Executes a function for each element 👉 Perfect for side effects (logging, updating UI, API calls) 👉 ❌ Does NOT return a new array 💡 Use it when you just want to do something, not transform data 🔹 map() 👉 Transforms each element 👉 ✅ Returns a new array 👉 Ideal for rendering lists (especially in React ⚛️) 💡 Use it when you want to create something new from existing data ⚡ Quick Rule to Remember: ➡️ Need a new array? → map() ➡️ Just looping? → forEach() 🧠 Pro Tip: Overusing forEach when you actually need map can make your code less clean and harder to scale! 💬 Which one do you use more in your projects — forEach or map? #JavaScript #WebDevelopment #FrontendDevelopment #ReactJS #ProgrammingTips #CodingLife #SoftwareDeveloper #LearnToCode #100DaysOfCode #DevCommunity

🚀 Day 40 of My Full Stack Development Journey Today I stepped into one of the most exciting parts of JavaScript — the DOM (Document Object Model) 🌐⚡ Here’s what I explored today: 🔹 What is DOM? – Understanding how JavaScript interacts with HTML 🔹 DOM Manipulation – Dynamically changing web pages 🔹 Selecting Elements – By ID, Class, Tag Name & Query Selectors 🔹 Setting Content – Updating text and HTML dynamically 🔹 Manipulating Attributes & Styles – Changing appearance using JS 🔹 classList Property – Adding/removing classes easily 🔹 DOM Navigation – Traversing elements on a page 🔹 Adding & Removing Elements – Creating dynamic UI Also solved practice questions and 5 assignment problems 💻 This feels like a huge step — now I can actually make web pages interactive and dynamic! Excited to build real projects using DOM 🚀 #FullStackJourney #WebDevelopment #JavaScript #DOM #LearningInPublic #100DaysOfCode #CodingJourney

🚀 Day 6 of My MERN Stack Journey — Hands-On DOM: How I Built a Task Manager in Plain JS Today I moved beyond basics and built a dynamic Task Manager using JavaScript and DOM. What I learned: ✅ Arrays and objects for managing data ✅ .push(), .pop(), .map(), .filter() in real use ✅ DOM manipulation to display tasks ✅ Event handling using addEventListener ✅ Building a functional UI from scratch 💡 Biggest takeaway: Connecting JavaScript logic with the DOM made everything feel real. This is where frontend development actually starts making sense. Next step: Improving the project with better UI and local storage. 🔗 GitHub: https://lnkd.in/dSw73q63 Read More: https://lnkd.in/ddfkuhWa #MERNStack #JavaScript #WebDevelopment #LearningInPublic #FrontendDevelopment

Day 26: Of web development course Practicing JavaScript DOM Events & Form Handling ⚡ Today I built a small interactive form to practice key DOM manipulation and event handling concepts in JavaScript. What I implemented: Used getElementById to select form elements Prevented default form submission using e.preventDefault() Added inline styling dynamically with onfocus and onblur events (background color change on input fields) Used onchange event on a dropdown to detect and respond to user selection changes Displayed real-time feedback using alert() What I learned: How to respond to different types of user interactions (focus, blur, change, submit) That DOM practice is best done through small, working examples like this The importance of preventDefault() when handling form submissions manually Next step: Fixing the missing username field and expanding to dynamic content updates instead of just alerts. Small steps, solid progress. 🧱💻 #webdevelopment #javascript #DOM #formevents #codingjourney #day26

👉 Day 79 – Frontend Foundations Revisited ✨ Today was all about revision and reinforcement. I revisited the core building blocks of frontend development — HTML, CSS, Bootstrap, and JavaScript (up to DOM) — to strengthen my fundamentals and ensure clarity before moving deeper. 🔸 Revised semantic HTML and how structure impacts accessibility. 🔸 Practiced CSS styling, layouts, and responsive design principles. 🔸 Revisited Bootstrap utilities for faster UI building. 🔸 Reinforced JavaScript basics and DOM manipulation concepts. 🌱 Reflection – Revision is not repetition; it’s refinement. Each revisit uncovers new insights and strengthens confidence. Just like debugging code, revisiting fundamentals helps debug our understanding. ⚡ Day 79 reminded me that mastery comes not from rushing ahead, but from revisiting and reinforcing the basics that power everything we build. #Day79 #FrontendDevelopment #HTML #CSS #Bootstrap #JavaScript #DOM #CodingJourney #10000Coders #LearnInPublic #100DaysOfCode