Week 2

Homework: ACME Corp

Build the homepage for Acme Anvil Corporation. It should end up looking like this:

Here's the URL for the image: http://cloud.avandamiri.com/image/423B1n2p2v0U/acme-corp.jpg
Here's the URL for the background image: http://cloud.avandamiri.com/image/3N410e2Q2Z3F/background.png
To center a container (e.g. <main>) set margin-left and margin-right to auto and set a width. You can set the width to a percentage like 60% or so. Try also playing with max-width.

We didn't get to finish building our profiles today. It would have been nice to practice a bit more. I finished mine and posted it for you to use as a reference when working on the homework. Just View > Developer > View Source to see my code. Avand's FEWD 34 profile.

Resources

Submitting Homework

Create a folder in your GitHub repo for homework. (maybe call it "homework")
Put your homework files in the homework folder
Commit and sync your changes to GitHub

<head>

There are a bunch of things that make up a web page aside from the actual document content itself. Stuff like:

Window/Tab/Page title
Description
Metadata about the page (used by other pages, like Facebook and Google)
Javascript files
CSS files

Generally speaking, metadata goes in the <head> tag, and page content goes in the <body> tag.

Positioning

When you use anything other that static (the default value for position), you'll be able to use the properties top, right, bottom and left to adjust your elements position, but how it is positioned depends on what value you set position to:

position: static;
Positions based on the content; cannot be adjusted and it's the default value for position for all elements (you probably don't need to know that, but can use it to sound cool at parties).
position: relative;
Positions relative to where it normally is.
position: absolute;
"Absolute children have relative parents!" An absolute child element will be positioned relative to it's parent (the one that has position: relative).
position: fixed;
Positions with respect to the browser window (useful for sticky headers and stuff). Use with caution because it will probably cover text!