HTML Mini Project — Personal Site

Previously, the summary mapped your HTML toolkit and pointed here as the practice step. This lesson is not another skill map. It is a build brief: plan three pages, share one navigation shell, fill real content, and prove the site against a short acceptance table.

Why a mini project now

Direct answer

1) Create at least three files: index.html, about.html, contact.html.
2) Reuse the same header / nav / footer landmarks on every page with working links between them.
3) Put real intro text on home, a short story on about, and a labeled name/email/message form on contact.
4) Add one informative image with meaningful alt, plus a skills list or small facts table.
5) Tab through with the keyboard; fix missing labels, broken links, and heading jumps.
6) Mark each row in the acceptance table before you call the project done.

📊 Acceptance criteria

Item	Done when
Shared nav	Same landmark links work on every page
Semantics	header, nav, main, and footer on each page
Home & about	Real paragraphs — not placeholder lorem forever
Media	At least one informative image with useful alt
Data	A skills list or a small facts table
Form	Labeled name, email, message + a real submit button
Quality	Keyboard tab order makes sense; no unlabeled controls

Plan before you type

Sketch on paper (or a notes file) first: site name, three page purposes, which photo you will use, and what skills or facts belong on about. Decide folder layout — keep all three HTML files in one folder for simple relative links (about.html, not a maze of ../). Naming the person or brand once keeps the h1 and titles consistent across pages.

Shared shell — start here

Copy one header/nav into every page, then only change the main content. Relative href values must match your filenames exactly (case matters on some hosts). Keep a real <button type="submit"> on the form later — do not fake submit with a styled empty div.

Shared nav starter

html

<header>
<h1>Alex Site</h1>
<nav aria-label="Main">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main>
<!-- page content -->
</main>
<footer>
<p>© Alex</p>
</footer>

Reading the shell

header + nav + main + footer give every page clear landmarks
aria-label on nav helps when a page might gain a second nav later
Relative links tie the three files into one site
Repeat this shell; only swap what sits inside main
Put a short site title in each page’s <title> as well as the visible h1
Summary listed habits — this shell is where you apply them together

Contact page form starter

The contact page is where form skills meet the project. Pair every control with a visible <label> (use for/id or wrap the control). Include name attributes so a future backend or mailto: workflow has field names. A real submit control belongs in the markup even if you are not posting to a server yet.

Contact form starter

html

<form action="#" method="post">
<p>
<label for="name">Name</label>
<input id="name" name="name" type="text" required>
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
</p>
<p>
<label for="msg">Message</label>
<textarea id="msg" name="message" rows="5" required></textarea>
</p>
<button type="submit">Send</button>
</form>

Build order that works

Duplicate the shared shell into three files; fix nav links until every page reaches the others.
Write home intro (who you are + what the site is for) and about story (background + skills list or facts table).
Drop one photo into an images/ folder; set src and a specific alt that describes the photo’s meaning.
Paste the contact form; confirm labels, names, and the submit button.
Open all three pages in the browser; resize narrow; tab from the first link to the submit button.
Tick every acceptance row — then optionally add light CSS later, not before structure is honest.

Easy mistakes on this project

Copy-pasting nav once, then editing only one page so links drift out of sync
Contact inputs with placeholders only and no <label>
Using a layout table for the whole page instead of landmarks + CSS later
Empty alt="" on a portrait or project photo that carries meaning
Leaving lorem ipsum on home/about and calling the project “done”
Jumping into frameworks or heavy CSS before the three pages validate
Forgetting the summary habit: structure and labels first; look second

Summary

This session is a hands-on personal-site build, not another course map
Three pages share header/nav/main/footer with working relative links
Combine media, a list or table, and a labeled contact form
Use the acceptance table as your definition of done
Keyboard-check before you polish with CSS
Next optional topics (SVG and beyond) are extras — ship this site first

Short reminder

If you get stuck, return to the acceptance table — not to memorizing new tags. The goal is practice: combine this course’s skills into one small site you can open in a browser.

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓

Questions

🎯

70%

To Pass

♾️

∞

Time

🔄

∞

Attempts

📝 Instructions

Read each question carefully
Select the best answer for each question
You can retake the quiz as many times as you want
Your progress will be shown at the top