Fall 2019 Foundations of Web Design and Development — Assignment 4 (Design and Advanced CSS)

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

Introduction

This assignment is designed to initiate you into the world of creating web pages using advanced concepts in CSS, employing what you’ve learned thus far and adding your own design sense.

Create and style a one-page web site using the pre-defined content from either of the text files in the content folder.

Once you’ve settled on a text file, populate index.html with that file’s content matched with your careful and semantic choice of HTML syntax. (Note: You may not modify the content in any of the .txt files.)

With the content marked up properly, add styling to the page using CSS. There’s no restriction on what you may do design-wise.

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.

File List

1. README.md
2. content/content--arvo-part.txt
3. content/content--boards-of-canada.txt
4. content/content--dawn-of-midi.txt
5. content/content--gy!be.txt
6. content/content--public-enemy.txt
7. content/content--ramones.txt
8. css/reset.css
9. css/style.css
10. index.html
11. img/

Rules

• 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).
• Place all your markup in index.html.
• Place all your styles in style.css.
• Do not alter or remove the reset.css file in the css folder.
• Do not alter or remove any of the .gitignore files.
• The only files you may add are images, which, if included, must go in the img folder. Ensure each image is under 1MB or smaller.
• Leave the inclusion of reset.css in the head of index.html alone.

Some Questions to Ask Yourself As You Do This Project

• Which sections are most important? Is there a tag for that?
• Is there an implied hierarchy in the content?
• What should be emphasized?
• How should I emphasize the important content?
• Which typeface will help me to get my meaning across?
• Do I want to lead the user’s eye in a direction other than that defined by the Gutenberg Diagram?
• What colors should I use?
• Do I want my design to be busy, minimal, or in between?
• Is my spacing too much or not enough?
• Is my content legible to people of all ages?
• Is my design inline with web sites presenting similar content? If so or if not, is this intentional?
• Does my font choice complement the message of the content?
• Is my design communicating what I need it to?
• Is the page easy to navigate?
• Is the user’s experience effortless?
• What should go above the fold?

Validate

Make sure Atom continually reports No errors were found! in the lower left hand corner as you work. Solve validation issues as you work — don’t let them accumulate. That’s called technical debt. Avoid it!

Due

Wednesday, 20 November 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
CSS is W3C-compliant	25
Design shows attempt at producing quality work	25
Rules outlined above followed correctly	25