Skip to main content

Phase 7 Exercises: Modern HTML Ecosystem 🔧

Mentor's Note: The modern HTML ecosystem goes beyond browser pages — you'll build email templates that work across clients, create reusable Web Components, and master DevTools for debugging and performance auditing. These skills are what employers look for!

📍 Prerequisites​

Before attempting these exercises, complete these lessons:

🎯 Exercise Flow​

🔰 Starter Challenge: HTML Email Newsletter Template​

Title​

Create an HTML Email Newsletter Template

Description​

Build an HTML email newsletter that renders correctly across email clients (Gmail, Outlook, Apple Mail). Use a table-based layout with inline CSS styles, a single-column design for mobile readability, and email-safe fonts. Include a header with logo placeholder, main content area with an article card, and a footer with unsubscribe link.

Learning Objectives​

  • Use table-based layout (<table>, <tr>, <td>) for email compatibility
  • Apply all styles inline (no <style> block or external CSS)
  • Use font stacks with email-safe fallbacks (Georgia, Arial, sans-serif)
  • Ensure the design works at 600px max width
  • Include proper doctype for email (<!DOCTYPE html> with XHTML transitional)
  • Add an unsubscribe link in the footer (CAN-SPAM compliance)

Expected Output​

An HTML email template showing:

  • A centered, 600px-wide table container
  • A header row with a logo placeholder image
  • A hero row with a headline and introductory paragraph
  • A content row with an article card (image + text)
  • A footer row with social media icon links and unsubscribe link
  • All styles applied via inline style attributes only
  • Renders correctly in at least Gmail and Apple Mail

⭐ Medium Challenge: Build a Web Component​

Title​

Build a Basic Web Component with Template and Shadow DOM

Description​

Create a custom HTML element using the Web Components API. Define a custom element with customElements.define(), attach a Shadow DOM for style encapsulation, and use an HTML <template> for the component's markup. Build something useful like a <user-card> component that displays a name, title, and avatar image.

Learning Objectives​

  • Define a custom element class extending HTMLElement
  • Use customElements.define() to register the element
  • Create a Shadow DOM root with attachShadow({ mode: 'open' })
  • Define markup using an HTML <template> element
  • Style the component with scoped CSS inside the shadow root
  • Use <slot> elements for content projection

Expected Output​

An HTML page that uses a custom element:

  • A <user-card> element rendered on the page
  • The element displays a name, job title, and avatar image
  • The element's styles are encapsulated in the Shadow DOM (no leakage)
  • The element uses <slot> to accept projected content
  • The element is reusable — multiple <user-card> instances on the same page

🏆 Hard Challenge: DevTools Audit & Document Findings​

Title​

Audit a Page Using DevTools and Document Findings

Description​

Take any existing HTML page and run a comprehensive audit using Chrome DevTools. Test with Lighthouse (Performance, Accessibility, Best Practices, SEO), inspect the page's computed styles and box model, analyze the Coverage tab for unused CSS/JS, and check the Network tab for load performance. Document all findings in a structured report with screenshots and recommendations.

Learning Objectives​

  • Run Lighthouse audits for all categories (Performance, Accessibility, Best Practices, SEO)
  • Use the Elements panel to inspect and modify the DOM
  • Use the Coverage tab to find unused CSS and JavaScript
  • Use the Network panel to analyze resource loading and waterfall charts
  • Use the Performance panel to record and analyze runtime performance
  • Write a clear, actionable audit report

Expected Output​

A documented audit report including:

  • Lighthouse scores for all categories (with screenshots)
  • A list of all issues found, organized by category
  • Specific, actionable recommendations for each issue
  • Before/after screenshots showing identified issues
  • A summary of the most critical fixes needed
  • Total estimated impact of recommended changes

💡 Tips for Success​

  • Test email templates with Litmus or Email on Acid for cross-client rendering
  • Use mode: 'open' for Shadow DOM during development (easier debugging)
  • Remember: email HTML doesn't support <style> tags — everything must be inline
  • Use Chrome DevTools' Inspect mode to examine Shadow DOM content
  • For Web Components, prefix your custom element names with a hyphen (e.g., <my-card>) to avoid name collisions

← Back to HTML Exercises