Topic Homework Assignment:
HW-05: “Typography”

These are the requirements for your homework this Topic. You should go through all of the materials before beginning, so these requirements make sense.

/web-dev-hw/project-3/

Continue your Project 3 by creating your additional files and directory structure. At a minimum:

In Atom, create a new file and save it in /project-3/pages as about.html
Create another new file and save it in /project-3/pages as contact.html.
Create another new file and save it in /project-3/pages as sample.html.

You should now have at least 4 pages (including your index.html) and 1 stylesheet (/css/style.css) Project 3 Directory in Atom

Fonts

You have three options for using fonts in this Project.

Including and linking to external font-package files, as show in the Download with Google Fonts Example.
NOTE: You should add additional directory structure with this method:
Importing through the google fonts API, as show in the Source Google Font Example.
- In a HTML file, via the STANDARD method:
HTML
```
   <link href="https://fonts.googleapis.com/css?family=Arvo:400,400i,700,700i" rel="stylesheet">
```
- In a CSS file or HTML <style>...</style> element, via the @IMPORT method:
CSS
```
   @import url('https://fonts.googleapis.com/css?family=Arvo:400,400i,700,700i');
```
A combination of both (this will really impress me).

Structural Linking

In the next section we will be making a decorative menu for your site. At this time, please include a basic list of links to your site pages for grader navitation. It should be in your index.html and does not need to be styled.

HTML

<body>
  <!-- This is an example: -->
  <ul id="nav-list">
    <li><a href="./pages/about.html">About</a></li>
    <li><a href="./pages/sample.html">Sample</a></li>
    <li><a href="./pages/contact.html">Contact</a></li>
  </ul>
  <!-- Your site content below: -->
</body>

Style Plan:

Think of your site as a whole or as a “brand.” How can you style your pages using typography and color so that they showcase different content, yet apply to the whole? Don’t just go dancing about willy-nilly here. Take a minute to consider this, and then explore color and font combintations that apply to your content.

Ask Yourself:

Is your site for young readers?
Example: http://www.nicola-davies.com/
- Perhaps your theme is “bright” or “fun” or “cute”.
- Your color palette might include pastels or primaries.
- You might use one highly-decorative font and one highly-legible font for ease-of-read.
Is your site for avid news consumers?
Example: http://time.com/
- Perhaps your theme is “bold” or “stark” or “editorial”.
- Your color palette might be monochoromatic with one high-contrast accent color.
- You might use one strong serif font and one complimentary sans-serif font for article conent.
Is your site for a specific sub-culture or consumer?
Example: http://therealstanlee.com/
- Perhaps your theme is “graphic” or “eye-catching” or “juicy”.
- Your color palette might include a wider analagous or complimentary color palette
- You might use one cursive or disply font and one highly simplistic, focusing on kerning and spacing.

These are just examples. You should this about this process, and add it to your readme.md for the week.

Styling Requirments:

After you’ve written about your Style Plan in your readme, begin collecting and builidng your materials. In any way or place you choose, your site needs to include:

Typography

The use of 2 complimentary fonts:

These fonts should support the affect of the pages content.
The fonts should be visually appealing, without distracting from the content.

Your story should be embellished visually through the use of:

emphasized text
strong text
colored text

(This means you will need to import all of the appropriate font-family varieties for your body font. Remember: One way of selecting specific words to alter with color, is to wrap them in a <span>...</span> element with a unique ID or class name.)

The use of at least 2 attributes below:
You should be purposeful and deliberate in your text setting with the following properties:

font-size:
text-align:
line-height: (Leading)
letter-spacing: and/or word-spacing: (Kerning)
font-variant: and/or text-transform:
text-indent:
text-decoration:

Color

Begin thinking about the color of your text and the colors of your site.

You should identify and choose a color palette that you will utilize for your page. This color palette should be used to color the:

background
headings
headings background
emphasized text

You may choose to use a neutral color such as black, dark gray, or light gray (depending on your background color) for the text color itself.

Page Structure

Title

The title should be styled uniquely from the rest of the content.

The title should be visually clear.
The styling of the title should help the reader identify it.
But the styling of the title should relate to, and complement, the rest of the page.

Headings

In addition to a title, your content should be distinguished, separated, and prepared with logical headings and possible sub-headings. As with the page title, these should be:

Visually clear
Not detract from the page
But work with the rest of the content on the page.

Body Text

The main text of this document should be easy to read. You can accomplish this by thinking about the points discussed above in CSS Specs.

As mentioned above, you body text should be embellished by marking some of it as strong, emphasized, and using color to further set text apart.

Content Requirements:

`index.html`

Just like in Project 2, your index needs to function as a home page for all of your content, acting primarily act as a hub for all your site’s pages. This page needs to include at a minimum:

A clear site title (heading).
A “selling feature,” like a book summary, written snippet, article heading or list, image, etc. This should draw us into the article/literature/essay/blog that we’ll get the full extent of on sample.html.
2 or more reviews that you style separately (for example, using a span or class and that changes the font style, color, position, etc to make it stand out).

NOTE: You can make these up, but with a little searching, it is quite easy to find introductions and reviews of written work. Again, dust jackets, Amazon, Barns and Nobel, and Goodreads are ususally very helpful for this.

`sample.html`

This page should carry the bulk of your content, and needs to include the full piece or sample portion from a written work. This page needs to include at a minimum:

A clear title (heading) and body.
2 complimentary fonts.
You must use at least one “pseudo-element”:
CSS
```
::first-letter {}
::first-line {}
```
You must use at least one “pseudo-class”.
CSS
```
  ::hover {}
  ::active {}
```

When it comes to pseudo-classes, you have more options you can explore on your own. A possible use of a pseudo-class is with a “read more” or “pre-order” / “purchase here” button if you need an idea, but you can fulfill this requirement any way you want.

`about.html`

This area needs to be about the writer, be it you or the cited author. You may source all this material, as long as you cite it below your content. This page needs to include at a minimum:

A paragraph about the author.
A quote or fun fact that you style separately.
A related image.

`contact.html`

You need to include a simple contact page, where a reader can contact either you, a publisher, the author themselves, or whomever. Try finding a legitimate contact (say Scholastic), or create a false entity. Create a form that inlcudes at a minimum:

A name input.
An e-mail input.
A text box to add comments/questions/ect.
A submit button.

`readme.md`

Continue documenting your learning progress in your Project 2 Readme as you go along. This week, please include a short paragraph about your theme+color+font choices, and why you selected them.

{ TODO: }

Use the previous pages of the Topic to complete you homework assignment.
Finish documenting your Project’s progress in your README.md!

Previous section:

Go Further with Fonts

Next section:

To Wrap-Up

Topic Homework Assignment:HW-05: “Typography”