diff --git a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md index c7ae6c78351..b77910146d2 100644 --- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md +++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md @@ -21,7 +21,7 @@ Ad esempio, se avessimo creato una variabile `const firstName = "Ada"`, potremmo # --instructions-- -Usa la proprietà `.length` per contare il numero di caratteri nella variabile `lastName` e assegnarla a `lastNameLength`. +Usa la proprietà `.length` per dare a `lastNameLength` un valore pari al numero di caratteri in `lastName`. # --hints-- diff --git a/curriculum/challenges/italian/11-machine-learning-with-python/machine-learning-with-python-projects/book-recommendation-engine-using-knn.md b/curriculum/challenges/italian/11-machine-learning-with-python/machine-learning-with-python-projects/book-recommendation-engine-using-knn.md index f868e018439..3cb7087d719 100644 --- a/curriculum/challenges/italian/11-machine-learning-with-python/machine-learning-with-python-projects/book-recommendation-engine-using-knn.md +++ b/curriculum/challenges/italian/11-machine-learning-with-python/machine-learning-with-python-projects/book-recommendation-engine-using-knn.md @@ -8,16 +8,49 @@ dashedName: book-recommendation-engine-using-knn # --description-- -In questa sfida, creerai un algoritmo di raccomandazione di libri utilizzando K-Nearest Neighbors. - -Userai il dataset di Book-Crossings. Questo set di dati contiene 1,1 milioni di valutazioni (scala 1-10) di 270.000 libri da 90.000 utenti. - -Puoi accedere [alla descrizione completa del progetto e al codice iniziale su Google Colaboratory](https://colab.research.google.com/github/freeCodeCamp/boilerplate-book-recommendation-engine/blob/master/fcc_book_recommendation_knn.ipynb). +[Lavorerai su questo progetto con Google Colaboratory](https://colab.research.google.com/github/freeCodeCamp/boilerplate-book-recommendation-engine/blob/master/fcc_book_recommendation_knn.ipynb). Dopo essere andato a quel collegamento, crea una copia del notebook nel tuo account o localmente. Una volta completato il progetto e superato il test (incluso a quel link), invia il link del progetto qui sotto. Se stai inviando un link di Google Colaboratory, assicurati di attivare la condivisione di link per "anyone with the link" Stiamo ancora sviluppando il contenuto didattico interattivo per il programma di machine learning. Per ora, puoi vedere le sfide video in questa certificazione. Potrebbe anche essere necessario cercare ulteriori risorse di apprendimento, in maniera simile a quello che faresti lavorando su un progetto del mondo reale. +# --instructions-- + +In questa sfida creerai un algoritmo per raccomandare libri usando **K-Nearest Neighbors**. + +Userai il [Book-Crossings dataset](http://www2.informatik.uni-freiburg.de/~cziegler/BX/). Questo set di dati contiene 1,1 milioni di valutazioni (scala 1-10) di 270.000 libri da 90.000 utenti. + +Dopo aver importato e pulito i dati, usa `NearestNeighbors` da `sklearn.neighbors` per sviluppare un modello che mostra libri che sono simili a un dato libro. L'algoritmo Nearest Neighbors misura la distanza per determinare la "vicinanza" delle istanze. + +Crea una funzione dal nome `get_recommends` che prende il titolo di un libro (dal dataset) come argomento e restituisce una lista di 5 libri simili con la loro distanza dal libro argomento. + +Questo codice: + +```py +get_recommends("The Queen of the Damned (Vampire Chronicles (Paperback))") +``` + +dovrebbe restituire: + +```py +[ + 'The Queen of the Damned (Vampire Chronicles (Paperback))', + [ + ['Catch 22', 0.793983519077301], + ['The Witching Hour (Lives of the Mayfair Witches)', 0.7448656558990479], + ['Interview with the Vampire', 0.7345068454742432], + ['The Tale of the Body Thief (Vampire Chronicles (Paperback))', 0.5376338362693787], + ['The Vampire Lestat (Vampire Chronicles, Book II)', 0.5178412199020386] + ] +] +``` + +Nota che i dati restituiti da `get_recommends()` è una lista. Il primo elemento nella lista è il titolo del libro passato nella funzione. Il secondo elemento nella lista è una lista di altre cinque liste. Ognuna delle cinque liste contiene un libro raccomandato e la distata dal libro raccomandato al libro passato nella funzione. + +Se grafichi il dataset (facoltativo), noterai che molti libri non sono votati frequentemente. Per assicurarti significanza statistica, rimuovi dal dataset utenti con meno di 200 voti e libri con meno di 100 voti. + +Le prime tre celle importano librerie di cui potresti avere bisogno e i dati da usare. L'ultima cella è per i test. Scrivi il tuo codive tra queste celle. + # --hints-- Dovrebbe superare tutti i test Python. diff --git a/curriculum/challenges/italian/11-machine-learning-with-python/machine-learning-with-python-projects/cat-and-dog-image-classifier.md b/curriculum/challenges/italian/11-machine-learning-with-python/machine-learning-with-python-projects/cat-and-dog-image-classifier.md index 4a069e127f8..ada131295e8 100644 --- a/curriculum/challenges/italian/11-machine-learning-with-python/machine-learning-with-python-projects/cat-and-dog-image-classifier.md +++ b/curriculum/challenges/italian/11-machine-learning-with-python/machine-learning-with-python-projects/cat-and-dog-image-classifier.md @@ -8,14 +8,98 @@ dashedName: cat-and-dog-image-classifier # --description-- -Per questa sfida, userai TensorFlow 2.0 e Keras per creare una rete neurale convoluzionale che classifica correttamente le immagini di cani e gatti con almeno il 63% di accuratezza. +[Lavorerai su questo progetto con Google Colaboratory](https://colab.research.google.com/github/freeCodeCamp/boilerplate-cat-and-dog-image-classifier/blob/master/fcc_cat_dog.ipynb). -Puoi accedere [alla descrizione completa del progetto e al codice iniziale su Google Colaboratory](https://colab.research.google.com/github/freeCodeCamp/boilerplate-cat-and-dog-image-classifier/blob/master/fcc_cat_dog.ipynb). - -Dopo essere andato a quel collegamento, crea una copia del notebook o nel tuo account o localmente. Una volta completato il progetto e superato il test (incluso a quel link), invia il link del progetto qui sotto. Se stai inviando un link di Google Colaboratory, assicurati di attivare la condivisione di link per "anyone with the link" +Dopo essere andato a quel collegamento, crea una copia del notebook nel tuo account o localmente. Una volta completato il progetto e superato il test (incluso a quel link), invia il link del progetto qui sotto. Se stai inviando un link di Google Colaboratory, assicurati di attivare la condivisione di link per "anyone with the link" Stiamo ancora sviluppando il contenuto didattico interattivo per il programma di machine learning. Per ora, puoi vedere le sfide video in questa certificazione. Potrebbe anche essere necessario cercare ulteriori risorse di apprendimento, in maniera simile a quello che faresti lavorando su un progetto del mondo reale. +# --instructions-- + +Per questa sfida, completerai il codice per classificare immagini di cani e gatti. Utilizzerai Tensorflow 2.0 e Keras per creare una rete neurale convoluzionale che classifica correttamente immagini di cani e gatti almeno il 63% delle volte. (Crediti extra se arrivi ad una accuratezza di 70%!) + +Una parte del codice ti è dato, ma devi scrivere una parte del codice per completare la sfida. Leggi le istruzioni in ogni cella di testo così saprai cosa devi fare in ogni cella di codice. + +La prima cella di codice importa le librerie richieste. La seconda cella scarica i dati e imposta le variabili chiave. La terza cella è il primo posto dove scriverai il tuo codice. + +La struttura dei file di dataset che sono scaricati appare così (Noterai che la cartella di test non ha sottocartelle e che le immagini non sono etichettate): + +```py +cats_and_dogs +|__ train: + |______ cats: [cat.0.jpg, cat.1.jpg ...] + |______ dogs: [dog.0.jpg, dog.1.jpg ...] +|__ validation: + |______ cats: [cat.2000.jpg, cat.2001.jpg ...] + |______ dogs: [dog.2000.jpg, dog.2001.jpg ...] +|__ test: [1.jpg, 2.jpg ...] +``` + +Puoi cambiare epoch e dimensione dei batch se vuoi, ma non è richiesto. + +Le seguenti istruzioni corrispondo a specifici numeri di celle, indicate con un commento in cima alla cella (tipo `# 3`). + +## Cella 3 + +Ora è il tuo turno! Imposta correttamente ciascuna delle variabili in questa cella. (Non dovrebbero più essere uguali a `None`.) + +Crea generatori di immagini per ognuno dei tre set di dati di immagini (addestramento, validazione, test). Usa `ImageDataGenerator` per leggere / decodificare le immagini e convertire in tensori a virgola mobile. Usa l'argomento `rescale` (e nessun altro argomento per ora) per riscalare i tensori da valori tra 0 e 255 a valori tra 0 e 1. + +Per le variabili `*_data_gen`, usa il metodo `flow_from_directory`. Passa la dimensione del batch, la directory, la dimensione del target (`(IMG_HEIGHT, IMG_WIDTH)`, modo di classe, e qualsiasi altra cosa richiesta. `test_data_gen` sarà la cosa più complicata. Per `test_data_gen`, assicurati di passare `shuffle=False` al metodo `flow_from_directory`. Questo sarà si che le predizioni finali stanno nell'ordine che i nostri test si aspettano. Per `test_data_gen` sarà anche utile osservare la struttura della cartella. + + +Dopo che esegui il codice, l'output dovrebbe essere tipo questo: + +```py +Found 2000 images belonging to 2 classes. +Found 1000 images belonging to 2 classes. +Found 50 images belonging to 1 class. +``` + +## Cella 4 + +La funzione `plotImages` sarà usata alcune volte per plottare le immagini. Prende un array di immagini e una lista di probabilità, anche se la lista di probabilità è opzionale. Questo codice ti è dato. Se hai creato la variabile `train_data_gen` correttamente, allora eseguire questa cella plotterà cinque immagini di addestramento casuali. + +## Cella 5 + +Ricrea `train_image_generator` usando `ImageDataGenerator`. + +Visto che ci sono pochi esempi di addestramento c'è il rischio di overfitting. Un modo per aggiustare questo problema è creando più dati di addestramento dagli esempi di addestramento esistenti tramite trasformazioni casuali. + +Aggiungi 4-6 trasformazioni come argomenti di `ImageDataGenerator`. Assicurati di riscalare come hai fatto prima. + +## Cella 6 + +Non devi fare nulla per questa cella. `train_data_gen` è creato proprio come prima ma con il nuovo `train_image_generator`. Poi, una singola immagine è plottata cinque volte diverse usando diverse variazioni. + +## Cella 7 + +In questa cella, crea un modello per la rete neurale che restituisce le probabilità di classe. Dovrebbe usare il modello sequenziale di Keras. Probabilmente coinvolgerà una pila di livelli Conv2D e MaxPooling2D e poi un livello completamente connesso in cima che viene attivato da una funzione di attivazione ReLU. + +Compila il modello passando gli argomenti per impostare l'ottimizzatore e la perdita. Passa anche `metrics=['accuracy']` per visualizzare l'accuratezza dell'addestramento e della convalida per ogni epoca di allenamento. + +## Cella 8 + +Usa il metodo `fit` sul tuo `model` per addestrare la rete. Assicurati di passare argomenti per `x`, `steps_per_epoch`, `epochs`, `validation_data`e `validation_steps`. + +## Cella 9 + +Esegui questa cella per visualizzare la precisione e la perdita del modello. + +## Cella 10 + +Adesso è tempo di usare il tuo modello per predire se un'immagine nuova di zecca è un gatto o un cane. + +In questa cella, ottieni la probabilità che ogni immagine di prova (da `test_data_gen`) sia un cane o un gatto. `probabilities` dovrebbe essere una lista di numeri interi. + +Chiama la funzione `plotImages` e passagli le immagini di prova e le probabilità corrispondenti a ciascuna immagine di prova. + +Dopo l'esecuzione della cella, si dovresti vedere tutte le 50 immagini di prova con un'etichetta che mostra la percentuale di "sicurezza" che l'immagine sia un gatto o un cane. La precisione corrisponderà alla precisione mostrata nel grafico precedente (dopo aver eseguito la cella precedente). Più immagini di addestramento potrebbe portare ad una maggiore precisione. + +## Cella 11 + +Esegui questa cella finale per vedere se hai passato la sfida o se devi continuare a provare. + # --hints-- Dovrebbe superare tutti i test Python. diff --git a/curriculum/challenges/italian/11-machine-learning-with-python/machine-learning-with-python-projects/linear-regression-health-costs-calculator.md b/curriculum/challenges/italian/11-machine-learning-with-python/machine-learning-with-python-projects/linear-regression-health-costs-calculator.md index dafeaef0967..270104f57bf 100644 --- a/curriculum/challenges/italian/11-machine-learning-with-python/machine-learning-with-python-projects/linear-regression-health-costs-calculator.md +++ b/curriculum/challenges/italian/11-machine-learning-with-python/machine-learning-with-python-projects/linear-regression-health-costs-calculator.md @@ -8,15 +8,29 @@ dashedName: linear-regression-health-costs-calculator # --description-- +[Lavorerai su questo progetto con Google Colaboratory](https://colab.research.google.com/github/freeCodeCamp/boilerplate-linear-regression-health-costs-calculator/blob/master/fcc_predict_health_costs_with_regression.ipynb). + +Dopo essere andato a quel collegamento, crea una copia del notebook nel tuo account o localmente. Una volta completato il progetto e superato il test (incluso a quel link), invia il link del progetto qui sotto. Se stai inviando un link di Google Colaboratory, assicurati di attivare la condivisione di link per "anyone with the link" + +Stiamo ancora sviluppando il contenuto didattico interattivo per il programma di machine learning. Per ora, puoi vedere le sfide video in questa certificazione. Potrebbe anche essere necessario cercare ulteriori risorse di apprendimento, in maniera simile a quello che faresti lavorando su un progetto del mondo reale. + +# --instructions-- + In questa sfida, cercherai di prevedere i costi sanitari utilizzando un algoritmo di regressione. Ti viene dato un set di dati contenente informazioni su persone diverse, inclusi i costi sanitari. Utilizza i dati per prevedere i costi sanitari sulla base di nuovi dati. -Puoi accedere [alla descrizione completa del progetto e al codice iniziale su Google Colaboratory](https://colab.research.google.com/github/freeCodeCamp/boilerplate-linear-regression-health-costs-calculator/blob/master/fcc_predict_health_costs_with_regression.ipynb). +Le prime due celle di questo notebook importanto le librerie e i dati. -Dopo essere andato a quel collegamento, creare una copia del notebook nel tuo account o localmente. Una volta completato il progetto e superato il test (incluso a quel link), invia il link del progetto qui sotto. Se stai inviando un link di Google Colaboratory, assicurati di attivare la condivisione di link per "anyone with the link" +Assicurati di convertire dati categorici a numeri. Usa 80% dei dati come `train_dataset` e 20% dei dati come `test_dataset`. -Stiamo ancora sviluppando il contenuto didattico interattivo per il programma di machine learning. Per ora, puoi vedere le sfide video in questa certificazione. Potrebbe anche essere necessario cercare ulteriori risorse di apprendimento, in maniera simile a quello che faresti lavorando su un progetto del mondo reale. +`pop` la colonna "expenses" da questi dataset per creare dei nuovi dataset chiamati `train_labels` e `test_labels`. Usa queste etichette quando addestri il tuo modello. + +Crea un modello e addestralo con `train_dataset`. Esegui l'ultima cella del norebook per verificare il tuo modello. L'ultima cella userà il non visto `test_dataset` per verificare quanto bene il modello generalizzi. + +Per passare la sfida, `model.evaluate` deve restituire un errore medio assoluto inferiore a 3500. Questo significa che predice le spese mediche correttamente con un margine di $3500. + +L'ultima cella predirrà anche le spese usando `test_dataset` e graficando i risultati. # --hints-- diff --git a/curriculum/challenges/italian/11-machine-learning-with-python/machine-learning-with-python-projects/neural-network-sms-text-classifier.md b/curriculum/challenges/italian/11-machine-learning-with-python/machine-learning-with-python-projects/neural-network-sms-text-classifier.md index 308ae605982..9bcdeb4e8fc 100644 --- a/curriculum/challenges/italian/11-machine-learning-with-python/machine-learning-with-python-projects/neural-network-sms-text-classifier.md +++ b/curriculum/challenges/italian/11-machine-learning-with-python/machine-learning-with-python-projects/neural-network-sms-text-classifier.md @@ -8,14 +8,22 @@ dashedName: neural-network-sms-text-classifier # --description-- -In questa sfida, dovrai creare un modello di machine learning che classificherà i messaggi SMS come "ham" o "spam". Un messaggio "ham" è un normale messaggio inviato da un amico. Un messaggio "spam" è un annuncio o un messaggio inviato da un'azienda. - -Puoi accedere [alla descrizione completa del progetto e al codice iniziale su Google Colaboratory](https://colab.research.google.com/github/freeCodeCamp/boilerplate-neural-network-sms-text-classifier/blob/master/fcc_sms_text_classification.ipynb). +[Lavorerai su questo progetto con Google Colaboratory](https://colab.research.google.com/github/freeCodeCamp/boilerplate-neural-network-sms-text-classifier/blob/master/fcc_sms_text_classification.ipynb). Dopo essere andato a quel collegamento, crea una copia del notebook nel tuo account o localmente. Una volta completato il progetto e superato il test (incluso a quel link), invia il link del progetto qui sotto. Se stai inviando un link di Google Colaboratory, assicurati di attivare la condivisione di link per "anyone with the link" Stiamo ancora sviluppando il contenuto didattico interattivo per il programma di machine learning. Per ora, puoi vedere le sfide video in questa certificazione. Potrebbe anche essere necessario cercare ulteriori risorse di apprendimento, in maniera simile a quello che faresti lavorando su un progetto del mondo reale. +# --instructions-- + +In questa sfida, dovrai creare un modello di machine learning che classificherà i messaggi SMS come "ham" o "spam". Un messaggio "ham" è un normale messaggio inviato da un amico. Un messaggio "spam" è un annuncio o un messaggio inviato da un'azienda. + +Dovresti creare una funzione chiamata `predict_message` che prende un messaggio sotto forma di stringa e restituisce una lista. Il primo elemento della lista dovrebbe essere un numero tra zero e uno che inidica la probabilità di "ham" (0) o "spam" (1). Il secondo elemento nella lista dovrebbe essere la parola "ham" o "spam" a seconda di quale è più probabile. + +Per questa sfida, userai il dataset [SMS Spam Collection](http://www.dt.fee.unicamp.br/~tiago/smsspamcollection/). Il dataset è già stato diviso tra dati di allenamento e dati di test. + +Le prime due celle importano le librerie e i dati. L'ultima cella testa il tuo modello e funzione. Aggiungi il tuo codice tra queste due celle. + # --hints-- Dovrebbe superare tutti i test Python. diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md new file mode 100644 index 00000000000..7ce5ac121e6 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md @@ -0,0 +1,171 @@ +--- +id: 614202874ca576084fca625f +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Ogni ruolo `region` richiede un'etichetta visibile, che dovrebbe essere referenziata dall'attributo `aria-labelledby`. + +Dai agli elementi `section` i seguenti attributi `aria-labelledby`: + +- `student-info` +- `html-questions` +- `css-questions` + +Poi, all'interno di ogni elemento `section` annida un elemento `h2` con un `id` che corrisponde all'attributo `aria-labelledby`. Dai ad ogni `h2` un testo adatto. + +# --hints-- + +Dovresti dare al primo elemento `section` un `aria-labelledby` di `student-info`. + +```js +assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('aria-labelledby'), 'student-info'); +``` + +Dovresti dare al secondo elemento `section` un `aria-labelledby` di `html-questions`. + +```js +assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('aria-labelledby'), 'html-questions'); +``` + +Dovresti dare al terzo elemento `section` un `aria-labelledby` di `css-questions`. + +```js +assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('aria-labelledby'), 'css-questions'); +``` + +Dovresti annidare un elemento `h2` all'interno del primo elemento `section`. + +```js +assert.equal(document.querySelectorAll('section')?.[0]?.querySelectorAll('h2')?.length, 1); +``` + +Dovresti annidare un elemento `h2` dentro il secondo elemento `section`. + +```js +assert.equal(document.querySelectorAll('section')?.[1]?.querySelectorAll('h2')?.length, 1); +``` + +Dovresti annidare un elemento `h2` all'interno del terzo elemento `section`. + +```js +assert.equal(document.querySelectorAll('section')?.[2]?.querySelectorAll('h2')?.length, 1); +``` + +Dovresti dare al primo elemento `h2` un `id` di `student-info`. + +```js +assert.equal(document.querySelectorAll('h2')?.[0]?.id, 'student-info'); +``` + +Dovresti dare al tuo secondo elemento `h2` un `id` di `html-questions`. + +```js +assert.equal(document.querySelectorAll('h2')?.[1]?.id, 'html-questions'); +``` + +Dovresti dare al tuo terzo elemento `h2` un `id` di `css-questions`. + +```js +assert.equal(document.querySelectorAll('h2')?.[2]?.id, 'css-questions'); +``` + +Dovresti dare al primo elemento `h2` un testo adatto. _Suggerimento: avrei scelto `Student Info`_ + +```js +assert.isAtLeast(document.querySelectorAll('h2')?.[0]?.textContent?.length, 1); +``` + +Dovresti dare al secondo elemento `h2` un testo adatto. _Suggerimento: io avrei scelto `HTML`_ + +```js +assert.isAtLeast(document.querySelectorAll('h2')?.[1]?.textContent?.length, 1); +``` + +Dovresti dare al terzo elemento `h2` un testo adatto. _Suggerimento: io avrei scelto `CSS`_ + +```js +assert.isAtLeast(document.querySelectorAll('h2')?.[2]?.textContent?.length, 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+--fcc-editable-region-- +
+
+
+
+
+--fcc-editable-region-- +
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md new file mode 100644 index 00000000000..4a79468209b --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md @@ -0,0 +1,140 @@ +--- +id: 614206033d366c090ca7dd42 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Il carattere tipografico gioca un ruolo importante nell'accessibilità di una pagina. Alcuni font sono più facili da leggere rispetto ad altri, e questo è particolarmente vero su schermi a bassa risoluzione. + +Cambia il font per entrambi gli elementi `h1` e `h2` a `Verdana`, e usa un altro font web-safe nella famiglia sans-serif come fallback. + +Inoltre, aggiungi un `border-bottom` di `4px solid #dfdfe2` agli elementi `h2` per rendere distinte le sezioni. + +# --hints-- + +Dovresti utilizzare un selettore di più elementi per selezionare gli elementi `h1` e `h2`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('h1, h2') || gs('h2, h1')); +``` + +Dovresti impostare il primo valore della proprietà `font-family` su `Verdana`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const style = gs('h1, h2') || gs('h2, h1'); +assert.include(style?.fontFamily, 'Verdana'); +``` + +Dovresti impostare il secondo valore della proprietà `font-family` su un altro font sans-serif sicuro per il web. _Suggerimento: sceglierei Tahoma_. + +```js +// Acceptable fonts: Arial, sans-serif, Helvetica, Tahoma, Trebuchet MS. +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const style = gs('h1, h2') || gs('h2, h1'); +assert.match(style?.fontFamily, /(Tahoma)|(Arial)|(sans-serif)|(Helvetica)|(Trebuchet MS)/); +``` + +Dovresti usare un selettore di elementi `h2` per selezionare gli elementi `h2`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('h2')); +``` + +Dovresti assegnare a `h2` una proprietà `border-bottom` di `4px solid #dfdfe2`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.borderBottom, '4px solid rgb(223, 223, 226)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md new file mode 100644 index 00000000000..0e056f0073e --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md @@ -0,0 +1,173 @@ +--- +id: 6143610161323a081b249c19 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Completando il contenuto del quiz, sotto `#student-info`, aggiungi tre elementi `div` con una `class` di `info` >. + +Poi, all'interno di ogni `div` un elemento `label`, e un elemento `input`. + +# --hints-- + +Dovresti annidare tre elementi `div` sotto l'elemento `h2#student-info`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.length, 3); +``` + +Dovresti dare al primo `div` una `classe` di `info`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.className, 'info'); +``` + +Dovresti dare al secondo `div` una `classe` di `info`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.className, 'info'); +``` + +Dovresti dare al terzo `div` una `classe` di `info`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.className, 'info'); +``` + +Dovresti annidare un elemento `label` all'interno del primo `div`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('label')?.length, 1); +``` + +Dovresti annidare un elemento `input` dentro il primo `div`, dopo `label`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('input')?.length, 1); +assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelector('label + input')); +``` + +Dovresti annidare un elemento `label` dentro il secondo `div`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('label')?.length, 1); +``` + +Dovresti annidare un elemento `input` dentro il secondo `div`, dopo `label`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('input')?.length, 1); +assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelector('label + input')); +``` + +Dovresti annidare un elemento `label` dentro il terzo `div`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('label')?.length, 1); +``` + +Dovresti annidare un elemento `input` dentro il terzo `div`, dopo `label`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('input')?.length, 1); +assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelector('label + input')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+--fcc-editable-region-- +
+

