summary	time	deliverables
Create the product list page for your website by using your previously created patterns.	2 hours	Pattern library

Product list page template

Overview

• Continue work on your ecommerce-pattern-library
• Use your previously designed patterns to create the page that lists all the available products.
• Use Patternbot’s include system to avoid rewriting or copying-and-pasting the pattern HTML.
• Use Jekyll’s collections, loops & other features to automatically generate the full list of products that you previously set up in your Jekyll collection. There should be very little HTML that needs writing.
• You should only write HTML and insert appropriate classes like .grid and type sizes.
• Your product list page does not get its own CSS file. If you cannot create the page without writing CSS, your patterns aren’t good enough. Go back to the patterns and add variations. Or make a brand new pattern.
• Remember that Patternbot will automatically add all your CSS files to the top of the page. This is exactly why it’s super important that your patterns do not target HTML tags directly because at this point there will be collisions.

---

Hand in

Show teacher for marks during next class.