Lección : Actividades

Actividad 3-1 (Lista de la compra)

Usa una lista para anotar que debes comprar en el supermercado. Si hay alguna fruta, cambia el color del <li> por el color de esa fruta. Para ello deberás crear estilos, usando clases, por cada color que necesites para después aplicarlo en el HTML.

Ejemplo.

<style>

.rojo {
    color: rojo;
}

</style>

<ul>
    <li>Agua</li>
    <li class="rojo">manzanas</li>
    <li>Galletas</li>
</ul>

Actividad 3-2 (Libertad creativa)

A partir del siguiente HTML añade colores, o cualquier otro estilo que has visto en los ejemplos, para darle un aspecto más atractivo. Tienes libertad creativa.

Ejemplo.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mis vacaciones</title>
</head>
<body>
    <h1>Isla del Tenerife</h1>
    <h2>Subiendo a un volcán</h2>
    <p>Mis amigos y yo nos propusimos subir andando hasta la cima del volcán más alto de España: el Teide. El calor nos abraso y a los pocos minutos vaciamos todas las cantimploras. A la hora siguiente notamos como las lagartijas nos perseguían con cierta distancia mientras se relamian los labios. Parecía que esa noche iban a cenar caliente.</p>
    <p>Otra hora más tarde uno de mis amigos se torció el tobillo y decidimos abandonarlo a su suerte. Nunca más supimos de él, esperemos que esté en un sitio mejor.</p>
    <p>La siguiente hora notamos la ausencia del oxígeno. Respirábamos porque teníamos el hábito. Dos más cayeron en el olvido.</p>
    <p>La última hora notamos un poco de hambre de tanto andar. Optamos por el canivalismo.</p>
    <p>Solo quedé yo. ¡Qué vistas! Hasta podía ver la isla de Gran Canaria. Valió la pena cada zancada, camiseta escurrida, agujetas en las piernas y perdidas humanas. Estaba a tanta altura que casi podía tocar las estrellas con la punta de mis dedos. Era la oportunidad de maravillarme del volcan y encontrar nuevos amigos.</p>
</body>
</html>

Actividad 3-3 (¿De que color es Pluton?)

Busca en los ejemplos el <p> con la id Pluton. ¿De que color es el texto? ¿Por qué?

Actividad 4-1 (Historia de Kodak)

A partir del siguiente texto.

Eastman Kodak Company (popularmente conocida como Kodak) es una compañía multinacional fundada el año 1892 en los Estados Unidos dedicada al diseño, producción y comercialización de equipamiento fotográfico. Durante más de cien años ha sido una empresa muy conocida por sus cámaras y películas fotográficas y actualmente está reorientando su actividad hacia dos mercados principales: la fotografía digital y la impresión digital, aunque hay pocas veces en que se orienta a la fotografía analógica en la actualidad. Desde 2020 comercializa además productos farmacéuticos. 

Logra la siguiente web.

4-1

Actividad 4-2 (Cuestionario para una agencia de viajes)

Crea un formulario con 3 preguntas para saber cual sería el mejor destino. Usa para las respuestas radio o checkbox y un botón para “Enviar” las respuestas. Algunas ideas:

  • ¿Eres más de montaña o de playa?
  • ¿Te gusta el calor?
  • ¿Cual es tu continente favorito?

Actividad 4-3 (Creando un sencillo blog)

Crea el siguiente HTML y añade el CSS necesario para que se asemeje lo máximo posible. Eres libre que usar cualquier texto mientras mantengas la estructura. Evita todo aquello que no sepas realizar.

Blog

Imagen completa

Actividad 5-1 (Moby Dick)

A partir del prólogo de Moby Dick, crea una web usando los siguientes estilos en su diseño.

  • font-size
  • font-style
  • font-weight
Moby Dick

Herman Melville

Prólogo

Vivimos tiempos en que los hombres pueden arponear impunemente a las ballenas. A despecho de todos los ecologistas del mundo, las localizan por medio del radar, consiguen incluso algunas veces la complicidad de un hidroavión y luego, para dar muerte al enorme mamífero que emerge a lo lejos, tienen suficiente ya con apretar el gatillo desde la cubierta del barco homicida. Ni siquiera les tiembla el pulso.

