Final project: A skeleton

Here's how you'll make your final project website.

  • Ideas: Done
  • Structure: list the pages and how they relate Next
  • Prototype: build a rough model of the site
  • Make it: make the final version

Time for the second step. Here's the idea I chose.

Final project: Idea

Pupperware

A small business that brings doggos to your event. Pages:

  • Home
  • What we do - what the company does
  • Packages - what people buy, with the prices
  • Doggos - meet some of our doggos
  • About - address, things like that
  • Contact

OK, let's flesh it out. We have a start on the page list, but let's expand it.

In the following, a "top page" has an entry in the main menu. A "subpage" is linked from a top page. It's like a child of a top page.

Final project: Structure

By Squee Moffat and Suzie Chen

Our project will be a website for Pupperware, a small company that brings doggos to your event. Here are the pages.

Top page: HOME

What the company does, slideshow of doggos at events, like parties.

Top page: SERVICES

More deets than on home page. Service area, service time (8am - 9pm?), what we bring, cleaning up.

Top page: PACKAGES

What people buy. Maybe three packages. Small (two doggos, two hoomans), medium (four doggos, three hoomans), large (eight doggos, three hoomans). With prices. Link to deets of each package. Booking button.

Subpage: Small

Deets of the small package. Booking button.

Subpage: Medium

Deets of the medium package. Booking button.

Subpage: Large

Deets of the large package. Booking button.

Subpage: Booking

Fake booking page, with a fake form to fill in.

Top page: DOGGOS

Meet our doggos. Profiles of a few. Pictures. Cute and happy!

Top page: ABOUT

Deets on the company. Where it is, facilities, like that.

Top page: WORK FOR US

Job openings, how to apply.

Top page: CONTACT

A contact form.

Subpage: Terms

Legal stuff, what we are not liable for. Linked from the packages and booking pages.

Exercise

Exercise

Project: Site structure

List the pages that will be on the website for your final project. At least ten pages. For each one, give a page name, and a sentence or two about the page.

Limit the top-level pages to seven or less. Other pages can be under the top level. For example, Products might be a top-level page. Under that, you might have pages for Shoes, Hats, and Scarves.

In your page list, use dashes or something else (like doggos) to show the subpages. E.g.:

Products - description of Product page

- Shoes - description of the Shoes page

- Hats - etc.

You can change your mind about the pages later. That's common, as you work on the project.

You can do this project by yourself, or with one other person. If you do it with someone else, put both your names on it. Only one of you needs to submit it, though.

Up next

Next, you'll learn the basics of HTML and its sister language CSS. You'll use what you know to make a prototype of the final project.