Visual design and responsive layout in No-Code - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the main container to use a flexible layout.

No-Code

container.style.display = '[1]';

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

Agrid

Bblock

Cinline

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' does not create a flexible layout.

Using 'inline' only affects inline elements, not layout.

Using 'grid' is also for layout but different from flexbox.

Using flex for the display property enables flexible box layout, which helps create responsive designs.

2fill in blank

medium

Complete the code to make the image scale automatically with the container width.

No-Code

image.style.width = '[1]';

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

A100%

B100px

Cauto

D50%

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed pixel values prevents responsive scaling.

Using 'auto' keeps the original size, not responsive.

Using 50% scales the image to half the container width.

Setting width to 100% makes the image fill the container's width and scale responsively.

3fill in blank

hard

Fix the error in the code to apply a responsive margin that adjusts on smaller screens.

No-Code

@media (max-width: 600px) { .container { margin: '[1]'; } }

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

A10%

B20px

Cauto

Dfixed

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed pixel values does not adjust on smaller screens.

Using 'auto' centers but does not set margin size.

Using 'fixed' is not a valid CSS value.

Using a percentage like 10% for margin allows it to adjust relative to screen size, making it responsive.

4fill in blank

hard

Fill both blanks to create a grid layout with two columns and a gap between them.

No-Code

container.style.display = '[1]'; container.style.gridTemplateColumns = '[2]';

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

Agrid

Bflex

Crepeat(2, 1fr)

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flex' does not support gridTemplateColumns.

Using 'auto' is not a valid value for gridTemplateColumns.

Not setting display to 'grid' disables grid features.

Setting display to grid enables grid layout. Using repeat(2, 1fr) creates two equal columns.

5fill in blank

hard

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

No-Code

card.style.padding = '[1]'; card.style.borderRadius = '[2]'; card.style.boxShadow = '[3]';

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

A1rem

B0.5rem

C0 4px 6px rgba(0, 0, 0, 0.1)

D5px

Attempts:

3 left

💡 Hint

Common Mistakes

Using pixel units only can reduce responsiveness.

Using no border radius makes corners sharp.

Omitting box shadow removes depth effect.

Padding of 1rem adds space inside the card. Border radius of 0.5rem rounds corners. The box shadow adds a subtle shadow effect.