Frontend & Web interview questions
63 Frontend & Web interview questions with answers, from junior to mid level.
Foundations
- What is the frontend of a web application?
- What is a web browser?
- Which sentence correctly describes HTML?
- What does CSS control in a web page?
- JavaScript and Java: how are they related?
- What is the difference between a static and a dynamic website?
- Where does client-side code run, and where does server-side code run?
- What is Node.js?
- What is React?
- What is TypeScript?
- What is the difference between UI and UX?
- Explain frontend and backend to a non-technical person.
Core
- What does
0 == ""evaluate to in JavaScript, and0 === ""? - Flexbox vs Grid?
- Why prefer
<button>over a<div onclick>? - In a web page, what are the roles of HTML, CSS and JavaScript?
- In modern JavaScript,
letvsconst? - What is the DOM?
- What does
document.querySelector(".btn")return? - What does this do?
- What is the result of
[1, 2, 3].map(x => x * 10)? - What is a React component?
- In React, props vs state?
- What does this CSS do?
- In CSS, what is the difference between
.btnand#btn? - What is a Promise in JavaScript?
- What does
awaitdo inside anasync function? - How do you request data from an API in modern JavaScript?
- What do
package.jsonandnpmdo? - In React, how should you update an array stored in state?
Intermediate
- What is logged?
- What is logged?
- How do arrow functions treat
this? Promise.all([p1, p2, p3])when p2 rejects?- A list has 1,000 items, each needs a click handler. Best approach?
- Search-as-you-type should call the API only after the user pauses typing. Technique?
- Why does React need a stable
keyon list items? useEffect(fn, [])runsfn…- Why doesn't this re-render?
- A controlled input in React means…
- With
box-sizing: border-box, awidth: 200pxelement with 20px padding and 2px border renders… - Which CSS selector has the highest specificity?
- Which storage is sent to the server automatically with every matching request?
- Main advantage of server-side rendering (SSR) over a pure client-side SPA?
- What happens when you type a URL in the browser and press Enter?
- What does a bundler such as Vite or webpack do?
- When do you use React Context?
- What is
useReffor? - What is a Single Page Application (SPA) and how does client-side routing work?
- What does this print?
- What is the difference between Angular, React and Vue at a high level?
- Name a common way to test React components.
- How would you connect a React front end to a Spring Boot REST API?
Advanced
- In what order are the letters logged?
- What does React's reconciliation do?
useMemovsuseCallback?<script defer>vs<script async>?- Which three metrics are Google's Core Web Vitals today?
- In TypeScript,
unknownvsany? - TypeScript's type system is…
- What is the main improvement of HTTP/2 over HTTP/1.1?
- A web page loads slowly. How do you diagnose and improve it?
- What is a closure in JavaScript, and what does this log?