Demo Mode

No student ID available

Activity 2 of 14

Activity 2: Introduction to HTML

Practice and reinforce the concepts from Lesson 2

Basic HTML Activity

What you'll learn

In this activity, you'll:

Build your first HTML webpage from scratch
Use HTML tags to structure content
Create nested lists for organizing information
Add links to external websites
Practice proper HTML syntax and formatting

Total time: 45-60 minutes

💻 Download your material

What you'll do: Open the project and familiarize yourself with the interface Time: 5 minutes

Open StackBlitz and access the template:
StackBlitz Project
stackblitz-starters-ftv9fkne
Open in StackBlitz
Alternative: Download the source code from StackBlitz using the Download Project button if you prefer using your own IDE
Look for the files panel on the left side - click on index.html
You'll see three panels:
- Left: File explorer
- Middle: Code editor
- Right: Live preview

tip Click the "Open in New Tab" button in the preview panel to see your webpage in a full browser tab - this makes it easier to see your changes!

⚠️ Important: Before You Start DO NOT DELETE any existing files in the template:

Package files

Configuration files

Any files you didn't create

ONLY EDIT the index.html file for this activity.

📚 HTML Tags Reference

Time: 5 minutes to read

HTML uses "tags" to mark up content. Tags are written with angle brackets < >:

How Tags Work:

<tagname>content</tagname> - Most tags come in pairs (opening and closing)
<tagname /> - Some tags are self-closing
Tags tell the browser how to display content

Common HTML Tags You'll Use Today:

Tag	Purpose	Example
`<h1>` to `<h6>`	Headings (h1 is biggest)	`<h1>My Title</h1>`
`<p>`	Paragraphs	`<p>Some text</p>`
`<ol>`	Ordered lists (1, 2, 3...)	`<ol><li>First</li></ol>`
`<ul>`	Unordered lists (bullets)	`<ul><li>Item</li></ul>`
`<li>`	List items	`<li>List item</li>`
`<a>`	Links	`<a href="url">Click me</a>`
`{/* */}`	Comments (hidden)	`{/* Note to self */}`

💻 Steps to Complete Your Introduction to HTML

Step One: Understanding the HTML Structure

What you'll learn: Every HTML page has the same basic structure Time: 3 minutes

Look at your index.html file. You'll see:

php-template

<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML exercise</title>
  </head>
  <body>
    {/* Your content goes here */}
  </body>
</html>

Explanation:

<!DOCTYPE html> - Tells browser this is HTML5
<html> - Contains everything
<head> - Information about the page (not visible to users)
<title> - What appears in browser tab
<body> - All visible content goes here

Step 2: Change the Page Title

What you'll do: Change what appears in the browser tab Time: 2 minutes

Find this line in your code: <title>My first HTML exercise</title>
Change it to: <title>My Monthly Agenda</title>
Save your file (Ctrl+S or Cmd+S)
Look at your preview - the browser tab should now say "My Monthly Agenda"

tip StackBlitz auto-saves your work, but it's good practice to save manually!

Step 3: Create Your Main Heading

What you'll do: Add the biggest heading to your page Time: 2 minutes

Find the <body> section in your code
Between <body> and </body>, add this line:
html
```
<h1>My Monthly Agenda</h1>
```
Save your file and check the preview - you should see "My Monthly Agenda" as a big heading

Step 4: Understanding Lists in HTML

What you'll learn: There are two types of lists Time: 3 minutes

Ordered Lists (<ol>) - Numbered lists (1, 2, 3...)

css

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

Unordered Lists (<ul>) - Bullet point lists

css

<ul>
  <li>First bullet</li>
  <li>Second bullet</li>
</ul>

tip Lists can be nested! You can put a list inside another list item to create sub-categories.

Step 5: Create Your Monthly Structure

What you'll do: Build the main structure with months Time: 3 minutes

After your <h1> heading, add this ordered list:

html

<ol>
  <li>November</li>
  <li>December</li>
</ol>

Save and check your preview. You should see:
- 1. November
- 1. December

Step 6: Add Categories Under November

What you'll do: Create subcategories using nested lists Time: 3 minutes

Replace your November line with this expanded version:

html

<li>November
  <ul>
    <li>Goals</li>
    <li>To-dos</li>
    <li>Events</li>
  </ul>
</li>

What's happening here:
- We kept "November" as a list item
- Inside it, we added an unordered list (<ul>) with bullet points
- This creates subcategories under November

tip Make sure to properly indent your nested lists - it helps you see the structure clearly!

Step 7: Add Specific Items Under Goals

What you'll do: Create another level of nesting Time: 3 minutes

Expand your Goals section like this:

html

<li>Goals
  <ul>
    <li>Lose 1kg of weight</li>
    <li>Walk a total of 100,000 km</li>
  </ul>
</li>

Save and check - you now have a third level of nesting!

Step 8: Complete All November Categories

What you'll do: Add items under To-dos and Events Time: 5 minutes

Replace your entire November section with:

html

<li>November
  <ul>
    <li>Goals
      <ul>
        <li>Lose 1kg of weight</li>
        <li>Walk a total of 100,000 km</li>
      </ul>
    </li>
    <li>To-dos
      <ul>
        <li>Adopt a cat</li>
      </ul>
    </li>
    <li>Events
      <ul>
        <li>Telebort class weekly at Sat/5pm</li>
        <li>Family gathering on the 24th</li>
      </ul>
    </li>
  </ul>
</li>

tip Common Challenge If your lists don't look right, check that:

Every <li> has a closing </li>
Every <ul> has a closing </ul>
Your indentation matches the example

Step 9: Add December Section

What you'll do: Create the same structure for December Time: 5 minutes

Now add the December section with the same pattern:

html

<li>December
  <ul>
    <li>Goals
      <ul>
        <li>Try 5 new restaurants</li>
      </ul>
    </li>
    <li>To-dos
      <ul>
        <li>Feed cat</li>
        <li>Adopt another cat</li>
      </ul>
    </li>
    <li>Events
      <ul>
        <li>Outing with friends on the 20th</li>
        <li>Cousin birthday on the 27th</li>
      </ul>
    </li>
  </ul>
</li>

This goes right after your November </li> closing tag

Step 10: Verify Your Complete HTML Structure

What you should have: Here's what your complete <body> section should look like: Time: 2 minutes to verify

css

<body>
  <h1>My Monthly Agenda</h1>
  
  <ol>
    <li>November
      <ul>
        <li>Goals
          <ul>
            <li>Lose 1kg of weight</li>
            <li>Walk a total of 100,000 km</li>
          </ul>
        </li>
        <li>To-dos
          <ul>
            <li>Adopt a cat</li>
          </ul>
        </li>
        <li>Events
          <ul>
            <li>Telebort class weekly at Sat/5pm</li>
            <li>Family gathering on the 24th</li>
          </ul>
        </li>
      </ul>
    </li>
    
    <li>December
      <ul>
        <li>Goals
          <ul>
            <li>Try 5 new restaurants</li>
          </ul>
        </li>
        <li>To-dos
          <ul>
            <li>Feed cat</li>
            <li>Adopt another cat</li>
          </ul>
        </li>
        <li>Events
          <ul>
            <li>Outing with friends on the 20th</li>
            <li>Cousin birthday on the 27th</li>
          </ul>
        </li>
      </ul>
    </li>
  </ol>
</body>

Step 11: Add a Link (Optional)

What you'll learn: How to create clickable links Time: 3 minutes

Add this anywhere in your page (perhaps after the heading):

html

<p>Watch HTML tutorials on <a href="https://www.youtube.com/">YouTube</a></p>

How it works:
- <p> creates a paragraph
- <a href="URL"> creates a clickable link
- The text between <a> and </a> is what users click on

tip Links open in the same tab by default. To open in a new tab, add target="_blank" to your link: <a href="https://www.youtube.com/" target="_blank">YouTube</a>

Step 12: Add Comments to Your Code

What you'll learn: How to add notes that don't appear on the page Time: 2 minutes

Add comments to organize your code:

html

{/* This is the main heading */}
<h1>My Monthly Agenda</h1>

{/* November agenda section */}
<li>November
  {/* ... rest of November code ... */}
</li>

{/* December agenda section */}
<li>December
  {/* ... rest of December code ... */}
</li>

Comments help you and others understand your code later!

Step 13: Check Your Final Output

What you should see: Your page should display exactly like the provided screenshot: Time: 2 minutes

tip Final Check

✅ Browser tab says "My Monthly Agenda"
✅ Main heading displays at the top
✅ November and December are numbered (1. and 2.)
✅ Categories show as bullet points
✅ Individual items are nested properly

💾 Commit Your Work

Time: 3 minutes

When you have completed your "Introduction to HTML" project:

Check your work - Make sure your preview matches the expected output
Add a commit message - Click where it says "Message" and type: "Complete HTML monthly agenda exercise"
Fork and Commit - Click the "Fork and Commit" button to save your work to your GitHub account
Copy your project URL - You'll need this for submission

ℹ️ Important Make sure to click "Fork and Commit" before submitting - this saves your work!

📤 Project Submission

When you have completed your "Introduction to HTML" project, submit it using the link below:

⚠️ Submission Required Submit Your Project Here

You'll need:

Your StackBlitz project URL

Your name

Any questions or feedback

🛠️ Troubleshooting

Common Issues and Solutions

My lists don't look right:

Check that every opening tag has a closing tag
Make sure your <li> tags are inside <ul> or <ol> tags
Verify your indentation matches the examples

The preview isn't updating:

Try refreshing the preview panel
Make sure you saved your file (Ctrl+S or Cmd+S)
Check for any red error indicators in your code

My browser tab still shows the old title:

Make sure you changed the <title> tag, not the <h1> tag
Save your file and refresh the preview

tip Still Stuck?

Compare your code with the complete example in Step 10
Ask a classmate or instructor for help
Check the browser console for error messages (F12 key)

📚 Additional Resources

MDN HTML Basics - Great beginner guide
HTML List Elements Guide - Deep dive into lists
W3Schools HTML Tutorial - Interactive examples

🎉 Congratulations!

Great job completing your first HTML project! You've learned:

✅ Basic HTML structure
✅ How to use headings and titles
✅ Creating nested lists
✅ Adding links
✅ Using comments

Next up: You'll learn how to make your webpage look beautiful with CSS!

Activity 2 of 14

Activity 2: Introduction to HTML

Practice and reinforce the concepts from Lesson 2

Basic HTML Activity

What you'll learn

In this activity, you'll:

Build your first HTML webpage from scratch
Use HTML tags to structure content
Create nested lists for organizing information
Add links to external websites
Practice proper HTML syntax and formatting

Total time: 45-60 minutes

💻 Download your material

What you'll do: Open the project and familiarize yourself with the interface Time: 5 minutes

Open StackBlitz and access the template:
StackBlitz Project
stackblitz-starters-ftv9fkne
Open in StackBlitz
Alternative: Download the source code from StackBlitz using the Download Project button if you prefer using your own IDE
Look for the files panel on the left side - click on index.html
You'll see three panels:
- Left: File explorer
- Middle: Code editor
- Right: Live preview

tip Click the "Open in New Tab" button in the preview panel to see your webpage in a full browser tab - this makes it easier to see your changes!

⚠️ Important: Before You Start DO NOT DELETE any existing files in the template:

Package files

Configuration files

Any files you didn't create

ONLY EDIT the index.html file for this activity.

📚 HTML Tags Reference

Time: 5 minutes to read

HTML uses "tags" to mark up content. Tags are written with angle brackets < >:

