01 Frontend Questions

Frontend interviews me aksar basics aur tricky concepts pooche jate hain. Yahan kuch common sawal hain.

HTML & CSS 🎨

Q1: Semantic HTML kya hai aur kyun zaroori hai?

Ans: Semantic tags (jaise <header>, <article>, <footer>) browser aur developer dono ko batate hain ki content kya hai.

• SEO: Google content achi tarah samajh pata hai.
• Accessibility: Screen readers sahi se navigate kar pate hain.

Q2: visibility: hidden vs display: none me kya farak hai?

• display: none: Element gayab ho jata hai aur space bhi chhod deta hai.
• visibility: hidden: Element dikhta nahi par apni jagah (space) gher kar rakhta hai.

Q3: Box Model explain karein.

Har element ek dabba hai:

1. Content: Asli maal.
2. Padding: Content aur border ke beech ki jagah.
3. Border: Deewar.
4. Margin: Deewar ke bahar ki jagah (doosron se doori).

Q4: Bootstrap vs Tailwind CSS me kya choose karoge?

• Bootstrap: Agar project jaldi khatam karna hai aur design customization kam chahiye (e.g., Admin Panel).
• Tailwind: Agar unique design chahiye, file size kam rakhna hai, aur long-term scalability chahiye. Trend: Aajkal Tailwind zyada popular hai.

---

JavaScript (Logic) 🧠

Q4: Hoisting kya hoti hai?

JavaScript variables aur functions ko code run hone se pehle top par le jata hai.

• var hoisting ke baad undefined deta hai.
• let aur const hoisting ke baad “ReferenceError” dete hain (Temporal Dead Zone).

Q5: Closures kya hain? Example de.

Jab ek function apne lexical scope (bahar wale function) ke variables yaad rakhta hai, bhale hi bahar wala function return ho chuka ho. Example: Counter function jo count variable ko private rakhta hai.

Q6: == aur === me kya antar hai?

• == (Loose Equality): Sirf value check karta hai (Type convert kar deta hai). 5 == "5" (True).
• === (Strict Equality): Value + Type dono check karta hai. 5 === "5" (False).

Q7: Event Loop kaise kaam karta hai?

JS single threaded hai par Event Loop usse non-blocking banata hai.

1. Sync code Call Stack me chalta hai.
2. Async code (setTimeout, Fetch) Web API se Callback Queue me jata hai.
3. Jab Stack khali hota hai, Event Loop Queue se task utha kar Stack me daalta hai.

---

React (The Framework) ⚛️

Q8: Virtual DOM kya hai?

Ye Real DOM ki ek copy hai. Jab state change hoti hai:

1. React naya Virtual DOM banata hai.
2. Purane Virtual DOM se compare karta hai (Diffing).
3. Sirf changed hissa Real DOM me update karta hai (Reconciliation). Isliye React fast hai.

Q9: useEffect hook ka use kya hai?

Side effects handle karne ke liye (API calls, DOM updates).

• useEffect(() => {}): Har render par chalega.
• useEffect(() => {}, []): Sirf mount par chalega (ComponentDidMount).
• useEffect(() => {}, [count]): Jab count change hoga tab chalega.

Q10: Prop Drilling kya hai aur kaise solve karein?

Jab data Parent -> Child -> GrandChild bhejna ho par beech wale ko zaroorat na ho. Solution: Context API ya Redux use karein.

---

Tip: Interviewer ko hamesha example ke saath samjhayein! 💡