Este 1er reto de Frontend se trata de maquetación. No queremos que te compliques mucho con el diseño en CSS, pues para eso tendrías que tener una línea gráfica definida. Utiliza el CSS y el HTML para poder crear una estructura como la que te presentamos a continuación (las etiquetas son de HTML5):
Esta maquetación es de una sola página de un blog. Además dentro de cada <article>, debes de incluir la siguiente estructura:
No te confundas, no son dos páginas diferentes. La segunda imagen es solo una descripción más a fondo de lo que tiene que tener cada <article> dentro de <main>
Te recomendamos, para no empezar desde cero, descargarte cualquiera de las 3 opciones que encuentras en el siguiente link:
No te hemos mencionado aún sobre esta herramienta, así que cuando ingreses a la web te recomendamos descargarte la opción Classic H5BP para que no te confundan los CSS predefinidos más complejos que pueden tener las otras dos opciones. Aunque si ya tienes alguna noción sobre Twitter Bootstrap, eres libre de utilizarlo ya que te facilitará mucho más el trabajar con la maquetación y el CSS.
Finalmente, no te preocupes por el diseño que puedas ponerle a la página, por ahora solo nos interesa que cumpla con la estructura que te mencionamos.
PD1: Es recomendable que los anchos los trabajes con porcentajes y no con medidas fijas de pixeles.
PD2: Si se te hace muy complicado el descargar la plantilla en Initializer, puedes descargarte este repositorio pues ya lo tenemos descargado para ti.
PD3: Empieza a editar el index.html que te brinda Initializer, justamente una de sus funciones es brindarte una plantilla del HTML y CSS predefinido, para que te concentres en empezar a maquetear.