Why advanced styling creates polished UIs in Svelte - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a CSS class to a Svelte component.

Svelte

<button class="[1]">Click me</button>

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

Abtn-primary

Bonclick

Cstyle

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'onclick' instead of a class name

Using 'style' attribute incorrectly

Using 'id' instead of 'class'

The class attribute applies CSS classes to elements. Here, btn-primary is a class name for styling.

2fill in blank

medium

Complete the code to bind a CSS variable in a Svelte style block.

Svelte

<style>
  :root {
    --main-color: [1];
  }
</style>

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

Abackground

B#ff0000

Ccolor

Dfont-size

Attempts:

3 left

💡 Hint

Common Mistakes

Using property names instead of values

Using 'color' instead of a color value

CSS variables are set with values like colors. Here, #ff0000 sets the main color to red.

3fill in blank

hard

Fix the error in the Svelte component to apply conditional styling.

Svelte

<button class:active=[1]>Toggle</button>

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

AisActive

Bactive

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string 'true' instead of a variable

Using the class name instead of a variable

In Svelte, class:active={isActive} applies the active class when isActive is true.

4fill in blank

hard

Fill both blanks to create a responsive grid layout in Svelte style.

Svelte

<style>
  .grid {
    display: [1];
    grid-template-columns: repeat([2], 1fr);
  }
</style>

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

Agrid

Bflex

C3

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flex' instead of 'grid'

Using 'auto' instead of a number for columns

To create a grid layout, use display: grid; and set columns with repeat(3, 1fr) for three equal columns.

5fill in blank

hard

Fill all three blanks to style a button with hover effect in Svelte.

Svelte

<style>
  button {
    background-color: [1];
    color: [2];
  }
  button:hover {
    background-color: [3];
  }
</style>

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

A#007BFF

B#ffffff

C#0056b3

D#000000

Attempts:

3 left

💡 Hint

Common Mistakes

Using black text on dark background

Using same color for hover and normal state

The button has a blue background #007BFF, white text #ffffff, and a darker blue hover #0056b3 for a polished look.