Creating Shortcut Menus
Shortcut menus can be nice to have on a homepage, or potentially on a page that represents a larger portion of a website. In any event, image replacement is a way you can eliminate the text and just use an image for the hyperlink.
Watch the video on this so that you can see the glorious styling details.
Note: if you WANT the text, you do not need to "replace" it, but you'll probably want to use relative positioning to get it where you want it inside the anchor tag's display box. This exercise has you replacing it.
Take note of the markup!
There is a nav in the homepage's article, and it will need the class shortcut-menu so you can style it specifically. Because you probably want to style other aspects of the homepage differently than the rest of the site, the body on the homepage has a class of home and I've written styles assuming multiple pages in a site that don't want centered text in all the articles.
You'll have to put classes into each of the shortcut menu's list items, and you'll need the span to isolate the text within the anchor tags. See the FIR video on how to do this. You've done it already in the site id exercise.
Dimensions for the shortcut menu anchor tags
Each of the anchor tags needs to be 225px wide and 225px tall (they are square).
The background images are larger than they will display, so they remain crisp on high-density displays. See your image optimization notes for more information. They will need to be styled with background-size so that they are also 225px square. See background image notes for more information.
This design has a hover for the image, so be sure you create a hover style!
Centering the menu
The list items need to display horizontally, and you need to be able to set the dimensions on the anchor tag. You also want to center the anchor tags in the width of the nav and/or ul. display: inline-block is the best way to achieve this because you can use text-align to center the list items and then height and width will work on the anchor tag.
Hover styles
You have many options for hover styles. I made simple images that desaturate the color, but you could do many different things with this. Of course, you'll need to write hover styles to get the hover images to work.
As always, be sure your pages validate (html and css)