Project: Business card page

Overview of the 5-lesson project: a personal business card page with links and lists.

Project: Business card page

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

You'll use:

Document skeleton (DOCTYPE, html, head, body)
lang, charset, viewport, title
h1 (your name) and h2 (your title)
ul for a contact list, a with mailto/tel links
ol for a skills list, external links
hr for section separation

Ready? Let's start.

Project roadmap

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

Name and title: Set up the skeleton, fill head, add h1 and h2.
Contact list: Add email/phone links with ul and li.
Skills and links: Add a skills list with ol, open external links in a new tab.
Project final: Separate with hr, add the last section, finish the card.

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

Target business card

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

Name and title: h1 (your name) and h2 (your title)
Contact: mailto and tel links inside a ul
Skills: an ordered list inside ol
External link: a portfolio link opening in a new tab
Footer: hr and a short closing paragraph

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

Name and title

h1 and h2 heading
Contact list

ul + mailto/tel
Skills and links

ol + external link
Project final

hr + closing paragraph

Next lesson: Name and title

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies