0
0
HTMLmarkup~15 mins

Unordered lists in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Create a Simple Unordered List in HTML
📖 Scenario: You want to make a simple webpage that shows a list of your favorite fruits. This list should be easy to read and clearly separated.
🎯 Goal: Build a basic HTML page that includes an unordered list with three fruit names.
📋 What You'll Learn
Use semantic HTML5 structure with <html>, <head>, and <body> tags
Include a <title> in the head
Create an unordered list using <ul> with exactly three list items <li>
Each list item must contain one fruit name: Apple, Banana, Cherry
💡 Why This Matters
🌍 Real World
Unordered lists are used on websites to show groups of items like features, steps, or menus in a clear, easy-to-read way.
💼 Career
Knowing how to create and structure lists is a basic skill for web developers to organize content effectively and improve user experience.
Progress0 / 4 steps
1
Set up the basic HTML structure
Write the basic HTML skeleton with <html lang="en">, <head> containing <meta charset="UTF-8"> and <title> with text Favorite Fruits, and an empty <body>.
HTML
Need a hint?

Remember to include <html lang="en"> and a <title> inside the <head>.

2
Add an unordered list container
Inside the <body>, add an unordered list element using <ul> to hold the fruit items.
HTML
Need a hint?

Use the <ul> tag to create an unordered list container inside the body.

3
Add list items for fruits
Inside the <ul>, add three list items using <li> tags with the exact text: Apple, Banana, and Cherry.
HTML
Need a hint?

Use three <li> tags inside the <ul> with the fruit names exactly as given.

4
Add a heading above the list
Above the <ul>, add a heading using the <h1> tag with the text My Favorite Fruits.
HTML
Need a hint?

Use the <h1> tag to add a main heading above the list.