Web Dev Series: Todo App with HTML, CSS, JavaScript

Built a simple Todo App using HTML, CSS & JavaScript 🚀 This project helped me really understand how JavaScript works with the browser (DOM) in real life. 🔹 What I learned while building this: How to access input values from the UI How to create elements dynamically using JavaScript How to add and remove tasks using event listeners How to update the UI without reloading the page How to structure small features into clean logic ✨ Features: Add new tasks Delete tasks instantly Live UI updates This small project improved my confidence in core JavaScript concepts like DOM manipulation and event handling. I’m continuously practicing and building mini projects to strengthen my frontend skills. GitHub repo: https://lnkd.in/gk3U52Mp Tech stack: HTML • CSS • JavaScript #JavaScript #FrontendDevelopment #LearningByDoing #WebDevelopment #StudentDeveloper

🚀 New Video Uploaded – Styling in React (CSS Phase) If you’re learning React and feel confused about how CSS works inside React… this video is for you. In this tutorial, I explained everything in a simple and beginner-friendly way: - How to use normal CSS files in React - Inline styles and why they use JavaScript objects - CSS Modules and how they prevent style conflicts - Dynamic styling using state - Best practices and common beginner mistakes Styling is not just about making the UI look good — it’s about writing clean, maintainable code. Understanding the right styling method will help you build better React projects. This video is part of my Web Development Series on JDCodebase, where I teach step by step from basics to advanced concepts. If you're learning frontend development or React, this will definitely help you. You can check the full video here: https://lnkd.in/g6hHVHMv PPT used in this video https://lnkd.in/gsm2EjdR Web Development Series https://lnkd.in/eYkaJ8TF Let me know your thoughts in the comments 👇 #react #webdevelopment #frontenddevelopment #javascript #css #coding #reactjs #learnreact #programming #jdcodebase

Just built an Image Search App using HTML, CSS, and JavaScript! This beginner-level project helped me understand: • API fetching • Async/await • DOM manipulation • Real-time search functionality • Handling user input dynamically Instead of only watching tutorials, I’m focusing on building projects to strengthen my logic and problem-solving skills. 🔗 Live Demo: https://lnkd.in/dJFqjFzg Small steps every day towards becoming a better developer 💻✨ #JavaScript #WebDevelopment #FrontendDeveloper #LearningByBuilding #100DaysOfCode

🚀 New Video Uploaded – Forms in React (Web Development Series) Forms are one of the most important parts of any real-world application. * Login pages. * Signup forms. * Contact forms. If you don’t understand how forms work in React, building real projects becomes difficult. In this video, I explained: - What forms are in React - Controlled inputs (very important concept) - Handling form submission - Why preventDefault() is required - Basic form validation - Styling forms using CSS - Common beginner mistakes I kept the explanation very simple so that absolute beginners can understand and apply it immediately. If you are learning React, this topic is a must. ▶️ Watch here: https://lnkd.in/guNbBvgU 📥 PPT: https://lnkd.in/gHYbcD7q 📚 Complete Web Development Playlist: https://lnkd.in/eYkaJ8TF Let me know in the comments — what React topic should I cover next? #reactjs #webdevelopment #frontenddevelopment #javascript #learnreact #coding #programming #jdcodebase

JavaScript Functions & Events Explained | Build Interactive Web Apps (EP 04) Want to build interactive and dynamic websites using JavaScript? In this episode, we break down functions and events in JavaScript, two core concepts every developer must master. You’ll learn how to write reusable functions, understand function declarations vs arrow functions, and handle user interactions using event listeners. We also cover advanced performance techniques like debouncing, throttling, and event delegation to help you build faster and more efficient web applications. In this video, you will learn: ✔️ How JavaScript functions work ✔️ Function declarations vs function expressions vs arrow functions ✔️ How to use addEventListener properly ✔️ Understanding the event object ✔️ How to remove event listeners ✔️ Debounce and throttle explained simply ✔️ Event delegation for better performance If you want to improve your frontend development skills and write cleaner, more maintainable JavaScript code, this episode is for you. Subscribe for more practical JavaScript tutorials and web development tips. #JavaScript #WebDevelopment #Frontend #Coding #Programming #EventListeners #LearnJavaScript #SoftwareDevelopment #TechTutorial #JSBasics