Hubo otras épocas, sin embargo, en las que no lo tuvieron tan fácil. Los marineros embarcaban entonces en incómodos veleros, arriaban precipitadamente los botes, remaban sin descanso hacia donde estaba la ballena y, cuando la tenían a tiro, lanzaban los crueles arpones y confiaban en su buena suerte.

Actividad 5-2 (Alineando la ballena)

  • Separa las letras del título: Moby Dick.
  • Separa un poco el nombre del autor y su apellido.
  • Convierte el título del capítulo, Prólogo, en mayúsculas.
  • Justifica el texto del capítulo.

Actividad 5-3 (Sobre la ballena)

  • Cuando mi cursor se coloque sobre el título, debe cambiar su estilo a cursiva y cambiar su color a azul.
  • El título del capítulo debe convertirse en negrita y en rojo.

Actividad 5-4 (Personaliando la ballena)

  1. Descarga 2 tipografías diferentes, una para el título y otra para el texto.
  2. Carga en el CSS ambas fuentes con @font-face.
  3. Crea un par de clases para cada fuente y aplica sobre el HTML donde corresponda.

Actividad 5-5 (Siguiendo a la ballena)

A partir del siguiente texto…

Aquellas cacerías, sin embargo, acababan muchas veces en tragedia. Fue en uno de esos lances, por ejemplo, donde el enigmático protagonista de esta novela, el capitán Ahab, perdió una pierna, la sustituyó por otra de marfil y concibió un odio mortal hacia aquella colosal ballena blanca y solitaria que sembraba el terror por mares sin civilizar.

Lo que deberíamos hacer ahora, sin embargo, es determinar las razones de ese odio inextinguible. Seamos cautos y no aventuremos hipótesis precipitadas. Puede que la mutilación de Ahab no tuviese nada que ver porque todos sabemos que hay odios que encuentran sus más secretas motivaciones mucho más allá de las cosas que han sucedido en este mundo y que actúan sobre nosotros a nivel inconsciente.

Logra la siguiente Web.

Ejercicio 5-5

Imagen completa

Actividad 6-1 (Vende una lavadora)

A partir del siguiente texto, crea una Web. Cambia el tamaño de la letra según consideres.

Lavadora Dual
Agitador y apertura superior

(Una imagen)

Model: NTW4516FW
SKU: 5369600
494,99 euros

Actividad 6-2 (Escalera)

Crea varios párrafos y dale a todos un color de fondo. Después cambia sus anchuras para crear un efecto de escalera.

Actividad 6-3 (No puedes crecer ni disminuir)

Da estilos a un párrafo con un color de fondo. Además obliga para que no pueda crecer en altura más de 10rem y pueda cambiar su altura a menos de 5rem.

A continuación añade texto hasta que no pueda crecer más.

Actividad 6-4 (Subrayado)

Crea un párrafo con texto y añade <strong> a cualquier palabra.

Después declara una clase con estilos suficientes para que cuando sea asignado al strong de un efecto de subrayado: fondo amarillo semitransparente.

Actividad 6-5 (Helado de sabores)

Con 3 divs vacíos, crea 3 columnas que estén repartidas uniformemente en anchura y ocupen toda la altura de la web. El primer div debe tener un color de fondo rosa, el segundo amarillo y el último marrón; imitando una tarrina de helados.

Actividad 7-1 (Párrafos continuos)

Crea varios párrafos y logra que estén alineados horizontalmente en lugar de uno a continuación de otro.

Actividad 7-2 (Subrayado largo)

Continúa la actividad 6-4. Alarga el subrayado en el principio y el final cambiando la anchura del strong.

Actividad 8-1 (Discurso)

Implementa la siguiente imagen.

Discurso

Actividad 8-2 (Revista)

Implementa la siguiente imagen.

Revista

Actividad 8-3 (Simple Web)

Implementa la siguiente imagen.

Simple Web

Actividad 9-1 (Marketing)

Implementa la siguiente imagen.

Mailchimp marketing

Actividad 9-2 (Tabla de precios)

Implementa solo una de las columnas, la que prefieras.

Tabla de precios

Actividad 9-3 (Acordeón elegante)

Implementa la siguiente imagen.

No uses tablas. Respecto al + o - puedes ignorarlo.

Acordeón

Actividad 10-1 (Atrapa al monstruo)

A partir de la siguiente imagen:

Usa los borders para atrapar al monstruo y conseguir el siguiente resultado.

Acordeón

Actividad 10-2 (Agujeros de respiración)

A partir de la siguiente imagen del ejercicio 10-1, usa los borders para conseguir el siguiente resultado.

Acordeón

Actividad 10-3 (Celda a medida)

A partir de la siguiente imagen del ejercicio 10-1, usa los borders para conseguir el siguiente resultado.

Acordeón

Actividad 10-4 (Pintando las paredes)

A partir de la siguiente imagen del ejercicio 10-1, usa los borders para conseguir el siguiente resultado.

Acordeón

Actividad 12-1 (Lista cuadrada)

Implementa en HTML la siguiente lista con los marcadores cuadrados.

Previa actividad 12-1

Actividad 12-2 (Lista de amores)

Implementa en HTML la siguiente lista con los nombres de tus mascotas o hijos. Si no tienes, puedes inventártelos.

Previa actividad 12-2

Actividad 12-3 (Menú vertical)

Implementa en HTML la siguiente lista equivalente a un navegador real para una web. No olvides añadir un cambio de estado cuando el cursor esté por encima.

Previa actividad 12-3

Actividad 12-4 (Bat-lista)

Implementa en HTML la siguiente lista.

Previa actividad 12-4

Actividad 13-1 (Tipos de arquitecturas)

Vamos a ayudar a unos visitantes a comprender 3 tipos de arquitecturas: victoriana, Barroca y moderna.

  • Debe tener un título por cada tipo de arquitectura.
  • Debajo de cada uno, existirá un <div> con su explicación.
  • La explicación no debe superar los 10rem de altura.
  • Los textos deben desbordar la altura, sobresaliendo por debajo.
  • El visitante debe usar un scroll para navegar por toda la explicación.

Puedes usar Wikipedia para conseguir los textos.

Actividad 13-2 (Tabla responsive)

A partir del siguiente HTML.

<table>
    <caption>Mi tabla</caption>
    <thead>
        <tr>
            <th>Título 1</th>
            <th>Título 2</th>
            <th>Título 3</th>
            <th>Título 4</th>
            <th>Título 5</th>
            <th>Título 6</th>
            <th>Título 7</th>
            <th>Título 8</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Contenido</td>
            <td>Contenido</td>
            <td>Contenido</td>
            <td>Contenido</td>
            <td>Contenido</td>
            <td>Contenido</td>
            <td>Contenido</td>
            <td>Contenido</td>
        </tr>
    </tbody>
</table>

Piensa una manera de adaptarla a Smartphone.

Actividad 16-1 (Hover retro)

Muestra una imagen. Cuando el cursor esté por encima añade un filtro que la convierta a escala de grises (blanco y negro).

Actividad 16-2 (Radiografía)

Muestra la imagen de un esqueleto. Cuando el cursor esté por encima añade un filtro que la invierta los colores dándole un aspecto de radiografía.

Actividad 17-1 (Menú anclado)

Crea un header con su logo y menú que esté siempre anclado a la parte superior.

Actividad 17-2 (Loading)

Crea una página con un título y varios párrafos con texto Lorem.

A continuación diseña una <div> que ocupe toda la pantalla y tape completamente lo anterior. En su centro debe estar escrito: “Cargando… por favor espere”.

Actividad 17-3 (Cartel de cookies)

Realiza un cartel de Cookies que esté anclado a la parte inferior izquierda. Debe contener:

  • Texto: ¿Acepta nuestras cookies?
  • Botón de aceptar.
  • Botón de cancelar.

Actividad 17-4 (¿Quieres suscribirte a nuestra Newsletter?)

Realiza una alerta que para pedir que el visitante se suscriba a la newsletter. Bloqueará la navegación hasta que el usuario interactúe. Debe tener las siguientes características.

  • Formulario para añadir el email y botón de enviar.
  • Aspa para cerrar la alerta.
  • Fondo negro semitransparente de relleno.
  • El contenido del formulario estará en un recuadro con fondo blanco.

Actividad 18-1 (Botón torcido)

Crea un botón con el texto “casi recto” que al colocar el cursor por encima rote 15 grados.

Actividad 18-2 (¡Oferta!)

Reutilizando el HTML de la actividad 17-4 para hace que cuando el cursor se posicione encima, se duplique su tamaño.

