HTML / CSS Project (Part 1)

Goal:
Create a small, well-designed website using only HTML and CSS.
Your site should look like a real website, even though it will not have interactive functionality yet.
(JavaScript comes later in Part 2.)

Theme / Purpose

Your site must have a clear theme. It should not be random text and images thrown together.
Pick something you can write about and present well.

Example themes:

  • Restaurant
  • Online store mockup
  • Fandom/media guide (game, book, show, movie)
  • Travel or destination guide
  • Hobby or collection
  • Food blog
  • Portfolio or resume
  • Club, team, or organization
  • These are suggestions, not requirements.

HTML Requirements

Your project must include:

1. Multiple pages

At least 3 HTML pages.

All pages must link back to the main navigation so the user can move between pages easily.

2. Meaningful content

Each page should contain enough content to make the page look like a real page of a real website.

Content should be substantial enough to show clear effort:

Several paragraphs, OR
Multiple sections of text, OR
A mix of text, images, lists, tables, or other structured elements.

Very short, empty, or repetitive pages will not demonstrate proficiency.

3. Structured HTML, not just paragraphs

Your site must include at least one substantial use of structured elements, for example:

lists (<ul>, <ol>, <li>)

tables (<table>, <tr>, <td>)

forms (for mockup only; they do not need to submit data)

multi-section layout using <div> or similar grouping tags

card-style item displays ((a box containing an image and text together)

You do not need to include all these types — just enough to show purposeful structure.

4. Images

Include images using <img> tags.
Images must match the theme and improve the presentation.

CSS Requirements

You must include CSS that affects the appearance of your pages.

Minimum expectation:

Change text color, background color, or basic typography.

Apply margins, padding, borders, or spacing to improve layout.

Style multiple elements, not just one.

For Stronger Proficiency:

(You’re not required to do all of this, but any of it strengthens your work.)

Consistent styling across all pages.

Thoughtful color palette and font choices.

Use of classes to style groups of elements.

External stylesheet (.css file) for organization.

Layout decisions that make the site easier to read.

Elegance and consistency matter more than simply having lots of CSS.

Part 1 Scope

Part 1 is static only (no interactive JavaScript yet):

Navigation works.

Buttons and forms are allowed but do not function yet.

“Add to cart,” quizzes, reservation forms, scoreboards, etc. are mock-ups only (non-functional, but they look real).

Part 2 (JavaScript) may add interactivity later.

Academic Integrity

You may use AI only for generating written page content (text).
You may not use AI to generate or edit HTML/CSS code.

If AI text or outside sources are used:

Cite the source on each page where it appears.

Original writing is strongly preferred.

The original version of this page was written by me. I used AI to create a new version to clarity intent and fix inconsistencies.