Technical Interview Questions

### HTML Questions and Answers

1. **What are semantic HTML elements, and why are they important?**

Semantic HTML elements clearly define their meaning to both the browser and the developer.

Examples include `<header>`, `<footer>`, `<article>`, and `<section>`. They improve accessibility,

SEO, and readability of the code.

2. **What is the purpose of the `<doctype>` declaration?**

The `<doctype>` declaration specifies the HTML version used in the document, ensuring

consistent rendering across browsers.

3. **Explain the difference between inline, block, and inline-block elements.**

- Inline: Elements like `<span>` flow with text and dont start on a new line.

- Block: Elements like `<div>` start on a new line and take up the full width.

- Inline-block: Combines features of both; elements flow inline but respect block-level width and

height properties.

4. **What is the difference between `<div>` and `<span>` elements?**

`<div>` is a block-level container used for grouping content, while `<span>` is an inline container

used for styling specific text.

5. **What are meta tags, and why are they important for SEO?**

Meta tags provide metadata about a web page, such as description, keywords, and author. They

improve search engine rankings and enhance sharing on social media.

Page 1
 Technical Interview Questions

6. **What is the difference between absolute and relative URLs?**

- Absolute URL: Specifies the full path (e.g., `https://example.com/page`).

- Relative URL: Specifies a path relative to the current page (e.g., `./page`).

7. **What is lazy loading, and how is it implemented in HTML for images?**

Lazy loading defers the loading of images until they are needed. It is implemented using the

`loading="lazy"` attribute on the `<img>` tag.

8. **What are the new input types introduced in HTML5?**

Examples include `email`, `url`, `number`, `date`, `range`, `color`, and `search`.

9. **How do the `async` and `defer` attributes work on a `<script>` tag?**

- `async`: Downloads the script in parallel and executes it as soon as its ready.

- `defer`: Downloads the script in parallel but executes it after the HTML is fully parsed.

10. **What is the purpose of the `alt` attribute in the `<img>` tag?**

The `alt` attribute provides alternative text for images, improving accessibility and aiding SEO.

---

### CSS Questions and Answers

1. **What is the difference between relative, absolute, fixed, and sticky positioning in CSS?**

- `relative`: Positioned relative to its normal position.

Page 2
 Technical Interview Questions

- `absolute`: Positioned relative to the nearest positioned ancestor.

- `fixed`: Positioned relative to the viewport and doesnt move on scrolling.

- `sticky`: Toggles between relative and fixed, depending on the scroll position.

2. **How does the CSS box model work?**

It consists of four areas: content, padding, border, and margin. This determines the size of

elements on a webpage.

3. **What is the difference between `em`, `rem`, and `px` units in CSS?**

- `px`: Absolute unit.

- `em`: Relative to the parents font size.

- `rem`: Relative to the root elements font size.

4. **What is the difference between `visibility: hidden` and `display: none`?**

- `visibility: hidden`: Element remains in the layout but is invisible.

- `display: none`: Element is removed from the layout.

5. **What is the z-index in CSS, and how does it work?**

The `z-index` controls the stack order of elements. Higher values appear in front of lower values.

6. **What are pseudo-classes and pseudo-elements? Provide examples.**

- Pseudo-classes: Define the state of an element (e.g., `:hover`).

- Pseudo-elements: Style specific parts of elements (e.g., `::before`).

7. **Explain the difference between CSS Grid and Flexbox.**

Page 3
 Technical Interview Questions

- Grid: Two-dimensional layout system for rows and columns.

- Flexbox: One-dimensional layout system for either rows or columns.

8. **How are CSS Grid and Flexbox used together?**

CSS Grid can define the main structure of a page, while Flexbox can manage layout inside

individual grid items.

9. **What are media queries in CSS, and how are they used for responsive design?**

Media queries apply styles based on device properties like width and orientation (e.g., `@media

(max-width: 768px)`).

10. **What are keyframes in CSS, and how are they used for animations?**

Keyframes define intermediate steps in an animation. Example:

```css

@keyframes slide {

from { transform: translateX(0); }

to { transform: translateX(100px); }

```

---

### JavaScript Questions and Answers

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

Page 4
 Technical Interview Questions

- `var`: Function-scoped and can be re-declared.

- `let`: Block-scoped and cannot be re-declared.

- `const`: Block-scoped and immutable.

2. **What is the difference between `==` and `===`?**

- `==`: Compares values with type coercion.

- `===`: Compares values without type coercion.

... (rest of questions and answers continue in similar format)

Page 5