Common CSS anti-patterns - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to avoid using fixed pixel font sizes for better accessibility.

CSS

body { font-size: [1]; }

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

A10px

B1rem

C12px

D16px

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed pixel sizes like 16px reduces accessibility.

Choosing too small fixed sizes like 10px makes text hard to read.

Using 1rem instead of fixed pixels allows font sizes to scale based on user preferences, improving accessibility.

2fill in blank

medium

Complete the code to avoid using the !important rule which can cause maintenance issues.

CSS

.button { color: red[1] }

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

A:important;

B!important;

C!important

D;

Attempts:

3 left

💡 Hint

Common Mistakes

Adding !important unnecessarily makes debugging harder.

Forgetting the semicolon causes syntax errors.

Omitting !important helps keep CSS easier to maintain and override properly.

3fill in blank

hard

Fix the error in the selector to avoid using overly generic selectors that slow down rendering.

CSS

[1] p { color: blue; }

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

A.container

B#main

C*

Ddiv

Attempts:

3 left

💡 Hint

Common Mistakes

Using * selector slows down CSS rendering.

Using tag selectors alone can be too broad.

Using a class selector like .container is more specific and efficient than the universal selector *.

4fill in blank

hard

Fill both blanks to replace fixed width and height with flexible layout units.

CSS

.box { width: [1]; height: [2]; }

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

A100%

B50vw

C200px

D300px

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed pixel sizes causes layout issues on different screens.

Mixing fixed and relative units inconsistently.

Using 100% width and 50vw height makes the box responsive to screen size.

5fill in blank

hard

Fill all three blanks to replace float-based layout with modern Flexbox properties.

CSS

.container { display: [1]; justify-content: [2]; align-items: [3]; }

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

Ablock

Bcenter

Cflex

Dstart

Attempts:

3 left

💡 Hint

Common Mistakes

Using block display does not enable Flexbox.

Incorrect justify-content or align-items values cause layout issues.

Using display: flex with justify-content: center and align-items: start creates a flexible and modern layout without floats.