Front-end and web developer interview questions and answers
Front-end interviews cover HTML, CSS, JavaScript and usually React. Expect to build a small component or fix a layout live.
12 questions. Read each one, start the timer and answer out loud as if you were in the room, then open the tip. Nothing is recorded.
What is the CSS box model?
What a good answer covers
Content, padding, border and margin. box-sizing: border-box includes padding and border in the width.
Flexbox or Grid: when do you use each?
What a good answer covers
Flexbox for one direction, like a row of buttons. Grid for two-dimensional layouts like a page or a card grid.
How do you make a site responsive?
What a good answer covers
Mobile first, flexible widths, media queries and responsive images.
What is the difference between let, const and var?
What a good answer covers
let and const are block-scoped; const can’t be reassigned. var is function-scoped and hoisted, so avoid it.
What is the difference between == and === in JavaScript?
What a good answer covers
== converts types before comparing; === does not. Use ===.
Explain promises and async/await.
What a good answer covers
A promise is a future result. async/await lets you write asynchronous code that reads top to bottom, with try/catch for errors.
What is the event loop?
What a good answer covers
JavaScript runs one thing at a time; the event loop picks the next callback from the queues when the stack is empty.
How do you improve page speed and Core Web Vitals?
What a good answer covers
Compress and lazy-load images, cut unused JavaScript, reserve space for content, and watch LCP, INP and CLS.
What are state and props in React?
What a good answer covers
Props come from the parent and are read-only. State belongs to the component and triggers a re-render when it changes.
How do you make a site accessible?
What a good answer covers
Semantic HTML, alt text, labels on inputs, good contrast and full keyboard use.
What is CORS?
What a good answer covers
A browser rule that blocks requests to another origin unless that server allows it with headers.
localStorage, sessionStorage or cookies?
What a good answer covers
localStorage keeps data until cleared, sessionStorage until the tab closes. Cookies are sent to the server with each request.
All 12 questions with answers
1. What is the CSS box model?
Content, padding, border and margin. box-sizing: border-box includes padding and border in the width.
2. Flexbox or Grid: when do you use each?
Flexbox for one direction, like a row of buttons. Grid for two-dimensional layouts like a page or a card grid.
3. How do you make a site responsive?
Mobile first, flexible widths, media queries and responsive images.
4. What is the difference between let, const and var?
let and const are block-scoped; const can’t be reassigned. var is function-scoped and hoisted, so avoid it.
5. What is the difference between == and === in JavaScript?
== converts types before comparing; === does not. Use ===.
6. Explain promises and async/await.
A promise is a future result. async/await lets you write asynchronous code that reads top to bottom, with try/catch for errors.
7. What is the event loop?
JavaScript runs one thing at a time; the event loop picks the next callback from the queues when the stack is empty.
8. How do you improve page speed and Core Web Vitals?
Compress and lazy-load images, cut unused JavaScript, reserve space for content, and watch LCP, INP and CLS.
9. What are state and props in React?
Props come from the parent and are read-only. State belongs to the component and triggers a re-render when it changes.
10. How do you make a site accessible?
Semantic HTML, alt text, labels on inputs, good contrast and full keyboard use.
11. What is CORS?
A browser rule that blocks requests to another origin unless that server allows it with headers.
12. localStorage, sessionStorage or cookies?
localStorage keeps data until cleared, sessionStorage until the tab closes. Cookies are sent to the server with each request.
Before the interview
- Read the job description twice and match two of your examples to what it asks for.
- Keep printed copies of your resume, ID proof and certificates ready, even for online rounds.
- Know your current CTC, expected salary and notice period. Check typical pay in our salary guide, and compare offers with the in-hand salary calculator.
- Genuine employers never ask you to pay for an interview, training kit or joining. Report anyone who does.