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
:computer: 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: Introduction to HTML
- 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!
:warning: 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.htmlfile for this activity.
:books: 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 */} |
:computer: 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:
html
<!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...)
html
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Unordered Lists (<ul>) - Bullet point lists
html
<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:
-
- November
-
- 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
html
<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
- :white_check_mark: Browser tab says "My Monthly Agenda"
- :white_check_mark: Main heading displays at the top
- :white_check_mark: November and December are numbered (1. and 2.)
- :white_check_mark: Categories show as bullet points
- :white_check_mark: Individual items are nested properly
:emoji: 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
:information_source: Important Make sure to click "Fork and Commit" before submitting - this saves your work!
:emoji: Project Submission
When you have completed your "Introduction to HTML" project, submit it using the link below:
:warning: Submission Required Submit Your Project Here
You'll need:
- Your StackBlitz project URL
- Your name
- Any questions or feedback
:hammer_and_wrench: 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)
:books: Additional Resources
- MDN HTML Basics - Great beginner guide
- HTML List Elements Guide - Deep dive into lists
- W3Schools HTML Tutorial - Interactive examples
:tada: Congratulations!
Great job completing your first HTML project! You've learned:
- :white_check_mark: Basic HTML structure
- :white_check_mark: How to use headings and titles
- :white_check_mark: Creating nested lists
- :white_check_mark: Adding links
- :white_check_mark: Using comments
Next up: You'll learn how to make your webpage look beautiful with CSS!