Surveying the markup for our products page
You'll find this chapter's files prepared and ready in the folder chapter7/start
. This project builds directly on the completed design from Chapter 6, Bootstrappin' Business. If anything in these files seems strange, you may want to review Chapter 6, Bootstrappin' Business, before proceeding.
Tip
If you've not already downloaded the exercise files, you can find them at http://packtpub.com/support.
Run the bower install
and npm install
commands in your console before going on with the next steps! For this chapter, there is one new file in the html/pages
directory, products.html
.
Open products.html
in your editor to view the markup. Let's survey its contents.
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 ordered list
A page title within a
h1
headingA series of options for filtering products
Nine products with thumbnails, titles...