Fundamentals of Web Page Scripting – Sample Assignment

Unit 3: Week 03 – Homework – Urban Survival Redesign Part I

In this two-week exercise you will analyze a website with poor information design and user interface. You will re-design the site according to standards, and encode a prototype of the new site in HTML and CSS.

Download the description from Doc Sharing

  • Go to Week 03, Doc Sharing, and download “Week 03 Homework – Urban Survival Redesign, Part I.”
  • The Instructor will guide you through the homework, and explain what is required to complete the work
  • You can visit the site on your own at

Note: DO NOT take any HTML or CSS from the existing Urban Survival site. You should start the project with a clean slate.

Create wireframes and a sitemap

Create a sitemap as described in the homework. The sitemap should attempt to organize the site’s 2000 pages by one or more of the following categories:

  • Date of blog post
  • Topic of the post
  • By audience segment
  • By media type

Create a directory structure and default pages

  • Following your wireframe and sitemap, create folders and default web pages.
  • You do not need to style the site to final form using CSS.

Upload your site to Doc Sharing

  • When you have completed the basics, ZIP your site and upload it.
  • You will refine your site’s structure and layout next week.

Additional tutorials:

Unit 4: Week 04 – Lab – Urban Survival Redesign Part II

Hand in your hand-drawn deliverables

  • The Instructor will collect your hand-drawn deliverables
    • Sitemap
    • Hand-drawn wireframe
  • After scoring, the Instructor will give back the hand-drawn material for the next step

Unit 4: Week 04 – Homework – Urban Survival Redesign Part II

Download the Exercise from Doc Sharing

  • Go to Week 04, Doc Sharing, and download “Week 04 Lab – Urban Survival Redesign Part II”
  • Following the Instructor, analyze your wireframes and sitemaps according to
    • Business case (stakeholders)r
    • Information design
    • User experience (Ux)
    • Page layout

Create the redesigned site

  • Download the “urbane survival” starter website (has a few default files) from Week 04 Doc Sharing
  • Create a directory structure (suitable for your information design)
  • Create a default page layout for the home page
  • Create a default page layout for a blog post page
  • Add basic CSS styling, if you can
  • Add your Photoshop logo, if completed (See Week 03 Homework – Photoshop Identity for Urban Survival)

Upload to Dropbox

  • Archive your completed starter redesign
  • Upload to Dropbox under “Week 04 Lab – Urban Survival Redesign, Part II”