Loading...
HTML Mini Project — Personal Site
Theory sticks when you build. Create a tiny personal site that reuses the skills from this course.
Direct answer
Make at least three pages (index.html, about.html, contact.html) sharing a semantic header/nav/footer. Include real text, one image with alt, a list or table of facts, and a contact form with labeled fields. Check keyboard navigation and small-screen overflow.
📊 Acceptance criteria
| Item | Done when |
|---|---|
| Shared nav | Links work between all pages |
| Semantics | header/nav/main/footer present |
| Media | At least one informative image with alt |
| Data | A list or small table of facts |
| Form | Labeled controls + submit button |
| Quality | No missing labels; headings make sense |
Shared nav starter
html
HTML Code
<header>
<h1>Alex Site</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
</header>Try it (the project)
- Create the three HTML files with shared landmarks
- Write a short home intro and an about story
- Add a contact form (name, email, message)
- Add one image and a skills list
- Tab through the site; fix anything unclear
Easy mistakes
- Different nav markup on every page that drifts out of sync
- Contact inputs without labels
- Decorative layout tables instead of CSS later
- Skipping alt on a photo that conveys meaning
Summary
- Build a small multi-page personal site
- Reuse semantics, media, lists/tables, and forms
- Meet the acceptance table
- Then polish with CSS in your next learning step
🧠 Test Your Knowledge
Ready to Start
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
4
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