Performance considerations in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a CSS variable for primary color.

CSS

:root { --primary-color: [1]; }

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

Atransparent

Bblue

Crgb(255, 0, 0)

D#3498db

Attempts:

3 left

💡 Hint

Common Mistakes

Using color names that may not be consistent across browsers.

Using invalid color formats.

Using a hex color code like #3498db is a common and efficient way to define colors in CSS variables.

2fill in blank

medium

Complete the code to apply the primary color variable to the background.

CSS

body { background-color: [1]; }

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

Avar(--primary-color)

Bvar(primary-color)

C--primary-color

Dprimary-color

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the two dashes in the variable name.

Not using var() to access the variable.

CSS variables are accessed using var() with the variable name including the two dashes, like var(--primary-color).

3fill in blank

hard

Fix the error in the selector to improve CSS performance by targeting only direct children.

CSS

nav > [1] { color: black; }

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

Aul li

Bli

Cul > li

D*

Attempts:

3 left

💡 Hint

Common Mistakes

Using descendant selectors that match too many elements.

Using universal selector which is slow.

Using the child combinator > with 'li' targets only direct list items inside nav, improving performance by avoiding deeper descendant matches.

4fill in blank

hard

Fill both blanks to create a CSS rule that uses Flexbox for layout and improves rendering performance.

CSS

section { display: [1]; [2]-wrap: nowrap; }

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

Aflex

Bgrid

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid display but flex-wrap property.

Misspelling flex-wrap property.

Using display: flex and flex-wrap: nowrap creates a flexible layout that avoids wrapping, which can improve rendering performance.

5fill in blank

hard

Fill all three blanks to write a media query that improves performance by applying styles only on screens wider than 600px.

CSS

@media (min-[1]: [2]) { main { padding-[3]: 2rem; } }

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

Awidth

B600px

Cleft

Dheight

Attempts:

3 left

💡 Hint

Common Mistakes

Using min-height instead of min-width for screen width targeting.

Using invalid units or missing units like px.

Using padding-right instead of padding-left.

The media query uses min-width: 600px to apply styles on wider screens, and padding-left adds space on the left side, improving layout and performance.