Other Pages

make_columns.step

goals do
  message "These challenges will have you diving into the CSS side of things. Open up that layout.css file and take a look."
  goal "Give your main content a border"
  goal "Make two columns and line them up side by side"
end

steps do
  
  step do
    message "CHALLENGE: Find the div with the id 'main' in your HTML. See if you can give it a one-pixel border on its left hand side by modifying the existing stylesheet, 'layout.css'."
    message "If you get hung up on what CSS property to use, see if you can look it up on [dochub](http://dochub.io/#css/)."
  end
  
  step do
    message "CHALLENGE: If you styled the #main div in the previous step by using a style rule like `#main { property: value; }`, see if you can come up with a second rule that could also apply the same style, but use a different selector."
    message "Hint: You can select an element that's _inside_ of another element by listing one selector after another. The selector `.content div {}` would apply to any divs inside of an element with class `content`"
  end
  
  step do  
    message "CHALLENGE: See if you can turn the page into a two-column layout. Make the 'nav' div the left column, and the 'main' div the right column." 
    message "Two hints: it may be helpful to give these divs a fixed width, and you may need the `float` property."
  end

  message "<img src='img/page_sample.jpg'>"
end

explanation do
  
  message <<-MARKDOWN

## More CSS!

For some great examples of the power of CSS, check out the [CSS Zen Garden](http://www.csszengarden.com/). It takes
the same HTML, but shows it with stylesheets from a bunch of different designers applied to
it. Here are two different designers' interpretations of the same HTML:

<img src='img/css_zen.png'>

### CSS Reference Sites

* [Sitepoint](http://reference.sitepoint.com/css/elements-structural)
* [Mozilla Developer Network](https://developer.mozilla.org/en/CSS)
* [DocHub](http://dochub.io/#css/)

  MARKDOWN
end

insert 'consider_deploying_to_github'

next_step "basic_javascript"