chore(i18n,learn): processed translations (#45670)
This commit is contained in:
camperbot
GitHub
@@ -9,9 +9,9 @@ dashedName: align-elements-using-the-justify-content-property
|
||||
|
||||
# --description--
|
||||
|
||||
Certe volte gli oggetti flex all'interno di un contenitore flex non riempiono tutto lo spazio del contenitore. È comune voler dire a CSS di allineare e spaziare gli elementi flex in una certa maniera. Fortunatamente, la proprietà `justify-content` ha diverse opzioni per farlo. Ma prima, c'è un pò di terminologia importante da comprendere prima di rivedere queste opzioni.
|
||||
Certe volte gli oggetti flex all'interno di un contenitore flex non riempiono tutto lo spazio del contenitore. È comune voler dire a CSS di allineare e spaziare gli elementi flex in una certa maniera. Fortunatamente, la proprietà `justify-content` ha diverse opzioni per farlo. Ma prima, c'è un po' di terminologia importante da capire prima di rivedere queste opzioni.
|
||||
|
||||
[Ecco un'immagine molto utile che mostra una riga per illustrare i concetti qui sotto.](https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg)
|
||||
[Ecco una immagine utile da W3C che illustra i concetti sotto per un contenitore 'row' (riga) flex.](https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg)
|
||||
|
||||
Ricorda che l'impostazione di un contenitore flex come riga posiziona gli elementi flex fianco a fianco da sinistra a destra. Un contenitore flex impostato come colonna piazza gli oggetti flex in una pila verticale dall'alto verso il basso. Per ognuno, la direzione in cui sono disposti gli elementi flex è chiamata **asse principale**. Per una riga, si tratta di una linea orizzontale che taglia ogni elemento. E per una colonna, l'asse principale è una linea verticale attraverso gli elementi.
|
||||
|
||||
|
||||
@@ -25,11 +25,9 @@ const data = array[1];
|
||||
|
||||
`console.log(array[0])` scrive `50`, e `data` ha il valore `60`.
|
||||
|
||||
**Nota:** Non ci dovrebbero essere spazi tra il nome dell'array e le parentesi quadre, come in `array [0]`. Anche se JavaScript è in grado di elaborarlo correttamente, questo potrebbe confondere altri programmatori che leggono il tuo codice.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crea una variabile chiamata `myData` e impostala al primo valore di `myArray` usando la notazione a parentesi.
|
||||
Crea una variabile chiamata `myData` e imponila uguale al primo valore di `myArray` usando la notazione a parentesi quadre.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -51,7 +49,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Si dovrebbe accedere ai dati nella variabile `myArray` utilizzando la notazione a parentesi.
|
||||
Dovresti accedere ai dati nella variabile `myArray` usando la notazione a parentesi quadre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -15,7 +15,7 @@ Puoi trovare la lunghezza di un valore `String` scrivendo `.length` dopo la vari
|
||||
console.log("Alan Peter".length);
|
||||
```
|
||||
|
||||
Il valore `10` sarà visualizzato nella console.
|
||||
Il valore `10` sarà visualizzato nella console. Nota che è contato anche il carattere spazio tra "Alan" e "Peter".
|
||||
|
||||
Ad esempio, se avessimo creato una variabile `const firstName = "Ada"`, potremmo scoprire quanto è lunga la stringa `Ada` utilizzando la proprietà `firstName.length`.
|
||||
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 61329d52e5010e08d9b9d66b
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Un altro elemento `meta` importante per l'accessibilità e la SEO è la definizione `description`. Il valore dell'attributo `content` è usato dai motori di ricerca per dare una descrizione della tua pagina.
|
||||
|
||||
Aggiungi un elemento `meta` con l'attributo `name` impostato a `description`, e dagli un attributo `content` utile.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere un nuovo elemento `meta` a `head`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('meta').length, 3);
|
||||
```
|
||||
|
||||
Dovresti dare a `meta` un attributo `name` con valore di `description`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('meta[name="description"]'));
|
||||
```
|
||||
|
||||
Dovresti dare a `meta` un attributo `content`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelector('meta[name="description"]')?.content);
|
||||
```
|
||||
|
||||
Il valore dell'attributo `content` non deve superare una lunghezza di 165 caratteri. _Questa è la lunghezza massima della descrizione permessa da Google._
|
||||
|
||||
```js
|
||||
assert.isAtMost(document.querySelector('meta[name="description"]')?.content?.length, 165);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 6133acc353338c0bba9cb553
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Infine, nell'elemento `head`, l'elemento `title` è utile ai lettori di schermi per capire il contenuto di una pagina. Inoltre, è una parte importante della _SEO_.
|
||||
|
||||
Assegna alla tua pagina un `title` che sia descrittivo e conciso.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere un elemento `title` dentro `head`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('head > title'));
|
||||
```
|
||||
|
||||
Non dovresti avere un `title` più lungo di 60 caratteri.
|
||||
|
||||
```js
|
||||
assert.isAtMost(document.querySelector('head > title')?.textContent?.length, 60);
|
||||
```
|
||||
|
||||
Cerca di essere più descrittivo con il tuo elemento `title`. _Suggerimento: Almeno 15 caratteri_
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelector('head > title')?.textContent?.length, 15);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 6133d11ef548f51f876149e3
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La navigazione è una parte fondamentale dell'accessibilità, e i lettori dello schermo si affidano a te per dare struttura alla pagina. Ciò viene realizzato con elementi HTML semantici.
|
||||
|
||||
Aggiungi un elemento `header` e un elemento `main` alla tua pagina.
|
||||
|
||||
L'elemento `header` verrà utilizzato per introdurre la pagina, oltre a fornire un menù di navigazione.
|
||||
|
||||
L'elemento `main` conterrà il contenuto principale della tua pagina.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere un elemento `header` dentro `body`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('body > header'));
|
||||
```
|
||||
|
||||
Dovresti aggiungere un elemento `main` dentro `body`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('body > main'));
|
||||
```
|
||||
|
||||
L'elemento `header` dovrebbe precedere l'elemento `main`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('header + main'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 613e2546d0594208229ada50
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
All'interno dell'elemento `header`, provedi del contesto per la pagina annidando un elemento `img`, `h1`, e `nav`.
|
||||
|
||||
L'`img` dovrebbe puntare al link `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg` e avere un `id` di `logo`.
|
||||
|
||||
L'elemento `h1` dovrebbe contenere il testo `HTML/CSS Quiz`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere un elemento `img` all'elemento `header`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('header > img'));
|
||||
```
|
||||
|
||||
Dovresti aggiungere un elemento `h1` all'elemento `header`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('header > h1'));
|
||||
```
|
||||
|
||||
Dovresti aggiungere un elemento `nav` all'elemento `header`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('header > nav'));
|
||||
```
|
||||
|
||||
Dovresti posizionare gli elementi `img`, `h1` e `nav` in questo ordine.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('img + h1 + nav'));
|
||||
```
|
||||
|
||||
Dovresti dare all'elemento `img` un attributo `src` di `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('img')?.src, 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg');
|
||||
```
|
||||
|
||||
Dovresti dare all'elemento `img` un attributo `id` di `logo`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('img')?.id, 'logo');
|
||||
```
|
||||
|
||||
Dovresti dare all'elemento `h1` il testo `HTML/CSS Quiz`.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('h1')?.innerText?.toLowerCase(), 'html/css quiz');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<header>
|
||||
|
||||
</header>
|
||||
--fcc-editable-region--
|
||||
<main></main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
id: 613e275749ebd008e74bb62e
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Una proprietà utile di un _SVG_ (scalable vector graphics - grafica vettoriale scalabile) è che contiene un attributo `path` che permette di scalare l'immagine senza influenzare la risoluzione dell'immagine risultante.
|
||||
|
||||
Attualmente, l'elemento `img` sta assumendo la sua dimensione predefinita, che è troppo grande. Ridimensiona l'immagine correttamente usando il suo `id` come selettore e impostando `width` a `max(100px, 18vw)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare il selettore `#logo` per selezionare l'elemento `img`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('#logo'));
|
||||
```
|
||||
|
||||
Dovresti dare a `img` un `width` di `max(100px, 18vw)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav></nav>
|
||||
</header>
|
||||
<main></main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 61408e4ae3e35d08feb260eb
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Cambia il colore del font di `h1` a `#f1be32`, e imposta la dimensione del font a `min(5vw, 1.2em)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare il selettore di elemento `h1`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('h1'));
|
||||
```
|
||||
|
||||
Dovresti dare a `h1` un `color` di `#f1be32`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.color, 'rgb(241, 190, 50)');
|
||||
```
|
||||
|
||||
Dovresti dare a `h1` un `font-size` di `min(5vw, 1.2em)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.fontSize, 'min(5vw, 1.2em)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav></nav>
|
||||
</header>
|
||||
<main></main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,112 @@
|
||||
---
|
||||
id: 61408f155e798909b6908712
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per abilitare la navigazione sulla pagina, aggiungi un elenco puntato con i tre seguenti elementi:
|
||||
|
||||
- `INFO`
|
||||
- `HTML`
|
||||
- `CSS`
|
||||
|
||||
Il testo degli elementi della lista dovrebbe essere racchiuso in tag ancora.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti annidare un elemento `ul` dentro `nav`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('nav > ul')?.length, 1);
|
||||
```
|
||||
|
||||
Dovresti annidare tre elementi `li` dentro l'elemento `ul`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('nav > ul > li')?.length, 3);
|
||||
```
|
||||
|
||||
Dovresti annidare un elemento `a` dentro ogni elemento `li`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('nav > ul > li > a')?.length, 3);
|
||||
```
|
||||
|
||||
Dovresti dare al tuo primo elemento `a` il testo `INFO`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[0]?.textContent, 'INFO');
|
||||
```
|
||||
|
||||
Dovresti dare al tuo secondo elemento `a` il testo `HTML`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[1]?.textContent, 'HTML');
|
||||
```
|
||||
|
||||
Dovresti dare al tuo terzo elemento `a` un testo `CSS`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[2]?.textContent, 'CSS');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
--fcc-editable-region--
|
||||
<nav>
|
||||
|
||||
</nav>
|
||||
--fcc-editable-region--
|
||||
</header>
|
||||
<main></main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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);
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,125 @@
|
||||
---
|
||||
id: 61435e3c0679a306c20f1acc
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per poter navigare dentro la pagina, dai ad ogni elemento ancora un `href` corrispondente all'`id` degli elementi `h2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti dare al primo elemento `a` un `href` di `#student-info`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('href'), '#student-info');
|
||||
```
|
||||
|
||||
Dovresti dare al tuo secondo elemento `a` un `href` di `#html-questions`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('href'), '#html-questions');
|
||||
```
|
||||
|
||||
Dovresti dare al tuo terzo elemento `a` un `href` di `#css-questions`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('href'), '#css-questions');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
--fcc-editable-region--
|
||||
<ul>
|
||||
<li><a>INFO</a></li>
|
||||
<li><a>HTML</a></li>
|
||||
<li><a>CSS</a></li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,261 @@
|
||||
---
|
||||
id: 61487b77d4a37707073a64e5
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Quando la larghezza dello schermo è piccola, l'elemento `h1` non si mette su più righe come dovrebbe. Allinea al centro il testo di `h1`.
|
||||
|
||||
Poi, dai a `main` un padding che renda completamente visibile l'intestazione di sezione `Student Info`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti dare ad `h1` un `text-align` di `center`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign, 'center');
|
||||
```
|
||||
|
||||
Dovresti aggiungere un selettore `main` per selezionare l'elemento `main`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('main'));
|
||||
```
|
||||
|
||||
Dovresti dare a `main` un `padding-top` di almeno `25px`.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('main')?.paddingTop?.replace(/\D+/, '')), 25);
|
||||
```
|
||||
|
||||
Dovresti cambiare solo il valore di `padding-top`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingBottom);
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingLeft);
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
|
||||
}
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,275 @@
|
||||
---
|
||||
id: 61487da611a65307e78d2c20
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Su schermi piccoli, l'elenco puntato nella barra di navigazione va oltre il lato destro dello schermo.
|
||||
|
||||
Sistemalo usando _Flexbox_ per portare su più righe il contenuto di `ul`. Poi, imposta le seguenti proprietà CSS per allineare correttamente il testo:
|
||||
|
||||
```css
|
||||
align-items: center;
|
||||
padding-inline-start: 0;
|
||||
margin-block: 0;
|
||||
height: 100%;
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti dare a `ul` un `flex-wrap` di `wrap`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.flexWrap, 'wrap');
|
||||
```
|
||||
|
||||
Dovresti dare a `ul` un `align-items` di `center`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.alignItems, 'center');
|
||||
```
|
||||
|
||||
Dovresti dare a `ul` un `padding-inline-start` di `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.paddingInlineStart, '0px');
|
||||
```
|
||||
|
||||
Dovresti dare a `ul` un `margin-block` di `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.marginBlock, '0px');
|
||||
```
|
||||
|
||||
Dovresti dare a `ul` un `height` di `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,50 @@
|
||||
---
|
||||
id: 614ccc21ea91ef1736b9b578
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Benvenuto alla prima parte del Quiz sull'Accessibilità. Adesso che stai diventando uno sviluppatore esperto di HTML e CSS, abbiamo già scritto il boilerplate base.
|
||||
|
||||
Inizia questo viaggio nell'accessibilità fornendo un attributo `lang` al tuo elemento `html`. Questo aiuterà i lettori di schermo a identificare la lingua della pagina.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti dare all'elemento `html` un attributo `lang`. _Suggerimento: Puoi usare il valore `en` per l'inglese._
|
||||
|
||||
```js
|
||||
assert.match(code, /<html\s+lang=('|")[\w\-]+?\1\s*>/i);
|
||||
// TODO: This should/could be fixed in the builder.js
|
||||
// assert.notThrow(Intl.getCanonicalLocales(document.querySelector('html').lang));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
--fcc-editable-region--
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user