<> Fundamentals of Web Design

Box Project

You will be creating a website. As your starting point, you will use a six-sided package that has text on all sides

Choose a 6-sided package/box that has text on all sides. Some examples of boxes are cereal, granola bar, or frozen pizza boxes. Make sure that the box is relatively clean and does not contain food remains as you will be using it in-class over an extended period of time.

Download the project-template and set up the appropriate files like below:

  • package (folder)
    • index.html
    • one.html
    • two.html
  • css (folder)
    • normalize.css
    • style.css
  • img (folder)

Take the box and determine hierarchy of its information. Imagine that the box is a website, markup all of the content on your box. Use the appropriate elements to create the hierarchy. The existing package hierarchy does not have to be maintained. Instead, create hierarchy that makes sense to you and to your design.

Requirements

  • Create 1 homepage and 2 internal pages.
  • Use the top of the box as a header on each page.
  • Use the bottom of the box as the footer on each page.
  • Use the front of the box as a homepage.
  • Use the back and one side of the box to create internal pages.
  • Use the other column to create a second internal page.
  • You must use all the text on the box.
  • Your navigation must remain in the same location on each page of your site.
  • Each page must be accessible from every page.
  • There must be a link to the homepage on every other page (This can be an logo in your header).
  • Validate your HTML and CSS on each page before turning in your assignment for a final grade.

Grading

  3 2 1 Score
All pages are valid HTML with no errors        
CSS file validates without errors        
At least one page has a 2 column (or more) layout        
All pages are responsive        
All pages contain a header and footer        
Navigation is consistent from page to page and each page has a link to all other pages        
All content from the box is present on the site        

Resources

When you are finished

  1. Post your site to GitHub pages
  2. Send me the URL through email or Slack