Student Info

+ +
+--fcc-editable-region-- +
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md new file mode 100644 index 00000000000..57b9a0c4cb0 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md @@ -0,0 +1,127 @@ +--- +id: 6143920c8eafb00b735746ce +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Anche se hai aggiunto un `placeholder` al primo elemento `input` nella lezione precedente, in realtà non si tratta di una buona pratica per l'accessibilità; troppo spesso gli utenti confondono il testo segnaposto con un valore di input reale, cioè pensano che ci sia già un valore nell'input. + +Rimuovi il testo segnaposto dal primo elemento `input`, fare affidamento sull'etichetta `label` è la pratica migliore. + +# --hints-- + +Dovresti rimuovere l'attributo `placeholder` dal primo elemento `input`. + +```js +assert.isEmpty(document.querySelectorAll('input')?.[0]?.placeholder); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+--fcc-editable-region-- +
+ + +
+--fcc-editable-region-- +
+ + +
+
+ + +
+
+
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md new file mode 100644 index 00000000000..d39ad204685 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md @@ -0,0 +1,139 @@ +--- +id: 6143931a113bb80c45546287 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Probabilmente, `D.O.B.` non è abbastanza descrittivo. Ciò è particolarmente vero per gli utenti non vedenti. Un modo per aggirare un problema del genere, senza dover aggiungere testo visibile all'etichetta, è quello di aggiungere un testo che solo un lettore di schermo può leggere. + +Aggiungi un elemento `span` con una classe di `sr-only` al contenuto di testo corrente dell'elemento `label`. + +# --hints-- + +Dovresti aggiungere un elemento `span` dentro il terzo elemento `label`. + +```js +assert.exists(document.querySelector('.info:nth-of-type(3) > label > span')); +``` + +Dovresti dare all'elemento `span` una classe di `sr-only`. + +```js +assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.className, 'sr-only'); +``` + +Dovresti posizionare `span` dopo il contenuto del testo `D.O.B.`. + +```js +assert.match(document.querySelector('.info:nth-of-type(3) > label')?.innerHTML, /D\.O\.B\. + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+--fcc-editable-region-- +
+ + +
+--fcc-editable-region-- +
+
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md new file mode 100644 index 00000000000..254198a8e1e --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md @@ -0,0 +1,197 @@ +--- +id: 6143956ed76ed60e012faa51 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Il testo `.sr-only` è ancora visibile. C'è un modello comune per nascondere visivamente il testo dedicato ai lettori di schermo. + +Questo modello è quello di usare le seguenti proprietà CSS: + +```css +position: absolute; +width: 1px; +height: 1px; +padding: 0; +margin: -1px; +overflow: hidden; +clip: rect(0, 0, 0, 0); +white-space: nowrap; +border: 0; +``` + +Usa quanto sopra per definire la classe `sr-only`. + +# --hints-- + +Dovresti usare un selettore`.sr-only`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.sr-only')); +``` + +Dovresti dare a `.sr-only` una `position` di `absolute`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.position, 'absolute'); +``` + +Dovresti dare a `.sr-only` un `width` di `1px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.width, '1px'); +``` + +Dovresti dare a `.sr-only` un `height` di `1px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.height, '1px'); +``` + +Dovresti dare a `.sr-only` un `padding` di `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.padding, '0px'); +``` + +Dovresti dare a `.sr-only` un `margin` di `-1px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.margin, '-1px'); +``` + +Dovresti dare a `.sr-only` un `overflow` di `hidden`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.overflow, 'hidden'); +``` + +Dovresti dare a `.sr-only` un `clip` di `rect(0, 0, 0, 0)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.clip, 'rect(0px, 0px, 0px, 0px)'); +``` + +Dovresti dare a `.sr-only` un `white-space` di `nowrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.whiteSpace, 'nowrap'); +``` + +Dovresti dare a `.sr-only` un `border` di `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.borderWidth, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md new file mode 100644 index 00000000000..27d60c799d2 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md @@ -0,0 +1,217 @@ +--- +id: 6145f59029474c0d3dc1c8b8 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Come negli altri elementi `input` e `label`, collega l'elemento `textarea` al corrispondente elemento `label`, e dagli un attributo `name`. + +# --hints-- + +Dovresti dare all'elemento `label` un attributo `for`. + +```js +assert.notEmpty(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor); +``` + +Dovresti dare all'elemento `textarea` un `id` corrispondente all'attributo `for` dell'elemento `label`. + +```js +assert.equal(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor, document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.id); +``` + +Dovresti dare all'elemento `textarea` un attributo `name`. + +```js +assert.notEmpty(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.name); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+--fcc-editable-region-- +
+ +
+
+ +
+--fcc-editable-region-- +
+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md new file mode 100644 index 00000000000..ce99d262dec --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md @@ -0,0 +1,287 @@ +--- +id: 61487f703571b60899055cf9 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Imposta la larghezza degli elementi `section` al valore di `80%` del contenitore genitore. Poi, usa i margini per centrare gli elementi `section`, aggiungendo `10px` al margine inferiore. + +In più, assicurati che gli elementi `section` non possano essere più larghi di `600px`. + +# --hints-- + +Dovresti usare un selettore `section`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('section')); +``` + +Dovresti dare a `section` un `width` di `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.width, '80%'); +``` + +Dovresti dare a `section` un `margin-top` di `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginTop, '0px'); +``` + +Dovresti dare a `section` un `margin-right` di `auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginRight, 'auto'); +``` + +Dovresti dare a `section` un `margin-bottom` di `10px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginBottom, '10px'); +``` + +Dovresti dare a `section` un `margin-left` di `auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginLeft, 'auto'); +``` + +Dovresti dare a `section` un `max-width` di `600px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +--fcc-editable-region-- + + +--fcc-editable-region-- + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md new file mode 100644 index 00000000000..6f6eaf3294d --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md @@ -0,0 +1,286 @@ +--- +id: 61488ecfd05e290b5712e6da +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Per fare sembrare la prima sezione più in linea, seleziona gli elementi `input` dentro gli elementi `.info`, e imposta il loro `width` a `50%` e allinea a sinistra il loro testo. + +# --hints-- + +Dovresti usare il selettore `.info input` o `.info > input`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('.info input') || gs('.info > input')); +``` + +Dovresti dare agli elementi `input` un `width` di `50%`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.width; +const width = gs('.info input') ?? gs('.info > input'); +assert.equal(width, '50%'); +``` + +Dovresti dare agli elementi `input` un `text-align` di `left`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.textAlign; +const textAlign = gs('.info input') ?? gs('.info > input'); +assert.equal(textAlign, 'left'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md new file mode 100644 index 00000000000..9a20b7dbaf2 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md @@ -0,0 +1,356 @@ +--- +id: 6148e161ecec9511941f8833 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Adesso non possiamo leggere il testo. Seleziona l'elemento `footer` e l'elemento di ancoraggio al suo interno per impostare il colore del carattere a un colore di un adeguato rapporto di contrasto. + +# --hints-- + +Dovresti utilizzare il selettore `footer, footer a`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('footer, footer a') || gs('footer a, footer')); +``` + +Dovresti impostare il `color` su un valore con un rapporto di contrasto di almeno `7:1`. _Suggerimento: protresti usare `#dfdfe2`_ + +```js +function luminance(r, g, b) { + const a = [r, g, b].map((v) => { + v /= 255; + return v <= 0.03928 ? v / 12.92 : Math.pow( (v + 0.055) / 1.055, 2.4 ); + }); + return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; +} +function contrast(rgb1, rgb2) { + const lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]); + const lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]); + const brightest = Math.max(lum1, lum2); + const darkest = Math.min(lum1, lum2); + return (brightest + 0.05) + / (darkest + 0.05); +} +const backgroundColour = [42, 42, 64]; + +const foot = getComputedStyle(document.querySelector('footer'))?.color; +const a = getComputedStyle(document.querySelector('footer a'))?.color; + +const rgbFoot = foot?.match(/(\d+),\s(\d+),\s(\d+)/); +const rgbA = a?.match(/(\d+),\s(\d+),\s(\d+)/); +const footColour = [rgbFoot[1], rgbFoot[2], rgbFoot[3]]; +const aColour = [rgbA[1], rgbA[2], rgbA[3]]; +assert.isAtLeast(contrast(backgroundColour, footColour), 7); +assert.isAtLeast(contrast(backgroundColour, aColour), 7); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md new file mode 100644 index 00000000000..fe2f0a96ecb --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md @@ -0,0 +1,359 @@ +--- +id: 6148e28706b34912340fd042 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Centra orizzontalmente tutto il testo all'interno dell'elemento `address` e aggiungi un po' di padding. + +# --hints-- + +Dovresti usare il selettore di elemento `address`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('address')); +``` + +Dovresti dare ad `address` un `text-align` di `center`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('address')?.textAlign, 'center'); +``` + +Dovresti dare a `address` un `padding-top` di almeno `1px`. + +```js +assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-top')?.replace(/\D\D+/, '')), 1); +``` + +Dovresti dare a `address` un `padding-right` di almeno `1px`. + +```js +assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-right')?.replace(/\D\D+/, '')), 1); +``` + +Dovresti dare a `address` un `padding-bottom` di almeno `1px`. + +```js +assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-bottom')?.replace(/\D\D+/, '')), 1); +``` + +Dovresti dare a `address` un `padding-left` di almeno `1px`. + +```js +assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-left')?.replace(/\D\D+/, '')), 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +footer, +footer a { + color: #dfdfe2; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md new file mode 100644 index 00000000000..f80575038cc --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md @@ -0,0 +1,342 @@ +--- +id: 6148e335c1edd512d00e4691 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Fare clic sui collegamenti di navigazione dovrebbe muovere la vista alla sezione pertinente. Tuttavia, questo salto può essere disorientante per alcuni utenti. + +Seleziona tutti gli elementi e imposta il `scroll-behavior` su `smooth`. + +# --hints-- + +Dovresti usare il selettore `*`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +``` + +Dovresti dare a `*` un `scroll-behavior` di `smooth`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smooth'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +footer, +footer a { + color: #dfdfe2; +} + +address { + text-align: center; + padding: 0.3em; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md new file mode 100644 index 00000000000..95d69be9113 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md @@ -0,0 +1,350 @@ +--- +id: 6148e41c728f65138addf9cc +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +La maggior parte degli utenti preferisce impostare il `scroll-behaviour` a `smooth`. Tuttavia, alcuni utenti ritengono che questo sia troppo lento, e preferiscono che lo scorrimento avvenga istantaneamente. + +Esiste una regola multimediale per impostare CSS in base alle impostazioni del browser dell'utente. Questa regola media è chiamata `prefers-reduced-motion` e si aspetta uno dei seguenti valori: + +- `reduce` +- `no-preference` + +Avvolgi la regola appropriata all'interno di una regola media `prefers-reduced-motion` in modo che un `scroll-behavior` di `smooth` sia impostato solo se l'impostazione del browser dell'utente è `no-preference`. + +# --hints-- + +Dovresti avere una regola `@media (prefers-reduced-motion: no-preference)`. + +```js +assert.exists(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)')); +``` + +Dovresti annidare la regola esistente `*` all'interno della regola `@media`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)')?.find(x => x.selectorText === '*')?.style?.scrollBehavior, 'smooth'); +assert.notExists(new __helpers.CSSHelp(document).getStyle('*')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
  • +
  • + +
  • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +--fcc-editable-region-- +* { + scroll-behavior: smooth; +} +--fcc-editable-region-- + +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +footer, +footer a { + color: #dfdfe2; +} + +address { + text-align: center; + padding: 0.3em; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md index cbf663905c7..c37e362284b 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md @@ -43,7 +43,7 @@ assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(3) in

Registration Form

Please fill out this form with the required information

-
+
diff --git a/curriculum/dictionaries/italian/comments.json b/curriculum/dictionaries/italian/comments.json index bb36d791802..faa20038ca7 100644 --- a/curriculum/dictionaries/italian/comments.json +++ b/curriculum/dictionaries/italian/comments.json @@ -106,5 +106,6 @@ "es69h6": "Quando unisci due finestre in una finestra", "fho5t5": "Quando apri una nuova scheda alla fine", "00kcrm": "restituisce true", - "sxpg2a": "La tua mailbox, drive e altri siti di lavoro" + "sxpg2a": "La tua mailbox, drive e altri siti di lavoro", + "4143lf": "inizializza i pulsanti" }