3.1 KiB
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7158d8c442eddfaeb5bd18 | Crea una pagina di tributo | 3 | 301147 | build-a-tribute-page |
--description--
Obiettivo: Costruisci un'app CodePen.io funzionalmente simile a questa: https://codepen.io/freeCodeCamp/full/zNqgVx.
Soddisfa le seguenti 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 usando questo modello CodePen 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--
// solution required