44 lines
3.1 KiB
Markdown
44 lines
3.1 KiB
Markdown
|
---
|
||
|
|
id: bd7158d8c442eddfaeb5bd18
|
||
|
|
title: Crea una pagina di tributo
|
||
|
|
challengeType: 3
|
||
|
|
forumTopicId: 301147
|
||
|
|
dashedName: build-a-tribute-page
|
||
|
|
---
|
||
|
|
|
||
|
|
# --description--
|
||
|
|
|
||
|
|
**Obiettivo:** Costruisci un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/zNqgVx>.
|
||
|
|
|
||
|
|
Soddisfa le seguenti [user story](https://en.wikipedia.org/wiki/User_story) e fai passare tutti i test. Usa il tuo stile personale.
|
||
|
|
|
||
|
|
Puoi utilizzare HTML, JavaScript, e CSS per completare questo progetto. CSS è raccomandato perché è l'argomento delle lezioni viste finora e dovresti fare pratica con il CSS di base. Se lo desideri puoi anche utilizzare Bootstrap o SASS. Ulteriori tecnologie (solo per fare un esempio jQuery, React, Angular, o Vue) non sono raccomandate per questo progetto, e usarle è a tuo rischio. Altri progetti ti daranno la possibilità di lavorare con diversi stack tecnologici come React. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding!
|
||
|
|
|
||
|
|
**User story #1:** La mia pagina di tributo dovrebbe avere un elemento con un corrispondente `id="main"`che contiene tutti gli altri elementi.
|
||
|
|
|
||
|
|
**User Story #2:** Dovrei vedere un elemento con un corrispondente `id="title"`che contiene una stringa (cioè un testo) che descrive l'oggetto della pagina di tributo (ad esempio "Dr. Norman Borlaug").
|
||
|
|
|
||
|
|
**User story #3:** Dovrei vedere un elemento `figure` oppure un elemento `div` con un corrispondente `id="img-div"`.
|
||
|
|
|
||
|
|
**User story #4:** All'interno dell'elemento `img-div`, dovrei vedere un elemento `img` con un corrispondente `id="image"`.
|
||
|
|
|
||
|
|
**User story #5:** All'interno dell'elemento `img-div`, dovrei vedere un elemento con un corrispondente `id="img-caption"` che contiene un testo che descrive l'immagine mostrata in `img-div`.
|
||
|
|
|
||
|
|
**User Story #6:** Dovrei vedere un elemento con un corrispondente `id="tribute-info"`, che contiene dei testi che descrivono l'oggetto della pagina di tributo.
|
||
|
|
|
||
|
|
**User story #7:** Dovrei vedere un elemento `a` con un corrispondente `id="tribute-link"`, che si collega a un sito esterno che contiene ulteriori informazioni sull'oggetto della pagina di tributo. SUGGERIMENTO: Dovresti dare al tuo elemento un attributo `target` e impostarlo a `_blank` in modo che il link si apra in una nuova scheda (`target="_blank"`).
|
||
|
|
|
||
|
|
**User story #8:** L'elemento `img` dovrebbe ridimensionarsi responsivamente, rispetto alla larghezza dell'elemento principale, senza superare la dimensione originale.
|
||
|
|
|
||
|
|
**User story #9:** L'elemento `img` dovrebbe essere centrato all'interno del suo elemento genitore.
|
||
|
|
|
||
|
|
Puoi costruire il tuo progetto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando questo modello CodePen</a> e facendo clic su `Save` per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||
|
|
|
||
|
|
Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test passati.
|
||
|
|
|
||
|
|
# --solutions--
|
||
|
|
|
||
|
|
```html
|
||
|
|
// solution required
|
||
|
|
```
|