Learning from a Failed Project: createElement() and Modular JavaScript

🚀 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

𝟭𝟱 𝗛𝗼𝘂𝗿𝘀 𝗜𝗻: Part 2 Complete! Mastering the DOM and Browser Interactivity 🚀 I'm thrilled to announce I've just completed the 7-hour "JavaScript Learn Everything Part 2" video from the Sheryians Coding School YouTube channel! A huge thank you to Harsh Vandana Sharma for another incredibly detailed marathon session. This part was all about bridging the gap between JavaScript logic and the live web page. We've officially moved from the console to creating dynamic, interactive user experiences. Here's a summary of the critical topics we mastered: 𝗧𝗵𝗲 𝗗𝗢𝗠 (𝗗𝗼𝗰𝘂𝗺𝗲𝗻𝘁 𝗢𝗯𝗷𝗲𝗰𝘁 𝗠𝗼𝗱𝗲𝗹): Finally, we learned how to "talk" to the website! We covered selecting elements, traversing the DOM tree, and dynamically adding, removing, or changing any HTML/CSS on the page. 𝗘𝘃𝗲𝗻𝘁𝘀 & 𝗘𝘃𝗲𝗻𝘁 𝗛𝗮𝗻𝗱𝗹𝗶𝗻𝗴: This is where the magic happens. We learned how to listen and react to user actions like clicks, scrolls, keypresses, and form submissions using event listeners. 𝗙𝗼𝗿𝗺𝘀 & 𝗙𝗼𝗿𝗺 𝗩𝗮𝗹𝗶𝗱𝗮𝘁𝗶𝗼𝗻: We put our DOM and event skills to practical use by learning to capture user input from forms and validate it in real-time, ensuring data is clean before it's ever submitted. 𝗪𝗲𝗯 𝗦𝘁𝗼𝗿𝗮𝗴𝗲 (𝗹𝗼𝗰𝗮𝗹𝗦𝘁𝗼𝗿𝗮𝗴𝗲, 𝘀𝗲𝘀𝘀𝗶𝗼𝗻𝗦𝘁𝗼𝗿𝗮𝗴𝗲, & 𝗖𝗼𝗼𝗸𝗶𝗲𝘀): A crucial deep dive into how browsers "remember" data. We learned the differences between these methods and when to use them to save user preferences, tokens, or session info. 𝗧𝗶𝗺𝗲𝗿𝘀 & 𝗜𝗻𝘁𝗲𝗿𝘃𝗮𝗹𝘀: A deeper look at asynchronous JavaScript with setTimeout and setInterval for timing-based events. 𝗕𝗼𝗻𝘂𝘀 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗲 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻𝘀: The session wrapped with a ton of practical questions that helped solidify all these new concepts. Completing this section feels like a huge level-up. I'm no longer just writing logic; I'm building interactive applications. Can't wait for Part 3! #JavaScript #DOM #WebDevelopment #Frontend #CodingJourney #AIpoweredCohort #SheryiansCodingSchool #HarshVandanSharma #LocalStorage #EventHandling #WebDev

