Mobile-friendly design in SEO Fundamentals - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a viewport meta tag for mobile-friendly design.

SEO Fundamentals

<meta name="viewport" content="width=[1], initial-scale=1">

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

Adevice-width

Bscreen-width

Cwindow-width

Dpage-width

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'screen-width' or 'window-width' instead of 'device-width' causes improper scaling.

Omitting the viewport meta tag leads to poor mobile display.

The viewport meta tag with width=device-width ensures the page matches the device's screen width, making it mobile-friendly.

2fill in blank

medium

Complete the CSS property to make images responsive on mobile devices.

SEO Fundamentals

img { max-width: [1]; height: auto; }

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

A50%

B100px

Cauto

D100%

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed pixel widths causes images to overflow on small screens.

Setting height without auto can distort image proportions.

Setting max-width: 100% makes images scale down to fit their container, ensuring they display well on smaller screens.

3fill in blank

hard

Fix the error in the media query to apply styles only on screens smaller than 600px.

SEO Fundamentals

@media (max-width: [1]) { body { font-size: 14px; } }

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

A600px

B600%

C600em

D600pt

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'em' or '%' units causes the media query to behave unexpectedly.

Omitting units leads to invalid CSS.

The correct unit for screen width in media queries is px (pixels). Using '600px' targets screens up to 600 pixels wide.

4fill in blank

hard

Fill both blanks to create a flexible layout that stacks on small screens.

SEO Fundamentals

display: [1]; flex-direction: [2];

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

Aflex

Bblock

Ccolumn

Drow

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' for display disables flexbox features.

Setting flex-direction to 'row' keeps items side by side, not stacked.

Using display: flex with flex-direction: column stacks items vertically, which is ideal for mobile layouts.

5fill in blank

hard

Fill all three blanks to create a responsive navigation menu that hides on small screens.

SEO Fundamentals

@media (max-width: [1]) { nav { display: [2]; } } nav { display: [3]; }

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

A768px

Bnone

Cblock

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect units for the breakpoint causes the media query to fail.

Setting display to 'block' inside the media query does not hide the menu.

Forgetting to set the default display outside the media query causes layout issues.

This media query hides the navigation menu (display: none) on screens smaller than 768px, while normally showing it as a flex container.