Personal Profile Page Project
Project Objectives
- Create a complete HTML document structure
- Implement semantic HTML elements
- Add personal information using appropriate HTML tags
- Practice proper HTML document organization
Prerequisites: Before starting this project, you should complete the Your First HTML Page tutorial.
Project Description
In this project, you'll create a personal profile page that showcases information about yourself (or a fictional character). This is a great way to practice HTML structure and semantic elements while creating something meaningful.
Your Profile Page Should Include:
- A proper HTML document structure with DOCTYPE, html, head, and body elements
- A header section with your name and a brief tagline
- A section about yourself (bio, interests, skills)
- A section for contact information
- Proper use of headings (h1-h6) to create a logical document outline
- At least one list (ordered or unordered)
Getting Started
Step 1: Set Up Your HTML File
Create a new file called index.html and set up the basic HTML structure:
Step 2: Add Your Header
Inside the body element, add a header section with your name and tagline:
Step 3: Add Your Bio Section
Create a section for your bio information:
Step 4: Add Contact Information
Add a section for your contact details:
Project Example
Here's what your completed profile page might look like:
Remember: This is just an example. Feel free to customize your profile page with your own information and additional HTML elements you've learned about.
Challenge Yourself
Once you've completed the basic requirements, try these challenges:
Level Up Your Profile
- Add a table to display your skills or education history
- Include links to your social media profiles
- Add a section for your hobbies with a description list (dl, dt, dd)
- Use the address element for your contact information
- Add comments to your HTML to explain different sections
Submit Your Project
Once you've completed your personal profile page, you can:
- Save it to your computer for future reference
- Share it with friends to get feedback
- Deploy it to a free hosting service like GitHub Pages
- Add it to your portfolio of web development projects
Next Steps: After completing this project, you might want to check out the Working with Text tutorial to learn more ways to format your content.