gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore(i18n,curriculum): update translations (#42487)

Browse Source 
* chore(i18n,curriculum): update translations

* chore: Italian to italian

Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com>
This commit is contained in:
camperbot
2021-06-15 03:34:20 +09:00
committed by GitHub
parent 840c7c738f
commit b3af21d50f
556 changed files with 57236 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md Normal file
View File

@ -0,0 +1,113 @@
---
id: bad87fee1348bd9aedd08830
title: Aggiungere un pulsante di invio a un modulo
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cp2Nkhz'
forumTopicId: 16627
dashedName: add-a-submit-button-to-a-form
---
# --description--
Aggiungiamo un pulsante `submit` al tuo modulo. Facendo clic su questo pulsante invierai i dati dal tuo modulo all'URL specificato con l'attributo `action`.
Ecco un esempio di pulsante di invio:
```html
<button type="submit">this button submits the form</button>
```
# --instructions--
Aggiungi un pulsante come ultimo elemento del tuo elemento `form`, con type `submit` e testo `Submit`.
# --hints--
Il tuo `form` dovrebbe contenere un `button`.
```js
assert($('form').children('button').length > 0);
```
Il tuo pulsante di invio dovrebbe avere l'attributo `type` settato a `submit`.
```js
assert($('button').attr('type') === 'submit');
```
Il tuo pulsante di invio dovrebbe avere solo il testo `Submit`.
```js
assert(
$('button')
.text()
.match(/^\s*submit\s*$/gi)
);
```
Il tuo elemento `button` dovrebbe avere un tag di chiusura.
```js
assert(
code.match(/<\/button>/g) &&
code.match(/<button/g) &&
code.match(/<\/button>/g).length === code.match(/<button/g).length
);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
</form>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
<button type="submit">Submit</button>
</form>
</main>
```

93
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md Normal file
View File

@ -0,0 +1,93 @@
---
id: bad87fee1348bd9aedf08812
title: Aggiungere immagini al tuo sito web
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/c8EbJf2'
forumTopicId: 16640
dashedName: add-images-to-your-website
---
# --description--
Puoi aggiungere immagini al tuo sito web utilizzando l'elemento `img` e facendolo puntare all'URL di un'immagine specifica usando l'attributo `src`.
Un esempio di questo è:
```html
<img src="https://www.freecatphotoapp.com/your-image.jpg">
```
Nota che gli elementi `img` si auto-completano.
Tutti gli elementi `img` **devono** avere un attributo `alt`. Il testo all'interno dell' attributo `alt` viene utilizzato dagli screen reader per migliorare l'accessibilità e viene anche visualizzato nel caso di problemi di caricamento dell'immagine.
**Nota:** Se l'immagine è puramente decorativa, utilizzare un attributo `alt` vuoto è la pratica migliore.
Idealmente l'attributo `alt` non dovrebbe contenere caratteri speciali a meno che non sia necessario.
Aggiungiamo un attributo `alt` al nostro esempio `img` precedente:
```html
<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">
```
# --instructions--
Cerchiamo di aggiungere un'immagine al nostro sito web:
All'interno dell'elemento `main` esistente, inserisci un elemento `img` prima degli elementi `p` esistenti.
Ora imposta l'attributo `src` in modo che punti all'url `https://www.bit.ly/fcc-relaxing-cat`
Infine, non dimenticare di dare al tuo elemento `img` un attributo `alt` con il relativo testo.
# --hints--
La tua pagina dovrebbe avere un elemento immagine.
```js
assert($('img').length);
```
La tua immagine dovrebbe avere un attributo `src` che punta all'immagine del gattino.
```js
assert(/^https:\/\/(www\.)?bit\.ly\/fcc-relaxing-cat$/i.test($('img').attr('src')));
```
L'elemento `alt` della tua immagine non dovrebbe essere vuoto.
```js
assert(
$('img').attr('alt') &&
$('img').attr('alt').length &&
/<img\S*alt=(['"])(?!\1|>)\S+\1\S*\/?>/.test(
__helpers.removeWhiteSpace(code)
)
);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```

108
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md Normal file
View File

@ -0,0 +1,108 @@
---
id: bad87fee1348bd9aedf08830
title: Aggiungere un testo segnaposto a un campo di testo
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cKdJDhg'
forumTopicId: 16647
dashedName: add-placeholder-text-to-a-text-field
---
# --description--
Il testo segnaposto è quello che viene visualizzato nell'elemento `input` prima che l'utente abbia inserito qualcosa.
Puoi creare il testo segnaposto in questo modo:
```html
<input type="text" placeholder="this is placeholder text">
```
**Nota:** Ricorda che gli elementi `input` non hanno bisogno di un tag di chiusura.
# --instructions--
Imposta il valore del `placeholder` (segnaposto) per il tuo `input` di testo su "cat photo URL".
# --hints--
Dovresti aggiungere un attributo `placeholder` all'elemento `input` di testo esistente.
```js
assert($('input[placeholder]').length > 0);
```
Dovresti impostare il valore del tuo attributo `placeholder` su `cat photo URL`.
```js
assert(
$('input') &&
$('input').attr('placeholder') &&
$('input')
.attr('placeholder')
.match(/cat\s+photo\s+URL/gi)
);
```
L'elemento `input` finito non dovrebbe avere un tag di chiusura.
```js
assert(!code.match(/<input.*\/?>.*<\/input>/gi));
```
L'elemento `input` finito dovrebbe avere una sintassi valida.
```js
assert($('input[type=text]').length > 0);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<input type="text">
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<input type="text" placeholder="cat photo URL">
</main>
```

104
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md Normal file
View File

@ -0,0 +1,104 @@
---
id: bad87fee1348bd9aedd08835
title: Spuntare pulsanti di opzione e caselle di spunta di default
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cWk3Qh6'
forumTopicId: 301094
dashedName: check-radio-buttons-and-checkboxes-by-default
---
# --description--
Puoi settare una casella di spunta o un pulsante di opzione in modo che sia spuntato di default usando l'attributo`checked`.
Per fare questo puoi semplicemente aggiungere la parola `checked`all'interno di un elemento input. Per esempio:
```html
<input type="radio" name="test-name" checked>
```
# --instructions--
Setta il primo dei tuoi pulsanti di opzione e la prima delle tue caselle di spunta in modo che siano entrambi settati di default.
# --hints--
Il primo pulsante di opzione del tuo modulo dovrebbe essere selezionato di default.
```js
assert($('input[type="radio"]').prop('checked'));
```
La prima casella di spunta del tuo modulo dovrebbe essere spuntata di default.
```js
assert($('input[type="checkbox"]').prop('checked'));
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"> Loving</label>
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```

76
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/comment-out-html.md Normal file
View File

@ -0,0 +1,76 @@
---
id: bad87fee1348bd9aedf08804
title: Commentare l'HTML
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cGyGbca'
forumTopicId: 16782
dashedName: comment-out-html
---
# --description--
Ricorda che per iniziare un commento, devi usare `<!--` e per terminarlo devi usare `-->`
Qui dovrai terminare il commento prima dell'inizio del tuo elemento `h2`.
# --instructions--
Commenta il tuo elemento `h1` e il tuo elemento `p`, ma non il tuo elemento `h2`.
# --hints--
Il tuo elemento `h1` dovrebbe essere commentato in modo da non essere visibile nella pagina.
```js
assert($('h1').length === 0);
```
Il tuo elemento `h2` non dovrebbe essere commentato in modo da essere visibile nella pagina.
```js
assert($('h2').length > 0);
```
Il tuo elemento `p` dovrebbe essere commentato in modo che non sia visibile sulla pagina.
```js
assert($('p').length === 0);
```
Ciascuno dei tuoi commenti dovrebbe essere chiuso con `-->`.
```js
assert(code.match(/[^fc]-->/g).length > 1);
```
Non dovresti modificare l'ordine dei tag `h1` `h2` o `p` nel codice.
```js
assert(
code.match(/<([a-z0-9]){1,2}>/g)[0] === '<h1>' &&
code.match(/<([a-z0-9]){1,2}>/g)[1] === '<h2>' &&
code.match(/<([a-z0-9]){1,2}>/g)[2] === '<p>'
);
```
# --seed--
## --seed-contents--
```html
<!--
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
-->
```
# --solutions--
```html
<!--<h1>Hello World</h1>-->
<h2>CatPhotoApp</h2>
<!--<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> -->
```

102
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md Normal file
View File

@ -0,0 +1,102 @@
---
id: bad87fee1348bd9aedf08827
title: Creare un elenco puntato non ordinato
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cDKVPuv'
forumTopicId: 16814
dashedName: create-a-bulleted-unordered-list
---
# --description--
HTML ha un elemento speciale per la creazione di <dfn>liste non ordinate</dfn>, o elenchi puntati.
Le liste non ordinate iniziano con un elemento di apertura `<ul>`, seguito da qualsiasi numero di elementi `<li>`. Infine, le liste non ordinate si chiudono con un `</ul>`
Ad esempio:
```html
<ul>
<li>milk</li>
<li>cheese</li>
</ul>
```
creerebbe un elenco puntato contenente `milk` e `cheese`.
# --instructions--
Rimuovi gli ultimi due elementi `p` e crea in fondo alla pagina una lista non ordinata di tre cose che i gatti amano.
# --hints--
Crea un elemento `ul`.
```js
assert($('ul').length > 0);
```
Dovresti avere tre elementi `li` all'interno del tuo elemento `ul`.
```js
assert($('ul li').length > 2);
```
Il tuo elemento `ul` dovrebbe avere un tag di chiusura.
```js
assert(
code.match(/<\/ul>/gi) &&
code.match(/<ul/gi) &&
code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length
);
```
Il tuo elemento `li` dovrebbe avere un tag di chiusura.
```js
assert(
code.match(/<\/li>/gi) &&
code.match(/<li[\s>]/gi) &&
code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length
);
```
I tuoi elementi `li` non dovrebbero contenere una stringa vuota o solo spazi bianchi.
```js
assert($('ul li').filter((_, item) => !$(item).text().trim()).length === 0);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<ul>
<li>milk</li>
<li>mice</li>
<li>catnip</li>
</ul>
</main>
```

106
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md Normal file
View File

@ -0,0 +1,106 @@
---
id: bad87fee1348bd9aede08830
title: Creare un modulo
challengeType: 0
forumTopicId: 16817
dashedName: create-a-form-element
---
# --description--
Puoi creare dei moduli web (form) che inviino effettivamente dei dati a un server utilizzando nient'altro che puro HTML. Puoi farlo specificando un attributo `action` nel tuo elemento `form`.
Ad esempio:
```html
<form action="/url-where-you-want-to-submit-form-data">
<input>
</form>
```
# --instructions--
Nidifica l'elemento `input` esistente all'interno di un elemento `form` e assegna `"https://www.freecatphotoapp.com/submit-cat-photo"` all'attributo `action` dell'elemento `form`.
# --hints--
L'elemento `input` esistente dovrebbe essere annidato in un elemento `form`.
```js
const inputElem = document.querySelector('form input');
assert(
inputElem.getAttribute('type') === 'text' &&
inputElem.getAttribute('placeholder') === 'cat photo URL'
);
```
Il tuo `form` dovrebbe avere un attributo `action` impostato su `https://www.freecatphotoapp.com/submit-cat-photo`
```js
const action = $('form').attr('action');
assert(action.match(/^https:\/\/(www\.)?freecatphotoapp\.com\/submit-cat-photo$/i))
```
Il tuo elemento `form` dovrebbe avere tag di apertura e di chiusura ben formati.
```js
assert(
code.match(/<\/form>/g) &&
code.match(/<form [^<]*>/g) &&
code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length
);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<input type="text" placeholder="cat photo URL">
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
</form>
</main>
```

135
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md Normal file
View File

@ -0,0 +1,135 @@
---
id: bad87fee1348bd9aedf08835
title: Creare un gruppo di caselle di spunta
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cqrkJsp'
forumTopicId: 16821
dashedName: create-a-set-of-checkboxes
---
# --description--
I moduli usano comunemente delle <dfn>caselle di spunta</dfn> (checkbox) per domande che possono avere più di una risposta.
Le caselle di spunta sono un tipo di `input`.
Ognuna delle tue caselle di spunta può essere annidata all'interno del suo elemento `label`. L'inserimento di un elemento `input` all'interno di un elemento `label` associerà automaticamente l'input della casella di spunta all'elemento label che lo circonda.
Tutti i gli input relativi alla casella di spunta dovrebbero avere lo stesso attributo `name`.
È una buona pratica definire esplicitamente la relazione tra un `input` di tipo checkbox e la relativa `label` impostando l'attributo `for` sulla `label` in modo che corrisponda all'attributo `id` dell'elemento `input` associato.
Ecco un esempio di casella di spunta:
```html
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
```
# --instructions--
Aggiungi al tuo modulo tre caselle di spunta. Ogni casella di spunta dovrebbe essere annidata all'interno del proprio elemento `label`. Tutti e tre dovrebbero condividere l'attributo `name` di `personality`.
# --hints--
La tua pagina dovrebbe avere tre caselle di spunta.
```js
assert($('input[type="checkbox"]').length > 2);
```
Ogni casella di spunta dovrebbe essere annidata all'interno del proprio elemento `label`.
```js
assert($('label > input[type="checkbox"]:only-child').length > 2);
```
Assicurati che ciascuno dei tuoi elementi `label` abbia un tag di chiusura.
```js
assert(
code.match(/<\/label>/g) &&
code.match(/<label/g) &&
code.match(/<\/label>/g).length === code.match(/<label/g).length
);
```
Alle tue caselle di spunta dovrebbe essere dato l'attributo `name` di `personality`.
```js
assert(
$('label > input[type="checkbox"]').filter('[name="personality"]').length > 2
);
```
Ognuna delle tue caselle di spunta dovrebbe essere inserita all'interno del tag `form`.
```js
assert($('label').parent().get(0).tagName.match('FORM'));
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label for="playful"><input id="playful" type="checkbox" name="personality">Playful</label>
<label for="lazy"><input id="lazy" type="checkbox"
name="personality">Lazy</label>
<label for="evil"><input id="evil" type="checkbox"
name="personality">Evil</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```

160
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md Normal file
View File

@ -0,0 +1,160 @@
---
id: bad87fee1348bd9aedf08834
title: Creare un insieme di pulsanti di opzione
challengeType: 0
forumTopicId: 16822
dashedName: create-a-set-of-radio-buttons
---
# --description--
Puoi utilizzare i <dfn>pulsanti di opzione</dfn> (radiobutton) per le domande in cui desideri che l'utente dia una sola risposta scelta tra più opzioni.
I pulsanti di opzione sono un tipo di `input`.
Ognuno dei tuoi pulsanti di opzione può essere annidato all'interno del suo elemento `label`. Racchiudendo un elemento `input` all'interno di un elemento `label` assocerai automaticamente l'input della casella di spunta all'elemento label che lo circonda.
Tutti i pulsanti di opzione correlati dovrebbero avere lo stesso attributo `name` per creare un gruppo di pulsanti radio. Creando un gruppo di pulsanti di opzione, la selezione di un singolo pulsante deselezionerà automaticamente gli altri all'interno dello stesso gruppo assicurando che l'utente fornisca una sola risposta.
Ecco un esempio di pulsante radio:
```html
<label>
<input type="radio" name="indoor-outdoor">Indoor
</label>
```
È buona norma impostare un attributo `for` per l'elemento `label`, con un valore che corrisponda al valore dell'attributo `id` dell'elemento `input`. Ciò consente alle tecnologie assistive di creare una relazione tra l'etichetta e l'elemento `input` correlato. Ad esempio:
```html
<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>
```
Possiamo anche annidare l'elemento `input` all'interno dei tag `label`:
```html
<label for="indoor">
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
```
# --instructions--
Aggiungi un paio di pulsanti di opzione al tuo modulo, ciascuno annidato nel suo elemento `label`. Uno dovrebbe avere l'opzione `indoor` e l'altro dovrebbe avere l'opzione `outdoor`. Entrambi dovrebbero condividere l'attributo `name` di `indoor-outdoor` per creare un gruppo radio.
# --hints--
La tua pagina dovrebbe avere due elementi `radio`.
```js
assert($('input[type="radio"]').length > 1);
```
Alle tue caselle di spunta dovrebbe essere dato l'attributo `name` di `indoor-outdoor`.
```js
assert($('input[type="radio"]').filter("[name='indoor-outdoor']").length > 1);
```
Ognuna delle tue caselle di spunta dovrebbe essere annidata all'interno del suo elemento `label`.
```js
assert($('label > input[type="radio"]:only-child').length > 1);
```
Ognuno dei tuoi elementi `label` dovrebbe avere un tag di chiusura.
```js
assert(
code.match(/<\/label>/g) &&
code.match(/<label/g) &&
code.match(/<\/label>/g).length === code.match(/<label/g).length
);
```
Uno dei tuoi pulsanti di opzione dovrebbe avere l'etichetta `indoor`.
```js
assert(
$('label')
.text()
.match(/indoor/gi)
);
```
Uno dei tuoi pulsanti di opzione dovrebbe avere l'etichetta `outdoor`.
```js
assert(
$('label')
.text()
.match(/outdoor/gi)
);
```
Ognuno dei tuoi pulsanti di opzione dovrebbe essere aggiunto all'interno del tag `form`.
```js
assert($('label').parent().get(0).tagName.match('FORM'));
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```

89
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md Normal file
View File

@ -0,0 +1,89 @@
---
id: bad87fee1348bd9aedf08829
title: Creare un campo di testo
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/c2EVnf6'
forumTopicId: 16823
dashedName: create-a-text-field
---
# --description--
Creiamo ora un modulo (form) web.
Gli elementi `input` sono un modo conveniente per ottenere input dal tuo utente.
Puoi creare un input di testo come questo:
```html
<input type="text">
```
Nota che gli elementi `input` si auto-completano.
# --instructions--
Crea un elemento `input` di tipo `text` sotto le tue liste.
# --hints--
La tua app dovrebbe avere un elemento `input` di tipo `text`.
```js
assert($('input[type=text]').length > 0);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form>
<input type="text">
</form>
</main>
```

157
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.md Normal file
View File

@ -0,0 +1,157 @@
---
id: bad87fee1348bd9aedf08828
title: Creare una lista ordinata
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cQ3B8TM'
forumTopicId: 16824
dashedName: create-an-ordered-list
---
# --description--
HTML ha un altro elemento speciale per creare <dfn>liste ordinate</dfn> o elenchi numerati.
Le liste ordinate iniziano con un elemento di apertura `<ol>` , seguito da un numero qualsiasi di elementi `<li>`. Infine, le liste ordinate vengono chiuse con il tag `</ol>`.
Ad esempio:
```html
<ol>
<li>Garfield</li>
<li>Sylvester</li>
</ol>
```
creerebbe una lista numerata di `Garfield` e `Sylvester`.
# --instructions--
Crea una lista ordinata delle tre cose che i gatti odiano di più.
# --hints--
Dovresti avere una lista ordinata per `Top 3 things cats hate:`
```js
assert(/Top 3 things cats hate:/i.test($('ol').prev().text()));
```
Dovresti avere una lista non ordinata per `Things cats love:`
```js
assert(/Things cats love:/i.test($('ul').prev().text()));
```
Dovresti avere un solo elemento `ul`.
```js
assert.equal($('ul').length, 1);
```
Dovresti avere un solo elemento `ol`.
```js
assert.equal($('ol').length, 1);
```
Dovresti avere tre elementi `li` all'interno del tuo elemento `ul`.
```js
assert.equal($('ul li').length, 3);
```
Dovresti avere tre elementi `li` all'interno del tuo elemento `ol`.
```js
assert.equal($('ol li').length, 3);
```
Il tuo elemento `ul` dovrebbe avere un tag di chiusura.
```js
assert(
code.match(/<\/ul>/g) &&
code.match(/<\/ul>/g).length === code.match(/<ul>/g).length
);
```
Il tuo elemento `ol` dovrebbe avere un tag di chiusura.
```js
assert(
code.match(/<\/ol>/g) &&
code.match(/<\/ol>/g).length === code.match(/<ol>/g).length
);
```
Il tuo elemento `li` dovrebbe avere un tag di chiusura.
```js
assert(
code.match(/<\/li>/g) &&
code.match(/<li>/g) &&
code.match(/<\/li>/g).length === code.match(/<li>/g).length
);
```
Gli elementi `li` nella tua lista non ordinata non dovrebbero essere vuoti.
```js
$('ul li').each((i, val) =>
assert(__helpers.removeWhiteSpace(val.textContent))
);
```
Gli elementi `li` nella tua lista ordinata non dovrebbero essere vuoti.
```js
$('ol li').each((i, val) =>
assert(!!__helpers.removeWhiteSpace(val.textContent))
);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>hate 1</li>
<li>hate 2</li>
<li>hate 3</li>
</ol>
</main>
```

70
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.md Normal file
View File

@ -0,0 +1,70 @@
---
id: 587d78aa367417b2b2512aed
title: Dichiarare il Doctype di un documento HTML
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cra98AJ'
forumTopicId: 301095
dashedName: declare-the-doctype-of-an-html-document
---
# --description--
Le sfide finora hanno riguardato specifici elementi HTML e i loro utilizzi. Tuttavia, ci sono alcuni elementi che danno struttura generale alla tua pagina, e dovrebbero essere inclusi in ogni documento HTML.
Nella parte superiore del documento, è necessario dire al browser quale versione di HTML la tua pagina sta utilizzando. L'HTML è un linguaggio in evoluzione e viene aggiornato regolarmente. La maggior parte dei browser più importanti supportano le ultime specifiche, che è HTML5. Tuttavia, le pagine web più vecchie potrebbero utilizzare versioni precedenti del linguaggio.
Darai al browser queste informazioni aggiungendo un tag `<!DOCTYPE ...>` nella prima riga, dove la parte `...` è la versione di HTML. Per HTML5, si utilizza `<!DOCTYPE html>`.
Il `!` e il `DOCTYPE` maiuscolo sono importanti, specialmente per i browser più vecchi. L'`html` non fa differenza tra maiuscole e minuscole.
Successivamente, il resto del tuo codice HTML deve essere inserito nei tag `html`. Il tag di apertura `<html>` va direttamente al di sotto della riga `<!DOCTYPE html>`, e quello di chiusura `</html>` va alla fine della pagina.
Ecco un esempio della struttura della pagina. Il tuo codice HTML dovrebbe andare nello spazio tra i due tag `html`.
```html
<!DOCTYPE html>
<html>
</html>
```
# --instructions--
Aggiungi un tag `DOCTYPE` per HTML5 nella parte superiore del documento HTML vuoto nell'editor del codice. Sotto di esso, aggiungi i tag di apertura e chiusura `html`, che racchiudono un elemento `h1`. L'intestazione può includere qualsiasi testo.
# --hints--
Il tuo codice dovrebbe includere un tag `<!DOCTYPE html>`.
```js
assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
```
Dovrebbe esserci un elemento `html`.
```js
assert($('html').length == 1);
```
I tag `html` dovrebbero avvolgere un elemento `h1`.
```js
assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi));
```
# --seed--
## --seed-contents--
```html
```
# --solutions--
```html
<!DOCTYPE html>
<html>
<h1> Hello world </h1>
</html>
```

140
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document.md Normal file
View File

@ -0,0 +1,140 @@
---
id: 587d78aa367417b2b2512aec
title: Definire l'head e il body di un documento HTML
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cra9bfP'
forumTopicId: 301096
dashedName: define-the-head-and-body-of-an-html-document
---
# --description--
Puoi aggiungere un altro livello di organizzazione nel tuo documento HTML all'interno dei tag `html` con gli elementi `head` e `body`. Qualsiasi markup con informazioni sulla tua pagina dovrebbe essere inserito nel tag `head`. Qualsiasi markup con il contenuto della pagina (quello che viene visualizzato dall'utente) dovrebbe invece andare nel tag `body`.
Gli elementi contenenti metadati, come `link`, `meta`, `title`, e `style`, normalmente vanno all'interno dell'elemento `head`.
Ecco un esempio del layout di una pagina:
```html
<!DOCTYPE html>
<html>
<head>
<meta />
</head>
<body>
<div>
</div>
</body>
</html>
```
# --instructions--
Modifica il markup in modo che ci siano una `head` e un `body`. L'elemento `head` dovrebbe includere solo il `title`, e l'elemento `body` dovrebbe includere solo `h1` e `p`.
# --hints--
Ci dovrebbe essere un solo elemento `head` nella pagina.
```js
const headElems = code.replace(/\n/g, '').match(/\<head\s*>.*?\<\/head\s*>/g);
assert(headElems && headElems.length === 1);
```
Ci dovrebbe essere solo un elemento `body` nella pagina.
```js
const bodyElems = code.replace(/\n/g, '').match(/<body\s*>.*?<\/body\s*>/g);
assert(bodyElems && bodyElems.length === 1);
```
L'elemento `head` dovrebbe essere un figlio dell'elemento `html`.
```js
const htmlChildren = code
.replace(/\n/g, '')
.match(/<html\s*>(?<children>.*)<\/html\s*>/);
let foundHead;
if (htmlChildren) {
const { children } = htmlChildren.groups;
foundHead = children.match(/<head\s*>.*<\/head\s*>/);
}
assert(foundHead);
```
L'elemento `body` dovrebbe essere un figlio dell'elemento `html`.
```js
const htmlChildren = code
.replace(/\n/g, '')
.match(/<html\s*>(?<children>.*?)<\/html\s*>/);
let foundBody;
if (htmlChildren) {
const { children } = htmlChildren.groups;
foundBody = children.match(/<body\s*>.*<\/body\s*>/);
}
assert(foundBody);
```
L'elemento `head` dovrebbe racchiudere l'elemento `title`.
```js
const headChildren = code
.replace(/\n/g, '')
.match(/<head\s*>(?<children>.*?)<\/head\s*>/);
let foundTitle;
if (headChildren) {
const { children } = headChildren.groups;
foundTitle = children.match(/<title\s*>.*?<\/title\s*>/);
}
assert(foundTitle);
```
L'elemento `body` dovrebbe racchiudere entrambi gli elementi `h1` e `p`.
```js
const bodyChildren = code
.replace(/\n/g, '')
.match(/<body\s*>(?<children>.*?)<\/body\s*>/);
let foundElems;
if (bodyChildren) {
const { children } = bodyChildren.groups;
const h1s = children.match(/<h1\s*>.*<\/h1\s*>/g);
const ps = children.match(/<p\s*>.*<\/p\s*>/g);
const numH1s = h1s ? h1s.length : 0;
const numPs = ps ? ps.length : 0;
foundElems = numH1s === 1 && numPs === 1;
}
assert(foundElems);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<title>The best page ever</title>
<h1>The best page ever</h1>
<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
</html>
```
# --solutions--
```html
<!DOCTYPE html>
<html>
<head>
<title>The best page ever</title>
</head>
<body>
<h1>The best page ever</h1>
<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
</body>
</html>
```

