MMP 240 Web Design
MMP 240 Web Design
Assignments

Assignment 6: Midterm Site Wireframes and HTML

by |Published |1 comment

For this assignment you will continue the work we did in class in Class 12 and create the HTML for the three pages of the midterm project. You will also submit the basic wireframes from the Midterm Page Outlines (there will be a later assignment to submit more detailed wireframes.

Step 1: Save Your Wireframes as PDF Files

Using the Midterm Page Outlines, draw one wireframe for each page. You only need to draw the mobile width version of each page (so one wireframe per page).

Whether you draw them by hand and use a scanning app like Dropbox mobile app (requires login, you can use Google to login) or Scannable app.

Image files, like .jpg or png, or files other than PDF will not be accepted this time.

Step 2: Create HTML files for each of the three pages

Create a folder for the midterm project named Smart Study Skills Website

All of the files for your midterm project will go in this folder.

For this assignment you only need three HTML files. One for each of the pages. 

The three pages are in the midterm outline and also in the Midterm Content Files

  1. Home Page: index.html
  2. Retrieval Practice Page: retrieval.html
  3. About Page: about.html

So your folder should look like this:

For each of the three pages you need:

  • Base HTML file  for each page(We copied and pasted this GitHub Gist example to get us started)
    • Home page must be named index.html
  • Persistent page content
    • Site Header including site title and navigation
    • Site footer. This will include a Creative Commons License. We will show how to use the License Chooser in class.
  • HTML elements to match the areas in the wireframe (example below)
  • Page content from the Midterm Page Content Files. (follow the link to access the files which are Word Docs). This content has to be converted to HTML (paragraphs, headers, lists etc).

See below for an example of both the wireframe and the HTML version of the. This example is the one we did in class for the home page. It does not have content.

Example of mapping the elements in the HTML file for the homepage to the wireframe for the homepage.

Here is an example of the beginning HTML file on the left with just the page sections from the wireframe and then the file on the right includes the page content

You are not required to create any CSS for this assignment. That will come later.

Step 3: Upload files to Assignment 6 in Blackboard

There should be two files uploaded:

  1. PDF of your Wireframes
  2. Zip file of your Smarty Study Skills Website folder