Demo Mode

No student ID available

Telebort | Learning to code made fun!

Activity 02: Introduction to HTML

Build your first HTML webpage from scratch using nested lists to create a monthly agenda.

📚 What You'll Learn

In this activity, you will:

✅ Understand basic HTML document structure
✅ Use headings, paragraphs, and list elements
✅ Create nested lists for organizing information
✅ Practice proper HTML syntax and indentation
✅ Add links to external websites

Estimated Time: 45-60 minutes

🎯 Activity Objective

Create a Monthly Agenda webpage that displays November and December with nested categories (Goals, To-dos, Events) and specific items under each category.

🚀 Quick Start

Option One: Using Dev Server (Recommended)

bash

# Run the setup script
./setup.sh

# Start the development server
npm start

# Open http://localhost:8080 in your browser

Option 2: Direct Browser

Simply open index.html in your web browser. No setup required!

📋 Requirements

HTML Structure Checklist

Page title set to "My Monthly Agenda"
Main heading (<h1>) displays "My Monthly Agenda"
Ordered list (<ol>) contains November and December
Each month has nested unordered list (<ul>) with categories
Categories have nested lists with specific items

November Section

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

December Section

Goals
- Try 5 new restaurants
To-dos
- Feed cat
- Adopt another cat
Events
- Outing with friends on the 20th
- Cousin birthday on the 27th

Optional Enhancements

Add paragraph with YouTube link
Add HTML comments to organize code
Customize content with your own agenda items

💡 HTML Tags Reference

Tag	Purpose	Example
`<h1>` to `<h6>`	Headings	`<h1>Main Title</h1>`
`<p>`	Paragraph	`<p>Text here</p>`
`<ol>`	Ordered list	`<ol><li>Item 1</li></ol>`
`<ul>`	Unordered list	`<ul><li>Bullet</li></ul>`
`<li>`	List item	`<li>List item</li>`
`<a>`	Link	`<a href="url">Link text</a>`
`<!-- -->`	Comment	`<!-- Note -->`

🏗️ Step-by-Step Guide

One. Change Page Title (2 min)

Update <title> tag to "My Monthly Agenda"
Check browser tab for the change

2. Add Main Heading (2 min)

Add <h1>My Monthly Agenda</h1> inside <body>
Save and preview

3. Create Month List Structure (3 min)

Add ordered list <ol> with November and December
Use <li> for each month

4. Add Categories (5 min)

Nest unordered lists <ul> inside each month
Add Goals, To-dos, Events as list items

5. Add Specific Items (10 min)

Create another level of nesting for specific items
Follow the requirements checklist above

6. Verify Structure (3 min)

Check that lists are properly nested
Ensure all tags are closed
Verify indentation for readability

7. Optional: Add Link (3 min)

Add paragraph with YouTube link
Use <a href=""> syntax

8. Add Comments (2 min)

Organize code with HTML comments
Document each section

🎨 Expected Output

Your webpage should display:

Title bar: "My Monthly Agenda"
Main heading: "My Monthly Agenda" (large text)
Numbered months: One. November, 2. December
Bullet categories under each month
Nested items under each category

markdown

My Monthly Agenda

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

2. December
   • Goals
     - Try 5 new restaurants
   • To-dos
     - Feed cat
     - Adopt another cat
   • Events
     - Outing with friends on the 20th
     - Cousin birthday on the 27th

🐛 Troubleshooting

Lists don't look right

Problem: Nesting is incorrect
Solution: Check that every <li> is inside <ul> or <ol>
Tip: Match your indentation with the examples

Preview not updating

Problem: File not saved or browser cached
Solution: Save file (Ctrl+S / Cmd+S), hard refresh browser (Ctrl+Shift+R / Cmd+Shift+R)

Missing closing tags

Problem: Unclosed tags break structure
Solution: Every <tag> needs </tag> (except self-closing tags)
Tip: Use editor's bracket matching

Wrong title display

Problem: Changed <h1> instead of <title>
Solution: <title> goes in <head>, <h1> goes in <body>

📚 Learning Resources

MDN: HTML Basics - Comprehensive beginner guide
MDN: HTML Lists - Deep dive into list elements
W3Schools: HTML Tutorial - Interactive examples and exercises

🎓 Completion Checklist

Before submitting:

All requirements met (see Requirements section)
HTML validates (check with W3C Validator)
Code is properly indented
All tags properly closed
Preview matches expected output

🚀 Next Steps

After completing this activity:

Experiment: Customize with your own monthly agenda
Extend: Add more months or categories
Learn More: Prepare for Activity 03 (Introduction to CSS) to style your webpage
Challenge: Create a yearly agenda with all 12 months

Activity 02 - Introduction to HTML W1: Front-end Design & User Experience Telebort Engineering Time: 45-60 minutes

Template 2: Intro To Html

📦 Project Files Included: