Current Assignments:
> HW-04 Work Time
> P2 Peer Review (Assessments)

Due:
Wed Oct 25 @ 11:55PM
Previous module:
Next module:

Topic Homework Assignment:
HW-04: “Color”*

*Not due till next Topic

There is no true assignment for this Topic. Rather, it’s our hope that you take this time to explore CSS on your own, and play around. You should begin thinking about the contents of your site, but no real structue will be required until HW-05: Typography.

You are required to create a detailed readme for this Project however, containing ideas and a color palette. You should take this time to begin that process, and start getting your Project 3 set up:

/web-dev-hw/project-3/

Begin your Project 3 by creating your README.md, pages, and CSS file:

  1. In Atom, create a new file and save it in /project-3 as readme.md
  2. Create another new file and save it in /project-3 as index.html.
  3. Create another new file and save it in project-3/css as style.css Project 3 Directory in Atom

Standard Page Structure

By now you should be familiar with the basic structure of HTML pages, including their !DOCTYPE and <head> elements. It’s always good practice to get this section laid out early. Skim “Reviewing the Head” again if you need a refresher.

Project Overview

Project 2 and The Instructable got you comfortable with stuctural and semantic HTML. Project 3 and the Literature Showcase will emphasize CSS, specifically color, typography, and layout.

This project will need images, fonts, and written content, so you may need to do a little research/prep:

  • Think of a written piece you’d like to showcase and its related website style. Please choose from:
    • A blog post (most likely written by you).
    • An article (news, sports, culture, arts, etc).
    • A book, short story, poem, or essay. (You’ll only need a sample snippet you like of its writing, not the whole piece.)
  • You’re also expected to gather some information:
    • The full work, or an example written portion (a few paragraphs, at least).
    • Provide a short bio about the author, even if it’s yourself. You can cite this material.
    • Have contact information to a publisher, fan-club, etc. You can also make this up.
    • Provide reviews. These can also be fake, but there are lots of legit reviews out there.

index.html

Play and experiment with linking your index and stylesheet! Try adding a heading and some paragraphs to your index - maybe even some classes - and referencing them in your CSS. This is your time to mess around!

This page will need a relative link to your stylesheet.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <title>Your Site's Title</title>
  </head>
  <body>
    <!-- Page Content -->
  </body>
</html>

README.md

All design goes through an ideation phase, where you brainstorm ideas and possibilities. For our last Project we’ll look at the process of wireframing (blueprinting) for the web, but for Project 3, we just want you to share your ideas in text and images.

Start your README by laying out your ideas:

  1. What type of writer’s site do you think you’ll make? (Blog, News, Book, etc.)
  2. Where will you get your material? (“Write it myself,” use this book title, cite this article, etc)
  3. What will you say about the author, even if it’s yourself?
  4. Include an image of your color palette. You should have 2-6 colors max!
  5. If you have some inspirational images, add them! Do you remember how to do this in Markdown?

Here is my example:

{ TODO: }

  1. Read the previous pages of the Topic, and experiment with CSS.
  2. Begin your Project 3 README.md, sharing what your plans are for this project.
Previous section:
Next section: