Visual Narrative – Code (HTML and CSS)


  • Create a vertical navigation or horizontal navigation
  • Use the background property
  • Nested and float elements
  • Create layers within CSS


Create a website containing a home page and second page based on your journey/event/activity.


  • Directory structure
  • External Style Sheet


Begin creating your personal website that complies with the following:

  1. The page is 960 pixels wide and centered on the screen, no matter the screen resolution.
  2. All pages have a header section, nav section, content section, and footer section.
  3. All pages have a navigation menu that includes links to all pages on the site.  The navigation menu can be horizontal (between the header and main content area) or vertical (left side of the main content area) but must be consistent for all pages.
  4. All pages use the same color scheme/palette and consistent fonts and text colors.
  5. All styling is accomplished via an external CSS style sheet.

HTML and CSS  – DUE Monday, December 2018

  • Homepage (index.html) which will consist of the gallery
  • Second page (e.g. story.html, name the files accordingly) will consist of the narrative and images

Upload sharable link to all site folder to Google Classroom > Visual Narrative – Website in a folder Last Name_First Name-Website.

If you submit after the deadline it will be an INCOMPLETE