56
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/delete-html-elements.md Normal file
View File

@ -0,0 +1,56 @@
---
id: bad87fed1348bd9aedf08833
title: Eliminare elementi HTML
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/ckK73C9'
forumTopicId: 17559
dashedName: delete-html-elements
---
# --description--
Il nostro telefono non ha molto spazio verticale.
Rimuoviamo gli elementi inutili in modo da poter iniziare a costruire la nostra CatPhotoApp.
# --instructions--
Elimina il tuo elemento `h1` in modo da semplificare la vista.
# --hints--
Il tuo elemento `h1` dovrebbe essere cancellato.
```js
assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi));
```
Il tuo elemento `h2` dovrebbe essere presente nella pagina.
```js
assert(code.match(/<h2>[\w\W]*<\/h2>/gi));
```
L'elemento `p` dovrebbe essere presente nella pagina.
```js
assert(code.match(/<p>[\w\W]*<\/p>/gi));
```
# --seed--
## --seed-contents--
```html
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
```
# --solutions--
```html
<h2>CatPhotoApp</h2><p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
```

50
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.md Normal file
View File

@ -0,0 +1,50 @@
---
id: bad87fee1348bd9aedf08833
title: Riempire il vuoto con il testo segnaposto
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cgR7Dc7'
forumTopicId: 18178
dashedName: fill-in-the-blank-with-placeholder-text
---
# --description--
Gli sviluppatori Web tradizionalmente usano <dfn>lorem ipsum text</dfn> come testo segnaposto. Il testo del lorem ipsum è tratto a caso da un famoso passaggio di Cicerone dell'antica Roma.
Il testo lorem ipsum è stato utilizzato come testo segnaposto dai tipografi sin dal XVI secolo e questa tradizione continua sul web.
Bene, 5 secoli sono abbastanza lunghi. Dato che stiamo costruendo una CatPhotoApp, usiamo qualcosa chiamato testo "kitty ipsum".
# --instructions--
Sostituisci il testo all'interno del tuo elemento `p` con le prime parole di questo testo kitty ipsum: `Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.`
# --hints--
Il tuo elemento `p` dovrebbe contenere le prime parole del testo "kitty ipsum" fornito.
```js
assert.isTrue(/Kitty(\s)+ipsum/gi.test($('p').text()));
```
# --seed--
## --seed-contents--
```html
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Hello Paragraph</p>
```
# --solutions--
```html
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff</p>
```

