56 lines
3.6 KiB
Markdown
56 lines
3.6 KiB
Markdown
|
---
|
||
|
|
id: 587d78af367417b2b2512b04
|
||
|
|
title: Construye una página de aterrizaje de producto
|
||
|
|
challengeType: 3
|
||
|
|
forumTopicId: 301144
|
||
|
|
dashedName: build-a-product-landing-page
|
||
|
|
---
|
||
|
|
|
||
|
|
# --description--
|
||
|
|
|
||
|
|
**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcionalmente sea similar a esta: <https://codepen.io/freeCodeCamp/full/RKRbwL>.
|
||
|
|
|
||
|
|
Completa las siguientes [historias de usuario](https://es.wikipedia.org/wiki/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](https://www.freecodecamp.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 haciendo un fork de [este CodePen](https://codepen.io/freeCodeCamp/pen/MJjpwO). 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--
|
||
|
|
|
||
|
|
```html
|
||
|
|
// solution required
|
||
|
|
```
|