Assignment: Web Worst

CREATE THE WORST WEB PAGE IN THE WORLD!!!

See the Pen Worst-01 by Stuart (@bystuart) on CodePen.

A.  – Build a sound Html Site with 3 links that will direct between 3 Web Pages:

  • Create 3 Web Pages
  • Create 3 Links for each Web Page
  • Name the Links: Home – Page 1 – Page 2
  • Connect the 3 Web Pages to the Links listed Above

B. — Research Websites

C.  — Plan your site based on the Design Principles discussed in the previous lecture.

  • Choose one of the Design Principles from the previous lecture (contrast, repetition, alignment, or proximity.)
  •  Now exaggerate that Design Principle when created your site.

See the Pen Worst-02 by Stuart (@bystuart) on CodePen.

D.  – There must be ATLEAST 10 pictures throughout the 3 Web Pages

E. — Demonstrate your knowledge of the Box Model:

  • Use the Border Property in 2 instances.
  • Use the Padding Property in 3 instances.
  • Use the Margin Property in 2 instances.

See the Pen Worst-03 by Stuart (@bystuart) on CodePen.

F.  — Inline vs Block:

  • Use consecutive inline elements in 1 instance.
  • Use consecutive block elements in 2 instances.

G.  — Demonstrate your knowledge of Positioning elements:

  • Use the Float Property in 2 instances.
  • Use Relative Positioning in 3 instances.
  • Use Absolute Positioning in 2 instances.

See the Pen Worst-04 by Stuart (@bystuart) on CodePen.

H.  — Create different background colors for each of the pages…

  • Therefore 3 different background colors (For example: Home (red background), Page 1 (blue background), Page 3 (yellow background)

I.  – Send a page describing the research of your page.

  • Describe and provide links to other bad sites that inspired you (2 paragraphs+).
  • Tell us which of the design styles you were attempting to exaggerate.
  • Explain colors you dislike or web attributes that annoy you… for Defending of your  ” Worst Website in the World”.

See the Pen Worst-05 by Stuart (@bystuart) on CodePen.

Example of Research and Site Description:

I was attempting to exaggerate repetition on my Web Page entitled “More Free Stuff!!”.    I dislike when a web page has too many attention getting headlines like “Join Today!!”, “Press Here!!”, Etc.

For the design of my site, I repeated attention getting headlines over 100 times in different colors, font styles, and font sizes.  My goal was to create a satirical represenatation and exaggerate the practice of attention getting headlines.

I created three animated gifs of  “Click Here Buttons” that constantly changed colors in a sequence that hurts an individuals eyes when the user looks for too long.

I was really inspired by the website of “Lings Cars”.  This website demonstrates a high level of web programming proficiency.  I think that the site is a fun site to be involved with, and really engages with the users to explore and experiment with the content.

J.  —   Upload your pages and Images to the Server

K.  —  Create a document to place on the Google Classroom with a link to your Worst Web Page.

L.  —  On the document tell  us how you feel the assignment could have been easier.  ( 1 = Bad , 5 = Good)

M.  — On the document rate the Assignment if you liked it? ( 1 = Bad , 5 = Good)

N.  —  Upload

Extra Credit:  If you decide to design your animated gif that represents Multimedia Arts at Berkeley City College, “Intro to Web Design”, or Code Berkeley.. we may use it for stuff.  You will get credit for creating stuff for an organization, and we will brag and show your work to others 😉

IMPORTANT NOTE:  Remember the more research detail (You can use pictures or present the animated gifs that influenced you on your web page) and banner ad productions the merrier!!  Have fun… go crazy!!

We give extra time on this assignment, because our expectations are very high.  Go for it!!

 

Questions