4.2 KiB
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d78b0367417b2b2512b05 | Creare una pagina di documentazione tecnica | 3 | 301146 | build-a-technical-documentation-page |
--description--
Obiettivo: Costuire un'app CodePen.io funzionalmente simile a questa: https://codepen.io/freeCodeCamp/full/NdrKKL.
Compila le user stories qui sotto e fai passare tutti i test. Dalle 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 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 differenti 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: Posso vedere un elemento main con un corrispondente id="main-doc", che contiene il contenuto principale della pagina (documentazione tecnica).
User story #2: All'interno dell'elemento #main-doc, posso vedere diversi elementi section, ciascuno con una classe main-section. Dovrebbero essercene almeno 5.
User Story #3: Il primo elemento all'interno di ogni .main-section dovrebbe essere un elemento header che contiene un testo che descrive l'argomento di quella sezione.
User Story #4: Ogni elemento section con la classe main-section dovrebbe avere anche un id che corrisponde al testo di ogni header contenuto al suo interno. Qualsiasi spazio deve essere sostituito con underscore (ad es. La sezione section che contiene l'intestazione "JavaScript e Java" dovrebbe avere un corrispondente id="JavaScript_and_Java").
User Story #5: Gli elementi .main-section dovrebbero contenere almeno 10 elementi p in totale (non ciascuno).
User Story #6: Gli elementi .main-section dovrebbero contenere almeno 5 elementi code in totale (non ciascuno).
User story #7: Gli elementi .main-section dovrebbero contenere almeno 5 elementi li in totale (non ciascuno).
User story #8: Posso vedere un elemento nav con un corrispondente id="navbar".
User Story #9: L'elemento navbar dovrebbe contenere un elemento header che contiene del testo che descrive l'argomento della documentazione tecnica.
User story #10: Inoltre, la barra di navigazione dovrebbe contenere degli elementi link (a) con la classe nav-link. Dovrebbe essercene uno per ogni elemento di classe main-section.
User story #11: L'elemento header nella barra di navigazione deve venire prima di qualsiasi elemento link (a) nella barra di navigazione.
User story #12: Ogni elemento di classe nav-link dovrebbe contenere un testo che corrisponde al testo header di ogni section (ad es. se hai una sezione/intestazione "Ciao mondo", la tua barra di navigazione dovrebbe avere un elemento che contiene il testo "Ciao mondo").
User story #13: Quando clicco su un elemento della barra di navigazione, la pagina dovrebbe passare alla sezione corrispondente dell'elemento main-doc (ad es. se clicco su un elemento nav-link che contiene il testo "Ciao mondo", la pagina passa a un elemento section che ha quell'id e contiene il corrispondente header.
User story #14: Su dispositivi di dimensioni regolari (computer portatili, desktop), l'elemento con id="navbar" dovrebbe essere mostrato sul lato sinistro dello schermo e dovrebbe essere sempre visibile all'utente.
User story #15: La pagina Documentazione Tecnica dovrebbe utilizzare almeno una media query.
Puoi costruire il tuo progetto usando questo modello CodePen e cliccando 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