Reto 2: Maquetar el home del producto digital
Clase 22 de 41 • Curso de HTML y CSS 2019
Contenido del curso
Los básicos del web
Construcción de un producto digital
- 14
Paper wireframe
10:50 min - 15
¿Cómo instalar XD?
00:51 min - 16
Diseño de interfaces
06:41 min - 17
Maquetación de la NavBar
13:10 min - 18
Maquetación de main_section y agregando estilos CSS
08:22 min - 19
Maquetación de tarjetas de producto
09:07 min - 20
Fuentes personalizadas y variables de CSS
07:46 min - 21
Categorizando etiquetas según nuestra estructura en HTML
00:48 min - 22
Reto 2: Maquetar el home del producto digital
Viendo ahora - 23
Reglas responsive
07:14 min - 24
Animaciones y transiciones
08:47 min
Integrando otras herramientas
- 25
Atributos especiales de las etiquetas para mejorar el funcionamiento de nuestros formularios
02:47 min - 26
Librería vs Framework
05:42 min - 27
Sistema de Grillas
08:05 min - 28
Completando el Sistema de Grillas
04:03 min - 29
Reto 3: implementación del sistema de grillas
00:34 min - 30
Maquetación del formulario
13:03 min - 31
Creación de formulario: inputs
10:39 min - 32
Creación de formulario: botones
08:43 min - 33
¿Cómo crear tu cuenta en Paypal?
01:26 min - 34
Configuración del botón de pago con Paypal
08:02 min - 35
Autofill del formulario de PayPal
01:03 min - 36
Maquetación de pantalla de éxito y error
10:37 min
Deploy
Conclusión
Bonus
Ya vimos juntos el proceso de maquetación de la sección principal, ahora es el momento de ponerte a prueba, te reto a que continues construyendo este fantástico sitio.
Aquí encontrarás todo lo que necesitas para resolver este reto: https://xd.adobe.com/spec/2c9c033b-9245-42a1-495d-4ed75543bc3f-5aad/screen/7fbda2b3-9f60-4357-9fdc-99b738bb98e9/Home/
En esta imagen tienes dos secciones, te recomiendo dividirlas y maquetarlas una por una, no intentes hacer las dos al mismo tiempo.
Utiliza las etiquetas correctas: podemos notar que usaremos img, h3 y p
Esta sección parece más compleja, te recomiendo primero realizar la estructura base.
Cuando logres realizar los dos pasos anteriores incluye algo de contenido, comienza por la imagen o el texto.
La imagen es un reto que tienes que resolver. Este componente es diferente pues no tiene márgenes.
¡Te deseo éxito en este reto! si tienes alguna duda, recuerda que puedes dejar tus preguntas en el panel de discusiones o en los comentarios de este reto.