70
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/headline-with-the-h2-element.md Normal file
View File

@ -0,0 +1,70 @@
---
id: bad87fee1348bd9aedf0887a
title: Creare un titolo con l'elemento h2
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gqf3'
forumTopicId: 18196
dashedName: headline-with-the-h2-element
---
# --description--
Nelle prossime lezioni, costruiremo passo passo un'app web HTML per le foto di gatti.
L'elemento `h2` che inserirai in questo passaggio aggiungerà un titolo di livello due alla pagina web.
Questo elemento fornisce al browser informazioni sulla struttura del tuo sito web. Gli elementi `h1` sono spesso utilizzati per i titoli principali, mentre gli elementi `h2` sono generalmente utilizzati per i sottotitoli. Ci sono anche elementi `h3`, `h4`, `h5` e `h6` per indicare diversi livelli di sottotitolo.
# --instructions--
Aggiungi un tag `h2` che dice "CatPhotoApp" per creare un secondo elemento HTML sotto il tuo elemento `h1` "Hello World".
# --hints--
Dovresti creare un elemento `h2`.
```js
assert($('h2').length > 0);
```
Il tuo elemento `h2` dovrebbe avere un tag di chiusura.
```js
assert(
code.match(/<\/h2>/g) &&
code.match(/<\/h2>/g).length === code.match(/<h2>/g).length
);
```
Il tuo elemento `h2` dovrebbe contenere il testo `CatPhotoApp`.
```js
assert.isTrue(/cat(\s)?photo(\s)?app/gi.test($('h2').text()));
```
Il tuo elemento `h1` dovrebbe contenere il testo `Hello World`.
```js
assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
```
Il tuo elemento `h1` dovrebbe venire prima del tuo elemento `h2`.
```js
assert(code.match(/<h1>\s*?.*?\s*?<\/h1>\s*<h2>\s*?.*?\s*?<\/h2>/gi));
```
# --seed--
## --seed-contents--
```html
<h1>Hello World</h1>
```
# --solutions--
```html
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
```

64
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.md Normal file
View File

@ -0,0 +1,64 @@
---
id: bad87fee1348bd9aedf08801
title: Informare con l'elemento Paragrafo
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/ceZ7DtN'
forumTopicId: 18202
dashedName: inform-with-the-paragraph-element
---
# --description--
Gli elementi `p` sono i preferiti per i paragrafi di testo nei siti web. `p` è l'abbreviazione per "paragrafo".
Puoi creare un elemento paragrafo in questo modo:
```html
<p>I'm a p tag!</p>
```
# --instructions--
Crea un elemento `p` sotto il tuo elemento `h2`, e dagli il testo `Hello Paragraph`.
**Nota:** Come convenzione, tutti i tag HTML sono scritti in minuscolo, ad esempio `<p></p>` e non `<P></P>`.
# --hints--
Il tuo codice dovrebbe avere un elemento `p` valido.
```js
assert($('p').length > 0);
```
Il tuo elemento `p` dovrebbe contenere il testo `Hello Paragraph`.
```js
assert.isTrue(/hello(\s)+paragraph/gi.test($('p').text()));
```
Il tuo elemento `p` dovrebbe avere un tag di chiusura.
```js
assert(
code.match(/<\/p>/g) &&
code.match(/<\/p>/g).length === code.match(/<p/g).length
);
```
# --seed--
## --seed-contents--
```html
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
```
# --solutions--
```html
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Hello Paragraph</p>
```

