1.R.1 Repaso

Last updated 8 months ago

Vamos a hacer cada uno de estos ejercicios en parejas, así que buscad una compañera para trabajar. Idos turnando en cada apartado del ejercicio, de forma que no sea siempre la misma quien escribe en el ordenador.

Antes de empezar, tenéis que crear un nuevo repositorio en GitHub (en la cuenta de cualquiera de las dos), con el nombre s1 y el nombre del ejercicio. Una vez creado, lo clonaremos en nuestro ordenador y en la carpeta creada al clonarlo empezaremos a trabajar en el ejercicio.

Por cada apartado completado del ejericicio, y antes de cambiar quien teclea en la pareja, debéis hacer un commit describiendo los cambios nuevos que habéis introducido, en inglés. Al finalizar un ejercicio completo, subiremos el resultado a GitHub y lo publicaremos en master con GitHub Pages.

Ejercicio de repaso 1

La web que vamos a crear consta de las siguientes características: 1. Toda la web usa una tipografía sin serifa (sans-serif) 1. Tiene como título "Tecnologías web" 1. Tiene un párrafo que describe qué son las tecnologías web 1. Al final del párrafo, tiene un listado de tecnologías compuesto por: HTML, CSS y JavaScript, cada una de las cuales aparece subrayada para indicar que se puede interactuar 1. Al poner el ratón sobre cualquiera de ellas 1. el cursor cambia para indicar que estamos obteniendo ayuda 1. aparece un tooltip (recuadro flotante de 400px por 200px) de color blanco, con el nombre de la tecnología como título del tooltip y una breve descripción de la misma

Ejercicio de repaso 2

Vamos a crear una web simple, con las siguientes características: 1. Una cabecera que consta únicamente de un título 1. Un cuerpo principal que consta de un montón de párrafos, tantos como para que la página tenga scroll 1. Un pie de página con 1. El nombre de la empresa 1. Un listado de redes sociales de la empresa (en formato texto o imagen) que aparezcan en línea 1. Un texto para indicar que el sitio web usa cookies con un enlace para ver más info, que aparece en la esquina inferior derecha de la pantalla y que sigue ahí al hacer scroll

Bonus: Felicidad

Vamos a crear un careto de felicidad por terminar el primer bloque del curso a toda máquina. Vamos a hacerlo paso a paso: 1. Creamos un contenedor que tiene otros 2 dentro 1. uno con una carita sonriente en modo texto, como :) ó :-D 1. uno con un saludo, como Hi! 1. El contenedor principal será nuestra cabeza, y haremos que sea redondo, de color amarillo y que tenga unas dimensiones fijas 1. El contenedor de la cara tendremos que girarlo para que los ojos aparezcan arriba y la boca abajo (PISTA: usamos transform) 1. El saludo aparece fuera de la cara como si ésta nos estuviese saludando 1. El saludo por defecto está oculto, y aparece al poner el cursor sobre la cara