How Tags Work:

<tagname>content</tagname> - Most tags come in pairs (opening and closing)
<tagname /> - Some tags are self-closing
Tags tell the browser how to display content

Common HTML Tags You'll Use Today:

Tag	Purpose	Example
`<h1>` to `<h6>`	Headings (h1 is biggest)	`<h1>My Title</h1>`
`<p>`	Paragraphs	`<p>Some text</p>`
`<ol>`	Ordered lists (1, 2, 3...)	`<ol><li>First</li></ol>`
`<ul>`	Unordered lists (bullets)	`<ul><li>Item</li></ul>`
`<li>`	List items	`<li>List item</li>`
`<a>`	Links	`<a href="url">Click me</a>`
`{/* */}`	Comments (hidden)	`{/* Note to self */}`

💻 Steps to Complete Your Introduction to HTML

Step One: Understanding the HTML Structure

What you'll learn: Every HTML page has the same basic structure Time: 3 minutes

Look at your index.html file. You'll see:

php-template

<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML exercise</title>
  </head>
  <body>
    {/* Your content goes here */}
  </body>
</html>

Explanation:

<!DOCTYPE html> - Tells browser this is HTML5
<html> - Contains everything
<head> - Information about the page (not visible to users)
<title> - What appears in browser tab
<body> - All visible content goes here

Step 2: Change the Page Title

What you'll do: Change what appears in the browser tab Time: 2 minutes

Find this line in your code: <title>My first HTML exercise</title>
Change it to: <title>My Monthly Agenda</title>
Save your file (Ctrl+S or Cmd+S)
Look at your preview - the browser tab should now say "My Monthly Agenda"

tip StackBlitz auto-saves your work, but it's good practice to save manually!

Step 3: Create Your Main Heading

What you'll do: Add the biggest heading to your page Time: 2 minutes

Find the <body> section in your code
Between <body> and </body>, add this line:
html
```
<h1>My Monthly Agenda</h1>
```
Save your file and check the preview - you should see "My Monthly Agenda" as a big heading

Step 4: Understanding Lists in HTML

What you'll learn: There are two types of lists Time: 3 minutes

Ordered Lists (<ol>) - Numbered lists (1, 2, 3...)

css

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

Unordered Lists (<ul>) - Bullet point lists

css

<ul>
  <li>First bullet</li>
  <li>Second bullet</li>
</ul>

tip Lists can be nested! You can put a list inside another list item to create sub-categories.

Step 5: Create Your Monthly Structure

What you'll do: Build the main structure with months Time: 3 minutes

After your <h1> heading, add this ordered list:

html

<ol>
  <li>November</li>
  <li>December</li>
</ol>

Save and check your preview. You should see:
- 1. November
- 1. December

Step 6: Add Categories Under November

What you'll do: Create subcategories using nested lists Time: 3 minutes

Replace your November line with this expanded version:

html

<li>November
  <ul>
    <li>Goals</li>
    <li>To-dos</li>
    <li>Events</li>
  </ul>
</li>

What's happening here:
- We kept "November" as a list item
- Inside it, we added an unordered list (<ul>) with bullet points
- This creates subcategories under November

tip Make sure to properly indent your nested lists - it helps you see the structure clearly!

Step 7: Add Specific Items Under Goals

What you'll do: Create another level of nesting Time: 3 minutes

Expand your Goals section like this:

html

<li>Goals
  <ul>
    <li>Lose 1kg of weight</li>
    <li>Walk a total of 100,000 km</li>
  </ul>
</li>

Save and check - you now have a third level of nesting!

Step 8: Complete All November Categories

What you'll do: Add items under To-dos and Events Time: 5 minutes

Replace your entire November section with:

html

