Lesson 17: Final Project

Congratulations on completing all 16 lessons! Now it's time to put everything together and create your own personal portfolio website.

🎯 Project Goal

Create a multi-page personal portfolio website that showcases what you've learned and tells your story.

Required Pages

1. Home Page (index.html)

Must Include:

Header with your name and navigation menu
Welcome section with H1 heading
Brief introduction about yourself
Image of yourself or avatar
Links to other pages
Footer with copyright and contact info

2. About Page (about.html)

3. Projects/Gallery Page (projects.html)

4. Contact Page (contact.html)

Must Include:

Contact form with name, email, and message fields
Radio buttons for reason (feedback, question, collaboration)
Checkbox for newsletter subscription
Submit button
Your social media links (if any)

Technical Requirements

✓ HTML Structure Checklist

✓ Valid HTML5 structure (DOCTYPE, html, head, body)
✓ Proper meta tags (charset, viewport, description)
✓ Meaningful page titles for each page
✓ Semantic HTML (header, nav, main, section, article, footer)
✓ Consistent navigation on all pages

✓ Content Requirements

✓ At least 10 different HTML tags used
✓ Proper heading hierarchy (H1 → H2 → H3)
✓ At least 5 images with alt text
✓ At least 1 table
✓ Multiple lists (ordered and unordered)
✓ At least 10 internal and external links
✓ A complete contact form

✓ Best Practices

✓ All images have descriptive alt text
✓ All form inputs have labels
✓ Use HTML entities for special characters
✓ Descriptive link text (no "click here")
✓ Code is properly indented and organized
✓ Valid HTML (no unclosed tags)

Bonus Features (Optional)

Extra Credit:

Add a table showing your weekly schedule or skills
Embed a YouTube video on your projects page
Add an iframe with Google Maps to your location
Include audio file (favorite song or introduction)
Create a nested list for complex information
Add Open Graph meta tags for social sharing
Use div and span for additional styling hooks
Include HTML entities and special symbols

Suggested Page Structure

File Organization

portfolio/
├── index.html
├── about.html
├── projects.html
├── contact.html
├── images/
│   ├── profile.jpg
│   ├── project1.jpg
│   ├── project2.jpg
│   └── project3.jpg
└── README.txt (optional)

Project Timeline

Recommended Steps:

Day 1: Plan your content and structure
Day 2: Create index.html and about.html
Day 3: Create projects.html and contact.html
Day 4: Add images and refine content
Day 5: Test all links, forms, and validate HTML
Day 6: Final review and improvements

Evaluation Criteria

Tips for Success

Category	Points
HTML Structure & Semantics	25 points
Content Quality & Completeness	25 points
Proper Use of Elements	20 points
Accessibility & Best Practices	15 points
Code Quality & Organization	15 points
Total	100 points

Start Simple: Get basic structure working first, then add details
Test Often: Check your pages in a browser frequently
Validate: Use W3C HTML Validator to check for errors
Be Creative: Make it personal and unique to you
Review Lessons: Go back to lessons when you forget syntax
Ask for Help: Don't hesitate to review documentation

🎉 Congratulations!

You've completed the HTML course!

You now have the fundamental skills to create web pages. This final project is your opportunity to showcase everything you've learned.

Remember: Every expert web developer started exactly where you are now. Keep practicing, stay curious, and keep building!

Good luck with your project! 🚀

Next Steps After Completion

Continue Your Learning:

CSS: Style your HTML to make it beautiful
JavaScript: Add interactivity to your pages
Responsive Design: Make sites work on all devices
Web Frameworks: Learn modern development tools
Build Projects: Create real websites for practice

Lesson 17: Final Project - Build Your Portfolio Website

Project Overview