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 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 , a content section, and a footer section at the bottom.
  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 and consistent fonts and text colors.
  5. All styling is accomplished via an external CSS style sheet.

HTML and CSS  – DUE December 2, 2016

  • Home page (index.html)
  • Second page (e.g. story.html, name the files accordingly)

Upload sharable link to all site folder to Google Classroom > Visual Narrative Website  in a folder Last Name_First Name-Midterm Website.
If you submit after the deadline it will be an INCOMPLETE – 65

Exit Slip: Before you leave class today, answer the following questions.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s