98
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.md Normal file
View File

@ -0,0 +1,98 @@
---
id: bad87fee1348bd9aecf08801
title: Introduzione agli elementi HTML5
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cBkZGpt7'
forumTopicId: 301097
dashedName: introduction-to-html5-elements
---
# --description--
HTML5 introduce tag HTML più descrittivi. Questi tag comprendono tra l'altro `main`, `header`, `footer`, `nav`, `article`, e `section`.
Questi tag danno una struttura descrittiva al tuo HTML, rendono il tuo HTML più facile da leggere, e aiutano con l'ottimizzazione per i motori di ricerca (SEO, Search Engine Optimization) e l'accessibilità. Il tag HTML5 `main` aiuta i motori di ricerca e altri sviluppatori a trovare il contenuto principale della tua pagina.
Ecco come esempio di utilizzo un elemento `main` con due elementi figlio annidati al suo interno:
```html
<main>
<h1>Hello World</h1>
<p>Hello Paragraph</p>
</main>
```
**Nota:** Molti dei nuovi tag HTML5 e i loro vantaggi sono coperti nella sezione Accessibilità Applicata.
# --instructions--
Crea un secondo elemento `p` con il seguente testo ipsum kitty: `Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.`
Crea quindi un elemento `main` e annida solo i due elementi `p` all'interno dell'elemento `main`.
# --hints--
Dovresti avere 2 elementi `p` con il testo Kitty Ipsum.
```js
assert($('p').length > 1);
```
Ognuno dei tuoi elementi `p` dovrebbe avere un tag di chiusura.
```js
assert(
code.match(/<\/p>/g) &&
code.match(/<\/p>/g).length === code.match(/<p/g).length
);
```
Il tuo elemento `p` dovrebbe contenere le prime parole dell'ulteriore `kitty ipsum text`.
```js
assert.isTrue(/Purr\s+jump\s+eat/gi.test($('p').text()));
```
Il tuo codice dovrebbe avere un tag `main`.
```js
assert($('main').length === 1);
```
L'elemento `main` dovrebbe avere due elementi paragrafo come figli.
```js
assert($('main').children('p').length === 2);
```
Il tag `main` di apertura dovrebbe venire prima del primo tag di paragrafo.
```js
assert(code.match(/<main>\s*?<p>/g));
```
Il tag `main` di chiusura dovrebbe venire dopo il secondo tag di chiusura di paragrafo.
```js
assert(code.match(/<\/p>\s*?<\/main>/g));
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```

