+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
+Registration Form
+ + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md new file mode 100644 index 00000000000..4ea68a0440f --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md @@ -0,0 +1,54 @@ +--- +id: 60f1922fcbd2410527b3bd89 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Adesso, iniziamo ad abbellire il progetto aggiungendo un po' di CSS. Inizia assegnando al `body` una proprietà `width` del `100%`, e una proprietà `height` di `100vh`. + +# --hints-- + +Dovresti usare un selettore `body`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Dovresti assegnare al `body` una proprietà `width` del `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%'); +``` + +Dovresti assegnare al `body` una proprietà `height` di `100vh`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a5e2d2c23707a4f9a660.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a5e2d2c23707a4f9a660.md new file mode 100644 index 00000000000..ac917e72e0d --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a5e2d2c23707a4f9a660.md @@ -0,0 +1,51 @@ +--- +id: 60f1a5e2d2c23707a4f9a660 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Ora, rimuovi la barra di scorrimento orizzontale, impostando a `0` la proprietà `margin` dell'elemento `body` che a volte viene aggiunta di default da alcuni browser. + +# --hints-- + +Dovresti aggiungere la proprietà `margin` all'interno del selettore `body`. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.margin); +``` + +Dovresti assegnare allla proprietà `margin` il valore `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + +``` + +```css +--fcc-editable-region-- +body { + width: 100%; + height: 100vh; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a9cbd23023082e149fee.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a9cbd23023082e149fee.md new file mode 100644 index 00000000000..3baf5aef864 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a9cbd23023082e149fee.md @@ -0,0 +1,64 @@ +--- +id: 60f1a9cbd23023082e149fee +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Adesso va meglio. Ora, fai in modo che lo sfondo sia più piacevole alla vista, cambiando la proprietà `background-color` dell'elemento `body` in `#1b1b32`. Poi, per rendere il testo leggibile, cambia la proprietà `color` in `#f5f6f7`. + +# --hints-- + +Dovresti aggiungere la proprietà `background-color` all'interno del selettore `body`. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor); +``` + +Dovresti assegnare alla proprietà `background-color` il valore `#1b1b32`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor, 'rgb(27, 27, 50)'); +``` + +Dovresti aggiungere la proprietà `color` all'interno del selettore `body`. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.color); +``` + +Dovresti assegnare alla proprietà `color` il valore `#f5f6f7`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.color, 'rgb(245, 246, 247)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + +``` + +```css +--fcc-editable-region-- +body { + width: 100%; + height: 100vh; + margin: 0; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md new file mode 100644 index 00000000000..ddfac940944 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md @@ -0,0 +1,62 @@ +--- +id: 60f5c3e399ff1a05629964e4 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Come suggerito dal titolo, stai creando un modulo. Dopo l'elemento `p`, inserisci un elemento `form` con un attributo `action` con il valore `https://register-demo.freecodecamp.org`. + +# --hints-- + +Dovresti aggiungere un elemento `form` vicino all'elemento `p`. + +```js +assert.exists(document.querySelector('p + form')); +``` + +Dovresti assegnare all'elemento `form` un attributo `action`. + +```js +// Default action points to window location +assert.notEqual(document.querySelector('form')?.action, window?.location?.href); +``` + +Dovresti assegnare all'attributo `action` il valore `https://register-demo.freecodecamp.org`. + +```js +assert.equal(document.querySelector('form')?.action, 'https://register-demo.freecodecamp.org/'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + +--fcc-editable-region-- + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5cb8875ab6a0610f05071.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5cb8875ab6a0610f05071.md new file mode 100644 index 00000000000..e6dd6cbb4d7 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5cb8875ab6a0610f05071.md @@ -0,0 +1,63 @@ +--- +id: 60f5cb8875ab6a0610f05071 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Dato che il progetto prevede tre sezioni distinte nel modulo, aggiungi tre elementi `fieldset` all'interno dell'elemento `form`. + +# --hints-- + +Dovresti aggiungere 3 elementi `fieldset`. + +```js +assert.equal(document.querySelectorAll('fieldset')?.length, 3); +``` + +I tre elementi `fieldset` dovrebbero essere all'interno dell'elemento `form`. + +```js +assert.equal(document.querySelectorAll('form > fieldset')?.length, 3); +``` + +I tre elementi `fieldset` dovrebbero essere fratelli. + +```js +assert.exists(document.querySelector('fieldset + fieldset + fieldset')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + +--fcc-editable-region-- + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md new file mode 100644 index 00000000000..94f4ab312cc --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md @@ -0,0 +1,61 @@ +--- +id: 60f5d2776c854e069560fbe6 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Il primo elemento `fieldset` conterrà i campi nome, email e password. Inizia aggiungendo quattro elementi `label` al primo `fieldset`. + +# --hints-- + +Dovresti aggiungere quattro elementi `label`. + +```js +assert.equal(document.querySelectorAll('label')?.length, 4); +``` + +Dovresti aggiungere gli elementi `label` al primo `fieldset`. + +```js +assert.equal(document.querySelector('fieldset')?.querySelectorAll('label')?.length, 4); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+--fcc-editable-region-- + +--fcc-editable-region-- + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5dc35c07ac1078f140916.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5dc35c07ac1078f140916.md new file mode 100644 index 00000000000..d7487d8e4f4 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5dc35c07ac1078f140916.md @@ -0,0 +1,81 @@ +--- +id: 60f5dc35c07ac1078f140916 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Aggiungi il seguente testo all'interno degli elementi `label`: + +- `Enter Your First Name:` +- `Enter Your Last Name:` +- `Enter Your Email:` +- `Create a New Password:` + +# --hints-- + +Il primo `label` dovrebbe contenere il testo `Enter Your First Name:`. + +```js +assert.match(document.querySelector('label')?.innerHTML, /Enter Your First Name:/i); +``` + +Il secondo `label` dovrebbe contenere il testo `Enter Your Last Name:`. + +```js +assert.match(document.querySelector('fieldset > label:nth-child(2)')?.innerHTML, /Enter Your Last Name:/i); +``` + +Il terzo `label` dovrebbe contenere il testo `Enter Your Email:`. + +```js +assert.match(document.querySelector('fieldset > label:nth-child(3)')?.innerHTML, /Enter Your Email:/i); +``` + +Il quarto `label` dovrebbe contenere il testo `Create a New Password:`. + +```js +assert.match(document.querySelector('fieldset > label:nth-child(4)')?.innerHTML, /Create a New Password:/i); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md new file mode 100644 index 00000000000..f20a40c43af --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md @@ -0,0 +1,72 @@ +--- +id: 60f803d5241e6a0433a523a1 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Poiché i `label` sono elementi `inline` come impostazione predefinita, appaiono sulla stessa riga del testo corrispondente. Per farli apparire su righe separate, aggiungi `display: block` all'elemento `label`, e aggiungi una proprietà `margin` con il valore `0.5rem 0`, per separarli gli uni dagli altri. + +# --hints-- + +Dovresti usare un selettore `label`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('label')); +``` + +È necessario aggiungere una proprietà `display` con il valore `block`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('label')?.display, 'block'); +``` + +Dovresti aggiungere una proprietà `margin` con il valore `0.5rem 0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('label')?.margin, '0.5rem 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md new file mode 100644 index 00000000000..ddaf56f21cc --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md @@ -0,0 +1,94 @@ +--- +id: 60f805f813eaf2049bc2ceea +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Annida un elemento `input` in ogni elemento `label`. Assicurati di aggiungere ogni elemento `input` dopo il testo `label` e di includere uno spazio dopo i due punti. + +# --hints-- + +Dovresti aggiungere quattro elementi `input` all'elemento `fieldset`. + +```js +assert.equal(document.querySelectorAll('fieldset input')?.length, 4); +``` + +Dovresti annidare gli elementi `input` all'interno degli elementi `label`. + +```js +assert.equal(document.querySelectorAll('label input')?.length, 4); +``` + +Dovresti aggiungere il primo `input` il testo `Enter Your First Name:` dell'elemento `label` e includere uno spazio dopo i due punti. + +```js +assert.equal(document.querySelectorAll('label')?.[0]?.innerHTML, 'Enter Your First Name: '); +``` + +Dovresti aggiungere il secondo `input` dopo il testo `Enter Your Last Name:` dell'elemento `label` e includere uno spazio dopo i due punti. + +```js +assert.equal(document.querySelectorAll('label')?.[1]?.innerHTML, 'Enter Your Last Name: '); +``` + +Dovresti aggiungere il terzo `input` dopo il testo `Enter Your Email:` dell'elemento `label` e includere uno spazio dopo i due punti. + +```js +assert.equal(document.querySelectorAll('label')?.[2]?.innerHTML, 'Enter Your Email: '); +``` + +Dovresti aggiungere il quarto `input` dopo il testo `Create a New Password:` dell'elemento `label` e includere uno spazio dopo i due punti. + +```js +assert.equal(document.querySelectorAll('label')?.[3]?.innerHTML, 'Create a New Password: '); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md new file mode 100644 index 00000000000..6bf355cc451 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md @@ -0,0 +1,86 @@ +--- +id: 60f80e0081e0f2052ae5b505 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Specificare l'attributo `type` di un elemento form è importante per far sì che il browser sappia con che tipo di dati ha a che fare. Se il `type` non è specificato, il browser userà il valore predefinito `text`. + +Assegna ai primi due elementi `input` un attributo `type` con il valore `text`, al terzo un attributo `type` con il valore `email` e al quarto un attributo `type` con il valore `password`. + +Il valore `email` assegnato all'attributo type, permette di inserire solo e-mail contenenti un carattere `@` e un carattere `.`. Il valore `password` dell'attributo type nasconde l'input e avvisa se il sito non utilizza HTTPS. + +# --hints-- + +Dovresti assegnare al primo elemento `input` un attributo `type` con il valore `text`. + +```js +assert.equal(document.querySelector('input')?.type, 'text'); +``` + +Dovresti assegnare al secondo elemento `input` un attributo `type` con il valore `text`. + +```js +assert.equal(document.querySelectorAll('input')?.[1]?.type, 'text'); +``` + +Dovresti assegnare al terzo elemento `input` un attributo `type` con il valore `email`. + +```js +assert.equal(document.querySelectorAll('input')?.[2]?.type, 'email'); +``` + +Dovresti assegnare al quarto elemento `input` un attributo `type` con il valore `password`. + +```js +assert.equal(document.querySelectorAll('input')?.[3]?.type, 'password'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md new file mode 100644 index 00000000000..c13da2792b3 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md @@ -0,0 +1,79 @@ +--- +id: 60f81167d0d4910809f88945 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Il primo elemento `input` con l'attributo `type` con il valore `submit` viene automaticamente impostato per inviare l'elemento genitore `form` più vicino. + +Per gestire l'invio del modulo, dopo l'ultimo elemento `fieldset`, aggiungi un elemento `input` con un attributo `type` con il valore `submit` e un attributo `value` con il valore `Submit`. + +# --hints-- + +Dovresti aggiungere l'elemento `input` dopo l'ultimo elemento `fieldset`. + +```js +assert.exists(document.querySelectorAll('fieldset')?.[2]?.nextElementSibling?.tagName, 'input'); +``` + +Dovresti assegnare all'elemento `input` un attributo `type` con il valore `submit`. + +```js +assert.exists(document.querySelector('fieldset + input[type="submit"]')); +``` + +Dovresti assegnare all'elemento `input` un attributo `value` con il valore `Submit`. + +```js +assert.exists(document.querySelector('fieldset + input[value="Submit"]')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md new file mode 100644 index 00000000000..7a5f63793db --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md @@ -0,0 +1,93 @@ +--- +id: 60f81616cff80508badf9ad5 +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +A questo punto, dovresti essere in grado di inviare il modulo. Tuttavia, come puoi notare, non succede molto. + +Per rendere il modulo più interattivo, aggiungi l'attributo `required` agli elementi `input` nel primo `fieldset`. + +Ora, se tenti di inviare il modulo senza compilare i campi richiesti, vedrai un messaggio di errore. + +# --hints-- + +Dovresti assegnare al primo elemento `input` un attributo `required`. + +```js +assert.equal(document.querySelector('input')?.required, true); +``` + +Dovresti assegnare al secondo elemento `input` un attributo `required`. + +```js +assert.equal(document.querySelectorAll('input')?.[1]?.required, true); +``` + +Dovresti assegnare al terzo elemento `input` un attributo `required`. + +```js +assert.equal(document.querySelectorAll('input')?.[2]?.required, true); +``` + +Dovresti assegnare al quarto elemento `input` un attributo `required`. + +```js +assert.equal(document.querySelectorAll('input')?.[3]?.required, true); +``` + +L'`input` di `submit` non dovrebbe avere un attributo `required`. + +```js +assert.equal(document.querySelector('input[type="submit"]')?.required, false); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md new file mode 100644 index 00000000000..7481e8b8e5c --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md @@ -0,0 +1,73 @@ +--- +id: 60f83e7bfc09900959f41e20 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Alcuni valori dell'attributo `type` sono dotati di validazione integrata del modulo. Ad esempio, `type="email"` richiede che il valore sia un indirizzo email valido. + +Aggiungi una validazione personalizzata all'elemento `input` della password aggiungendo un attributo `minlength` con un valore di `8`. In questo modo si evita che vengano inviati input inferiori a 8 caratteri. + +# --hints-- + +Dovresti assegnare all'elemento `input` della password un attributo `minlength`. + +```js +assert.notEqual(document.querySelector('input[type="password"]')?.minLength, -1); +``` + +Dovresti assegnare all'attributo `minlength` il valore `8`. + +```js +assert.equal(document.querySelector('input[type="password"]')?.minLength, 8); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md new file mode 100644 index 00000000000..27ef5f24ac1 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md @@ -0,0 +1,81 @@ +--- +id: 60f84ec41116b209c280ba91 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Con `type="password"` puoi usare l'attributo `pattern` per definire un'espressione regolare a cui la password deve corrispondere per essere considerata valida. + +Aggiungi un attributo `pattern` all'elemento `input` per richiedere la corrispondenza dell'input: `[a-z0-5]{8,}` + +Questa è un'espressione regolare che corrisponde a otto o più lettere minuscole o alle cifre da `0` a `5`. Rimuovi l'attributo `minlength` e fai una prova. + +# --hints-- + +Dovresti assegnare all'elemento `input` della password un attributo `pattern`. + +```js +assert.isNotEmpty(document.querySelector('input[type="password"]')?.pattern); +``` + +Dovresti assegnare all'attributo `pattern` il valore `[a-z0-5]{8,}`. + +```js +assert.equal(document.querySelector('input[type="password"]')?.pattern, '[a-z0-5]{8,}'); +``` + +Dovresti rimuovere l'attributo `minlength` dall'elemento `input` della password. + +```js +assert.equal(document.querySelector('input[type="password"]')?.minLength, -1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f852f645b5310a8264f555.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f852f645b5310a8264f555.md new file mode 100644 index 00000000000..38dd2d1eef1 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f852f645b5310a8264f555.md @@ -0,0 +1,75 @@ +--- +id: 60f852f645b5310a8264f555 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Andiamo proseguiamo con la prossima parte del modulo di registrazione. Questa sezione chiederà il tipo di account che l'utente sta aprendo, e confermerà che l'utente abbia letto i termini e le condizioni. + +Inizia aggiungendo tre elementi `label` al secondo `fieldset`. + +# --hints-- + +Dovresti aggiungere tre elementi `label` al secondo `fieldset`. + +```js +assert.equal(document.querySelectorAll('fieldset')?.[1]?.querySelectorAll('label')?.length, 3); +``` + +Gli elementi `label` dovrebbero essere fratelli. + +```js +assert.exists(document.querySelector('fieldset:nth-child(2)')?.querySelector('label + label + label')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f85a62fb30c80bcea0cedb.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f85a62fb30c80bcea0cedb.md new file mode 100644 index 00000000000..186aefc760f --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f85a62fb30c80bcea0cedb.md @@ -0,0 +1,84 @@ +--- +id: 60f85a62fb30c80bcea0cedb +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Gli utenti potranno scegliere tra `Personal Account` e `Business Account`. + +Per fare ciò, all'interno di ciascuno dei primi due elementi `label`, aggiungi un elemento `input` con `type="radio"`. + +# --hints-- + +Dovresti aggiungere due elementi `input`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(2) input')?.length, 2); +``` + +Dovresti aggiungere un `input` a ciascuno dei primi due elementi `label`. + +```js +assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(1) > input')); +assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(2) > input')); +``` + +Dovresti assegnare a entrambi gli elementi `input` un attributo `type` con il valore `radio`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(2) input[type="radio"]')?.length, 2); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md index c37e362284b..a19be557f50 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md @@ -7,7 +7,7 @@ dashedName: step-23 # --description-- -Per i termini e le condizioni, aggiungi un `input` con un `type` di `checkbox` al terzo elemento `label`. Inoltre, dato che non vogliamo che gli utenti si registrino senza aver letto i termini e le condizioni, rendilo `required`. +Per i termini e le condizioni, aggiungi al terzo elemento `label` un `input` con un attributo `type` con il valore `checkbox`. Inoltre, dato che non vogliamo che gli utenti si registrino senza aver letto i termini e le condizioni, aggiungi un attributo `required`. # --hints-- diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md new file mode 100644 index 00000000000..b223eec9cea --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md @@ -0,0 +1,105 @@ +--- +id: 60f8618d191b940d62038513 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +All'interno di ogni elemento `label` corrispondente, e subito dopo l'elemento `input`, aggiungi uno spazio seguito dal testo: + +```md +Personal Account +Business Account +I accept the terms and conditions +``` + +# --hints-- + +Dovresti assegnare al primo elemento `label` il testo `Personal Account`. + +```js +assert.include(document.querySelector('fieldset:nth-child(2) > label')?.innerText, 'Personal Account'); +``` + +Dovresti assegnare al secondo elemento `label` il testo `Business Account`. + +```js +assert.include(document.querySelector('fieldset:nth-child(2) > label:nth-child(2)')?.innerText, 'Business Account'); +``` + +Dovresti assegnare al terzo elemento `label` il testo `I accept the terms and conditions`. + +```js +assert.include(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)')?.innerText, 'I accept the terms and conditions'); +``` + +Dovresti aggiungere uno spazio prima del testo del primo elemento `label`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) > label')?.innerText?.[0], ' '); +``` + +Dovresti aggiungere uno spazio prima del testo del secondo elemento `label`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(2)')?.innerText?.[0], ' '); +``` + +Dovresti aggiungere uno spazio prima del testo del terzo elemento `label`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)')?.innerText?.[0], ' '); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md new file mode 100644 index 00000000000..d62d1d7c4cf --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md @@ -0,0 +1,83 @@ +--- +id: 60fab4a123ce4b04526b082b +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +I pulsanti di opzione dovrebbero essere selezionabili uno alla volta. Tuttavia, il modulo non sa che gli input di opzione sono correlati. + +Per collegare gli input di opzione, assegna loro lo stesso attributo `name` con il valore `account-type`. Ora, non è possibile selezionare entrambi gli input di opzione allo stesso tempo. + +# --hints-- + +Dovresti assegnare al primo input di opzione l'attributo `name` con il valore `account-type`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(1) input[type="radio"]')?.name, 'account-type'); +``` + +Dovresti assegnare al secondo input di opzione l'attributo `name` con il valore `account-type`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(2) input[type="radio"]')?.name, 'account-type'); +``` + +Non dovresti assegnare l'attributo `name` al `checkbox`. + +```js +assert.isEmpty(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input[type="checkbox"]')?.name); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md new file mode 100644 index 00000000000..bfcae3924c9 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md @@ -0,0 +1,85 @@ +--- +id: 60fab8367d35de04e5cb7929 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Per completare questo `fieldset`, collega il testo `terms and conditions` a questo link: + +```md +https://www.freecodecamp.org/news/terms-of-service/ +``` + +# --hints-- + +Dovresti usare un elemento `a` per linkare terms and conditions. + +```js +assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')); +``` + +Dovresti assegnare all'elemento `a` un attributo `href` con il valore `https://www.freecodecamp.org/news/terms-of-service/`. + +```js +assert.match(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')?.href, /https:\/\/www\.freecodecamp\.org\/news\/terms-of-service\/?/); +``` + +L'elemento `a` dovrebbe racchiudere soltanto il testo `terms and conditions`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')?.textContent, 'terms and conditions'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md new file mode 100644 index 00000000000..1706218f679 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md @@ -0,0 +1,88 @@ +--- +id: 60fab9f17fa294054b74228c +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Passiamo all'ultimo `fieldset`. Cosa succede se vuoi consentire a un utente di caricare un'immagine profilo? + +Beh, il valore `file` delll'attributo type di `input` ti permette esattamente di fare questo. Aggiungi un elemento `label` con il testo `Upload a profile picture:` e aggiungi un `input` che accetta il caricamento di un file. + +# --hints-- + +Dovresti aggiungere un elemento `label` con il testo `Upload a profile picture:`. + +```js +assert.match(document.querySelector('fieldset:nth-child(3) > label')?.innerText, /Upload a profile picture:/i); +``` + +Dovresti annidare un elemento `input` all'interno dell'elemento `label`. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > label > input')); +``` + +Dovresti assegnare all'elemento `input` un attributo `type` con il valore `file`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label > input')?.type, 'file'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md new file mode 100644 index 00000000000..7b15fe3111b --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md @@ -0,0 +1,102 @@ +--- +id: 60fabf0dd4959805dbae09e6 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Aggiungi un altro elemento `label` dopo il primo, con il testo `Input your age (years):`. Quindi, annida un `input` con l'attributo `type` con il valore `number`. + +Poiché non vogliamo che gli utenti di età inferiore ai 13 anni si registrino, aggiungi un attributo `min` all'`input` con il valore `13`. Inoltre, possiamo probabilmente presumere che non ci saranno utenti di età superiore ai 120 anni; aggiungi un attributo `max` con il valore `120`. + +Ora, se qualcuno tenta di inviare il modulo con valori al di fuori dell'intervallo, verrà visualizzato un avviso e il modulo non verrà inviato. Fai una prova. + +# --hints-- + +Dovresti aggiungere un elemento `label` al terzo `fieldset`, dopo l'elemento `label` esistente. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > label + label')); +``` + +Dovresti assegnare all'elemento `label` il testo `Input your age (years):`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2)')?.textContent?.trim(), 'Input your age (years):'); +``` + +Dovresti assegnare all'elemento `label` un `input` con l'attributo `type` con il valore `number`. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')); +``` + +Dovresti assegnare all'elemento `input` un attributo `min` con il valore `13`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')?.min, '13'); +``` + +Dovresti assegnare all'elemento `input` un attributo `max` con il valore `120`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')?.max, '120'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md new file mode 100644 index 00000000000..09004dfceea --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md @@ -0,0 +1,84 @@ +--- +id: 60fac4095512d3066053d73c +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Aggiungere al modulo un menu a discesa è piuttosto facile con l'elemento `select`. L'elemento `select` è un contenitore per un gruppo di elementi `option` e l'elemento `option` funge da etichetta per ciascuna opzione a discesa. Entrambi gli elementi richiedono tag di chiusura. + +Inizia aggiungendo un elemento `select` sotto i due elementi `label`. Poi, annida 5 elementi `option` all'interno dell'elemento `select`. + +# --hints-- + +Dovresti aggiungere un elemento `select` al terzo `fieldset`. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > select')); +``` + +Dovresti annidare 5 elementi `option` all'interno dell'elemento `select`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > select > option')?.length, 5); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md new file mode 100644 index 00000000000..7f4eccee66b --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md @@ -0,0 +1,94 @@ +--- +id: 60fac56271087806def55b33 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Annida l'elemento `select` in un elemento `label` con il testo `How did you hear about us?`. Il testo dovrebbe trovarsi prima dell'elemento `select`. + +# --hints-- + +Dovresti annidare solo l'elemento `select` all'interno di un elemento `label`. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(3) > select')); +``` + +Dovresti assegnare all'elemento `label` il testo `How did you hear about us?`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(3)')?.innerText?.trim(), 'How did you hear about us?'); +``` + +Dovresti posizionare il testo prima dell'elemento `select`. + +```js +assert.match(document.querySelector('fieldset:nth-child(3) > label:nth-child(3)')?.innerHTML?.replace(/[\t\n]+/g, ''), /^How did you hear about us\?/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md new file mode 100644 index 00000000000..6814457ad3d --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md @@ -0,0 +1,116 @@ +--- +id: 60fac8d7fdfaee0796934f20 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Le opzioni a discesa sono attualmente vuote. Per assegnare loro il contenuto, aggiungi in ordine il seguente testo a ogni elemento `option`: + +```md +(select one) +freeCodeCamp News +freeCodeCamp YouTube Channel +freeCodeCamp Forum +Other +``` + +# --hints-- + +Dovresti assegnare al primo elemento `option` il testo `(select one)`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[0]?.textContent, '(select one)'); +``` + +Dovresti assegnare al secondo elemento `option` il testo `freeCodeCamp News`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[1]?.textContent, 'freeCodeCamp News'); +``` + +Dovresti assegnare alla terzo elemento `option` il testo `freeCodeCamp YouTube Channel`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[2]?.textContent, 'freeCodeCamp YouTube Channel'); +``` + +Dovresti assegnare al quarto elemento `option` il testo `freeCodeCamp Forum`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[3]?.textContent, 'freeCodeCamp Forum'); +``` + +Dovresti assegnare al quinto elemento `option` il testo `Other`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[4]?.textContent, 'Other'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md new file mode 100644 index 00000000000..92ada1b47a4 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md @@ -0,0 +1,110 @@ +--- +id: 60faca286cb48b07f6482970 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Se il modulo viene inviato con un'opzione selezionata il server non ottiene un valore utile. Per questo motivo, ogni elemento `option` ha bisogno di un attributo `value`. Senza di esso, il contenuto del testo dell'elemento `option` verrà inviato al server. + +Assegna al primo elemento `option` un attributo `value` di `""` e agli elementi `option` successivi un attributo `value` con i valori da `1` a `4`. + +# --hints-- + +Dovresti assegnare al primo elemento `option` un attributo `value` di `""`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[0]?.value, ''); +``` + +Dovresti assegnare al secondo elemento `option` un attributo `value` di `1`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[1]?.value, '1'); +``` + +Dovresti assegnare al terzo elemento `option` un attributo `value` di `2`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[2]?.value, '2'); +``` + +Dovresti assegnare al quarto elemento `option` un attributo `value` di `3`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[3]?.value, '3'); +``` + +Dovresti assegnare al quinto elemento `option` un attributo `value` di `4`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[4]?.value, '4'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facf914c7b9b08d7510c2c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facf914c7b9b08d7510c2c.md new file mode 100644 index 00000000000..7fc61c63e9c --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facf914c7b9b08d7510c2c.md @@ -0,0 +1,95 @@ +--- +id: 60facf914c7b9b08d7510c2c +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +L'elemento `textarea` è troppo piccolo. Per assegnargli una dimensione iniziale, puoi aggiungere gli attributi `rows` e `cols`. + +Aggiungi una dimensione iniziale di `3` righe e `30` colonne. + +# --hints-- + +Dovresti assegnare all'elemento `textarea` un attributo `rows` con il valore `3`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.rows, 3); +``` + +Dovresti assegnare all'elemento `textarea` un attributo `cols` con il valore `30`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.cols, 30); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md new file mode 100644 index 00000000000..90776fb8ada --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md @@ -0,0 +1,95 @@ +--- +id: 60fad0a812d9890938524f50 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Per dare ai Campers un'idea di cosa mettere nella loro biografia, viene utilizzato l'attributo `placeholder`. Il `placeholder` accetta un valore di testo, che viene visualizzato fino a quando l'utente inizia a digitare. + +Dai all'elemento `textarea` un attributo `placeholder` con il valore `I like coding on the beach...`. + +# --hints-- + +Dovresti assegnare all'elemento `textarea` un attributo `placeholder`. + +```js +assert.isNotEmpty(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.placeholder); +``` + +Dovresti assegnare all'attributo `placeholder` il valore `I like coding on the beach...`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.placeholder, 'I like coding on the beach...'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md new file mode 100644 index 00000000000..dc53c9b9520 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md @@ -0,0 +1,155 @@ +--- +id: 60fad1cafcde010995e15306 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Per quanto riguarda l'invio dei moduli, è utile oltre che una buona pratica, fornire ogni elemento inviabile di un attributo `name`. Questo attributo è utilizzato per identificare l'elemento una volta che il modulo è stato inviato. + +Vai avanti, e assegna a ogni elemento inviabile un attributo `name` univoco di tua scelta. _Eccetto i due input `radio`._ + +# --hints-- + +Dovresti assegnare all'`input` relativo al nome un attributo `name`. _PS Io avrei scelto `first-name`_ + +```js +assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(1) > input')?.name); +``` + +Dovresti assegnare all'`input` relativo al cognome un attributo `name`. _PS Io avrei scelto `last-name`_ + +```js +assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(2) > input')?.name); +``` + +Dovresti assegnare all'`email` un attributo `name`. _PS Io avrei scelto `email`_ + +```js +assert.isNotEmpty(document.querySelector('input[type="email"]')?.name); +``` + +Dovresti assegnare alla `password` un attributo `name`. _PS Io avrei scelto `password`_ + +```js +assert.isNotEmpty(document.querySelector('input[type="password"]')?.name); +``` + +Dovresti assegnare alla `checkbox` un attributo `name`. _PS Io avrei scelto `terms`_ + +```js +assert.isNotEmpty(document.querySelector('input[type="checkbox"]')?.name); +``` + +Dovresti assegnare al `file` un attributo `name`. _PS Io avrei scelto `file`_ + +```js +assert.isNotEmpty(document.querySelector('input[type="file"]')?.name); +``` + +Dovresti assegnare al `number` un attributo `name`. _PS Io avrei scelto `age`_ + +```js +assert.isNotEmpty(document.querySelector('input[type="number"]')?.name); +``` + +Dovresti assegnare all'elemento `select` un attributo `name`. _PS Io avrei scelto `referrer`_ + +```js +assert.isNotEmpty(document.querySelector('select')?.name); +``` + +Dovresti assegnare all'elemento `textarea` un attributo `name`. _PS Io avrei scelto `bio`_ + +```js +assert.isNotEmpty(document.querySelector('textarea')?.name); +``` + +Non dovresti assegnare a nessun elemento `option` un attributo `name`. + +```js +[...document.querySelectorAll('option')]?.forEach(option => assert.isUndefined(option?.name)); +``` + +Non dovresti assegnare a nessun elemento `label` un attributo `name`. + +```js +[...document.querySelectorAll('label')]?.forEach(label => assert.isUndefined(label?.name)); +``` + +Non dovresti assegnare a nessun elemento `fieldset` un attributo `name`. + +```js +[...document.querySelectorAll('fieldset')]?.forEach(fieldset => assert.isEmpty(fieldset?.name)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md new file mode 100644 index 00000000000..4df5b97af47 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md @@ -0,0 +1,102 @@ +--- +id: 60fad6dfcc0d930a59becf12 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +L'HTML per il modulo di registrazione è terminato. Ora puoi concentrarti ad abbellire un po' la pagina. + +Inizia cambiando il carattere del `body` in `Tahoma` e la dimensione del carattere in `16px`. + +# --hints-- + +Dovresti usare la proprietà `font-family` per cambiare il carattere. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily); +``` + +Dovresti assegnare alla proprietà `font-family` il valore `Tahoma`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily, 'Tahoma'); +``` + +Dovresti assegnare alla proprietà `font-size` il valore `16px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontSize, '16px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +--fcc-editable-region-- +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + +} +--fcc-editable-region-- + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md new file mode 100644 index 00000000000..5f577c36290 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md @@ -0,0 +1,103 @@ +--- +id: 60fad8e6148f310bba7890b1 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Centra gli elementi `h1` e `p` dando loro una proprietà `margin` con il valore `1em auto`. Quindi, allinea anche il testo. + +# --hints-- + +Dovresti usare la virgola all'interno di un unico selettore per agire sullo stile degli elementi `h1` e `p`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('h1, p')); +``` + +Dovresti utilizzare una proprietà `margin` di `1em auto` per centrare gli elementi `h1` e `p`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.margin, '1em auto'); +``` + +Dovresti usare una proprietà `text-align` con il valore `center` per centrare il testo degli elementi `h1` e `p`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.textAlign, 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md new file mode 100644 index 00000000000..aa277a14949 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md @@ -0,0 +1,120 @@ +--- +id: 60fad99e09f9d30c1657e790 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Centra l'elemento `form`, assegnandogli una proprietà `margin` con il valore `0 auto`. Quindi, fissa la sua larghezza massima a `500px` e la larghezza minima a `300px`. In questo intervallo, assegnagli una proprietà `width` di `60vw`. + +# --hints-- + +Dovresti usare un selettore `form` per lo stile dell'elemento `form`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('form')); +``` + +Dovresti assegnare all'elemento `form` una proprietà `margin` con il valore `0 auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.margin, '0px auto'); +``` + +Dovresti assegnare all'elemento `form` una proprietà `max-width` con il valore `500px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.maxWidth, '500px'); +``` + +Dovresti assegnare all'elemento `form` una proprietà `min-width` con il valore `300px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.minWidth, '300px'); +``` + +Dovresti assegnare all'elemento `form` una proprietà `width` con il valore `60vw`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.width, '60vw'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md new file mode 100644 index 00000000000..de2ea8d9b2d --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md @@ -0,0 +1,121 @@ +--- +id: 60fadb18058e950c73925279 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Durante lo sviluppo, è utile vedere i bordi predefiniti degli elementi `fieldset`. Tuttavia, rendono il contenuto troppo separato. + +Rimuovi i bordi agendo sul valore della proprietà `border` e aggiungi `2rem` di paddingsolo in alto e in basso per ogni `fieldset`. Assicurati di rimuovere il `padding` di sinistra e destra. + +# --hints-- + +Puoi rimuovere i bordi utilizzando il valore `none` o `0` per la proprietà `border`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle('fieldset')?.border, /(none)|(0px)/); +``` + +Dovresti aggiungere un `padding` di `2rem` nella parte superiore e inferiore di ogni `fieldset`. + +```js +const fieldset = new __helpers.CSSHelp(document).getStyle('fieldset') +assert.equal(fieldset?.paddingTop, '2rem'); +assert.equal(fieldset?.paddingBottom, '2rem'); +``` + +Dovresti rimuovere il `padding` di sinistra e destra per ogni `fieldset`. + +```js +const fieldset = new __helpers.CSSHelp(document).getStyle('fieldset') +assert.equal(fieldset?.paddingLeft, '0px'); +assert.equal(fieldset?.paddingRight, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md new file mode 100644 index 00000000000..9e4e8b6173b --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md @@ -0,0 +1,114 @@ +--- +id: 60fadce90f85c50d0bb0dd4f +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Per dare agli elementi `fieldset` un po' di separazione, seleziona tutti gli elementi `fieldset` tranne l'ultimo e assegna loro una proprietà `border-bottom` con il valore `3px solid #3b3b4f`. + +# --hints-- + +Puoi usare la pseudo-classe `:not(:last-of-type)` per selezionare tutti gli elemento tranne l'ultimo. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('fieldset:not(:last-of-type)')); +``` + +Dovresti assegnare agli elementi `fieldset` una proprietà `border-bottom` con il valore `3px solid #3b3b4f`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('fieldset:not(:last-of-type)')?.borderBottom, '3px solid rgb(59, 59, 79)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md new file mode 100644 index 00000000000..f02733932b0 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md @@ -0,0 +1,151 @@ +--- +id: 60fadd972e6ffe0d6858fa2d +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Sarebbe più carino far sì che il testo degli elementi `label` appaia sopra gli elementi form. + +Seleziona tutti gli elementi `input`, `textarea` e `select` e fai in modo di impostarli alla larghezza massima dei loro elementi genitori. + +Aggiungi anche una proprietà `margin` di `10px` nella parte superiore degli elementi selezionati. Imposta gli altri margini a `0`. + +# --hints-- + +Dovresti usare un selettore di elementi separati da virgola per selezionare gli elementi `input`, `textarea` e `select`. + +```js +assert.isTrue(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].some(selector => new __helpers.CSSHelp(document).getStyle(selector))); +``` + +Dovresti impostare la proprietà `width` al `100%`. + +```js +const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.width, '100%'); +``` + +Dovresti impostare la proprietà `margin-top` a `10px`. + +```js +const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginTop, '10px'); +``` + +Dovresti impostare la proprietà `margin-bottom` a `0`. + +```js +const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginBottom, '0px'); +``` + +Dovresti impostare la proprietà `margin-left` a `0`. + +```js +const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginLeft, '0px'); +``` + +Dovresti impostare la proprietà `margin-right` a `0`. + +```js +const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginRight, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md new file mode 100644 index 00000000000..0623265db9f --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md @@ -0,0 +1,131 @@ +--- +id: 60fadfa2b540b70dcfa8b771 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Per il secondo `fieldset`, fai sì che il testo degli elementi `input` e `label` appaia sulla stessa riga. + +Inizia, assegnando agli elementi `input` nel secondo `fieldset` la classe `inline`. + +# --hints-- + +Dovresti assegnare al primo `input` la classe `inline`. + +```js +assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[0]?.classList?.contains('inline')); +``` + +Dovresti assegnare al secondo `input` la classe `inline`. + +```js +assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[1]?.classList?.contains('inline')); +``` + +Dovresti assegnare al terzo `input` la classe `inline`. + +```js +assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[2]?.classList?.contains('inline')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md new file mode 100644 index 00000000000..9321b9b4ae7 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md @@ -0,0 +1,125 @@ +--- +id: 60fc219d333e37046f474a6e +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Seleziona solo gli elementi `.inline` e assegna loro una proprietà `width` con il valore `unset`. In questo modo, rimuoverai la regola precedente che impostava tutti gli elementi `input` su `width: 100%`. + +# --hints-- + +Dovresti usare il selettore `.inline`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.inline')); +``` + +Dovresti assegnare agli elementi `.inline` una proprietà `width` con il valore `unset`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.width, 'unset'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc22d1e64d1b04cdd4e602.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc22d1e64d1b04cdd4e602.md new file mode 100644 index 00000000000..0a8b861731c --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc22d1e64d1b04cdd4e602.md @@ -0,0 +1,140 @@ +--- +id: 60fc22d1e64d1b04cdd4e602 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Aggiungi un po' di spazio tra gli elementi `.inline` e il testo dei `label` usando una proprietà `margin` di `0.5em`. Inoltre, imposta tutti gli altri margini a `0`. + +# --hints-- + +Dovresti assegnare agli elementi `.inline` una proprietà `margin-right` di `0.5em`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginRight, '0.5em'); +``` + +Dovresti assegnare agli elementi `.inline` una proprietà `margin-bottom` di `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginBottom, '0px'); +``` + +Dovresti assegnare agli elementi `.inline` una proprietà `margin-top` di `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginTop, '0px'); +``` + +Dovresti assegnare agli elementi `.inline` una proprietà `margin-left` di `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginLeft, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +--fcc-editable-region-- +.inline { + width: unset; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md new file mode 100644 index 00000000000..c69582de3e1 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md @@ -0,0 +1,125 @@ +--- +id: 60fc236dc04532052926fdac +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Se guardi da vicino, noterai che gli elementi `.inline` sono troppo alti sulla riga. + +Per impedirlo, imposta la proprietà `vertical-align` su `middle`. + +# --hints-- + +Dovresti impostare la proprietà `vertical-align` su `middle` per tutti gli elementi `.inline`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.verticalAlign, 'middle'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +--fcc-editable-region-- +.inline { + width: unset; + margin: 0 0.5em 0 0; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md new file mode 100644 index 00000000000..3823f7470ba --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md @@ -0,0 +1,142 @@ +--- +id: 60ffe1bc30415f042faea936 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Per rendere gli elementi `input` e `textarea` uniformi con il tema di sfondo, imposta la loro proprietà `background-color` a `#0a0a23`. Quindi, assegna loro dei bordi da `1px`, `solid` e di colore `#0a0a23`. + +# --hints-- + +Dovresti usare un selettore con gli elementi separati da virgola per selezionare gli elementi `input` e `textarea`. + +```js +const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); +assert.isTrue(['input, textarea', 'textarea, input'].some(selFunc)); +``` + +Dovresti assegnareagli elementi `input` e `textarea` un `background-color` di `#0a0a23`. + +```js +const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.backgroundColor, 'rgb(10, 10, 35)'); +``` + +Dovresti assegnare agli elementi `input` e `textarea` un bordo di `1px`, `solid` e di colore `#0a0a23`. + +```js +const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderWidth, '1px'); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderStyle, 'solid'); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderColor, 'rgb(10, 10, 35)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe3936796ac04959285a9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe3936796ac04959285a9.md new file mode 100644 index 00000000000..e197c1b8f08 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe3936796ac04959285a9.md @@ -0,0 +1,139 @@ +--- +id: 60ffe3936796ac04959285a9 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Attualmente, se digiti all'interno degli elementi `input` o `textarea`, non sarai in grado di vedere il testo. Inoltre, non sono abbastanza alti per essere utilizzati comodamente. + +Assegna alla proprietà `color` il valore `#ffffff` e alla proprietà `min-height` il valore `2em`. + +# --hints-- + +Dovresti assegnare alla proprietà `color` il valore `#ffffff`. + +```js +const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.color, 'rgb(255, 255, 255)'); +``` + +Dovresti assegnare alla proprietà `min-height` il valore `2em`. + +```js +const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.minHeight, '2em'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +--fcc-editable-region-- +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + +} +--fcc-editable-region-- + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md new file mode 100644 index 00000000000..bd601622f0a --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md @@ -0,0 +1,144 @@ +--- +id: 60ffe4f4ec18cd04dc470c56 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Ciò che desideri è che l'elemento `select` abbia uno sfondo bianco, ma ora non ha lo stesso valore della proprietà `min-height` degli elementi `input` e `textarea`. + +Sposta la proprietà `min-height` e il relativo valore in modo che tutti e tre i tipi di elemento abbiano lo stesso valore di `min-height` e l'elemento `select` abbia ancora un sfondo bianco. + +# --hints-- + +Dovresti spostare la proprietà e il valore `min-height` nel selettore `input, textarea, select`. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight); +``` + +Dovresti assegnare al selettore `input, textarea, select` una proprietà `min-height` di `2em`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight, '2em'); +``` + +Dovresti rimuovere la dichiarazione `min-height` dal selettore `input, textarea`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea')?.minHeight); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +--fcc-editable-region-- +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; + min-height: 2em; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe69ee377c6055e192a46.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe69ee377c6055e192a46.md new file mode 100644 index 00000000000..14301281c1b --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe69ee377c6055e192a46.md @@ -0,0 +1,152 @@ +--- +id: 60ffe69ee377c6055e192a46 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Per lo stile del pulsante Submit, puoi usare un selettore di _attributi_ che seleziona un elemento in base al valore di uno specifico attributo. Ecco un esempio: + +```css +input[name="password"] +``` + +Con questa sintassi selezioni gli elementi `input` con un attributo `name` con il valore `password`. + +Adesso, usa il selettore attributi per lo stile del pulsante Submit con una proprietà `display` di `block`, e una proprietà `width` del `60%`. + +# --hints-- + +Dovresti usare un selettore di attributi di `input[type="submit"]` per agire sullo stile del pulsante Submit. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')); +``` + +Dovresti assegnare al pulsante Submit una proprietà `display` con il valore `block`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.display, 'block'); +``` + +Dovresti assegnare al pulsante Submit una proprietà `width` del `60%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.width, '60%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md new file mode 100644 index 00000000000..81094a87f17 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md @@ -0,0 +1,145 @@ +--- +id: 60ffe7d8aae62c05bcc9e7eb +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Con una proprietà `display` con il valore `block`, il pulsante Submit si trova a filo con il bordo sinistro del suo genitore. + +Usa la stessa tecnica usata per centrare l'elemento `form` per centrare il pulsante Submit. + +# --hints-- + +Dovresti assegnare al pulsante Submit una proprietà `margin` con il valore `0 auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.margin, '0px auto'); +``` + +Non dovresti assegnare al pulsante Submit delle proprietà `min-width` o `max-width`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.minWidth); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.maxWidth); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +--fcc-editable-region-- +input[type="submit"] { + display: block; + width: 60%; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md new file mode 100644 index 00000000000..c69facd8229 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md @@ -0,0 +1,143 @@ +--- +id: 60ffe8a5ceb0e90618db06d9 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Per rendere il pulsante Submit più in linea con il resto del modulo, assegnagli lo stesso valore della proprietà `height` degli altri campi (`2em`). Inoltre, aumenta la proprietà `font-size` a `1.1rem`. + +# --hints-- + +Dovresti assegnare al pulsante Submit una proprietà `height` di `2em`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.height, '2em'); +``` + +Dovresti assegnare al pulsante Submit una proprietà `font-size` di `1.1rem`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.fontSize, '1.1rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +--fcc-editable-region-- +input[type="submit"] { + display: block; + width: 60%; + margin: 0 auto; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe947a868ec068f7850f6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe947a868ec068f7850f6.md new file mode 100644 index 00000000000..fee4d24b2f9 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe947a868ec068f7850f6.md @@ -0,0 +1,145 @@ +--- +id: 60ffe947a868ec068f7850f6 +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Per far distinguere il pulsante Submit, assegnagli una proprietà `background-color` di `#3b3b4f` e una proprietà `border-color` con il valore `white`. + +# --hints-- + +Dovresti assegnare al pulsante Submit una proprietà `background-color` con il valore `#3b3b4f`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.backgroundColor, 'rgb(59, 59, 79)'); +``` + +Dovresti assegnare al pulsante Submit una proprietà `border-color` con il valore `white`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.borderColor, 'white'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +--fcc-editable-region-- +input[type="submit"] { + display: block; + width: 60%; + margin: 0 auto; + height: 2em; + font-size: 1.1rem; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe9cb47809106eda2f2c9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe9cb47809106eda2f2c9.md new file mode 100644 index 00000000000..a8d90300817 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe9cb47809106eda2f2c9.md @@ -0,0 +1,150 @@ +--- +id: 60ffe9cb47809106eda2f2c9 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Infine, dovresti separare il pulsante Submit dal `fieldset` superiore e regolare la sua larghezza minima a `300px`. + +Cambia la proprietà `margin` per aggiungere `1em` in alto e in basso, e imposta la larghezza come descritto sopra. + +# --hints-- + +Non dovresti cambiare la proprietà `width`. Usa la proprietà `min-width`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.width, '60%'); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.minWidth); +``` + +Dovresti utilizzare la proprietà `margin` esistente per includere `1em` in alto e in basso. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.margin, '1em auto'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +--fcc-editable-region-- +input[type="submit"] { + display: block; + width: 60%; + margin: 0 auto; + height: 2em; + font-size: 1.1rem; + background-color: #3b3b4f; + border-color: white; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md new file mode 100644 index 00000000000..0b2fe9dc3a0 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md @@ -0,0 +1,151 @@ +--- +id: 60ffec2825da1007509ddd06 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +La maggior parte dei browser applica le proprie proprietà e valori CSS predefiniti per diversi elementi. Se guardi attentamente, potresti essere notare che l'`input` del file è più piccolo del testo degli altri elementi `input`. L'impostazione predefinita di un `padding` è `1px 2px` per gli elementi `input` in cui puoi scrivere. + +Usando un altro selettore di attributi, agisci sullo stile degli `input` con un attributo `type` del valore `file` per ottenere lo stesso padding degli altri elementi `input`. + +# --hints-- + +Dovresti usare un selettore di attributi per lo stile dell'elemento `input`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('input[type="file"]')); +``` + +Dovresti assegnare a `input[type="file"]` un `padding` di `1px 2px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="file"]')?.padding, '1px 2px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +input[type="submit"] { + display: block; + width: 60%; + margin: 1em auto; + height: 2em; + font-size: 1.1rem; + background-color: #3b3b4f; + border-color: white; + min-width: 300px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md new file mode 100644 index 00000000000..7b23c286aac --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md @@ -0,0 +1,152 @@ +--- +id: 60ffecefac971607ae73c60f +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Parlando di `padding`, il pulsante Submit si trova in fondo all'elemento `form`. Aggiungi `2em` di `padding` solo in fondo al `form`. + +# --hints-- + +Dovresti usare la proprietà `padding-bottom`. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom); +``` + +Dovresti assegnare alla proprietà `padding-bottom` il valore `2em`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom, '2em'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +--fcc-editable-region-- +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; + +} +--fcc-editable-region-- + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +input[type="submit"] { + display: block; + width: 60%; + margin: 1em auto; + height: 2em; + font-size: 1.1rem; + background-color: #3b3b4f; + border-color: white; + min-width: 300px; +} + +input[type="file"] { + padding: 1px 2px; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md new file mode 100644 index 00000000000..bf1be73c7dc --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md @@ -0,0 +1,284 @@ +--- +id: 60ffefd6479a3d084fb77cbc +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Come ultima cosa, modifica il colore del testo del link `terms and conditions` in `#dfdfe2`. + +Ottimo lavoro! Hai completato la parte finale del progetto _Registration Form_. + +# --hints-- + +Dovresti usare il selettore `a`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('a')); +``` + +Dovresti assegnare agli elementi `a` una proprietà `color` con il valore `#dfdfe2`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; + padding-bottom: 2em; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +input[type="submit"] { + display: block; + width: 60%; + margin: 1em auto; + height: 2em; + font-size: 1.1rem; + background-color: #3b3b4f; + border-color: white; + min-width: 300px; +} + +input[type="file"] { + padding: 1px 2px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +# --solutions-- + +```html + + + +Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; + padding-bottom: 2em; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +input[type="submit"] { + display: block; + width: 60%; + margin: 1em auto; + height: 2em; + font-size: 1.1rem; + background-color: #3b3b4f; + border-color: white; + min-width: 300px; +} + +input[type="file"] { + padding: 1px 2px; +} + +a { + color: #dfdfe2; +} + +``` diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-data-structures/create-complex-multi-dimensional-arrays.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-data-structures/create-complex-multi-dimensional-arrays.md index 45bca3483a0..49aedd8acc1 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-data-structures/create-complex-multi-dimensional-arrays.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-data-structures/create-complex-multi-dimensional-arrays.md @@ -8,7 +8,7 @@ dashedName: create-complex-multi-dimensional-arrays # --description-- -お疲れ様！ 配列について多くのことを学びましたね！ かなりハイレベルな概要でしたが、配列の操作についてはまだ学ぶべきことがたくさんあります。その多くはこのあとのセクションで説明していきます。 ですがオブジェクトに移る前に、もう一度確認しておきましょう。これまでのチャレンジで取り上げたものより、配列をもう少し複雑にする方法について見ていきます。 +お疲れ様！ 配列について多くのことを学びましたね！ かなりハイレベルな概要でしたが、配列の操作についてはまだ学ぶべきことがたくさんあります。その多くはこのあとのセクションで説明していきます。 ではオブジェクトの話に移る前に、配列についてもう一度確認しておきましょう。これまでのチャレンジで取り上げたものより、配列をもう少し複雑にする方法について見ていきます。 配列をデータ構造として捉えるときに最も強力な機能の一つは、配列に他の配列を含めることができる、あるいは完全に他の配列で構成することができるという点です。 これまでのチャレンジでも、配列を含む配列を取り上げてきましたが、それらはかなり単純な例でした。 しかし、配列では他の配列を格納できる無限の深さの配列を扱うことができ、含まれる各配列にも任意のレベルの深さを持たせることができます。さらにそこに含まれる配列も同様です。 このように、配列はたちまち非常に複雑なデータ構造になる可能性があります。こうした配列のことを多次元配列、またはネストされた配列と呼びます。 以下の例を考えてみましょう。 diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/access-array-data-with-indexes.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/access-array-data-with-indexes.md index ad46146ef72..6a70356523f 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/access-array-data-with-indexes.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/access-array-data-with-indexes.md @@ -19,13 +19,11 @@ dashedName: access-array-data-with-indexes ```js const array = [50, 60, 70]; -array[0]; +console.log(array[0]); const data = array[1]; ``` -ここで、`array[0]` は `50`、`data` の値は `60` となります。 - -**注:** 「`array [0]`」のように、配列名と角括弧 (ブラケット) の間にスペースを入れないでください。 JavaScript はこれを正しく処理できますが、このコードを読む他のプログラマーを混乱させる恐れがあります。 +ここで、`console.log(array[0])` は `50` を出力し、`data` の値は `60` となります。 # --instructions-- diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/decrement-a-number-with-javascript.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/decrement-a-number-with-javascript.md index 863461b0de8..cee75294562 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/decrement-a-number-with-javascript.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/decrement-a-number-with-javascript.md @@ -38,18 +38,22 @@ assert(myVar === 10); `myVar = myVar - 1;` を書き換える必要があります。 ```js -assert( - /let\s*myVar\s*=\s*11;\s*\/*.*\s*([-]{2}\s*myVar|myVar\s*[-]{2});/.test(code) -); +assert(!code.match(/myVar\s*=\s*myVar\s*[-]\s*1.*?;?/)); ``` -`myVar` で `--` 演算子を使用する必要があります。 +`myVar` に `10` を代入してはいけません。 + +```js +assert(!code.match(/myVar\s*=\s*10.*?;?/)); +``` + +`myVar` には `--` 演算子を使用する必要があります。 ```js assert(/[-]{2}\s*myVar|myVar\s*[-]{2}/.test(code)); ``` -指定のコメントより上にあるコードを変更しないでください。 +指定されたコメントより上のコードを変更してはいけません。 ```js assert(/let myVar = 11;/.test(code)); diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md index 8fb2db74adb..2107b9e97ab 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md @@ -15,13 +15,13 @@ dashedName: find-the-length-of-a-string console.log("Alan Peter".length); ``` -この例では値 `10` がコンソールに表示されます。 +コンソールに `10` の値が表示されます。 なお、"Alan" と "Peter" の間のスペースも文字としてカウントされます。 たとえば、変数 `const firstName = "Ada"` を作成した場合、`firstName.length` プロパティを使用して文字列 `Ada` の長さを取得できます。 # --instructions-- -`.length` プロパティを使用して、`lastName` 変数の文字数をカウントし、それを `lastNameLength` に代入してください。 +`.length` プロパティを使って、`lastNameLength` に `lastName` の文字数を設定します。 # --hints-- diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md index c62d7f40b1e..d8f5435258f 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md @@ -31,17 +31,17 @@ assert( ); ``` -`updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me")` の実行後、`tracks` の末尾の要素は文字列 `Take a Chance on Me` になる必要があります。 +`updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me")` の実行後、`tracks` 配列は、文字列 `Take a Chance on Me` が末尾かつ唯一の要素になる必要があります。 ```js assert( - updateRecords(_recordCollection, 5439, 'tracks', 'Take a Chance on Me')[5439][ - 'tracks' - ].pop() === 'Take a Chance on Me' + updateRecords(_recordCollection, 5439, 'tracks', 'Take a Chance on Me') && + _recordCollection[5439]['tracks'].length === 1 && + _recordCollection[5439]['tracks'].pop() === 'Take a Chance on Me' ); ``` -`updateRecords(recordCollection, 2548, "artist", "")` の実行後、`artist` は設定されない必要があります。 +`updateRecords(recordCollection, 2548, "artist", "")` の実行後、`artist` は未設定であるべきです。 ```js updateRecords(_recordCollection, 2548, 'artist', ''); @@ -58,7 +58,7 @@ assert( ); ``` -`updateRecords(recordCollection, 2468, "tracks", "Free")` の実行後、`tracks` の先頭の要素は文字列 `1999` になる必要があります。 +`updateRecords(recordCollection, 2468, "tracks", "Free")` の実行後、`tracks` の先頭の要素は文字列 `1999` であるべきです。 ```js assert( @@ -68,7 +68,7 @@ assert( ); ``` -`updateRecords(recordCollection, 2548, "tracks", "")` の実行後、`tracks` は設定されない必要があります。 +`updateRecords(recordCollection, 2548, "tracks", "")` の実行後、`tracks` は未設定であるべきです。 ```js updateRecords(_recordCollection, 2548, 'tracks', ''); diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables.md index fbb28d0d2c9..00dda8d64f2 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables.md @@ -9,7 +9,7 @@ dashedName: understanding-uninitialized-variables # --description-- -JavaScript で変数が宣言されるとき、その初期値は `undefined` です。 `undefined` の変数に対して数値演算を行うと、結果は `NaN` になります。これは、"Not a Number" (数字ではない) という意味です。 `undefined` の変数と文字列を連結すると、文字通り `undefined` という文字列が得られます。 +JavaScript で変数が宣言されるとき、その初期値は `undefined` です。 `undefined` の変数に対して数値演算を行うと、結果は `NaN` になります。これは、"Not a Number" (数字ではない) という意味です。 `undefined` の変数を文字列と連結した場合には、`undefined` という文字列が得られます。 # --instructions-- @@ -17,19 +17,19 @@ JavaScript で変数が宣言されるとき、その初期値は `undefined` # --hints-- -`a` を定義し、計算の結果 `6` の値を持つようにしてください。 +`a` を定義し、最終的な値が `6` になるようにしてください。 ```js assert(typeof a === 'number' && a === 6); ``` -`b` を定義し、計算の結果 `15` の値を持つようにしてください。 +`b` を定義し、最終的な値が `15` になるようにしてください。 ```js assert(typeof b === 'number' && b === 15); ``` -`c` は `undefined` を含まず、文字列の値 `I am a String!` を持つようにしてください。 +`c` は `undefined` を含まず、最終的な値が文字列の `I am a String!` になるようにしてください。 ```js assert(!/undefined/.test(c) && c === 'I am a String!'); diff --git a/curriculum/challenges/japanese/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md b/curriculum/challenges/japanese/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md index 3077421baa8..a375332f0e4 100644 --- a/curriculum/challenges/japanese/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md +++ b/curriculum/challenges/japanese/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md @@ -30,7 +30,7 @@ dashedName: timestamp-microservice }; ``` -有効な日付を持つ `/api/:date?` へのリクエストに対して、JSON オブジェクトを返し、その `unix` キーの値は入力日付を表す Unix タイムスタンプ (ミリ秒) の値である必要があります。 +有効な日付を持つ `/api/:date?` へのリクエストに対して、JSON オブジェクトを返し、その `unix` キーの値は入力日付を表す Unix タイムスタンプ (ミリ秒単位で、データ型は Number) の値である必要があります。 ```js (getUserInput) => diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md index dfe26e78e6c..8f4af068323 100644 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md +++ b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md @@ -1,6 +1,6 @@ --- id: 5e7b9f080b6c005b0e76f063 -title: ひと続きとして処理する +title: ファイルをシーケンスとして扱う challengeType: 11 videoId: cIA0EokbaHE bilibiliIds: diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md index 3eb692fb59e..e39ac737153 100644 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md +++ b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md @@ -14,7 +14,7 @@ dashedName: iterations-loop-idioms ## --text-- -次のコードでは、値のリストから最小値を見つけようとしています。 1 行にエラーがあり、コードが期待どおりに動作しません。 どの行ですか？ +次のコードでは、値のリストから最小値を見つけようとしています。 この中の 1 行に誤りがあり、コードが期待どおりに動作しません。 どの行ですか？ ```python smallest = None diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md new file mode 100644 index 00000000000..300f0729028 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md @@ -0,0 +1,131 @@ +--- +id: 612e6afc009b450a437940a1 +title: ステップ 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +HTML の基本的な構造から始めましょう。 `DOCTYPE` 宣言と、`html`、`head`、`body`、`title` 要素を追加してください。 `title` を `Piano` に設定してください。 + +# --hints-- + +コードに `DOCTYPE` 参照を入れる必要があります。 + +```js +assert(code.match(/` を入力して、`DOCTYPE` 宣言を閉じる必要があります。 + +```js +assert(code.match(//gi)); +``` + +`html` 要素には開始タグが必要です。 + +```js +assert(code.match(/
+
+ --fcc-editable-region--
+
+
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md
new file mode 100644
index 00000000000..76ff9d12636
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md
@@ -0,0 +1,74 @@
+---
+id: 612e8279827a28352ce83a72
+title: ステップ 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+ここで、`.key` の要素を 7 つまとめてコピーし、`.keys` の div 要素内に 2 セット追加で貼り付けてください。
+
+# --hints--
+
+`.key` 要素が 21 個必要です。
+
+```js
+const keys = document.querySelectorAll('.key');
+assert(keys?.length === 21);
+```
+
+`.black--key` 要素が 15 個必要です。
+
+```js
+const blackKeys = document.querySelectorAll('.black--key');
+assert(blackKeys?.length === 15);
+```
+
+`.key` 要素はすべて `.keys` 要素の中にある必要があります。
+
+```js
+const keys = document.querySelector('.keys');
+assert(keys?.querySelectorAll('.key')?.length === 21);
+```
+
+`.black--key` 要素はすべて `.keys` 要素の中にある必要があります。
+
+```js
+const keys = document.querySelector('.keys');
+assert(keys?.querySelectorAll('.black--key')?.length === 15);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region--
+
+
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e83ec2eca1e370f830511.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e83ec2eca1e370f830511.md
new file mode 100644
index 00000000000..b62edd7fc41
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e83ec2eca1e370f830511.md
@@ -0,0 +1,99 @@
+---
+id: 612e83ec2eca1e370f830511
+title: ステップ 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+`link` 要素を 1 つ `head` 要素内に追加してください。 その `link` 要素の、`rel` 属性の値を `stylesheet` に、`href` 属性の値を `./styles.css` に設定してください。
+
+# --hints--
+
+コードには `link` 要素が 1 つ必要です。
+
+```js
+assert.match(code, //i));
+```
+
+`link` 要素は `head` 要素の中にある必要があります。
+
+```js
+assert(code.match(/[\w\W\s]*
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md
new file mode 100644
index 00000000000..c754b300334
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md
@@ -0,0 +1,77 @@
+---
+id: 612e89562043183c86df287c
+title: ステップ 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+ブラウザーは、特定の要素にデフォルトのマージンとパディングの値を適用することがあります。 ピアノの外観を正しいものにするには、ボックスモデルをリセットする必要があります。
+
+`html` のルールセレクターを CSS ファイルに加え、`box-sizing` プロパティの値を `border-box` に設定してください。
+
+# --hints--
+
+`html` 要素のセレクターが 1 つ必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+`html` 要素のセレクターには値が `border-box` に設定されている `box-sizing` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89d254fe5d3df7d6693d.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89d254fe5d3df7d6693d.md
new file mode 100644
index 00000000000..8e91eedd7e7
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89d254fe5d3df7d6693d.md
@@ -0,0 +1,83 @@
+---
+id: 612e89d254fe5d3df7d6693d
+title: ステップ 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+これで `html` 要素のボックスモデルをリセットできたので、設定した値をその中の要素にも渡す必要があります。 そのためには、`box-sizing` プロパティの値に `inherit` を設定します。これは親要素と同じ値を使用するということを対象の要素に伝えます。
+
+また、セレクターの後に続く特殊なキーワードである、疑似要素を指定する必要もあります。 これから使用する疑似要素は `::before` と `::after` の 2 つの疑似要素です。
+
+`::before` セレクターは選択された要素の最初の子要素である疑似要素を作成し、`::after` セレクターは選択された要素の最後の子要素である疑似要素を作成します。 これらの疑似要素は、装飾的なコンテンツの作成によく使用されます。これについてはプロジェクトの後半で学習します。
+
+ここでは、すべての要素を指定する CSS セレクターを `*` で作成し、`::before` と `::after` を使用して疑似要素も指定してください。 `box-sizing` プロパティの値を `inherit` に設定してください。
+
+# --hints--
+
+`*, ::before, ::after` セレクターが 1 つ必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after'));
+```
+
+`*, ::before, ::after` セレクターには値が `inherit` に設定されている `box-sizing` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.boxSizing === 'inherit');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+html {
+ box-sizing: border-box;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8eebe3a6dc3fcc33a66f.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8eebe3a6dc3fcc33a66f.md
new file mode 100644
index 00000000000..f59c6722d33
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8eebe3a6dc3fcc33a66f.md
@@ -0,0 +1,95 @@
+---
+id: 612e8eebe3a6dc3fcc33a66f
+title: ステップ 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+ここで、`id` セレクターで `#piano` 要素を指定してください。 `background-color` プロパティの値を `#00471b` に、`width` プロパティの値を `992px` に、`height` プロパティの値を `290px` に設定してください。
+
+# --hints--
+
+`#piano` セレクターが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano'));
+```
+
+`#piano` セレクターには値が `#00471b` に設定されている `background-color` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.backgroundColor === 'rgb(0, 71, 27)');
+```
+
+`#piano` セレクターには値が `992px` に設定されている `width` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.width === '992px');
+```
+
+`#piano` セレクターには値が `290px` に設定されている `height` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.height === '290px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e95ef2e4bdf41f69067f9.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e95ef2e4bdf41f69067f9.md
new file mode 100644
index 00000000000..f232fdf2724
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e95ef2e4bdf41f69067f9.md
@@ -0,0 +1,81 @@
+---
+id: 612e95ef2e4bdf41f69067f9
+title: ステップ 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+`#piano` の `margin` の値を `80px auto` に設定してください。
+
+# --hints--
+
+`#piano` セレクターには値が `80px auto` に設定されている `margin` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.margin === '80px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e96fc87fe8e44f69f7ec5.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e96fc87fe8e44f69f7ec5.md
new file mode 100644
index 00000000000..c8bfe46580e
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e96fc87fe8e44f69f7ec5.md
@@ -0,0 +1,102 @@
+---
+id: 612e96fc87fe8e44f69f7ec5
+title: ステップ 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+では、鍵盤のスタイルを設定しましょう。 `#piano` ルールの下に、`class` セレクターで `.keys` 要素を指定してください。 新しいルールには、`background-color` プロパティの値を `#040404` に、`width` プロパティの値を `949px` に、`height` プロパティの値を `180px` に設定してください。
+
+# --hints--
+
+`.keys` セレクターが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys'));
+```
+
+`.keys` セレクターには値が `#040404` に設定されている `background-color` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.backgroundColor === 'rgb(4, 4, 4)');
+```
+
+`.keys` セレクターには値が `949px` に設定されている `width` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.width === '949px');
+```
+
+`.keys` セレクターには値が `180px` に設定されている `height` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.height === '180px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e98f3245c98475e49cfc6.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e98f3245c98475e49cfc6.md
new file mode 100644
index 00000000000..84fb7c05209
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e98f3245c98475e49cfc6.md
@@ -0,0 +1,88 @@
+---
+id: 612e98f3245c98475e49cfc6
+title: ステップ 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+`.keys` の `padding-left` の値を `2px` に設定してください。
+
+# --hints--
+
+`.keys` セレクターには値が `2px` に設定されている `padding-left` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.paddingLeft === '2px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+}
+
+--fcc-editable-region--
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9a21381a1949327512e6.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9a21381a1949327512e6.md
new file mode 100644
index 00000000000..31476a9d915
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9a21381a1949327512e6.md
@@ -0,0 +1,89 @@
+---
+id: 612e9a21381a1949327512e6
+title: ステップ 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+`#piano` セレクターを調整して、鍵盤を所定の位置に移動させます。 `padding` プロパティの値を `90px 20px 0 20px` に設定してください。
+
+# --hints--
+
+`#piano` セレクターには値が `90px 20px 0 20px` に設定されている `padding` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.padding === '90px 20px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+}
+--fcc-editable-region--
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9d142affc44a453655db.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9d142affc44a453655db.md
new file mode 100644
index 00000000000..94c3c74c3aa
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9d142affc44a453655db.md
@@ -0,0 +1,117 @@
+---
+id: 612e9d142affc44a453655db
+title: ステップ 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+これから鍵盤の鍵一つ一つのスタイルを設定しましょう。 `.key` 要素用の `class` セレクターを作成してください。 `background-color` の値を `#ffffff` に、`position` プロパティの値を `relative` に、`width` プロパティの値を `41px` に、`height` プロパティの値を `175px` に設定してください。
+
+# --hints--
+
+`.key` セレクターが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key'));
+```
+
+`.key` セレクターには値が `#ffffff` に設定されている `background-color` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.backgroundColor === 'rgb(255, 255, 255)');
+```
+
+`.key` セレクターには値が `relative` に設定されている `position` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.position === 'relative');
+```
+
+`.key` セレクターには値が `41px` に設定されている `width` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.width === '41px');
+```
+
+`.key` セレクターには値が `175px` に設定されている `height` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.height === '175px');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md
new file mode 100644
index 00000000000..5c622d40fba
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md
@@ -0,0 +1,103 @@
+---
+id: 612e9f1e7e5ccd4fa9ada0be
+title: ステップ 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+`.key` の `margin` の値を `2px` に、`float` プロパティの値を `left` に設定してください。
+
+# --hints--
+
+`.key` セレクターには値が `2px` に設定されている `margin` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.margin === '2px');
+```
+
+`.key` セレクターには値が `left` に設定されている `float` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.float === 'left');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+--fcc-editable-region--
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea4c4993aba52ab4aa32e.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea4c4993aba52ab4aa32e.md
new file mode 100644
index 00000000000..639160a0632
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea4c4993aba52ab4aa32e.md
@@ -0,0 +1,119 @@
+---
+id: 612ea4c4993aba52ab4aa32e
+title: ステップ 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+ここで、以前のステップで説明した疑似要素を使用します。 黒鍵を作成するには、新しい `.key.black--key::after` セレクターを追加します。 これで、HTML 内のクラスが `key black--key` の要素を指定し、その後ろの疑似要素を選択できます。
+
+新しいセレクターの中で、`background-color` の値を `#1d1e22` に設定してください。 また、`content` プロパティの値を `""` に設定してください。 これで疑似要素が空になります。
+
+`content` プロパティは、要素の内容を設定したりオーバーライドするために使用されます。 デフォルトでは、`::before` と `::after` 疑似セレクターにより作成された疑似要素は空であり、ページには表示されません。 `content` プロパティの値を空の文字列 `""` に設定することで、ページに疑似要素が表示されるようになるものの、まだ空の状態です。
+
+もし実験してみたければ、`background-color` プロパティを削除してから、`content` プロパティに `"♥"` などの異なる値を設定してみましょう。 実験が終わったら、テストに合格するためにこれらの変更を元に戻すことを忘れないようにしてください。
+
+# --hints--
+
+`.key.black--key::after` セレクターが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after'));
+```
+
+`.key.black--key::after` セレクターには値が `#1d1e22` に設定されている `background-color` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.backgroundColor === 'rgb(29, 30, 34)');
+```
+
+`.key.black--key::after` セレクターには値が `""` に設定されている `content` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.content === '""');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea97df5742154772f312e.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea97df5742154772f312e.md
new file mode 100644
index 00000000000..36a000525d7
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea97df5742154772f312e.md
@@ -0,0 +1,110 @@
+---
+id: 612ea97df5742154772f312e
+title: ステップ 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+`.key.black--key::after` の `position` プロパティの値を `absolute` に、`left` プロパティの値を `-18px` に設定してください。
+
+# --hints--
+
+`.key.black--key::after` セレクターには値が `absolute` に設定されている `position` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.position === 'absolute');
+```
+
+`.key.black--key::after` セレクターには値が `-18px` に設定されている `left` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.left === '-18px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ead8788d28655ef8db056.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ead8788d28655ef8db056.md
new file mode 100644
index 00000000000..ecb22cc7ea5
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ead8788d28655ef8db056.md
@@ -0,0 +1,112 @@
+---
+id: 612ead8788d28655ef8db056
+title: ステップ 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+`.key.black--key::after` に対して、`width` の値を `32px` に、`height` の値を `100px` に設定してください。
+
+# --hints--
+
+`.key.black--key::after` には値が `32px` に設定されている `width` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.width === '32px');
+```
+
+`.key.black--key::after` には値が `100px` に設定されている `height` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.height === '100px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eaf56b7ba3257fdbfb0db.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eaf56b7ba3257fdbfb0db.md
new file mode 100644
index 00000000000..2ff749f4449
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eaf56b7ba3257fdbfb0db.md
@@ -0,0 +1,144 @@
+---
+id: 612eaf56b7ba3257fdbfb0db
+title: ステップ 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+ピアノを公式なものにするため、freeCodeCamp のロゴを追加しましょう。
+
+`img` 要素を `.keys` 要素の前に 1 つ追加してください。 その `img` の `class` 属性の値を `logo` に、`src` 属性の値を `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg` に設定してください。 また、`freeCodeCamp Logo` という `alt` テキストを加えてください。
+
+# --hints--
+
+新しい `img` 要素を 1 つ追加してください。
+
+```js
+assert(document.querySelectorAll('img')?.length === 1);
+```
+
+`img` 要素は最初の `.key` 要素の前に来る必要があります。
+
+```js
+const img = document.querySelector('img');
+assert(img?.nextElementSibling?.className === 'keys');
+assert(img?.previousElementSibling === null);
+```
+
+`img` 要素の `class` 属性の値は logo に設定されている必要があります。
+
+```js
+const img = document.querySelector('img');
+assert(img?.className === 'logo');
+```
+
+`img` 要素には値が `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg` に設定されている `src` 属性が必要です。
+
+```js
+const img = document.querySelector('img');
+assert(img?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg');
+```
+
+`img` 要素には値が `freeCodeCamp Logo` に設定されている `alt` 属性が必要です。
+
+```js
+assert(document.querySelector('img')?.getAttribute('alt')?.toLowerCase() === 'freecodecamp logo');
+```
+
+大文字小文字の区別とスペルに気をつけましょう。
+
+```js
+assert(document.querySelector('img')?.getAttribute('alt') === 'freeCodeCamp Logo');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+}
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb4893b63c75bb9251ddf.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb4893b63c75bb9251ddf.md
new file mode 100644
index 00000000000..d98f8718e98
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb4893b63c75bb9251ddf.md
@@ -0,0 +1,129 @@
+---
+id: 612eb4893b63c75bb9251ddf
+title: ステップ 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+`.logo` セレクターを作成してロゴをスタイリングし始めましょう。 `width` の値を `200px` に、`position` の値を `absolute` に、`top` の値を `23px` に設定してください。
+
+# --hints--
+
+`.logo` セレクターが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo'));
+```
+
+`.logo` セレクターには値が `200px` に設定されている `width` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.width === '200px');
+```
+
+`.logo` セレクターには値が `absolute` に設定されている `position` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.position === 'absolute');
+```
+
+`.logo` セレクターには値が `23px` に設定されている `top` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.top === '23px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ --fcc-editable-region--
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb75153591b5e3b1ab65e.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb75153591b5e3b1ab65e.md
new file mode 100644
index 00000000000..00161d8edc3
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb75153591b5e3b1ab65e.md
@@ -0,0 +1,115 @@
+---
+id: 612eb75153591b5e3b1ab65e
+title: ステップ 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+`img` 要素の基準点にするために、親要素に `position` の設定が必要です。 `#piano` セレクターの `position` の値を `relative` に設定してください。
+
+# --hints--
+
+`#piano` セレクターには値が `relative` に設定されている `position` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.position === 'relative');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+--fcc-editable-region--
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb7ca8c275d5f89c73333.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb7ca8c275d5f89c73333.md
new file mode 100644
index 00000000000..4c79843ea8a
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb7ca8c275d5f89c73333.md
@@ -0,0 +1,116 @@
+---
+id: 612eb7ca8c275d5f89c73333
+title: ステップ 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+ピアノと鍵盤のとがった角を丸くするため、まず `#piano` の `border-radius` の値を `10px` に設定します。
+
+# --hints--
+
+`#piano` セレクターには値が `10px` に設定されている `border-radius` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.borderRadius === '10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+}
+--fcc-editable-region--
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb8e984cd73677a92b7e9.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb8e984cd73677a92b7e9.md
new file mode 100644
index 00000000000..a9b5c5568e7
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb8e984cd73677a92b7e9.md
@@ -0,0 +1,117 @@
+---
+id: 612eb8e984cd73677a92b7e9
+title: ステップ 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+次に、`.key` セレクターの `border-radius` の値を `0 0 3px 3px` に設定してください。
+
+# --hints--
+
+`.key` セレクターには値が `0 0 3px 3px` に設定されている `border-radius` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.borderRadius === '0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+--fcc-editable-region--
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+--fcc-editable-region--
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb934f64a4d6890a45518.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb934f64a4d6890a45518.md
new file mode 100644
index 00000000000..36743b72eb6
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb934f64a4d6890a45518.md
@@ -0,0 +1,118 @@
+---
+id: 612eb934f64a4d6890a45518
+title: ステップ 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+鍵盤の形を揃えるために、`.key.black--key::after` セレクターの `border-radius` の値を `0 0 3px 3px` に設定します。
+
+# --hints--
+
+`.key.black--key::after` セレクターには値が `0 0 3px 3px` に設定されている `border-radius` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.borderRadius === '0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+}
+--fcc-editable-region--
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebcba99bfa46a15370b11.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebcba99bfa46a15370b11.md
new file mode 100644
index 00000000000..bbc217cc524
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebcba99bfa46a15370b11.md
@@ -0,0 +1,127 @@
+---
+id: 612ebcba99bfa46a15370b11
+title: ステップ 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+次はピアノをレスポンシブにしましょう。 `max-width` が `768px` の条件を対象とする `@media` クエリを追加してください。
+
+# --hints--
+
+新しい `@media` クエリを 1 つ追加する必要があります。
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1);
+```
+
+`@media` クエリには `max-width` が `768px` という条件が必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')[0]?.media?.mediaText === '(max-width: 768px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebe7fe6d07e6b76d1cae2.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebe7fe6d07e6b76d1cae2.md
new file mode 100644
index 00000000000..a6a47c0264f
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebe7fe6d07e6b76d1cae2.md
@@ -0,0 +1,133 @@
+---
+id: 612ebe7fe6d07e6b76d1cae2
+title: ステップ 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+`@media` クエリ内に新しい `#piano` セレクターを追加し、`width` の値を `358px` に設定してください。
+
+# --hints--
+
+`@media` ルールには `#piano` セレクターが必要です。
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano);
+```
+
+新しい `#piano` セレクターには値が `358px` に設定されている `width` が必要です。
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano?.style.width === '358px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebedec97e096c8bf64999.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebedec97e096c8bf64999.md
new file mode 100644
index 00000000000..528d72f1b97
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebedec97e096c8bf64999.md
@@ -0,0 +1,136 @@
+---
+id: 612ebedec97e096c8bf64999
+title: ステップ 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+`@media` クエリ内に `.keys` セレクターを追加し、`width` の値を `318px` に設定してください。
+
+# --hints--
+
+
+`@media` ルールには `.keys` セレクターが必要です。
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys);
+```
+
+新しい `.keys` セレクターには値が `318px` に設定されている `width` が必要です。
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys?.style.width === '318px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+ #piano {
+ width: 358px;
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebf9a210f2b6d77001e68.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebf9a210f2b6d77001e68.md
new file mode 100644
index 00000000000..d4e837e30fe
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebf9a210f2b6d77001e68.md
@@ -0,0 +1,139 @@
+---
+id: 612ebf9a210f2b6d77001e68
+title: ステップ 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+`.logo` セレクターを `@media` クエリに追加して、`width` プロパティの値を `150px` に設定してください。
+
+# --hints--
+
+`@media` ルールには `.logo` セレクターが必要です。
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const logo = rules?.find(rule => rule.selectorText === '.logo');
+assert(logo);
+```
+
+新しい `.logo` セレクターには値が `150px` に設定されている `width` が必要です。
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const logo = rules?.find(rule => rule.selectorText === '.logo');
+assert(logo?.style.width === '150px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+ #piano {
+ width: 358px;
+ }
+
+ .keys {
+ width: 318px;
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec0490ae8626e9adf82e4.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec0490ae8626e9adf82e4.md
new file mode 100644
index 00000000000..253b6892b9c
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec0490ae8626e9adf82e4.md
@@ -0,0 +1,133 @@
+---
+id: 612ec0490ae8626e9adf82e4
+title: ステップ 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+ブラウザーのウインドウが `768px` よりも小さくなった時に鍵盤が崩れてしまうことに気づいたでしょうか。 この問題に対処するには、最初の `.keys` セレクターの中で `overflow` の値を `hidden` に設定してください。 このプロパティは、`.keys` に設定されている `width` の値の外側に押し出された要素を隠してくれます。
+
+# --hints--
+
+最初の `.keys` セレクタには値が `hidden` に設定されている `overflow` プロパティが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.overflow === 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+--fcc-editable-region--
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+--fcc-editable-region--
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+@media (max-width: 768px) {
+ #piano {
+ width: 358px;
+ }
+
+ .keys {
+ width: 318px;
+ }
+
+ .logo {
+ width: 150px;
+ }
+}
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec19d5268da7074941f84.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec19d5268da7074941f84.md
new file mode 100644
index 00000000000..6bc70912db0
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec19d5268da7074941f84.md
@@ -0,0 +1,144 @@
+---
+id: 612ec19d5268da7074941f84
+title: ステップ 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+ブラウザーのウインドウの大きさが `769px` 以上 `1199px` 以下である場合に適用される別の `@media` ルールを追加してください。
+
+# --hints--
+
+新しい `@media` クエリを 1 つ追加する必要があります。
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2);
+```
+
+`@media` クエリには、`min-width` が `769px`、`max-width` が `1199px` という条件が必要です。
+
+```js
+const mediaText = new __helpers.CSSHelp(document).getCSSRules('media')[1]?.media?.mediaText;
+assert(mediaText === '(max-width: 1199px) and (min-width: 769px)' || mediaText === '(min-width: 769px) and (max-width: 1199px)');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+ overflow: hidden;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+@media (max-width: 768px) {
+ #piano {
+ width: 358px;
+ }
+
+ .keys {
+ width: 318px;
+ }
+
+ .logo {
+ width: 150px;
+ }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec29c84b9a6718b1f5cec.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec29c84b9a6718b1f5cec.md
new file mode 100644
index 00000000000..4fc78fa4d6b
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec29c84b9a6718b1f5cec.md
@@ -0,0 +1,288 @@
+---
+id: 612ec29c84b9a6718b1f5cec
+title: ステップ 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+新しい `@media` ルールの中で、`#piano` の `width` の値を `675px` に、`.keys` の `width` の値を `633px` に設定してください。
+
+これで、ピアノの完成です！
+
+# --hints--
+
+2 つ目の `@media` ルールには `#piano` セレクターが必要です。
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano);
+```
+
+新しい `#piano` セレクターには値が `675px` に設定されている `width` が必要です。
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano?.style.width === '675px');
+```
+
+2 つ目の `@media` ルールには `.keys` セレクターが必要です。
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys);
+```
+
+新しい `.keys` セレクターには値が `633px` に設定されている `width` が必要です。
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys?.style.width === '633px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+ overflow: hidden;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+@media (max-width: 768px) {
+ #piano {
+ width: 358px;
+ }
+
+ .keys {
+ width: 318px;
+ }
+
+ .logo {
+ width: 150px;
+ }
+}
+
+--fcc-editable-region--
+@media (max-width: 1199px) and (min-width: 769px) {
+
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+ overflow: hidden;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+@media (max-width: 768px) {
+ #piano {
+ width: 358px;
+ }
+
+ .keys {
+ width: 318px;
+ }
+
+ .logo {
+ width: 150px;
+ }
+}
+
+@media (max-width: 1199px) and (min-width: 769px) {
+ #piano {
+ width: 675px;
+ }
+
+ .keys {
+ width: 633px;
+ }
+}
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
index 386dcb3e5f2..6267dc227dc 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
@@ -7,7 +7,7 @@ dashedName: step-3
# --description--
-O `title` é um dos vários elementos que fornecem informações extras que não são visíveis na página da web, mas ele pode ser útil para mecanismos de busca ou até mesmo em como a página é exibida.
+O `title` é um dos vários elementos que fornecem informações extras que não são visíveis na página da web, mas ele é útil para mecanismos de busca ou até mesmo em como a página é exibida.
Dentro do elemento `head`, adicione um elemento `meta` com um atributo chamado `charset` definido para o valor `utf-8` para dizer ao navegador como codificar caracteres para a página. Note que os elementos `meta` fecham em si mesmos.
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
index e3b4bdbb389..11cec77ab30 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
@@ -7,7 +7,7 @@ dashedName: step-27
# --description--
-Até agora, você tem usado seletores de tipo para elementos de estilo. Um seletor de classe é definido por um nome com um ponto diretamente à sua frente, assim:
+Até agora, você tem usado seletores de tipo para elementos de estilo. Um seletor de classe é definido por um nome com um ponto diretamente na frente dele, como este:
```css
.class-name {
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md
index 44ae263257d..0da480e5141 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md
@@ -13,7 +13,7 @@ Dentro do marcador vermelho `div`, crie um novo `div` e dê a ele uma classe de
# --hints--
-O novo elemento `div` deve estar aninhando dentro do elemento `div` do marcador vermelho.
+O novo elemento `div` deve estar aninhado dentro do elemento `div` do marcador vermelho.
```js
const redMarkerChildren = [...document.querySelector('.red')?.children];
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md
index df5a8144941..d0d9dfc148a 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md
@@ -13,7 +13,7 @@ Adicione um novo `div` com a classe `cap` antes do elemento `div` da capa.
# --hints--
-O novo elemento `div` deve estar aninhando dentro do elemento `div` do marcador vermelho.
+O novo elemento `div` deve estar aninhado dentro do elemento `div` do marcador vermelho.
```js
const redMarkerChildren = [...document.querySelector('div.red')?.children];
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md
new file mode 100644
index 00000000000..b8f5267a29f
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md
@@ -0,0 +1,135 @@
+---
+id: 61437d575fb98f57fa8f7f36
+title: Passo 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+Comece com o boilerplate padrão do HTML. Adicione a declaração `DOCTYPE` e os elementos `html`, `head` e `body`.
+
+Adicione a tag `` com o `charset` apropriado e uma tag `` para responsividade móvel dentro do elemento `head`.
+
+# --hints--
+
+O código deve conter a referência `DOCTYPE`.
+
+```js
+assert(code.match(/` após o tipo.
+
+```js
+assert(code.match(//gi));
+```
+
+O elemento `html` deve ter uma tag de abertura.
+
+```js
+assert(code.match(/
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++--fcc-editable-region-- + +--fcc-editable-region-- +
++ The entire curriculum should be a series of projects +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
+--fcc-editable-region-- ++ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +
++ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +
++ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +
+++
++ The entire curriculum should be a series of projects +
+
+
+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +
++ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +
++ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +
+A Brief History
+Of the Curriculum
+-
+
-
+
V1 - 2014
++ We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +
+
+ -
+
V2 - 2015
+We added interactive algorithm challenges.
+
+ -
+
V3 - 2015
++ We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +
+
+ -
+
V4 - 2016
++ We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +
+
+ -
+
V5 - 2017
+We added the back end and data visualization challenges.
+
+ -
+
V6 - 2018
++ We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +
+
+
+ OUR NEW CURRICULUM
++ Our efforts to restructure our curriculum with a more project-based + focus +
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+ z-index: 4;
+ position: relative;
+}
+
+.penguin * {
+ position: absolute;
+}
+
+.penguin-head {
+ width: 50%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ gray,
+ rgb(239, 240, 228)
+ );
+ border-radius: 70% 70% 65% 65%;
+ top: 10%;
+ left: 25%;
+ z-index: 1;
+}
+
+.penguin-body {
+ width: 53%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ rgb(134, 133, 133) 0%,
+ rgb(234, 231, 231) 25%,
+ white 67%
+ );
+ border-radius: 80% 80% 100% 100%;
+ top: 40%;
+ left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+ content: "";
+
+}
+--fcc-editable-region--
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md
new file mode 100644
index 00000000000..c070d7bd83f
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md
@@ -0,0 +1,155 @@
+---
+id: 619be7af7b0bf60770f5d2a4
+title: Passo 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Posicione o pseudoelemento `10%` do topo e `25%` da esquerda do elemento pai.
+
+# --hints--
+
+Você deve dar ao `.penguin-body::before` o atributo `top` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.top, '10%');
+```
+
+Você deve dar ao `.penguin-body::before` o atributo `left` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+ z-index: 4;
+ position: relative;
+}
+
+.penguin * {
+ position: absolute;
+}
+
+.penguin-head {
+ width: 50%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ gray,
+ rgb(239, 240, 228)
+ );
+ border-radius: 70% 70% 65% 65%;
+ top: 10%;
+ left: 25%;
+ z-index: 1;
+}
+
+.penguin-body {
+ width: 53%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ rgb(134, 133, 133) 0%,
+ rgb(234, 231, 231) 25%,
+ white 67%
+ );
+ border-radius: 80% 80% 100% 100%;
+ top: 40%;
+ left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+ content: "";
+ position: absolute;
+ width: 50%;
+ height: 45%;
+ background-color: gray;
+
+}
+--fcc-editable-region--
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md
new file mode 100644
index 00000000000..2717f99ee00
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md
@@ -0,0 +1,166 @@
+---
+id: 619be946958c6009844f1dee
+title: Passo 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Inicie o rosto do pinguim, adicionando dois elementos `div` dentro de `.penguin-head` e dando a ambos uma `class` de `face`.
+
+# --hints--
+
+Você deve adicionar `--fcc-expected--` elementos `div` em `.penguin-head`, mas encontramos `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 2);
+```
+
+Você deve dar ao primeiro `div` uma `class` de `face`, mas foi encontrado `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(1)')?.className, 'face');
+```
+
+Você deve dar ao segundo `div` uma `class` de `face`, mas foi encontrado `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(2)')?.className, 'face');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+--fcc-editable-region--
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+ z-index: 4;
+ position: relative;
+}
+
+.penguin * {
+ position: absolute;
+}
+
+.penguin-head {
+ width: 50%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ gray,
+ rgb(239, 240, 228)
+ );
+ border-radius: 70% 70% 65% 65%;
+ top: 10%;
+ left: 25%;
+ z-index: 1;
+}
+
+.penguin-body {
+ width: 53%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ rgb(134, 133, 133) 0%,
+ rgb(234, 231, 231) 25%,
+ white 67%
+ );
+ border-radius: 80% 80% 100% 100%;
+ top: 40%;
+ left: 23.5%;
+}
+
+.penguin-body::before {
+ content: "";
+ position: absolute;
+ width: 50%;
+ height: 45%;
+ background-color: gray;
+ top: 10%;
+ left: 25%;
+ border-radius: 0% 0% 100% 100%;
+ opacity: 70%;
+}
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md
new file mode 100644
index 00000000000..33abaf102da
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md
@@ -0,0 +1,225 @@
+---
+id: 619d0d18ca99870f884a7bff
+title: Passo 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Dentro do elemento `.eye`, adicione uma `div` com a `class` definida como `eye-lid`.
+
+# --hints--
+
+Você deve adicionar um elemento `div` dentro de `.eye.left`, mas foi encontrado `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.left > div')?.length ?? 0, 1);
+```
+
+Você deve adicionar um elemento `div` dentro de `.eye.right`, mas foi encontrado `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.right > div')?.length ?? 0, 1);
+```
+
+Você deve dar à primeira `div` uma `class` de `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.left > div.eye-lid'));
+```
+
+Você deve dar à segunda nova `div` uma `class` de `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.right > div.eye-lid'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+
+
+
+
+```
+
+```css
+:root {
+ --penguin-face: white;
+}
+
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+ z-index: 4;
+ position: relative;
+}
+
+.penguin * {
+ position: absolute;
+}
+
+.penguin-head {
+ width: 50%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ gray,
+ rgb(239, 240, 228)
+ );
+ border-radius: 70% 70% 65% 65%;
+ top: 10%;
+ left: 25%;
+ z-index: 1;
+}
+
+.face {
+ width: 60%;
+ height: 70%;
+ background-color: var(--penguin-face);
+ border-radius: 70% 70% 60% 60%;
+ top: 15%;
+}
+
+.face.left {
+ left: 5%;
+}
+
+.face.right {
+ right: 5%;
+}
+
+.chin {
+ width: 90%;
+ height: 70%;
+ background-color: var(--penguin-face);
+ top: 25%;
+ left: 5%;
+ border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+ width: 15%;
+ height: 17%;
+ background-color: black;
+ top: 45%;
+ border-radius: 50%;
+}
+
+.eye.left {
+ left: 25%;
+}
+
+.eye.right {
+ right: 25%;
+}
+
+.penguin-body {
+ width: 53%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ rgb(134, 133, 133) 0%,
+ rgb(234, 231, 231) 25%,
+ white 67%
+ );
+ border-radius: 80% 80% 100% 100%;
+ top: 40%;
+ left: 23.5%;
+}
+
+.penguin-body::before {
+ content: "";
+ position: absolute;
+ width: 50%;
+ height: 45%;
+ background-color: gray;
+ top: 10%;
+ left: 25%;
+ border-radius: 0% 0% 100% 100%;
+ opacity: 70%;
+}
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md
new file mode 100644
index 00000000000..e502f3152fa
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md
@@ -0,0 +1,323 @@
+---
+id: 619d2fd3ff4f772882e3d998
+title: Passo 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+Altere a ordem de empilhamento dos elementos `.arm`, para que eles apareçam atrás do elemento `.penguin-body`.
+
+# --hints--
+
+Você deve dar `.arm` um `z-index` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.zIndex, '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region--
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --penguin-face: white;
+ --penguin-picorna: orange;
+ --penguin-skin: gray;
+}
+
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+ z-index: 4;
+ position: relative;
+}
+
+.penguin * {
+ position: absolute;
+}
+
+.penguin-head {
+ width: 50%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ var(--penguin-skin),
+ rgb(239, 240, 228)
+ );
+ border-radius: 70% 70% 65% 65%;
+ top: 10%;
+ left: 25%;
+ z-index: 1;
+}
+
+.face {
+ width: 60%;
+ height: 70%;
+ background-color: var(--penguin-face);
+ border-radius: 70% 70% 60% 60%;
+ top: 15%;
+}
+
+.face.left {
+ left: 5%;
+}
+
+.face.right {
+ right: 5%;
+}
+
+.chin {
+ width: 90%;
+ height: 70%;
+ background-color: var(--penguin-face);
+ top: 25%;
+ left: 5%;
+ border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+ width: 15%;
+ height: 17%;
+ background-color: black;
+ top: 45%;
+ border-radius: 50%;
+}
+
+.eye.left {
+ left: 25%;
+}
+
+.eye.right {
+ right: 25%;
+}
+
+.eye-lid {
+ width: 150%;
+ height: 100%;
+ background-color: var(--penguin-face);
+ top: 25%;
+ left: -23%;
+ border-radius: 50%;
+}
+
+.blush {
+ width: 15%;
+ height: 10%;
+ background-color: pink;
+ top: 65%;
+ border-radius: 50%;
+}
+
+.blush.left {
+ left: 15%;
+}
+
+.blush.right {
+ right: 15%;
+}
+
+.beak {
+ height: 10%;
+ background-color: var(--penguin-picorna);
+ border-radius: 50%;
+}
+
+.beak.top {
+ width: 20%;
+ top: 60%;
+ left: 40%;
+}
+
+.beak.bottom {
+ width: 16%;
+ top: 65%;
+ left: 42%;
+}
+
+.shirt {
+ font: bold 25px Helvetica, sans-serif;
+ top: 165px;
+ left: 127.5px;
+ z-index: 1;
+ color: #6a6969;
+}
+
+.shirt div {
+ font-weight: initial;
+ top: 22.5px;
+ left: 12px;
+}
+
+.penguin-body {
+ width: 53%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ rgb(134, 133, 133) 0%,
+ rgb(234, 231, 231) 25%,
+ white 67%
+ );
+ border-radius: 80% 80% 100% 100%;
+ top: 40%;
+ left: 23.5%;
+}
+
+.penguin-body::before {
+ content: "";
+ position: absolute;
+ width: 50%;
+ height: 45%;
+ background-color: var(--penguin-skin);
+ top: 10%;
+ left: 25%;
+ border-radius: 0% 0% 100% 100%;
+ opacity: 70%;
+}
+
+--fcc-editable-region--
+.arm {
+ width: 30%;
+ height: 60%;
+ background: linear-gradient(
+ 90deg,
+ var(--penguin-skin),
+ rgb(209, 210, 199)
+ );
+ border-radius: 30% 30% 30% 120%;
+
+}
+--fcc-editable-region--
+
+.arm.left {
+ top: 35%;
+ left: 5%;
+ transform-origin: top left;
+ transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+ top: 0%;
+ right: -5%;
+ transform: rotate(-45deg);
+}
+
+.foot {
+ width: 15%;
+ height: 30%;
+ background-color: var(--penguin-picorna);
+ top: 85%;
+ border-radius: 50%;
+ z-index: -1;
+}
+
+.foot.left {
+ left: 25%;
+ transform: rotate(80deg);
+}
+
+.foot.right {
+ right: 25%;
+ transform: rotate(-80deg);
+}
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md
new file mode 100644
index 00000000000..f9b8185fa7a
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md
@@ -0,0 +1,55 @@
+---
+id: 61a8fe15a6a31306e60d1e89
+title: Passo 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Normalize a página, definindo o `width` para `100%` e o `height` para `100vh`.
+
+# --hints--
+
+Você deve dar ao `body` um `width` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%');
+```
+
+Você deve dar ao `body` um `height` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 💜
+ I CSS
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1b {
+ width: 80%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1c {
+ width: 90%;
+ height: 10%;
+ background-color: var(--building-color1);
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background-color: var(--building-color1);
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb1 {
+ width: 10%;
+ height: 60%;
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md
new file mode 100644
index 00000000000..417efdc3980
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md
@@ -0,0 +1,208 @@
+---
+id: 5d822fd413a79914d39e98fd
+title: Passo 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Nos próximos passos, você vai usar alguns truques com bordas de CSS para transformar a seção `.bb2a` em um triângulo no topo do edifício. Primeiro, remova o `background-color` de `.bb2` já que você não precisa mais dele.
+
+# --hints--
+
+Você deve remover a `background-color` de `.bb2`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2")?.backgroundColor);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+ --window-color1: black;
+ --window-color2: #8cd9b3;
+}
+
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+ width: 10%;
+ height: 70%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.bb1a {
+ width: 70%;
+}
+
+.bb1b {
+ width: 80%;
+}
+
+.bb1c {
+ width: 90%;
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background: linear-gradient(
+var(--building-color1) 50%,
+var(--window-color1)
+ );
+}
+
+.bb1-window {
+ height: 10%;
+ background: linear-gradient(
+var(--building-color1),
+var(--window-color1)
+ );
+}
+--fcc-editable-region--
+.bb2 {
+ width: 10%;
+ height: 50%;
+ background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+ width: 100%;
+ height: 100%;
+ background: repeating-linear-gradient(
+var(--building-color2),
+var(--building-color2) 6%,
+var(--window-color2) 6%,
+var(--window-color2) 9%
+ );
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background-color: var(--building-color3);
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+ background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+ width: 10%;
+ height: 60%;
+ background-color: var(--building-color4);
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+ background-color: var(--building-color3);
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+ background-color: var(--building-color1);
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+ background-color: var(--building-color1);
+ position: relative;
+ left: 10%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+ background-color: var(--building-color2);
+ position: relative;
+ right: 10%;
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+ background-color: var(--building-color3);
+}
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md
new file mode 100644
index 00000000000..4511d66014f
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md
@@ -0,0 +1,401 @@
+---
+id: 5d822fd413a79914d39e9936
+title: Passo 110
+challengeType: 0
+dashedName: step-110
+---
+
+# --description--
+
+Ok, os prédios estão prontos. Volte para o seletor `*` e remova a `border` que você aplicou a tudo no início e os edifícios se unirão.
+
+# --hints--
+
+Você deve remover a `border` do seletor `*`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle("*")?.border);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+ --window-color1: #bb99ff;
+ --window-color2: #8cd9b3;
+ --window-color3: #d98cb3;
+ --window-color4: #8cb3d9;
+}
+--fcc-editable-region--
+* {
+ border: 1px solid black;
+ box-sizing: border-box;
+}
+--fcc-editable-region--
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+
+.building-wrap {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.window-wrap {
+ display: flex;
+ align-items: center;
+ justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+ width: 10%;
+ height: 70%;
+}
+
+.bb1a {
+ width: 70%;
+}
+
+.bb1b {
+ width: 80%;
+}
+
+.bb1c {
+ width: 90%;
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background: linear-gradient(
+ var(--building-color1) 50%,
+ var(--window-color1)
+ );
+}
+
+.bb1-window {
+ height: 10%;
+ background: linear-gradient(
+ var(--building-color1),
+ var(--window-color1)
+ );
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+}
+
+.bb2a {
+ border-bottom: 5vh solid var(--building-color2);
+ border-left: 5vw solid transparent;
+ border-right: 5vw solid transparent;
+}
+
+.bb2b {
+ width: 100%;
+ height: 100%;
+ background: repeating-linear-gradient(
+ var(--building-color2),
+ var(--building-color2) 6%,
+ var(--window-color2) 6%,
+ var(--window-color2) 9%
+ );
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background: repeating-linear-gradient(
+ 90deg,
+ var(--building-color3),
+ var(--building-color3),
+ var(--window-color3) 15%
+ );
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+}
+
+.bb4a {
+ width: 3%;
+ height: 10%;
+ background-color: var(--building-color4);
+}
+
+.bb4b {
+ width: 80%;
+ height: 5%;
+ background-color: var(--building-color4);
+}
+
+.bb4c {
+ width: 100%;
+ height: 85%;
+ background-color: var(--building-color4);
+}
+
+.bb4-window {
+ width: 18%;
+ height: 90%;
+ background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+ width: 10%;
+ height: 60%;
+}
+
+.fb1a {
+ border-bottom: 7vh solid var(--building-color4);
+ border-left: 2vw solid transparent;
+ border-right: 2vw solid transparent;
+}
+
+.fb1b {
+ width: 60%;
+ height: 10%;
+ background-color: var(--building-color4);
+}
+
+.fb1c {
+ width: 100%;
+ height: 80%;
+ background: repeating-linear-gradient(
+ 90deg,
+ var(--building-color4),
+ var(--building-color4) 10%,
+ transparent 10%,
+ transparent 15%
+ ),
+ repeating-linear-gradient(
+ var(--building-color4),
+ var(--building-color4) 10%,
+ var(--window-color4) 10%,
+ var(--window-color4) 90%
+ );
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+}
+
+.fb2a {
+ width: 100%;
+ border-bottom: 10vh solid var(--building-color3);
+ border-left: 1vw solid transparent;
+ border-right: 1vw solid transparent;
+}
+
+.fb2b {
+ width: 100%;
+ height: 75%;
+ background-color: var(--building-color3);
+}
+
+.fb2-window {
+ width: 22%;
+ height: 100%;
+ background-color: var(--window-color3);
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+}
+
+.fb3a {
+ width: 80%;
+ height: 15%;
+ background-color: var(--building-color1);
+}
+
+.fb3b {
+ width: 100%;
+ height: 35%;
+ background-color: var(--building-color1);
+}
+
+.fb3-window {
+ width: 25%;
+ height: 80%;
+ background-color: var(--window-color1);
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+ position: relative;
+ left: 10%;
+}
+
+.fb4a {
+ border-top: 5vh solid transparent;
+ border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+ width: 100%;
+ height: 89%;
+ background-color: var(--building-color1);
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.fb4-window {
+ width: 30%;
+ height: 10%;
+ border-radius: 50%;
+ background-color: var(--window-color1);
+ margin: 10%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+ position: relative;
+ right: 10%;
+ background: repeating-linear-gradient(
+ var(--building-color2),
+ var(--building-color2) 5%,
+ transparent 5%,
+ transparent 10%
+ ),
+ repeating-linear-gradient(
+ 90deg,
+ var(--building-color2),
+ var(--building-color2) 12%,
+ var(--window-color2) 12%,
+ var(--window-color2) 44%
+ );
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+ background: repeating-linear-gradient(
+ 90deg,
+ var(--building-color3),
+ var(--building-color3) 10%,
+ transparent 10%,
+ transparent 30%
+ ),
+ repeating-linear-gradient(
+ var(--building-color3),
+ var(--building-color3) 10%,
+ var(--window-color3) 10%,
+ var(--window-color3) 30%
+ );
+}
+
+```
+
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md
new file mode 100644
index 00000000000..610a9dab3ad
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md
@@ -0,0 +1,423 @@
+---
+id: 5d822fd413a79914d39e993b
+title: Passo 115
+challengeType: 0
+dashedName: step-115
+---
+
+# --description--
+
+Copie e cole toda a classe `sky` com todas as propriedades e valores na media query. Você vai criar outro esquema de cores para o horizonte que se altera do dia para noite.
+
+Observação: você precisará rolar para além da região editável para copiar a classe.
+
+# --hints--
+
+Você não deve excluir a declaração `.sky` existente.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.getPropVal('background', true), /radial-gradient\(circleclosest-cornerat15%15%,rgb\(255,207,51\)(0%)?,rgb\(255,207,51\)20%,rgb\(255,255,102\)21%,rgb\(187,238,255\)100%\)/);
+```
+
+Você deve copiar a declaração existente `.sky` para uma media query.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s*(0%)?\s*,\s*rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s+20%\s*,\s*rgb\(\s*255\s*,\s*255\s*,\s*102\s*\)\s+21%\s*,\s*rgb\(\s*187\s*,\s*238\s*,\s*255\s*\)\s+100%\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --building-color1: #aa80ff;
+ --building-color2: #66cc99;
+ --building-color3: #cc6699;
+ --building-color4: #538cc6;
+ --window-color1: #bb99ff;
+ --window-color2: #8cd9b3;
+ --window-color3: #d98cb3;
+ --window-color4: #8cb3d9;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+ position: absolute;
+ top: 0;
+}
+
+.building-wrap {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.window-wrap {
+ display: flex;
+ align-items: center;
+ justify-content: space-evenly;
+}
+
+.sky {
+ background: radial-gradient(
+ closest-corner circle at 15% 15%,
+ #ffcf33,
+ #ffcf33 20%,
+ #ffff66 21%,
+ #bbeeff 100%
+ );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+ width: 10%;
+ height: 70%;
+}
+
+.bb1a {
+ width: 70%;
+}
+
+.bb1b {
+ width: 80%;
+}
+
+.bb1c {
+ width: 90%;
+}
+
+.bb1d {
+ width: 100%;
+ height: 70%;
+ background: linear-gradient(
+ var(--building-color1) 50%,
+ var(--window-color1)
+ );
+}
+
+.bb1-window {
+ height: 10%;
+ background: linear-gradient(
+ var(--building-color1),
+ var(--window-color1)
+ );
+}
+
+.bb2 {
+ width: 10%;
+ height: 50%;
+}
+
+.bb2a {
+ border-bottom: 5vh solid var(--building-color2);
+ border-left: 5vw solid transparent;
+ border-right: 5vw solid transparent;
+}
+
+.bb2b {
+ width: 100%;
+ height: 100%;
+ background: repeating-linear-gradient(
+ var(--building-color2),
+ var(--building-color2) 6%,
+ var(--window-color2) 6%,
+ var(--window-color2) 9%
+ );
+}
+
+.bb3 {
+ width: 10%;
+ height: 55%;
+ background: repeating-linear-gradient(
+ 90deg,
+ var(--building-color3),
+ var(--building-color3),
+ var(--window-color3) 15%
+ );
+}
+
+.bb4 {
+ width: 11%;
+ height: 58%;
+}
+
+.bb4a {
+ width: 3%;
+ height: 10%;
+ background-color: var(--building-color4);
+}
+
+.bb4b {
+ width: 80%;
+ height: 5%;
+ background-color: var(--building-color4);
+}
+
+.bb4c {
+ width: 100%;
+ height: 85%;
+ background-color: var(--building-color4);
+}
+
+.bb4-window {
+ width: 18%;
+ height: 90%;
+ background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+ width: 10%;
+ height: 60%;
+}
+
+.fb1a {
+ border-bottom: 7vh solid var(--building-color4);
+ border-left: 2vw solid transparent;
+ border-right: 2vw solid transparent;
+}
+
+.fb1b {
+ width: 60%;
+ height: 10%;
+ background-color: var(--building-color4);
+}
+
+.fb1c {
+ width: 100%;
+ height: 80%;
+ background: repeating-linear-gradient(
+ 90deg,
+ var(--building-color4),
+ var(--building-color4) 10%,
+ transparent 10%,
+ transparent 15%
+ ),
+ repeating-linear-gradient(
+ var(--building-color4),
+ var(--building-color4) 10%,
+ var(--window-color4) 10%,
+ var(--window-color4) 90%
+ );
+}
+
+.fb2 {
+ width: 10%;
+ height: 40%;
+}
+
+.fb2a {
+ width: 100%;
+ border-bottom: 10vh solid var(--building-color3);
+ border-left: 1vw solid transparent;
+ border-right: 1vw solid transparent;
+}
+
+.fb2b {
+ width: 100%;
+ height: 75%;
+ background-color: var(--building-color3);
+}
+
+.fb2-window {
+ width: 22%;
+ height: 100%;
+ background-color: var(--window-color3);
+}
+
+.fb3 {
+ width: 10%;
+ height: 35%;
+}
+
+.fb3a {
+ width: 80%;
+ height: 15%;
+ background-color: var(--building-color1);
+}
+
+.fb3b {
+ width: 100%;
+ height: 35%;
+ background-color: var(--building-color1);
+}
+
+.fb3-window {
+ width: 25%;
+ height: 80%;
+ background-color: var(--window-color1);
+}
+
+.fb4 {
+ width: 8%;
+ height: 45%;
+ position: relative;
+ left: 10%;
+}
+
+.fb4a {
+ border-top: 5vh solid transparent;
+ border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+ width: 100%;
+ height: 89%;
+ background-color: var(--building-color1);
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.fb4-window {
+ width: 30%;
+ height: 10%;
+ border-radius: 50%;
+ background-color: var(--window-color1);
+ margin: 10%;
+}
+
+.fb5 {
+ width: 10%;
+ height: 33%;
+ position: relative;
+ right: 10%;
+ background: repeating-linear-gradient(
+ var(--building-color2),
+ var(--building-color2) 5%,
+ transparent 5%,
+ transparent 10%
+ ),
+ repeating-linear-gradient(
+ 90deg,
+ var(--building-color2),
+ var(--building-color2) 12%,
+ var(--window-color2) 12%,
+ var(--window-color2) 44%
+ );
+}
+
+.fb6 {
+ width: 9%;
+ height: 38%;
+ background: repeating-linear-gradient(
+ 90deg,
+ var(--building-color3),
+ var(--building-color3) 10%,
+ transparent 10%,
+ transparent 30%
+ ),
+ repeating-linear-gradient(
+ var(--building-color3),
+ var(--building-color3) 10%,
+ var(--window-color3) 10%,
+ var(--window-color3) 30%
+ );
+}
+--fcc-editable-region--
+@media (max-width: 1000px) {
+
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md
new file mode 100644
index 00000000000..55ca419d5ce
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md
@@ -0,0 +1,81 @@
+---
+id: 60f8604682407e0d017bbf7f
+title: Passo 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Para os termos e condições, adicione uma `input` com um `type` de `checkbox` para o terceiro elemento `label`. Além disso, como não queremos que os usuários se cadastrem, sem ter lido os termos e condições, faça com que seja `required`.
+
+# --hints--
+
+Você deve adicionar um elemento `input` dentro do terceiro elemento `label`.
+
+```js
+assert.exists(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input'));
+```
+
+Você deve adicionar um atributo `type` de valor `checkbox` ao elemento `input`.
+
+```js
+assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')?.type, 'checkbox');
+```
+
+Você deve adicionar um atributo `required` ao elemento `input`.
+
+```js
+assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')?.required, true);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Registration Form
+Please fill out this form with the required information
+ + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md new file mode 100644 index 00000000000..3843ae9e13c --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md @@ -0,0 +1,295 @@ +--- +id: 60b69a66b6ddb80858c515bc +title: Passo 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Dê ao `eyes-div` um `z-index` de `3`. + +# --hints-- + +O seletor `#eyes-div` deve ter a propriedade `z-index` definida para `3`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +
+
+
+
+```
+
+```css
+body {
+ background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+ background-color: #8B4513;
+ width: 100%;
+ height: 60%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+}
+
+#offwhite-character {
+ width: 300px;
+ height: 550px;
+ background-color: GhostWhite;
+ position: absolute;
+ top: 20%;
+ left: 17.5%;
+}
+
+#white-hat {
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 0 120px 140px 180px;
+ border-top-color: transparent;
+ border-right-color: transparent;
+ border-bottom-color: GhostWhite;
+ border-left-color: transparent;
+ position: absolute;
+ top: -140px;
+ left: 0;
+}
+
+#black-mask {
+ width: 100%;
+ height: 50px;
+ background-color: rgb(45, 31, 19);
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1;
+}
+
+#gray-instrument {
+ width: 15%;
+ height: 40%;
+ background-color: rgb(167, 162, 117);
+ position: absolute;
+ top: 50px;
+ left: 125px;
+ z-index: 1;
+}
+
+.black-dot {
+ width: 10px;
+ height: 10px;
+ background-color: rgb(45, 31, 19);
+ border-radius: 50%;
+ display: block;
+ margin: auto;
+ margin-top: 65%;
+}
+
+#tan-table {
+ width: 450px;
+ height: 140px;
+ background-color: #D2691E;
+ position: absolute;
+ top: 275px;
+ left: 15px;
+ z-index: 1;
+}
+
+#black-character {
+ width: 300px;
+ height: 500px;
+ background-color: rgb(45, 31, 19);
+ position: absolute;
+ top: 30%;
+ left: 59%;
+}
+
+#black-hat {
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 150px 0 0 300px;
+ border-top-color: transparent;
+ border-right-color: transparent;
+ border-bottom-color: transparent;
+ border-left-color: rgb(45, 31, 19);
+ position: absolute;
+ top: -150px;
+ left: 0;
+}
+
+#gray-mask {
+ width: 150px;
+ height: 150px;
+ background-color: rgb(167, 162, 117);
+ position: absolute;
+ top: -10px;
+ left: 70px;
+}
+
+#white-paper {
+ width: 400px;
+ height: 100px;
+ background-color: GhostWhite;
+ position: absolute;
+ top: 250px;
+ left: -150px;
+ z-index: 1;
+}
+
+.fa-music {
+ display: inline-block;
+ margin-top: 8%;
+ margin-left: 13%;
+}
+
+.blue {
+ background-color: #1E90FF;
+}
+
+#blue-left {
+ width: 500px;
+ height: 300px;
+ position: absolute;
+ top: 20%;
+ left: 20%;
+}
+
+#blue-right {
+ width: 400px;
+ height: 300px;
+ position: absolute;
+ top: 50%;
+ left: 40%;
+}
+
+#orange-character {
+ width: 250px;
+ height: 550px;
+ background-color: rgb(240, 78, 42);
+ position: absolute;
+ top: 25%;
+ left: 40%;
+}
+
+#black-round-hat {
+ width: 180px;
+ height: 150px;
+ background-color: rgb(45, 31, 19);
+ border-radius: 50%;
+ position: absolute;
+ top: -100px;
+ left: 5px;
+ z-index: -1;
+}
+
+#eyes-div {
+ width: 180px;
+ height: 50px;
+ position: absolute;
+ top: -40px;
+ left: 20px;
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd78621573aa5e8b512f5e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd78621573aa5e8b512f5e.md
new file mode 100644
index 00000000000..7bb16c4266e
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd78621573aa5e8b512f5e.md
@@ -0,0 +1,142 @@
+---
+id: 61fd78621573aa5e8b512f5e
+title: Passo 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+No terceiro elemento `tr`, adicione um elemento `th` com o texto `Savings Funds set aside for emergencies.`. Encapsule esse texto, exceto `Savings`, em um elemento `span` com o atributo `class` definido como `description`.
+
+Depois disso, adicione três elementos `td` com o seguinte texto (em ordem): `$500`, `$650`, `$728`. Dê ao terceiro elemento `td` a `class` com o valor de `current`.
+
+# --hints--
+
+O terceiro `tr` deve ter um elemento `th`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
+```
+
+O elemento `th` deve ter o texto `Savings Funds set aside for emergencies.`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Savings Funds set aside for emergencies.');
+```
+
+Você deve colocar o texto `Funds set aside for emergencies.` dentro de um elemento `span`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'Funds set aside for emergencies.');
+```
+
+O elemento `span` deve ter o atributo `class` definido como `description`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+Você deve ter três elementos `td`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3);
+```
+
+O primeiro elemento `td` deve ter o texto `$500`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$500');
+```
+
+O segundo elemento `td` deve ter o texto `$650`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$650');
+```
+
+O terceiro elemento `td` deve ter o texto `$728`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$728');
+```
+
+O terceiro elemento `td` deve ter a `class` definida como `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + AcmeWidgetCorp + Balance Sheet + +
+ +
+
+
+
+
+
+
+
+ | + | 2019 | +2020 | +2021 | +
|---|---|---|---|
| Cash This is the cash we currently have on hand. | +$25 | +$30 | +$28 | +
| Checking Our primary transactional account. | +$54 | +$56 | +$53 | +
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
+
+
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e804c54d5e7308d7ebe56.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e804c54d5e7308d7ebe56.md
new file mode 100644
index 00000000000..38d5e9807c6
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e804c54d5e7308d7ebe56.md
@@ -0,0 +1,60 @@
+---
+id: 612e804c54d5e7308d7ebe56
+title: Passo 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Dentro do elemento `.keys`, adicione sete elementos `div`. Dê a todas elas a classe `key`.
+
+# --hints--
+
+Você deve criar sete novos elementos `div`.
+
+```js
+const divDivDiv = document.querySelectorAll('div');
+assert(divDivDiv?.length === 9);
+```
+
+Os sete novos elementos `div` devem estar dentro do elemento `.keys`.
+
+```js
+const keys = document.querySelector('.keys');
+assert([...keys?.children].length === 7);
+assert([...keys?.children].every(child => child?.tagName === 'DIV'));
+```
+
+Os sete novos elementos `div` devem ter `class` definida como `key`.
+
+```js
+const keys = document.querySelector('.keys');
+assert([...keys?.children].every(child => child?.classList?.contains('key')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+ --fcc-editable-region--
+
+
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md
new file mode 100644
index 00000000000..7215412da5c
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md
@@ -0,0 +1,95 @@
+---
+id: 612e813b3ba67633222cbe54
+title: Passo 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Lembre-se que um atributo `class` pode ter vários valores. Para separar as teclas brancas do piano das teclas pretas, você adicionará uma segunda `class` com o valor `black--key`. Adicione-a ao segundo, terceiro, quinto, sexto e sétimo elementos `.key`.
+
+# --hints--
+
+O segundo elemento `.key` deve ter o atributo `class` com o valor `black--key`.
+
+```js
+const key = document.querySelectorAll('.key')?.[1];
+assert(key?.className?.includes('black--key'));
+```
+
+O terceiro elemento `.key` deve ter a `class` `black--key`.
+
+```js
+const third = document.querySelectorAll('.key')?.[2];
+assert(third?.classList?.contains('black--key'));
+```
+
+O quinto elemento `.key` deve ter a `class` `black--key`.
+
+```js
+const fifth = document.querySelectorAll('.key')?.[4];
+assert(fifth?.classList?.contains('black--key'));
+```
+
+O sexto elemento `.key` deve ter a `class` `black--key`.
+
+```js
+const sixth = document.querySelectorAll('.key')?.[5];
+assert(sixth?.classList?.contains('black--key'));
+```
+
+O sétimo elemento `.key` deve ter a `class` `black--key`.
+
+```js
+const seventh = document.querySelectorAll('.key')?.[6];
+assert(seventh?.classList?.contains('black--key'));
+```
+
+Você deve ter cinco elementos `.black--key`.
+
+```js
+const blackKeys = document.querySelectorAll('.black--key');
+assert(blackKeys?.length === 5);
+```
+
+Você deve ter sete elementos `.key`.
+
+```js
+const keys = document.querySelectorAll('.key');
+assert(keys?.length === 7);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ --fcc-editable-region--
+
+
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md
new file mode 100644
index 00000000000..99f23ea6b5b
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md
@@ -0,0 +1,74 @@
+---
+id: 612e8279827a28352ce83a72
+title: Passo 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Agora copie o conjunto dos sete elementos `.key` e cole mais dois conjuntos no div `.keys`.
+
+# --hints--
+
+Você deve ter 21 elementos `.key`.
+
+```js
+const keys = document.querySelectorAll('.key');
+assert(keys?.length === 21);
+```
+
+Você deve ter 15 elementos `.black--key`.
+
+```js
+const blackKeys = document.querySelectorAll('.black--key');
+assert(blackKeys?.length === 15);
+```
+
+Todos os elementos `.key` devem estar dentro do seu elemento `.keys`.
+
+```js
+const keys = document.querySelector('.keys');
+assert(keys?.querySelectorAll('.key')?.length === 21);
+```
+
+Todos os elementos `.black--key` devem estar dentro do seu elemento `.keys`.
+
+```js
+const keys = document.querySelector('.keys');
+assert(keys?.querySelectorAll('.black--key')?.length === 15);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region--
+
+
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e83ec2eca1e370f830511.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e83ec2eca1e370f830511.md
new file mode 100644
index 00000000000..6e8e53331f9
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e83ec2eca1e370f830511.md
@@ -0,0 +1,99 @@
+---
+id: 612e83ec2eca1e370f830511
+title: Passo 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Adicione um elemento `link` dentro do elemento `head`. Para esse elemento `link`, defina o atributo `rel` como `stylesheet` e `href` como `./styles.css`.
+
+# --hints--
+
+O código deve ter um elemento `link`.
+
+```js
+assert.match(code, //i));
+```
+
+O elemento `link` deve estar dentro do elemento `head`.
+
+```js
+assert(code.match(/[\w\W\s]*
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md
new file mode 100644
index 00000000000..b5de0850a02
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md
@@ -0,0 +1,77 @@
+---
+id: 612e89562043183c86df287c
+title: Passo 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Navegadores podem aplicar valores padrão de margem e de preenchimento a elementos específicos. Para garantir que seu piano pareça correto, você precisa redefinir o box model.
+
+Adicione um seletor de regras `html` ao seu arquivo CSS e defina a propriedade `box-sizing` como `border-box`.
+
+# --hints--
+
+Você deve ter um seletor `html`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+O seletor `html` deve ter a propriedade `box-sizing` com o valor de `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89d254fe5d3df7d6693d.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89d254fe5d3df7d6693d.md
new file mode 100644
index 00000000000..88250ebd3e2
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89d254fe5d3df7d6693d.md
@@ -0,0 +1,83 @@
+---
+id: 612e89d254fe5d3df7d6693d
+title: Passo 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Agora que você redefiniu o box model do `html`, é preciso passar isso para os elementos internos também. Para fazer isso, você pode definir a propriedade `box-sizing` como `inherit`, o que dirá aos elementos de destino que usemo mesmo valor que o elemento pai.
+
+Você também precisará apontar para os pseudoelementos, que são palavras-chave especiais que seguem um seletor. Os dois pseudoelementos que você usará são `::before` e `::after`.
+
+`::before` cria um pseudoelemento que é o primeiro filho do elemento selecionado, enquanto `::after` cria um pseudoelemento que é o último filho do elemento selecionado. Esses pseudoelementos são muitas vezes usados para criar conteúdo estético, algo que você verá mais tarde neste projeto.
+
+Por enquanto, crie um seletor de CSS que aponte para todos os elementos usando `*` e inclua os pseudoelementos com `::before` e `::after`. Defina a propriedade `box-sizing` para `inherit`.
+
+# --hints--
+
+Você deve ter um seletor `*, ::before, ::after`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after'));
+```
+
+O seletor `*, ::before, ::after` deve ter a propriedade `box-sizing` definida como `inherit`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.boxSizing === 'inherit');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+html {
+ box-sizing: border-box;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8eebe3a6dc3fcc33a66f.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8eebe3a6dc3fcc33a66f.md
new file mode 100644
index 00000000000..999d4f94cef
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8eebe3a6dc3fcc33a66f.md
@@ -0,0 +1,95 @@
+---
+id: 612e8eebe3a6dc3fcc33a66f
+title: Passo 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Agora dê ao elemento `#piano` um seletor `id`. Defina a propriedade `background-color` como `#00471b`, uma propriedade `width` de `992px` e uma propriedade `height` de `290px`.
+
+# --hints--
+
+Você deve ter um seletor `#piano`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano'));
+```
+
+O seletor `#piano` deve ter a propriedade `background-color` definida como `#00471b`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.backgroundColor === 'rgb(0, 71, 27)');
+```
+
+O seletor `#piano` deve ter a propriedade `width` definida como `992px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.width === '992px');
+```
+
+O seletor `#piano` deve ter a propriedade `height` definida como `290px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.height === '290px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e95ef2e4bdf41f69067f9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e95ef2e4bdf41f69067f9.md
new file mode 100644
index 00000000000..e8c66d1f5a4
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e95ef2e4bdf41f69067f9.md
@@ -0,0 +1,81 @@
+---
+id: 612e95ef2e4bdf41f69067f9
+title: Passo 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Defina a `margin` do elemento `#piano` como `80px auto`.
+
+# --hints--
+
+O seletor `#piano` deve ter uma propriedade `margin` definida como `80px auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.margin === '80px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e96fc87fe8e44f69f7ec5.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e96fc87fe8e44f69f7ec5.md
new file mode 100644
index 00000000000..ebef05b846a
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e96fc87fe8e44f69f7ec5.md
@@ -0,0 +1,102 @@
+---
+id: 612e96fc87fe8e44f69f7ec5
+title: Passo 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Hora de estilizar as teclas. Abaixo da regra `#piano`, selecione os elementos `.keys` com um seletor `class`. Dê à nova regra a propriedade `background-color` de `#040404`, uma propriedade `width` de `949px` e uma propriedade `height` de `180px`.
+
+# --hints--
+
+Você deve ter um seletor `.keys`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys'));
+```
+
+O seletor `.keys` deve ter a propriedade `background-color` definida como `#040404`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.backgroundColor === 'rgb(4, 4, 4)');
+```
+
+O seletor `.keys` deve ter a propriedade `width` definida como `949px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.width === '949px');
+```
+
+O seletor `.keys` deve ter a propriedade `height` definida como `180px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.height === '180px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e98f3245c98475e49cfc6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e98f3245c98475e49cfc6.md
new file mode 100644
index 00000000000..1b2d7dc794d
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e98f3245c98475e49cfc6.md
@@ -0,0 +1,88 @@
+---
+id: 612e98f3245c98475e49cfc6
+title: Passo 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Dê a `.keys` uma `padding-left` de `2px`.
+
+# --hints--
+
+O seletor `.keys` deve ter a propriedade `padding-left` definida como `2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.paddingLeft === '2px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+}
+
+--fcc-editable-region--
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9a21381a1949327512e6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9a21381a1949327512e6.md
new file mode 100644
index 00000000000..19aa617372a
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9a21381a1949327512e6.md
@@ -0,0 +1,89 @@
+---
+id: 612e9a21381a1949327512e6
+title: Passo 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Mova as teclas para a posição certa ajustando o seletor de `#piano`. Defina a propriedade `padding` como `90px 20px 0 20px`.
+
+# --hints--
+
+O seletor `#piano` deve ter uma propriedade `padding` definida como `90px 20px 0 20px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.padding === '90px 20px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+}
+--fcc-editable-region--
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9d142affc44a453655db.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9d142affc44a453655db.md
new file mode 100644
index 00000000000..60c139f5ced
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9d142affc44a453655db.md
@@ -0,0 +1,117 @@
+---
+id: 612e9d142affc44a453655db
+title: Passo 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Hora de estilizar as teclas em si. Crie um seletor `class` para os elementos `.key`. Define `background-color` com o valor `#ffffff`, a propriedade `position` como `relative`, a propriedade `width` como `41px` e a propriedade `height` como `175px`.
+
+# --hints--
+
+Você deve ter um seletor `.key`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key'));
+```
+
+O seletor `.key` deve ter a propriedade `background-color` definida como `#ffffff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.backgroundColor === 'rgb(255, 255, 255)');
+```
+
+O seletor `.key` deve ter a propriedade `position` definida para `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.position === 'relative');
+```
+
+O seletor `.key` deve ter a propriedade `width` definida para `41px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.width === '41px');
+```
+
+O seletor `.key` deve ter a propriedade `height` definida como `175px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.height === '175px');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md
new file mode 100644
index 00000000000..82c7567d1c9
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md
@@ -0,0 +1,103 @@
+---
+id: 612e9f1e7e5ccd4fa9ada0be
+title: Passo 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Dê à `.key` uma `margin` de `2px` e a propriedade `float` definida como `left`.
+
+# --hints--
+
+O seletor `.key` deve ter uma propriedade `margin` definida como `2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.margin === '2px');
+```
+
+O seletor `.key` deve ter uma propriedade `float` definida como `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.float === 'left');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+--fcc-editable-region--
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea4c4993aba52ab4aa32e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea4c4993aba52ab4aa32e.md
new file mode 100644
index 00000000000..a4d8c8e0d55
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea4c4993aba52ab4aa32e.md
@@ -0,0 +1,119 @@
+---
+id: 612ea4c4993aba52ab4aa32e
+title: Passo 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Agora é hora de usar os pseudosseletores que você preparou anteriormente. Para criar as teclas pretas, adicione um novo seletor `.key.black--key::after`. Ele terá como destino os elementos com a classe `key black--key`e selecionará o pseudoelemento após esses elementos no HTML.
+
+No novo seletor, defina a `background-color` como `#1d1e22`. Defina também a propriedade `content` para `""`. Isto deixará os pseudoelementos vazios.
+
+A propriedade `content` é usada para definir ou substituir o conteúdo do elemento. Por padrão, os pseudoelementos criados pelos pseudosseletores `::before` e `::after` estão vazios e os elementos não serão renderizados na página. Definir a propriedade `content` como uma string vazia `""` garantirá que o elemento seja renderizado na página embora ainda esteja vazio.
+
+Se você quiser experimentar, tente remover a propriedade `background-color` e definir valores diferentes para a propriedade `content`, tais como `"♥"`. Lembre-se de desfazer essas alterações quando terminar para que os testes passem.
+
+# --hints--
+
+Você deve ter um seletor `.key.black--key::after`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after'));
+```
+
+O seletor `.key.black--key::after` deve ter a propriedade `background-color` definida como `#1d1e22`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.backgroundColor === 'rgb(29, 30, 34)');
+```
+
+O seletor `.key.black--key::after` deve ter a propriedade `content` definida como `""`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.content === '""');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea97df5742154772f312e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea97df5742154772f312e.md
new file mode 100644
index 00000000000..0f2c29430f0
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea97df5742154772f312e.md
@@ -0,0 +1,110 @@
+---
+id: 612ea97df5742154772f312e
+title: Passo 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Dê a `.key.black--key::after` uma propriedade `position` definida como `absolute` e uma propriedade `left` definida como `-18px`.
+
+# --hints--
+
+O seletor `.key.black--key::after` deve ter a propriedade `position` definida como `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.position === 'absolute');
+```
+
+O seletor `.key.black--key::after` deve ter a propriedade `left` definida como `-18px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.left === '-18px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ead8788d28655ef8db056.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ead8788d28655ef8db056.md
new file mode 100644
index 00000000000..7130ee4c625
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ead8788d28655ef8db056.md
@@ -0,0 +1,112 @@
+---
+id: 612ead8788d28655ef8db056
+title: Passo 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Para `.key.black--key::after`, defina `width` como `32px` e `height` como `100px`.
+
+# --hints--
+
+`.key.black--key::after` deve ter a propriedade `width` definida como `32px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.width === '32px');
+```
+
+`.key.black--key::after` deve ter a propriedade `height` definida como `100px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.height === '100px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eaf56b7ba3257fdbfb0db.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eaf56b7ba3257fdbfb0db.md
new file mode 100644
index 00000000000..ec923da5108
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eaf56b7ba3257fdbfb0db.md
@@ -0,0 +1,144 @@
+---
+id: 612eaf56b7ba3257fdbfb0db
+title: Passo 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+O piano precisa do logotipo do freeCodeCamp para torná-lo oficial.
+
+Adicione um elemento `img` abaixo do elemento `.keys`. Dê a `img` uma `class` `logo` e defina `src` como `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. Dê a imagem um texto `alt` de `freeCodeCamp Logo`.
+
+# --hints--
+
+Você deve adicionar um novo elemento `img`.
+
+```js
+assert(document.querySelectorAll('img')?.length === 1);
+```
+
+O elemento `img` deve estar antes do primeiro elemento `.key`.
+
+```js
+const img = document.querySelector('img');
+assert(img?.nextElementSibling?.className === 'keys');
+assert(img?.previousElementSibling === null);
+```
+
+O elemento `img` deve ter uma `class` definida como logo.
+
+```js
+const img = document.querySelector('img');
+assert(img?.className === 'logo');
+```
+
+O elemento `img` deve ter o atributo `src` definido como `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`.
+
+```js
+const img = document.querySelector('img');
+assert(img?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg');
+```
+
+O elemento `img` deve ter o atributo `alt` definido como `freeCodeCamp Logo`.
+
+```js
+assert(document.querySelector('img')?.getAttribute('alt')?.toLowerCase() === 'freecodecamp logo');
+```
+
+Lembre-se de que maiúsculas, minúsculas e a ortografia importam.
+
+```js
+assert(document.querySelector('img')?.getAttribute('alt') === 'freeCodeCamp Logo');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+}
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb4893b63c75bb9251ddf.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb4893b63c75bb9251ddf.md
new file mode 100644
index 00000000000..ca08b7cae1a
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb4893b63c75bb9251ddf.md
@@ -0,0 +1,129 @@
+---
+id: 612eb4893b63c75bb9251ddf
+title: Passo 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Comece a estilizar o logotipo criando um seletor `.logo`. Defina `width` como `200px`, `position` como `absolute` e `top` como `23px`.
+
+# --hints--
+
+Você deve ter um seletor `.logo`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo'));
+```
+
+O seletor `.logo` deve ter a propriedade `width` definida como `200px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.width === '200px');
+```
+
+O seletor `.logo` deve ter a propriedade `position` definida como `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.position === 'absolute');
+```
+
+O seletor `.logo` deve ter a propriedade `top` definida como `23px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.top === '23px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ --fcc-editable-region--
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb75153591b5e3b1ab65e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb75153591b5e3b1ab65e.md
new file mode 100644
index 00000000000..8da1386b202
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb75153591b5e3b1ab65e.md
@@ -0,0 +1,115 @@
+---
+id: 612eb75153591b5e3b1ab65e
+title: Passo 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+O elemento `img` precisa que seu pai tenha uma `position` definida como um ponto de referência. Defina a propriedade `position` do seletor `#piano` como `relative`.
+
+# --hints--
+
+O seletor `#piano` deve ter a propriedade `position` definida como `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.position === 'relative');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+--fcc-editable-region--
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb7ca8c275d5f89c73333.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb7ca8c275d5f89c73333.md
new file mode 100644
index 00000000000..38e661fabae
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb7ca8c275d5f89c73333.md
@@ -0,0 +1,116 @@
+---
+id: 612eb7ca8c275d5f89c73333
+title: Passo 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Para suavizar as bordas pontiagudas do piano e das teclas, comece dando a `#piano` um `border-radius` de `10px`.
+
+# --hints--
+
+O seletor `#piano` deve ter a propriedade `border-radius` definida como `10px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.borderRadius === '10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+}
+--fcc-editable-region--
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb8e984cd73677a92b7e9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb8e984cd73677a92b7e9.md
new file mode 100644
index 00000000000..cab92e30a25
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb8e984cd73677a92b7e9.md
@@ -0,0 +1,117 @@
+---
+id: 612eb8e984cd73677a92b7e9
+title: Passo 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Dê ao seletor `.key` o valor `border-radius` de `0 0 3px 3px`.
+
+# --hints--
+
+O seletor `.key` deve ter a propriedade `border-radius` definida como `0 0 3px 3px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.borderRadius === '0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+--fcc-editable-region--
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+--fcc-editable-region--
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb934f64a4d6890a45518.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb934f64a4d6890a45518.md
new file mode 100644
index 00000000000..b2c8db382ef
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb934f64a4d6890a45518.md
@@ -0,0 +1,118 @@
+---
+id: 612eb934f64a4d6890a45518
+title: Passo 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Dê o seletor `.key.black--key::after` uma `border-radius` de `0 0 3px 3px` para coincidir com as teclas.
+
+# --hints--
+
+O seletor `.key.black--key::after` deve ter a propriedade `border-radius` definida como `0 0 3px 3px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.borderRadius === '0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+}
+--fcc-editable-region--
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebcba99bfa46a15370b11.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebcba99bfa46a15370b11.md
new file mode 100644
index 00000000000..bc3a84f3140
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebcba99bfa46a15370b11.md
@@ -0,0 +1,127 @@
+---
+id: 612ebcba99bfa46a15370b11
+title: Passo 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Agora, você precisa torná-lo responsivo. Adicione uma `@media` query com uma `max-width` de `768px`.
+
+# --hints--
+
+Você deve adicionar uma nova `@media` query.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1);
+```
+
+A `@media` query deverá ter uma `max-width` de `768px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')[0]?.media?.mediaText === '(max-width: 768px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebe7fe6d07e6b76d1cae2.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebe7fe6d07e6b76d1cae2.md
new file mode 100644
index 00000000000..e0f799b4ad4
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebe7fe6d07e6b76d1cae2.md
@@ -0,0 +1,133 @@
+---
+id: 612ebe7fe6d07e6b76d1cae2
+title: Passo 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Adicione um novo seletor `#piano` dentro da `@media` query e defina `width` como `358px`.
+
+# --hints--
+
+A regra `@media` deve ter um seletor `#piano`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano);
+```
+
+O novo seletor `#piano` deve ter uma `width` de `358px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano?.style.width === '358px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebedec97e096c8bf64999.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebedec97e096c8bf64999.md
new file mode 100644
index 00000000000..05170d500de
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebedec97e096c8bf64999.md
@@ -0,0 +1,136 @@
+---
+id: 612ebedec97e096c8bf64999
+title: Passo 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Dentro da `@media` query, adicione um seletor `.keys` e defina `width` como `318px`.
+
+# --hints--
+
+
+A regra `@media` deve ter um seletor `.keys`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys);
+```
+
+O novo seletor `.keys` deve ter uma `width` de `318px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys?.style.width === '318px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+ #piano {
+ width: 358px;
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebf9a210f2b6d77001e68.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebf9a210f2b6d77001e68.md
new file mode 100644
index 00000000000..b2bb85dffbf
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebf9a210f2b6d77001e68.md
@@ -0,0 +1,139 @@
+---
+id: 612ebf9a210f2b6d77001e68
+title: Passo 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Agora adicione um seletor `.logo` à query `@media` e defina a propriedade `width` como `150px`.
+
+# --hints--
+
+A `@media` deve ter um seletor `.logo`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const logo = rules?.find(rule => rule.selectorText === '.logo');
+assert(logo);
+```
+
+O novo seletor `.logo` deve ter um `width` de `150px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const logo = rules?.find(rule => rule.selectorText === '.logo');
+assert(logo?.style.width === '150px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+ #piano {
+ width: 358px;
+ }
+
+ .keys {
+ width: 318px;
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec0490ae8626e9adf82e4.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec0490ae8626e9adf82e4.md
new file mode 100644
index 00000000000..008a7c2b0cc
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec0490ae8626e9adf82e4.md
@@ -0,0 +1,133 @@
+---
+id: 612ec0490ae8626e9adf82e4
+title: Passo 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+Você pode ter percebido que as teclas não aparecem quando a janela do navegador é menor que `768px`. Defina `overflow` como `hidden` no primeiro seletor `.keys` para resolver esse problema. Essa propriedade ocultará qualquer elemento que seja empurrado para fora do valor definido de `width` para `.keys`.
+
+# --hints--
+
+O seletor `.keys` original deve ter a propriedade `overflow` definida como `hidden`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.overflow === 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+--fcc-editable-region--
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+--fcc-editable-region--
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+@media (max-width: 768px) {
+ #piano {
+ width: 358px;
+ }
+
+ .keys {
+ width: 318px;
+ }
+
+ .logo {
+ width: 150px;
+ }
+}
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec19d5268da7074941f84.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec19d5268da7074941f84.md
new file mode 100644
index 00000000000..05df669663b
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec19d5268da7074941f84.md
@@ -0,0 +1,144 @@
+---
+id: 612ec19d5268da7074941f84
+title: Passo 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Adicione outra regra `@media` para aplicar se a janela do navegador for maior que `769px`, mas menor que `1199px`.
+
+# --hints--
+
+Você deve adicionar uma nova `@media` query.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2);
+```
+
+A `@media` query deve ter uma `min-width` de `769px` e uma `max-width` de `1199px`.
+
+```js
+const mediaText = new __helpers.CSSHelp(document).getCSSRules('media')[1]?.media?.mediaText;
+assert(mediaText === '(max-width: 1199px) and (min-width: 769px)' || mediaText === '(min-width: 769px) and (max-width: 1199px)');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+ overflow: hidden;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+@media (max-width: 768px) {
+ #piano {
+ width: 358px;
+ }
+
+ .keys {
+ width: 318px;
+ }
+
+ .logo {
+ width: 150px;
+ }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec29c84b9a6718b1f5cec.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec29c84b9a6718b1f5cec.md
new file mode 100644
index 00000000000..cd3059d5eb2
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec29c84b9a6718b1f5cec.md
@@ -0,0 +1,288 @@
+---
+id: 612ec29c84b9a6718b1f5cec
+title: Passo 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Para a nova regra `@media`, defina a `width` de `#piano` como `675px` e a `width` de `.keys` como `633px`.
+
+Com isso, seu piano está completo!
+
+# --hints--
+
+A segunda regra de `@media` deve ter um seletor `#piano`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano);
+```
+
+O novo seletor `#piano` deve ter uma `width` de `675px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano?.style.width === '675px');
+```
+
+A segunda regra de `@media` deve ter um seletor `.keys`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys);
+```
+
+O novo seletor `.keys` deve ter uma `width` de `633px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys?.style.width === '633px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+ overflow: hidden;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+@media (max-width: 768px) {
+ #piano {
+ width: 358px;
+ }
+
+ .keys {
+ width: 318px;
+ }
+
+ .logo {
+ width: 150px;
+ }
+}
+
+--fcc-editable-region--
+@media (max-width: 1199px) and (min-width: 769px) {
+
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+ overflow: hidden;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+@media (max-width: 768px) {
+ #piano {
+ width: 358px;
+ }
+
+ .keys {
+ width: 318px;
+ }
+
+ .logo {
+ width: 150px;
+ }
+}
+
+@media (max-width: 1199px) and (min-width: 769px) {
+ #piano {
+ width: 675px;
+ }
+
+ .keys {
+ width: 633px;
+ }
+}
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md
new file mode 100644
index 00000000000..d8ba3bebc26
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md
@@ -0,0 +1,55 @@
+---
+id: 60a3e3396c7b40068ad6996a
+title: Passo 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+Agora, você já deve estar familiarizado com os elementos básicos que uma página em HTML deve ter.
+
+Defina seu código com uma declaração `DOCTYPE` e com os elementos `html`, `head` e `body`.
+
+# --hints--
+
+O código deve ter a declaração ``.
+
+```js
+assert(code.match(//i));
+```
+
+O código deve ter um elemento `html`.
+
+```js
+assert(document.querySelectorAll('html').length === 1);
+```
+
+O código deve ter um elemento `head` dentro do elemento `html`.
+
+```js
+assert(document.querySelectorAll('head').length === 1);
+```
+
+O código deve ter um elemento `body` dentro do elemento `html`.
+
+```js
+assert(document.querySelectorAll('body').length === 1);
+```
+
+O elemento `head` deve estar antes do elemento `body`.
+
+```js
+assert(document.querySelector('body').previousElementSibling.tagName === 'HEAD');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md
new file mode 100644
index 00000000000..d740c32437f
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md
@@ -0,0 +1,65 @@
+---
+id: 60a3e3396c7b40068ad6996b
+title: Passo 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Dentro do elemento `head`, adicione uma tag `meta` que define o `charset` como `UTF-8` e um elemento `title` com o valor `Rothko Painting`.
+
+Dentro do elemento `body`, adicione um elemento `img` com um `src` de `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`.
+# --hints--
+
+O código deve ter uma tag `meta`.
+
+```js
+assert(document.querySelectorAll('meta').length === 1);
+```
+
+A tag `meta` deve definir o `charset` como `UTF-8`.
+
+```js
+assert(document.querySelector('meta').getAttribute('charset') === 'UTF-8');
+```
+
+O código deve ter um elemento `title`.
+
+```js
+assert(document.querySelectorAll('title').length === 1);
+```
+
+O `title` deve ser `Rothko Painting`.
+
+```js
+assert(document.querySelector('title').innerText === 'Rothko Painting');
+```
+
+O código deve ter um elemento `img`.
+
+```js
+assert(document.querySelectorAll('img').length === 1);
+```
+
+O elemento `img` deve ter para o atributo `src` o valor de `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`.
+
+```js
+assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+--fcc-editable-region--
+
+
+
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996c.md
new file mode 100644
index 00000000000..4ac39113b3f
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996c.md
@@ -0,0 +1,42 @@
+---
+id: 60a3e3396c7b40068ad6996c
+title: Passo 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+No modelo de caixa do CSS, todos os elementos do HTML são tratados como uma caixa com quatro áreas.
+
+Imagine que você recebeu uma caixa de sua loja on-line favorita -- o conteúdo é o item na caixa, ou, no nosso caso, um elemento de cabeçalho, de parágrafo ou de imagem.
+
+Altere o atributo `src` na `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+--fcc-editable-region--
+
+
+```
+
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md
new file mode 100644
index 00000000000..a28a8c04e4c
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md
@@ -0,0 +1,41 @@
+---
+id: 60a3e3396c7b40068ad6996d
+title: Passo 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+O conteúdo é cercado por um espaço chamado preenchimento (padding), do mesmo modo que um plástico de bolha separa um item da caixa ao seu redor.
+
+Pense na borda como a caixa em que o item foi enviado.
+
+Altere o atributo `src` para `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png`
+
+# --hints--
+
+O elemento `img` deve ter para o atributo `src` o valor de `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png`
+
+```js
+assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ 
+--fcc-editable-region--
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md
new file mode 100644
index 00000000000..a39f558d8a3
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md
@@ -0,0 +1,43 @@
+---
+id: 60a3e3396c7b40068ad6996e
+title: Passo 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+A margem é a área fora da caixa e pode ser usada para controlar o espaço entre outras caixas ou elementos.
+
+Aqui, o elemento inferior tem uma margem superior maior, empurrando-o mais para baixo na página.
+
+Agora que você entende o modelo da caixa do CSS, vamos começar a trabalhar na pintura de Rothko.
+
+Remova o elemento `
+--fcc-editable-region--
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md
new file mode 100644
index 00000000000..3fcd4419124
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md
@@ -0,0 +1,47 @@
+---
+id: 60a3e3396c7b40068ad6996f
+title: Passo 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Adicione um elemento `div` ao `body`.
+
+Defina o atributo `class` como `canvas`. Por exemplo, ``.
+
+Esse elemento atuará como a tela para sua pintura.
+
+# --hints--
+
+O código deve ter um elemento `div`.
+
+```js
+assert(document.querySelectorAll('div').length === 1)
+```
+
+O elemento `div` deve uma `class` com o valor `canvas`.
+
+```js
+assert(document.querySelector('div').className.split(' ').includes('canvas'))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Rothko Painting
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md
new file mode 100644
index 00000000000..7671008f7bd
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md
@@ -0,0 +1,59 @@
+---
+id: 60a3e3396c7b40068ad69970
+title: Passo 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Antes de começar a estilizar a `div` que você adicionou, você precisa vincular o CSS ao HTML.
+
+Adicione um elemento `link` para vincular o arquivo `styles.css`. Defina o `href` como `./styles.css` e lembre-se de definir o atributo `rel` como `stylesheet`.
+
+# --hints--
+
+O código deve ter um elemento `link`.
+
+```js
+assert(//.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Rothko Painting
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md
new file mode 100644
index 00000000000..70171308dc3
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69971
+title: Passo 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+É hora de usar o CSS.
+
+Mesmo que a `` não tenha texto, ela ainda é tratada como uma caixa com conteúdo. Escreva uma nova regra de CSS que use o seletor `.canvas` e defina a `width` como 500 pixels. Aqui está uma regra de CSS que define a largura da classe `card` como 300 pixels:
+
+```css
+.card {
+ width: 300px;
+}
+```
+
+# --hints--
+
+Você deve ter um seletor `.canvas`.
+
+```js
+const hasCanvas = new __helpers.CSSHelp(document).getStyle('.canvas');
+assert(hasCanvas)
+```
+
+Você deve definir a propriedade `width` como `500px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '500px')
+assert(hasWidth);
+```
+
+O elemento `.canvas` deve ter um `width` com o valor de `500px`.
+
+```js
+const width = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('width');
+assert(width === '500px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+--fcc-editable-region--
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Rothko Painting
+
+
+
+ Nutrition Label
+
+
+
+
+ Nutrition Label
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md
new file mode 100644
index 00000000000..54da875c1c3
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md
@@ -0,0 +1,54 @@
+---
+id: 60a3e3396c7b40068ad69972
+title: Passo 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Adicione a propriedade `height` com o valor de `600px` à regra `.canvas`.
+
+# --hints--
+
+Você deve definir a propriedade `height` como `600px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '600px');
+assert(hasHeight);
+```
+
+O elemento `.canvas` deve ter uma `height` com o valor de `600px`.
+
+```js
+const canvasHeight = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('height');
+assert(canvasHeight === '600px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md
new file mode 100644
index 00000000000..7c63b7bda68
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md
@@ -0,0 +1,55 @@
+---
+id: 60a3e3396c7b40068ad69973
+title: Passo 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Altere a `background-color` da tela para `#4d0f00`.
+
+# --hints--
+
+Você deve definir o valor da propriedade `background-color` para `#4d0f00`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(77, 15, 0)');
+assert(hasBackground);
+```
+
+O elemento `.canvas` deve ter a `background-color` com o valor de `#4d0f00`.
+
+```js
+const canvasBackground = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('background-color');
+assert(canvasBackground === 'rgb(77, 15, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md
new file mode 100644
index 00000000000..6215ce2d2c3
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69974
+title: Passo 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Toda pintura precisa de uma moldura.
+
+Envolva o elemento `.canvas` em outra `div`. Dê à `div` a classe `frame`.
+# --hints--
+
+Você deve adicionar um novo elemento `div`.
+
+```js
+assert(document.querySelectorAll('div').length === 2)
+```
+
+O elemento `.canvas` deve estar dentro do novo elemento `div`.
+
+```js
+assert(document.querySelector('.canvas').parentElement.tagName === 'DIV');
+```
+
+O novo elemento `div` deve uma `class` com o valor `frame`.
+
+```js
+assert(document.querySelector('div').className.split(' ').includes('frame'));
+```
+
+O novo elemento `div` deve estar dentro do elemento `body`.
+
+```js
+assert(document.querySelector('div').parentElement.tagName === 'BODY');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+}
+```
+
+```html
+
+
+
+
+
+
+
+--fcc-editable-region--
+
+ ```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md
new file mode 100644
index 00000000000..8acecdfc2a7
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69975
+title: Passo 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Escreva uma nova regra usando o seletor de classe `.frame`.
+
+Use a declaração abreviada de `border` para dar ao elemento `.frame` uma borda sólida e preta com uma largura de `50px`.
+
+# --hints--
+
+Você deve ter um seletor `.frame`.
+
+```js
+const hasFrame = new __helpers.CSSHelp(document).getStyle('.frame');
+assert(hasFrame);
+```
+
+Você deve definir a propriedade `border` como `50px solid black`.
+
+```js
+const hasBorder = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.border === '50px solid black');
+assert(hasBorder);
+```
+
+O elemento `.frame` deve ter o atributo `border` com o valor de `50px solid black`.
+
+```js
+const frameBorder = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('border');
+assert(frameBorder === '50px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md
new file mode 100644
index 00000000000..d9d4525322f
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md
@@ -0,0 +1,64 @@
+---
+id: 60a3e3396c7b40068ad69976
+title: Passo 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+O quadro é muito largo.
+
+No seletor `.frame`, defina a `width` como 500 pixels.
+
+# --hints--
+
+Você deve definir a propriedade `width` como `500px`.
+
+```js
+const widthFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.width === '500px');
+assert(widthFilter.length === 2);
+```
+
+O elemento `.frame` deve ter um `width` com o valor de `500px`.
+
+```js
+const frameWidth = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('width');
+assert(frameWidth === '500px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+}
+
+.frame {
+ border: 50px solid black;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md
new file mode 100644
index 00000000000..46750cf6484
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md
@@ -0,0 +1,65 @@
+---
+id: 60a3e3396c7b40068ad69977
+title: Passo 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Use o preenchimento (padding) para ajustar o espaçamento dentro de um elemento.
+
+Em `.frame`, use a propriedade abreviada `padding` para aumentar o espaço entre os elementos `.frame` e `.canvas` em `50px`. A propriedade abreviada aumentará o espaço acima, abaixo, na esquerda e na direita da borda do elemento e da tela dentro dele.
+
+# --hints--
+
+Você deve definir a propriedade `padding` como `50px`.
+
+```js
+const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '50px');
+assert(hasPadding);
+```
+
+O elemento `.frame` deve ter um valor de `padding` igual a `50px`.
+
+```js
+const framePadding = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('padding');
+assert(framePadding === '50px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md
new file mode 100644
index 00000000000..3190830fb89
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md
@@ -0,0 +1,66 @@
+---
+id: 60a3e3396c7b40068ad69978
+title: Passo 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Use margens para ajustar o espaçamento fora de um elemento.
+
+Usando a propriedade `margin`, dê ao elemento `.frame` uma margem vertical de `20px` e uma margem horizontal de `auto`. Isso moverá o frame para baixo 20 pixels e o centralizará na página na horizontal.
+
+# --hints--
+
+Você deve dar à propriedade `margin` o valor de `20px auto`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '20px auto');
+assert(hasMargin);
+```
+
+O elemento `.frame` deve ter um valor de `margin` igual à `20px auto`.
+
+```js
+const frameMargin = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('margin');
+assert(frameMargin === '20px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md
new file mode 100644
index 00000000000..f32ae27f2b7
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md
@@ -0,0 +1,71 @@
+---
+id: 60a3e3396c7b40068ad69979
+title: Passo 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Adicione um novo elemento `div` abaixo do elemento `.canvas`.
+
+Dê ao novo elemento `div` o atributo `class` com o valor de `one`. Esse será o seu primeiro retângulo.
+
+# --hints--
+
+Você deve criar um elemento `div`.
+
+```js
+assert(document.querySelectorAll('div').length === 3);
+```
+
+Você deve criar um elemento `div` dentro do elemento `.canvas`.
+
+```js
+assert(document.querySelector('.canvas').children[0].tagName === 'DIV');
+```
+
+O novo elemento `div` deve ter o atributo `class` definido como `one`.
+
+```js
+assert(document.querySelector('.canvas').children[0].className.split(' ').includes('one'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md
new file mode 100644
index 00000000000..f3967c77a54
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md
@@ -0,0 +1,74 @@
+---
+id: 60a3e3396c7b40068ad6997a
+title: Passo 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Escreva uma nova regra que tenha como destino `.one` e defina sua `width` como 425 pixels.
+
+# --hints--
+
+Você deve ter um seletor `.one`.
+
+```js
+const hasOne = new __helpers.CSSHelp(document).getStyle('.one');
+assert(hasOne);
+```
+
+Você deve definir a propriedade `width` para `425px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '425px');
+assert(hasWidth);
+```
+
+O elemento `.one` deve ter um valor de `width` de `425px`.
+
+```js
+const oneWidth = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('width');
+assert(oneWidth === '425px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+
+
+
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md
new file mode 100644
index 00000000000..286538fa3da
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md
@@ -0,0 +1,70 @@
+---
+id: 60a3e3396c7b40068ad6997b
+title: Passo 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Agora defina a `height` para `.one` como 150 pixels.
+
+# --hints--
+
+Você deve definir a propriedade `height` como `150px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '150px');
+assert(hasHeight);
+```
+
+O elemento `.one` deve ter um valor de `height` de `150px`.
+
+```js
+const oneHeight = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('height');
+assert(oneHeight === '150px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md
new file mode 100644
index 00000000000..8f4dbeae414
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md
@@ -0,0 +1,71 @@
+---
+id: 60a3e3396c7b40068ad6997c
+title: Passo 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Defina a `background-color` do elemento `.one` como `#efb762`.
+
+# --hints--
+
+Você deve definir o valor da propriedade `background-color` como `#efb762`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(239, 183, 98)');
+assert(hasBackground)
+```
+
+O elemento `.one` deve ter uma `background-color` com o valor de `#efb762`.
+
+```js
+const oneBackground = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('background-color');
+assert(oneBackground === 'rgb(239, 183, 98)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md
new file mode 100644
index 00000000000..8ff9a1cd5a4
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md
@@ -0,0 +1,74 @@
+---
+id: 60a3e3396c7b40068ad6997d
+title: Passo 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Use margens para posicionar o elemento `.one` na tela.
+
+Adicione a propriedade abreviada `margin` com uma margem vertical de `20px` e uma margem horizontal de `auto`.
+
+# --hints--
+
+Você deve definir à propriedade `margin` como `20px auto`.
+
+```js
+const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === '20px auto');
+assert(marginFilter.length === 2);
+```
+
+O elemento `.one` deve ter um valor de `margin` igual à `20px auto`.
+
+```js
+const oneMargin = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('margin');
+assert(oneMargin === '20px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md
new file mode 100644
index 00000000000..4b05d06db64
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md
@@ -0,0 +1,75 @@
+---
+id: 60a3e3396c7b40068ad6997e
+title: Passo 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Agora `.one` está centralizado na horizontal, mas sua margem superior está passando os limites da tela e entrando na borda do quadro, deslocando a tela inteira 20 pixels para baixo.
+
+Adicione um `padding` de `1px` para o elemento `.canvas` para dar ao elemento `.one` algo sólido como barreira.
+
+# --hints--
+
+Você deve dar à propriedade `padding` o valor de `1px`.
+
+```js
+const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '1px');
+assert(hasPadding);
+```
+
+O elemento `.canvas` deve ter um valor de `padding` igual a `1px`.
+
+```js
+const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('padding');
+assert(canvasPadding === '1px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md
new file mode 100644
index 00000000000..d728e18dbce
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md
@@ -0,0 +1,82 @@
+---
+id: 60a3e3396c7b40068ad6997f
+title: Passo 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+A adição de 1 pixel de preenchimento às partes superior, inferior, esquerda e direita da tela mudou suas dimensões para 502 pixels x 602 pixels.
+
+Substitua a propriedade `padding` com `overflow` definido como `hidden` - o que faz com que a tela volte às dimensões originais.
+
+# --hints--
+
+Você deve remover a propriedade `padding` do seletor `.canvas`.
+
+```js
+const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas').getPropertyValue('padding');
+assert(!canvasPadding);
+```
+
+Você deve definir a propriedade `overflow` com `hidden`.
+
+```js
+const hasOverflow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.overflow === 'hidden');
+assert(hasOverflow);
+```
+
+O elemento `.canvas` deve ter um valor de `overflow` igual a `hidden`.
+
+```js
+const canvasOverflow = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('overflow');
+assert(canvasOverflow === 'hidden')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+--fcc-editable-region--
+ padding: 1px;
+--fcc-editable-region--
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md
new file mode 100644
index 00000000000..3de22c086ce
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md
@@ -0,0 +1,84 @@
+---
+id: 60a3e3396c7b40068ad69980
+title: Passo 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Adicione outra `div` com `class` tendo o valor `two` logo abaixo do seu elemento `one`. Este será seu segundo retângulo.
+
+# --hints--
+
+Você não deve mudar o elemento `.one` existente.
+
+```js
+assert(document.querySelectorAll('.one').length === 1);
+```
+
+Você deve ter um segundo elemento `div` no elemento `.canvas`.
+
+```js
+assert(document.querySelector('.canvas').children[1].tagName === 'DIV');
+```
+
+O segundo elemento `div` deve ter a `class` definida como `two`.
+
+```js
+assert(document.querySelector('.canvas').children[1].className.split(' ').includes('two'));
+```
+
+O elemento `.two` deve estar depois do elemento `.one`.
+
+```js
+assert(document.querySelector('.two').previousElementSibling.className.split(' ').includes('one'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md
new file mode 100644
index 00000000000..20ef4585d0e
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md
@@ -0,0 +1,84 @@
+---
+id: 60a3e3396c7b40068ad69981
+title: Passo 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Crie uma regra de CSS que use o seletor `.two` e defina a `width` como 475 pixels.
+
+# --hints--
+
+Você deve ter um seletor `.two`.
+
+```js
+const hasTwo = new __helpers.CSSHelp(document).getStyle('.two');
+assert(hasTwo);
+```
+
+Você deve definir a propriedade `width` como `475px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '475px');
+assert(hasWidth);
+```
+
+O elemento `.two` deve ter um valor de `width` de `475px`.
+
+```js
+const twoWidth = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('width');
+assert(twoWidth === '475px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+
+
+
+
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md
new file mode 100644
index 00000000000..1b48743a477
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md
@@ -0,0 +1,79 @@
+---
+id: 60a3e3396c7b40068ad69982
+title: Passo 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Defina a `height` do elemento `.two` como 200 pixels.
+
+# --hints--
+
+Você deve definir a propriedade `height` como `200px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '200px');
+assert(hasHeight);
+```
+
+O elemento `.two` deve ter um valor de `height` de `200px`.
+
+```js
+const twoHeight = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('height');
+assert(twoHeight === '200px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+}
+
+.two {
+ width: 475px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md
new file mode 100644
index 00000000000..18d644e244a
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md
@@ -0,0 +1,80 @@
+---
+id: 60a3e3396c7b40068ad69983
+title: Passo 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Defina a `background-color` do elemento `.two` como `#8f0401`.
+
+# --hints--
+
+Você deve definir o valor da propriedade `background-color` como `#8f0401`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(143, 4, 1)');
+assert(hasBackground);
+```
+
+O elemento `.two` deve ter uma `background-color` com o valor de `#8f0401`.
+
+```js
+const twoBackground = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('background-color');
+assert(twoBackground === 'rgb(143, 4, 1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+}
+
+.two {
+ width: 475px;
+ height: 200px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md
new file mode 100644
index 00000000000..108fa7f8439
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md
@@ -0,0 +1,81 @@
+---
+id: 60a3e3396c7b40068ad69984
+title: Passo 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Centralize o elemento `.two` definindo a `margin` como `auto`.
+
+# --hints--
+
+Você deve definir a propriedade `margin` como `auto`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === 'auto');
+assert(hasMargin);
+```
+
+O elemento `.two` deve ter um valor de `margin` igual à `auto`.
+
+```js
+const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
+assert(twoMargin === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+}
+
+.two {
+ width: 475px;
+ height: 200px;
+ background-color: #8f0401;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md
new file mode 100644
index 00000000000..4092c942850
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md
@@ -0,0 +1,93 @@
+---
+id: 60a3e3396c7b40068ad69986
+title: Passo 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Crie uma `div` com a `class` tendo o valor de `three` logo abaixo do elemento `.two`. Este será o seu terceiro retângulo.
+
+# --hints--
+
+Os elementos `.one` e `.two` existentes não devem ser modificados.
+
+```js
+assert(document.querySelectorAll('.one').length === 1);
+assert(document.querySelectorAll('.two').length === 1);
+```
+
+O novo elemento `div` deve estar dentro do elemento `.canvas`.
+
+```js
+assert(document.querySelector('.canvas').children[2].tagName === 'DIV');
+```
+
+A nova `div` deve estar depois do elemento `.two`.
+
+```js
+assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV');
+```
+
+O novo elemento `div` deve uma `class` com o valor `three`.
+
+```js
+assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+}
+
+.two {
+ width: 475px;
+ height: 200px;
+ background-color: #8f0401;
+ margin: auto;
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md
new file mode 100644
index 00000000000..74ef044214d
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md
@@ -0,0 +1,94 @@
+---
+id: 60a3e3396c7b40068ad69987
+title: Passo 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Você não precisa usar sempre pixels ao dimensionar um elemento.
+
+Crie uma nova regra, `.three`, e defina sua `width` para `91%`.
+
+# --hints--
+
+Você deve usar o seletor `.three`.
+
+```js
+const hasThree = new __helpers.CSSHelp(document).getStyle('.three');
+assert(hasThree);
+```
+
+Você deve definir a propriedade `width` para `91%`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%');
+assert(hasWidth);
+```
+
+O elemento `.three` deve ter um valor de `width` de `91%`.
+
+```js
+const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width');
+assert(threeWidth === '91%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+}
+
+.two {
+ width: 475px;
+ height: 200px;
+ background-color: #8f0401;
+ margin: auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+
+
+
+
+
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md
new file mode 100644
index 00000000000..44af4d345ef
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md
@@ -0,0 +1,87 @@
+---
+id: 60a3e3396c7b40068ad69988
+title: Passo 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Defina a `height` de `.three` como `28%`.
+
+# --hints--
+
+Você deve definir a propriedade `height` como `28%`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%');
+assert(hasHeight);
+```
+
+O elemento `.three` deve ter um valor de `height` de `28%`.
+
+```js
+const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height');
+assert(threeHeight === '28%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+}
+
+.two {
+ width: 475px;
+ height: 200px;
+ background-color: #8f0401;
+ margin: auto;
+}
+
+.three {
+ width: 91%;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md
new file mode 100644
index 00000000000..e014dc6d2fd
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md
@@ -0,0 +1,88 @@
+---
+id: 60a3e3396c7b40068ad69989
+title: Passo 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+Altere a `background-color` do elemento `.three` para `#b20403`.
+
+# --hints--
+
+Você deve definir o valor da propriedade `background-color` como `#b20403`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)');
+assert(hasBackground);
+```
+
+O elemento `.three` deve ter uma `background-color` com o valor de `#b20403`.
+
+```js
+const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color');
+assert(threeBackground === 'rgb(178, 4, 3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+}
+
+.two {
+ width: 475px;
+ height: 200px;
+ background-color: #8f0401;
+ margin: auto;
+}
+
+.three {
+ width: 91%;
+ height: 28%;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md
new file mode 100644
index 00000000000..87eeb7991f7
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md
@@ -0,0 +1,89 @@
+---
+id: 60a3e3396c7b40068ad6998a
+title: Passo 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Centralize o elemento `.three` na tela definindo a `margin` como `auto`.
+
+# --hints--
+
+Você deve definir a propriedade `margin` como `auto`.
+
+```js
+const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto');
+assert(marginFilter.length === 2);
+```
+
+O elemento `.three` deve ter um valor de `margin` igual à `auto`.
+
+```js
+const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin');
+assert(threeMargin === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+}
+
+.two {
+ width: 475px;
+ height: 200px;
+ background-color: #8f0401;
+ margin: auto;
+}
+
+.three {
+ width: 91%;
+ height: 28%;
+ background-color: #b20403;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md
new file mode 100644
index 00000000000..eb744c7bfa2
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md
@@ -0,0 +1,93 @@
+---
+id: 60a3e3396c7b40068ad6998b
+title: Passo 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+É útil fazer com que suas margens empurrem em uma determinada direção.
+
+Neste caso, a margem inferior do elemento `.one` empurra `.two` 20 pixels para baixo.
+
+No seletor `.two`, use a propriedade abreviada `margin` para definir a margem superior como `0`, a margem horizontal como `auto` e a margem inferior como `20px`. Isso removerá a margem superior, centralizará o elemento na horizontal e definirá a margem inferior como 20 pixels.
+
+# --hints--
+
+Você deve definir a propriedade `margin` como `0 auto 20px`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px');
+assert(hasMargin);
+```
+
+O elemento `.two` deve ter um valor de `margin` igual à `0 auto 20px`.
+
+```js
+const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
+assert(twoMargin === '0px auto 20px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+}
+
+.two {
+ width: 475px;
+ height: 200px;
+ background-color: #8f0401;
+--fcc-editable-region--
+ margin: auto;
+--fcc-editable-region--
+}
+
+.three {
+ width: 91%;
+ height: 28%;
+ background-color: #b20403;
+ margin: auto;
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md
new file mode 100644
index 00000000000..c1708f5dd30
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md
@@ -0,0 +1,92 @@
+---
+id: 60a3e3396c7b40068ad6998c
+title: Passo 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+As cores e formas da pintura são muito precisas para fingir que ela é uma pintura de Rothko.
+
+Use a propriedade `filter` para dar um desfoque com `blur` na pintura de `2px` no elemento `.canvas`.
+
+# --hints--
+
+Você deve definir a propriedade `filter` como `blur(2px)`.
+
+```js
+const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)');
+assert(hasFilter);
+```
+
+O elemento `.canvas` deve ter um valor de `filter` de `blur(2px)`.
+
+```js
+const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter');
+assert(canvasFilter === 'blur(2px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+}
+
+.two {
+ width: 475px;
+ height: 200px;
+ background-color: #8f0401;
+ margin: 0 auto 20px;
+}
+
+.three {
+ width: 91%;
+ height: 28%;
+ background-color: #b20403;
+ margin: auto;
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md
new file mode 100644
index 00000000000..bcdcd7ce09d
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md
@@ -0,0 +1,116 @@
+---
+id: 60a3e3396c7b40068ad6998d
+title: Passo 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Crie uma regra que tenha como destino `.one` e `.two` e aumente o efeito de `blur` para 1 pixel.
+
+Aqui está um exemplo de regra que aumenta o `blur` de dois elementos:
+
+```css
+h1, p {
+ filter: blur(3px);
+}
+```
+
+# --hints--
+
+Você deve ter um seletor `.one, .two`.
+
+```js
+const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two');
+assert(oneTwo);
+```
+
+Você deve definir a propriedade `filter` para `blur(1px)`.
+
+```js
+const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(1px)');
+assert(hasFilter)
+```
+
+O elemento `.one` deve ter um valor de `filter` de `blur(1px)`.
+
+```js
+const one = document.querySelector('.one');
+const oneFilter = getComputedStyle(one).filter;
+assert(oneFilter === 'blur(1px)');
+```
+
+O elemento `.two` deve ter um valor de filtro de `blur(1px)`.
+
+```js
+const two = document.querySelector('.two');
+const twoFilter = getComputedStyle(two).filter;
+assert(twoFilter === 'blur(1px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+ filter: blur(2px);
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+}
+
+.two {
+ width: 475px;
+ height: 200px;
+ background-color: #8f0401;
+ margin: 0 auto 20px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.three {
+ width: 91%;
+ height: 28%;
+ background-color: #b20403;
+ margin: auto;
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md
new file mode 100644
index 00000000000..86eba84de87
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md
@@ -0,0 +1,95 @@
+---
+id: 60a3e3396c7b40068ad6998e
+title: Passo 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Aumente o valor de `blur` de `.three` em 2 pixels.
+
+# --hints--
+
+Você deve definir a propriedade `filter` como `blur(2px)`.
+
+```js
+const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)');
+assert(filterFilter.length === 2);
+```
+
+O elemento `.three` deve ter um valor de `filter` de `blur(2px)`.
+
+```js
+const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter');
+assert(threeFilter === 'blur(2px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+ filter: blur(2px);
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+}
+
+.two {
+ width: 475px;
+ height: 200px;
+ background-color: #8f0401;
+ margin: 0 auto 20px;
+}
+
+.one, .two {
+ filter: blur(1px);
+}
+
+.three {
+ width: 91%;
+ height: 28%;
+ background-color: #b20403;
+ margin: auto;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md
new file mode 100644
index 00000000000..dfad0d47fd6
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md
@@ -0,0 +1,98 @@
+---
+id: 60a3e3396c7b40068ad6998f
+title: Passo 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Os retângulos são pequenos demais e suas bordas não possuem uma qualidade suave de pintura.
+
+Aumente a área e suavize as bordas de `.one` definindo sua `box-shadow` como `0 0 3px 3px #efb762`.
+
+# --hints--
+
+Você deve definir a propriedade `box-shadow` como `0 0 3px 3px #efb762`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px');
+assert(hasBoxShadow);
+```
+
+O elemento `.one` deve ter um valor de `box-shadow` de `0 0 3px 3px #efb762`.
+
+```js
+const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow');
+assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+ filter: blur(2px);
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+ width: 475px;
+ height: 200px;
+ background-color: #8f0401;
+ margin: 0 auto 20px;
+}
+
+.one, .two {
+ filter: blur(1px);
+}
+
+.three {
+ width: 91%;
+ height: 28%;
+ background-color: #b20403;
+ margin: auto;
+ filter: blur(2px);
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md
new file mode 100644
index 00000000000..108f2b0d913
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md
@@ -0,0 +1,97 @@
+---
+id: 60a3e3396c7b40068ad69990
+title: Passo 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Use a mesma declaração de `box-shadow` para `.two`, mas altere a cor de `#efb762` para `#8f0401`.
+
+# --hints--
+
+Você deve definir a propriedade `box-shadow` como `0 0 3px 3px #8f0401`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px');
+assert(hasBoxShadow);
+```
+
+O elemento `.two` deve ter um valor de `box-shadow` de `0 0 3px 3px #8f0401`.
+
+```js
+const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow');
+assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+ filter: blur(2px);
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+ box-shadow: 0 0 3px 3px #efb762;
+}
+
+.two {
+ width: 475px;
+ height: 200px;
+ background-color: #8f0401;
+ margin: 0 auto 20px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+ filter: blur(1px);
+}
+
+.three {
+ width: 91%;
+ height: 28%;
+ background-color: #b20403;
+ margin: auto;
+ filter: blur(2px);
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md
new file mode 100644
index 00000000000..5f192b29749
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md
@@ -0,0 +1,98 @@
+---
+id: 60a3e3396c7b40068ad69991
+title: Passo 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Adicione uma `box-shadow` a `.three` com os valores `0 0 5px 5px #b20403`.
+
+# --hints--
+
+Você deve definir a propriedade `box-shadow` como `0 0 5px 5px #b20403`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px');
+assert(hasBoxShadow);
+```
+
+O elemento `.three` deve ter um valor de `box-shadow` de `0 0 5px 5px #b20403`.
+
+```js
+const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow');
+assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+ filter: blur(2px);
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+ box-shadow: 0 0 3px 3px #efb762;
+}
+
+.two {
+ width: 475px;
+ height: 200px;
+ background-color: #8f0401;
+ margin: 0 auto 20px;
+ box-shadow: 0 0 3px 3px #8f0401;
+}
+
+.one, .two {
+ filter: blur(1px);
+}
+
+.three {
+ width: 91%;
+ height: 28%;
+ background-color: #b20403;
+ margin: auto;
+ filter: blur(2px);
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md
new file mode 100644
index 00000000000..b6dedf39c28
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md
@@ -0,0 +1,101 @@
+---
+id: 60a3e3396c7b40068ad69992
+title: Passo 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Os cantos de cada retângulo ainda estão muito pontiagudos.
+
+Arredonde cada canto do elemento `.one` em 9 pixels usando a propriedade `border-radius`.
+
+# --hints--
+
+Você deve definir o valor da propriedade `border-radius` como `9px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px');
+assert(hasBorderRadius);
+```
+
+O elemento `.one` deve ter um `border-radius` de `9px`.
+
+```js
+const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius');
+assert(oneBorderRadius === '9px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+ filter: blur(2px);
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+ box-shadow: 0 0 3px 3px #efb762;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+ width: 475px;
+ height: 200px;
+ background-color: #8f0401;
+ margin: 0 auto 20px;
+ box-shadow: 0 0 3px 3px #8f0401;
+}
+
+.one, .two {
+ filter: blur(1px);
+}
+
+.three {
+ width: 91%;
+ height: 28%;
+ background-color: #b20403;
+ margin: auto;
+ filter: blur(2px);
+ box-shadow: 0 0 5px 5px #b20403;
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md
new file mode 100644
index 00000000000..641f4d52a62
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md
@@ -0,0 +1,100 @@
+---
+id: 60a3e3396c7b40068ad69993
+title: Passo 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Use a propriedade `border-radius` no seletor `.two` para definir os raios superior esquerdo e inferior direito como `8px` e os raios do canto superior direito e inferior esquerdo como `10px`.
+
+# --hints--
+
+Você deve definir o valor da propriedade `border-radius` como `8px 10px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px');
+assert(hasBorderRadius);
+```
+
+O elemento `.two` deve ter um `border-radius` de `8px 10px`.
+
+```js
+const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius');
+assert(twoBorderRadius === '8px 10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+ filter: blur(2px);
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+ box-shadow: 0 0 3px 3px #efb762;
+ border-radius: 9px;
+}
+
+.two {
+ width: 475px;
+ height: 200px;
+ background-color: #8f0401;
+ margin: 0 auto 20px;
+ box-shadow: 0 0 3px 3px #8f0401;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+ filter: blur(1px);
+}
+
+.three {
+ width: 91%;
+ height: 28%;
+ background-color: #b20403;
+ margin: auto;
+ filter: blur(2px);
+ box-shadow: 0 0 5px 5px #b20403;
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md
new file mode 100644
index 00000000000..c3b50ac90ff
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md
@@ -0,0 +1,103 @@
+---
+id: 60a3e3396c7b40068ad69994
+title: Passo 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+A propriedade `border-radius` aceita até quatro valores para arredondar os cantos superior esquerdo, superior direito, inferior direito e inferior esquerdo.
+
+Arredonde o canto superior esquerdo de `.three` em 30 pixels, o canto superior direito em 25 pixels, o canto inferior direito em 60 pixels e o canto inferior esquerdo em 12 pixels.
+
+# --hints--
+
+Você deve definir a propriedade `border-radius` como `30px 25px 60px 12px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '30px 25px 60px 12px');
+assert(hasBorderRadius);
+```
+
+O elemento `.three` deve ter um valor de `border-radius` de `30px 25px 60px 12px`.
+
+```js
+const threeBorderRadius = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('border-radius');
+assert(threeBorderRadius === '30px 25px 60px 12px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+ filter: blur(2px);
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+ box-shadow: 0 0 3px 3px #efb762;
+ border-radius: 9px;
+}
+
+.two {
+ width: 475px;
+ height: 200px;
+ background-color: #8f0401;
+ margin: 0 auto 20px;
+ box-shadow: 0 0 3px 3px #8f0401;
+ border-radius: 8px 10px;
+}
+
+.one, .two {
+ filter: blur(1px);
+}
+
+.three {
+ width: 91%;
+ height: 28%;
+ background-color: #b20403;
+ margin: auto;
+ filter: blur(2px);
+ box-shadow: 0 0 5px 5px #b20403;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md
new file mode 100644
index 00000000000..15ef302d613
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md
@@ -0,0 +1,104 @@
+---
+id: 60a3e3396c7b40068ad69995
+title: Passo 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Gire todos os retângulos para dar a eles mais um visual imperfeito, como se fosse pintado à mão.
+
+Use a propriedade `transform` no seletor `.one` com o valor `rotate` para girar o elemento no anti-horário em 0,6 graus.
+
+# --hints--
+
+Você deve definir a propriedade `transform` como `rotate(-0.6deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)');
+assert(hasTransform);
+```
+
+O elemento `.one` deve ter um valor de `transform` de `rotate(-0.6deg)`.
+
+```js
+const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform');
+assert(oneTransform === 'rotate(-0.6deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+ filter: blur(2px);
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+ box-shadow: 0 0 3px 3px #efb762;
+ border-radius: 9px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+ width: 475px;
+ height: 200px;
+ background-color: #8f0401;
+ margin: 0 auto 20px;
+ box-shadow: 0 0 3px 3px #8f0401;
+ border-radius: 8px 10px;
+}
+
+.one, .two {
+ filter: blur(1px);
+}
+
+.three {
+ width: 91%;
+ height: 28%;
+ background-color: #b20403;
+ margin: auto;
+ filter: blur(2px);
+ box-shadow: 0 0 5px 5px #b20403;
+ border-radius: 30px 25px 60px 12px;
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md
new file mode 100644
index 00000000000..c7035b94a1f
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md
@@ -0,0 +1,103 @@
+---
+id: 60a3e3396c7b40068ad69996
+title: Passo 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Gire o elemento `.two` no sentido horário em 0,4 graus.
+
+# --hints--
+
+Você deve definir a propriedade `transform` como `rotate(0.4deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(0.4deg)');
+assert(hasTransform);
+```
+
+O elemento `.two` deve ter um valor de `transform` de `rotate(0.4deg)`.
+
+```js
+const twoTransform = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('transform');
+assert(twoTransform === 'rotate(0.4deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+ filter: blur(2px);
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+ box-shadow: 0 0 3px 3px #efb762;
+ border-radius: 9px;
+ transform: rotate(-0.6deg);
+}
+
+.two {
+ width: 475px;
+ height: 200px;
+ background-color: #8f0401;
+ margin: 0 auto 20px;
+ box-shadow: 0 0 3px 3px #8f0401;
+ border-radius: 8px 10px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+ filter: blur(1px);
+}
+
+.three {
+ width: 91%;
+ height: 28%;
+ background-color: #b20403;
+ margin: auto;
+ filter: blur(2px);
+ box-shadow: 0 0 5px 5px #b20403;
+ border-radius: 30px 25px 60px 12px;
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md
new file mode 100644
index 00000000000..90fc207b037
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md
@@ -0,0 +1,180 @@
+---
+id: 60a3e3396c7b40068ad69997
+title: Passo 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Gire `.three` no sentido anti-horário em 0,2 graus.
+
+Com este último passo, a pintura Rothko está completa.
+
+# --hints--
+
+Você deve definir a propriedade `transform` como `rotate(-0.2deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)');
+assert(hasTransform);
+```
+
+O elemento `.three` deve ter um valor de `transform` de `rotate(-0.2deg)`.
+
+```js
+const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform');
+assert(threeTransform === 'rotate(-0.2deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+ filter: blur(2px);
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+ box-shadow: 0 0 3px 3px #efb762;
+ border-radius: 9px;
+ transform: rotate(-0.6deg);
+}
+
+.two {
+ width: 475px;
+ height: 200px;
+ background-color: #8f0401;
+ margin: 0 auto 20px;
+ box-shadow: 0 0 3px 3px #8f0401;
+ border-radius: 8px 10px;
+ transform: rotate(0.4deg);
+}
+
+.one, .two {
+ filter: blur(1px);
+}
+
+.three {
+ width: 91%;
+ height: 28%;
+ background-color: #b20403;
+ margin: auto;
+ filter: blur(2px);
+ box-shadow: 0 0 5px 5px #b20403;
+ border-radius: 30px 25px 60px 12px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## --solutions--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.canvas {
+ width: 500px;
+ height: 600px;
+ background-color: #4d0f00;
+ overflow: hidden;
+ filter: blur(2px);
+}
+
+.frame {
+ border: 50px solid black;
+ width: 500px;
+ padding: 50px;
+ margin: 20px auto;
+}
+
+.one {
+ width: 425px;
+ height: 150px;
+ background-color: #efb762;
+ margin: 20px auto;
+ box-shadow: 0 0 3px 3px #efb762;
+ border-radius: 9px;
+ transform: rotate(-0.6deg);
+}
+
+.two {
+ width: 475px;
+ height: 200px;
+ background-color: #8f0401;
+ margin: 0 auto 20px;
+ box-shadow: 0 0 3px 3px #8f0401;
+ border-radius: 8px 10px;
+ transform: rotate(0.4deg);
+}
+
+.one, .two {
+ filter: blur(1px);
+}
+
+.three {
+ width: 91%;
+ height: 28%;
+ background-color: #b20403;
+ margin: auto;
+ filter: blur(2px);
+ box-shadow: 0 0 5px 5px #b20403;
+ border-radius: 30px 25px 60px 12px;
+ transform: rotate(-0.2deg);
+}
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md
new file mode 100644
index 00000000000..3ae68f4a322
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md
@@ -0,0 +1,70 @@
+---
+id: 615f3b091162165948e1cb33
+title: Passo 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Se você inspecionar o elemento `.label` com as ferramentas de desenvolvedor do seu navegador, poderá notar que ele de fato possui 288 pixels de largura ao invés de 270. Isto porque, por padrão, o navegador inclui a borda e o padding quando determina o tamanho de um elemento.
+
+Para resolver isso, redefina o modelo da caixa criando um seletor `*` e dê a ele o atributo de `box-sizing` que é propriedade de `border-box`.
+
+# --hints--
+
+Você deve criar o seletor `*`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+O seletor `*` deve ter a propriedade `box-sizing` com o valor de `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+html {
+ font-size: 16px;
+}
+
+body {
+ font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+ border: 2px solid black;
+ width: 270px;
+ margin: 20px auto;
+ padding: 0 7px;
+}
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md
new file mode 100644
index 00000000000..763968a6a76
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md
@@ -0,0 +1,74 @@
+---
+id: 615f3cafd794015aa9547a6d
+title: Passo 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Lembre-se de que o uso de `h1`, `h2` e tags similares determinam a estrutura semântica do seu HTML. No entanto, você pode ajustar o CSS desses elementos para controlar o fluxo visual e a hierarquia.
+
+Crie uma regra para `h1` e defina a propriedade `font-weight` para `800`. Isto deixará o texto do elemento `h1` em negrito.
+
+# --hints--
+
+Você deve criar o seletor `h1`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+O seletor `h1` deve ter a propriedade `font-weight` com o valor de `800`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === '800');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+
+
+
+
+```
+
+```css
+* {
+ box-sizing: border-box;
+}
+
+html {
+ font-size: 16px;
+}
+
+body {
+ font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+ border: 2px solid black;
+ width: 270px;
+ margin: 20px auto;
+ padding: 0 7px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/dictionaries/japanese/comments.json b/curriculum/dictionaries/japanese/comments.json
index b3c363d18ff..cdc03fe9fbd 100644
--- a/curriculum/dictionaries/japanese/comments.json
+++ b/curriculum/dictionaries/japanese/comments.json
@@ -106,5 +106,6 @@
"es69h6": "2 つのウィンドウを 1 つのウィンドウに結合するとき",
"fho5t5": "最後に新しいタブを開くとき",
"00kcrm": "true を生成",
- "sxpg2a": "メールボックス、ドライブ、その他の仕事用サイト"
+ "sxpg2a": "メールボックス、ドライブ、その他の仕事用サイト",
+ "4143lf": "ボタンを初期化"
}
Nutrition Facts
+8 servings per container
+Serving size 2/3 cup (55g)
+