Web Design — Final Project

Overview

You will design and build a website for a small business. It can be your own business, a friend's business, or a completely made-up one — that part is up to you. What matters is that the site looks professional, is easy to navigate, and actually makes sense for the kind of business it represents. - SAMPLES

💡 Business Ideas Food truck, photography studio, tutoring service, custom clothing shop, dog grooming, landscaping company, music lessons, bakery, escape room, gaming lounge — or anything else you'd realistically find a website for.

Pages (4 required + 1 your choice)

External CSS file — no inline or internal styles

100

Points — 20% of your final grade

Phase 1 — Planning (Due Before You Code)

Before you write a single line of HTML, you need to plan. This is how real web designers work. Turn in the following:

⚠️ Planning Deliverable — Required Before Coding Begins Students who skip the planning phase consistently produce weaker final sites. Don't be that student.

Site Map

Draw or diagram the structure of your site. Show which pages exist and how they connect to each other. This can be hand-drawn or digital — it just needs to be clear.

Wireframes

Sketch a rough layout for at least your Home page and one other page. Show where the nav bar, header, main content, images, and footer will go. You are not drawing the final design — just the skeleton.

Color & Font Plan

Decide your 2–3 main colors and your 2 fonts before you open Dreamweaver. Use a tool like Adobe Color or Coolors.co to find a palette that fits your business's identity.

Phase 2 — Site Requirements

File & Folder Structure

Create a folder called final/ inside your website folder. All final project files go here.
Images go in a subfolder: final/images/
Your stylesheet goes in: final/styles.css — one external CSS file for the entire site W3
Follow consistent, lowercase naming for all files (no spaces).

🚫 No Inline or Internal CSS All styling must live in styles.css. If I find style="" attributes or <style> tags in your HTML files, points will be deducted from the CSS category.

Required Pages

Your site must have the following 4 required pages plus 1 page of your choice:

File Name	Page	What It Must Include	Status
`index.html`	Home	Business name, tagline, hero image or banner, brief introduction, at least one call-to-action link	Required
`about.html`	About	Story of the business, mission statement or values, at least one image	Required
`services.html`	Services / Menu / Gallery	What the business offers — products, services, or a photo gallery. Must use some kind of layout (not just a plain list).	Required
`contact.html`	Contact	A working HTML contact form (see requirements below), business address or location info	Required
your choice	Your 5th Page	Anything that makes sense for your business: FAQ, Team, Testimonials, Blog, Menu, Portfolio, etc.	Your Choice

Fixed Navigation Bar W3

Every page must have the same navigation bar — copy it into each HTML file consistently.
The nav bar must be fixed to the top of the browser window so it stays visible as the user scrolls. W3 Positioning
Include a link to all 5 pages.
Use CSS to style all link states: link, visited, hover, and active. W3 Pseudo-classes
Hover effect must use a transition for a smooth color change. W3 Transitions
Remove underlines from all nav links. W3 Text Decoration
Because your nav is fixed, add enough padding-top to your page body so content doesn't hide behind it.

Contact Form W3 Forms

Your contact.html page must include a complete HTML form with the following fields:

Full Name — text input, required W3 Input Types
Email Address — email input, required W3 Form Attributes
Subject — text input
Message — textarea W3 Textarea
Submit Button — styled with CSS to match your site's color scheme W3 CSS Forms

ℹ️ Note on Form Submission Forms in this class won't actually send email — that requires server-side code we haven't learned yet. Your form just needs to be properly structured HTML. Focus on making it look great and work correctly in the browser (required fields, proper input types).

Footer W3 Semantic Elements

Every page must have a <footer> that includes at least two of the following:

Business name and copyright line (e.g., © 2025 Joe's Food Truck)
Quick navigation links
Contact information (phone, email, or address)
Social media links (can be placeholder links)

Design & Visual Requirements

Use 2 distinct Google Fonts — one for headings, one for body text. W3 Google Fonts
Establish a clear color palette of 3–4 colors used consistently across all pages. W3 Colors
Use clear visual hierarchy — h1 for page titles, h2 for section headings, h3 for sub-sections. W3 Headings
At least one page must use CSS positioning (absolute, relative, or fixed — beyond just the nav bar). W3 Positioning
At least one element must use a CSS hover transformation (scale, rotate, etc.). W3 Transforms
Use the box model intentionally — padding, margin, and borders should contribute to the design, not just be defaults. W3 Box Model

Images & Media W3 Images

All images must have descriptive alt text — not just "image1" or left blank. W3 Alt Attribute
Images must be resized and optimized before uploading — no image should exceed 1MB.
Use only images you created, took yourself, or that are copyright-free (Creative Commons, Unsplash, Pixabay).
At least one page must use a background image set via CSS. W3 Background Image

Accessibility Basics

✅ Why This Matters Real websites are used by people with visual impairments, who use keyboard navigation, or who rely on screen readers. These aren't extras — they're professional standards.

Every image must have an alt attribute with a meaningful description.
Heading levels must be logical — don't skip from <h1> to <h4>.
Text must be readable against its background — no light gray text on white, no yellow text on white.
All links must make sense out of context — "click here" is not acceptable. Use descriptive link text. W3 Links

Code Quality

Use proper semantic HTML5 tags: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>. W3 Semantic HTML
All HTML must be properly indented — child elements indented one tab from their parent. W3 Formatting
Your CSS file must be organized with comments grouping related rules (e.g., /* === NAVIGATION === */). W3 CSS Comments
No repeated or redundant CSS rules — if three elements share the same style, use a shared class.
Every page must have: <!DOCTYPE html>, <html lang="en">, <meta charset>, <title>, and a meaningful <meta name="description">. W3 Head Elements

Grading Rubric — 100% of Points

Criteria	Max	Excellent	Partial Credit	Needs Work
🎨 Formal Design Elements — 40 Points
Hierarchy	10	Clear h1/h2/h3 structure on every page, styled for visual weight and clarity	Hierarchy present but inconsistent or unstyled on some pages	Heading levels misused, skipped, or no visual distinction between them
Typography	10	Two distinct Google Fonts used intentionally; font size, weight, and spacing enhance the design	Fonts present but not applied in a sophisticated or consistent way	Default fonts, single font, or fonts that clash with the business identity
Color, Alignment, Spacing & Balance	10	Cohesive 3–4 color palette; generous white space; content is balanced and aligned	Minor inconsistencies in color use, alignment, or spacing	Random or clashing colors; crowded or imbalanced layout
Graphics & Imagery	10	Images are on-theme, properly sized, and add to the professionalism of the site	Imagery is usable but could be stronger or more consistent	Images missing, poorly sized, off-theme, or not properly sourced
💻 HTML & CSS — 40 Points
Semantic HTML	10	Proper HTML5 semantic tags throughout; zero errors; logical document structure	No more than one misused tag or structural error	Multiple errors; divs used in place of semantic elements; invalid structure
HTML Formatting	10	All files consistently indented; easy to read; no unnecessary blank lines	Mostly consistent; minor indentation issues in a few places	Sloppy or inconsistent indentation throughout
External CSS	10	All styles in one external `styles.css`; zero inline or internal CSS; no errors	One instance of inline or internal CSS found	Multiple inline/internal styles; CSS not linked correctly
CSS Organization & Efficiency	10	Stylesheet uses comments to organize sections; no redundant rules; classes reused appropriately	Organization could improve; small amount of redundancy	Disorganized, no comments, copy-pasted duplicate rules throughout
🔧 Technical — 20 Points
Linked Files & Navigation	10	All 5 pages linked and load correctly; fixed nav bar present on every page; no broken links	No more than one broken link or missing nav item	Multiple broken links or nav bar missing from pages
Optimized Images & Accessibility	10	All images web-optimized (<1MB); all `alt` text descriptive; readable color contrast	No more than one image unoptimized or one missing/empty alt attribute	Multiple oversized images; alt text missing or meaningless

Submission Checklist

Before you upload, run through this list. If you can't check every box, you're not done.

Planning deliverable submitted (site map + wireframe + color/font plan)
All files are inside the final/ folder; images inside final/images/
All 5 pages created and linked from the nav bar
Fixed nav bar is identical on all 5 pages
One external styles.css — no inline or internal styles anywhere
Contact form complete with name, email, subject, message, and submit button
Footer present on all 5 pages
All images have descriptive alt text
All images are optimized (under 1MB)
Two Google Fonts applied and linked
CSS file is organized with section comments
Synchronized and verified live on teacherweaver.com

🏁 Final Word This is 20% of your grade, and it's also the thing you'll actually want to show someone someday. Make it something you're proud of. If you're stuck, ask — but ask early, not the night before it's due.