Lección : Actividades

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 (Eclipse Solar)

Crea un circulo, representando al Sol, que se sitúe en mitad de la página. A continuación crea otro circulo que represente una luna con la animación para realizar un eclipse, o tape por completo, durante unos instantes.

Actividad 20-2 (Noria)

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

Actividad 20-3 (Acepta mis cookies)

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

Actividad 20-4 (Agujas del reloj)

Crea un reloj animado donde funcionen sus agujas.

Pista: Puedes apoyarte con transform-origin.

Actividad 20-5 (El mejor loading)

Busca referencias de loadings animados y crea el tuyo propio.

Actividad 20-6 (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 (Navegador para smartphone)

A partir de la siguiente imagen, maqueta usando Grid enfocado a smartphone (menos de 500px de ancho).

Previa actividad 23-5

Actividad 23-6 (Tacos)

A partir de la siguiente imagen, maqueta usando Grid.

Previa actividad 23-6

Actividad 23-7 (Galería Masonry)

A partir de la siguiente imagen, maqueta usando Grid.

Previa actividad 23-7

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

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se liquida 1 mes del Servidor Web.
  • 3 cafés: Se paga 1 mes de Newsletter.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario