Week 1

Introduction to HTML

Semantic HTML

Forms

Accessibility (a11y)

DOM Manipulation

DevTools Basics

Practice

Assignment

Back to Track

Content

Let’s get practical

Exercise 1: Personal Portfolio Page

Difficulty: Easy Concept: Semantic HTML, document structure, heading hierarchy

Create a single-page personal portfolio using semantic HTML elements.

Requirements:

• Use proper document structure (DOCTYPE, html, head, body)
• Include a <header> with your name as h1 and a <nav> with 3 links (About, Projects, Contact)
• Create a <main> with three <section> elements:
  • About section: h2 heading, 2-3 paragraphs about yourself
  • Projects section: h2 heading, 3 <article> elements with h3 titles and descriptions
  • Skills section: h2 heading, unordered list of 5-6 skills
• Add a <footer> with copyright text and 2-3 social media links
• Ensure proper heading hierarchy (don't skip levels)

Exercise 2: Accessible Contact Form

Difficulty: Medium Concept: Forms, labels, input types, accessibility

Build an accessible contact form with proper labels and validation.

Requirements:

• Create a form with:
  • Full name (text input, required)
  • Email address (email input, required)
  • Phone number (tel input, optional)
  • Subject (dropdown select with 3 options)
  • Message (textarea, required, 5 rows)
  • Newsletter checkbox
  • Submit button
• Every input must have a <label> with matching for attribute
• Use a <fieldset> to group the form fields with a <legend> "Contact Us"
• Mark required fields with both the required attribute and visual indicator (*)
• Include a note at the bottom: "* Required fields"

Hints:

• Connect labels to inputs: <label for="email"> and <input id="email">
• Use appropriate input types for automatic validation
• Group related fields with <fieldset> and <legend>
• Test by tabbing through the form - can you reach everything?

Exercise 3: Accessible Profile Card

Difficulty: Medium Concept: Semantic HTML, images with alt text, accessibility

Create a profile card with proper semantic structure and accessibility.

Requirements:

• HTML structure using semantic elements:
  • <article> wrapper with class "profile-card"
  • Profile image with descriptive alt text (use placeholder: https://via.placeholder.com/150)
  • <h2> for person's name
  • <p> for job title/role
  • <p> for short bio (2-3 sentences)
  • Unordered list of 3-4 skills or interests
  • Contact link (email) with proper href
• Use proper heading levels (if this is part of a page with h1, use h2 for the name)
• Ensure image has meaningful alt text describing the person
• Make the email link functional with mailto:

Exercise 4: DevTools Detective (Optional)

Difficulty: Easy Concept: Using DevTools to inspect, debug, and learn from existing sites

Use DevTools to explore and modify a website's HTML.

Requirements:

• Visit a simple website (try wikipedia.org or a news site)
• Complete these tasks using DevTools:
  1. Inspect the main heading - note what HTML element it uses (h1, h2, etc.)
  2. Find any image and verify it has alt text in the Elements panel
  3. Change a heading's text to your name using DevTools
  4. Find a paragraph and change its text content
  5. Delete an element from the page (right-click → Delete element)
  6. Add a new paragraph element by editing HTML (right-click → Edit as HTML)
  7. In the Console, run: document.querySelector('h1').textContent = 'Changed!'
• Write down 3 interesting HTML elements or attributes you discovered

Hints:

• Press F12 or Cmd+Option+I to open DevTools
• Use the element selector (⌖) to click and inspect elements
• All changes are temporary - refresh to reset
• Double-click text in Elements panel to edit it
• Don't worry about breaking anything - it's just in your browser!

The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0

*https://hackyourfuture.net/*

Found a mistake or have a suggestion? Let us know in the feedback form.