Curso de Diseño y maquetación web

Ejercicios CSS: Bloque 1

Texto y listas

Textos: Titulares, párrafos, jerarquización de literales

  1. Vete a este link de Lorem Ipsum y genera 3 párrafos.

  2. Hazte un archivo HTML. Utilizando emmet y pégalos. Utiliza la etiqueta <p > para organizar los párrafos.

  3. Pon en negrita la palabra 'fistrum'.

  4. Subraya la frase 'hasta luego Lucas'

  5. Pon en cursiva la palabra 'condemor'.

  6. Engloba todo en un div con el superatajo emmet y haz que el bloque ocupe una cuarta parte del ancho de la página.

  7. Añade el titulo "Estás más nervioso que Marco en el Sorpresa Sorpresa" y ponlo rojo

  8. Añade el subtitulo "Eres más peligroso que un tiroteo en un ascensor" y ponlo azul

  9. Pon los titulos a una línea y utiliza puntos suspensivos para que corten.

  10. Ve a googlefonts, selecciona la tipografía Roboto y úsala para darle formato a los textos

  11. Convierte la palabra 'pecador' en un link con el mismo estilo que los de esta página. Haz que se abran en una nueva pestaña con destino a http://www.chiquitoipsum.com/

REQUISITOS: Se debe generar una hoja de estilos vinculada al documento. Prohibido poner estilos en línea en el propio HTML ni en el 'head' del documento html mediante la etiqueta 'style'.

Listas
Primera parte 'Discografía listada' (fácil):

  1. Busca tu grupo de música favorito, pero que tenga al menos 3 discos.

  2. Haz una lista con su discografía en un nuevo archivo HTML. Vincula tambien la familia tipográfica de googlefont 'Montserrat'.

  3. Requisitos de la lista discografica:

    • Utiliza el año como criterio de ordenación y elemento de numeración

    • Pon el título del disco en negrita.

    • Pon el sello discográfico que lo editó en cursiva

Segunda parte 'Discografía visual con portadas' (avanzado):

  1. Dale forma a la discografía para que quede más visual:

    • Bájate las portadas de los discos.

    • Ponlos todos en la misma caja en linea. Dale estilos para reproducir la siguiente apariencia:

listas solucion 2

REQUISITOS: Se debe generar una hoja de estilos vinculada al documento. Prohibido poner estilos en línea en el propio HTML ni en el 'head' del documento html mediante la etiqueta 'style'.

Tablas

Facil

  1. En el ejercicio 03 tienes una tabla generada con emmet. Abre el archivo y crea una hoja de estilos vinculada. Importa de googlefonts la familia tipográfica Montserrat

  2. Dale un color a la cabecera de la tabla y los estilos necesarios para que se parezca a esta:

    listas solucion 3 tablas 1

  3. Unifica las dos primeras celdas de la segunda fila

  4. Unifica todas las celdas de la ultima fila

  5. Unifica las ultimas celdas de las filas 3 y 4 (verticalmente)

  6. Centra el texto de las celdas unificadas, tanto vertical como horizontal

  7. Modifica la altura visible de la tabla de tal manera que se genere un scroll vertical

  8. Fija la cabecera de la tabla para que se vea siempre independientemente del scroll

Avanzado

  1. Toma la tabla del ejercicio anterior y resetea las unificaciones de celdas que hubieras hecho en el grid

  2. Crea una tabla que tenga la apariencia de calendario como esta:

    solucion 03 tablas 02

  3. Dale estilos a la cabecera, la cual ha de ser fija y tener dos filas: una con el mes y otra con los días de la semana

  4. Crea estilos para aplicar a días festivos y otros para marcas tus periodos de vacaciones previstos

  5. OPCIONAL: Dale funcionalidad y genera un calendario dinámico del año laboral 2020 con toda la información.

Ejercicios CSS: Bloque 2

Positions

Battle sea

  1. Vete a la carpeta 'battle-sea' y abre el html en el navegador. Se abrirá un tablero de batalla naval vacío.

  2. En la carpeta 'boats' hay varias imágenes con barcos. Posiciona los barcos en las siguientes casillas:

  3. Coloca los barcos en distintos puntos donde te diga el formador.

Ejercicios CSS: Bloque 3

Flex

Los ejercicios de Flexbox van incluidos en el Playground y puedes entrenarte en esta web: Flexbox Froggy

o en esta otra: Flexbox Defense