Create a single responsive web page that tells a “multiple page” story by using @media queries to display and hide content based on the width of a browser window. Each individual “frame” should tell a part of the narrative.

You must also use javascript events to add interactivity to the project. You might hide and show hidden messages, change the color or content of something, or create animated effects.

The content can be a creative short story, topic, or idea of your own. All graphics and imagery must be original.

This project from a previous semester of Web is a great example / reference for your project.

Parameters

  • only one html page in length
  • a minimum of 3 javascript events
  • build and implement an external css stylesheet
  • validate both the html and css
  • all content (text, graphics, imagery) must be original

Evaluation Criteria

20% each: Conceptual Thought, Originality & Aesthetic Design, Code, Use of Media, Interactivity

Project 4 is worth 10% of your grade.

Project 4 is due prior to the scheduled final exam