Este es un ejercicio para practicar maquetación básica con HTML5 y CSS3. Además que practicaremos diseño responsive. Empezaremos con tamaño desktop para luego continuar con el tamaño mobile. El diseño del desarrollo estará basado en el diseño UI realizado anteriormente en Figma. Antes de empezar por favor, lee todo el readme.
Vas a crear la estructura HTML usando semántica web para hacerla lo más accesible posible. Piensa en las regiones que tiene tu diseño, observa como se van agrupando y crea los elementos contenedores con sus hijos. Vas a usar el archivo index.html para ello.
Vas a crear ahora el CSS a partir de la estructura HTML, usa los conceptos de posicionamiento y alineación para saber como se comportan los contenedores y sus hijos. Vas a usar el archivo styles.css para ello.
Vas a crear las mediaqueries necesarias para que nuestra aplicación pueda ser mirada también en móvil. Vas a usar el archivo styles.css para ello.
No te preocupes por no saber los conceptos de git, por el momento solo te vas a ir familiarizando con la herramienta y si sigues estos pasos, vas a ir bien. Una vez que se te haya proporcionado el respositorio desde github classroom usarás git y github para traerlo a tu computadora local.
Pasos:
- Abre la terminar y en una carpeta que va a contener los tallere vas a escribir lo siguiente, reemplazando <nombre_del_repositorio> por el repositorio que se te haya asignado:
git clone <nombre_del_repositorio>
- En tu terminal pon el siguiente comando para entrar a la carpeta correcta:
cd <nombre_del_repositorio>
- Cuando el puntero de tu terminal te indique que estás en la carpeta contenedora del proyecto, ábrelo con el siguiente comando dentro de Visual Studio Code:
code .
- Realiza todo el ejercicio y una vez completo, estando en la carpeta contenedora del proyecto vas a escribir en la terminal integrada de Visual Studio Code:
git add .
git commit -m "taller finalizado"
git push
- Cuando ya esté subido, pon un comentario en la hoja de seguimiento de talleres para proceder a la revisión.