Module 12: Capstone Project

🎓 Congratulations!

You've reached the final module of the HTML Fundamentals Course by Ethioweb.net! You've learned everything from basic document structure to semantic HTML5, forms, tables, multimedia, SEO, and best practices.

Now it's time to put it all together in a complete capstone project that demonstrates your mastery of HTML.

📋 Project Brief: Ethiopian Coffee House

You will build a 5-page website for a fictional Ethiopian coffee shop called "Abyssinian Brew" located in Addis Ababa. This project will test every skill you've learned.

Required Pages

Page	File	Required Content
Homepage	`index.html`	Hero section, about snippet, featured products, testimonials
About Us	`about.html`	Company story, mission/vision, team members with photos
Menu	`menu.html`	Food and drink items with prices in an accessible table
Gallery	`gallery.html`	Photo gallery with captions, using figure/figcaption
Contact	`contact.html`	Contact form, address, map embed, business hours

✅ Technical Requirements

Your project must meet all of these criteria to qualify for the certificate:

1. Valid HTML5

Every page must pass the W3C HTML Validator with zero errors
Correct DOCTYPE, html, head, and body structure on every page
UTF-8 charset and viewport meta tags on every page

2. Semantic HTML5 Structure

Use <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> appropriately
Proper heading hierarchy on every page (one h1, no skipped levels)
Navigation menu consistent across all 5 pages

3. Accessibility

All images have descriptive alt text
All form inputs have associated <label> elements
Tables use <thead>, <tbody>, and scope attributes
Language attribute set on html element

4. Links and Navigation

Working navigation between all 5 pages
External links open in new tabs with rel="noopener noreferrer"
At least one internal anchor link (page section navigation)
Email link using mailto:

5. Content Elements

At least one table (Menu page)
At least one form with 5+ fields (Contact page)
At least one list (ordered and unordered)
At least 4 images with figure/figcaption
Use of text emphasis tags (<strong>, <em>, <mark>)

6. SEO and Metadata

Unique, optimized <title> on every page (under 60 chars)
Meta description on every page (150-160 chars)
Open Graph tags on at least the homepage
Favicon linked in the head

7. Code Quality

Consistent indentation (2 or 4 spaces)
Logical file organization (images/ folder, etc.)
Helpful HTML comments for major sections
No inline styles (keep HTML and presentation separate)

🗂️ Suggested File Structure

abyssinian-brew/
├── index.html
├── about.html
├── menu.html
├── gallery.html
├── contact.html
├── css/
│   └── style.css
├── images/
│   ├── logo.png
│   ├── hero-coffee.jpg
│   ├── team/
│   │   ├── owner.jpg
│   │   ├── barista.jpg
│   │   └── manager.jpg
│   └── gallery/
│       ├── shop-interior.jpg
│       ├── coffee-beans.jpg
│       ├── brewing.jpg
│       └── customers.jpg
└── favicon.ico
            

💡 Page-by-Page Guide

Homepage (index.html)

<header>
    <img src="images/logo.png" alt="Abyssinian Brew Coffee House">
    <nav>...5 page links...</nav>
</header>

<main>
    <section>
        <h1>Welcome to Abyssinian Brew</h1>
        <p>Authentic Ethiopian coffee in the heart of Addis Ababa...</p>
    </section>

    <section>
        <h2>Our Featured Coffee</h2>
        <ul>...3-4 featured items...</ul>
    </section>

    <section>
        <h2>What Our Customers Say</h2>
        <blockquote>...testimonial...</blockquote>
    </section>
</main>

<footer>
    <p>&copy; 2026 Abyssinian Brew. All rights reserved.</p>
</footer>
            

About Us (about.html)

Company history with proper headings
Mission and vision statements
Team section with 3 members using figure/figcaption
Use <time> for founding date

Menu (menu.html)

Accessible table with <caption>
Categories: Coffee, Tea, Pastries, Traditional
Columns: Item, Description, Price (ETB)
Special dietary info marked with <mark> or <strong>

Gallery (gallery.html)

At least 6 images in <figure> elements
Each with <figcaption>
Lazy loading on images below the fold
Proper alt text for every image

Contact (contact.html)

Complete contact form (name, email, phone, subject, message)
Business hours in a table or definition list
Address with <address> tag
Map embed (use Google Maps embed code)
Social media links (external, with security attributes)

🏆 Submission Checklist

Before submitting your project, verify every item:

Final Checklist

☐ All 5 pages created and linked together
☐ W3C Validator shows 0 errors on every page
☐ Semantic HTML5 used throughout (no div soup)
☐ One h1 per page, proper heading hierarchy
☐ All images have alt text
☐ All forms have labels
☐ Tables are accessible with thead/tbody/scope
☐ Navigation works on every page
☐ External links use target="_blank" + rel="noopener noreferrer"
☐ Meta titles and descriptions on every page
☐ Consistent indentation and formatting
☐ Logical file and folder organization
☐ Favicon included
☐ UTF-8 and viewport meta tags on all pages

🎓 Earn Your Certificate

Once your capstone project passes all requirements, you are eligible for the HTML Foundations Professional certificate from Ethioweb.net.

View Your Certificate →