56 lines
4.2 KiB
Markdown
56 lines
4.2 KiB
Markdown
---
|
|
id: 587d78b0367417b2b2512b05
|
|
title: Creare una pagina di documentazione tecnica
|
|
challengeType: 3
|
|
forumTopicId: 301146
|
|
dashedName: build-a-technical-documentation-page
|
|
---
|
|
|
|
# --description--
|
|
|
|
**Obiettivo:** Costuire un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/NdrKKL>.
|
|
|
|
Compila le [user stories](https://en.wikipedia.org/wiki/User_story) 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 <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando questo modello CodePen</a> 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--
|
|
|
|
```html
|
|
// solution required
|
|
```
|