List use cases in layout in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple unordered list in HTML.

HTML

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>[1]</li>
</ul>

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

AOranges

B<li>Grapes</li>

CFruits

DBanana

Attempts:

3 left

💡 Hint

Common Mistakes

Adding tags inside the blank instead of just the text.

Using a category name instead of an item.

The <li> tag defines a list item. Here, 'Oranges' is the correct item to complete the list.

2fill in blank

medium

Complete the code to create an ordered list with three steps.

HTML

<ol>
  <li>Step 1: Gather materials</li>
  <li>[1]</li>
  <li>Step 3: Finish project</li>
</ol>

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

AStep 2: Start building

BStep 2: Building start

CStep 2: Build start

DStep 2 Start building

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the colon after 'Step 2'.

Mixing up the order of words.

The second step should be clearly labeled as 'Step 2: Start building' to keep the order and meaning clear.

3fill in blank

hard

Fix the error in the nested list code by completing the blank.

HTML

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>[1]</li>
    </ul>
  </li>
</ul>

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

ABananas

B<li>Banana</li>

CBanana

DBanana<li>

Attempts:

3 left

💡 Hint

Common Mistakes

Adding extra <li> tags inside the blank.

Using plural form when singular is expected.

Inside the nested <ul>, each item should be just the text inside <li> tags already present. So only 'Banana' is needed here.

4fill in blank

hard

Fill both blanks to create a description list with a term and its description.

HTML

<dl>
  <dt>[1]</dt>
  <dd>[2]</dd>
</dl>

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

AHTML

BHyperText Markup Language

CCSS

DCascading Style Sheets

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the term and description.

Using unrelated terms and descriptions.

The <dt> tag is for the term, and <dd> is for its description. Here, 'HTML' is the term and 'HyperText Markup Language' is the description.

5fill in blank

hard

Fill all three blanks to create a navigation menu with links.

HTML

<nav>
  <ul>
    <li><a href="[1]">Home</a></li>
    <li><a href="[2]">About</a></li>
    <li><a href="[3]">Contact</a></li>
  </ul>
</nav>

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

A/index.html

B/about.html

C/contact.html

D/home.html

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect file paths.

Mixing up the order of links.

The href attribute in <a> tags defines the link destination. The correct links are '/index.html' for Home, '/about.html' for About, and '/contact.html' for Contact.