irenevg18/project1

Actividad 7

Proyecto 1 Actividad 7

Mini-proyecto de maquetación

En esta actividad practicaremos todo lo que hemos visto hasta ahora con tal de crear nuestra primera maquetación web.

Objetivos

• Trabajar en un archivo HTML con sintaxis válida. (Solo un body, un head, ...)
• Utilizar correctamente los elementos HTML: h1-h6, button, a, nav, ul, li,...
• Hacer buen uso del HTML semántico.
• Replicar lo mejor posible el diseño escogido en la medida de escritorio.
• Utilizar flexbox y grid cuando sea necesario.
• Subir nuestra versión a GitHub

---

Iniciamos la actividad

1. Entrar en la carpeta donde vamos a ubicar la actividad:

   1. Abre la terminal.
   2. Con los comandos cd y cd .. navegamos por nuestro ordenador hasta llegar a la dirección dónde queremos ubicar la actividad.

2. Abrir en enlace de la actividad en el navegador.

3. Clonar la actividad:

   1. Copiamos el link https del botón Clone de nuestro Github.
   2. Vamos a la terminal y, dentro de la carpeta donde queremos ubicar la actividad, escribimos el comando git clone + (pegamos el link que habíamos copiado).

4. Abrir la actividad en el Visual Studio Code

   1. Entramos dentro de la carpeta que se ha generado con el comando git clone, haciendo cd + (el nombre de la carpeta clonada).
   2. Dentro de la carpeta, escribimos el comando code . para abrir esta carpeta en el VSC.

---

✋⚠️ Antes de empezar 👇

Para utilizar Tailwind en nuestro proyecto tendremos que seguir los siguientes pasos:

1. Abrir la carpeta del repositorio en la terminal.

2. Ejecutar el siguiente comando: npm install.

3. Una vez terminen de instalarse las dependencias, ejecutamos este otro comando: npm start.

4. Veremos que nuestra terminal queda inutilizada compilando, así que tendremos que abir otra para ejecutar los comandos de guardado

5. No debemos cerrar la terminal compiladora hasta que queramos pararla. Para ello, utilizamos el comando: ctrl + c.

---

👉 Ejercicio

• Trabajaremos el archivo index.html.
• No es obligatorio usar tailwind.
• Si nos sentimos más cómodos usando directamente css:
  • Crearemos un documento styles.css y lo vincularemos al archivo index.html mediante la etiqueta < link > en la parte del < head >.
• Podemos escoger una de las siguientes propuestas o replicar una página que nos guste. (consúltame antes).

Propuestas

1. Minimal portfolio 1

2. Minimal portfolio 2

3. Biko landing page

4. PF eventos

5. Cosmetic store

6. Product landing page

7. Personal portfolio

8. Minimal portfolio 3

9. Portfolio template

Mientras trabajamos en la actividad

Mientras trabajamos en la actividad es muy importante ir guardando los cambios que vamos haciendo. Este proceso de guardado será el siguiente:

1. El clásico ctrl + s o cmd + s en nuestro archivo del VSC.

2. Abrimos la terminal, comprobamos que nos encontramos en la ruta correcta y escribimos los siguientes comandos:

   1. git add .
   2. git commit -m "mensaje"
   3. git push

3. Vamos al navegador y comprobamos que se ha hecho correctamente en nuestro Github.

---

Recursos

• Recurso 1

• Instalación de Tailwind en un proyecto

• Recurso 3