hacer_columnas.step

goals do
  message "Estos desafíos te tendrán sumergida en el lado CSS de las cosas. Abre el archivo layout.css y dale un vistazo."
  goal "Poner un borde a tu contenedor principal"
  goal "Hacer dos columnas y alinearlas una a lado de otra"
end

steps do

  step do
    message "RETO: Encuentra el div con el id 'main' en tu HTML. Ve si le puedes poner un borde de un pixel en el lado izquierdo modificando la hoja de estilo existente, ‘layout.css’."
    message "Si te preocupa cuál propiedad CSS usar, ve si la puedes buscar en [dochub](http://dochub.io/#css/)."
  end

  step do
    message "RETO: Si diste estilo al div #main en el paso anterior usando una regla de estilo como `#main { property: value; }`, ve si puedes encontrar una segunda regla que también pueda aplicar el mismo estilo, pero utilizando un selector diferente."
    message "Pista: Puedes seleccionar un elemento que esté _dentro_ de otro elemento, listando un selector después de otro. El selector `.content div {}` se aplicaría a todos los divs dentro de un elemento con la clase `content`"
  end

  step do
    message "RETO: Ve si puedes convertir la página en un layout de dos columnas. Convierte el div 'nav' en la columna izquierda, y el div 'main' en la segunda columna."
    message "Dos pistas: puede ser de ayuda darle a estos divs un ancho fijo, y puede que necesites la propiedad `float`."
  end

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

explanation do

  message <<-MARKDOWN

## ¡Más CSS!

Toma mucho tiempo dominar CSS, pero hay muchos y muy buenos recursos para ayudarte.
Un recurso genial es [CSS Zen Garden](http://www.csszengarden.com/), un sitio con docenas de ejemplos
de la _misma_ página HTML estilizada con diferentes hojas de estilo enviadas por usuarios.
Mediante los ejemplos de este sitio puedes darte una idea de cuán ilimitadas son las posibilidades con CSS.

### Sitios de referencia de CSS
* [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 'considera_lanzar_a_github'

next_step "basic_javascript"
Otras Páginas

hacer_columnas.step
