Question 1

What is the difference between `relative`, `absolute`, and `fixed` positioning in CSS?

Accepted Answer

- `relative`: Moves relative to its normal position, keeps space.
- `absolute`: Positioned relative to nearest positioned ancestor, removed from flow.
- `fixed`: Positioned relative to viewport, stays in place on scroll.
- Key for overlays, sticky headers, etc.

Question 2

Explain the concept of responsive design.

Accepted Answer

- Responsive design ensures a website adapts to different screen sizes/devices.
- Uses fluid grids (percentages), flexible images, and media queries.
- Goal is usability and aesthetics across desktops, tablets, and phones.
- Example: Adjusting layout at breakpoints like 768px.

Question 3

What is the role of a front-end developer in a team?

Accepted Answer

- Builds user interfaces based on designs.
- Collaborates with back-end devs for API integration.
- Ensures performance, accessibility, and responsiveness.
- Communicates with designers and stakeholders for alignment.

Question 4

What is the box model in CSS?

Accepted Answer

- Defines how elements are rendered: content, padding, border, margin.
- Content is the inner area; padding surrounds it; border wraps both; margin is outside.
- `box-sizing: border-box` includes padding/border in width/height.
- Critical for precise layouts.

Question 5

What are the benefits of using a CSS reset or normalize?

Accepted Answer

- CSS reset: Removes all default browser styles for consistency.
- Normalize: Standardizes styles across browsers without zeroing out.
- Both reduce cross-browser quirks.
- Choice depends on project needs (control vs. simplicity).

Question 6

What is the difference between `rem` and `em` units in CSS?

Accepted Answer

- `rem`: Relative to root (`html`) font size (e.g., `16px` by default).
- `em`: Relative to parent element’s font size, can compound.
- `rem` is predictable; `em` is contextual.
- Useful for responsive typography.

Question 7

What is semantic HTML, and why is it important?

Accepted Answer

- Semantic HTML uses tags that convey meaning (e.g., `

`, `

Question 8

What is the purpose of the `defer` attribute in a `<script>` tag?

Accepted Answer

- Delays script execution until HTML is fully parsed.
- Maintains order of execution for multiple scripts.
- Ideal for external scripts that rely on DOM elements.
- Improves page load performance.

Question 9

What is the significance of the `z-index` property?

Accepted Answer

- Controls stacking order of overlapping elements.
- Higher values place elements above lower ones.
- Only works on positioned elements (`relative`, `absolute`, `fixed`).
- Useful for modals, tooltips, etc.

Question 10

What is the difference between `block`, `inline`, and `inline-block` display properties in CSS?

Accepted Answer

- `block`: Elements take up the full width available, stacking vertically (e.g., `

`). - `inline`: Elements sit on the same line, only taking up as much width as their content (e.g., ``), no width/height properties. - `inline-block`: Combines inline flow with block-level properties, allowing width/height while staying inline. - This distinction is key for layout control in CSS.

DeVlt

Junior Frontend Developer Interview Questions

Unlock All Interview Questions

Why Practice Junior Frontend Questions?

DeVlt