Class 12: Midterm Kickstart

Class on 10.16.2019

Today in class we are going to get everyone started on the midterm project by completing what would have been Assignment 6 and moving forward from that to start to put content on the page.

Basic Wireframes and HTML

formerly Assignment 6

We will start by looking at the Midterm Page Outlines and drawing wireframes for them. We will only draw one wireframe for each page, the mobile size wireframe.

Then we will look at this GitHub Gist that has simple base HTML page. This is close to what you’ve seen before with a couple of extra things.

Then we will make a folder for our midterms named Smart Study Skills Website
In this folder we will make three files:

  1. index.html
  2. retrieval.html
  3. about.html

Using the simple HTML page from the gist as a base (copy and paste) we will add elements to match the wireframes.

Page Content

The content for each page is available in this folder in our class Dropbox . Visit the link to access the files.

The next step is to copy and paste this content into our HTML files in the appropriate places and then convert it to HTML by wrapping the content in semantic elements (paragraph, heading, iist etc).

Most likely we will not have time to finish this for all three pages in class. Doing that will be your Assignment 6 which will be due in a week.

Navigation
Each page in the site has the same navigation. For now we will create the navigation simply by using an unordered list inside of a nav element: