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.
There are two menus: one uses display: inline-block on the list items and anchor tags, and the other uses display: grid on the unorded list and display: block on the anchor tag.
Shortcut Menu 1
You'll use display: inline-block and text-align: center to get the menu centered.
You'll use image replacement for the three hyperlinks. The video on our weekly overview document goes into detail.
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. The video goes into detail, as does the class demo (recorded).
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.
Shortcut Menu 2
This uses display: grid to create the separate "tiles" for the menu. The presentational difference is that this menu is not centered. The tiles are spread out across the live space and "touch" the left and right edges. The centered menu is different (it's centered!).
Creating the grid
The grid uses 22% for the 5 columns and 4% for the column gap. The anchor tag uses display: block and is resized to be 214px tall. The background-size is 100% for the background images. This resizes them into the width of the grid column.
Pay attention to the markup
There are classes for the list items for the image replacement, there is a class in the page name and one for intro text, since this is common on homepages and the classes can make styling a bit easier.
As always, be sure your pages validate (html and css)