chore(i18n,learn): processed translations (#47114)
camperbot
GitHub
parent
88a9b8842d
commit
29607c1522
|
|
@ -27,63 +27,45 @@ console.log(myBreed);
|
|||
|
||||
字符串 `Doberman` 將會出現在控制檯中。
|
||||
|
||||
使用這一概念的另一種情況是：屬性的名字是在程序運行期間動態收集得到的。如下所示：
|
||||
|
||||
```js
|
||||
const someObj = {
|
||||
propName: "John"
|
||||
};
|
||||
|
||||
function propPrefix(str) {
|
||||
const s = "prop";
|
||||
return s + str;
|
||||
}
|
||||
|
||||
const someProp = propPrefix("Name");
|
||||
console.log(someObj[someProp]);
|
||||
```
|
||||
|
||||
`someProp` 的值將爲字符串 `propName`，並且字符串 `John` 將會出現在控制檯中。
|
||||
|
||||
注意，當使用變量名訪問屬性時，我們*沒有*使用引號包裹它，因爲我們正在使用的是變量的*值*，而不是變量的*名字*。
|
||||
請注意，我們在使用變量名訪問屬性時，*不要*使用引號引起來，因爲我們使用的是 *值*，而不是 *屬性名*。
|
||||
|
||||
# --instructions--
|
||||
|
||||
將變量 `playerNumber` 設置爲 `16`。 然後，使用該變量查找玩家的名字，並將其賦值給`player`。
|
||||
將 `playerNumber` 變量設置爲 `16`。 然後，使用該變量查找播放器的名稱並將其分配給 `player`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`playerNumber` 應該是一個數字
|
||||
`playerNumber` 應該是一個數字。
|
||||
|
||||
```js
|
||||
assert(typeof playerNumber === 'number');
|
||||
```
|
||||
|
||||
變量 `player` 應該是一個字符串
|
||||
變量 `player` 應該是一個字符串。
|
||||
|
||||
```js
|
||||
assert(typeof player === 'string');
|
||||
```
|
||||
|
||||
`player` 的值應該爲字符串 `Montana`
|
||||
`player` 的值應該是字符串 `Montana`。
|
||||
|
||||
```js
|
||||
assert(player === 'Montana');
|
||||
```
|
||||
|
||||
你應該使用方括號訪問 `testObj`
|
||||
你應該使用括號表示法來訪問 `testObj`。
|
||||
|
||||
```js
|
||||
assert(/testObj\s*?\[.*?\]/.test(code));
|
||||
```
|
||||
|
||||
你不應該直接將值 `Montana` 賦給變量 `player`。
|
||||
你不應將值 `Montana` 直接分配給變量 `player`。
|
||||
|
||||
```js
|
||||
assert(!code.match(/player\s*=\s*"|\'\s*Montana\s*"|\'\s*;/gi));
|
||||
```
|
||||
|
||||
你應該在你的方括號內使用變量 `playerNumber`。
|
||||
你應該在括號符號中使用變量 `playerNumber`。
|
||||
|
||||
```js
|
||||
assert(/testObj\s*?\[\s*playerNumber\s*\]/.test(code));
|
||||
|
|
|
|||
|
|
@ -66,6 +66,12 @@ assert.isUndefined(addTogether(2)([3]));
|
|||
assert.isUndefined(addTogether('2', 3));
|
||||
```
|
||||
|
||||
`addTogether(5, undefined)` 應該返回 `undefined`。
|
||||
|
||||
```js
|
||||
assert.isUndefined(addTogether(5, undefined));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
|
|
|||
|
|
@ -97,6 +97,15 @@ assert.deepEqual(
|
|||
);
|
||||
```
|
||||
|
||||
`whatIsInAName([{"a": 1, "b": 2, "c": 3, "d": 9999}], {"a": 1, "b": 9999, "c": 3})` 應該返回 `[]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
whatIsInAName([{ a: 1, b: 2, c: 3, d: 9999 }], { a: 1, b: 9999, c: 3 }),
|
||||
[]
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
|
|
|||
|
|
@ -27,63 +27,45 @@ console.log(myBreed);
|
|||
|
||||
字符串 `Doberman` 将会出现在控制台中。
|
||||
|
||||
使用这一概念的另一种情况是：属性的名字是在程序运行期间动态收集得到的。如下所示：
|
||||
|
||||
```js
|
||||
const someObj = {
|
||||
propName: "John"
|
||||
};
|
||||
|
||||
function propPrefix(str) {
|
||||
const s = "prop";
|
||||
return s + str;
|
||||
}
|
||||
|
||||
const someProp = propPrefix("Name");
|
||||
console.log(someObj[someProp]);
|
||||
```
|
||||
|
||||
`someProp` 的值将为字符串 `propName`，并且字符串 `John` 将会出现在控制台中。
|
||||
|
||||
注意，当使用变量名访问属性时，我们*没有*使用引号包裹它，因为我们正在使用的是变量的*值*，而不是变量的*名字*。
|
||||
请注意，我们在使用变量名访问属性时，*不要*使用引号引起来，因为我们使用的是 *值*，而不是 *属性名*。
|
||||
|
||||
# --instructions--
|
||||
|
||||
将变量 `playerNumber` 设置为 `16`。 然后，使用该变量查找玩家的名字，并将其赋值给`player`。
|
||||
将 `playerNumber` 变量设置为 `16`。 然后，使用该变量查找播放器的名称并将其分配给 `player`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`playerNumber` 应该是一个数字
|
||||
`playerNumber` 应该是一个数字。
|
||||
|
||||
```js
|
||||
assert(typeof playerNumber === 'number');
|
||||
```
|
||||
|
||||
变量 `player` 应该是一个字符串
|
||||
变量 `player` 应该是一个字符串。
|
||||
|
||||
```js
|
||||
assert(typeof player === 'string');
|
||||
```
|
||||
|
||||
`player` 的值应该为字符串 `Montana`
|
||||
`player` 的值应该是字符串 `Montana`。
|
||||
|
||||
```js
|
||||
assert(player === 'Montana');
|
||||
```
|
||||
|
||||
你应该使用方括号访问 `testObj`
|
||||
你应该使用括号表示法来访问 `testObj`。
|
||||
|
||||
```js
|
||||
assert(/testObj\s*?\[.*?\]/.test(code));
|
||||
```
|
||||
|
||||
你不应该直接将值 `Montana` 赋给变量 `player`。
|
||||
你不应将值 `Montana` 直接分配给变量 `player`。
|
||||
|
||||
```js
|
||||
assert(!code.match(/player\s*=\s*"|\'\s*Montana\s*"|\'\s*;/gi));
|
||||
```
|
||||
|
||||
你应该在你的方括号内使用变量 `playerNumber`。
|
||||
你应该在括号符号中使用变量 `playerNumber`。
|
||||
|
||||
```js
|
||||
assert(/testObj\s*?\[\s*playerNumber\s*\]/.test(code));
|
||||
|
|
|
|||
|
|
@ -66,6 +66,12 @@ assert.isUndefined(addTogether(2)([3]));
|
|||
assert.isUndefined(addTogether('2', 3));
|
||||
```
|
||||
|
||||
`addTogether(5, undefined)` 应该返回 `undefined`。
|
||||
|
||||
```js
|
||||
assert.isUndefined(addTogether(5, undefined));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
|
|
|||
|
|
@ -97,6 +97,15 @@ assert.deepEqual(
|
|||
);
|
||||
```
|
||||
|
||||
`whatIsInAName([{"a": 1, "b": 2, "c": 3, "d": 9999}], {"a": 1, "b": 9999, "c": 3})` 应该返回 `[]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
whatIsInAName([{ a: 1, b: 2, c: 3, d: 9999 }], { a: 1, b: 9999, c: 3 }),
|
||||
[]
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
|
|
|||
|
|
@ -66,6 +66,12 @@ assert.isUndefined(addTogether(2)([3]));
|
|||
assert.isUndefined(addTogether('2', 3));
|
||||
```
|
||||
|
||||
`addTogether(5, undefined)` dovrebbe restituire `undefined`.
|
||||
|
||||
```js
|
||||
assert.isUndefined(addTogether(5, undefined));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
|
|
|||
|
|
@ -14,31 +14,33 @@ Aggiungi un elemento `p` all'interno del `footer`. Poi, annida un elemento di an
|
|||
Non dovresti modificare l'elemento `footer` esistente.
|
||||
|
||||
```js
|
||||
assert($('footer').length === 1);
|
||||
assert(document.querySelectorAll("footer").length === 1);
|
||||
```
|
||||
|
||||
Il nuovo elemento `p` dovrebbe essere annidato nell'elemento `footer`.
|
||||
Il nuovo elemento `p` dovrebbe essere annidato nell'elemento `footer`. Dovresti aggiungere solo un elemento `p`.
|
||||
|
||||
```js
|
||||
assert($('footer').children('p').length === 1);
|
||||
assert(document.querySelectorAll("footer > p").length === 1);
|
||||
assert(document.querySelectorAll("footer p").length === 1);
|
||||
```
|
||||
|
||||
Il nuovo elemento `a` dovrebbe essere annidato nell'elemento `p`.
|
||||
Il nuovo elemento `a` dovrebbe essere annidato nel nuovo elemento `p`. Dovresti aggiungere solo un elemento `a`.
|
||||
|
||||
```js
|
||||
assert($('footer').children('p').children('a').length === 1);
|
||||
assert(document.querySelectorAll("footer > p > a").length === 1);
|
||||
assert(document.querySelectorAll("footer a").length === 1);
|
||||
```
|
||||
|
||||
Il nuovo elemento `a` dovrebbe avere il testo `Visit our website`.
|
||||
|
||||
```js
|
||||
assert($('footer').find('a')[0].innerText.match(/Visit our website/i));
|
||||
assert(document.querySelector("footer > p > a")?.innerText === "Visit our website");
|
||||
```
|
||||
|
||||
Il nuovo elemento `a` dovrebbe contenere il link `https://www.freecodecamp.org`. Ricorda che gli elementi `a` utilizzano l'attributo `href` per creare un link.
|
||||
|
||||
```js
|
||||
assert($('footer').find('a').attr('href') === 'https://www.freecodecamp.org');
|
||||
assert(document.querySelector("footer > p > a")?.href === "https://www.freecodecamp.org/");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
|
@ -97,6 +99,7 @@ assert($('footer').find('a').attr('href') === 'https://www.freecodecamp.org');
|
|||
</main>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ dashedName: step-1
|
|||
|
||||
Inizia con il testo HTML standard. Aggiungi la dichiarazione `DOCTYPE` e gli elementi `html`, `head` e `body`.
|
||||
|
||||
Aggiungi l'attributo `lang` al tag di apertura `<html>` impostando il suo valore su `en`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il codice dovrebbe contenere il riferimento `DOCTYPE`.
|
||||
|
|
@ -23,7 +25,7 @@ Dovresti includere uno spazio dopo il riferimento `DOCTYPE`.
|
|||
assert(code.match(/<!DOCTYPE\s+/gi));
|
||||
```
|
||||
|
||||
Dovresti definire il tipo di documento come `html`.
|
||||
Dovresti definire il tipo del documento come `html`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html/gi));
|
||||
|
|
@ -38,7 +40,7 @@ assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
|
|||
L'elemento `html` dovrebbe avere un tag di apertura.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s*>/gi));
|
||||
assert(code.match(/<html\s*>|<html\s+lang\s*=\s*('|")en\1\s*>/gi));
|
||||
```
|
||||
|
||||
L'elemento `html` dovrebbe avere un tag di chiusura.
|
||||
|
|
@ -47,7 +49,13 @@ L'elemento `html` dovrebbe avere un tag di chiusura.
|
|||
assert(code.match(/<\/html\s*>/));
|
||||
```
|
||||
|
||||
La dichiarazione `DOCTYPE` dovrebbe essere all'inizio del tuo HTML.
|
||||
Il tag di apertura `<html>` dovrebbe avere l'attributo `lang` con il valore `en`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/));
|
||||
```
|
||||
|
||||
La dichiarazione `DOCTYPE` dovrebbe essere all'inizio dell'HTML.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
|
||||
|
|
@ -83,13 +91,13 @@ Gli elementi `head` e `body` dovrebbero essere fratelli.
|
|||
assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
|
||||
```
|
||||
|
||||
L'elemento `head` dovrebbe essere all'interno dell'elemento `html`.
|
||||
L'elemento `head` dovrebbe essere dentro l'elemento `html`.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
|
||||
```
|
||||
|
||||
L' elemento `body` dovrebbe essere all'interno dell'elemento `html`.
|
||||
L'elemento `body` dovrebbe essere dentro l''elemento `html`.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
|
||||
|
|
|
|||
|
|
@ -7,34 +7,34 @@ dashedName: step-4
|
|||
|
||||
# --description--
|
||||
|
||||
All'interno dell'elemento `body`, crea un `div` con l'attributo `class` impostato su `header`.
|
||||
Aggiungi un elemento `header` all'interno dell'elemento `body` e assegnagli la classe `header`.
|
||||
|
||||
All'interno dell'elemento `.header` annida un elemento `h1` con il testo `CSS FLEXBOX PHOTO GALLERY`.
|
||||
All'interno dell'`header`, crea un `h1` con il testo `css flexbox photo gallery`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un elemento `div` all'interno dell'elemento `body`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('body')?.querySelector('div'))
|
||||
assert.exists(document.querySelector('body')?.querySelector('header'));
|
||||
```
|
||||
|
||||
L'elemento `div` dovrebbe avere l'attributo `class` con il valore `header`.
|
||||
L'elemento `header` dovrebbe avere un attributo `class` con il valore `header`.
|
||||
|
||||
```js
|
||||
assert(document?.querySelector('body')?.querySelector('div')?.classList?.contains('header'))
|
||||
assert(document?.querySelector('body')?.querySelector('header')?.classList?.contains('header'));
|
||||
```
|
||||
|
||||
L'elemento `.header` dovrebbe avere un elemento `h1`.
|
||||
L'elemento `header` dovrebbe avere un elemento `h1` al suo interno.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.header')?.querySelector('h1'));
|
||||
```
|
||||
|
||||
L'elemento `h1` dovrebbe contenere il testo `CSS FLEXBOX PHOTO GALLERY`. Ricorda che le maiuscole contano.
|
||||
L'elemento `h1` dovrebbe avere il testo `css flexbox photo gallery` al suo interno.
|
||||
|
||||
```js
|
||||
assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'CSS FLEXBOX PHOTO GALLERY')
|
||||
assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'css flexbox photo gallery');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
|
@ -45,7 +45,7 @@ assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'C
|
|||
--fcc-editable-region--
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<head lang="en">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Photo Gallery</title>
|
||||
|
|
|
|||
|
|
@ -7,34 +7,34 @@ dashedName: step-5
|
|||
|
||||
# --description--
|
||||
|
||||
Al di sotto dell'elemento `.header`, crea un nuovo elemento `div` con un attributo `id` del valore di `gallery`.
|
||||
Al di sotto dell'`header`, crea un nuovo elemento `div` e assegnagli la classe `gallery`.
|
||||
|
||||
In quest'elemento `#gallery`, crea dieci elementi `img`.
|
||||
In quest'elemento `.gallery`, crea nove elementi `img`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare un secondo elemento `div` nell'elemento `body`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('body')?.querySelectorAll('div')?.length === 2);
|
||||
assert(document.querySelector('body')?.querySelectorAll('div')?.length >= 1);
|
||||
```
|
||||
|
||||
Il nuovo elemento `div` dovrebbe avere un attributo `class` con il valore `gallery`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('body')?.querySelector('.gallery'));
|
||||
```
|
||||
|
||||
Il nuovo elemento `div` dovrebbe trovarsi dopo l'elemento `.header`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('body')?.querySelectorAll('div')?.[0]?.classList?.contains('header'));
|
||||
assert(document.querySelector('header')?.nextElementSibling?.classList?.contains('gallery'));
|
||||
```
|
||||
|
||||
Il nuovo elemento `div` dovrebbe avere un `id` con il valore `gallery`.
|
||||
L'elemento `.gallery` dovrebbe contenere nove elementi `img`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('body')?.querySelectorAll('div')?.[1]?.id === 'gallery');
|
||||
```
|
||||
|
||||
L'elemento `#gallery` dovrebbe contenere dieci elementi `img`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#gallery')?.querySelectorAll('img')?.length === 10);
|
||||
assert(document.querySelector('.gallery')?.querySelectorAll('img')?.length === 9);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
|
@ -44,7 +44,7 @@ assert(document.querySelector('#gallery')?.querySelectorAll('img')?.length === 1
|
|||
```html
|
||||
--fcc-editable-region--
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -52,9 +52,9 @@ assert(document.querySelector('#gallery')?.querySelectorAll('img')?.length === 1
|
|||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<header class="header">
|
||||
<h1>css flexbox photo gallery</h1>
|
||||
</header>
|
||||
</body>
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
|
|
|
|||
|
|
@ -7,9 +7,7 @@ dashedName: step-6
|
|||
|
||||
# --description--
|
||||
|
||||
Adesso, dovresti assegnare a ogni elemento `img` un attributo `src`. Stai per utilizzare il formato `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/#.jpg`, sostituendo `#` con l'ordine dell'elemento `img`.
|
||||
|
||||
Quindi il primo elemento `img` avrà `1.jpg`, il secondo `2.jpg` e così via.
|
||||
Dai a ogni `img` un attributo `src` a seconda dell'ordine nel documento. Il primo elemento `img` dovrebbe avere un `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg`. Gli altri dovrebbero avere lo stesso valore, tranne per il numero `1`, da sostituire con il numero dell'elemento `img` nel documento.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
|
@ -20,73 +18,67 @@ const images = [...document.querySelectorAll('img')];
|
|||
assert(images.every(image => image.getAttribute('src')));
|
||||
```
|
||||
|
||||
Il primo elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg`.
|
||||
Il primo elemento `img` dovrebbe avere `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg` impostato come valore dell'attributo `src`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg');
|
||||
```
|
||||
|
||||
Il secondo elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg`.
|
||||
Il secondo elemento `img` dovrebbe avere `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg` impostato come valore dell'attributo `src`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg');
|
||||
```
|
||||
|
||||
Il terzo elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg`.
|
||||
Il terzo elemento `img` dovrebbe avere `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg` impostato come valore dell'attributo `src`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg');
|
||||
```
|
||||
|
||||
Il quarto elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg`.
|
||||
Il quarto elemento `img` dovrebbe avere `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg` impostato come valore dell'attributo `src`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[3]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg');
|
||||
```
|
||||
|
||||
Il quinto elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg`.
|
||||
Il quinto elemento `img` dovrebbe avere `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg` impostato come valore dell'attributo `src`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[4]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg');
|
||||
```
|
||||
|
||||
Il sesto elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg`.
|
||||
Il sesto elemento `img` dovrebbe avere `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg` impostato come valore dell'attributo `src`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[5]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg');
|
||||
```
|
||||
|
||||
Il settimo elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg`.
|
||||
Il settimo elemento `img` dovrebbe avere `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg` impostato come valore dell'attributo `src`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[6]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg');
|
||||
```
|
||||
|
||||
L'ottavo elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg`.
|
||||
L'ottavo elemento `img` dovrebbe avere `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg` impostato come valore dell'attributo `src`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[7]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg');
|
||||
```
|
||||
|
||||
Il nono elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg`.
|
||||
Il nono elemento `img` dovrebbe avere `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg` impostato come valore dell'attributo `src`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[8]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg');
|
||||
```
|
||||
|
||||
Il decimo elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[9]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -94,21 +86,20 @@ assert(document.querySelectorAll('img')?.[9]?.getAttribute('src') === 'https://c
|
|||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<header class="header">
|
||||
<h1>css flexbox photo gallery</h1>
|
||||
</header>
|
||||
--fcc-editable-region--
|
||||
<div id="gallery">
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
<div class="gallery">
|
||||
<img>
|
||||
<img>
|
||||
<img>
|
||||
<img>
|
||||
<img>
|
||||
<img>
|
||||
<img>
|
||||
<img>
|
||||
<img>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box'
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -37,20 +37,19 @@ assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box'
|
|||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
<header class="header">
|
||||
<h1>css flexbox photo gallery</h1>
|
||||
</header>
|
||||
<div class="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -7,26 +7,35 @@ dashedName: step-9
|
|||
|
||||
# --description--
|
||||
|
||||
Rimuovi il margine dall'elemento `body`, imposta il carattere su `Arial` e il colore di sfondo su `#EBE7E7`.
|
||||
Rimuovi il margine dall'elemento `body`, imposta `font-family` su `sans-serif` e dagli un `background-color` con il valore `#f5f6f7`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore `body`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('body'))
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
|
||||
```
|
||||
|
||||
Il selettore `body` dovrebbe avere una proprietà `font-family` con il valore `Arial`.
|
||||
Il selettore `p` dovrebbe avere una `margin` con il valore `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'Arial');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginBottom, '0px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px');
|
||||
```
|
||||
|
||||
Il selettore `body` dovrebbe avere una proprietà `background-color` con il valore `#EBE7E7`.
|
||||
Il selettore `body` dovrebbe avere una proprietà `font-family` con il valore `sans-serif`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(235, 231, 231)');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
|
||||
```
|
||||
|
||||
Il selettore `body` dovrebbe avere una proprietà `background-color` con il valore `#f5f6f7`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
|
@ -35,7 +44,7 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rg
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -43,20 +52,19 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rg
|
|||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
<header class="header">
|
||||
<h1>css flexbox photo gallery</h1>
|
||||
</header>
|
||||
<div class="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -71,8 +79,9 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rg
|
|||
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -7,7 +7,12 @@ dashedName: step-10
|
|||
|
||||
# --description--
|
||||
|
||||
Allinea il testo dell'elemento `.header` al centro, assegnagli un padding di `32px` su tutti i lati e imposta lo sfondo su `#E0DDDD`.
|
||||
Allinea al centro il testo di `.header`. Rendi il testo maiuscolo con la proprietà `text-transform` impostata su `uppercase`.
|
||||
|
||||
Dagli un padding di `32px` su tutti i lati. Imposta lo sfondo sul colore `#0a0a23` e il testo sul colore `#fff`.
|
||||
|
||||
Aggiungi un `border-bottom` con il valore `4px solid #fdb347`.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
|
|
@ -23,16 +28,35 @@ Il selettore `.header` dovrebbe avere una proprietà `text-align` con il valore
|
|||
assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center');
|
||||
```
|
||||
|
||||
Il selettore `.header` dovrebbe avere una proprietà `text-transform` con il valore `uppercase`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform === 'uppercase');
|
||||
```
|
||||
|
||||
Il selettore `.header` dovrebbe avere una proprietà `padding` con il valore `32px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px');
|
||||
```
|
||||
|
||||
Il selettore `.header` dovrebbe avere una proprietà `background-color` con il valore `#E0DDDD`.
|
||||
Il selettore `.header` dovrebbe avere una proprietà `background-color` con il valore `#0a0a23`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(224, 221, 221)');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(10, 10, 35)');
|
||||
```
|
||||
|
||||
Il selettore `.header` dovrebbe avere una proprietà `color` con il valore `#fff`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.header')?.color === 'rgb(255, 255, 255)');
|
||||
```
|
||||
|
||||
Il selettore `.header` dovrebbe avere una proprietà `border-bottom` con il valore `4px solid #fdb347`.
|
||||
|
||||
```js
|
||||
console.log(new __helpers.CSSHelp(document).getStyle('.header'))
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.header')?.borderBottom === '4px solid rgb(253, 179, 71)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
|
@ -41,7 +65,7 @@ assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor ===
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -49,20 +73,19 @@ assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor ===
|
|||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
<header class="header">
|
||||
<h1>css flexbox photo gallery</h1>
|
||||
</header>
|
||||
<div class="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -75,16 +98,17 @@ assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor ===
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -7,22 +7,24 @@ dashedName: step-11
|
|||
|
||||
# --description--
|
||||
|
||||
Flexbox è un approccio monodimensionale per il layout CSS che si concentra sul flusso dei contenuti. Offre la possibilità di controllare il modo in cui gli oggetti sono distanziati e allineati all'interno di un contenitore.
|
||||
Flexbox è un layout CSS monodimensionale che può controllare il modo in cui gli oggetti sono distanziati e allineati all'interno di un contenitore.
|
||||
|
||||
Per utilizzare Flexbox su un elemento, gli si assegna una proprietà `display` con il valore `flex`. Crea un selettore `#gallery` e assegnagli questa proprietà.
|
||||
Per usarlo, dai a un elemento la proprietà `display` con il valore `flex`. In questo modo, diventerà un <em>contenitore flex</em>. Qualsiasi figlio diretto del contenitore flex viene detto <em>elemento flex</em>.
|
||||
|
||||
Crea un selettore `.gallery` e rendilo un contenitore flex.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore `#gallery`.
|
||||
Dovresti avere un selettore `.gallery`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery'));
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery'));
|
||||
```
|
||||
|
||||
Il selettore `#gallery` dovrebbe avere una proprietà `display` con il valore `flex`.
|
||||
Il selettore `.gallery` dovrebbe avere una proprietà `display` con il valore `flex`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.display === 'flex');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.display === 'flex');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
|
@ -31,7 +33,7 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.display === 'flex')
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -39,20 +41,19 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.display === 'flex')
|
|||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
<header class="header">
|
||||
<h1>css flexbox photo gallery</h1>
|
||||
</header>
|
||||
<div class="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -65,22 +66,26 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.display === 'flex')
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -7,16 +7,25 @@ dashedName: step-12
|
|||
|
||||
# --description--
|
||||
|
||||
Puoi pensare a Flexbox come se avessi due assi, l'asse principale e l'asse trasversale. L'asse principale è determinato dalla proprietà `flex-direction`. Se `flex-direction` è impostata su `row` o `row-reverse`, l'asse principale è orizzontale. Se `flex-direction` è impostata su `column` o `column-reverse`, l'asse principale è verticale.
|
||||
Flexbox ha un asse principale e un asse trasversale. L'asse principale è definito dalla proprietà `flex-direction`, che può avere quattro possibili valori:
|
||||
|
||||
Assegna al tuo selettore `#gallery` una proprietà `flex-direction` con il valore `row`.
|
||||
- `row` (default): asse orizzontale con gli elementi flex da sinistra a destra
|
||||
- `row-reverse`: asse orizzontale con gli elementi flex da destra a sinistra
|
||||
- `column`: asse verticale con gli elementi flex dall'alto verso il basso
|
||||
- `column-reverse`: asse verticale con gli elementi flex dal basso verso l'alto
|
||||
|
||||
**Nota**: gli assi e le direzioni saranno diversi in base alla direzione del testo. I valori mostrati sono per un testo direzionato da sinistra a destra.
|
||||
|
||||
Prova i diversi valori per vedere il loro effetto sul layout.
|
||||
|
||||
Quando hai finito, imposta esplicitamente `flex-direction` su `row` per l'elemento `.gallery`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `#gallery` dovrebbe avere una proprietà `flex-direction` con il valore `row`.
|
||||
Il selettore `.gallery` dovrebbe avere una proprietà `flex-direction` con il valore `row`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexDirection === 'row');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexDirection === 'row');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
|
@ -25,7 +34,7 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexDirection === '
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -33,20 +42,19 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexDirection === '
|
|||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
<header class="header">
|
||||
<h1>css flexbox photo gallery</h1>
|
||||
</header>
|
||||
<div class="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -59,24 +67,28 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexDirection === '
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery {
|
||||
.gallery {
|
||||
display: flex;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -7,18 +7,18 @@ dashedName: step-13
|
|||
|
||||
# --description--
|
||||
|
||||
Potresti aver notato che le immagini si sono tutte spostate nella stessa riga.
|
||||
|
||||
La proprietà `flex-wrap` determina come dovrebbero comportarsi gli oggetti quando il contenitore flex è troppo piccolo. Impostare questa proprietà su `wrap` permetterà agli oggetti di proseguire nella riga/colonna successiva (a seconda dell'asse principale), mentre `nowrap` impedirà agli oggetti essere posizionati in nuove righe o colonne. Con il valore `nowrap`, gli oggetti possono essere rimpiccioliti per adattarsi o debordare.
|
||||
La proprietà `flex-wrap` determina come dovrebbero comportarsi gli oggetti quando il contenitore flex è troppo piccolo. Impostare il suo valore su `wrap` permetterà agli elementi di proseguire nella riga o colonna successiva. `nowrap` (default) impedirà agli elementi di proseguire nella riga o colonna successiva e li rimpicciolirà se necessario.
|
||||
|
||||
Assegna al selettore `#gallery` una proprietà `flex-wrap` con il valore `wrap`. Dovresti vedere le tue immagini prendere un layout a quattro colonne. Questo perché hai impostato la loro proprietà `width` al `25%` in uno step precedente.
|
||||
|
||||
Fai in modo che gli elementi flex vadano a capo nella riga successiva quando finisce lo spazio.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `#gallery` dovrebbe avere una proprietà `flex-wrap` con il valore `wrap`.
|
||||
Il selettore `.gallery` dovrebbe avere una proprietà `flex-wrap` con il valore `wrap`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexWrap === 'wrap');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexWrap === 'wrap');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
|
@ -27,7 +27,7 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexWrap === 'wrap'
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -35,20 +35,19 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexWrap === 'wrap'
|
|||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
<header class="header">
|
||||
<h1>css flexbox photo gallery</h1>
|
||||
</header>
|
||||
<div class="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -61,25 +60,29 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexWrap === 'wrap'
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery {
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@ dashedName: step-14
|
|||
|
||||
La proprietà `justify-content` determina come sono posizionati gli oggetti all'interno di un contenitore flex lungo l'asse principale, influenzando la loro posizione e lo spazio intorno a loro.
|
||||
|
||||
Assegna al selettore `#gallery` una proprietà `justify-content` con il valore `center`.
|
||||
Assegna al selettore `.gallery` una proprietà `justify-content` con il valore `center`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `#gallery` dovrebbe avere una proprietà `justify-content` con il valore `center`.
|
||||
Il selettore `.gallery` dovrebbe avere una proprietà `justify-content` con il valore `center`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.justifyContent === 'center');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.justifyContent === 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
|
@ -25,7 +25,7 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.justifyContent ===
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -33,20 +33,19 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.justifyContent ===
|
|||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
<header class="header">
|
||||
<h1>css flexbox photo gallery</h1>
|
||||
</header>
|
||||
<div class="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -59,26 +58,30 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.justifyContent ===
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery {
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@ dashedName: step-15
|
|||
|
||||
La proprietà `align-items` posiziona il contenuto flex lungo l'asse trasversale. In questo caso, con la proprietà `flex-direction` impostata su `row`, l'asse trasversale sarebbe quello verticale.
|
||||
|
||||
Per centrare verticalmente le immagini, assegna al selettore `#gallery` una proprietà `align-items` con il valore `center`.
|
||||
Per centrare verticalmente le immagini, assegna al selettore `.gallery` una proprietà `align-items` con il valore `center`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `#gallery` dovrebbe avere una proprietà `align-items` con il valore `center`.
|
||||
Il selettore `.gallery` dovrebbe avere una proprietà `align-items` con il valore `center`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.alignItems === 'center');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.alignItems === 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
|
@ -25,7 +25,7 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.alignItems === 'cen
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -33,20 +33,19 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.alignItems === 'cen
|
|||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
<header class="header">
|
||||
<h1>css flexbox photo gallery</h1>
|
||||
</header>
|
||||
<div class="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -59,18 +58,21 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.alignItems === 'cen
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery {
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -78,8 +80,9 @@ body {
|
|||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -7,17 +7,31 @@ dashedName: step-16
|
|||
|
||||
# --description--
|
||||
|
||||
Assegna al selettore `#gallery` una proprietà `padding` con il valore `0 4px`.
|
||||
Dai al selettore `.gallery` una proprietà `padding` impostata su `20px 10px` per creare spazio intorno al contenitore.
|
||||
|
||||
Poi, imposta `max-width` su `1400px` e aggiungi un `margin` con il valore `0 auto` per centrarlo.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `#gallery` dovrebbe avere una proprietà `padding` con il valore `0 4px`.
|
||||
Il selettore `.gallery` dovrebbe avere una proprietà `padding` con il valore `20px 10px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingTop, '0px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingBottom, '0px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingLeft, '4px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingRight, '4px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingTop, '20px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingBottom, '20px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingLeft, '10px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingRight, '10px');
|
||||
```
|
||||
|
||||
Il selettore `.gallery` dovrebbe avere una proprietà `max-width` con il valore `1400px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.maxWidth === '1400px');
|
||||
```
|
||||
|
||||
L'elemento `.gallery` dovrebbe essere centrato usando un `margin` con il valore `0 auto`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.gallery').cssText, 'margin: 0px auto');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
|
@ -26,7 +40,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingRight,
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -34,20 +48,19 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingRight,
|
|||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
<header class="header">
|
||||
<h1>css flexbox photo gallery</h1>
|
||||
</header>
|
||||
<div class="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -60,18 +73,21 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingRight,
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery {
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -80,8 +96,9 @@ body {
|
|||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@ dashedName: step-17
|
|||
|
||||
Nota come alcune delle immagini sono diventate distorte. Questo perché le immagini hanno diverse proporzioni. Piuttosto che impostare individualmente le proporzioni delle immagini, puoi utilizzare la proprietà `object-fit` per determinare come dovrebbero comportarsi.
|
||||
|
||||
Assegna al selettore `#gallery img` la proprietà `object-fit` con il valore `cover`. Questo dirà all'immagine di riempire il contenitore `img` mantenendo le proporzioni.
|
||||
Assegna al selettore `.gallery img` la proprietà `object-fit` con il valore `cover`. Questo dirà all'immagine di riempire il contenitore `img` mantenendo le proporzioni.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `#gallery img` dovrebbe avere una proprietà `object-fit` con il valore `cover`.
|
||||
Il selettore `.gallery img` dovrebbe avere una proprietà `object-fit` con il valore `cover`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.objectFit === 'cover');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.objectFit === 'cover');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
|
@ -25,7 +25,7 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.objectFit === '
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -33,20 +33,19 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.objectFit === '
|
|||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
<header class="header">
|
||||
<h1>css flexbox photo gallery</h1>
|
||||
</header>
|
||||
<div class="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -59,28 +58,34 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.objectFit === '
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
#gallery {
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 4px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
|
|
|||
|
|
@ -9,20 +9,16 @@ dashedName: step-18
|
|||
|
||||
Le immagini hanno bisogno di uno spazio tra di loro.
|
||||
|
||||
Assegna al selettore `#gallery img` una proprietà `margin-top` di `8px` e una proprietà `padding` di `0 4px`.
|
||||
La proprietà CSS shorthand `gap` imposta lo spazio tra righe e colonne. La proprietà `gap` e le sue sotto-proprietà `row-gap` e `column-gap` forniscono questa funzionalità per i layout flex, grid e multi-colonna. La proprietà si applica all'elemento contenitore.
|
||||
|
||||
Dai al contenitore flex `.gallery` una proprietà `gap` con il valore `16px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `#gallery img` dovrebbe avere una proprietà `margin-top` con il valore `8px`.
|
||||
Il selettore `.gallery` dovrebbe avere una proprietà `gap` con il valore `16px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.marginTop === '8px');
|
||||
```
|
||||
|
||||
Il selettore `#gallery img` dovrebbe avere una proprietà `padding` con il valore `0 4px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.padding === '0px 4px');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.gap === '16px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
|
@ -31,7 +27,7 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.padding === '0p
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -39,20 +35,19 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.padding === '0p
|
|||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
<header class="header">
|
||||
<h1>css flexbox photo gallery</h1>
|
||||
</header>
|
||||
<div class="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -65,30 +60,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.padding === '0p
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
#gallery {
|
||||
--fcc-editable-region--
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 4px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
|
|
|||
|
|
@ -7,14 +7,14 @@ dashedName: step-19
|
|||
|
||||
# --description--
|
||||
|
||||
Smussa leggermente le immagini dando al selettore `#gallery img` una proprietà `border-radius` di `10px`.
|
||||
Smussa leggermente le immagini dando al selettore `.gallery img` una proprietà `border-radius` di `10px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `#gallery img` dovrebbe avere una proprietà `border-radius` con il valore `10px`.
|
||||
Il selettore `.gallery img` dovrebbe avere una proprietà `border-radius` con il valore `10px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.borderRadius === '10px');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.borderRadius === '10px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
|
@ -23,7 +23,7 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.borderRadius ==
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -31,20 +31,19 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.borderRadius ==
|
|||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
<header class="header">
|
||||
<h1>css flexbox photo gallery</h1>
|
||||
</header>
|
||||
<div class="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -57,32 +56,37 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.borderRadius ==
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
#gallery {
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 4px;
|
||||
gap: 16px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
margin-top: 8px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
|
|
|||
|
|
@ -7,35 +7,31 @@ dashedName: step-20
|
|||
|
||||
# --description--
|
||||
|
||||
Crea una media query per schermi di larghezza inferiore a `800px`. Al suo interno, crea una regola `#gallery img` e imposta la proprietà `width` sul `50%`. In questo modo, convertirai la tua galleria in un layout a due colonne.
|
||||
Lo pseudo-elemento `::after` crea un elemento che è l'ultimo figlio dell'elemento selezionato. Possiamo utilizzarlo per aggiungere un elemento vuoto dopo l'ultima immagine. Se gli diamo la stessa `width` delle immagini, farà sì che l'ultima immagine si trovi a sinistra in un layout a due colonne. Ora è centrato perché abbiamo impostato `justify-content: center` sul contenitore flex.
|
||||
|
||||
Esempio:
|
||||
|
||||
```CSS
|
||||
.container::after {
|
||||
content: "";
|
||||
width: 860px;
|
||||
}
|
||||
```
|
||||
|
||||
Crea un nuovo selettore usando lo pseudo-elemento `::after` sull'elemento `.gallery`. Aggiungi una proprietà `content` impostata con la stringa vuota `""` e `350px` come valore della proprietà `width`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere una nuova `@media` query.
|
||||
Il selettore `.gallery::after` dovrebbe avere una stringa vuota `""` come valore della proprietà `content`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1);
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.content === "\"\"");
|
||||
```
|
||||
|
||||
La nuova `@media` query dovrebbe avere una `max-width` di `800px` in questo modo: `@media (max-width: 800px)`.
|
||||
Il selettore `.gallery::after` dovrebbe avere `350px` come valore della proprietà `width`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === '(max-width: 800px)');
|
||||
```
|
||||
|
||||
La `@media` query dovrebbe avere una regola `#gallery img`.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 800px)');
|
||||
assert(rules?.find(rule => rule.selectorText === '#gallery img'));
|
||||
```
|
||||
|
||||
La regola `#gallery img` dovrebbe avere una proprietà `width` con il valore `50%`.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 800px)');
|
||||
const imgRule = rules?.find(rule => rule.selectorText === '#gallery img');
|
||||
assert(imgRule?.style.width === '50%');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.width === "350px");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
|
@ -44,7 +40,7 @@ assert(imgRule?.style.width === '50%');
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -52,20 +48,19 @@ assert(imgRule?.style.width === '50%');
|
|||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
<header class="header">
|
||||
<h1>css flexbox photo gallery</h1>
|
||||
</header>
|
||||
<div class="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -78,31 +73,36 @@ assert(imgRule?.style.width === '50%');
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
#gallery {
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 4px;
|
||||
gap: 16px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
margin-top: 8px;
|
||||
padding: 0 4px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,45 +7,20 @@ dashedName: step-21
|
|||
|
||||
# --description--
|
||||
|
||||
Ridimensiona l'anteprima per vedere il cambiamento di layout dalla tua media query.
|
||||
|
||||
Infine, crea un'altra media query per schermi con una larghezza inferiore a `600px`. In questa media query, crea una regola `#gallery img` e imposta la proprietà `width` sul `100%`. Così darai alla tua galleria un layout a colonna singola.
|
||||
L'attributo `alt` dovrebbe descrivere il contenuto di un'immagine. I lettori di schermo leggono del testo alternativo al posto delle immagini. Se un'immagine non può essere caricata, il testo viene mostrato al suo posto.
|
||||
|
||||
Per completare il progetto, aggiungi un attributo `alt` a tutte le nove immagini di gatti per descriverle. Utilizza almeno cinque caratteri per ognuna.
|
||||
|
||||
La tua CSS Flexbox Photo Gallery è ora completa.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere una seconda `@media` query.
|
||||
Tutti i nove elementi `img` dovrebbero avere un attributo `alt` con un testo che descrive ogni immagine, e ogni descrizione dovrebbe contenere almeno `5` lettere.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2);
|
||||
```
|
||||
|
||||
La nuova `@media` query dovrebbe trovarsi dopo quella esistente. Dovresti avere una regola `@media (max-width: 800px)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === '(max-width: 800px)');
|
||||
```
|
||||
|
||||
La nuova `@media` query dovrebbe avere una `max-width` di `600px` in questo modo: `@media (max-width: 600px)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.media?.mediaText === '(max-width: 600px)');
|
||||
```
|
||||
|
||||
La nuova `@media` query dovrebbe avere un selettore `#gallery img`.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 600px)');
|
||||
assert(rules?.find(rule => rule?.selectorText === '#gallery img'));
|
||||
```
|
||||
|
||||
La regola `#gallery img` dovrebbe avere una proprietà `width` con il valore `100%`.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 600px)');
|
||||
const imgRule = rules?.find(rule => rule?.selectorText === '#gallery img');
|
||||
assert(imgRule?.style?.width === '100%');
|
||||
const images = [...document.querySelectorAll('img')];
|
||||
assert(images.every(image => image.getAttribute('alt')));
|
||||
assert(images.every(image => image.getAttribute('alt').length >= 5));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
|
@ -54,7 +29,7 @@ assert(imgRule?.style?.width === '100%');
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -62,20 +37,21 @@ assert(imgRule?.style?.width === '100%');
|
|||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
<header class="header">
|
||||
<h1>css flexbox photo gallery</h1>
|
||||
</header>
|
||||
<div class="gallery">
|
||||
--fcc-editable-region--
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -88,50 +64,51 @@ assert(imgRule?.style?.width === '100%');
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
#gallery {
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 4px;
|
||||
gap: 16px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
margin-top: 8px;
|
||||
padding: 0 4px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
#gallery img {
|
||||
width: 50%;
|
||||
}
|
||||
.gallery::after {
|
||||
content: "";
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -139,20 +116,19 @@ body {
|
|||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
<header class="header">
|
||||
<h1>css flexbox photo gallery</h1>
|
||||
</header>
|
||||
<div class="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg" alt="Gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg" alt="Gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg" alt="Gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg" alt="Gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg" alt="Gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg" alt="Gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg" alt="Gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg" alt="Gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg" alt="Gallery">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -165,43 +141,41 @@ body {
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
#gallery {
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
gap: 16px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
margin-top: 8px;
|
||||
padding: 0 4px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
#gallery img {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
#gallery img {
|
||||
width: 100%;
|
||||
}
|
||||
.gallery::after {
|
||||
content: "";
|
||||
width: 350px;
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -7,30 +7,34 @@ dashedName: step-8
|
|||
|
||||
# --description--
|
||||
|
||||
Al momento, le immagini sono troppo grandi e non sarai in grado di vedere i cambiamenti CSS.
|
||||
|
||||
Crea un selettore `#gallery img` per selezionare le immagini. Assegnagli una proprietà `width` con il valore `25%`.
|
||||
Le immagini sono troppo grandi. Crea un selettore `.gallery img` per selezionare le immagini. Per tutte le immagini, imposta `width` al `100%` e `max-width` su `350px` in modo che si rimpiccioliscano al bisogno senza poter diventare troppo grandi.
|
||||
|
||||
Imposta anche la proprietà `height` su `300px` per mantenere uniforme la dimensione delle immagini.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore `#gallery img`.
|
||||
Dovresti avere un selettore `.gallery img`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('#gallery img'))
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img'));
|
||||
```
|
||||
|
||||
La regola `#gallery img` dovrebbe avere una proprietà `width` con il valore `25%`.
|
||||
La regola `.gallery img` dovrebbe avere una proprietà `width` con il valore `100%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.width === '25%')
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%');
|
||||
```
|
||||
|
||||
Il selettore `#gallery img` dovrebbe avere una proprietà `height` con il valore `300px`.
|
||||
Il selettore `.gallery img` dovrebbe avere una proprietà `max-width` con il valore `350px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.height === '300px');
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth === '350px');
|
||||
```
|
||||
|
||||
Il selettore `.gallery img` dovrebbe avere una proprietà `height` con il valore `300px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height === '300px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
|
@ -39,7 +43,7 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.height === '300
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -47,20 +51,19 @@ assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.height === '300
|
|||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
<header class="header">
|
||||
<h1>css flexbox photo gallery</h1>
|
||||
</header>
|
||||
<div class="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ dashedName: step-14
|
|||
|
||||
# --description--
|
||||
|
||||
Ora hai qualcosa che sta iniziando ad assomigliare a un edificio. È tempo di scrivere la tua prima variabile. Le dichiarazioni di variabili iniziano con due trattini (`-`) e hanno un nome e un valore come questo: `--nome-variabile: valore;`. Nella classe `.bb1`, crea una variabile chiamata `--building-color1` e dalle il valore `#999`.
|
||||
Ora hai qualcosa che assomiglia a un edificio. Sei pronto per creare la tua prima variabile. Le dichiarazioni di variabili iniziano con due trattini (`-`) e hanno un nome e un valore come questo: `--nome-variabile: valore;`. Nella classe `.bb1`, crea una variabile chiamata `--building-color1` e dalle il valore `#999`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ dashedName: step-20
|
|||
|
||||
# --description--
|
||||
|
||||
Gli edifici sono impilati uno sopra l'altro e debordano dallo schermo. Risolviamo questo problema. Aggiungi le proprietà `display: flex;`, `align-items: flex-end;` e `justify-content: space-evenly;` alla classe `background-buildings`. Così useremo di nuovo flexbox per spaziare uniformemente gli edifici sul fondo dell'elemento.
|
||||
Attualmente, gli edifici sono accatastati l'uno sopra l'altro. Aggiungi le proprietà `display: flex;`, `align-items: flex-end;` e `justify-content: space-evenly;` alla classe `background-buildings`. Così useremo di nuovo flexbox per spaziare uniformemente gli edifici sul fondo dell'elemento.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ dashedName: step-21
|
|||
|
||||
# --description--
|
||||
|
||||
Non mi piace il modo in cui sono distanziati gli edifici. Comprimili aggiungendo due elementi `div` vuoti in cima all'elemento `background-buildings`, due alla fine e uno tra `.bb3` e `.bb4`. Verranno aggiunti come elementi uniformemente distanziati, spostando efficacemente gli edifici più vicino al centro.
|
||||
Gli edifici sono troppo distanziati. Comprimili aggiungendo due elementi `div` vuoti in cima all'elemento `background-buildings`, due alla fine e uno tra `.bb3` e `.bb4`. Verranno aggiunti come elementi uniformemente distanziati, spostando efficacemente gli edifici più vicino al centro.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ dashedName: step-23
|
|||
|
||||
# --description--
|
||||
|
||||
Hmm, non sono sicuro del perché non ha funzionato. È possibile aggiungere un valore di fallback a una variabile inserendolo come secondo valore: `var(--nome-variabile, valore-fallback)`. La proprietà userà il valore di fallback se c'è un problema con la variabile. Aggiungi un valore di fallback `green` alla proprietà `background-color` di `.bb2`.
|
||||
Non ha funzionato. È possibile aggiungere un valore di fallback a una variabile inserendolo come secondo valore: `var(--nome-variabile, valore-fallback)`. La proprietà userà il valore di fallback se c'è un problema con la variabile. Aggiungi un valore di fallback `green` alla proprietà `background-color` di `.bb2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ dashedName: step-25
|
|||
|
||||
# --description--
|
||||
|
||||
Anche in questo caso ha usato il fallback? Adesso so qual è il problema! Le variabili che hai dichiarato in `.bb1` non sono accessibili per gli elementi fratelli `.bb2` e `.bb3`. È così che funziona il CSS. Per questo motivo, le variabili sono spesso dichiarate nel selettore `:root`. Questo è il selettore di livello più alto in CSS; inserire le variabili lì le renderà utilizzabili ovunque. Aggiungi il selettore `:root` in cima al tuo foglio di stile e sposta lì tutte le dichiarazioni delle variabili.
|
||||
Non ha funzionato perché le variabili che hai dichiarato in `.bb1` non sono accessibili per gli elementi fratelli `.bb2` e `.bb3`. È così che funziona il CSS. Per questo motivo, le variabili sono spesso dichiarate nel selettore `:root`. Questo è il selettore di livello più alto in CSS; inserire le variabili lì le renderà utilizzabili ovunque. Aggiungi il selettore `:root` in cima al tuo foglio di stile e sposta lì tutte le dichiarazioni delle variabili.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ dashedName: step-33
|
|||
|
||||
# --description--
|
||||
|
||||
Vedo del codice che può essere ottimizzato. Sposta le proprietà e i valori `position` e `top` da `.foreground-buildings` a `.background-buildings`. Quindi seleziona sia `.background-buildings` che `.foreground-buildings`, applicando efficacemente gli stili a entrambi gli elementi. Puoi utilizzare una virgola (`,`) per separare i selettori in questo modo: `selettore1, selettore2`.
|
||||
Dovresti ottimizzare il codice. Sposta le proprietà e i valori `position` e `top` da `.foreground-buildings` a `.background-buildings`. Quindi seleziona sia `.background-buildings` che `.foreground-buildings`, applicando efficacemente gli stili a entrambi gli elementi. Puoi utilizzare una virgola (`,`) per separare i selettori in questo modo: `selettore1, selettore2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ dashedName: step-95
|
|||
|
||||
# --description--
|
||||
|
||||
Non sono più così entusiasta di quel nero per le finestre. Cambia il valore `--window-color1` in `#bb99ff`.
|
||||
Usando le variabili CSS puoi cambiare dei valori senza cercare ovunque nel foglio degli stili. Cambia il valore `--window-color1` in `#bb99ff`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ dashedName: step-8
|
|||
|
||||
# --description--
|
||||
|
||||
Gli <dfn>attributi</dfn> HTML sono parole speciali utilizzate all'interno del tag di apertura di un elemento per controllarne il comportamento. L'attributo `src` in un elemento `img` specifica l'URL dell'immagine (dove l'immagine è localizzata). Un esempio di un elemento `img` utilizzando un attributo `src` è: `<img src="https://www.your-image-source.com/your-image.jpg">`.
|
||||
Gli <dfn>attributi</dfn> HTML sono parole speciali utilizzate all'interno del tag di apertura di un elemento per controllarne il comportamento. L'attributo `src` in un elemento `img` specifica l'URL dell'immagine (dove l'immagine è localizzata). Un esempio di un elemento `img` con un attributo `src` è: `<img src="https://www.example.com/the-image.jpg">`.
|
||||
|
||||
Aggiungi un attributo `src` all'elemento `img` esistente con il seguente URL:
|
||||
|
||||
|
|
|
|||
|
|
@ -15,16 +15,6 @@ Dopo l'immagine annidata nell'elemento `figure`, aggiungi un elemento `figcaptio
|
|||
|
||||
# --hints--
|
||||
|
||||
L'elemento `img` con la lasagna deve essere annidato nell'elemento `figure`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelector('figure > img') &&
|
||||
document.querySelector('figure > img').getAttribute('src').toLowerCase() ===
|
||||
'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
|
||||
);
|
||||
```
|
||||
|
||||
L'elemento `figcaption` dovrebbe avere un tag di apertura. I tag di apertura hanno la seguente sintassi: `<nomeElemento>`.
|
||||
|
||||
```js
|
||||
|
|
@ -56,7 +46,7 @@ assert(
|
|||
);
|
||||
```
|
||||
|
||||
L'elemento `figcaption` annidato nell'elemento `figure` dovrebbe essere al di sotto dell'elemento `img`. Sono nell'ordine sbagliato.
|
||||
L'elemento `figcaption` annidato nell'elemento `figure` dovrebbe essere sotto l'elemento `img`. Sono nell'ordine sbagliato.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ L'elemento `figure` dovrebbe avere un tag di apertura. I tag di apertura hanno q
|
|||
assert(document.querySelectorAll('figure').length === 2);
|
||||
```
|
||||
|
||||
L'elemento `ol` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere`/` subito dopo il carattere `<`.
|
||||
L'elemento `figure` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere`/` subito dopo il carattere `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/figure>/g).length === 2);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ dashedName: step-2
|
|||
|
||||
# --description--
|
||||
|
||||
Aggiungi i tag di apertura e chiusura `html` sotto la dichiarazione `DOCTYPE` in modo da avere un posto dove iniziare a inserire del codice.
|
||||
Al di sotto di `DOCTYPE`, aggiungi un elemento `html` con l'attributo `lang` impostato su `en`, così da avere un posto in cui inserire del codice.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
|
@ -17,10 +17,10 @@ La dichiarazione `DOCTYPE` dovrebbe essere all'inizio del documento HTML.
|
|||
assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
|
||||
```
|
||||
|
||||
L'elemento `html` dovrebbe avere un tag di apertura.
|
||||
L'elemento `html` dovrebbe avere una tag di apertura con un attributo `lang` di `en`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s*>/gi));
|
||||
assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
|
||||
```
|
||||
|
||||
L'elemento `html` dovrebbe avere un tag di chiusura.
|
||||
|
|
@ -32,7 +32,7 @@ assert(code.match(/<\/html\s*>/));
|
|||
I tag `html` dovrebbero essere nell'ordine corretto.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s*>\s*<\/html\s*>/));
|
||||
assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>\s*<\/html\s*>/));
|
||||
```
|
||||
|
||||
Dovresti avere un solo elemento `html`.
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ dashedName: step-4
|
|||
|
||||
# --description--
|
||||
|
||||
Aggiungi un elemento `title` all'elemento `head` e dai al tuo progetto il titolo `Registration Form`. Annida un elemento `link` autoconcludente nell'elemento `head`. Dagli un attributo `rel` con valore di `stylesheet` e un attributo `href` con valore di `styles.css`.
|
||||
Aggiungi degli elementi `title` e `meta` all'elemento `head`. Dai al tuo progetto il titolo `Registration Form`, e dai un attributo `charset` con il valore `UTF-8` all'elemento `meta`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
|
@ -38,59 +38,19 @@ const title = document.querySelector('title');
|
|||
assert.equal(title.text, 'Registration Form');
|
||||
```
|
||||
|
||||
Il codice dovrebbe avere un elemento `link`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('link'));
|
||||
```
|
||||
|
||||
Non dovresti cambiare i tuoi tag `head` esistenti. Assicurati di non aver eliminato il tag di chiusura.
|
||||
|
||||
```js
|
||||
const heads = document.querySelectorAll('head');
|
||||
assert.equal(heads?.length, 1);
|
||||
```
|
||||
|
||||
Dovresti avere un elemento `link` auto-concludente.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('link').length === 1);
|
||||
```
|
||||
|
||||
L'elemento `link` dovrebbe essere all'interno dell'elemento `head`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('head > link'));
|
||||
```
|
||||
|
||||
L'elemento `link` dovrebbe avere un attributo `rel` con il valore `stylesheet`.
|
||||
|
||||
```js
|
||||
const link_element = document.querySelector('link');
|
||||
const rel = link_element.getAttribute("rel");
|
||||
assert.equal(rel, "stylesheet");
|
||||
```
|
||||
|
||||
L'elemento `link` dovrebbe avere un attributo `href` con il valore `styles.css`.
|
||||
|
||||
```js
|
||||
const link = document.querySelector('link');
|
||||
assert.equal(link.dataset.href, "styles.css");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60f02e7361b68405e27b62a5
|
||||
title: Step 5
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -29,10 +29,11 @@ assert.equal(document.querySelector('body > h1')?.textContent, 'Registration For
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60f030d388cb74067cf291c3
|
||||
title: Step 6
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -39,10 +39,11 @@ assert.equal(document.querySelector('p')?.innerText, 'Please fill out this form
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60f1922fcbd2410527b3bd89
|
||||
title: Step 7
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -35,10 +35,11 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60f1a5e2d2c23707a4f9a660
|
||||
title: Step 8
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -29,10 +29,11 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60f1a9cbd23023082e149fee
|
||||
title: Step 9
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -41,10 +41,11 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.color, 'rgb(245,
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60f5c3e399ff1a05629964e4
|
||||
title: Step 10
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -36,10 +36,11 @@ assert.equal(document.querySelector('form')?.action, 'https://register-demo.free
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
|
@ -57,6 +58,6 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60f5cb8875ab6a0610f05071
|
||||
title: Step 11
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -35,10 +35,11 @@ assert.exists(document.querySelector('fieldset + fieldset + fieldset'));
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
|
@ -58,6 +59,6 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60f5d2776c854e069560fbe6
|
||||
title: Step 12
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -29,10 +29,11 @@ assert.equal(document.querySelector('fieldset')?.querySelectorAll('label')?.leng
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -56,6 +57,6 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60f5dc35c07ac1078f140916
|
||||
title: Step 13
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -46,10 +46,11 @@ assert.match(document.querySelector('fieldset > label:nth-child(4)')?.innerHTML,
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -76,6 +77,6 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60f803d5241e6a0433a523a1
|
||||
title: Step 14
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -35,10 +35,11 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('label')?.margin, '0.5rem
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -63,7 +64,7 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60f805f813eaf2049bc2ceea
|
||||
title: Step 15
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -53,10 +53,11 @@ assert.equal(document.querySelectorAll('label')?.[3]?.innerHTML.trim(), 'Create
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -83,12 +84,12 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60f80e0081e0f2052ae5b505
|
||||
title: Step 16
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -45,10 +45,11 @@ assert.equal(document.querySelectorAll('input')?.[3]?.type, 'password');
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -75,12 +76,12 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60f81167d0d4910809f88945
|
||||
title: Step 17
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -37,10 +37,11 @@ assert.exists(document.querySelector('fieldset + input[value="Submit"]'));
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -68,12 +69,12 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60f81616cff80508badf9ad5
|
||||
title: Step 18
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -51,10 +51,11 @@ assert.equal(document.querySelector('input[type="submit"]')?.required, false);
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -82,12 +83,12 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60f83e7bfc09900959f41e20
|
||||
title: Step 19
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -31,10 +31,11 @@ assert.equal(document.querySelector('input[type="password"]')?.minLength, 8);
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -62,12 +63,12 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60f84ec41116b209c280ba91
|
||||
title: Step 20
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -39,10 +39,11 @@ assert.equal(document.querySelector('input[type="password"]')?.minLength, -1);
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -70,12 +71,12 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60f852f645b5310a8264f555
|
||||
title: Step 21
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -31,10 +31,11 @@ assert.exists(document.querySelector('fieldset:nth-child(2)')?.querySelector('la
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -64,12 +65,12 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60f85a62fb30c80bcea0cedb
|
||||
title: Step 22
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -38,10 +38,11 @@ assert.equal(document.querySelectorAll('fieldset:nth-child(2) input[type="radio"
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -73,12 +74,12 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60f8604682407e0d017bbf7f
|
||||
title: Step 23
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -35,10 +35,11 @@ assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(3) in
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -70,12 +71,12 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60f8618d191b940d62038513
|
||||
title: Step 24
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -59,10 +59,11 @@ assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)'
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -94,12 +95,12 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60fab4a123ce4b04526b082b
|
||||
title: Step 25
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -37,10 +37,11 @@ assert.isEmpty(document.querySelector('fieldset:nth-child(2) label:nth-child(3)
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -72,12 +73,12 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60fab8367d35de04e5cb7929
|
||||
title: Step 26
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -39,10 +39,11 @@ assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -74,12 +75,12 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60fab9f17fa294054b74228c
|
||||
title: Step 27
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -37,10 +37,11 @@ assert.equal(document.querySelector('fieldset:nth-child(3) > label > input')?.ty
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -57,8 +58,8 @@ assert.equal(document.querySelector('fieldset:nth-child(3) > label > input')?.ty
|
|||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the
|
||||
<a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
<a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
|
|
@ -77,12 +78,12 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60fabf0dd4959805dbae09e6
|
||||
title: Step 28
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -51,10 +51,11 @@ assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2)
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -71,7 +72,7 @@ assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2)
|
|||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
|
|
@ -91,12 +92,12 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60fac4095512d3066053d73c
|
||||
title: Step 29
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -31,10 +31,11 @@ assert.equal(document.querySelectorAll('fieldset:nth-child(3) > select > option'
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -51,13 +52,13 @@ assert.equal(document.querySelectorAll('fieldset:nth-child(3) > select > option'
|
|||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
|
|
@ -73,12 +74,12 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60fac8d7fdfaee0796934f20
|
||||
title: Step 31
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -55,10 +55,11 @@ assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -75,13 +76,13 @@ assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(
|
|||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select>
|
||||
<option></option>
|
||||
|
|
@ -105,12 +106,12 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60faca286cb48b07f6482970
|
||||
title: Step 32
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -49,10 +49,11 @@ assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -69,13 +70,13 @@ assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(
|
|||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select>
|
||||
<option>(select one)</option>
|
||||
|
|
@ -99,12 +100,12 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60facde2d0dc61085b41063f
|
||||
title: Step 33
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -43,10 +43,11 @@ assert.match(code, /<textarea\s*>[\s\S]*<\/textarea\s*>/);
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -63,13 +64,13 @@ assert.match(code, /<textarea\s*>[\s\S]*<\/textarea\s*>/);
|
|||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select>
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -94,12 +95,12 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60facf914c7b9b08d7510c2c
|
||||
title: Step 34
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -31,10 +31,11 @@ assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -51,13 +52,13 @@ assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)
|
|||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select>
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -68,8 +69,8 @@ assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)
|
|||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea></textarea>
|
||||
</label>
|
||||
<textarea></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
|
|
@ -84,12 +85,12 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60fad0a812d9890938524f50
|
||||
title: Step 35
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -31,10 +31,11 @@ assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -51,13 +52,13 @@ assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)
|
|||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select>
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -68,8 +69,8 @@ assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)
|
|||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea rows="3" cols="30"></textarea>
|
||||
</label>
|
||||
<textarea rows="3" cols="30"></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
|
|
@ -84,12 +85,12 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60fad1cafcde010995e15306
|
||||
title: Step 36
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -91,10 +91,11 @@ Non dovresti assegnare a nessun elemento `fieldset` un attributo `name`.
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -112,12 +113,12 @@ Non dovresti assegnare a nessun elemento `fieldset` un attributo `name`.
|
|||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select>
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -128,8 +129,8 @@ Non dovresti assegnare a nessun elemento `fieldset` un attributo `name`.
|
|||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
<textarea rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
|
|
@ -144,12 +145,12 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60fad6dfcc0d930a59becf12
|
||||
title: Step 37
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -37,10 +37,11 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontSize, '16px')
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -57,12 +58,12 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontSize, '16px')
|
|||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -74,7 +75,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontSize, '16px')
|
|||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
|
@ -89,14 +90,14 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60fad8e6148f310bba7890b1
|
||||
title: Step 38
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -35,10 +35,11 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.textAlign, 'cent
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -55,12 +56,12 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.textAlign, 'cent
|
|||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -72,7 +73,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.textAlign, 'cent
|
|||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
|
@ -86,9 +87,9 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
|
@ -96,8 +97,8 @@ body {
|
|||
--fcc-editable-region--
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60fad99e09f9d30c1657e790
|
||||
title: Step 39
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -47,10 +47,11 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.width, '60vw');
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -67,12 +68,12 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.width, '60vw');
|
|||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -84,7 +85,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.width, '60vw');
|
|||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
|
@ -98,9 +99,9 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
|
|
@ -113,8 +114,8 @@ h1, p {
|
|||
--fcc-editable-region--
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60fadb18058e950c73925279
|
||||
title: Step 40
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -41,10 +41,11 @@ assert.equal(fieldset?.paddingRight, '0px');
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -61,12 +62,12 @@ assert.equal(fieldset?.paddingRight, '0px');
|
|||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -78,7 +79,7 @@ assert.equal(fieldset?.paddingRight, '0px');
|
|||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
|
@ -92,9 +93,9 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
|
|
@ -104,9 +105,9 @@ h1, p {
|
|||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
|
@ -114,8 +115,8 @@ form {
|
|||
--fcc-editable-region--
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60fadce90f85c50d0bb0dd4f
|
||||
title: Step 41
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -23,10 +23,11 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('fieldset')?.borderBottom,
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -43,12 +44,12 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('fieldset')?.borderBottom,
|
|||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -60,7 +61,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('fieldset')?.borderBottom,
|
|||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
|
@ -74,9 +75,9 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
|
|
@ -86,21 +87,21 @@ h1, p {
|
|||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60fadd972e6ffe0d6858fa2d
|
||||
title: Step 43
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -62,10 +62,11 @@ assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'sel
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -82,12 +83,12 @@ assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'sel
|
|||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -99,7 +100,7 @@ assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'sel
|
|||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
|
@ -113,9 +114,9 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
|
|
@ -125,9 +126,9 @@ h1, p {
|
|||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
|
|
@ -142,7 +143,7 @@ fieldset:last-of-type {
|
|||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60fadfa2b540b70dcfa8b771
|
||||
title: Step 44
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -37,10 +37,11 @@ assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[2]?.classList?
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -58,13 +59,13 @@ assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[2]?.classList?
|
|||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -76,7 +77,7 @@ assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[2]?.classList?
|
|||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
|
@ -90,9 +91,9 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
|
|
@ -102,9 +103,9 @@ h1, p {
|
|||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
|
|
@ -119,14 +120,14 @@ fieldset:last-of-type {
|
|||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60fc219d333e37046f474a6e
|
||||
title: Step 45
|
||||
title: Step 46
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -29,10 +29,11 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.width, 'unset'
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -49,12 +50,12 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.width, 'unset'
|
|||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -66,7 +67,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.width, 'unset'
|
|||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
|
@ -80,9 +81,9 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
|
|
@ -92,9 +93,9 @@ h1, p {
|
|||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
|
|
@ -109,14 +110,14 @@ fieldset:last-of-type {
|
|||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60fc22d1e64d1b04cdd4e602
|
||||
title: Step 46
|
||||
title: Step 47
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -41,10 +41,11 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginLeft, '0
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -61,12 +62,12 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginLeft, '0
|
|||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -78,7 +79,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginLeft, '0
|
|||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
|
@ -92,9 +93,9 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
|
|
@ -104,9 +105,9 @@ h1, p {
|
|||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
|
|
@ -121,14 +122,14 @@ fieldset:last-of-type {
|
|||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60fc236dc04532052926fdac
|
||||
title: Step 47
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -25,10 +25,11 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.verticalAlign,
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -45,12 +46,12 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.verticalAlign,
|
|||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -62,7 +63,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.verticalAlign,
|
|||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
|
@ -76,9 +77,9 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
|
|
@ -88,9 +89,9 @@ h1, p {
|
|||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
|
|
@ -105,14 +106,14 @@ fieldset:last-of-type {
|
|||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60ffe1bc30415f042faea936
|
||||
title: Step 48
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -40,10 +40,11 @@ assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.bord
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -60,12 +61,12 @@ assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.bord
|
|||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -77,7 +78,7 @@ assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.bord
|
|||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
|
@ -91,9 +92,9 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
|
|
@ -103,9 +104,9 @@ h1, p {
|
|||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
|
|
@ -120,14 +121,14 @@ fieldset:last-of-type {
|
|||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60ffe3936796ac04959285a9
|
||||
title: Step 49
|
||||
title: Step 50
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -33,10 +33,11 @@ assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.minH
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -53,12 +54,12 @@ assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.minH
|
|||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -70,7 +71,7 @@ assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.minH
|
|||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
|
@ -84,9 +85,9 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
|
|
@ -96,9 +97,9 @@ h1, p {
|
|||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
|
|
@ -113,14 +114,14 @@ fieldset:last-of-type {
|
|||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60ffe4f4ec18cd04dc470c56
|
||||
title: Step 50
|
||||
title: Step 51
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -37,10 +37,11 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea')?.minH
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -57,12 +58,12 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea')?.minH
|
|||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -74,7 +75,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea')?.minH
|
|||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
|
@ -89,9 +90,9 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
|
|
@ -101,9 +102,9 @@ h1, p {
|
|||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
|
|
@ -118,14 +119,14 @@ fieldset:last-of-type {
|
|||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60ffe69ee377c6055e192a46
|
||||
title: Step 51
|
||||
title: Step 52
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -43,10 +43,11 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.w
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -63,12 +64,12 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.w
|
|||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -80,7 +81,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.w
|
|||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
|
@ -94,9 +95,9 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
|
|
@ -106,9 +107,9 @@ h1, p {
|
|||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
|
|
@ -123,14 +124,14 @@ fieldset:last-of-type {
|
|||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60ffe7d8aae62c05bcc9e7eb
|
||||
title: Step 52
|
||||
title: Step 53
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -32,10 +32,11 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -52,12 +53,12 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?
|
|||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -69,7 +70,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?
|
|||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
|
@ -83,9 +84,9 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
|
|
@ -95,9 +96,9 @@ h1, p {
|
|||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
|
|
@ -112,14 +113,14 @@ fieldset:last-of-type {
|
|||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60ffe8a5ceb0e90618db06d9
|
||||
title: Step 53
|
||||
title: Step 54
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -29,10 +29,11 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.f
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -49,12 +50,12 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.f
|
|||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -66,7 +67,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.f
|
|||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
|
@ -80,9 +81,9 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
|
|
@ -92,9 +93,9 @@ h1, p {
|
|||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
|
|
@ -109,14 +110,14 @@ fieldset:last-of-type {
|
|||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60ffe947a868ec068f7850f6
|
||||
title: Passo 54
|
||||
title: Step 55
|
||||
challengeType: 0
|
||||
dashedName: step-54
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -29,10 +29,11 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.b
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -49,12 +50,12 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.b
|
|||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -66,7 +67,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.b
|
|||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
|
@ -80,9 +81,9 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
|
|
@ -92,9 +93,9 @@ h1, p {
|
|||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
|
|
@ -109,14 +110,14 @@ fieldset:last-of-type {
|
|||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60ffe9cb47809106eda2f2c9
|
||||
title: Step 55
|
||||
title: Step 56
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
dashedName: step-56
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -32,10 +32,11 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.m
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -52,12 +53,12 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.m
|
|||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -69,7 +70,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.m
|
|||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
|
@ -83,9 +84,9 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
|
|
@ -95,9 +96,9 @@ h1, p {
|
|||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
|
|
@ -112,14 +113,14 @@ fieldset:last-of-type {
|
|||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60ffec2825da1007509ddd06
|
||||
title: Step 56
|
||||
title: Step 57
|
||||
challengeType: 0
|
||||
dashedName: step-56
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -31,10 +31,11 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="file"]')?.pad
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -51,12 +52,12 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="file"]')?.pad
|
|||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -68,7 +69,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="file"]')?.pad
|
|||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
|
@ -82,9 +83,9 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
|
|
@ -94,9 +95,9 @@ h1, p {
|
|||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
|
|
@ -111,14 +112,14 @@ fieldset:last-of-type {
|
|||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60ffecefac971607ae73c60f
|
||||
title: Step 57
|
||||
title: Step 58
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -29,10 +29,11 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom, '2
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -49,12 +50,12 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom, '2
|
|||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -66,7 +67,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom, '2
|
|||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
|
@ -80,9 +81,9 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
|
|
@ -93,9 +94,9 @@ h1, p {
|
|||
--fcc-editable-region--
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
|
@ -112,14 +113,14 @@ fieldset:last-of-type {
|
|||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
|
|
@ -147,7 +148,7 @@ input[type="submit"] {
|
|||
}
|
||||
|
||||
input[type="file"] {
|
||||
padding: 1px 2px;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 60ffefd6479a3d084fb77cbc
|
||||
title: Step 58
|
||||
title: Step 59
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
dashedName: step-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -31,10 +31,11 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -51,12 +52,12 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223
|
|||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -68,7 +69,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223
|
|||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
|
@ -82,9 +83,9 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
|
|
@ -94,9 +95,9 @@ h1, p {
|
|||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
|
|
@ -112,14 +113,14 @@ fieldset:last-of-type {
|
|||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
|
|
@ -160,10 +161,11 @@ input[type="file"] {
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
|
@ -180,12 +182,12 @@ input[type="file"] {
|
|||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
|
|
@ -197,7 +199,7 @@ input[type="file"] {
|
|||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
|
@ -211,9 +213,9 @@ body {
|
|||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
|
|
@ -223,9 +225,9 @@ h1, p {
|
|||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
|
|
@ -241,14 +243,14 @@ fieldset:last-of-type {
|
|||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
id: 62b30924c5e4ef0daba23b5e
|
||||
title: Step 42
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
|
@ -36,8 +36,9 @@ assert(borderBottom === 'none' || borderBottom === 'medium none');
|
|||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
---
|
||||
id: 62cc5b1779e4d313466f73c5
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Annida un elemento `link` autoconcludente nell'elemento `head`. Dagli un attributo `rel` con valore di `stylesheet` e un attributo `href` con valore di `styles.css`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il codice dovrebbe avere un elemento `link`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('link'));
|
||||
```
|
||||
|
||||
Non dovresti cambiare i tag `head` esistenti. Assicurati di non aver eliminato il tag di chiusura.
|
||||
|
||||
```js
|
||||
const heads = document.querySelectorAll('head');
|
||||
assert.equal(heads?.length, 1);
|
||||
```
|
||||
|
||||
Dovresti avere un elemento `link` auto-concludente.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('link').length === 1);
|
||||
```
|
||||
|
||||
L'elemento `link` dovrebbe essere all'interno dell'elemento `head`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('head > link'));
|
||||
```
|
||||
|
||||
L'elemento `link` dovrebbe avere un attributo `rel` con il valore `stylesheet`.
|
||||
|
||||
```js
|
||||
const link_element = document.querySelector('link');
|
||||
const rel = link_element.getAttribute("rel");
|
||||
assert.equal(rel, "stylesheet");
|
||||
```
|
||||
|
||||
L'elemento `link` dovrebbe avere un attributo `href` con il valore `styles.css`.
|
||||
|
||||
```js
|
||||
const link = document.querySelector('link');
|
||||
assert.equal(link.dataset.href, "styles.css");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
|
@ -11,6 +11,14 @@ I colori e le forme del tuo dipinto sono troppo netti per sembrare un Rothko.
|
|||
|
||||
Usa la proprietà `filter` con `blur` per sfocare il dipinto di `2px` nell'elemento `.canvas`.
|
||||
|
||||
Ecco un esempio di una regola che aggiunge un `blur` di 3px:
|
||||
|
||||
```css
|
||||
p {
|
||||
filter: blur(3px);
|
||||
}
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare alla proprietà `filter` il valore `blur(2px)`.
|
||||
|
|
|
|||
|
|
@ -9,14 +9,6 @@ dashedName: step-35
|
|||
|
||||
Crea una regola che seleziona sia `.one` che `.two` aumentando l'effetto `blur` di 1 pixel.
|
||||
|
||||
Ecco un esempio di una regola che incrementa l'effetto `blur` di due elementi:
|
||||
|
||||
```css
|
||||
h1, p {
|
||||
filter: blur(3px);
|
||||
}
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore `.one, .two`.
|
||||
|
|
|
|||
|
|
@ -66,6 +66,12 @@ assert.isUndefined(addTogether(2)([3]));
|
|||
assert.isUndefined(addTogether('2', 3));
|
||||
```
|
||||
|
||||
`addTogether(5, undefined)` は `undefined` を返す必要があります。
|
||||
|
||||
```js
|
||||
assert.isUndefined(addTogether(5, undefined));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@ dashedName: step-67
|
|||
|
||||
`hr` 要素を使用して、コンテンツが異なるセクション間に区切り線を表示できます。
|
||||
|
||||
まずは、`hr` 要素を最初の `header` 要素と `main` 要素の間に 1 つ追加してください。 `hr` 要素は終了タグを持たないことに注意してください。
|
||||
まずは、`hr` 要素を最初の `header` 要素と `main` 要素の間に 1 つ追加してください。 `hr` 要素は自己終了要素であることに注意してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`hr` 要素を 1 つ追加する必要があります。 `hr` 要素は自己閉じ要素です。
|
||||
`hr` 要素を 1 つ追加する必要があります。 `hr` 要素は自己終了要素です。
|
||||
|
||||
```js
|
||||
assert(code.match(/<hr\s?\/?>/i));
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ dashedName: step-4
|
|||
|
||||
ブラウザーにページの文字エンコーディングについて指示するため、`charset` を `utf-8` に設定します。 `utf-8` とは、あらゆる言語のほぼすべての文字を含む世界共通の文字セットです。
|
||||
|
||||
`head` 要素内に `meta` 要素をネストし、`charset` 属性を `utf-8` に設定してください。 `meta` 要素は自己閉じ要素なので、終了タグは必要ないことを覚えておきましょう。
|
||||
`head` 要素内に `meta` 要素をネストし、`charset` 属性を `utf-8` に設定してください。 `meta` 要素は自己終了要素なので、終了タグは必要ないことを覚えておきましょう。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
|
@ -20,7 +20,7 @@ const meta = document.querySelectorAll('meta');
|
|||
assert(meta?.length === 1);
|
||||
```
|
||||
|
||||
`meta` 要素は自己閉じ要素である必要があります。
|
||||
`meta` 要素は自己終了要素である必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/meta>/i) === null);
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ dashedName: step-5
|
|||
|
||||
最後に、`viewport` の `<meta>` タグを使用して、ページの見た目があらゆるデバイス上で同じになるようにします。
|
||||
|
||||
自己閉じ要素の `meta` 要素を、`head` 要素内に追加してください。 `name` 属性を `viewport` に、`content` 属性を `width=device-width, initial-scale=1.0` に設定してください。
|
||||
自己終了要素の `meta` 要素を、`head` 要素内に追加してください。 `name` 属性を `viewport` に、`content` 属性を `width=device-width, initial-scale=1.0` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
|
@ -20,7 +20,7 @@ const meta = document.querySelectorAll('meta');
|
|||
assert(meta?.length === 2);
|
||||
```
|
||||
|
||||
新しい `meta` 要素は自己閉じ要素である必要があります。
|
||||
新しい `meta` 要素は自己終了要素である必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/meta>/i) === null);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ dashedName: step-7
|
|||
|
||||
# --hints--
|
||||
|
||||
自己閉じ要素 `link` が 1 つ必要です。
|
||||
自己終了要素 `link` が 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('link').length === 1);
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue