Scribd
Upload
4 views4 pages

Frontend Interview Questions

This document contains a list of frontend interview questions along with model answers covering key topics such as HTML, CSS, JavaScript, and web design principles. It addresses concepts like the CSS Box Model, Flexbox layout, closures, promises, event handling, website performance optimization, and cross-browser compatibility. The content is structured to assist candidates in preparing for frontend development interviews.

Uploaded by

makar samer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views4 pages

Frontend Interview Questions

This document contains a list of frontend interview questions along with model answers covering key topics such as HTML, CSS, JavaScript, and web design principles. It addresses concepts like the CSS Box Model, Flexbox layout, closures, promises, event handling, website performance optimization, and cross-browser compatibility. The content is structured to assist candidates in preparing for frontend development interviews.

Uploaded by

makar samer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Frontend Interview Questions

Last Edited Time @May 25, 2025 6:43 PM

Created By makar samer

Last Edited By makar samer

Frontend Interview Questions & Model


Answers
1. What is the difference between HTML, CSS, and JavaScript?
Answer:

HTML structures content on the web page (text, images, links).

CSS styles the appearance of that content (colors, layout, fonts).

JavaScript adds interactivity and dynamic behavior (animations, data


fetching, event handling).

2. What are semantic HTML elements and why are they


important?
Answer:
Semantic elements (like <article> , <section> , <header> , <footer> ) describe the
meaning of the content. They improve accessibility, SEO, and make the code
easier to read and maintain.

3. Explain the CSS Box Model.


Answer:
The box model consists of:

Content: The actual content area.

Padding: Space inside the box, around content.

Border: Surrounds padding and content.

Margin: Space outside the border separating elements.

Frontend Interview Questions 1


Understanding this is crucial for layout and spacing.

4. How does the CSS Flexbox layout work?


Answer:
Flexbox provides a flexible way to layout items in one dimension (row or
column). It distributes space inside a container, aligns items, and controls their
sizes, using properties like display: flex , justify-content , align-items , and flex-direction .

5. What is the difference between == and === in JavaScript?


Answer:

== checks equality after type coercion (loose equality).

=== checks equality without type coercion (strict equality).


Use === to avoid unexpected bugs due to type coercion.

6. What is a closure in JavaScript?


Answer:
A closure is a function that remembers and can access variables from its outer
scope even after the outer function has finished executing.

7. What are promises, and how do you use async/await?


Answer:

Promises represent asynchronous operations that may complete in the future.


async/await syntax is syntactic sugar over promises to write asynchronous code

in a more readable way:

js
CopyEdit
async function fetchData() {
const response = await fetch('url');
const data = await response.json();
console.log(data);
}

Frontend Interview Questions 2


8. What is event bubbling and event capturing?
Answer:

Event bubbling: Event starts from the target element and propagates up to
ancestors.

Event capturing: Event starts from the root and goes down to the target.
By default, events bubble, but you can control propagation with
event.stopPropagation() .

9. How do you optimize website performance?


Answer:

Minimize HTTP requests (combine files).

Use lazy loading for images and assets.

Minify CSS/JS files.

Use caching and Content Delivery Networks (CDNs).

Optimize images and reduce their sizes.

Use critical CSS and defer non-essential scripts.

10. What is the difference between var , let , and const ?


Answer:

var : Function-scoped, can be redeclared and hoisted.

let : Block-scoped, cannot be redeclared, not hoisted in the same way.

const : Block-scoped, must be initialized, value cannot be reassigned.

11. What is the Document Object Model (DOM)?


Answer:

DOM is a tree-like representation of HTML elements as objects that JavaScript


can manipulate to dynamically update content, structure, and styles on a
webpage.

12. How does CSS specificity work?


Answer:

Frontend Interview Questions 3


Specificity determines which CSS rule applies if multiple rules match the same
element. Inline styles have the highest specificity, followed by IDs, then
classes, and finally element selectors.

13. What is responsive web design?


Answer:
Designing websites that work well on all devices by using flexible grids, flexible
images, and CSS media queries to adjust layout based on screen size.

14. Explain the difference between display: none and visibility:


hidden .
Answer:

display: none removes the element from the layout flow (no space reserved).

visibility: hidden hides the element but keeps its space reserved.

15. How do you handle cross-browser compatibility issues?


Answer:

Use feature detection (Modernizr).

Use CSS prefixes ( webkit- , moz- ).

Test on multiple browsers.

Use polyfills or fallbacks for unsupported features.

Frontend Interview Questions 4

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy