Project 1

Last Updated: Jan/01/2025

Project Guide: Building a Multi-Page HTML Website

Objective

Create a functional, structured, and well-organized multi-page HTML website based on the
provided design and requirements. This project will reinforce HTML concepts, including page
linking, semantic structure, forms, lists, tables, and accessibility.

Project Overview

Required Pages:

1.​ Homepage: An introduction with an overview of the website.

2.​ About Page: A brief biography or information about the organization or individual.
3.​ Services/Portfolio Page: A page listing services offered or showcasing completed
projects.
4.​ Contact Page: A form for visitors to reach out or make inquiries.

Features to Include:

●​ Consistent navigation bar on each page linking to all other pages.

●​ Footer with social media links or contact information, included on each page.
●​ Semantic structure for content clarity and accessibility.
●​ Properly labeled form elements on the contact page.

Detailed Checklist

1. Setup and Tools

●​ Text Editor: Use Visual Studio Code (VS Code) or any other code editor of your
choice.
●​ File Structure:
○​ Create separate HTML files for each page (e.g., [Link], [Link],
[Link], [Link]).

© 2025 - 2026 Code Elevate. All Rights Reserved.

This document, including all its contents, is the intellectual property of Code Elevate and is protected under applicable
copyright and intellectual property laws. Unauthorized distribution, reproduction, or use of this material in any form is
strictly prohibited. For permissions, contact [Link]@[Link].
 Last Updated: Jan/01/2025

○​ Organize images and assets in a dedicated folder named images (e.g.,

images/[Link]).
●​ Do Not Use:
○​ Avoid using any CSS or JavaScript. This project is purely HTML-based to build a
solid foundation.

2. Homepage Requirements

●​ Header and Introduction Section:

○​ Include an <h1> title summarizing the website’s purpose.
○​ Add an introductory paragraph explaining the website’s purpose.
●​ Featured Content or Gallery Section:
○​ Display a list or grid of featured projects or images.
○​ Use <ul> or <div> to organize content, and include <img> tags for any images.

Do’s:

●​ Use meaningful alt attributes for each <img> tag (e.g., alt="Project 1 Screenshot").
●​ Use semantic tags such as <header>, <section>, and <footer> to organize content.

Don’ts:

●​ Avoid excessive content—focus on clarity and structure over quantity.

3. Navigation Bar

●​ Links to Each Page:

○​ Include links to each page (Home, About, Services, Contact) in a consistent
navigation bar.
●​ Positioning and Consistency:
○​ Ensure the navigation bar appears at the top of each page for consistency.
●​ Linking:
○​ Make sure each link opens the respective page (e.g., <a
href="[Link]">About</a>).

Do’s:

© 2025 - 2026 Code Elevate. All Rights Reserved.

This document, including all its contents, is the intellectual property of Code Elevate and is protected under applicable
copyright and intellectual property laws. Unauthorized distribution, reproduction, or use of this material in any form is
strictly prohibited. For permissions, contact [Link]@[Link].
 Last Updated: Jan/01/2025

●​ Keep the navigation bar simple and accessible.

●​ Ensure that links are functional on all pages before finalizing.

Don’ts:

●​ Avoid using images for navigation links; use plain text links instead.

4. About Page

●​ Content Structure:
○​ Write a brief biography or description of the individual or company.
○​ Use a combination of headings (<h2>, <h3>) and paragraphs (<p>) for
readability.
●​ Organization:
○​ Group information in sections for easy readability, using <section> or <div>
containers as needed.

Do’s:

●​ Use semantic tags like <article> or <section> for organization.

●​ Include clear headings to divide content meaningfully.

Don’ts:

●​ Avoid overly long paragraphs. Keep content concise and relevant.

5. Services/Portfolio Page

●​ List of Services or Projects:

○​ Display a list of services provided or completed projects.
○​ Use ordered (<ol>) or unordered lists (<ul>) for structured content.
●​ Additional Content:
○​ If displaying a project gallery, include <img> tags with descriptions.

Do’s:

●​ Use <h2> headings for each service or project type.

© 2025 - 2026 Code Elevate. All Rights Reserved.

This document, including all its contents, is the intellectual property of Code Elevate and is protected under applicable
copyright and intellectual property laws. Unauthorized distribution, reproduction, or use of this material in any form is
strictly prohibited. For permissions, contact [Link]@[Link].
 Last Updated: Jan/01/2025

●​ Group services or projects into categories if needed for better organization.

Don’ts:

●​ Avoid redundant content—ensure each service or project listed is unique.

6. Contact Page

●​ Contact Form Elements:

○​ Include a contact form with the following fields:
■​ Name (Text Input)
■​ Email (Email Input)
■​ Message (Textarea for comments or inquiries)
○​ Add a submit button to complete the form.
●​ Accessibility and Labels:
○​ Use <label> elements for each input field with for attributes matching the input id.
○​ Set required fields for mandatory inputs like name and email.

Do’s:

●​ Label each field clearly with <label> tags to improve accessibility.

●​ Add the required attribute to necessary fields like name and email.

Don’ts:

●​ Avoid leaving out labels for fields, as this can hinder accessibility.
●​ Do not use placeholder text as a substitute for labels.

7. Footer Requirements

●​ Content: Include a footer on each page with:

○​ Copyright notice.
○​ Social media links or contact information.
●​ Consistency: Ensure the footer content is the same across all pages.

Do’s:

© 2025 - 2026 Code Elevate. All Rights Reserved.

This document, including all its contents, is the intellectual property of Code Elevate and is protected under applicable
copyright and intellectual property laws. Unauthorized distribution, reproduction, or use of this material in any form is
strictly prohibited. For permissions, contact [Link]@[Link].
 Last Updated: Jan/01/2025

●​ Use consistent formatting in the footer across pages.

●​ Make sure links open in a new tab with target="_blank".

Don’ts:

●​ Avoid adding unnecessary content in the footer—keep it concise.

Final Do’s and Don’ts Checklist

Do’s:

●​ Ensure each page is properly structured with clear headings and paragraphs.
●​ Use semantic tags like <header>, <nav>, <section>, <article>, and <footer> for a logical
layout.
●​ Test each link and navigation item to ensure they direct to the correct pages.

Don’ts:

●​ Do not use any CSS or JavaScript for this project.

●​ Avoid using unnecessary tags or adding too much content—focus on structure and
clarity.
●​ Do not duplicate content between pages; each page should have unique and relevant
information.

Submission Checklist

●​ [ ] All required pages (Homepage, About, Services/Portfolio, Contact) are created and
saved in the project folder.
●​ [ ] Navigation and footer links are consistent and functional across all pages.
●​ [ ] The contact form includes required fields, labels, and appropriate form elements.
●​ [ ] Page content follows the provided design, with a clear and logical structure.
●​ [ ] HTML code has been validated for syntax and structure correctness.

© 2025 - 2026 Code Elevate. All Rights Reserved.

This document, including all its contents, is the intellectual property of Code Elevate and is protected under applicable
copyright and intellectual property laws. Unauthorized distribution, reproduction, or use of this material in any form is
strictly prohibited. For permissions, contact [Link]@[Link].