En este proyecto pondrás en práctica tus conocimientos de HTML y CSS para crear una simple página web que cumpla ciertos requisitos. Este proyecto está diseñado para que aprendas a buscar cómo hacer nuevas cosas. Hay un total de 3 iteraciones.
El blog va a tener una serie de características que tiene que cumplir. Va a tener una imagen hasta arriba en la página, una sección principal que tendrá dos artículos, y una barra lateral. En cada iteración harás nuevas cosas y cada vez se verá mejor. ¡No te desmotives!
Ejemplos (no se basen en el código de estas páginas, dado que esas se hacen automáticas, pero es para que tengan una mejor idea de la estructura de lo que van a hacer).
- http://hyperboleandahalf.blogspot.com/
- https://blog.generalassemb.ly/
- http://www.bloggerbuster.com/2012/09/blogspot-top-100-ranking-sites.html
- Crea el archivo html y conéctalo con el archivo css. Asegúrate que estén bien conectados.
- Primero crearemos la cabezera. Busca alguna imagen y ponla en la cabezera. Por ahora sólo asegúrate que sea ancha pero no muy alta.
- Crea una lista de links que servirá como barra de navegación.
- Crea una sección principal en la que van a haber dos artículos. Agrega un título a cada uno de los artículos
- Busca qué es lorem ipsum (hint: si tienes emmet puedes simplemente poner lorem-tab y ya se hace) y pon eso como el texto principal de tu primer artículo. En el segundo artículo escribe lo que quieras :)
- Ahora es hora de hacer la barra lateral (todavía no tiene que estar en el costado, pero piensa bien cómo se va a llamar la etiqueta). Pon un borde a esta sección para diferenciarla. Ponle un título.
- Agrega un footer y pon algún dato que suela ir en un footer.
## Segunda Iteración
- Ahora vamos a agregar una imagen de fondo de toda la página. Asegúrate que no se repita y que no haga mucho ruido. Si lo hace, puedes cambiar el color del resto de la página para que combine.
- Asegúrate que la imagen del header y la sección principal no estén hasta la derecha. Busca que es margin y padding, tal vez uno de estos te puede ayudar. Haz que estén alineados (lo mejor que se pueda).
- Fíjate que la barra de navegación sea horizontal (display inline).
- Ahora sí, asegúrate que la barra lateral esté a la derecha.
- En la barra lateral prueba a hacer nuevas cosas: agrega una imagen pequeña o busca qué es la etiqueta de html summary/details y fíjate qué hace.
- Para terminar, el footer debe estar pegado hasta abajo.
## Tercera Iteración
- Intenta poner un footer dentro de cada artículo y pon la fecha en la que se escribió.
- Pon una imagen pequeña completamente circular en algún lado, tal vez en el artículo para poner la imagen del que escribió el artículo o en el footer.
- Agrega dos links en tu barra lateral (una para cada artículo). Cuando clickeas en el link, te debe enviar a esa sección de la página. Si en tu página no hay scrolling, no te preocupes.
- Ahora experimenta y que tu página se vea lo mejor posible :D
## Retos
- Prueba a poner un video en algún artículo
- Pon un área en el que el usuario pueda poner su nombre y contraseña (y que salgan asteríscos) y un botón para hacer el login. Busca cómo hacer validación sencilla (HTML: input type="email" required (ciérralo con <>)y CSS: input[type="email"]:valid {} ) Intenta que se vea verde si tiene @ o rojo si no es válido
- Si usas tamaños con pixeles, prueba con porcentajes y qué pasa cuando cambias el tamaño de la página. Intenta que tu página se vea decente en celular.
- Anda a https://www.google.com/fonts y busca una fuente que te gusta. Investiga cómo agregarla a tu página y pon una segunda fuente de respaldo.
- En tu artículo intenta que haya palabras en negritas o italizadas.
- Investiga qué es una unidad em (en vez de px).