78
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md Normal file
View File

@ -0,0 +1,78 @@
---
id: bad87fee1348bd9aedf08816
title: Collegare a pagine esterne con elementi di ancoraggio
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/c8EkncB'
forumTopicId: 18226
dashedName: link-to-external-pages-with-anchor-elements
---
# --description--
Puoi usare elementi `a` (*anchor*) per creare dei collegamenti (link) a contenuti al di fuori della tua pagina web.
Gli elementi `a` richiedono un indirizzo web di destinazione, inserito in un attributo `href`. Hanno bisogno anche di un testo di ancoraggio. Ecco un esempio:
```html
<a href="https://www.freecodecamp.org">this links to freecodecamp.org</a>
```
A questo punto il tuo browser visualizzerà il testo: `this links to freecodecamp.org` come link cliccabile. E quel link ti porterà all'indirizzo web `https://www.freecodecamp.org`.
# --instructions--
Crea un elemento `a` che si colleghi a `https://www.freecatphotoapp.com` e abbia "cat photos" come testo di ancoraggio.
# --hints--
Il tuo elemento `a` dovrebbe avere il testo di ancoraggio: `cat photos`.
```js
assert(/cat photos/gi.test($('a').text()));
```
Hai bisogno di un elemento `a` che si colleghi a `https://www.freecatphotoapp.com`
```js
assert(/^https?:\/\/(www\.)?freecatphotoapp\.com\/?$/i.test($('a').attr('href')));
```
Il tuo elemento `a` dovrebbe avere un tag di chiusura.
```js
assert(
code.match(/<\/a>/g) &&
code.match(/<\/a>/g).length === code.match(/<a/g).length
);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<a href="https://www.freecatphotoapp.com">cat photos</a>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```

120
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.md Normal file
View File

@ -0,0 +1,120 @@
---
id: bad88fee1348bd9aedf08816
title: Creare dei link alle sezioni interne di una pagina con gli elementi di ancoraggio
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cyrDRUL'
forumTopicId: 301098
dashedName: link-to-internal-sections-of-a-page-with-anchor-elements
---
# --description--
Gli elementi `a` (*anchor*) possono essere anche utilizzati per creare collegamenti interni per saltare a diverse sezioni di una pagina web.
Per creare un link interno assegna l'attributo `href` di un link a un simbolo di hash `#` seguito dal valore dell'attributo `id` dell'elemento a cui desideri creare il collegamento, solitamente più in basso nella pagina. Devi quindi aggiungere lo stesso attributo `id` all'elemento a cui ti stai collegando. Un `id` è un attributo che identifica in modo univoco un elemento.
Di seguito è riportato un esempio di collegamento interno e il suo elemento di destinazione:
```html
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>
```
Quando gli utenti cliccheranno sul link `Contacts`, saranno portati alla sezione della pagina web con l'elemento di intestazione **Contacts**.
# --instructions--
Cambia il tuo link esterno in un link interno cambiando l'attributo `href` in `"#footer"` e il testo da `cat photos` a `Jump to Bottom`.
Rimuovi l'attributo `target="_blank"` dal tag di ancoraggio perché questo farebbe aprire il documento collegato in una nuova scheda del browser.
Quindi aggiungi un attributo `id` con un valore di `footer` all'elemento `<footer>` in fondo alla pagina.
# --hints--
Ci dovrebbe essere un solo tag di ancoraggio nella tua pagina.
```js
assert($('a').length == 1);
```
Ci dovrebbe essere solo un tag `footer` nella tua pagina.
```js
assert($('footer').length == 1);
```
Il tag `a` dovrebbe avere un attributo `href` impostato a "#footer".
```js
assert($('a').eq(0).attr('href') == '#footer');
```
Il tag `a` non dovrebbe avere un attributo `target`
```js
assert(
typeof $('a').eq(0).attr('target') == typeof undefined ||
$('a').eq(0).attr('target') == true
);
```
Il testo `a` dovrebbe essere "Jump to Bottom".
```js
assert(
$('a')
.eq(0)
.text()
.match(/Jump to Bottom/gi)
);
```
Il tag `footer` dovrebbe avere un attributo `id` impostato a "footer".
```js
assert($('footer').eq(0).attr('id') == 'footer');
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
<p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
<p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
</main>
<footer>Copyright Cat Photo App</footer>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<a href="#footer">Jump to Bottom</a>
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
<p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
<p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
</main>
<footer id="footer">Copyright Cat Photo App</footer>
```

58
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/make-dead-links-using-the-hash-symbol.md Normal file
View File

@ -0,0 +1,58 @@
---
id: bad87fee1348bd9aedf08817
title: Creare collegamenti a vuoto utilizzando il simbolo hash
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cMdkytL'
forumTopicId: 18230
dashedName: make-dead-links-using-the-hash-symbol
---
# --description--
A volte dovrai aggiungere degli elementi `a` al tuo sito web senza sapere a priori a cosa si collegheranno.
Questo è utile anche quando stai cambiando il comportamento di un link utilizzando `JavaScript`, che vedremo in seguito.
# --instructions--
Il valore corrente dell'attributo `href` è un link che punta a "`https://www.freecatphotoapp.com`". Sostituisci l'attributo `href` con un `#`, noto anche come simbolo hash, per creare un link vuoto.
Per esempio: `href="#"`
# --hints--
Il tuo elemento `a` dovrebbe essere un link vuoto con il valore dell'attributo `href` impostato a "#".
```js
assert($('a').attr('href') === '#');
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>.</p>
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#" target="_blank">cat photos</a>.</p>
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```

163
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md Normal file
View File

