Scribd
Upload
11 views4 pages

Frontend Interview Questions

Uploaded by

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

Frontend Interview Questions

Uploaded by

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

Frontend Developer Interview

Questions
1. What is the difference between HTML, CSS, and JavaScript?
Answer:
HTML (HyperText Markup Language): Used for creating the structure of a page.
CSS (Cascading Style Sheets): Used for styling and formatting the appearance of the page.
JavaScript: Used for making the page interactive and adding dynamic functionality.

2. What is the Box Model in CSS?


Answer:
The Box Model consists of four parts:
Content: The actual content of the element.
Padding: The space between the content and the element's border.
Border: The border around the element.
Margin: The space outside the element, separating it from others.

3. What is Flexbox and how is it used in CSS?


Answer:
Flexbox is a layout system that allows flexible distribution of space inside a container.
Example:
.container {
display: flex;
justify-content: center;
align-items: center;
}

4. What are the main types of selectors in CSS?


Answer:
ID selector: #id
Class selector: .class
Element selector: element
Attribute selector: [attribute]
5. What is the DOM and how does it work with JavaScript?
Answer:
The DOM (Document Object Model) is a tree-like structure that represents the document.
JavaScript can interact with the DOM to modify the content and structure of the page
dynamically.

6. What does the `onclick` function do in HTML and JavaScript?


Answer:
The `onclick` function is used to define a function to be executed when an element is clicked.
Example:
<button onclick="alert('Button clicked!')">Click Me</button>

7. What is the difference between `var`, `let`, and `const` in JavaScript?


Answer:
var: A variable that can be reassigned and has function scope.
let: A variable that can be reassigned with block-level scope.
const: A constant that cannot be reassigned.

8. What is the `z-index` property in CSS, and when is it used?


Answer:
The `z-index` property controls the stacking order of elements. Higher `z-index` values
appear in front.
Example:
.box1 {
position: absolute;
z-index: 2;
}
.box2 {
position: absolute;
z-index: 1;
}

9. What are Media Queries in CSS, and how are they used for
responsiveness?
Answer:
Media Queries allow for applying different styles based on the device's screen size.
Example:
@media (max-width: 768px) {
body {
background-color: lightblue;
}
}

10. What are Cookies in JavaScript?


Answer:
Cookies are small files stored in the browser that hold data between sessions.
They are used for storing user preferences, session data, etc.

11. What is Event Delegation in JavaScript?


Answer:
Event Delegation is a technique where a single event listener is attached to a parent element
to manage events on child elements.
Example:
document.getElementById('parent').addEventListener('click', function(event) {
if (event.target && event.target.matches('button.classname')) {
alert('Button clicked!');
}
});

12. What does the term 'Single Page Application' (SPA) mean?
Answer:
SPA refers to a web application that loads only one page from the server and dynamically
updates content without full page reloads.

13. What is a Promise in JavaScript?


Answer:
A Promise is an object that represents the eventual completion or failure of an
asynchronous operation.
It is used for handling asynchronous code in a more manageable way.

14. What is the difference between `null` and `undefined` in JavaScript?


Answer:
null: A value explicitly assigned to a variable to indicate no value.
undefined: A variable that hasn't been assigned any value yet.
15. How do you use `localStorage` in JavaScript?
Answer:
`localStorage` is used to store data in the browser persistently.
Example:
localStorage.setItem('username', 'JohnDoe');
var user = localStorage.getItem('username');

16. What is the difference between `GET` and `POST` in HTTP?


Answer:
GET: Used to request data from the server.
POST: Used to send data to the server.

17. What are `inline`, `block`, and `inline-block` elements in CSS?


Answer:
inline: The element stays in the same line.
block: The element takes up the full width of its container.
inline-block: Behaves like inline, but allows width and height to be set.

18. What happens if you don’t specify the `width` attribute on an `img`
tag in HTML?
Answer:
If the `width` attribute is not set, the image will take up its intrinsic size, potentially affecting
layout.

19. What are the common image file types used on the web, and when
would you use each?
Answer:
JPEG: For high-detail images.
PNG: For images with transparency.
GIF: For animated images.
SVG: For scalable vector graphics.

20. What are some frontend frameworks that are commonly used?
Answer:
React: For building interactive user interfaces.
Angular: For comprehensive, full-featured applications.
Vue.js: For simple, flexible, and progressive frameworks.

You might also like