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)
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)
šRelated Links
š¹Introduce Fan Page
šExercise: Hovering
Activity 1 ā Workshop
šActivity 2 ā Hover Sketch