@ -0,0 +1,163 @@
---
id: bad87fee1348bd9aede08817
title: Nidificare un elemento di ancoraggio all'interno di un paragrafo
challengeType: 0
forumTopicId: 18244
dashedName: nest-an-anchor-element-within-a-paragraph
---
# --description--
Puoi annidare i link all'interno di altri elementi di testo.
```html
<p>
Here's a <a target="_blank" href="https://www.freecodecamp.org"> link to www.freecodecamp.org</a> for you to follow.
</p>
```
Andiamo a scomporre l'esempio. Il testo normale viene inserito nell'elemento `p`:
```html
<p> Here's a ... for you to follow. </p>
```
Poi viene l'elemento *anchor*`<a>` (che richiede un tag di chiusura `</a>`):
```html
<a> ... </a>
```
`target` è un attributo tag di ancoraggio che specifica dove aprire il collegamento. Il valore `_blank` specifica di aprire il collegamento in una nuova scheda. L' `href` è un attributo tag di ancoraggio che contiene l'indirizzo URL del collegamento:
```html
<a href="https://www.freecodecamp.org" target="_blank"> ... </a>
```
Il testo, `link to www.freecodecamp.org` all'interno dell'elemento `a` si chiama <dfn>testo di ancoraggio</dfn>, e mostrerà il link sul quale cliccare:
```html
<a href=" ... " target="...">link to freecodecamp.org</a>
```
L'output finale dell'esempio sarà simile a questo:
Ecco un <a href="https://www.freecodecamp.org" target="_blank">link a www.freecodecamp.org</a> da seguire.
# --instructions--
Annida l'elemento `a` all'interno del nuovo elemento `p`. Il nuovo paragrafo dovrebbe contenere un testo che dice `View more cat photos`, dove `cat photos` è un collegamento, e il resto è testo semplice.
# --hints--
Dovresti avere un solo elemento `a`.
```js
assert(
$('a').length === 1
);
```
L'elemento `a` dovrebbe essere collegato a "`https://www.freecatphotoapp.com`".
```js
assert(
$('a[href="https://www.freecatphotoapp.com"]').length === 1
);
```
Il tuo elemento `a` dovrebbe avere il testo di ancoraggio: `cat photos`
```js
assert(
$('a')
.text()
.match(/cat\sphotos/gi)
);
```
Dovresti creare un elemento `p`. Ci dovrebbe essere almeno 3 tag `p` nel tuo codice HTML
```js
assert($('p') && $('p').length > 2);
```
Il tuo elemento `a` dovrebbe essere annidato nel nuovo elemento `p`.
```js
assert(
$('a[href="https://www.freecatphotoapp.com"]').parent().is('p')
);
```
Il tuo elemento `p` dovrebbe avere il testo `View more` (con uno spazio dopo di esso).
```js
assert(
$('a[href="https://www.freecatphotoapp.com"]')
.parent()
.text()
.match(/View\smore\s/gi)
);
```
Il tuo elemento `a` <em>non</em> dovrebbe contenere il testo `View more`.
```js
assert(
!$('a')
.text()
.match(/View\smore/gi)
);
```
Ognuno dei tuoi elementi `p` dovrebbe avere un tag di chiusura.
```js
assert(
code.match(/<\/p>/g) &&
code.match(/<p/g) &&
code.match(/<\/p>/g).length === code.match(/<p/g).length
);
```
Ognuno dei tuoi elementi `a` dovrebbe avere un tag di chiusura.
```js
assert(
code.match(/<\/a>/g) &&
code.match(/<a/g) &&
code.match(/<\/a>/g).length === code.match(/<a/g).length
);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>View more <a target="_blank" href="https://www.freecatphotoapp.com">cat photos</a></p>
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```

121
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/nest-many-elements-within-a-single-div-element.md Normal file
View File

@ -0,0 +1,121 @@
---
id: bad87fee1348bd9aede08835
title: Nidificare diversi elementi all'interno di un singolo elemento div
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cNW4kC3'
forumTopicId: 18246
dashedName: nest-many-elements-within-a-single-div-element
---
# --description--
L'elemento `div`, noto anche come elemento di divisione, è un contenitore di uso generale per altri elementi.
L'elemento `div` è probabilmente l'elemento HTML usato più comunemente.
Proprio come qualsiasi altro elemento puoi aprire un elemento `div` con `<div>` e chiuderlo su un'altra linea con `</div>`.
# --instructions--
Nidifica le tue liste "Things cats love" e "Top 3 things cats hate" all'interno di un singolo elemento `div`.
Suggerimento: Prova a mettere il tuo tag `div` di apertura sopra l'elemento `p` "Things cats love" e il tag `div` di chiusura dopo il tag `ol` in modo che entrambe le liste siano all'interno di un `div`.
# --hints--
I tuoi elementi `p` dovrebbero essere annidati all'interno dell'elemento `div`.
```js
assert($('div').children('p').length > 1);
```
Il tuo elemento `ul` dovrebbe essere annidato all'interno dell'elemento `div`.
```js
assert($('div').children('ul').length > 0);
```
Il tuo elemento `ol` dovrebbe essere annidato all'interno dell'elemento `div`.
```js
assert($('div').children('ol').length > 0);
```
Il tuo elemento `div` dovrebbe avere un tag di chiusura.
```js
assert(
code.match(/<\/div>/g) &&
code.match(/<\/div>/g).length === code.match(/<div>/g).length
);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```

60
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/say-hello-to-html-elements.md Normal file
View File

@ -0,0 +1,60 @@
---
id: bd7123c8c441eddfaeb5bdef
title: Fare conoscenza con gli elementi HTML
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gpt2'
forumTopicId: 18276
dashedName: say-hello-to-html-elements
---
# --description--
Benvenuto nelle sfide di programmazione HTML di freeCodeCamp. Queste ti guideranno attraverso lo sviluppo web passo dopo passo.
Innanzitutto, inizierai costruendo una semplice pagina web usando HTML. Puoi modificare il codice nel tuo editor di codice, che è integrato in questa pagina web.
Vedi il codice nel tuo editor di codici che dice `<h1>Hello</h1>`? Questo è un elemento HTML.
La maggior parte degli elementi HTML hanno un tag di apertura e un tag di chiusura.
Questo è un tag di apertura:
```html
<h1>
```
Questo è un tag di chiusura:
```html
</h1>
```
L'unica differenza tra i tag di apertura e di chiusura è la barra obliqua dopo la parentesi di apertura nei tag di chiusura.
Ogni sfida ha dei test che puoi eseguire in qualsiasi momento cliccando sul pulsante "Esegui i test". Quando supererai tutti i test, ti verrà chiesto di inviare la tua soluzione e andare alla successiva sfida di coding.
# --instructions--
Per superare il test di questa sfida, modifica il testo dell'elemento `h1` per dire `Hello World`.
# --hints--
Il tuo elemento `h1` dovrebbe avere il testo `Hello World`.
```js
assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
```
# --seed--
## --seed-contents--
```html
<h1>Hello</h1>
```
# --solutions--
```html
<h1>Hello World</h1>
```

