Project: About me page

Overview of the 5-lesson project: you'll build a personal about page.

Project: About me page

In this 5-lesson project you'll build an about me page. Each lesson adds one piece, and by the final lesson you'll have a complete introduction page.

You'll use:

Document skeleton (DOCTYPE, html, head, body)
lang, charset, viewport, title
h1 (your name) and h2 (your title)
Paragraphs and emphasis with strong, em
Section separation with mark, hr, br
Documentation with comments

Ready? Let's start.

Project roadmap

Here's how we'll build the project step by step:

Skeleton and title: Take the empty skeleton, fill head with lang, charset, viewport, and title.
Introductory text: Add h1 (your name), h2 (your title), and paragraphs; emphasize with strong and em.
Emphasis and separation: Mark key words with mark, separate sections with hr, break lines with br.
Project final: Combine everything and document with comments.

Each lesson's starting code contains the previous lesson's solution; you only add the new piece.

Target about me page

At the end of the project you'll have this structure:

Top heading: h1 (your name) and h2 (your title)
Introduction: paragraphs, with strong and em emphasis
Section break: an hr transition
Highlights: mark for marked words, br for line breaks
Documented: comments explaining each section

You'll build this step by step across 5 lessons.

Exercise Start with an empty document skeleton

To start the project, write an empty HTML document skeleton. It should contain DOCTYPE, <html>, <head>, and an empty <body>. We'll add lang, meta, and headings in later lessons.

Show example solution

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Test yourself

How does starting code work in a project group?
- Each lesson's starting code contains the previous lesson's solution
- Each lesson starts with an empty page
- There is no starting code; everything is written from scratch
- Starting code only appears in the final lesson
Show answer

Each lesson's starting code contains the previous lesson's solution — Correct. In a project, starting code accumulates; you only add the new piece.
Match each lesson to the piece it adds

Skeleton and title

DOCTYPE + head + title
Introductory text

h1, h2, p, strong, em
Emphasis and separation

mark, hr, br
Project final

comments + all pieces

Next lesson: Skeleton and title

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies