Unit 1: Final Project
Unit 1 Final Project
You've built the skills — now build the page. Bring together everything from all 13 lessons into one complete, valid, accessible, and well-organized personal webpage.
🚀 Your Mission
Open your index.html from the Code Skills Lab — the page you've been building throughout Unit 1 — and bring it to completion. Your goal is a personal webpage that is structurally correct, visually organized (with HTML alone, no CSS yet), valid, accessible, well-commented, and properly filed. This is the foundation that Unit 2 will style and Unit 3 will make interactive. Build it right.
Project Requirements
Your completed index.html must include all of the following. Each requirement maps directly to lessons you've already completed.
<!DOCTYPE html> on line 1, <html lang="en">, a fully formed <head> with charset, viewport, title, and an optional meta description. All content inside <body>.
Page uses <header>, <nav>, <main>, at least two <section> elements, and a <footer>. An <aside> is encouraged. No layout done with generic <div> soup.
Includes: an About Me section with paragraphs, a list of hobbies or interests (<ul> or <ol>), at least one image, at least 3 hyperlinks (one external, one mailto:), and a contact method.
Must include: © in the footer, — in running text, and at least two others (e.g., &, “/”, –). Entities must serve a real purpose — not added randomly.
Code has section-labeling HTML comments. Project uses the standard my-website/ folder structure with css/, images/, and js/ subfolders. All filenames are lowercase with no spaces. Page passes W3C validation with zero errors.
Every image has meaningful alt text (or alt="" for decorative). Exactly one <h1>; no skipped heading levels. Sections use aria-labelledby. Decorative emoji use aria-hidden="true". All link text is descriptive.
Pre-Flight Checklist — Before You Submit
Work through every item below before turning in your project. This checklist mirrors the rubric — a "yes" on every line means full marks are within reach.
- DOCTYPE & html tag: Line 1 is
<!DOCTYPE html>and the opening<html>tag haslang="en". - Head is complete:
<meta charset="UTF-8">,<meta name="viewport" ...>, and a descriptive<title>are all present. - Semantic structure: Page has
<header>,<nav>,<main>, at least 2<section>elements, and<footer>. - Content is complete: About Me paragraphs, a list, at least one image, 3+ links including a
mailto:, and a contact section are all present. - Entities are in use:
©in the footer,—somewhere in text, plus at least 2 more entities used with purpose. - HTML comments label sections: Each major section of the code has a comment like
<!-- About Me Section -->above it. - Folder structure is correct: Project lives in
my-website/withcss/,images/, andjs/subfolders. All filenames are lowercase, hyphenated, no spaces. - W3C validation passes: Zero errors at
validator.w3.org. Warnings have been reviewed and addressed where possible. - All images have quality alt text: Meaningful descriptions for informational images;
alt=""for decorative ones. No missingaltattributes. - Heading hierarchy is correct: Exactly one
<h1>. No levels are skipped. Heading choice is based on document structure, not visual preference. - Sections use aria-labelledby: Each
<section>has anaria-labelledbyattribute pointing to its heading'sid. - All link text is descriptive: No "click here" or "read more" without context. Every link communicates its destination or purpose on its own.
- File is saved: Latest changes are saved in the Code Skills Lab. The browser preview matches what you intend to submit.
📋 Grading Rubric — 100 Points Total
| Category | Excellent — Full Credit | Satisfactory — Partial Credit | Needs Improvement | Points |
|---|---|---|---|---|
| HTML Structure & Metadata 1.1–1.6 |
● <!DOCTYPE html>, <html lang>, complete <head> with charset, viewport, and title. All content inside <body>. |
● Mostly correct — minor omissions like missing viewport or vague title. | ● Missing DOCTYPE, title, or significant structural errors. | /12 |
| Semantic Layout 1.7 |
● Uses <header>, <nav>, <main>, multiple <section> elements, and <footer> correctly to reflect the page's actual structure. |
● Some semantic elements present but incomplete (e.g., missing <nav> or misused <section>). |
● Minimal or no semantic elements — page is mostly <div>s. |
/12 |
| Content & Organization 1.3–1.5, 1.8 |
● About Me paragraphs, a well-formed list, an image, 3+ links (including external and mailto:), and a contact section. Headings, paragraphs, and lists used appropriately throughout. |
● Most content present but one or two elements missing or disorganized. | ● Significant content missing — sparse or poorly structured page. | /8 |
| Images 1.8 |
● At least one image displays correctly with a specific, meaningful alt description. Correct relative path used from the images/ folder. |
● Image present and displays, but alt text is vague (e.g., "image" or filename) or path is slightly incorrect. | ● Image missing, broken, or has no alt attribute at all. |
/8 |
| Hyperlinks 1.5 |
● At least 3 working links: one external (full URL), one mailto:, and at least one internal anchor or second page. All links use descriptive text. |
● 1–2 links present and working; may be missing the mailto: or anchor link. |
● Links missing, broken, or only one present. | /8 |
| Lists 1.3 |
● At least one well-formed <ul> or <ol> with properly nested <li> items. Used for genuinely list-like content (hobbies, skills, links, etc.). |
● List present but poorly structured or used inappropriately. | ● No list present. | /8 |
| Contact Method 1.5 |
● A working mailto: link or a complete HTML form with fields for name, email, and message is present in the footer or a contact section. |
● Basic contact info present (email address as plain text) but no linked or interactive method. | ● No contact information or method anywhere on the page. | /8 |
| HTML Entities & Attributes 1.8 1.10 ✦ |
● At least 4 entities used purposefully (must include © and —). Consistent use of semantic attributes: id, class, alt, title, href, src. Entities are correct and semicolons are not missing. |
● Fewer than 4 entities or some used incorrectly. Most attributes present but a few missing or misused. | ● Entities absent or broken. Few attributes used. | /10 |
| Code Quality, Comments, File Org & Validation 1.9 ✦ 1.11 ✦ 1.12 ✦ |
● HTML comments label every major section. Project lives in a correctly structured my-website/ folder with subfolders. All filenames lowercase, no spaces. W3C validation returns zero errors. Code is indented and readable. |
● Some comments present. Folder structure mostly correct with minor issues. 1–3 validation errors remain. Code is mostly clean. | ● No comments. Files scattered with no structure. Many validation errors. Code is hard to read. | /15 |
| Accessibility 1.13 ✦ |
● All images have meaningful alt text (or alt="" for decorative). Exactly one <h1>; no skipped heading levels. Sections use aria-labelledby. Decorative emoji/icons use aria-hidden="true". All link text is descriptive without surrounding context. |
● Most accessibility requirements met — alt text present but vague on some images, minor heading order issues, or aria-labelledby missing on some sections. |
● Multiple images missing alt text, heading hierarchy broken, or no ARIA attributes used at all. | /11 |
🧮 Score Calculator
Enter your score for each category to calculate your total. Use this for self-assessment before submitting.
✍️ Student Self-Assessment
Check off each item you've completed. Use this alongside the rubric to identify any gaps before submitting. Print or screenshot this section if your instructor asks for a self-assessment.
| Skill / Feature | Lesson | Done? |
|---|---|---|
<!DOCTYPE html> on line 1; <html lang="en"> | 1.6 | |
Complete <head> with charset, viewport, and title | 1.4 | |
| Semantic landmark tags used throughout the page | 1.7 | |
| About Me content with headings and paragraphs | 1.3 | |
At least one list (<ul> or <ol>) | 1.3 | |
| At least one image with correct path and alt text | 1.8 | |
| 3+ links including external URL and mailto: | 1.5 | |
| Contact section with working mailto: or form | 1.5 | |
| HTML comments labeling every major section | 1.9 | |
| 4+ entities including © and — | 1.10 | |
| Files in correct my-website/ folder structure | 1.11 | |
| All filenames lowercase, hyphenated, no spaces | 1.11 | |
| W3C validation passes with zero errors | 1.12 | |
| All images have meaningful alt text or alt="" | 1.13 | |
| One H1 only; no skipped heading levels | 1.13 | |
| Sections use aria-labelledby pointing to heading id | 1.13 | |
| Decorative emoji/icons have aria-hidden="true" | 1.13 | |
| All link text is descriptive without surrounding context | 1.13 |
🌟 Bonus Opportunities
These are optional challenges for students who finish early or want to push their work further. Bonus points are awarded at the instructor's discretion and will not bring a score above 100.
about.html or projects.html in the root folder, linked from the <nav> in index.html, with its own complete structure and at least two sections of content.<table> with <th> headers and at least 3 rows of meaningful data — a class schedule, skills comparison, or favorite media rankings.“/” curly quotes throughout the page, and all hyphens used as dashes with —.wave.webaim.org) or axe DevTools and resolve all reported errors. Include a screenshot of the clean result.<link rel="icon" href="images/favicon.ico"> in the <head>. The icon should appear in the browser tab when the page is open.📤 Submission Instructions
- Complete the pre-flight checklist above — every item should be checked before you submit.
- Run a final W3C validation pass at
validator.w3.orgusing Direct Input. Fix any remaining errors. Take note of warnings. - Verify your folder structure one last time. Your submission should be the entire
my-website/folder — not just the HTML file. - Submit your project via the method your instructor specifies — LMS upload, shared folder, or in-class Code Skills Lab submission.
- Be ready to walk through your page. Your instructor may ask you to open your project and explain a design decision, point out where you used entities or ARIA, or describe your folder structure.