Blog Post App (JavaScript Practice Project) Day 9 of my JavaScript learning journey. Built a simple blog post app using HTML, CSS, and Vanilla JavaScript where users can create blog posts with a title, description, and image. Posts are displayed dynamically on the page without using any backend. This project helped me practice real-world DOM manipulation and event handling concepts. ✨ What I learned: Working with querySelector & NodeList Handling events with addEventListener Dynamic UI updates Showing/hiding sections Basic state management in JavaScript 🛠 Tech Stack: HTML CSS JavaScript 🎯 Goal: To improve my JavaScript logic and understand how dynamic content works in real projects. project link: https://lnkd.in/gajJ-s56; github:https://lnkd.in/g8RF2Bbd; #100DaysOfCode #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #MiniProject #DOMManipulation #BuildInPublic #sheriyanscodingschool

🚀 Project 5: Recipe Search App (API Based) Built a Recipe Search Application using HTML, CSS & JavaScript 🍽️ Integrated a public API to fetch recipes dynamically based on user input. 🔹 What I learned: ✔ API integration in JavaScript ✔ Fetching & displaying real-time data ✔ Handling search functionality ✔ Improving UI with cards layout Learning by building — step by step 💻 More projects coming soon! #JavaScript #APIIntegration #WebDevelopment #Frontend #LearningByDoing #StudentDeveloper

🚀 Built a “Guess The Number” Game — Practicing Real JavaScript Logic As part of my learning journey in web development, I built a Guess The Number game using HTML, CSS, and JavaScript and deployed it online. This small project helped me understand how JavaScript connects logic with real user interaction on a webpage. 💡 What I implemented in this project: • Random number generation (1–10) using JavaScript • DOM manipulation to update results, hints, and score dynamically • Conditional logic to display “Too High” and “Too Low” hints • Score system that decreases with each wrong guess • Restart functionality to replay the game instantly While building this, I focused on understanding how event handling, input validation, and dynamic UI updates work together — instead of just copying code from tutorials. 🔗 GitHub Repository: https://lnkd.in/ejgKaSyE 🌐 Live Demo (Vercel): https://lnkd.in/earR_D8m 🌱 As a beginner developer, I’m continuously building small projects to strengthen my JavaScript fundamentals and improve my problem-solving skills. Feedback and suggestions are always welcome! #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #BeginnerProjects #LearningInPublic #StudentDeveloper

Day 20 of My Web Development Journey ⚡ From Day 18 (arrays + functions) to Day 19 (connecting JS with real HTML & CSS) — things are moving faster now. Today I stepped into the next JavaScript topic: DOM manipulation. Not just writing logic. Not just console output. Now I’m controlling the page properly. I practiced: • Selecting elements • Changing text and styles dynamically • Handling events • Creating small interactive behavior Earlier, I was thinking, “Will this work?” Now I think, “How can I make this better?” The difference is speed. Understanding is quicker. Debugging is faster. Confidence is coming from repetition — not motivation. 🧠 Still beginner level. But the pace is clearly improving. Now JavaScript doesn’t feel separate from the website. It feels like the engine behind it. 🚀 #Day20 #JavaScript #DOM #WebDevelopment #FrontendJourney #LearnToCode #DeveloperGrowth #BuildInPublic #CodingPractice

Day 12 of My Web Development Journey 🚀 Today I went deeper into JavaScript basics. Variables were easy. But understanding how and when to use them properly — that’s different. I practiced: • let vs const • Basic operators • Simple conditions (if/else) It’s interesting how small logic changes completely change the output. In HTML/CSS, mistakes break the layout. In JavaScript, mistakes break the logic. This feels more mental than visual. Still at the basics. But now I’m starting to think in terms of outcomes, not just structure.  #Day12 #JavaScript #WebDevelopment #FrontendJourney #LearningInPublic #ProgrammingBasics #CodeNewbie #TechJourney #DeveloperMindset #BuildInPublic #CodingLife #FutureDeveloper