Ex-4: HTML + CSS Multi-Page Site Review

Exercise 04

HTML + CSS :: Multi-Page Site Review

Due

  • Date: Please check Blackboard’s “Weekly Schedule!”
  • html file uploaded to the server

Requirements

  • First, browse the internet and find five websites that you feel are indicative of strong web design. Consider not only look and feel, but also load time for images, usability, functionality, and how well the site speaks to its audience.
  • You will create a small website that includes an index page with a statement of purpose for the site, as well as 5 other pages (each for a website you are reviewing).
  • All pages must include a navigational toolbar that allows viewers to get to any of the pages from any page within the site.
  • The index page will have a brief statement about the site and any other general review observations you might want to add.
  • Each site review page will have a resized screenshot (cropped detail okay) that serves as an external link to the actual site. The page will also include a detailed review of the site.
  • All styling will be done with a single external css page. Do not embed any css in the html files.
  • All coding will be done with an HTML5 doctype.
  • The following HTML tags must be present in each page and styled with css :
    • h1 : assign it a unique color, font, size, padding, margins and any other special styles
    • h2 : same as h1, but make sure it is distinct from other heading styles. It should have common visual sense.
    • p : same criteria, but distinct…
    • ol OR ul: ditto
    • body: color, margins, link colors
  • Properly title each page in the HEAD of the document
  • All content should be responsive to all device sizes.
  • You MUST include at least one media query that addresses the need for change on different screen dimensions.
  • You must include a mobile navigation/jquery menu as in the demonstrations.
  • Make sure all images have “alt” attributes (“alternate text”).
  • Upload it to the server using SFTP (Secure File Transfer Protocol)

 View Example Student Work

 

 

FIRST: See how you can get started in this slideshow:

Building a Template-Based Site PDF Presentation

Download the pdf slideshow here.

 

Building a Template-Based Website

The following video demonstrations are consecutive and chronological. To learn how to create a fluid, responsive 6-page layout with mobile navigation, watch all videos (total ~3 hours).

Please note: in the Javascript implementation demo, I tell you that you can copy and paste some javascript code. You can download the complete Exercise-4 Javascript Mobile Menu Script. This is the complete code, but when the script is first introduced in the tutorial, it is incomplete and later completed.

Note About the Videos Below

To reduce page load time, the videos below are minimized to a small scale, but you can watch them larger either by clicking the Full Screen player icon, or by clicking the YouTube player button to watch on the YouTube site. Once the video starts, you can also click the gear icon to increase the quality/resolution on faster connections.

Part 01 (14:56)

Creating screenshot images for your pages.

Part 02 (12:48)

Creating a scalable vector graphic (SVG) with Illustrator.

Part 02b (7:09)

This is a continuation of the SVG demo, and it explains how to create outlines of your font so that you don’t have to worry about other people having the same font on their computers.

Part 03 (14:48)

Getting started: translating the layout to HTML structure.

Part 04 (9:05)

This finishes up the basic HTML markup for the template.

Part 05 (14:59)

Applying ‘reset’ and custom stylesheets to the template.

Part 06 (14:15)

Start styling the global “top” navigation bar.

Part 07 (14:57)

Finishing up the “nav#top” styling

Part 08 (14:58)

Styling the “section#content” area with floats, text definitions, and adding a figure/caption to the screenshot.

Part 09 (9:58)

Styling the footer elements

Part 10 (14:59)

Using media queries to keep the design responsive

Part 11 (14:09)

Using javascript and styling to hide/show mobile menu

Part 12 (14:39)

getting the dropdown menu to work with a close button

Part 13 (10:13)

Finish styling the mobile nav overlay and closing button

Part 14 (7:16)

Propagating templates for site and adding content to complete the site.

 

Upload

  • Upload to our class server making this the parallel directory path:
    Lastname_Firstname/    exercises/exercise4/
  • What does that mean? Remember, if you are working inside of a folder on your computer called “exercise4/” then you would drop the entire folder into the server’s “Lastname_Firstname/exercises/” directory.
  • Here’s the path you are REQUIRED TO USE:
    YES! … Lastname_Firstname/exercises/exercise4/
  • What you DON’T want to do is put directories inside of other directories or make up new names. Here are some varieties what NOT TO DO:
    NO! …. Lastname_Firstname/exercises/exercise4/exercise4_new/
    NO! …. Lastname_Firstname/exercises/exercise-04/
    NO! …. Lastname_Firstname/exercises/exercise4/yourname/
  • Why? We will use a pre-made student launch page so that we can easily look at each other’s webpages. This page will already have the addresses for student assignments on it, and if you don’t make your path conform to the link in the launch page, no one will be able to get to your assignment, including the instructor! You will automatically lose points for not following this instruction.
  • To test it in a browser, use the following URL, substituting your own name in the appropriate place:
    http://mat.miracosta.edu/MAT125_online/studentwork/Lastname_Firstname/exercises/exercise4/
  • HINT: for additional help using an SFTP program to upload your work, please refer to the tutorials in the:
    ~~~ “Weekly Schedule > Week 00: Orientation > Connecting to Server” folder.

Instructor Demo:

Digital Art, Design, and Communication Education