Fahad Bin Faiz’s Post

🚀 Day 6/90 — Becoming a Job-Ready Frontend Engineer Today I studied one of the most powerful and interview-critical JavaScript concepts: 👉 Closures At first, closures felt abstract. But once I understood lexical scope deeply, everything started making sense. Here’s the core idea: A closure is created when a function remembers and accesses variables from its outer lexical scope — even after the outer function has finished execution. This means: ✔ Functions can “remember” data ✔ Variables can stay alive in memory ✔ We can create private state in JavaScript Example insight: When a function returns another function, the inner function still has access to the outer function’s variables. This concept is heavily used in: • React hooks • Event listeners • setTimeout / async callbacks • Data privacy patterns • Functional programming One powerful realization: JavaScript does not garbage collect variables if they are still being referenced by a closure. Understanding closures completely changed how I see function execution and memory behavior. Strong fundamentals today → advanced React tomorrow. Next: Building a mini project using closures + DOM. #FrontendDevelopment #JavaScript #WebDevelopment #Closures #SoftwareEngineering #ReactJS #NextJS #100DaysOfCode #ProgrammingJourney #RemoteDeveloper.

🚀 Day 4/90 — Becoming a Job-Ready Frontend Engineer. Today I focused on one of the most fundamental building blocks of JavaScript: 👉 Functions & Execution Flow At first, functions look simple — just reusable blocks of code. But today I went deeper into how they actually behave inside the JavaScript engine. Here’s what I explored: 🔹 Function Declaration vs Function Expression 🔹 Why function declarations are fully hoisted 🔹 Why function expressions are NOT callable before initialization 🔹 Arrow functions and modern ES6 syntax 🔹 Parameters vs Arguments 🔹 The importance of the return keyword One important realization: If a function does not explicitly return a value, it automatically returns undefined. Understanding execution flow was even more powerful. When a function is called: • A new Execution Context is created • It gets pushed into the Call Stack • JavaScript executes it line by line • Then it gets removed (LIFO principle) This deeper understanding is crucial for: ✔ Debugging real-world applications ✔ Avoiding unexpected undefined values ✔ Understanding closures and async behavior ✔ Writing predictable React components Strong fundamentals today = clean architecture tomorrow. Next: Scope & Hoisting (one of the most important JS concepts). #FrontendDevelopment #JavaScript #WebDevelopment #ReactJS #NextJS #SoftwareEngineering #100DaysOfCode #ProgrammingJourney #RemoteDeveloper #TechLearning

🚀 Day 1/90 — JavaScript Frontend Engineer Journey Today I officially started my 90-day journey to become a Job-Ready Frontend Engineer. And instead of jumping directly into React or frameworks, I started with the core: 👉 How JavaScript Actually Works Behind the Scenes. Here’s what I learned today: 🔹 JavaScript is single-threaded 🔹 It runs inside an engine like Chrome’s V8 🔹 Every JS program starts with a Global Execution Context 🔹 Execution happens in two phases: 1️⃣ Memory Creation Phase 2️⃣ Code Execution Phase 🔹 Functions are fully hoisted 🔹 Variables declared with var are hoisted and initialized as undefined 🔹 let and const are hoisted but stay inside the Temporal Dead Zone I also deeply understood how the Call Stack works (LIFO principle) and how JavaScript manages function execution internally. This foundation is critical for: Understanding closures Mastering async JavaScript Writing predictable React code Cracking frontend interviews I believe strong fundamentals build strong engineers. 📌 Next: Variables, Data Types & Memory (Stack vs Heap) If you're also learning frontend or switching careers, let’s connect and grow together. #FrontendDevelopment #JavaScript #WebDevelopment #ReactJS #NextJS #100DaysOfCode #SoftwareEngineering #RemoteJobs #SelfLearning #ProgrammingJourney

🚀 Day 7/90 — Becoming a Job-Ready Frontend Engineer Today was not about theory. Today was about building. I created a Smart Counter App using: ✔ JavaScript Closures ✔ DOM Manipulation ✔ Event Listeners ✔ Private State Pattern Instead of using a global variable for the counter, I used a closure to keep the state private. Core idea: A function returns methods (increment, decrement, reset), and the internal count variable remains inaccessible from the outside. This helped me understand: 🔹 How JavaScript preserves variables through closures 🔹 How private state works conceptually 🔹 How event-driven programming updates the UI 🔹 How JavaScript execution connects with real user interaction One key realization: React’s state management concept becomes much easier to understand when you truly grasp closures and function scope. I also extended the project by adding: • A minimum value check • A limit message when the counter reaches max Learning by building hits differently.Create a image for this Linkedin post. Next: Arrays deep dive (map, filter, reduce — essential for React). #FrontendDevelopment #JavaScript #WebDevelopment #Closures #DOMManipulation #SoftwareEngineering #ReactJS #NextJS #100DaysOfCode #ProgrammingJourney #RemoteDeveloper

Frontend looks easy… until you actually start building 😅 At first, it feels like “just HTML, CSS, and JavaScript.” You plan your day: build UI, add styles, add logic — simple, right? But then reality hits… Why is this not centered? Why does it work on one browser but not another? Where did that extra margin come from? And suddenly… debugging becomes your full-time job. That’s the journey of every frontend developer. It’s not just about writing code — it’s about problem-solving, patience, and continuous learning. Every bug you fix teaches you something new. Every layout you struggle with makes you better. And every small success builds your confidence. So if you're in that “confused and frustrated” phase — keep going. Because that’s exactly where real learning happens. 💻 From “It looks easy” → to “I made it work!” #FrontendDevelopment #WebDevelopment #HTML #CSS #JavaScript #CodingJourney #DebuggingLife #LearningByDoing #TechLife

Frontend development has evolved beyond just HTML, CSS, and JavaScript. The expectations have changed, and so must our learning paths. I recently discovered a roadmap that outlines what it takes to become a job-ready frontend engineer in 2026: 🔹 Phase 1: Foundational Mastery - Strong grip on HTML5, CSS (Flexbox, Grid, BEM) - JavaScript fundamentals (closures, hoisting, prototypes) - Deep understanding of browser internals (DOM, Event Loop, rendering) 🔹 Phase 2: Professional Ecosystem - Modern JavaScript (async/await, promises, ESNext) - Frameworks like React + state management (Redux/Zustand) - Tooling: TypeScript, Git, Vite/Webpack, testing (Jest) - Architecture concepts: CSR, SSR, SSG, ISR, PWA What stands out is that it’s not just about learning tools, but understanding how everything connects — from browser internals to production deployment. My takeaway: Frontend today = Engineering + Architecture + Performance + Security. For those preparing for frontend interviews or looking to level up, this roadmap serves as a solid guide to stay focused and avoid feeling overwhelmed. #FrontendDevelopment #WebDevelopment #JavaScript #ReactJS #Programming #SoftwareEngineering #TechCareers #Developers #CodingJourney #FrontendEngineer

🚀 Day 5/90 — Becoming a Job-Ready Frontend Engineer Today I focused on one of the most fundamental (and interview-heavy) JavaScript concepts: 👉 Scope & Hoisting At first, these topics look simple. But when you understand them deeply, you realize how many bugs come from misunderstanding scope behavior. Here’s what I explored: 🔹 Global Scope vs Function Scope vs Block Scope 🔹 Why var is function-scoped (and why it’s risky) 🔹 Why let and const are block-scoped 🔹 What actually happens during the Memory Creation Phase 🔹 How hoisting works internally 🔹 What the Temporal Dead Zone (TDZ) really means 🔹 How the Scope Chain resolves variables One key realization: JavaScript doesn’t “move code up” during hoisting. It allocates memory first, then executes line by line. That small detail changes how you debug real-world applications. Example mindset shift: var → hoisted and initialized as undefined let / const → hoisted but NOT initialized (TDZ) Understanding scope deeply is critical for: ✔ Writing predictable functions ✔ Avoiding accidental globals ✔ Mastering closures ✔ Debugging complex frontend applications Strong fundamentals build strong engineers. Next: Closures — the concept that separates beginners from advanced JavaScript developers. #FrontendDevelopment #JavaScript #WebDevelopment #SoftwareEngineering #ReactJS #NextJS #100DaysOfCode #ProgrammingJourney #RemoteDeveloper #TechCareer

🚀 Mistakes I Made as a Frontend Developer When I started, I focused only on making things work… not on how they should work. Here are some mistakes I made 👇 ❌ Ignoring performance ❌ Writing messy and unstructured code ❌ Not understanding core concepts deeply ❌ Avoiding debugging ❌ Overusing copy-paste from the internet 💡 What I learned ✔ Clean code matters ✔ Performance is important ✔ Understanding > Copying ✔ Debugging is a skill 🔥 Simple Rule Don’t just make it work Make it better 💬 What is one mistake you made as a developer? 🚀 Explaining Frontend in the simplest way #FrontendDevelopment #Angular #WebDevelopment #JavaScript #SoftwareDeveloper #AngularDeveloper

🚀 Day 9/90 — Becoming a Job-Ready Frontend Engineer Today I went deeper into Advanced Array Methods in JavaScript — the kind of concepts that are used daily in React applications and frequently asked in interviews. Focused on: 🔹 sort() — and why it can be dangerous if you don’t use a compare function 🔹 find() — returning the first matching item 🔹 some() — checking if at least one condition passes 🔹 every() — verifying if all elements satisfy a condition One important realization: By default, sort() converts elements to strings before comparing — which can lead to unexpected results. Example: [10, 2, 5].sort() → ❌ Incorrect order Correct approach: array.sort((a, b) => a - b) Another key learning: Understanding the difference between: • find() → returns a single item • filter() → returns a new array • some() → returns boolean (stops early) • every() → returns boolean (stops early) These methods are essential for: ✔ Rendering filtered lists in React ✔ Handling API data ✔ Validating form conditions ✔ Writing clean, functional JavaScript The more I practice arrays, the more I realize frontend engineering is about thinking functionally and avoiding unnecessary mutations. Next: Deep dive into Objects — destructuring, spread operator & immutability. #FrontendDevelopment #JavaScript #WebDevelopment #ReactJS #NextJS #SoftwareEngineering #ProgrammingJourney #100DaysOfCode #RemoteDeveloper #TechCareer

Frontend interviews are no longer just about React. They’re about how deeply you understand JavaScript and the web. Here’s what modern frontend interviews actually cover 👇 🔹 JavaScript Core & Advanced • First-class functions • Execution context & call stack • Hoisting & Temporal Dead Zone (TDZ) • this (regular vs arrow functions) • Currying & pure vs impure functions • Debounce vs throttle • Shallow vs deep copy • undefined vs null, optional chaining, nullish coalescing • Garbage collection & memory management • Event loop, streams & backpressure • Performance pitfalls (e.g. object de-optimization) 🔹 Async & Architecture • Promises & async/await flow • Concurrency handling • Preventing starvation • Task scheduling & execution order 🔹 React & Frontend Fundamentals • JSX & reconciliation • Component lifecycle (actual phases) • Controlled vs uncontrolled components • Error boundaries • Event handling patterns • useEffect behavior & optimization 🔹 Next.js & Backend Awareness • Server-side handling • API methods (GET, POST, PUT, DELETE) • REST structure & optimization thinking 🔹 Problem Solving • Breaking problems step-by-step • Optimization thinking before coding • Handling edge cases 💡 The shift is clear: Frontend interviews are moving from “Can you build UI?” → “Do you understand systems?” If you’re preparing, don’t just focus on frameworks. Focus on how things work under the hood. Which area do you think is the hardest — JavaScript, React, or System Design? 👇 #Frontend #JavaScript #React #NextJS #CodingInterview #SoftwareEngineering