3.0 KiB
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7158d8c442eddfaeb5bd18 | Construye una página tributo | 3 | 301147 | build-a-tribute-page |
--description--
Objetivo: Construye una aplicación en CodePen.io que funcionalmente sea similar a esta: https://codepen.io/freeCodeCamp/full/zNqgVx.
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 tributo debería tener un elemento con un respectivo id="main", el cual contiene todos los demás elementos.
Historia de Usuario #2: Debería ver un elemento con un respectivo id="title", que contiene una cadena que describe el tema de la página tributo (p. ej. "Dr. Norman Borlaug").
Historia de Usuario #3: Debería ver un elemento div con un respectivo id="img-div".
Historia de Usuario #4: Dentro del elemento img-div, debería ver un elemento img con un respectivo id="image".
Historia de Usuario #5: Dentro del elemento img-div, debería ver un elemento con un respectivo id="img-caption" que contiene contenido textual describiendo la imagen mostrada en img-div.
Historia de Usuario #6: Debería ver un elemento con un respectivo id="tribute-info", que contiene contenido textual describiendo el tema de la página tributo.
Historia de Usuario #7: Debería ver un elemento a con un respectivo id="tribute-link", que enlaza a un sitio externo conteniendo información adicional sobre el tema de la página tributo. SUGERENCIA: Debes dar a tu elemento un atributo target y establecerlo como _blank para que tu enlace se abra en una nueva pestaña (p. ej. target="_blank").
Historia de Usuario #8: El elemento img debería cambiar de tamaño de forma responsiva, en relación al ancho de su elemento padre, sin exceder su tamaño original.
Historia de Usuario #9: El elemento img debería estar centrado dentro de su elemento padre.
Puedes construir tu proyecto haciendo un fork de este CodePen. 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