Fall 2019 Foundations of Web Design and Development — Assignment 5 (More Design and Using Sass)

• Do not edit this file.
• Do not start this project until you have read these instructions carefully.

Instructions

Your task is to create a web site of Dieter Rams’s ten principles for good design. All ten are included in the accompanying file ten-principles-for-good-design.txt. You can create a single page site containing all ten rules, or a single site consisting of ten pages.

Your project must consist of the contents in the file ten-principles-for-good-design.txt and a navigation system, at the very least. Including open source images is encouraged.

Before You Begin

1. Log in to GitHub.
2. Fork this repo(sitory). See this video on how to carry out this step and step 3.
3. Clone your fork, using either the web site or the GitHub Desktop client.
4. Checkout your personalized branch, the one with your name and GitHub user handle.

Project Scaffold

This repo contains a folder called site, which, in turn, contains some starter files for this project. (See the File List section below.) Before you start, replace PUT YOUR NAME HERE in the title element of index.html with your name, and replace PUT YOUR GIHUB USERNAME HERE with your GitHub username.

File List

1. README.md
2. ten-principles-for-good-design.txt
3. site/css/reset.css
4. site/sass/style.scss
5. site/sass/.sass-lint.yml
6. site/index.html
7. site/img/

Note: There are .gitignore files all across this scaffold. Do not modify them.

The Rules

• You may not author any CSS, only Sass.
• Your Sass must be free from errors based on the rules in site/.sass-lint.yml.
• Only submit files that are required by your project: Do not submit working files, such as .psd, .ai, .indd, or .sketch files.
• Use lowercase, combined with kebab case, to name folders and files (do-this or do-this.html); no spaces in folder or file names (not this); no camel case (notThis); no snake case (not_this).
• Do not alter reset.css.
• Do not alter any of the .gitignore files.
• All your HTML files must go in the root of the site folder, with the index.html file acting as the springboard for your project.
• All your Sass files must be placed in the included sass folder.
• All the CSS your Sass generates must be placed in a file called style.css, which must be placed in the included css folder.
• Any images you might use must be placed in the img folder and must be 1MB or smaller.
• Your site’s design and UI must be logical, clear, and easy to use.
• You must use at most two typefaces. Look to https://fonts.google.com/ for ideas.
• You must use at most two colors, in addition to a neutral. Look to https://color.adobe.com/ for ideas.

Validate

Make sure Atom continually reports No errors were found! in the lower left hand corner and that your Sass is validating according to the rules in .sass-lint.yml. Solve validation issues and Sass rules violations as you work — don’t let them accumulate.

Due

Wednesday, 4 December 2019, at 11:30 AM.

Submission

You will need to issue a pull request back into the original repo, the one from which your fork was created. See the Issuing Pull Requests section of this site for help on how to submit your assignment.

Note: This assignment may only be submitted via GitHub. No other form of submission will be accepted.

Grading

Item	Points
HTML is W3C-compliant	25
Sass is organized and logical	25
Design shows attempt at producing quality work	25
Rules outlined above followed correctly	25