Frontend Interview Questions: JavaScript Fundamentals and SEO

💊Day 4 of 30 — Next.js Interview Prep React Server Components vs Client Components — What Every Developer Must Know This is one of the most asked questions in Next.js interviews right now. Let's break it down. 👇 🖥️ Server Components (default in Next.js App Router) ✅ Render on the server ✅ Zero JavaScript sent to the browser ✅ Can directly access databases, APIs, file system ✅ Better performance & SEO ❌ Cannot use hooks (useState, useEffect) ❌ Cannot handle user interactions // app/products/page.tsx // This is a Server Component by default async function ProductsPage() { const data = await fetch('https://lnkd.in/dcfDv5pk') const products = await data.json() return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul> } 💻 Client Components ✅ Run in the browser ✅ Support hooks & interactivity ✅ Handle events, state, animations ❌ Larger bundle size ❌ Cannot directly fetch from DB 'use client' // 👈 This directive makes it a Client Component import { useState } from 'react' function Counter() { const [count, setCount] = useState(0) return <button onClick={() => setCount(count + 1)}>Count: {count}</button> } 🧠 The Golden Rule: Use Server Components by default. Only add 'use client' when you need interactivity or browser APIs. 💡 Interview Tip: If an interviewer asks "When would you choose one over the other?" — mention data fetching + SEO = Server, forms + state + events = Client. That answer alone sets you apart. 📌 Follow for Day 5 tomorrow! ♻️ Repost if this helped someone on their job hunt. #NextJS #ReactJS #WebDevelopment #FrontendDeveloper #JavaScriptInterview #30DaysOfNextJS #PakistaniDevelopers

Day 2/30 — Next.js Interview Prep 🚀 Today's topic: File-based Routing & the App Router One of the most common Next.js interview questions: 👉 "What is the difference between the Pages Router and the App Router?" Here's what you need to know: Pages Router (legacy) Files in /pages → automatically become routes pages/about.js → /about Uses getServerSideProps, getStaticProps for data fetching App Router (Next.js 13+) Files live inside /app directory Uses a page.tsx file convention inside folders app/about/page.tsx → /about Built on React Server Components by default Data fetching happens directly inside components using async/await Bonus point interviewers love: In the App Router, every component is a Server Component by default. You opt into client-side rendering explicitly with "use client" at the top of the file. This is a fundamental shift — knowing why this matters (performance, bundle size, SEO) will set you apart from candidates who just memorized the syntax. Day 1 ✅ | Day 2 ✅ | 28 more to go 💪 Are you also preparing for Next.js interviews? Drop a 🙋 below — let's grow together. #NextJS #WebDevelopment #JavaScript #FrontendDeveloper #InterviewPrep #100DaysOfCode #LearningInPublic

🚀 Frontend Interview Questions – Day 3 Continuing my daily learning and sharing some important frontend interview questions. 1️⃣ What is the difference between call(), apply(), and bind() in JavaScript? call() invokes a function immediately with arguments passed individually. apply() invokes a function immediately but arguments are passed as an array. bind() returns a new function with a bound context but does not execute immediately. 2️⃣ What is the this keyword in JavaScript? The this keyword refers to the object that is executing the current function. Its value depends on how the function is called. 3️⃣ What is useEffect in React? useEffect is a React Hook used to perform side effects such as API calls, event listeners, and DOM updates inside functional components. Example: useEffect(() => { fetchData(); }, []); 4️⃣ What is the difference between state and props in React? Props are read-only data passed from parent to child components. State is local data managed within a component and can change over time. 5️⃣ What is CORS in web development? CORS (Cross-Origin Resource Sharing) is a security mechanism that allows or restricts resources requested from another domain. 📌 Practicing and sharing frontend interview concepts daily. Frontend Developer with 6+ years experience in React, JavaScript, and Next.js. Open to new opportunities. #frontenddeveloper #javascript #reactjs #codinginterview #webdevelopment

🚀 My First Round Interview Experience (JavaScript Role) at a Product-Based Company I recently appeared for the first technical round for a JavaScript-focused role, and here’s how the experience went 👇 💻 Round Overview: ⏱️ Duration: ~60 minutes 🌐 Mode: Online (Live Coding + Discussion) 🎯 Focus: JavaScript + DSA + Problem Solving 🧠 Questions Asked: 👉 1️⃣ JavaScript Coding Problem 💡 Implement Debounce Function 🔁 Follow-up: Difference between debounce vs throttle 🌍 Real-world use cases (search input, API calls) 👉 2️⃣ DSA Problem (JavaScript) 🔢 Two Sum Problem ⚡ Expected: Optimized solution using Map (O(n)) 🧪 Explained edge cases clearly 👉 3️⃣ Core JavaScript Concepts 📦 var vs let vs const 🔒 Closures with example 🔄 Event Loop explanation ⏳ Promises & async/await 👉 4️⃣ Output-Based Questions 🧩 Predict output of async code 🎯 Scope-based tricky questions 👉 5️⃣ Browser & Web Basics 🚀 Hoisting ⚖️ == vs === 🧭 this keyword behavior 👉 6️⃣ Resume-Based Questions 📁 Explained one project in detail ⚙️ Handling async operations 🚀 Performance optimizations 👉 7️⃣ Behavioral Questions 🙋 Tell me about yourself 💭 Why JavaScript? 🐞 How do you debug issues? ⚡ What I Learned: ✅ Strong JavaScript fundamentals are a must 🗣️ Communication matters as much as coding 🧠 Real-world examples give an edge 🎯 Output questions test deep understanding 🔥 Tips for JS Developers: 📚 Master closures, promises, event loop 💻 Practice DSA in JavaScript 🔍 Focus on async behavior 🗣️ Always think aloud 💬 Final Thought: It’s not about knowing everything — it’s about showing how well you understand the basics and apply them. If you're preparing for JavaScript roles, keep going 💪 Let’s grow together! #JavaScript #FrontendDeveloper #WebDevelopment #InterviewExperience #ProductBasedCompanies #CodingInterview #AsyncJavaScript #TechCareers #Developers #CareerGrowth #InterviewPrep

If you're preparing for frontend interviews, these 30 concepts are non-negotiable. After 10 years in frontend, sitting on both sides of the table, I’ve seen one thing consistently: Frameworks change. Tools evolve. But these concepts? They keep showing up in interviews again and again. Whether you’re applying for a React role or a general frontend position, mastering these will set you apart, not because they’re rare, but because very few candidates can explain them deeply. Here are 30 foundational concepts you absolutely need to know before your next interview: Event loop and call stack Microtasks vs macrotasks Closures and lexical scoping Hoisting and the temporal dead zone The this keyword and how it changes in arrow vs regular functions Object references vs primitive comparisons Prototypal inheritance in JavaScript Shallow vs deep copy Debounce vs throttle and where to use them Implicit vs explicit type coercion Truthy and falsy values (and equality quirks) Difference between == and === call, apply, and bind Event delegation and bubbling typeof, instanceof, and type checking Spread vs rest operators map, filter, reduce — and when not to use them Currying and partial application async/await vs Promises vs callbacks Error handling in async JavaScript Critical rendering path and what blocks it Repaint vs reflow (and avoiding layout thrashing) DNS resolution, TCP handshake, TLS, request lifecycle How browsers render HTML, CSS, JS Preload, prefetch, and lazy loading Service workers and caching strategies CORS, preflight requests, and SameSite cookies Web storage APIs: localStorage, sessionStorage, cookies Accessibility best practices (ARIA, focus, semantic HTML) Responsive design principles (mobile-first, media queries, viewport units) If you can walk into an interview and confidently explain these, you’ll stand out immediately. And if you want a comprehensive list of real interview questions that cover these concepts (and plenty more), I put together: 👉Grab the eBook here: https://lnkd.in/g9hdUJkf 📘 Frontend Interview Blueprint Part 1: 300+ JavaScript & ReactJS questions (Easy → Medium → Hard, both coding + concepts) Part 2: Frontend System Design (HLD + LLD) asked in product companies

