3.7 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d78af367417b2b2512b04 | Construye una página de aterrizaje de producto | 3 | 301144 | build-a-product-landing-page |
--description--
Objetivo: Construye una aplicación en CodePen.io que funcionalmente sea similar a esta: https://codepen.io/freeCodeCamp/full/RKRbwL.
Completa las siguientes historias de usuario y consigue aprobar todos los tests. Dale tu propio estilo personal.
Puedes usar HTML, JavaScript y CSS para completar este proyecto. Se recomienda usar CSS puro porque eso es lo que las lecciones han cubierto hasta ahora y debes practicar un poco con él. Puedes usar Bootstrap o SASS si lo deseas. Tecnologías adicionales (por ejemplo, jQuery, React, Angular o Vue) no se recomiendan para este proyecto, y usarlas es bajo tu propio riesgo. Otros proyectos te darán la oportunidad de trabajar con diferentes stacks de tecnologías como React. Aceptaremos e intentaremos solucionar todos los informes de incidencias que utilicen el stack de tecnología sugerido para este proyecto. ¡Feliz día programando!
Historia de Usuario #1: Mi página de aterrizaje de producto debería tener un elemento header con un respectivo id="header".
Historia de Usuario #2: Puedo ver una imagen dentro del elemento header con un respectivo id="header-img". El logotipo de una empresa sería una buena opción de imagen aquí.
Historia de Usuario #3: Dentro del elemento #header puedo ver un elemento nav con un respectivo id="nav-bar".
Historia de Usuario #4: Puedo ver al menos tres elementos en los que se puede hacer click dentro del elemento nav, cada uno con la clase nav-link.
Historia de Usuario #5: Cuando hago clic en un botón .nav-link en el elemento nav, soy llevado a la sección correspondiente de la página de aterrizaje.
Historia de Usuario #6: Puedo ver un video de producto incrustado con id="video".
Historia de usuario #8: Mi página de aterrizaje tiene un elemento form con un respectivo id="form".
Historia de Usuario #8: Dentro del formulario, hay un campo de entrada input con id="email" donde puedo introducir una dirección de correo electrónico.
Historia de Usuario #9: El campo de entrada #email debe tener un texto provisional para que el usuario sepa para qué sirve el campo.
Historia de Usuario #10: El campo de entrada #email utiliza la validación de HTML5 para confirmar que el texto introducido es una dirección de correo electrónico.
Historia de Usuario #11: Dentro del formulario, hay un input de envío con un respectivo id="submit".
Historia de Usuario #12: Cuando hago clic en el elemento #submit, el correo electrónico se envía a una página estática (utiliza esta URL de pruebas: https://www. reecodecamp.com/email-submit).
Historia de Usuario #13: La barra de navegación debe estar siempre en la parte superior del viewport.
Historia de Usuario #14: Mi página de aterrizaje de producto debería tener al menos una media query.
Historia de Usuario #15: Mi página de aterrizaje de producto debería utilizar CSS flexbox al menos una vez.
Puedes construir tu proyecto usando esta plantilla CodePen y haciendo clic en Save para crear tu propio pen. O puedes utilizar este enlace CDN para ejecutar los tests en cualquier entorno que desees: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todos los tests aprobados.
--solutions--
// solution required