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