🔥 Top HTML Interview Questions You MUST Know (with Answers) If you're preparing for frontend interviews, these HTML fundamentals can make or break your selection 👇 💡 1. What is <!DOCTYPE html> in HTML5? It declares the document type and ensures the browser renders the page in standards mode. 💡 2. Difference between <div> and <span> <div> → Block-level (takes full width) <span> → Inline (takes only required space) 💡 3. Semantic vs Non-Semantic Tags Semantic: <header>, <article>, <footer> → meaningful structure Non-semantic: <div>, <span> → no meaning 👉 Improves SEO + accessibility 💡 4. HTML vs HTML5 HTML5 adds: <video>, <audio>, <canvas> Better APIs (Geolocation, Local Storage) Cleaner, simpler syntax 💡 5. What is <iframe>? Used to embed another webpage inside the current page. Example: YouTube videos, maps. 💡 6. Formatting Tags in HTML <b>, <strong>, <i>, <em>, <mark>, <small> 👉 Used to style or emphasize text 💡 7. <b> vs <strong> <b> → Just bold text <strong> → Important content (SEO + accessibility impact) 💡 8. Viewport Meta Tag HTML <meta name="viewport" content="width=device-width, initial-scale=1.0"> 👉 Makes your website responsive on mobile devices 💡 9. What is an Attribute in HTML? Extra information added to tags Example: HTML <a href="https://example.com">Link</a> 💡 10. Block vs Inline Elements Block: <div>, <p> → New line, full width Inline: <span>, <a> → Same line 🚀 Pro Tip: Most developers skip basics — but interviews don’t. Master fundamentals → Crack interviews faster 💯 🔗 Want 1:1 interview prep & mock sessions? 👉 https://lnkd.in/dBmB5zdi⁠� #HTML #Frontend #WebDevelopment #Angular #JavaScript #InterviewPreparation #CodingJobs

You don’t need a million-user product on your resume to clear a #React interview. If you’ve built even a small app — managed state, passed props, handled clicks, or used a couple of hooks — you already have the foundation recruiters are looking for. What really matters? Clear concepts. Clean thinking. Confident explanations. Here’s a fresh roadmap of topics interviewers love to explore 👇 🔹 Foundation Round Start strong with the core ideas: What problem does React solve? How does component-based architecture work? Difference between class components and modern functional components Understanding props vs local state JSX and why it exists How the Virtual DOM improves performance Why “key” is important while rendering lists Handling user interactions Default values for props Showing UI conditionally If you can explain these with small examples, you’re already ahead of many candidates. 🔹 Concept + Application Round This is where depth starts showing: useState and useEffect — lifecycle in functional components Controlled vs uncontrolled form elements Client-side routing using React Router Context API compared to Redux (when to use what) Prop drilling and cleaner alternatives React.memo and preventing unnecessary re-renders useMemo vs useCallback (real difference, not textbook definition) Higher-Order Components Form handling patterns in real apps Interviewers want to see: Can you build maintainable apps? 🔹 Advanced Understanding Round This is where senior-level clarity shines: Why components re-render and how to optimize Reconciliation process How the diffing algorithm works Code splitting with React.lazy and Suspense Error Boundaries Authentication flows and protected routes Render Props vs HOCs Server-Side Rendering vs Client-Side Rendering React Fiber & concurrent rendering Testing React components effectively You don’t need to memorize everything. But you should understand why React behaves the way it does. 💡 Pro Tip: Don’t just read answers. Build tiny demos. Break things. Fix them. That’s how concepts stick. Keep improving. Keep shipping projects. Your consistency will do more than any crash course ever will. 🚀 If you’re navigating your tech journey and feel stuck, you’re not alone. Ask questions. Grow publicly. Stay curious. Also, I and Ribhu Mukherjee have authored in depth 0 to DREAM placement book, from our experience with expert video resources. Check it out here: https://lnkd.in/gJtXjkBP #ReactJS #FrontendDeveloper #WebDevelopment #JavaScript #TechCareers #CodingInterview #SoftwareEngineering

🚀 Senior Frontend Interview? Quick Revision Checklist (HTML, CSS, JS/TS) If you’re preparing for a Senior Frontend interview, don’t just revise React hooks or the latest framework trend. Go back to the fundamentals of the web. Because in senior interviews, the real question is: Do you understand how the web actually works? Here’s a quick refresh checklist 👇 ⸻ 🟠 HTML (Core Concepts) ✔ Difference between semantic vs non-semantic elements ✔ How forms actually submit (default button type?) ✔ Inline vs block vs inline-block ✔ Accessibility basics (labels, alt, roles, aria attributes) ✔ What happens when you nest interactive elements ✔ How the browser parses HTML (DOM construction) ✔ defer vs async in script loading ✔ Why DOM size impacts performance If you can’t explain it simply, revisit it. ⸻ 🔵 CSS (Frequently Asked at Senior Level) ✔ Specificity calculation ✔ Positioning: relative vs absolute vs fixed vs sticky ✔ Flexbox alignment rules (main axis vs cross axis) ✔ Grid vs Flexbox use cases ✔ Reflow vs Repaint vs Composite ✔ Stacking context & z-index ✔ Responsive units (rem, em, %, vh, vw) ✔ contain, will-change and performance hints ✔ How browsers calculate layout Bonus question interviewers love: Why does transform not trigger layout? ⸻ 🟡 JavaScript (Must Be Crystal Clear) ✔ Closures (real-world examples) ✔ Event loop (microtask vs macrotask) ✔ Execution context & call stack ✔ this keyword behavior ✔ Prototypal inheritance ✔ Shallow vs deep copy ✔ Debounce vs throttle ✔ Promises vs async/await internals ✔ Memory leaks in frontend apps ✔ How garbage collection works Senior tip: If you can draw the event loop on a whiteboard, you’re doing well. ⸻ 🟢 TypeScript (Expected at Senior Level) ✔ Generics ✔ Utility types (Partial, Pick, Omit, Record) ✔ Type vs Interface ✔ Union vs Intersection ✔ Type narrowing ✔ Mapped types ✔ Discriminated unions ✔ Why "any" is dangerous Bonus: Explain how TypeScript improves large-scale frontend architecture. ⸻ 🤖 AI Reality Check Today everyone is building AI features. But AI can generate React components. It cannot fix a developer who doesn’t understand the event loop. Even AI tools like Copilot still depend on developers who understand the fundamentals. ⸻ 😅 Funny Reality Junior Dev: “I know 25 React hooks.” Senior Dev: “Cool. But why is my div overflowing?” ⸻ 💡 Reality Check Senior interviews don’t test: ❌ How many frameworks you know ❌ How fast you can write a hook They test: ✅ How well you understand the web ✅ How you debug complex problems ✅ How you design scalable frontend systems Framework knowledge gets you shortlisted. Fundamentals get you selected. Revisit the basics. They win interviews. 🚀 ⸻ #FrontendDevelopment #JavaScript #TypeScript #WebDevelopment #FrontendEngineer #SoftwareEngineering #InterviewPrep #AIinTech

🧑💻 JavaScript Interview Prep: The Questions That Actually Matter Just wrapped up a series of JS interviews — here are the most frequently asked questions that separate "familiar" from "fluent." Save this for your next round! 👇 --- 🔹 Core Concepts 1. Hoisting – What gets hoisted? Variables (var vs let/const) vs function declarations. 2. Closures – Can you explain them and give a real-world use case? 3. Event Loop – How does async JavaScript work under the hood? (Call stack, Web APIs, task queue) 4. this binding – How does this behave in arrow functions vs regular functions? In event handlers? 5. Prototypes & Inheritance – What's the difference between classical and prototypal inheritance? 🔹 Async JavaScript 1. Promises – Implement Promise.all, Promise.race, or a simple sleep() function. 2. Async/Await – How would you handle errors? (try/catch vs .catch()) 3. Callbacks – What is callback hell and how do you avoid it? 🔹 Functional & Array Methods 1. map, filter, reduce – When to use each. Bonus: chain them. 2. Deep vs Shallow Copy – How to clone an object/array without mutating the original. 3. Immutability – Why does it matter in React/state management? 🔹 DOM & Browser APIs 1. Event Delegation – How does it work and why use it? 2. Debouncing vs Throttling – Implement a simple debounce function. 3. localStorage vs sessionStorage vs cookies – Key differences. 🔹 Tricky Ones 1. == vs === – When would == be acceptable? (Spoiler: rarely.) 2. null vs undefined vs undeclared – How to check for each. 3. Currying – Write a sum(1)(2)(3) function. --- 💡 Pro tip: Don't just memorize — understand the why. Interviewers are looking for problem-solving ability, not just syntax recall. What’s one JS question that always shows up in your interviews? Drop it in the comments 👇 #JavaScript #FrontendInterview #WebDevelopment #CodingInterview #JS

Frontend Interview Questions: 1. How to improve SEO in a plain HTML/CSS application? 2. How to improve SEO in a React application? 3. Different data types in JavaScript. 4. Different ways of declaring variables in JS. • Which variables are hoisted? 5. Explain closures. • What happens with hoisting inside a closure? 6. Different ways to declare functions in JavaScript. 7. Explain debouncing and throttling. 8. What will be the order of execution? • console.log • setTimeout • Promise • console.log 9. How would you load or optimize a large page in React? 💡 Key Takeaways: 1. Strong JavaScript fundamentals are non-negotiable. 2. Understanding the event loop (microtasks vs macrotasks) is very important. 3. SEO knowledge is expected even for frontend-heavy roles. 4. Performance optimization in React (lazy loading, code splitting, memoization, virtualization, etc.) is frequently discussed. 5. Interviewers care about why you choose an approach, not just definitions. connect 1:1 on topmate: https://lnkd.in/gkhyGGf7