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).

Junior Frontend Developer Interview Questions

Unlock All Interview Questions

Why Practice Junior Frontend Developer Questions?