En el desafío de la GUI de hoy, creamos una experiencia del usuario responsiva y accesible con la navegación lateral mediante CSS y JS. La navegación lateral funciona en varios navegadores, tamaños de pantalla y dispositivos de entrada. Genial, ¿verdad? Sigue estos pasos mientras empleamos cuadrículas, transformaciones, seudoclases y una cucharada de JavaScript para manejar esta UX.
@AdamArgyleInk responderá a tus comentarios durante los primeros 30 minutos después del lanzamiento del episodio. Comunícate con nosotros aquí, haz preguntas o envía tu propio código.
Capítulos:
- 0:00 - Introducción
- 0:30: Descripción general de la función de la esquina de depuración
- 2:25 - Cuadrícula += Diseño de pila de consulta de medios
- 3:42: - Transición de transformación accesible
- 4:22: :target pseudoclase
- 5:57: UX de la tecla de escape
- 6:16: Organización del enfoque
- 6:49: UX del lector de pantalla
- 7:56: Final y llamado a la acción
Resources:
- Escribe código → https://goo.gle/3sQ8Xif
- Leer junto → https://goo.gle/2Np83J9
- Prueba una demostración → http://goo.gle/3bVBFYT
- Descubre cómo otras personas crean navegación lateral (envíos de GUI) → https://goo.gle/36CAeuO
Mira más desafíos de GUI → https://goo.gle/GUIchallenges
Suscríbete a los desarrolladores de Google Chrome → http://goo.gl/LLLNvf