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.

Practice

1. Which CSS property is commonly used to add space inside a button to make it easier to click?

easy

A. font-size

B. margin

C. padding

D. border

Solution

1. Step 1: Understand padding's role

   Padding adds space inside an element, between its content and border, making buttons larger and easier to click.

2. Step 2: Differentiate from margin

   Margin adds space outside the element, not inside. Border and font-size do not add internal space.

3. Final Answer:

   padding -> Option C

4. Quick Check:

   Internal space in buttons = padding [OK]

Hint: Padding adds inside space; margin adds outside space [OK]

Common Mistakes:

• Confusing margin with padding
• Using border to add space
• Changing font-size to add space

2. Which CSS selector correctly targets all buttons with the class primary?

easy

A. button.primary

B. .button primary

C. #primary button

D. button#primary

Solution

1. Step 1: Understand class selector syntax

   To select elements with a class, use a dot (.) before the class name. Combining with element name is element.class.

2. Step 2: Analyze each option

   button.primary selects all button elements with class primary. .button primary is invalid syntax. #primary button selects buttons inside an element with id primary. button#primary selects button with id primary.

3. Final Answer:

   button.primary -> Option A

4. Quick Check:

   Class selector with element = element.class [OK]

Hint: Use dot before class name, no spaces for element.class [OK]

Common Mistakes:

• Using space instead of dot
• Confusing id (#) with class (.)
• Wrong order of selectors

3. What will be the background color of the button when hovered, given this CSS?

button {
  background-color: blue;
  color: white;
}
button:hover {
  background-color: green;
}

medium

A. Blue

B. Green

C. White

D. No change

Solution

1. Step 1: Understand the hover pseudo-class

   The :hover selector changes styles when the mouse is over the element.

2. Step 2: Check the hover background-color

   On hover, the background-color changes from blue to green as defined.

3. Final Answer:

   Green -> Option B

4. Quick Check:

   Hover changes background to green [OK]

Hint: Hover styles override normal styles on mouse over [OK]

Common Mistakes:

• Ignoring :hover effect
• Confusing color with background-color
• Assuming no style change on hover

4. This CSS code is intended to center a card horizontally, but it doesn't work:

.card {
  width: 300px;
  margin: 0 auto 0 auto;
  display: inline-block;
}

What is the main reason it fails?

medium

A. 'display: inline-block' prevents 'margin: 0 auto' from centering block elements

B. Width is missing units

C. Margin syntax is incorrect

D. The card needs 'text-align: center' on parent

Solution

1. Step 1: Understand margin auto centering

   Margin auto centers block elements with a fixed width horizontally.

2. Step 2: Check display property effect

   Setting display: inline-block makes the element inline-level, so margin: 0 auto does not center it.

3. Final Answer:

   'display: inline-block' prevents 'margin: 0 auto' from centering block elements -> Option A

4. Quick Check:

   Inline-block disables margin auto centering [OK]

Hint: Use block display for margin auto centering [OK]

Common Mistakes:

• Using inline-block instead of block
• Wrong margin syntax
• Forgetting width units

5. You want to create a responsive navigation bar with evenly spaced links that wrap on small screens. Which CSS layout method is best suited for this?

hard

A. Use inline-block links with fixed margins

B. Grid with fixed column widths

C. Float each link left with fixed widths

D. Flexbox with flex-wrap: wrap and justify-content: space-between

Solution

1. Step 1: Identify layout needs

   We want links spaced evenly and wrapping on small screens, so flexible layout and wrapping are needed.

2. Step 2: Evaluate layout methods

   Flexbox supports flexible spacing and wrapping with flex-wrap: wrap and justify-content: space-between. Grid with fixed columns won't wrap well. Floats and inline-block are outdated and less flexible.

3. Final Answer:

   Flexbox with flex-wrap: wrap and justify-content: space-between -> Option D

4. Quick Check:

   Responsive spacing and wrapping = Flexbox wrap + space-between [OK]

Hint: Use flex-wrap and justify-content for responsive nav bars [OK]

Common Mistakes:

• Using fixed widths preventing wrap
• Relying on floats for layout
• Ignoring flex-wrap property