Demo Mode

No student ID available

Telebort | Learning to code made fun!

Activity 02: Introduction to HTML - Discovery Challenge

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

🎯 Learning Objectives

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

🚀 Getting Started (See Results in 30 Seconds!)

Option One: Direct Browser (Fastest)

bash

# Just open index.html in your browser
open index.html
# or double-click the file

Option 2: Using Dev Server

bash

./setup.sh
npm start
# Open http://localhost:8080

🎯 What's Already Working

When you open index.html, you'll see:

✅ Complete November Section - Working example with full nested structure
- Goals with 2 sub-items (Lose 1kg of weight, Walk 100,000 km)
- To-dos with 1 sub-item (Adopt a cat)
- Events with 2 sub-items (Telebort class, Family gathering)
✅ Professional Styling - Clean layout with blue theme and shadows
✅ Proper HTML Structure - Page title, heading, and ordered list
⚠️ TODO: December section (you'll build this following November's pattern)

📋 Your Tasks (Complete 30% remaining)

TODO 1: Build December Section (Medium)

Location: index.html - After November </li> closing tag, inside the <ol> list

Success Criteria:

Create a <li> element for December matching November's structure
Add <strong>December</strong> for the month name
Include nested <ul> with three categories: Goals, To-dos, Events
Each category should have its own nested list with specific items
Proper indentation matching November's format

Content Requirements:

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

Hints:

Copy the entire November <li> section (lines 16-40 in index.html)
Change "November" to "December"
Replace the sub-items with December's content
Keep the exact same nesting pattern: <ul> inside <li> inside <ul> inside <li>
The styling will automatically apply (already done for you!)

Expected Output:

markdown

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

TODO 2: Add YouTube Link (Easy - Optional)

Location: index.html - After the closing </ol> tag

Success Criteria:

Add a paragraph with text and a link to YouTube HTML tutorials
Use <a> tag with href and target="_blank" attributes
Link text should describe what users will find

Hints:

Look at the HTML Tags Reference table below for <a> tag syntax
The target="_blank" attribute opens the link in a new tab
Wrap the link inside a <p> paragraph tag
Use a YouTube search URL like: https://www.youtube.com/results?search_query=html+nested+lists+tutorial

💡 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: