Pattern library timeline · Web Dev Topics

Install tools

Week 1 — Basic setup, installing a few more tools but we’ll dig more into them later in the term.

Create website UX

Week 1 & Week 2 — Design, plan & UX-ify your website in preparation for building each pattern.

Set up tools

Week 3 — Dig into the tools a little more, initializing and setting up everything for the term.

Set up the pattern library

Week 3 — Start the pattern library and get everything running in preparation for work.

Style typography & colours

Week 3 — Set up the basic typography, brand & colours of the website.

Write an introductory readme

Week 4 — Learn to write a basic README file to describe project details.

Structure data

Week 4 — Learn to structure data into formats that computers can parse more easily.

Make patterns

Week 4 — See how to make patterns in the pattern library tool, the file organization & the system.

Style buttons

Week 4 — Style all the buttons you’ll need for your website.

Create icons

Week 4 — Create all the icons you think you’ll need and merge them into a spritesheet.

Code images & cards

Week 4 — Code up all the image patterns and all the different card styles you’ll need for your website.

Document patterns

Week 5 — Learn to write helpful & useful documentation for patterns that other people—without your knowledge—can use.

Design forms & fields

Week 5 — Design all the necessary forms & form fields you’ll need for your complex website.

Code navigation

Week 6 — Code all the different navigation patterns necessary for your complete website.

Style different sections

Week 6 — Style all the page sections for the homepage and any inside pages.

Code headers

Week 8 — Code up the website masthead and any other header-link introductory elements.

Design footers

Week 8 — Design & code the website footer and any other footer-link items like captions, terms, etc.

Share code & build pages

Week 9 — Learn to share code between different pages and build out a whole page using the patterns.

Prepare datasets for output

Week 9 — Get a bunch of datasets ready to help build pages more automatically.

Design remaining patterns

Week 9 — Design any remaining patterns that haven’t been done.

Build pages with Jekyll

Week 10 — Learn to build pages on your website using Jekyll, how to link them together & how to user layouts.

Piece together the homepage

Week 10 — Piece together the complete homepage with only includes & layouts.

Write & finalize documentation

Week 11 — Finalize the documentation for all your patterns to help your teammate’s build other pages using your patterns.

Design the product list page

Week 11 — Code up the product list page using your datasets, patterns, includes & layouts.

Hand-off to team member

Week 12 — Discuss & hand off all the necessary information, wireframes & documentation to your teammate.

Code the checkout form page

Week 13 — Get a teammate to completely code out the checkout form page using your patterns.

Merge team work

Week 13 — Merge your teammate’s work with your own repository.

Code the product details page

Week 14 — Get a teammate to write the code for the product details page, selecting a single product from within the product’s dataset.

Merge teammate’s work

Week 14 — Do a final merge of your teammate’s work into your repository.