🚀 Day 26 of my Web Dev Journey Today at Cohort 2.0 (Sheryians Coding School), Harsh Vandana Sharma bhaiya introduced us to the history and basics of JavaScript, the language that powers the web 🌐 Here’s what I learned 👇 🧠 A little history • JavaScript was created by Brendan Eich while working at Netscape. • Amazingly, he built it in just 15-16 days 😲 • But because it was made so quickly, it had many issues and bugs, which were later fixed through multiple versions. • The biggest evolution came with ES6 (ECMAScript 6), a version that completely changed JS and made it much more powerful and modern. 💻 Why JavaScript matters • JavaScript (JS) is a scripting language, a way for humans to communicate with computers. • It brings life to websites, adding animations, interactions, and validations. • Practically every type of engagement on a webpage uses JavaScript. How JS runs • JavaScript was originally built to run inside browsers. • We can link JS files to HTML using the <script> tag. • You can also run JS directly in the browser console using Ctrl + Shift + I. Some basics we covered today: • Keywords: var, let, const • Console methods: console.log() → to print, console.error() → to show an error, console.warn() → to show a warning • User interaction:  prompt() → to take user input, alert() → to show an alert message Strings and their methods: • Anything inside quotes is a string. • Common string methods: .slice(), .replace(), .split(), .includes(), and template literals (backticks `, also known as template strings). Every session adds a new layer of understanding, and today was all about building the foundation for JavaScript 💪 Excited to dive deeper into this amazing language in the upcoming days! Stay tuned 🔥 ❤️ #WebDevelopment #Cohort2 #SheriansCodingSchool #LearningInPublic #HTML #CSS #FrontendDevelopment #BackendDevelopment #FullStackDevelopment #LearningJourney

🧩 𝗙𝗿𝗼𝗺 𝗩𝗮𝗻𝗶𝗹𝗹𝗮 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝘁𝗼 𝗥𝗲𝗮𝗰𝘁: 𝗠𝘆 𝗧𝘂𝗿𝗻𝗶𝗻𝗴 𝗣𝗼𝗶𝗻𝘁 𝗮𝘀 𝗮 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿 When I started learning JavaScript, I never realized how much I was already building framework-like systems, modular codebases with PubSub architecture, reusable components, and Webpack bundling. Now that I’m approaching the React section of The Odin Project, everything is starting to make sense. It feels like the path I’ve been walking was already leading here. React doesn’t feel foreign, it feels like a familiar idea, but with a cleaner, smarter structure. Here’s how I understand it so far 👇 𝗟𝗶𝗯𝗿𝗮𝗿𝘆: My imported/exported JavaScript components, I decide when and where to use them. 𝗙𝗿𝗮𝗺𝗲𝘄𝗼𝗿𝗸: A system that runs my code for me (it calls my callbacks). 𝗥𝗲𝗮𝗰𝘁: A JavaScript library that gives framework-like structure, but still lets me stay in control. So, React isn’t magic. It’s just ES6+ JavaScript in disguise, automating what I used to handle manually, like DOM updates and state management. And realizing that has made everything, from frameworks and libraries to backend logic, click in a deeper way. 📈 Above picture is my GitHub growth so far. Each commit represents a new discovery, from raw JS logic to component-based architecture, and now, stepping into React feels like the next natural chapter. #JavaScript #React #WebDevelopment #TheOdinProject #Frontend #LearningInPublic #GitHubJourney

Learning React can feel overwhelming with all the new terms, patterns, and frameworks floating around. That's why I appreciated stumbling upon this comprehensive React handbook that cuts through the noise. What I found most valuable is how it focuses purely on React's core concepts—no unnecessary frameworks or distractions. Once you grasp these fundamentals, you gain the confidence to build anything from small components to full-stack applications. The guide breaks down complex topics like JSX, hooks, and rendering into digestible sections with practical examples. I particularly liked the clear explanations of state vs refs vs variables—a common point of confusion for many developers. As someone who works with React regularly, I still found some useful reminders about best practices like: - Using stable IDs for keys when rendering lists - Understanding React's component lifecycle (trigger → render → commit → paint) - Choosing the right styling approach for your project Whether you're just starting with React or looking to strengthen your fundamentals, this handbook provides a solid foundation. It's one of those resources that makes you think, "Why didn't I understand this concept this way before?" #React #JavaScript #WebDevelopment #Frontend #Programming #Developer

I was creating a document — a guide to learn JavaScript from zero (like literally 0, the first question in the document is “What is a computer?”). So I wrote a few questions and answers, and then I realized — wait, let’s try something else, not just a document. I chatted with #GPT for a few minutes and got the list of all the topics and questions we need. Now it’s time to sail with Windsurf. Prompt: My friend, you are an absolute web development expert, especially in React SPA. You have access to edit/modify files in the current workspace only. You can install dependencies but cannot run any other commands. I want your help to build an 8-bit retro gaming-style website to learn JavaScript. What I need: Levels: Each section is a level, like “Basics of Computer,” “Basics of Programming.” Topics: Divide each level into a few topics. Lessons: Each topic has a few questions. Quizzes: After completing a topic, there should be a quiz to test the learning. XP: If the user gives the right answer to a question, they earn XP. Code Editor: To test JS code. Challenge: Questions to practice — users can buy questions with XP. Stats: To show all progress. Use local storage to save progress. Use this data (list of questions). Before proceeding, show me a plan. And that’s it, now wait. Make sure to use the 3x model for extra overthinking 😉 Once the plan is ready, review it and build. You can visit the guide here: https://lnkd.in/g5RWuHJ3 Test it and help me make it better. I’m open to feedback and improvements we can bring to this SPA. #JavaScript #CodingJourney #GamifiedLearning #JavaScriptForBeginners #LearnToCode #CodingFun #RetroGaming #OpenSourceProject #SideProject #SPABuilder #Windsurf #DeveloperCommunity #BuildInPublic

🌟 Day 2 of DOM (Document Object Model) in JavaScript 🌟 Today marks the second day of my DOM learning journey, and it was filled with some really fun and interactive tasks that helped me understand how JavaScript can dynamically change the behavior of web pages 🎯 💡 Here’s what I practiced today: 🔹 Changing Background Color: I created multiple boxes and added functionality so that whenever I click on a specific box, its background color changes instantly. It helped me understand how to use event listeners and manipulate styles through JavaScript. 🔹 Counter Project: I built a simple counter app that increases, decreases, and resets numbers on button clicks. Through this, I got a clear idea of how to handle DOM events, update values, and reflect real-time changes on the screen. 🔹 Image Switch Task: Another interesting task I completed was creating a feature where one image changes to another when an event (like hover or click) occurs. This was a great way to explore image manipulation and conditional logic in the DOM. Each small project strengthened my confidence in handling the DOM and made me realize how powerful JavaScript can be when it comes to making webpages interactive ✨ I’ve uploaded all these tasks and practice files on my GitHub for reference 👇 🔗 GitHub Repository: https://lnkd.in/devrWxM3 #JavaScript #DOM #WebDevelopment #Frontend #CodingJourney #LearningInPublic #GitHub #DeveloperJourney 🚀

Excited to announce: I’ve published a new open-source collection “JavaScript Basics for Web Dev” (GitHub: https://lnkd.in/gadEZAZ4) designed for beginners looking to build a strong foundation in web development with JavaScript. 📚 What you’ll find in this repo: 1) A curated set of small, focused examples and exercises covering key concepts: variables, data types, functions, loops, conditionals, arrays, DOM manipulation, events, async/await, error handling, classes and more. 2) A clean folder structure organised by topic (e.g., 1.Js.introduction, 8.Js.DOM, 13.Js.Async-Await-FetchingAPI, etc.). 3) Practical HTML/CSS/JS runnable demos so you can open index.html and experiment in the browser immediately. 4) Guidelines for contributions—if you’d like to add new examples or refine existing ones, everyone is welcome! GitHub 🎯 Who it’s for: 1) Students, self-taught developers, boot-camp attendees, anyone wanting to strengthen their JavaScript fundamentals. 2) Trainers or mentors seeking a ready-to-use demo repository for teaching. 3) Developers preparing to move from “I know a little JavaScript” to “I really understand JavaScript and can apply it confidently”. ✅ Why I built this: 1) I saw that many beginners struggle with bouncing between large tutorials or frameworks before mastering the core language itself. 2)By focusing on foundational concepts in bite-sized, runnable form, I hoped to bridge that gap and make learning JavaScript approachable and concrete. 3)The repository is released with an MIT license — feel free to fork, adapt, teach, and share. 🔁 How you can help: ⭐ Star the repo if you find it useful — it helps visibility. 🧠 Fork + modify examples or add your own topic (e.g., “Web APIs”, “Testing with JS”, etc.). 💬 Drop feedback / suggestions via issues or PRs. 📢 Share with peers, coding groups or during teaching sessions. Thanks for reading — I hope this repository becomes a helpful resource on your JavaScript journey or teaching toolkit. #javascript #webdevelopment #opensource #learntocode #frontend #education

📌 Day 24 of My JavaScript Brush-up Series Past Days Recap! 🎯 This past days was all about connecting the dots, moving from deeper JavaScript concepts to how they fit together in real-world scenarios. 👉🏿 Topics I Covered Day 20: Error handling (try/catch, custom errors) Day 21: DOM basics refresher Day 22: ES6+ features (?., ??, and more) Day 23: Modules (import / export) Each topic built on the last, from handling bugs gracefully to writing cleaner, modular, modern JS code. 💡 Reflection This week made me appreciate how modern JavaScript is designed to reduce friction, fewer bugs, cleaner syntax, and better structure. It’s not just about writing code that works, but code that’s maintainable and scalable. 🧩 Mini-Project Idea for Practice I’ll be wrapping up the week with a small hands-on project something simple but practical to tie everything together. 💭 Idea: A JavaScript calculator, to-do app, or budget tracker snippet something that uses functions, DOM manipulation, modules, and a bit of async logic. The goal isn’t to make it fancy, but to apply everything I’ve refreshed so far in a structured, working project. 📸 I’ve attached a visual recap of Past Days concepts + the project idea outline 👇🏿 👉🏿 Question: If you had to pick one, which would you build: a calculator, a to-do app, or a budget tracker? #JavaScript #LearningInPublic #DaysOfCode #FrontendDevelopment #WebDevelopment #BuildInPublic #MiniProject