Create a Personal Profile Page with HTML

Duration: 60 minutes

Module 1: HTML Fundamentals

Learning Objectives

Master the concepts in this lesson
Apply knowledge through practice
Build practical skills
Prepare for next topics

Assignment Overview

In this assignment, you will create a personal profile page using HTML. This page will showcase information about you and demonstrate your understanding of fundamental HTML elements. This exercise reinforces the HTML concepts covered in our session and serves as your first standalone web project.

George Polya's 4-Step Problem Solving Method

Step 1: Understand the Problem

We need to create a personal profile page that:

Presents information about ourselves (or a fictional person if preferred)
Demonstrates proper HTML document structure
Utilizes various HTML elements appropriately
Is well-organized and semantically correct
Can be viewed in a web browser

The profile page should include:

A header with your name and a profile title
A profile image (placeholder or real)
Biographical information
Skills or interests list
Contact information
Links to social profiles or projects (real or placeholder)

Step 2: Devise a Plan

Set up the HTML document structure
Create the main sections of the profile page
- Header section for name and title
- About section for biographical information
- Skills/Interests section
- Projects or experience section
- Contact section
- Footer section
Add content to each section using appropriate HTML elements
Organize the content with semantic HTML
Test the page in a web browser
Review and refine as needed

Step 3: Execute the Plan

Let's implement our solution step by step:

Solution: Creating a Personal Profile Page

File: index.html

Location: Create a new folder named "personal_profile" on your computer

Complete HTML Solution

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>John Doe - Web Developer Profile</title>
    <meta name="description" content="Personal profile page for John Doe, a web developer specializing in HTML, CSS, and JavaScript.">
</head>
<body>
    <!-- Header Section -->
    <header>
        <h1>John Doe</h1>
        <h2>Web Developer</h2>
        
        <!-- Profile Image -->
        <figure>
            <img src="https://via.placeholder.com/200" alt="John Doe's profile picture" width="200" height="200">
            <figcaption>John Doe - Web Developer</figcaption>
        </figure>
    </header>
    
    <!-- Main Content -->
    <main>
        <!-- About Section -->
        <section id="about">
            <h2>About Me</h2>
            <p>Hello! I'm John Doe, a passionate web developer based in San Francisco, California. I enjoy creating responsive and user-friendly websites that solve real-world problems.</p>
            
            <p>I have been learning web development for the past year and am excited to continue expanding my skills through this PHP WordPress Development course.</p>
            
            <blockquote>
                <p>"The only way to learn a new programming language is by writing programs in it."</p>
                <cite>- Dennis Ritchie</cite>
            </blockquote>
        </section>
        
        <!-- Skills Section -->
        <section id="skills">
            <h2>Skills & Interests</h2>
            
            <h3>Technical Skills</h3>
            <ul>
                <li>HTML5</li>
                <li>CSS3</li>
                <li>JavaScript (Beginner)</li>
                <li>Git/GitHub (Learning)</li>
                <li>Responsive Design</li>
            </ul>
            
            <h3>Interests</h3>
            <ul>
                <li>Web Accessibility</li>
                <li>UX/UI Design</li>
                <li>WordPress Development</li>
                <li>Mobile-First Design</li>
            </ul>
        </section>
        
        <!-- Projects Section -->
        <section id="projects">
            <h2>Projects</h2>
            
            <article class="project">
                <h3>Personal Blog</h3>
                <p>A simple blog created with HTML and CSS to document my learning journey.</p>
                <a href="#">View Project</a>
            </article>
            
            <article class="project">
                <h3>Recipe Collection</h3>
                <p>A website that showcases my favorite recipes with detailed ingredients and instructions.</p>
                <a href="#">View Project</a>
            </article>
        </section>
        
        <!-- Education Section -->
        <section id="education">
            <h2>Education</h2>
            
            <h3>Formal Education</h3>
            <dl>
                <dt>Bachelor of Science in Computer Science</dt>
                <dd>University of California, 2018-2022</dd>
                
                <dt>High School Diploma</dt>
                <dd>Lincoln High School, 2014-2018</dd>
            </dl>
            
            <h3>Online Courses</h3>
            <ol>
                <li>Introduction to HTML and CSS - Codecademy</li>
                <li>Responsive Web Design - freeCodeCamp</li>
                <li>JavaScript Basics - Udemy</li>
                <li>Git and GitHub for Beginners - YouTube Tutorials</li>
            </ol>
        </section>
    </main>
    
    <!-- Contact Section -->
    <section id="contact">
        <h2>Contact Me</h2>
        
        <address>
            <p>Email: <a href="mailto:john.doe@example.com">john.doe@example.com</a></p>
            <p>Phone: <a href="tel:+15551234567">(555) 123-4567</a></p>
            <p>
                LinkedIn: <a href="https://linkedin.com/in/johndoe" target="_blank">linkedin.com/in/johndoe</a><br>
                GitHub: <a href="https://github.com/johndoe" target="_blank">github.com/johndoe</a>
            </p>
        </address>
        
        <h3>Send Me a Message</h3>
        <form action="#" method="post">
            <div>
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
            </div>
            
            <div>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
            </div>
            
            <div>
                <label for="message">Message:</label>
                <textarea id="message" name="message" rows="5" required></textarea>
            </div>
            
            <button type="submit">Send Message</button>
        </form>
    </section>
    
    <!-- Footer Section -->
    <footer>
        <p>&copy; 2025 John Doe. All rights reserved.</p>
        <p>Last updated: April 2025</p>
        
        <nav>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#education">Education</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </footer>
</body>
</html>

Testing Your Profile Page

Save the HTML code in a file named "index.html" in your "personal_profile" folder
Double-click the file to open it in your default web browser
Your personal profile page should display in the browser window
Check that all sections are visible and properly formatted
Test the navigation links to ensure they lead to the correct sections
Verify that images load correctly (if you're using online placeholder images, you'll need an internet connection)

Step 4: Look Back and Review

Our HTML profile page successfully includes:

A proper document structure with DOCTYPE, html, head, and body elements
Semantic HTML5 elements (header, main, section, article, figure, etc.)
Various content elements (headings, paragraphs, lists, images, etc.)
A form for contact information
Navigation links within the page
Proper text formatting and organization

This profile page demonstrates essential HTML elements and creates a solid foundation that can later be enhanced with CSS for styling.

Understanding HTML Structure and Elements

HTML Document Structure

                    graph TD
                    A[HTML Document] --> B[DOCTYPE Declaration]
                    A --> C[html Element]
                    C --> D[head Element]
                    C --> E[body Element]
                    
                    D --> D1[meta tags]
                    D --> D2[title Element]
                    D --> D3[Other head elements]
                    
                    E --> E1[header Element]
                    E --> E2[main Element]
                    E --> E3[section Elements]
                    E --> E4[footer Element]
                    
                    E1 --> F1[h1, h2, figure]
                    E2 --> F2[section - About]
                    E2 --> F3[section - Skills]
                    E2 --> F4[section - Projects]
                    E2 --> F5[section - Education]
                    E3 --> F6[section - Contact]
                    
                    F2 --> G1[h2, p, blockquote]
                    F3 --> G2[h2, h3, ul, li]
                    F4 --> G3[h2, article]
                    F5 --> G4[h2, h3, dl, ol]
                    F6 --> G5[h2, address, form]
                    
                    style A fill:#f9f,stroke:#333,stroke-width:2px
                    style B fill:#bbf,stroke:#333,stroke-width:1px
                    style C fill:#bbf,stroke:#333,stroke-width:1px
                    style D fill:#ddf,stroke:#333,stroke-width:1px
                    style E fill:#ddf,stroke:#333,stroke-width:1px

Key HTML Elements Used

Document Structure Elements

<!DOCTYPE html>: Declares the document as HTML5, ensuring proper rendering in browsers.
<html>: The root element of an HTML page, with the lang attribute specifying the language.
<head>: Contains meta-information about the document, not displayed on the page.
<body>: Contains all the visible content of the page.

Metadata Elements (in <head>)

<meta charset="UTF-8">: Specifies the character encoding, ensuring proper text display.
<meta name="viewport">: Controls the viewport (page dimensions and scaling) on mobile devices.
<title>: Sets the page title shown in browser tabs and bookmarks.
<meta name="description">: Provides a description for search engines.

Semantic Structural Elements

<header>: Represents introductory content, typically containing headings and navigation.
<main>: Contains the primary content unique to the page.
<section>: Represents a standalone section of content.
<article>: Represents a self-contained composition (like a blog post or project description).
<footer>: Represents the footer of a section or page, typically containing author info, copyright, links, etc.
<nav>: Represents a section with navigation links.
<address>: Indicates contact information for a person or organization.

