Common UI use cases in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ layout

intermediate

Which CSS rule creates a responsive two-column layout using Flexbox?

You want to create a container that displays two columns side by side on wide screens and stacks them vertically on narrow screens. Which CSS rule achieves this behavior?

CSS

/* Container CSS */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Column CSS */
.column {
  flex: 1 1 300px;
  background-color: lightgray;
  padding: 1rem;
}

A Set .container { display: flex; flex-direction: column; } and .column { flex: 1; }

B Set .container { display: grid; grid-template-columns: repeat(2, 1fr); } and .column { width: 50%; }

C Set .container { display: block; } and .column { float: left; width: 50%; }

D Set .container { display: flex; flex-wrap: wrap; } and .column { flex: 1 1 300px; }

💡 Hint

Flexbox with wrapping allows columns to stack on narrow screens.

Option D uses flexbox with wrapping and flexible basis, so columns take at least 300px and wrap to next line if needed, making it responsive.

Option D uses grid but fixes columns at 50%, which is not responsive without media queries.

Option D uses float, which is outdated and less flexible.

Option D stacks columns vertically always due to flex-direction: column.

❓ accessibility

intermediate

Which HTML and CSS combination improves keyboard accessibility for a custom button?

You create a clickable

styled as a button. Which combination ensures it is accessible via keyboard and screen readers?

CSS

<div class="custom-button" tabindex="0" role="button">Click me</div>

A Add tabindex="0" and role="button" to the div, and style with :focus outline.

B Add onclick handler only, no tabindex or role needed.

C Use a <span> with role="button" but no tabindex.

D Use a <div> with tabindex="-1" and role="button".

💡 Hint

Keyboard users need focus and screen readers need role.

Option A adds tabindex="0" so the div is focusable by keyboard and role="button" so screen readers announce it as a button. Styling :focus helps users see focus.

Option A lacks keyboard focus and role, so keyboard users and screen readers miss it.

Option A lacks tabindex, so not keyboard focusable.

Option A uses tabindex="-1", which removes keyboard focus.

❓ selector

advanced

What does the CSS selector :is(.btn, .link) > span target?

Given the selector :is(.btn, .link) > span, which elements will it select?

A All elements with class .btn or .link that are direct children of a <span>.

B All elements with class .btn or .link that contain a <span> child.

C All <span> elements that are direct children of elements with class .btn or .link.

D All <span> elements anywhere inside elements with class .btn or .link.

💡 Hint

The > means direct child, :is groups selectors.

The :is(.btn, .link) groups selectors .btn and .link. The > span means select elements that are direct children of those elements.

Option C correctly describes this.

Option C reverses parent and child.

Option C misses the direct child requirement.

Option C describes a parent selector, which CSS does not support.

❓ rendering

advanced

What visual effect does this CSS produce on a button when hovered?

Consider this CSS for a button: .button { background-color: #007BFF; color: white; padding: 1rem 2rem; border-radius: 0.5rem; transition: background-color 0.3s ease; } .button:hover { background-color: #0056b3; } What will the user see when they hover over the button?

A The button text color changes from white to dark blue instantly.

B The button background smoothly changes from bright blue to a darker blue over 0.3 seconds.

C The button border radius increases on hover.

D The button background color changes instantly with no transition.

💡 Hint

Look at the transition property and the hover background-color.

The transition property applies to background-color changes over 0.3 seconds with easing.

On hover, background-color changes from #007BFF (bright blue) to #0056b3 (darker blue) smoothly.

Text color and border radius do not change.

🧠 Conceptual

expert

How many items will be visible in this CSS Grid container with overflow hidden?

Given this HTML and CSS: HTML:

1

2

3

4

5

CSS: .grid-container { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 100px; height: 200px; overflow: hidden; } .item { border: 1px solid black; font-size: 2rem; display: flex; justify-content: center; align-items: center; } How many .item elements will be fully visible inside the container?

A 4 items

B 5 items

C 2 items

D 3 items

💡 Hint

Calculate how many grid cells fit in 200px height with 100px rows.

The grid has 2 columns and rows of 100px height.

The container height is 200px, so it fits exactly 2 rows.

2 columns × 2 rows = 4 items fully visible.

The 5th item is outside and hidden by overflow: hidden.