Maquetación de Proyecto Web "YardZelle" con Diseño UI/UX
Clase 3 de 22 • Curso Práctico de Frontend Developer
Contenido del curso
Layout y componentes
Maquetación responsiva: pantallas de autenticación
- 5

Maquetación Responsive de Formulario de Creación de Contraseña
08:49 min - 6

Estilización de Formularios con CSS Grid y Flexbox
18:15 min - 7

Construcción de Pantalla de Confirmación de Email Enviado
11:26 min - 8

Maquetación de Pantalla de Login en HTML y CSS
08:19 min - 9

Maquetación de Formulario para Crear Cuenta en HTML y CSS
10:54 min - 10

Edición de Cuenta: Cambios en Inputs y Botones en Pantalla
04:52 min
Maquetación responsiva: vistas principales
- 11

Estructuración HTML para Aplicaciones con Grids y Cards
06:57 min - 12

Estilización de Cartas con CSS y Responsive Design
13:39 min - 13

Creación de Menú Desktop con HTML y CSS Básico
11:47 min - 14

Creación de Menú Responsive en HTML y CSS para Móviles
12:18 min - 15

Maquetación de Pantalla "Mi Orden" en HTML y CSS
05:44 min - 16

Estilos CSS para Pantalla de Orden en HTML
15:08 min - 17

Creación de Pantalla "Mis Órdenes" en HTML y CSS
04:25 min - 18

Estructuración de Navbar con HTML para Desktop y Mobile
04:50 min - 19

Estilos Responsivos para Navbar en HTML y CSS
20:17 min - 20

Maquetación de Detalle de Productos en HTML y CSS
19:18 min - 21

Estructura y Estilo de Pantalla del Carrito de Compras
11:12 min
Próximos pasos
Resumen
La maquetación o diagramación web consiste en transformar un diseño gráfico —boceto— (hecho por UX/UI en Figma o Scketch) en una interfaz funcional en términos de programación que entienda un navegador o dispositivo específico.
El área de diseño nos proporcionó el bosquejo del proyecto en Figma.
Podemos identificar las vistas de:
- Inicio
- Creación de cuenta
- Acceso
- Carrito de compras
- Orden de compra
- Detalle de producto
- Menú
Desde aquí puedes ver cómo es la interacción entre las diferentes pantallas.
Contribución creada por Porfirio González y Guadalupe Monge Barale.