Introduction to HTML
Semantic HTML
Forms
Accessibility (a11y)
DOM Manipulation
DevTools Basics
Practice
Assignment
Back to Track
Week 1 Assignment: Interactive Portfolio Page
Focus: Semantic HTML, forms, accessibility, DOM manipulation, DevTools
Description
Build an interactive personal profile page that demonstrates proper HTML structure, accessible forms, and JavaScript interactivity. This project combines all Week 1 concepts into one complete assignment.
Requirements
HTML Structure
- Use proper document structure (DOCTYPE, html with lang, head with meta tags, body)
- Include semantic elements:
<header>, <main>, <footer>
- Header section:
- Your name as h1
- Short tagline or title as paragraph
- Profile image with descriptive alt text
- About section:
- "About Me" heading (h2)
- 2-3 paragraphs introducing yourself
- Unordered list of 4-5 interests or hobbies
- Contact section:
- "Get in Touch" heading (h2)
- Contact form with proper labels and accessibility:
- Name (text input, required)
- Email (email input, required)
- Message (textarea, required)
- Submit button
- All inputs must have
<label> elements with matching for attributes
- Mark required fields with asterisks
- Include
<div id="form-message"></div> below form for success messages
Accessibility
- All form inputs must have properly connected labels
- Image must have descriptive alt text
- Use semantic HTML throughout (not just divs)
- Ensure proper heading hierarchy (h1 → h2, don't skip levels)
- Mark required form fields with both
required attribute and visual indicator (*)
DOM Manipulation & Interactivity
- Create external JavaScript file
script.js
- Theme toggle feature:
- Add button with id "theme-toggle" in the header
- When clicked, toggle a class "dark-mode" on the
<body> element
- Button should exist in your HTML
- Form handling:
- Prevent form from reloading the page on submit
- Display success message in the
#form-message div: "Thanks for reaching out! I'll get back to you soon."
- Clear all form fields after successful submission
- Use
addEventListener for all event handling
DevTools Validation
- Open your page in a browser and use DevTools to verify:
- All form labels are properly connected (click label, input should focus)
- HTML structure is valid (no errors in Elements panel)
- JavaScript runs without errors (check Console panel)
- Take a screenshot showing:
- Your page open with DevTools visible
- The Elements panel showing your HTML structure
- Save as
devtools-screenshot.png
Submission
Follow the Assignment submission guide to learn how to submit the assignment
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.