Content Elements

<h1> through <h6>: Heading elements, with h1 being the most important and h6 the least.
<p>: Represents a paragraph of text.
<blockquote>: Represents content quoted from another source.
<cite>: Represents the title of a work or a citation.
<figure> and <figcaption>: Used for content like images, diagrams, etc. with a caption.
<img>: Embeds an image with attributes like src (source), alt (alternative text), and dimensions.

List Elements

<ul>: Unordered list (bullet points), used for skills and interests.
<ol>: Ordered list (numbered), used for online courses.
<li>: List item within a ul or ol.
<dl>: Description list, used for education details.
<dt>: Description term (the item being described).
<dd>: Description details (the description of the item).

Form Elements

<form>: Container for form elements, with attributes like action (where to send data) and method (how to send it).
<label>: Label for a form control, improving accessibility.
<input>: Input control with type attribute determining its behavior (text, email, etc.).
<textarea>: Multi-line text input.
<button>: Clickable button, with type="submit" for form submission.

Linking Elements

<a>: Anchor element creating hyperlinks with href attribute specifying the destination.
<target="_blank">: Attribute for opening links in a new tab/window.
<mailto: and tel:>: Special URL schemes for email and telephone links.

The Importance of Semantic HTML

Semantic HTML refers to using HTML elements that clearly describe their meaning to both the browser and the developer. Instead of using generic <div> elements everywhere, we use elements like <header>, <section>, and <footer> that clearly indicate their purpose.

Benefits of Semantic HTML:

Accessibility: Screen readers and assistive technologies can better understand the page structure.
SEO: Search engines can better understand your content's context and importance.
Readability: Code is more readable and maintainable for developers.
Consistent Styling: Easier to apply consistent styles to similar types of content.
Future-Proofing: More adaptable to future changes in HTML standards.

Non-Semantic vs. Semantic HTML

HTML Best Practices

1. Use Proper Document Structure

Always include the DOCTYPE declaration
Specify the language in the html element
Include essential meta tags (charset, viewport)
Provide a descriptive title

2. Write Semantic HTML

Use HTML5 semantic elements like header, section, article, nav, etc.
Choose elements based on their meaning, not their appearance
Use headings (h1-h6) properly to create a logical outline
Use the appropriate list type (ul, ol, dl) for different kinds of information

3. Ensure Accessibility

Provide alt text for images
Use proper form labels
Ensure logical reading order
Use appropriate ARIA attributes when necessary
Test with keyboard navigation

4. Maintain Clean Code

Use consistent indentation
Add comments for clarity
Keep IDs and classes meaningful and consistent
Validate your HTML using tools like the W3C Validator

5. Optimize Performance

Specify image dimensions to prevent layout shifts
Use descriptive, SEO-friendly filenames
Keep your HTML as lean as possible
Use external CSS and JavaScript files instead of inline styles and scripts

Real-World Applications

Professional Portfolio

This assignment is actually the foundation of a professional portfolio website. As you learn more CSS and JavaScript, you can enhance this profile page to create a polished, interactive portfolio to showcase your work to potential employers or clients. A well-crafted personal profile page can:

Demonstrate your technical skills
Showcase your projects and accomplishments
Provide an easy way for others to contact you
Establish your personal brand in the industry

Team Member Profiles

Many companies have an "About Us" or "Our Team" section with profiles of team members. The structure you've created could be adapted for this purpose. Each team member would have their own profile with:

Professional photo
Job title and role description
Professional background
Areas of expertise
Contact information

Author Biographies

Blog platforms, news websites, and online publications often include author profiles. These follow a similar structure to what you've created, with biographical information, profile images, and links to other articles by the author.

Customization Ideas

Personal Touches

Add a personal logo in addition to or instead of your profile photo
Include a timeline of your education or career journey
Add a testimonials section with quotes from colleagues or clients
Include a blog section with your thoughts or articles
Add a hobbies or personal interests section to show your personality

Content Enhancements

Add project screenshots to showcase your work visually
Include embedded videos of presentations or tutorials you've created
Create a skills rating system to indicate your proficiency levels
Add downloadable resources like your resume as a PDF
Include interactive elements like a photo gallery or portfolio slider (once you learn JavaScript)

Structural Variations

Create a single-page application with smooth scrolling between sections
Design a multi-page profile with dedicated pages for projects, resume, etc.
Create a card-based layout for different sections
Use tabs to organize different types of content
Create a sidebar for navigation or quick facts about yourself

Tips and Common Pitfalls

Use a Logical Heading Structure

Headings (h1-h6) create an outline of your document and should follow a logical hierarchy:

Use only one h1 per page, typically for your name or main title
Use h2 for main sections like "About," "Skills," etc.
Use h3 and below for subsections within those main sections
Never skip heading levels (e.g., don't jump from h2 to h4)

Proper heading structure improves accessibility and SEO.

Use Meaningful Alt Text

The alt attribute for images should:

Describe the content and function of the image
Be concise but descriptive
Not include phrases like "image of" or "picture of"

Good example: alt="John Doe smiling in a professional headshot"

Poor example: alt="Profile picture" or alt="image.jpg"

Don't Rely on Colors Alone

When you move on to styling with CSS, remember that some users may have color vision deficiencies. Don't use color as the only way to convey important information. Add text, icons, or patterns to reinforce meaning.

Test Your Page in Different Browsers

Different browsers may render HTML slightly differently. Test your page in multiple browsers (Chrome, Firefox, Safari, Edge) to ensure consistency.

Common Pitfalls to Avoid

Missing closing tags - Always ensure each opening tag has a corresponding closing tag
Incorrect nesting - Tags should be nested properly, like <p><strong>text</strong></p>, not <p><strong>text</p></strong>
Using tables for layout - Tables should only be used for tabular data, not for page layout
Overusing divs - Use semantic elements instead of generic divs whenever possible
Missing required attributes - Some elements require certain attributes (e.g., img needs src and alt)

Advanced Challenges

Basic Challenge: Enhance Your Profile

Take your basic profile page and enhance it with additional content and structure:

Add a "Testimonials" section with quotes from colleagues or mentors
Create a "Timeline" section showing your educational or professional journey
Add a "Skills Progress" section with visual indicators of your skill levels
Include a "Portfolio Gallery" with images and descriptions of projects

Intermediate Challenge: Create a Multi-Page Profile

Expand your single-page profile into a multi-page website:

Create separate HTML files for different sections (about.html, projects.html, contact.html, etc.)
Create a consistent navigation menu on each page
Ensure consistent structure and layout across all pages
Add a breadcrumb navigation to help visitors know where they are
Link the pages together properly

Advanced Challenge: Optimize for Accessibility

Make your profile page as accessible as possible:

Add proper ARIA roles and landmarks where appropriate
Ensure all interactive elements are keyboard accessible
Add a skip navigation link for screen reader users
Provide alternative text for all non-text content
Test your page with a screen reader
Run your page through accessibility checkers like WAVE or Axe

Further Learning Resources

MDN Web Docs: HTML - Comprehensive reference for HTML elements and attributes
W3Schools HTML Tutorial - Beginner-friendly tutorials with examples
W3C Markup Validation Service - Check your HTML for errors
Learn HTML from web.dev - Google's guide to learning HTML
HTML Reference - Visual guide to HTML elements
freeCodeCamp: Responsive Web Design - Interactive HTML and CSS lessons

Homework Assignment

Primary Task: Create Your Personal Profile Page

Create a new HTML file named index.html
Implement the structure outlined in this lesson, using your own information (or fictional information if preferred)
Include at least one example of each of the following HTML elements:
- Headings (h1-h6)
- Paragraphs (p)
- Lists (ul, ol, or dl)
- Images (img)
- Links (a)
- Semantic structural elements (header, main, section, footer, etc.)
Organize your content into logical sections
Test your page in a web browser
Validate your HTML using the W3C Validator

Submission Guidelines

Save your HTML file as index.html
Create a ZIP file containing your HTML file and any images you used
Upload your ZIP file to the course submission portal
Include a brief description of your profile page and any challenges you encountered
Be prepared to share your work with the class in the next session

Grading Criteria

Document Structure (20%): Proper HTML5 document structure, including DOCTYPE, html, head, and body elements with correct attributes
Content Organization (20%): Logical organization of content into sections with appropriate headings
Element Usage (20%): Correct and varied use of HTML elements for different types of content
Semantic HTML (20%): Appropriate use of semantic HTML5 elements instead of generic divs
Code Quality (10%): Clean, well-formatted code with proper indentation and comments
Validation (10%): HTML passes the W3C validation with no errors