Overview

Work through all 7 lessons in the HTML 101 series on code-and-design.org. Each lesson has a short reading and a CodePen exercise. Complete the exercise for every lesson, then group all 7 pens into a single CodePen Collection and submit the collection link.

Instructions

Step 1: Complete All 7 HTML 101 Lessons

Go to code-and-design.org/1/html-101/ and work through each lesson in order. Make sure you're signed into CodePen before you start. For each lesson, complete the exercise in CodePen and save it with the name shown below:

#	Lesson	Name Your Pen
1	The HTML Skeleton	HTML 101 — The HTML Skeleton
2	Nesting & Hierarchy	HTML 101 — Nesting & Hierarchy
3	Annotating Your Code	HTML 101 — Annotating Your Code
4	Tagging Your Content	HTML 101 — Tagging Your Content
5	Addressing Your Elements	HTML 101 — Addressing Your Elements
6	Styling from the Inside Out	HTML 101 — Styling from the Inside Out
7	Building Blocks	HTML 101 — Building Blocks

Step 2: Create a CodePen Collection

Group all 7 pens into one Collection for submission:

1. Go to codepen.io and make sure you're logged in
2. Click your profile avatar → Collections
3. Click New Collection and name it: HTML 101 – [Your Name]
4. Add all 7 pens to the collection
5. Open the collection page and copy the URL — it will look like: https://codepen.io/yourusername/collections/abc123

Step 3: Submit Your Collection Link

Paste the collection URL in the text entry box below.

Before You Submit

• ✅ All 7 pens are saved and named correctly
• ✅ All 7 pens are in your collection
• ✅ Your collection is set to Public (not Private)
• ✅ Open the collection URL in a new tab and confirm all 7 pens appear

Submit the single collection link below.

5 points per lesson + 10 points for setting up and submitting the collection.