Common UI use cases in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to center a div horizontally using Flexbox.

CSS

.container {
  display: flex;
  justify-content: [1];
}

Drag options to blanks, or click blank then click option'

Aspace-between

Bflex-start

Ccenter

Dflex-end

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex-start or flex-end which aligns items to edges.

Confusing align-items with justify-content.

Using justify-content: center; centers the child elements horizontally inside the flex container.

2fill in blank

medium

Complete the code to make a button change color when hovered.

CSS

button:hover {
  background-color: [1];
}

Drag options to blanks, or click blank then click option'

Atransparent

B#3498db

Cnone

Dinherit

Attempts:

3 left

💡 Hint

Common Mistakes

Using none or transparent which won't show a color change.

Using inherit which keeps the original color.

Setting background-color to a color like #3498db changes the button's background on hover.

3fill in blank

hard

Fix the error in the code to make the navigation bar sticky at the top.

CSS

nav {
  position: [1];
  top: 0;
  width: 100%;
}

Drag options to blanks, or click blank then click option'

Aabsolute

Brelative

Cstatic

Dfixed

Attempts:

3 left

💡 Hint

Common Mistakes

Using relative or static which do not fix the element on scroll.

Using absolute without proper context which may not stick the element.

Using position: fixed; makes the navigation bar stay at the top when scrolling.

4fill in blank

hard

Fill both blanks to create a responsive grid with 3 columns and 1rem gap.

CSS

.grid-container {
  display: [1];
  grid-template-columns: repeat([2], 1fr);
  gap: 1rem;
}

Drag options to blanks, or click blank then click option'

Agrid

Bflex

C3

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex instead of grid for grid layout.

Setting wrong number of columns in repeat().

Using display: grid; and grid-template-columns: repeat(3, 1fr); creates a grid with 3 equal columns and 1rem gap.

5fill in blank

hard

Fill all three blanks to create a button with padding, border radius, and a shadow.

CSS

button {
  padding: [1];
  border-radius: [2];
  box-shadow: 0 4px 6px [3];
}

Drag options to blanks, or click blank then click option'

A1rem 2rem

B0.5rem

Crgba(0, 0, 0, 0.1)

D2rem

Attempts:

3 left

💡 Hint

Common Mistakes

Using pixel units instead of rem for better scalability.

Using opaque colors for shadows instead of transparent rgba.

Padding 1rem 2rem adds vertical and horizontal space inside the button. Border radius 0.5rem rounds corners. Box shadow with rgba(0, 0, 0, 0.1) adds a subtle shadow.