HTML Course 19. Final integrative project in professional HTML

HTML Course 19: Final Integrative Project in Professional HTML

This final integrative project brings together all the HTML concepts you’ve learned, pushing you to build a small yet fully semantic, accessible, well-structured website. You will apply semantic elements, microdata, ARIA roles, multimedia embedding, form validation, responsive images, navigation structures and best practices for SEO and accessibility.

1. Project Objectives

• Design a multi-page site with semantic HTML5 structure.
• Ensure accessibility (WCAG) and ARIA compliance.
• Implement navigation, forms, tables and multimedia.
• Use proper folder/file naming and organization.
• Validate code and follow SEO best practices.

2. Prerequisites

• Familiarity with semantic tags: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>.
• Knowledge of form controls, input types, labels and validation.
• Basics of images, video/audio embedding, responsive <picture>.
• Understanding of accessibility attributes (aria-label, aria-hidden).

3. Project Description

Create a fictional “Coffee Corner” website composed of three pages:

1. Home (index.html): Overview, promo banner, featured products.
2. Menu (menu.html): Table of beverages with price and description.
3. Contact (contact.html): Contact form and embedded map.

4. Folder & File Structure

5. Semantic Layout Example (index.html)

The site skeleton uses header, nav, main and footer. IDs aid in-internal links and ARIA attributes enhance navigation.

<header role='banner'>
  <h2 id='site-title'>Coffee Corner</h2>
  <nav role='navigation' aria-labelledby='nav-label'>
    <h3 id='nav-label'>Main Menu</h3>
    <ul>
      <li><a href='index.html'>Home</a></li>
      <li><a href='menu.html'>Menu</a></li>
      <li><a href='contact.html'>Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <section aria-labelledby='promo-title'>
    <h3 id='promo-title'>Spring Brew Specials</h3>
    <p>Enjoy our limited-time cold brews with seasonal flavors.</p>
    <picture>
      <source media='(max-width:600px)' srcset='assets/images/coffee-small.jpg'>
      <img src='assets/images/coffee-large.jpg' alt='Iced coffee cup on wooden table'>
    </picture>
  </section>

  <aside role='complementary'>
    <h4>Opening Hours</h4>
    <ul>
      <li>Mon–Fri: 7am–7pm</li>
      <li>Sat–Sun: 8am–5pm</li>
    </ul>
  </aside>
</main>

<footer role='contentinfo'>
  <p>&copy; 2024 Coffee Corner. All rights reserved.</p>
</footer>

6. Menu Table with Accessibility

Use <caption> and scope attributes for screen readers.

<main>
  <article>
    <h3>Our Menu</h3>
    <table>
      <caption>Coffee Corner Beverage Menu</caption>
      <thead>
        <tr>
          <th scope='col'>Item</th>
          <th scope='col'>Description</th>
          <th scope='col'>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Espresso</td>
          <td>Strong and bold shot</td>
          <td>$2.50</td>
        </tr>
        <tr>
          <td>Latte</td>
          <td>Espresso with steamed milk</td>
          <td>$3.50</td>
        </tr>
      </tbody>
    </table>
  </article>
</main>

7. Contact Form with Validation

Include labels, required attributes, placeholders and ARIA hints.

<main>
  <section>
    <h3>Get in Touch</h3>
    <form action='#' method='post' novalidate>
      <div>
        <label for='name'>Name</label>
        <input type='text' id='name' name='name' required aria-required='true' placeholder='Your full name'>
      </div>
      <div>
        <label for='email'>Email</label>
        <input type='email' id='email' name='email' required aria-required='true' placeholder='you@example.com'>
      </div>
      <div>
        <label for='message'>Message</label>
        <textarea id='message' name='message' rows='5' required aria-required='true' placeholder='Write your message here'></textarea>
      </div>
      <button type='submit'>Send</button>
    </form>
  </section>
</main>

8. Embedding a Map

Use <iframe> with title and loading attribute.

<section aria-labelledby='map-title'>
  <h3 id='map-title'>>Find Us</h3>
  <iframe
    src='https://www.google.com/maps/embed?pb=!1m18...'
    width='600' height='450'
    style='border:0;'
    allowfullscreen=''
    loading='lazy'
    title='Coffee Corner Location on Google Maps'
  ></iframe>
</section>

9. SEO & Metadata

• <title>Coffee Corner – Home</title>
• <meta name=’description’ content=’Coffee Corner offers premium brews and cozy atmosphere.’>
• Use Open Graph tags for social sharing (<meta property=’og:title’>, <meta property=’og:image’>).

10. Validation & Testing

• Run through W3C HTML validator.
• Test keyboard navigation and screen-reader announcements.
• Check mobile viewports for image scaling.
• Verify form errors and success messages.

11. Deployment

Upload via FTP or GitHub Pages. Ensure all asset paths (relative URLs) are correct. Include a robots.txt and optional sitemap.xml for crawlers.

Conclusion

By completing this integrative project, you demonstrate mastery of professional HTML: semantic structure, accessibility, responsive media, form handling, tables, SEO, and deployment readiness. Congratulations on reaching the pinnacle of this course!