Mini-Project: Egyptian Explorer's Business Card

Congratulations, young scribe! You've reached the mini-project where you'll combine everything you've learned in this module. Mohamed says: "The best way to solidify knowledge is to apply it in practice - just as the best way to learn to build pyramids was... building pyramids!"

In this project, you'll create a business card page for a fictional Egyptian explorer - an archaeologist who travels across Egypt, discovering ancient secrets. The page will use all the HTML elements you've learned: headings, paragraphs, text formatting, links, images, and more.

Project Structure

We start with a complete HTML skeleton. Remember - every HTML page needs <!DOCTYPE html>, the <html> tag, <head> and <body> sections:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>Dr. Amara Hassan - Explorer of Egypt</title>
6</head>
7<body>
8  <!-- We'll place all the business card content here -->
9</body>
10</html>

Step 1: Header and Introduction

Start with the main heading with the explorer's name and a short introductory paragraph. Use <h1> for the name and <p> with <strong> and <em> formatting:

1<h1>Dr. Amara Hassan</h1>
2<p><em>Archaeologist, explorer, and researcher of ancient Egypt</em></p>
3
4<hr>
5
6<p>Welcome to my page! I am <strong>Dr. Amara Hassan</strong> - for 15 years
7I've been exploring the mysteries of Ancient Egypt. My discoveries include
8<mark>previously unknown chambers</mark> in the Valley of the Kings and unique
9artifacts from the New Kingdom period.</p>

Note the use of:

• <em> - italics emphasizing the motto/title
• <hr> - horizontal line separating sections
• <strong> - bold for the important name
• <mark> - highlighting a key achievement

Step 2: "About Me" Section with Text Formatting

Add a section with a biography, using various formatting tags:

1<h2>About Me</h2>
2
3<p>I was born in <strong>Cairo</strong> and since childhood I was fascinated by
4ancient ruins. After studying at <em>Cairo University</em>, I earned
5a doctorate in archaeology from Oxford University.</p>
6
7<blockquote>
8  <p>"Every stone in Egypt has its story. Our task is to hear it
9  and tell the world."</p>
10</blockquote>
11
12<p>My main <strong>research areas</strong> are:</p>
13<p>
14  Pyramid architecture<br>
15  Hieroglyphs and writing<br>
16  Funeral rituals<br>
17  Daily life in ancient Egypt
18</p>

In this section, we applied:

• <blockquote> - quote, the explorer's life motto
• <br> - line breaks within a single paragraph (list without bullet points)
• A mix of <strong> and <em> for different emphasis

Step 3: Section with Photo and Caption

Add a photo of the explorer with a caption, using <figure> and <figcaption>:

1<h2>My Discoveries</h2>
2
3<figure>
4  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Kheops-Pyramid.jpg/500px-Kheops-Pyramid.jpg"
5       alt="The Great Pyramid of Cheops at sunset"
6       width="500">
7  <figcaption>The Great Pyramid of Cheops - the site of my most important research</figcaption>
8</figure>
9
10<p>In 2019, I discovered a <mark>hidden chamber</mark> near the
11<strong>Pyramid of Cheops</strong>. The chamber contained
12<em>47 papyri</em> with notes from the pyramid builders -
13the oldest known construction diaries!</p>

Key elements:

• <img> with src attribute (image URL), alt (description), and width (width)
• <figure> + <figcaption> - semantic wrapping of the image with a caption

Step 4: Section with Links

Add a section with links to external resources and contact information:

1<h2>Useful Links</h2>
2
3<p>Want to learn more about Ancient Egypt?
4Here are my favorite sources:</p>
5
6<p>
7  <a href="https://www.britannica.com/place/ancient-Egypt" target="_blank" rel="noopener noreferrer">
8    Encyclopedia Britannica - Ancient Egypt
9  </a>
10</p>
11
12<p>
13  <a href="https://www.metmuseum.org/about-the-met/collection-areas/egyptian-art" target="_blank" rel="noopener noreferrer">
14    Metropolitan Museum - Egyptian Art
15  </a>
16</p>
17
18<h2>Contact</h2>
19
20<p>Feel free to get in touch:</p>
21<p>
22  Email: <a href="mailto:amara.hassan@egypt-discoveries.com">amara.hassan@egypt-discoveries.com</a><br>
23  Phone: <a href="tel:+48123456789">+48 123 456 789</a>
24</p>
25
26<p><a href="#top">Back to top</a></p>

In the links, we applied:

• target="_blank" and rel="noopener noreferrer" - safely opening in a new tab
• mailto: - link that opens the email client
• tel: - phone call link (useful on phones)
• href="#top" - anchor link to the top of the page

Step 5: Footer with HTML Comment

End the page with a footer and code comments:

1<hr>
2
3<!-- Page footer -->
4<p>Page created as part of the CodeWorlds course - HTML/CSS World</p>
5<p>Last updated: 2024</p>
6
7<!--
8  TODO: In the future add:
9  - Photo gallery from expeditions
10  - Contact form
11  - Map of discoveries
12-->

Here we used:

• HTML comments <!-- --> - notes for the programmer, invisible on the page

Complete Structure

In summary, our business card contains:

• Headings (<h1>, <h2>) - section organization
• Paragraphs (<p>) - text content
• Formatting (<strong>, <em>, <mark>) - text emphasis
• Quote (<blockquote>) - the explorer's motto
• Lines (<hr>, <br>) - separators and line breaks
• Image (<img>) with <figure> and <figcaption> - photo with caption
• Links (<a>) - navigation, email, phone, anchors
• Comments (<!-- -->) - notes in the code

Mohamed summarizes: "You've created your first real HTML page! Every element you used has its place - like every stone in a pyramid. Now try it out in the editor below and create your own business card!"

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Business Card - Mohamed Al-Rashid</title>
6</head>
7<body>
8    <h1>Mohamed Al-Rashid</h1>
9    <p><em>Archaeologist and Discoverer of Ancient Mysteries</em></p>
10
11    <hr>
12
13    <figure>
14        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/All_Gizah_Pyramids.jpg/500px-All_Gizah_Pyramids.jpg"
15             alt="Pyramids of Giza - Mohamed's workplace"
16             width="500">
17        <figcaption>Pyramids of Giza - my favorite workplace</figcaption>
18    </figure>
19
20    <h2>About me</h2>
21    <p>I am an <strong>archaeologist</strong> with <mark>30 years of experience</mark>
22       in studying ancient civilizations. I specialize in
23       <em>deciphering hieroglyphs</em> and discovering forgotten tombs.</p>
24
25    <blockquote>
26        "Every stone in a pyramid tells a story - you just need to know how to listen."
27    </blockquote>
28
29    <h2>My discoveries</h2>
30    <ul>
31        <li>Tomb Nefertiti - <strong>2019</strong></li>
32        <li>Scrolls from the Library of Alexandria - <strong>2021</strong></li>
33        <li>Underground Temple of Osiris - <strong>2023</strong></li>
34    </ul>
35
36    <hr>
37
38    <h2>Contact</h2>
39    <p>Email: <a href="mailto:mohamed@pyramids.eg">mohamed@pyramids.eg</a></p>
40    <p>Website: <a href="https://example.com" target="_blank" rel="noopener noreferrer">www.pyramids.eg</a></p>
41    <p>© 2025 Mohamed Al-Rashid</p>
42</body>
43</html>