Surveying the markup for our products page

You'll find this chapter's files prepared and ready in the folder 05_Code_BEGIN. This project builds directly on the completed design from Chapter 4, Bootstrappin' Business. If anything in these files seems strange, you may want to review Chapter 4, Bootstrappin' Business, before proceeding.

Tip

If you've not already downloaded the exercise files, you can find them at http://packtpub.com/support.

For this chapter, there is one new file in the main folder, products.html.

Open products.html in your editor to view the markup. Let's survey its contents.

The head, header, and navbar elements are consistent with what we've already seen in Chapter 4, Bootstrappin' Business. Inside the main role="main" element is where we'll find what's new. Here, you'll find the following elements in the same order as they appear:

• Breadcrumb links marked up as an unordered list

• A page title within an h1 heading

• A series of options for filtering products

• Nine products with thumbnails...