Actividad 18-3 (Mezclando colores)

Crea un circulo de color rojo y otro, a su lado, de color azul (este último debe tener 0,5 de transparencia). Cuando el cursor se coloque encima del azul, debe moverse a la izquierda hasta que sus colores se mezclen con el primero dando un color morado.

Actividad 19-1 (Campos minimalistas)

Construye un formulario con los siguientes campos:

  • Nombre, tipo texto.
  • Teléfono, tipo número.
  • Botón de enviar.

Cuando tenga el foco los 2 primeros campos, nombre o teléfono, desvanece sus bordes con una suave transición y aumenta ligeramente su tamaño para que se lea mejor.

En cambio el botón debe perder su color de fondo cuando el cursor esté por encima.

Actividad 20-1 (Noria)

A partir de imágenes o formas simples, crea una noria que rote lentamente.

Actividad 20-2 (Acepta mis cookies)

Transcurrido unos segundos muestra, con una elegante animación (fundido o desplazamiento), un cartel de cookies.

Actividad 20-3 (Agujas del reloj)

Crea un reloj animado donde funcionen sus agujas.

Pista: Puedes apoyarte con transform-origin.

Actividad 20-4 (El mejor loading)

Busca referencias de loadings animados y crea el tuyo propio.

Actividad 20-5 (Péndulo)

Crea una animación de un péndulo. Una pista: transform-origin.

Actividad 21-1 (Contra la oveja negra y la pared)

Descarga las siguientes imágenes e intenta alcanzar el siguiente resultado.

Previa actividad 21-1

Actividad 22-1 (Tarjeta de visita)

A partir del siguiente modelo, crea tu propia web de presentación que vincule a tus aficiones o redes sociales.

Previa actividad 22-1

Actividad 22-2 (Habilidades)

A partir del siguiente modelo, crea un espacio para enseñar cuales son tus 4 principales habilidades digitales.

Previa actividad 22-2

Actividad 22-3 (Agenda)

A partir del siguiente modelo, crea tu propia agenda que además te informe del tiempo.

Previa actividad 22-3

Actividad 22-4 (Clon chino de WhatsApp)

A partir del siguiente modelo, crea una copia de WhatsApp.

Previa actividad 22-4

Si te animas, puedes darle tu propia personalidad. ¿Cómo sería el WhatsApp de los princesas Disney?

Previa actividad 22-4 alternativa

Actividad 22-5 (Tienda que vende aire)

A partir del siguiente modelo, crea una tienda de flotadores.

Previa actividad 22-5

Actividad 23-1 (Maquetación simple)

A partir de la siguiente imagen, maqueta usando Grid.

Previa actividad 23-1

Actividad 23-2 (Maquetación regular)

A partir de la siguiente imagen, maqueta usando Grid.

Previa actividad 23-2

Actividad 23-3 (Maquetación avanzada)

A partir de la siguiente imagen, maqueta usando Grid.

Previa actividad 23-3

Actividad 23-4 (Kickstarted)

A partir de la siguiente imagen, maqueta usando Grid.

Previa actividad 23-4

Actividad 23-5 (Tacos)

A partir de la siguiente imagen, maqueta usando Grid.

Previa actividad 23-5

Actividad 23-6 (Galería Masonry)

A partir de la siguiente imagen, maqueta usando Grid.

Previa actividad 23-6

Web 1 (Clean Blog)

Previa

Realiza este micro sitio web que costa de las siguientes páginas:

  • Home: Inicio.
  • About: Sobre mí.
  • Posts: Listado de artículos.
  • Single: Un artículo.
  • Contact: Formulario de contacto.

Descarga aquí los diseños.

Web 2 (Ex-machina)

Construye la siguente web usando Flex.

Previa

Descarga aquí el diseño.

Web 3 (Big Blue Button)

Construye la siguente web usando Flex.

Previa

Descarga aquí el diseño.

Web 4 (Loom)

Construye la siguente web usando Grid.

Previa

Descarga aquí el diseño.

Web 5 (Restaurante)

Construye la siguente web usando Grid.

Previa

Descarga aquí el diseño.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Te ayudo?

  • 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
  • 2 cafés: Respondo a una duda en los comentarios.
  • 4 cafés: Te corrijo una actividad y te envío feedback.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario