#assembler-institute #code-a-portfolio #html #css #javascript
En esta presentación vamos a plantear un acercamiento básico al desarrollo web mediante HTML y CSS. Al final de la sesión también os dejaremos un contenido de JavaScript para que podáis profundizar en esta materia. Estos tres lenguajes proporcionan a nuestra web estructura (HTML), estilos (CSS) e interacción con el usuario y automatizaciones (JavaScript).
Para poder explicar a fondo esta materia, hemos elaborado una presentación: link
Esperamos que os haya gustado la primera parte de esta presentación. Ahora, ¡manos a la obra!
En primer lugar os ubicaremos por parejas, y debéis elegir un personaje para el que queráis hacer un portfolio. Pensad en uno que tenga suficiente personalidad como para completar todas las secciones de la plantilla, y que ambos integrantes conozcáis.
A continuación tendréis que descargar la plantilla de HTML sobre la que trabajar. Podéis hacerlo desde el siguiente link.
Los requerimientos mínimos de esta sección son:
- Modificad los textos actuales por unos nuevos que encajen con vuestro personaje.
- Cambiad las imágenes
- Comentad por completo el bloque de Mario saliendo de una tubería.
Una vez completados estos puntos podéis modificar como consideréis el HTML para adaptarlo a lo que queréis que sea vuestro portfolio.
Para más información sobre HTML podéis consultar los siguientes enlaces:
Al acabar, ¡volvemos a la presentación, ahora toca ver CSS!
Ha llegado el momento de aplicar estilos a vuestra web. Descargad la plantilla desde el siguiente link para adaptar los estilos (colores, espacios y tamaños, etc.) de vuestro portfolio.
Los requisitos para completar esta sección son los siguientes:
- Cambiad los colores de todos los elementos de la web que ya tengan alguno en la plantilla para que casen bien con el personaje que habéis elegido.
- Ajustar las imágenes que hayáis seleccionado para que se vean correctamente, cambiando su tamaño (siempre desde CSS) o añadiéndoles alguna propiedad que os ayude a mostrar el contenido que queréis.
- También podéis ajustar el espaciado entre los diferentes elementos de vuestra página para que encajen con el estilo que buscáis.
Os proporcionamos también algo de documentación extra:
Ahora que habéis terminado vuestro portfolio, queda un último paso para que podáis acceder a él desde la web. Para ello tendréis que registrar una nueva cuenta en Netlify y subir (hacer deploy) de la carpeta que contiene los archivos. Como ayuda extra os dejamos este vídeo explicativo.
¿Queréis ver nuestra versión del portfolio? Podéis verla aquí.
Si subís vuestra web, ¡no olvidéis compartirla con nosotros! Nos encantará ver el resultado, y compartir con otras personas el buen trabajo que habéis hecho en esta sesión. Podéis encontrarnos en Instagram o LinkedIn, además de ver nuestro contenido en YouTube para conocernos mejor y adentraros un poco más en el mundo de la programación.
Habéis completado nuestro reto, ya habéis dado vuestros primeros pasos en la programación web. Recordad que podéis contactar con nosotros para cualquier duda, y encontrarnos en nuestra página: assemblerinstitute.com.
Una vez acabemos, os dejamos un bloque adicional para que veáis por vuestra cuenta el último bloque: ¡JavaScript!
¿Cómo integrarlo? Descargad la plantilla desde el siguiente link.
En esta parte encontraréis ya hecho el menú "hamburguesa" para que, cuando el tamaño de la pantalla cambie, el menú superior desaparezca y puedan consultarse las secciones de la web con un menú desplegable. Podéis comentar este código e intentar hacerlo de cero, como una forma de poner en práctica los conocimientos que hemos visto hasta ahora, siguiendo nuestro ejemplo.
Además, os proponemos como reto que, cuando un usuario pase el ratón por encima de la imagen de cabecera de la web, la imagen cambie por otra, o se anime de alguna forma. PISTA: Podéis tomar como ejemplo el código (tanto HTML, como CSS y JS) del bloque de la tubería por la que sale Mario en la plantilla.
Como documentación a consultar para empezar a conocer más información sobre JavaScript: