06311a56f6
I fixed the code formatting for readability. Made the spacing easier to see so updates and changes could be made more easily.
61 lines
4.3 KiB
Markdown
61 lines
4.3 KiB
Markdown
---
|
|
id: bd7158d8c442eddfaeb5bd18
|
|
title: Build a Tribute Page
|
|
isRequired: true
|
|
challengeType: 3
|
|
videoUrl: ''
|
|
localeTitle: Construir una página de tributo
|
|
---
|
|
|
|
## Description
|
|
<section id="description">
|
|
<strong>Objetivo:</strong> crear una aplicación <a href="https://codepen.io" target="_blank">CodePen.io</a>
|
|
Que sea funcionalmente similar a esta: <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank">https://codepen.io/freeCodeCamp/full/zNqgVx</a>.
|
|
|
|
Cumple las siguientes <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">historias de usuario</a> y haz que pasen todas las pruebas. Dale tu propio estilo personal. Puedes usar HTML, JavaScript y CSS para completar este proyecto. Se recomienda CSS simple porque eso es lo que las lecciones han cubierto hasta ahora y debe obtener algo de práctica con CSS simple. Puede utilizar Bootstrap o SASS si lo desea. No se recomiendan tecnologías adicionales (solo por ejemplo, jQuery, React, Angular o Vue) para este proyecto, y su uso es bajo su propio riesgo. Otros proyectos te darán la oportunidad de trabajar con diferentes pilas de tecnología como React. Aceptaremos e intentaremos solucionar todos los informes de problemas que utilizan la pila de tecnología sugerida para este proyecto. ¡Feliz codificación!
|
|
|
|
<strong>Historia de usuario no. 1:</strong> Mi página de tributo debe tener un elemento con su correspondiente <code>id="main"</code> , que contiene todos los demás elementos.
|
|
|
|
<strong>Historia de usuario no. 2:</strong> Debería ver un elemento con una <code>id="title"</code> correspondiente <code>id="title"</code> , que contiene una cadena (es decir, texto) que describe el tema de la página del tributo (por ejemplo, "Dr. Norman Borlaug").
|
|
|
|
<strong>Historia de usuario no. 3:</strong> Debería ver un elemento <code>div</code> con un <code>id="img-div"</code> correspondiente <code>id="img-div"</code>.
|
|
|
|
<strong>Historia de usuario no. 4:</strong> Dentro del elemento <code>img-div</code> , debería ver un elemento <code>img</code> con una <code>id="image"</code> correspondiente <code>id="image"</code>.
|
|
|
|
<strong>Historia de usuario no. 5:</strong> Dentro del elemento <code>img-div</code> , debería ver un elemento con una <code>id="img-caption"</code> correspondiente <code>id="img-caption"</code> que contiene contenido textual que describe la imagen que se muestra en <code>img-div</code>.
|
|
|
|
<strong>Historia de usuario no. 6:</strong> Debería ver un elemento con un <code>id="tribute-info"</code> correspondiente <code>id="tribute-info"</code> , que contiene contenido textual que describe el tema de la página de tributo.
|
|
|
|
<strong>Historia de usuario no. 7:</strong> Debería ver un elemento <code>a</code> con un correspondiente <code>id="tribute-link"</code> , que une a un sitio externo que contiene información adicional sobre el tema de la página de tributo. SUGERENCIA: debe asignar a su elemento un atributo de <code>target</code> y configurarlo en <code>_blank</code> para que su enlace se abra en una nueva pestaña (es decir, <code>target="_blank"</code> ).
|
|
|
|
<strong>Historia de usuario no. 8:</strong> el elemento <code>img</code> debe redimensionarse responsivamente, en relación con el ancho de su elemento principal, sin exceder su tamaño original.
|
|
|
|
<strong>Historia de usuario no. 9:</strong> el elemento <code>img</code> debe estar centrado dentro de su elemento primario. Puedes construir tu proyecto por medio de <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">este bolígrafo CodePen</a> . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> . Una vez que haya terminado, envíe la URL a su proyecto de trabajo con todas las pruebas aprobadas. Recuerde usar el método de <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">lectura-búsqueda-pregunta</a> si se atasca. </section>
|
|
|
|
## Instructions
|
|
<section id="instructions">
|
|
</section>
|
|
|
|
## Tests
|
|
<section id='tests'>
|
|
|
|
```yml
|
|
tests: []
|
|
|
|
```
|
|
|
|
</section>
|
|
|
|
## Challenge Seed
|
|
<section id='challengeSeed'>
|
|
|
|
</section>
|
|
|
|
## Solution
|
|
<section id='solution'>
|
|
|
|
```js
|
|
// solution required
|
|
```
|
|
</section>
|