<li>November
  <ul>
    <li>Goals
      <ul>
        <li>Lose 1kg of weight</li>
        <li>Walk a total of 100,000 km</li>
      </ul>
    </li>
    <li>To-dos
      <ul>
        <li>Adopt a cat</li>
      </ul>
    </li>
    <li>Events
      <ul>
        <li>Telebort class weekly at Sat/5pm</li>
        <li>Family gathering on the 24th</li>
      </ul>
    </li>
  </ul>
</li>

tip Common Challenge If your lists don't look right, check that:

Every <li> has a closing </li>
Every <ul> has a closing </ul>
Your indentation matches the example

Step 9: Add December Section

What you'll do: Create the same structure for December Time: 5 minutes

Now add the December section with the same pattern:

html

<li>December
  <ul>
    <li>Goals
      <ul>
        <li>Try 5 new restaurants</li>
      </ul>
    </li>
    <li>To-dos
      <ul>
        <li>Feed cat</li>
        <li>Adopt another cat</li>
      </ul>
    </li>
    <li>Events
      <ul>
        <li>Outing with friends on the 20th</li>
        <li>Cousin birthday on the 27th</li>
      </ul>
    </li>
  </ul>
</li>

This goes right after your November </li> closing tag

Step 10: Verify Your Complete HTML Structure

What you should have: Here's what your complete <body> section should look like: Time: 2 minutes to verify

css

<body>
  <h1>My Monthly Agenda</h1>
  
  <ol>
    <li>November
      <ul>
        <li>Goals
          <ul>
            <li>Lose 1kg of weight</li>
            <li>Walk a total of 100,000 km</li>
          </ul>
        </li>
        <li>To-dos
          <ul>
            <li>Adopt a cat</li>
          </ul>
        </li>
        <li>Events
          <ul>
            <li>Telebort class weekly at Sat/5pm</li>
            <li>Family gathering on the 24th</li>
          </ul>
        </li>
      </ul>
    </li>
    
    <li>December
      <ul>
        <li>Goals
          <ul>
            <li>Try 5 new restaurants</li>
          </ul>
        </li>
        <li>To-dos
          <ul>
            <li>Feed cat</li>
            <li>Adopt another cat</li>
          </ul>
        </li>
        <li>Events
          <ul>
            <li>Outing with friends on the 20th</li>
            <li>Cousin birthday on the 27th</li>
          </ul>
        </li>
      </ul>
    </li>
  </ol>
</body>

Step 11: Add a Link (Optional)

What you'll learn: How to create clickable links Time: 3 minutes

Add this anywhere in your page (perhaps after the heading):

html

<p>Watch HTML tutorials on <a href="https://www.youtube.com/">YouTube</a></p>

How it works:
- <p> creates a paragraph
- <a href="URL"> creates a clickable link
- The text between <a> and </a> is what users click on

tip Links open in the same tab by default. To open in a new tab, add target="_blank" to your link: <a href="https://www.youtube.com/" target="_blank">YouTube</a>

Step 12: Add Comments to Your Code

What you'll learn: How to add notes that don't appear on the page Time: 2 minutes

Add comments to organize your code:

html

{/* This is the main heading */}
<h1>My Monthly Agenda</h1>

{/* November agenda section */}
<li>November
  {/* ... rest of November code ... */}
</li>

{/* December agenda section */}
<li>December
  {/* ... rest of December code ... */}
</li>

Comments help you and others understand your code later!

Step 13: Check Your Final Output

What you should see: Your page should display exactly like the provided screenshot: Time: 2 minutes

tip Final Check

✅ Browser tab says "My Monthly Agenda"
✅ Main heading displays at the top
✅ November and December are numbered (1. and 2.)
✅ Categories show as bullet points
✅ Individual items are nested properly

💾 Commit Your Work

Time: 3 minutes

When you have completed your "Introduction to HTML" project:

Check your work - Make sure your preview matches the expected output
Add a commit message - Click where it says "Message" and type: "Complete HTML monthly agenda exercise"
Fork and Commit - Click the "Fork and Commit" button to save your work to your GitHub account
Copy your project URL - You'll need this for submission