HTML
Project final - Business card
Combine all sections and finalize the business card page.
Final step: hr and closing
You've reached the final step. The card has a name, title, contact, skills, and an external link. Now you'll add the last section: an <hr> to separate sections, and a short closing paragraph.
hr signals a topic change; here it marks the move from main content to the closing. The paragraph can hold a copyright year or a short goodbye. With this step, the card is complete.
Finishing the card
As you finish the card, keep these points in mind:
- Consistent indentation: indent each section the same way; readability improves.
- Meaningful order: name, title, contact, skills, link, closing. A logical flow.
- Short text: everything on a card stays short; no long paragraphs.
These principles strengthen both this project and any future business card page.
Exercise Finish the card: add hr and closing
Take the body with skills and the link from the previous step. After the portfolio link, add an <hr>. After hr, add a <p> with a short closing (e.g. © 2025 Alex York). With this, the card is complete.
Show example solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alex York - Business card</title>
</head>
<body>
<h1>Alex York</h1>
<h2>Front-end developer</h2>
<ul>
<li><a href="mailto:alex.york@yorkstudio.com">Email</a></li>
<li><a href="tel:+15551234567">Phone</a></li>
</ul>
<ol>
<li>HTML and CSS</li>
<li>JavaScript</li>
<li>Accessibility</li>
</ol>
<a href="https://www.github.com/" target="_blank" rel="noopener noreferrer">My portfolio</a>
<hr>
<p>© 2025 Alex York</p>
</body>
</html>
Card complete!
Congratulations! After 5 lessons you have a working business card page: name, title, contact, skills, an external link, and a closing. Each lesson's starting code carried the previous lesson's solution; you only added the new piece.
You can now fill it with your own details, extend the skills list, or add new links. The card works as a real digital contact.
Test yourself
-
Where is the best place for the <hr> tag in this project?
- At the very top, before h1
- After every paragraph
- Between the skills list and the closing paragraph
- Inside the title element
Show answer
Between the skills list and the closing paragraph — Correct. hr signals a topic change; the move from main content to closing fits this.
-
Complete the closing paragraph's tag
<____>© 2025 Alex York</p>
Show answer
<p>© 2025 Alex York</p>
-
Match each piece to the lesson that adds it
- h1 and h2
- Name and title
- ul, mailto, tel
- Contact list
- ol, target, rel
- Skills and links
- hr and p
- Project final
Next lesson: Adding images
