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., `[Link]
- 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
