Ejercicios de Diseño de Interfaces Web
Retos de maquetación autocorregidos · Diseño visual y tokens · Grid, Sass y BEM · Multimedia · Accesibilidad · Usabilidad · Proyecto de rediseño.
12
Ejercicios
5
Bloques
36
Pistas
Retos de maquetación
Dos maquetas completas que se comprueban midiendo la posición real de cada elemento, a 800px y en un móvil de 375px.
Con CSS Grid y grid-template-areas: en pantallas de 700px o más, la cabecera y el pie ocupan todo el ancho, y entre ellos van el menú (200px de ancho, a la izquierda), el contenido (el espacio restante) y la barra lateral (180px, a la derecha), con 16px de separación. En pantallas más estrechas, todo en una columna en el orden cabecera, menú, contenido, barra lateral y pie.
Coloca los tres planes en una fila de columnas iguales con 24px de separación y la misma altura (aunque tengan distinto texto). El plan destacado (.plan--destacado) tiene un borde de 3px sólido #7c3aed y está ampliado un 5 % (transform: scale(1.05)). En pantallas de menos de 600px, los planes van uno debajo de otro y el destacado no se amplía.
Filtrar por bloque
Índice — 12 ejercicios
RA1 · Planificación y diseño
2 ejercicios · #1–#2
RA2 · Estilos y maquetación
2 ejercicios · #3–#4
RA3 y RA4 · Multimedia
2 ejercicios · #5–#6
RA5 · Accesibilidad
2 ejercicios · #7–#8
RA6 · Usabilidad y proyecto
4 ejercicios · #9–#12
DIW · 12 ejercicios con pistas y solución y 2 retos de maquetación