How I learned JavaScript by building small projects

“I know JavaScript!” — Every beginner before building their first project 😎 Lots of beginners make this mistake (even me 😅). I still remember when I started learning JavaScript… Watching tutorials on the bed, while eating, even walking in the garden — felt like watching a movie. I started with CodeWithHarry and thought — “Wow, JavaScript is easy! I totally got this.” 💪 I watched all the videos, practiced only what was shown… And my confidence was like “I’m a pro now.” Then came the real-world project — just adding event listeners to 4 cards 😅 Suddenly my brain: 💀 “Wait... what is happening?” 💀 “Where did all my JS go?” That day I realized — watching tutorials ≠ learning. Building projects, debugging, and making mistakes — that’s where real confidence comes from 🔥 So, don’t repeat my mistake. 👉 Tutorials give knowledge. 👉 Projects give skill. Build. Break. Debug. Repeat. Do you agree me? #WebDevelopment #FrontendDevelopment #WebDeveloper #JavaScript #HTML #CSS #ReactJS #React #TailwindCSS #Tailwind #Coding #Programming #100DaysOfCode #LearningJourney #ProjectTips #CodeChallenge #LearningToCode #BuildInPublic #CodingTips #CareerGrowth #Innovation #Technology #WebDesign #DevProjects

✨ Day [01] of My Learning Journey ✨ Today, I explored one of the most fundamental yet powerful concepts in JavaScript — Functions 💡 Here’s what I learned: 👉 A function is basically a reusable block of code that performs a specific task. 👉 It helps make code cleaner, modular, and easier to debug. 👉 You can create a function once and call it multiple times — super efficient! For example 👇 function greet(name) { console.log("Hello, " + name + "!"); } greet("Nikki"); // Output: Hello, Nikki! Then I also discovered arrow functions, which are a shorter and more modern way to write functions: const greet = name => console.log("Hello, " + name + "!"); I found this really interesting because arrow functions make the code more concise and look cleaner. 🚀 Small step today — but one more building block towards mastering JavaScript 💻 #90DaysOfCode #javascript #learning #webdevelopment #frontend #functions #growthmindset

As I continue learning JavaScript, I’m diving deeper into its core concepts. Today, I explored Hoisting, and it helped me understand how JavaScript handles code behind the scenes. What I learned about Hoisting: ~JavaScript moves variable and function declarations to the top of their scope before executing the code. This means: ~Functions can be called before they are declared ~Variables are initialized with undefined during the compilation phase ~Understanding execution context is crucial for clean and predictable code Why this concept is important? Hoisting may seem simple, but it forms the foundation of how JavaScript interprets code. It improves my understanding of: ~Execution phases ~Scope behavior ~Memory allocation ~Writing more structured and bug-free code My learning journey I’m currently focusing on strengthening my fundamentals concepts like: ~Hoisting ~Scope ~Closures ~Event loop ~DOM manipulation These basics are helping me build a strong foundation before moving toward frameworks and advanced topics. Every concept I learn brings me closer to writing cleaner, more efficient JavaScript. #JavaScript #LearningJourney #WebDevelopment #ProgrammingBasics #FrontendDeveloper

🚀 Level Up Your JavaScript Game! Mastering JavaScript isn’t just about writing code — it’s about knowing the tools built right into the language 💡 Here’s a quick visual guide to some powerful built-in functions that every developer should know 👇 🧮 Math Functions: Rounding, Random Numbers, Square Roots, and more. 🧵 String Functions: Manipulate text effortlessly with .toUpperCase(), .replace(), and .indexOf(). 📦 Array Functions: Sort, filter, and transform data like a pro with .map(), .filter(), and .reduce(). ⏰ Date Functions: Handle time and dates with ease using .now() and .toISOString(). Whether you’re just starting out or brushing up your skills, mastering these will save time and make your code cleaner, faster, and smarter ⚡ 💬 What’s your most-used JavaScript built-in function? Drop it in the comments 👇 #JavaScript #WebDevelopment #Coding #Frontend #Programming #Developers #ReactJS #100DaysOfCode

Still Writing Plain JavaScript in 2025? Here’s Why TS Changes Everything I’ve been learning TypeScript recently, and it honestly feels like switching from riding a bicycle to driving a car with sensors everywhere. You can still move without it, but the moment you try TS, you wonder why you didn’t start earlier. What surprised me the most is how natural it feels once you get the hang of it. The code makes more sense, the mistakes show up before they become real problems, and your future self ends up way happier. Even simple things like defining the shape of your data suddenly make the whole project feel more stable. In a world where apps are getting bigger and teams are moving faster, TypeScript just takes away the guesswork. It doesn’t change how you write JavaScript, it just guides you with a little extra clarity. If you’re still on the fence in 2025, just try it on a small feature. That was the turning point for me. Once you feel that smooth workflow, it’s hard to go back. What helped you the most when you first touched TypeScript? #typescript #javascript #webdevelopment #frontend #reactjs #programming #developerlife #codingjourney #learninpublic

If anyone is interested in developing their skills in JavaScript, a quick thought based on my experience that might be helpful. 💬 Here are some tips for developing this skill: If anyone is interested in developing their skills in JavaScript, here are a few simple tips that helped me and might help you too: 💡 1. Understand the basics first Learn variables, loops, functions, arrays, and objects. These are the foundation of everything in JavaScript. 💡 2. Practice small projects Start with easy things like a calculator, to-do list, stopwatch, or a color changer. Small projects build confidence fast. 💡 3. Use the browser console Right-click → Inspect → Console. Practice writing small pieces of code and see results instantly. 💡 4. Learn DOM manipulation This helps you make your webpages interactive. (Example: changing text, colors, showing/hiding elements.) 💡 5. Break problems into steps Instead of thinking “how do I build it,” think ➡ “What should happen first?” ➡ “What do I want the code to do next?” 💡 6. Ask questions and experiment Don’t be afraid of errors. Every error is teaching you something. 💡 7. Use online resources YouTube (CodeWithHarry), MDN Docs, W3Schools — all great for beginners. If you're starting out, keep it simple and focus on consistency. A little practice every day makes a huge difference.

📌 Breaking Down JavaScript Events — The Simplified Guide 📢 In JavaScript, an event is a signal that something has happened on your webpage — a click, a keypress, a scroll, or even a page load. 🎯 Here are the core event concepts every developer should master: 🔹 Event Listeners → Use addEventListener() to “listen” for specific actions. 🔸 Mouse Events → click, mouseover, mouseout, dblclick. 🔹 Keyboard Events → keydown, keyup, and handling key codes. 🔸 Event Object → Access details about what triggered the event. 🔹 Input Events → Track user input live while typing. 🔸 Form Submission → Prevent reloads and manage form data efficiently. 🔹 Event Bubbling → Understand how events propagate through the DOM. 🔸 Event Delegation → Handle multiple elements with one listener. 🔹 Window Events → load, resize, scroll, beforeunload. 💡 Pro Tip: Mastering events unlocks the secret to building dynamic, interactive, and user-friendly web experiences. 👉 Question: Which JavaScript event do you use most often in your projects? 👀 Perfect For: ✔️ Self-taught developers ✔️ Bootcamp learners ✔️ Anyone who learns best through code + examples 📌 Swipe through the carousel → 📤 Save for later → 📥 Share it with a fellow learner → ❤️ Like 💬 Comment 📤 Share 🔁 Repost 💌 Save for later Follow ABDUL REHMAN ♾️ For More Usefull Updates🙏🙏 Follow to Learn More: W3Schools.com | JavaScript Mastery #JavaScript #WebDevelopment #FrontendTips #CodingResources #DevCommunity #JSForBeginners #LearnToCode #FrontendDevelopment #ReactJS #CodeNewbie #CheatSheet #SelfTaughtDev #100DaysOfCode #WomenWhoCode #TechContent #Programming #DeveloperCommunity

𝗪𝗵𝗮𝘁 𝗜 𝗗𝗶𝘀𝗰𝗼𝘃𝗲𝗿𝗲𝗱 𝗔𝗳𝘁𝗲𝗿 𝟲 𝗠𝗼𝗻𝘁𝗵𝘀 𝗼𝗳 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗡𝗼𝗻𝘀𝘁𝗼𝗽 🔥 It’s been 6 solid months of focused learning, countless coding hours, and late-night debugging. And honestly, I wouldn’t trade this journey for anything. Over the last couple of days, I’ve been wrapping up my JavaScript learning phase and finally rounding off my toolkit. Looking back, I can proudly say this: JavaScript is no longer a mystery to me, it’s now a tool I can think with. I can now comfortably: • Do Intermediate and Advanced DOM manipulation • Build animated and interactive components • Understand how JavaScript works behind the scenes • Use modern operators and techniques • Write Object Oriented Programs • Work with asynchronous codes and APIs To wrap things up, I dove into how modern JavaScript is used in real-world development — learning about 𝗘𝗦𝟲 𝗺𝗼𝗱𝘂𝗹𝗲𝘀, 𝗡𝗣𝗠, 𝗺𝗼𝗱𝘂𝗹𝗲 𝗯𝘂𝗻𝗱𝗹𝗶𝗻𝗴 𝘄𝗶𝘁𝗵 𝗣𝗮𝗿𝗰𝗲𝗹, 𝗮𝗻𝗱 𝘁𝗿𝗮𝗻𝘀𝗽𝗶𝗹𝗶𝗻𝗴 𝗼𝗿 𝗽𝗼𝗹𝘆𝗳𝗶𝗹𝗹𝗶𝗻𝗴 𝗰𝗼𝗱𝗲 for older browsers. I also explored general 𝗯𝗲𝘀𝘁 𝗽𝗿𝗮𝗰𝘁𝗶𝗰𝗲𝘀 for writing clean, modern, and declarative JavaScript. So, what’s next from here? My plan is simple — to keep building real-world projects with the tools I now have in my toolbox: 𝗛𝗧𝗠𝗟, 𝗖𝗦𝗦, 𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱 𝗖𝗦𝗦, 𝗮𝗻𝗱 𝗩𝗮𝗻𝗶𝗹𝗹𝗮 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝘄𝗶𝘁𝗵 𝗺𝗼𝗱𝘂𝗹𝗲𝘀. And after that… it’s time for 𝗥𝗲𝗮𝗰𝘁.𝗷𝘀 😎 In the coming weeks, I’ll be sharing updates on the projects I build, what I discover along the way, and helpful tips for anyone just starting their own JavaScript journey. Stay tuned! The next phase of this journey is about to get even more exciting! 🚀 #JavaScript #WebDevelopment #FrontendDevelopment #LearningJourney #CodingJourney #ReactJS #SoftwareDevelopment #WebDevCommunity #DevWithYuzStack #100DaysOfCode #CodeNewbie

🚀Day 3 of My JavaScript Learning Journey Today I learned about something that looks simple but actually forms the backbone of how JavaScript handles variables — var, let, and const. Here’s what I understood 👇 🔹var → The old-school way. It’s function-scoped and can be redeclared or updated easily (sometimes too easily — which can cause bugs). 🔹let → The modern and safer option. It’s block-scoped and can be updated but not redeclared in the same scope. 🔹const → As the name says, it’s constant. Once assigned, its value cannot be changed or redeclared. Perfect for things that stay the same. 💡 My takeaway: Use let when the value might change, and const for everything else. Forget var — it belongs in history books now. 😅 Small concept, big impact. These little details are what make JavaScript more predictable and cleaner when we start writing real-world code. ➡️ The error in the image is because I have used the same name for variable in the code again. ➡️ I have used that name again by commenting the previous one. #JavaScript #WebDevelopment #LearningJourney #Frontend

🚀 Understanding map(), filter() & reduce() — finally makes sense 😅 When I first started learning JavaScript, these three functions — map(), filter(), and reduce() — honestly felt like magic spells 🪄 that everyone said were “super important for React.” But for me? Total confusion at first. 😵 Then last night, I found this amazing video that explained everything step-by-step 👇 🎥 https://lnkd.in/gnMXj99Z After watching it, I started writing small code snippets for each function — and that’s when things finally clicked! 💡 Here’s how I understand them now: ✨ map() → transforms each element in an array (like converting all prices into discounts) ✨ filter() → picks only the elements you need (like filtering completed todos) ✨ reduce() → combines everything into one value (like summing up scores) Now I get why everyone calls them must-know functions — once you understand the logic, your JS code becomes cleaner, shorter, and way smarter 💻 If you’re a frontend dev (or learning React), seriously — take an hour, watch a video, and play around with these three. You’ll thank yourself later. 🙌 👉 Also, here’s the official MDN documentation if you want to go deeper: 📘 https://lnkd.in/gPZcKwFX #JavaScript #ReactJS #WebDevelopment #FrontendDev #LearningInPublic #CodingJourney #map #filter #reduce