# Midterm Project

Each student will build a static website, which will be hosted through GitHub Pages. Students will be responsible for developing the design, layout, structure, and content for the site. To receive a favourable grade, students must demonstrate that they have learned and applied the skills practiced in class, including using Sass, NPM, Gulp, and Git.

Students may choose to craft their own style sheets, or utilize a framework like Bootstrap or Bulma.

However, students MAY NOT use a third party (free or paid) pre-styled CSS theme. Doing so, will result in a grade of ZERO.

Students may choose from a list of pre-approved projects below or submit an alternate idea for approval. Be mindful of the scope limitations of a static website - no database, no server-side scripting.

# Topic sugestions

1. Web Portfolio: A site of your work or accomplishments.

2. Personal Interest: A site about a topic that interests you (i.e. video games, photography)

3. Event Promotion: A site to promote an event (i.e. conference, wedding)

4. Product Promotion: A site to promote a product, business, or service

# Evaluation Criteria

Graded out of a maximum score of 100 points.

Rubric	9	7	4	0
Publicly available on GitHub Pages	Final version publicly available at github.io	Correctly created GitHub Pages repo, but did not merge content into master branch, or content is located is another public sub-folder.	Did not correctly create the GitHub Pages repo, or content is located in a non-publishable sub-folder.	Did not use GitHub Pages for hosting.
Used Git to manage development	Used dev branch for editing and merged with master for deployment	Some editing done directly on on master branch	No git dev branch or used GitHub’s “upload files” instead of pushing commits from local repo, or has dev branch but all commits are on the master branch.	Did not use Git at all.
NPM	Project includes a correctly formatted package.json file with relevant dependancies	Project includes unused or irrelevant dependancies	Project does not include minimum dependancies for Gulp and Sass	No package.json file
Gulp	Project includes a valid gulfile.js with all of the expected plugins.	Project’s gulpfile.js has runtime errors, or is missing PostCSS plugins.	Gulpfile has no Sass compiler task	No gulpfile.js file
Gulp Sass	Correctly uses compiled and minified CSS	Uses compiled CSS, but not minified CSS, or loading both versions.	Compiled CSS created but not used.	CSS not compiled from Sass
Saas	Source code demonstrates multiple Sass optimizations in the styling markup	Source code demonstrates at least one Sass optimization in the styling markup	Source code includes a Sass file but contains only plain CSS	No Sass source file.
Responsive Design	Fully repsonsive	Somewhat responsive, but not all content is properly resized or reflowed.	Visible but not practically usable at all viewport sizes	Not responsive at all.
Conforms to requirements	Consistent with project requirements and written proposal (as may have been amended).	Minor change from proposal, with one or two planned content elements are missing.	Significant change from proposal, or numerous planned content elements are missing.	Completely out of scope.
Design	Clean, professional, modern design that clearly conveys the purpose of the site.	Some optimization of sizing or spacing of elements would improve usability and professional look.	Content is not organized intuitively, is very difficult to read, or the purpose of the site is not easily understood.	Visually unappealing or virtually unusable due to colour scheme or font sizing, etc .
Production Ready	Everything is complete and works as expected.	Minor content editing or formatting tweaks required	Some nonfunctional elements or broken links.	Significant amount of missing or broken content.
Code Quality	Clean, readable, well organized and commented.	Some minor code formatting issues, but generally understandable.	Not well formatted. Difficult to read and understand.	Malformed, invalid code causing runtime or rendering errors.