Assignment 2-4

[ambethia]

Week 4 - Day 4

Description

One of the basic, foundational skills in being a professional web developer is the translation of a designer's mockup image into a web page with HTML and CSS. One of the basic, foundational news portals for professional web developers is "Hacker News," which is kind of like a Reddit for the startup/design/development community with a very... minimalist design ethic.

Since it's so simple (there's only one image!) we're going to start off here.

At the same time, we're also going to get into the habit of frequently creating git commits as checkpoints.

Objectives

Learning Objectives

After completing this assignment, you should be comfortable with

• Translating images/PSDs to HTML and CSS
• Hosting static pages on GitHub
• Using git on the command line
• Best practices for committing frequently

  Performance Objectives

After completing this assignment, you be able to effectively use

• Chrome developer tools
• GitHub pages
• Terminal
• git
• Your text editor of choice

  Details

  Deliverables

• A GitHub pages-hosted repo containing
  • [x] index.html
  • [x] index.css
  • [x] All images in an assets/images folder

    Requirements

• [x] Valid, semantic, accessible HTML
• [x] Valid CSS
• [x] At least one git commit (with a message) every hour that you're working on this project

Using HTML and CSS, re-create the above image as a static web page. Don't worry about the text content (feel free to use a lorem ipsum generator), but use the original image and make your best effort to match the dimensions and styles of original page.

Here's the only image asset you need for your page:

https://dl.dropboxusercontent.com/u/4024808/grayarrow.gif

Bonus

Build a webrick app (like what we've been doing in class) loading each article from a yaml file.

Bonus Bonus

Research how to deploy your webrick app to Heroku.

Additional Resources

• Hacker News
• Meet the Ipsums

[bristolkr]

I cannot, for the life of me, get the footer menu to center. I refuse to waste more time trying--the rest is as close as I can make the page to the mockup. http://cateia97.github.io/iron_news/