MOCK FRONTEND + NEXT.
JS INTERVIEW: ANSWERS GUIDE
SECTION 1: Intro & Background
Q1. Tell me about yourself and your frontend journey.
I'm Akash, a frontend developer passionate about building responsive and interactive web applications. I
have experience working with HTML, CSS, JavaScript, React, and basic knowledge of Next.js. I've worked on
projects like a BMI calculator, chatbot, food recipe bot, and responsive landing pages. I enjoy designing
interfaces using Figma and enhancing user experience through animations and responsive design.
Q2. What kind of frontend projects have you worked on?
- BMI Calculator (React)
- Chatbot (Vanilla JS)
- Phone landing page (Tailwind CSS)
- Food recipe search bot (JS + API)
- Workshop projects with React & Bootstrap
SECTION 2: HTML, CSS, and Basics
Q3. Difference between id and class in HTML?
id is unique and used to identify a single element. class can be used on multiple elements.
Q4. Explain the CSS Box Model.
It consists of content, padding, border, and margin.
Q5. What are media queries?
They apply CSS styles based on device properties like screen width.
Q6. How do you make a website responsive?
Using media queries, flexible grids, and responsive units.
SECTION 3: JavaScript Essentials
Q7. let vs const vs var?
let: block-scoped; const: block-scoped and immutable; var: function-scoped.
Q8. What is a closure?
A function with access to its outer function scope even after the outer function has closed.
Q9. async/await?
Used to handle Promises in a cleaner, more readable way.
Q10. == vs ===?
== compares value with coercion; === compares value and type strictly.
SECTION 4: React.js
Q11. Functional vs Class components?
Functional components use hooks, Class components use lifecycle methods and state.
Q12. What are hooks?
Functions like useState, useEffect used in functional components.
Q13. useEffect vs useLayoutEffect?
useEffect runs after paint; useLayoutEffect runs before paint.
Q14. Lifting state up?
Move state to a common parent and pass it down via props.
Q15. Why are keys important?
To help React identify elements during reconciliation.
SECTION 5: Next.js
Q16. getStaticProps, getServerSideProps, getStaticPaths?
Static props = build time; server props = request time; paths = dynamic routes.
Q17. Routing in Next.js?
File-based routing from the /pages directory.
Q18. ISR?
Updates static content after deployment without a full rebuild.
Q19. Image optimization in Next.js?
Using next/image for automatic optimization and lazy loading.
Q20. Deploy Next.js?
Via Vercel or Netlify with Git integration.
SECTION 6: Tools & Best Practices
Q21. Global state management?
Context API, Redux, Zustand.
Q22. Linting tools?
ESLint, Prettier.
Q23. Git teamwork?
Feature branches, pull requests, code reviews.
Q24. Lazy loading?
Code/components are loaded only when needed.
Q25. Accessibility?
Semantic HTML, ARIA roles, keyboard navigation.
SECTION 7: Debugging & Optimization
Q26. Debugging tools?
Chrome DevTools, console logs, React DevTools.
Q27. Performance improvements?
Code splitting, memoization, lazy loading.
Q28. Testing tools?
Jest, React Testing Library.
Q29. React.memo/useMemo?
Prevent unnecessary renders by memoizing components/values.
Q30. Error handling?
try/catch and Error Boundaries.
SECTION 8: Behavioral
Q31. Project challenge?
API response changes solved with wrapper functions.
Q32. What do you want in your next role?
Learning, modern tools, real-world contributions.
Q33. Stay updated?
Follow blogs, YouTube, build side projects.
Q34. Handling feedback?
Accept and implement suggestions to grow.
Q35. Why should we hire you?
Passionate, quick learner, and frontend project experience.
