Tailwind Actividad 6
En esta actividad practicaremos CSS Tailwind y cómo aplicarlo a un documento HTML.
- Utilizar Css Tailwind en un proyecto HTML.
- Familizarizarse con las clases de Tailwind.
- Subir nuestra versión a GitHub
-
Entrar en la carpeta donde vamos a ubicar la actividad:
- Abre la terminal.
- Con los comandos
cd
ycd ..
navegamos por nuestro ordenador hasta llegar a la dirección dónde queremos ubicar la actividad.
-
Abrir en enlace de la actividad en el navegador.
-
Clonar la actividad:
- Copiamos el link https del botón Clone de nuestro Github.
- 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)
.
-
Abrir la actividad en el Visual Studio Code
- Entramos dentro de la carpeta que se ha generado con el comando
git clone
, haciendocd + (el nombre de la carpeta clonada)
. - Dentro de la carpeta, escribimos el comando
code .
para abrir esta carpeta en el VSC.
- Entramos dentro de la carpeta que se ha generado con el comando
Para utilizar Tailwind en nuestro proyecto tendremos que seguir los siguientes pasos:
-
Abrir la carpeta del repositorio en la terminal.
-
Ejecutar el siguiente comando:
npm install
. -
Una vez terminen de instalarse las dependencias, ejecutamos este otro comando:
npm start
. -
Veremos que nuestra terminal queda inutilizada compilando, así que tendremos que abir otra para ejecutar los comandos de guardado
-
No debemos cerrar la terminal compiladora hasta que queramos pararla. Para ello, utilizamos el comando:
ctrl + c
- Trabajaremos el archivo index.html.
- Intentaremos replicar la siguiente una (o varias) de las siguientes páginas:
Mientras trabajamos en la actividad es muy importante ir guardando los cambios que vamos haciendo. Este proceso de guardado será el siguiente:
-
El clásico
ctrl + s
ocmd + s
en nuestro archivo del VSC. -
Abrimos la terminal, comprobamos que nos encontramos en la ruta correcta y escribimos los siguientes comandos:
git add .
git commit -m "mensaje"
git push
-
Vamos al navegador y comprobamos que se ha hecho correctamente en nuestro Github.