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.
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)
You can either make it on glitch.com or on your github account
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)
Recently Seen Online
In-class: Hovering Activity
Activity 1 – Workshop
👉Activity 2 – Hover Sketch
Small Group Meetings
Group 1 – 2:45
Group 2 – 3:35
Group 3 – 4:05
Group 4 – 4:35