We use cookies to enhance your experience on the site

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:

```

```
— italics emphasizing the motto/title
```
<hr>
```
— horizontal line separating sections
```

```
— bold for the important name
```

```
— 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
```
 
```
— line breaks within a single paragraph (list without bullet points)
A mix of
```

```
and
```

```
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/800px-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><sub>Page created as part of the CodeWorlds course — HTML/CSS World</sub></p>
5<p><sup>Last updated: 2024</sup></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
```

```
and
```

```
— subscript and superscript

Complete Structure

In summary, our business card contains:

Headings (
```
<h1>
```
,
```
<h2>
```
) — section organization
Paragraphs (
```

```
) — text content
Formatting (
```

```
,
```

```
,
```

```
,
```

```
,
```

```
) — text emphasis
Quote (
```
<blockquote>
```
) — the explorer's motto
Lines (
```
<hr>
```
,
```
 
```
) — 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!"

Go to CodeWorlds→