📝 Penn Week 5b – Fan Page Intro & Hovering

👀Related Links


🔹Introduce Fan Page

link →


📝Exercise: Hovering

Hovering is one of the most basic ways of adding interactivity to a webpage. It can be used as a clue to differentiate content that links to something else.

On mobile, hovering is disabled so when you’re working on larger projects, it’s important to consider how the design will accommodate for touch screens. It’s also a good idea not to hide necessary information behind a hover state.

We’re going to experiment with hovering through an in class assignment.

Activity 1 – Workshop

  1. Download http://arts21.labud.nyc/assets/guides/hover-demo.zip (copy and paste the URL into your window) and open it up in Chrome as well as Sublime text. Complete the instructions at the end of the page.
  1. Review the hover syntax

👉Activity 2 – Hover Sketch

  • Create a quick, single page website that illustrates a quality about today. You could consider the date, the weather, your mood, what you did, what you had for lunch, or something else all together.
  • The website should utilize hover states in a meaningful way that helps communicate the day. You could consider adding type, imagery, CSS shapes, etc. There is no limit on how many hover states you can use, but one effect can go a long way.
  • The website should be a single page and you should turn in whatever you finish in class (focus on the project for homework)
  • This should be created in a new directory that lives in your exercises folder and uploaded to GitHub.
  • Your website should also include a favicon! (A favicon is the little icon that comes up in the tab of your browser. You’ll need to design it at 32x32 px png and link to it in the document head)
  • <link rel="icon" type="image/png" href="/somewhere/myicon.png" />

Student Examples


Code Snippets