80
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md Normal file
View File

@ -0,0 +1,80 @@
---
id: bad87fee1348bd9aedf08820
title: Trasformare un'immagine in un collegamento
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cRdBnUr'
forumTopicId: 18327
dashedName: turn-an-image-into-a-link
---
# --description--
È possibile trasformare in link degli elementi annidandoli all'interno di un elemento `a`.
Metti la tua immagine all'interno di un elemento `a`. Ecco un esempio:
```html
<a href="#"><img src="https://www.bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>
```
Ricordati di usare `#` come proprietà `href` dei tuoi elementi `a` per trasformarli in link vuoti.
# --instructions--
Posiziona l'elemento immagine esistente all'interno di un elemento `a` (*anchor*).
Una volta fatto questo, passa sopra alla tua immagine con il cursore. Il puntatore normale del cursore dovrebbe diventare il puntatore di clic del collegamento. La foto è ora un collegamento.
# --hints--
L'elemento `img` esistente deve essere annidato all'interno di un elemento `a`.
```js
assert($('a').children('img').length > 0);
```
Il tuo elemento `a` dovrebbe essere un link vuoto con un attributo `href` impostato su `#`.
```js
assert(new RegExp('#').test($('a').children('img').parent().attr('href')));
```
Ognuno dei tuoi elementi `a` dovrebbe avere un tag di chiusura.
```js
assert(
code.match(/<\/a>/g) &&
code.match(/<a/g) &&
code.match(/<\/a>/g).length === code.match(/<a/g).length
);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```

70
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/uncomment-html.md Normal file
View File

@ -0,0 +1,70 @@
---
id: bad87fee1348bd9aedf08802
title: Decommentare l'HTML
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cBmG9T7'
forumTopicId: 18329
dashedName: uncomment-html
---
# --description--
I commenti sono un modo per lasciare nel tuo codice commenti per altri sviluppatori senza modificare l'output mostrato all'utente finale.
Commentare è anche un modo conveniente per rendere inattivo il codice senza doverlo eliminare completamente.
I commenti in HTML cominciano con `<!--` e finiscono con `-->`
# --instructions--
Decommenta i tuoi elementi `h1`,`h2` e `p`.
# --hints--
Il tuo elemento `h1` dovrebbe essere visibile nella pagina decommentandolo.
```js
assert($('h1').length > 0);
```
Il tuo elemento `h2` dovrebbe essere visibile nella pagina decommentandolo.
```js
assert($('h2').length > 0);
```
Il tuo elemento `p` dovrebbe essere visibile nella pagina decommentandolo.
```js
assert($('p').length > 0);
```
Nessun tag finale di commento dovrebbe essere visibile sulla pagina (ad es. `-->`).
```js
assert(!$('*:contains("-->")')[1]);
```
# --seed--
## --seed-contents--
```html
<!--
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
-->
```
# --solutions--
```html
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
```

86
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/use-html5-to-require-a-field.md Normal file
View File

@ -0,0 +1,86 @@
---
id: bad87fee1348bd9aedc08830
title: Usare HTML5 per rendere obbligatorio un campo
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cMd4EcQ'
forumTopicId: 18360
dashedName: use-html5-to-require-a-field
---
# --description--
È possibile rendere obbligatori specifici campi di un modulo in modo che l'utente non sia in grado di inviarlo fino a quando non li abbia compilati.
Per esempio, se volessi rendere obbligatorio un campo di immissione di testo, potresti semplicemente aggiungere l'attributo `required` all'interno del tuo elemento `input`, in questo modo: `<input type="text" required>`
# --instructions--
Rendi il tuo testo `input` un campo `required`, in modo che il tuo utente non possa inviare il modulo senza completare questo campo.
Quindi prova a inviare il modulo senza inserire alcun testo. Vedi come il tuo modulo HTML5 ti informa che il campo è obbligatorio?
# --hints--
Il tuo elemento `input` di testo dovrebbe avere l'attributo `required`.
```js
assert($('input').prop('required'));
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
<button type="submit">Submit</button>
</form>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<input type="text" required placeholder="cat photo URL">
<button type="submit">Submit</button>
</form>
</main>
```

148
curriculum/challenges/italian/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md Normal file
View File

@ -0,0 +1,148 @@
---
id: 5c6c06847491271903d37cfd
title: Usare l'attributo value con i pulsanti di opzione e le caselle di spunta
challengeType: 0
forumTopicId: 301099
dashedName: use-the-value-attribute-with-radio-buttons-and-checkboxes
---
# --description--
Quando un modulo viene inviato, i dati vengono spediti al server e includono delle voci per le opzioni selezionate. Gli input di tipo `radio` e `checkbox` prendono i loro valori dall'attributo `value`.
Ad esempio:
```html
<label for="indoor">
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>
```
Qui hai due input di tipo `radio`. Quando l'utente invia il modulo con l'opzione `indoor` selezionata, i dati del modulo includeranno la linea: `indoor-outdoor=indoor`. Questo proviene dagli attributi `name` e `value` dell'input "indoor".
Se si omette l'attributo `value`, i dati del modulo inviato usano il valore predefinito, che è `on`. In questo scenario, se l'utente ha cliccato l'opzione "indoor" e ha inviato il modulo, i dati del modulo risultante saranno `indoor-outdoor=on`, il che non è utile. Quindi l'attributo `value` deve essere impostato su qualcosa che identifichi l'opzione.
# --instructions--
Dai a ciascuno degli input `radio` e `checkbox` l'attributo `value`. Usa il testo dell'etichetta, in minuscolo, come valore per l'attributo.
# --hints--
Uno dei tuoi pulsanti di opzione dovrebbe avere l'attributo `value` di `indoor`.
```js
assert(
$('label:contains("Indoor") > input[type="radio"]').filter("[value='indoor']")
.length > 0
);
```
Uno dei tuoi pulsanti di opzione dovrebbe avere l'attributo `value` di `outdoor`.
```js
assert(
$('label:contains("Outdoor") > input[type="radio"]').filter(
"[value='outdoor']"
).length > 0
);
```
Uno dei tuoi pulsanti di opzione dovrebbe avere l'attributo `value` di `loving`.
```js
assert(
$('label:contains("Loving") > input[type="checkbox"]').filter(
"[value='loving']"
).length > 0
);
```
Una delle tue caselle di spunta dovrebbe avere l'attributo `value` di `lazy`.
```js
assert(
$('label:contains("Lazy") > input[type="checkbox"]').filter("[value='lazy']")
.length > 0
);
```
Una delle tue caselle di spunta dovrebbe avere l'attributo `value` di `energetic`.
```js
assert(
$('label:contains("Energetic") > input[type="checkbox"]').filter(
"[value='energetic']"
).length > 0
);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
<label for="lazy"><input id="lazy" type="checkbox" name="personality"> Lazy</label>
<label for="energetic"><input id="energetic" type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"> Loving</label>
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```