Question 1

What’s the `calc()` function?

Accepted Answer

It lets you do math in CSS—like `width: calc(100% - 20px)`. Super useful for dynamic sizing.

Question 2

What’s the `position: sticky` property?

Accepted Answer

It’s a hybrid of relative and fixed—stays in place until it hits a scrolling threshold, then sticks. Awesome for headers or sidebars.

Question 3

How do you create a CSS triangle?

Accepted Answer

Use borders! Set an element’s width and height to 0, then tweak border sizes and colors. It’s a clever trick.

Question 4

What’s the `clip-path` property?

Accepted Answer

It clips an element to a shape—like a circle or polygon. Great for creative designs.

Question 5

How do you hide an element visually but keep it for screen readers?

Accepted Answer

Use a class with `position: absolute`, `width: 1px`, and `clip` to tuck it off-screen. Keeps it accessible but invisible.

Question 6

What’s the `:focus-within` pseudo-class?

Accepted Answer

It styles an element when it or its descendants gain focus. Perfect for form UX.

Question 7

What’s the `grid-template-areas` property?

Accepted Answer

It names grid areas for a visual layout—like a blueprint. Makes complex designs readable.

Question 8

What’s the `writing-mode` property?

Accepted Answer

It changes text direction—like `vertical-rl` for vertical writing. Useful for multilingual layouts.

Question 9

What’s the purpose of the `float` property?

Accepted Answer

Float pulls an element to the left or right, letting content wrap around it. It’s old-school but still used for things like text around images.

Question 10

What’s CSS Grid’s `fr` unit?

Accepted Answer

The `fr` unit represents a fraction of available space in a grid. Like `1fr 2fr` splits it 1:2—super flexible!

DeVlt

Technical Interview Questions