diff --git a/curriculum/challenges/italian/05-back-end-development-and-apis/basic-node-and-express/chain-middleware-to-create-a-time-server.md b/curriculum/challenges/italian/05-back-end-development-and-apis/basic-node-and-express/chain-middleware-to-create-a-time-server.md index 2c0312ab7e9..194dbf6b7dd 100644 --- a/curriculum/challenges/italian/05-back-end-development-and-apis/basic-node-and-express/chain-middleware-to-create-a-time-server.md +++ b/curriculum/challenges/italian/05-back-end-development-and-apis/basic-node-and-express/chain-middleware-to-create-a-time-server.md @@ -49,7 +49,7 @@ L'endpoint /now dovrebbe avere il middleware montato ); ``` -L'endpoint /now dovrebbe restituire un tempo che è di +/- 20 secondi da ora +L'endpoint `/now` dovrebbe restituire l'ora corrente. ```js (getUserInput) => diff --git a/curriculum/challenges/italian/05-back-end-development-and-apis/managing-packages-with-npm/expand-your-project-with-external-packages-from-npm.md b/curriculum/challenges/italian/05-back-end-development-and-apis/managing-packages-with-npm/expand-your-project-with-external-packages-from-npm.md index 5387c9aefad..88653203b1f 100644 --- a/curriculum/challenges/italian/05-back-end-development-and-apis/managing-packages-with-npm/expand-your-project-with-external-packages-from-npm.md +++ b/curriculum/challenges/italian/05-back-end-development-and-apis/managing-packages-with-npm/expand-your-project-with-external-packages-from-npm.md @@ -22,13 +22,13 @@ In questa sezione, i pacchetti richiesti dal progetto vengono memorizzati nel se # --instructions-- -Aggiungi la versione "2.14.0" del pacchetto "moment" al campo `dependencies` del tuo file package.json. +Aggiungi la versione "1.1.0" del pacchetto `@freecodecamp/example` al campo `dependencies` del tuo file `package.json`. -**Nota:** Moment è una comoda libreria per lavorare con l'ora e le date. +**Nota:** `@freecodecamp/example` è un pacchetto fasullo utilizzato come strumento di apprendimento. # --hints-- -"dependencies" dovrebbe includere "moment" +`"dependencies"` dovrebbe includere `"@freecodecamp/example"`. ```js (getUserInput) => @@ -37,8 +37,8 @@ Aggiungi la versione "2.14.0" del pacchetto "moment" al campo `dependencies` del var packJson = JSON.parse(data); assert.property( packJson.dependencies, - 'moment', - '"dependencies" does not include "moment"' + '@freecodecamp/example', + '"dependencies" does not include "@freecodecamp/example"' ); }, (xhr) => { @@ -47,7 +47,7 @@ Aggiungi la versione "2.14.0" del pacchetto "moment" al campo `dependencies` del ); ``` -La versione di "moment" dovrebbe essere "2.14.0" +La versione di `"@freecodecamp/example"` dovrebbe essere `"1.1.0"`. ```js (getUserInput) => @@ -55,9 +55,9 @@ La versione di "moment" dovrebbe essere "2.14.0" (data) => { var packJson = JSON.parse(data); assert.match( - packJson.dependencies.moment, - /^[\^\~]?2\.14\.0/, - 'Wrong version of "moment" installed. It should be 2.14.0' + packJson.dependencies["@freecodecamp/example"], + /^[\^\~]?1\.1\.0/, + 'Wrong version of "@freecodecamp/example" installed. It should be 1.1.0' ); }, (xhr) => { diff --git a/curriculum/challenges/italian/05-back-end-development-and-apis/managing-packages-with-npm/remove-a-package-from-your-dependencies.md b/curriculum/challenges/italian/05-back-end-development-and-apis/managing-packages-with-npm/remove-a-package-from-your-dependencies.md index 85216edce0f..acf2d5b529a 100644 --- a/curriculum/challenges/italian/05-back-end-development-and-apis/managing-packages-with-npm/remove-a-package-from-your-dependencies.md +++ b/curriculum/challenges/italian/05-back-end-development-and-apis/managing-packages-with-npm/remove-a-package-from-your-dependencies.md @@ -12,17 +12,17 @@ Ora hai testato alcuni modi per gestire le dipendenze del tuo progetto utilizzan Ma cosa dovresti fare per rimuovere un pacchetto esterno di cui non hai più bisogno? Potresti già averlo indovinato, basta rimuovere dalle dipendenze la coppia chiave-valore corrispondente a quel pacchetto. -Questo stesso metodo si applica anche alla rimozione di altri campi nel tuo package.json +Questo stesso metodo si applica anche alla rimozione di altri campi nel tuo package.json. # --instructions-- -Rimuovi il pacchetto moment dalle tue dipendenze. +Rimuovi il pacchetto `@freecodecamp/example` dalle tue dipendenze. **Nota:** Assicurati di avere la giusta quantità di virgole dopo averlo rimosso. # --hints-- -"dependencies" non dovrebbe includere "moment" +`"dependencies"` non dovrebbe includere `"@freecodecamp/example"`. ```js (getUserInput) => @@ -31,8 +31,8 @@ Rimuovi il pacchetto moment dalle tue dipendenze. var packJson = JSON.parse(data); assert.notProperty( packJson.dependencies, - 'moment', - '"dependencies" still includes "moment"' + '@freecodecamp/example', + '"dependencies" still includes "@freecodecamp/example"' ); }, (xhr) => { diff --git a/curriculum/challenges/italian/05-back-end-development-and-apis/managing-packages-with-npm/use-the-caret-character-to-use-the-latest-minor-version-of-a-dependency.md b/curriculum/challenges/italian/05-back-end-development-and-apis/managing-packages-with-npm/use-the-caret-character-to-use-the-latest-minor-version-of-a-dependency.md index 801c231eead..3e865c64556 100644 --- a/curriculum/challenges/italian/05-back-end-development-and-apis/managing-packages-with-npm/use-the-caret-character-to-use-the-latest-minor-version-of-a-dependency.md +++ b/curriculum/challenges/italian/05-back-end-development-and-apis/managing-packages-with-npm/use-the-caret-character-to-use-the-latest-minor-version-of-a-dependency.md @@ -1,6 +1,6 @@ --- id: 587d7fb5367417b2b2512c03 -title: Usare il simbolo del cursore per specificare l'ultima versione minore di una dipendenza +title: Usa il simbolo dell'accento circonflesso per usare l'ultima versione minore di una dipendenza challengeType: 2 forumTopicId: 301531 dashedName: use-the-caret-character-to-use-the-latest-minor-version-of-a-dependency @@ -8,9 +8,9 @@ dashedName: use-the-caret-character-to-use-the-latest-minor-version-of-a-depende # --description-- -Simile a come la tilde che abbiamo imparato nell'ultima sfida permette a npm di installare l'ultima PATCH per una dipendenza, il cursore (caret, `^`) permette a npm di installare anche aggiornamenti futuri. La differenza è che il cursore permetterà sia gli aggiornamenti MINOR che le PATCHes. +Simile a come la tilde vista nell'ultima sfida permette a npm di installare l'ultima PATCH per una dipendenza, l'accento circonflesso (caret, `^`) permette a npm di installare anche aggiornamenti futuri. La differenza è che l'accento circonflesso permette sia aggiornamenti di versione minore che di Patch. -La tua versione attuale di moment dovrebbe essere "~2.10.2" che permette a npm di installare l'ultima versione 2.10.x. Se invece dovessi usare il cursore (^) come prefisso di versione, npm avrebbe il permesso di aggiornare a qualsiasi versione 2.x.x. +La versione attuale di `@freecodecamp/example` dovrebbe essere "~1.2.13" che permette a npm di installare all'ultima versione 1.2.x. Se invece dovessi usare il caret (^) come prefisso di versione, npm avrebbe il permesso di aggiornare a qualsiasi versione 1.x.x. ```json "package": "^1.3.8" @@ -20,13 +20,13 @@ Questo permetterebbe di aggiornare qualsiasi versione 1.x.x del pacchetto. # --instructions-- -Usa il cursore (`^`) per prefissare la versione di moment nelle tue dipendenze e consentire a npm di aggiornarlo a qualsiasi nuova versione MINOR. +Usa l'accento circonflesso (`^`) come prefisso di versione per `@freecodecamp/example` nelle tue dipendenze, e permetti a npm di aggiornare a qualsiasi nuova versione minore. **Nota:** I numeri di versione non devono essere modificati. # --hints-- -"dependencies" dovrebbe includere "moment" +`"dependencies"` dovrebbe includere `"@freecodecamp/example"`. ```js (getUserInput) => @@ -35,8 +35,8 @@ Usa il cursore (`^`) per prefissare la versione di moment nelle tue dipendenze e var packJson = JSON.parse(data); assert.property( packJson.dependencies, - 'moment', - '"dependencies" does not include "moment"' + '@freecodecamp/example', + '"dependencies" does not include "@freecodecamp/example"' ); }, (xhr) => { @@ -45,7 +45,7 @@ Usa il cursore (`^`) per prefissare la versione di moment nelle tue dipendenze e ); ``` -La versione di "moment" dovrebbe corrispondere a "^2.x.x" +La versione di `"@freecodecamp/example"` deve corrispondere a `"^1.x.x"`. ```js (getUserInput) => @@ -53,9 +53,9 @@ La versione di "moment" dovrebbe corrispondere a "^2.x.x" (data) => { var packJson = JSON.parse(data); assert.match( - packJson.dependencies.moment, - /^\^2\./, - 'Wrong version of "moment". It should be ^2.10.2' + packJson.dependencies["@freecodecamp/example"], + /^\^1\./, + 'Wrong version of "@freecodecamp/example". It should be ^1.2.13' ); }, (xhr) => { diff --git a/curriculum/challenges/italian/05-back-end-development-and-apis/managing-packages-with-npm/use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency.md b/curriculum/challenges/italian/05-back-end-development-and-apis/managing-packages-with-npm/use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency.md index d29ae386ea6..3c9633b6c14 100644 --- a/curriculum/challenges/italian/05-back-end-development-and-apis/managing-packages-with-npm/use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency.md +++ b/curriculum/challenges/italian/05-back-end-development-and-apis/managing-packages-with-npm/use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency.md @@ -18,15 +18,15 @@ Per consentire a una dipendenza npm di aggiornare all'ultima versione PATCH, è # --instructions-- -Nel file package.json, la tua regola corrente per come npm potrebbe aggiornare moment è usare una versione specifica (2.10.2). Ma ora desideriamo consentire l'ultima versione 2.10.x. +Nel file package.json, la regola per come npm possa aggiornare `@freecodecamp/example` è usare una specifica versione (1.2.13). Ma ora desideriamo consentire l'ultima versione 1.2.x. -Usa il carattere tilde (`~`) per prefissare la versione di moment nelle tue dipendenze, e consentire a npm di aggiornarlo a qualsiasi nuova release PATCH. +Usa il carattere tilde (`~`) come prefisso di versione per `@freecodecamp/example` nelle tue dipendenze e permetti ad npm di aggiornare ad ogni nuova versione di _patch_. **Nota:** I numeri di versione non devono essere modificati. # --hints-- -"dependencies" dovrebbe includere "moment" +`"dependencies"` dovrebbe includere `"@freecodecamp/example"`. ```js (getUserInput) => @@ -35,8 +35,8 @@ Usa il carattere tilde (`~`) per prefissare la versione di moment nelle tue dipe var packJson = JSON.parse(data); assert.property( packJson.dependencies, - 'moment', - '"dependencies" does not include "moment"' + '@freecodecamp/example', + '"dependencies" does not include "@freecodecamp/example"' ); }, (xhr) => { @@ -45,7 +45,7 @@ Usa il carattere tilde (`~`) per prefissare la versione di moment nelle tue dipe ); ``` -La versione di "moment" dovrebbe corrispondere a "~2.10.2" +La versione di `"@freecodecamp/example"` deve corrispondere a `"~1.2.13"`. ```js (getUserInput) => @@ -53,9 +53,9 @@ La versione di "moment" dovrebbe corrispondere a "~2.10.2" (data) => { var packJson = JSON.parse(data); assert.match( - packJson.dependencies.moment, - /^\~2\.10\.2/, - 'Wrong version of "moment". It should be ~2.10.2' + packJson.dependencies["@freecodecamp/example"], + /^\~1\.2\.13/, + 'Wrong version of "@freecodecamp/example". It should be ~1.2.13' ); }, (xhr) => { diff --git a/curriculum/challenges/italian/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md b/curriculum/challenges/italian/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md index ea9299629bc..2aacec14582 100644 --- a/curriculum/challenges/italian/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md +++ b/curriculum/challenges/italian/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md @@ -22,7 +22,7 @@ Segui SECRETS integrata per aggiungere la variabile. Non racchiudere i valori in virgolette quando usi la scheda SECRETS. @@ -34,27 +34,7 @@ mongoose.connect(, { useNewUrlParser: true, useUnifiedTopology: true } # --hints-- -La dipendenza "mongodb version ~3.6.0" dovrebbe essere in package.json - -```js -(getUserInput) => - $.get(getUserInput('url') + '/_api/file/package.json').then( - (data) => { - var packJson = JSON.parse(data); - assert.property(packJson.dependencies, 'mongodb') - assert.match( - packJson.dependencies.mongodb, - /^\~3\.6\.0/, - 'Wrong version of "mongodb". It should be ~3.6.0' - ); - }, - (xhr) => { - throw new Error(xhr.responseText); - } - ); -``` - -La dipendenza "mongoose version ~5.4.0" dovrebbe essere in package.json +La dipendenza "mongoose version ^5.11.15" dovrebbe essere in package.json ```js (getUserInput) => @@ -64,8 +44,8 @@ La dipendenza "mongoose version ~5.4.0" dovrebbe essere in package.json assert.property(packJson.dependencies, 'mongoose'); assert.match( packJson.dependencies.mongoose, - /^\~5\.4\.0/, - 'Wrong version of "mongoose". It should be ~5.4.0' + /^\^5\.11\.15/, + 'Wrong version of "mongoose". It should be ^5.11.15' ); }, (xhr) => { diff --git a/curriculum/challenges/italian/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md b/curriculum/challenges/italian/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md index 05b818ef956..d18b9c73243 100644 --- a/curriculum/challenges/italian/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md +++ b/curriculum/challenges/italian/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md @@ -18,7 +18,18 @@ Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospi # --instructions-- -**Nota**: `helmet@^3.21.3` è necessario per le user stories. Ciò significa che sarà necessario utilizzare la versione precedente della documentazione di Helmet per avere informazioni su come soddifare le user stories. +Crea un gioco sicuro multigiocatore in cui ogni giocatore può muovere il suo avatar, c'è almeno un oggetto collezionabile e la classifica dei giocatori viene calcolata in base al loro punteggio. + +Per i dettagli consulta il testo qui sotto. + +Assicurati che il tuo gioco sia sicuro! Includi queste misure di sicurezza: + +- Il client non dovrebbe essere in grado di individuare il MIME type +- Previeni attacchi XSS +- Non nascondere nulla dal sito web nel client +- Le intestazioni dicono che il sito è alimentato da `PHP 7.4.3` + +**Nota**: `helmet@^3.21.3` è necessario per le user story. Ciò significa che sarà necessario utilizzare la versione precedente della documentazione di Helmet per avere informazioni su come soddisfare le user story. # --hints-- @@ -82,7 +93,7 @@ Il metodo `movePlayer` dovrebbe accettare due argomenti: una stringa "up", "down ``` -Il punteggio del giocatore dovrebbe essere usato per calcolare il suo rango tra gli altri giocatori. Completa il metodo `calculateRank` nella classe `Player` per implementarlo. +Il punteggio del giocatore dovrebbe essere usato per calcolare la sua posizione in classifica tra gli altri giocatori. Completa il metodo `calculateRank` nella classe `Player` per implementarlo. ```js @@ -118,7 +129,7 @@ I giocatori possono disconnettersi dal gioco in qualsiasi momento. ``` -Impedisci al client di indovinare / sniffare il tipo MIME. +Impedisci al client di individuare il MIME type. ```js async (getUserInput) => { diff --git a/curriculum/challenges/italian/09-information-security/information-security-with-helmetjs/understand-bcrypt-hashes.md b/curriculum/challenges/italian/09-information-security/information-security-with-helmetjs/understand-bcrypt-hashes.md index 3edcca87086..034bd318b0c 100644 --- a/curriculum/challenges/italian/09-information-security/information-security-with-helmetjs/understand-bcrypt-hashes.md +++ b/curriculum/challenges/italian/09-information-security/information-security-with-helmetjs/understand-bcrypt-hashes.md @@ -16,9 +16,9 @@ Gli hash BCrypt appariranno sempre come `$2a$13$ZyprE5MRw2Q3WpNOGZWGbeG7ADUre1Q8 # --instructions-- -Per iniziare a usare BCrypt, aggiungilo come dipendenza nel tuo progetto e richiederlo come 'bcrypt' nel tuo server. +Aggiungi tutto il tuo codice per queste lezioni nel file `server.js` in mezzo al codice di partenza che ti abbiamo fornito. Non modificare o eliminare il codice che abbiamo aggiunto per te. -Aggiungi tutto il tuo codice per queste lezioni nel file `server.js` in mezzo al codice con cui ti abbiamo avviato. Non modificare o eliminare il codice che abbiamo aggiunto per te. +BCrypt è già stato aggiunto come dipendenza, quindi richiedilo come `bcrypt` nel tuo server. Invia la tua pagina quando pensi di averlo fatto correttamente. diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md index 15cb5c1a0d6..cf679b57c0b 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md @@ -32,6 +32,13 @@ const radioButtons = [...document.querySelectorAll('input[type="radio"]')]; assert(radioButtons.every((btn) => btn.hasAttribute('name'))); ``` +Entrambi i pulsanti di opzione dovrebbero avere un attributo `type`. Verifica che ci sia uno spazio dopo il nome del tag di apertura e/o che ci siano spazi prima di tutti i nomi degli attributi. + +```js +const radioButtons = [...document.querySelectorAll('input')]; +assert(radioButtons.every((btn) => btn.hasAttribute('type'))); +``` + Entrambi i pulsanti di opzione dovrebbero avere un attributo `name` con il valore `indoor-outdoor`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi devono essere racchiusi tra virgolette. ```js diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md index e778358fad2..b7c3db0b195 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md @@ -28,7 +28,13 @@ Il pulsante di opzione dovrebbe avere un attributo `id`. Verifica che ci sia uno assert($('input')[0].hasAttribute('id')); ``` -Il pulsante di opzione dovrebbe avere un attributo `id` con il valore `indoor`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi devono essere circondati da virgolette. +Il pulsante di opzione dovrebbe avere un attributo `type`. Verifica che ci sia uno spazio dopo il nome del tag di apertura e/o che ci siano spazi prima di tutti i nomi degli attributi. + +```js +assert($('input')[0].hasAttribute('type')); +``` + +Il pulsante di opzione dovrebbe avere un attributo `id` con il valore `indoor`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi devono essere racchiusi tra virgolette. ```js assert($('input')[0].id.match(/^indoor$/)); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md index 9403721a91e..01e316a21bf 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md @@ -9,7 +9,7 @@ dashedName: step-42 Anche se hai aggiunto il pulsante sotto l'input di testo, appaiono uno accanto all'altro sulla pagina. Questo perché entrambi gli elementi `input` e `button` sono inline elements, che non appaiono su nuove righe. -Precedentemente, hai imparato che il pulsante invia il modulo di default, ma puoi aggiungere esplicitamente l'attributo `type` con il valore `submit` per renderlo più chiaro. Prosegui in questo modo per specificare dove il pulsante dovrebbe inviare il modulo. +Il pulsante che hai aggiunto invierà il modulo di default. Tuttavia, fare affidamento su un comportamento predefinito può causare confusione. Aggiungi l'attributo `type` con il valore `submit` a `button` per chiarire che è un pulsante di invio. # --hints-- diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md index b9e3cdf09c6..3a5f079d70d 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md @@ -32,6 +32,13 @@ const radioButtons = [...document.querySelectorAll('input[type="radio"]')]; assert(radioButtons.every((btn) => btn.hasAttribute('value'))); ``` +Entrambi i pulsanti di opzione dovrebbero avere un attributo `type`. Verifica che ci sia uno spazio dopo il nome del tag di apertura e/o che ci siano spazi prima di tutti i nomi degli attributi. + +```js +const radioButtons = [...document.querySelectorAll('input')]; +assert(radioButtons.every((btn) => btn.hasAttribute('type'))); +``` + L'attributo `value` del pulsante di opzione`Indoor` dovrebbe avere il valore `indoor`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi devono essere racchiusi tra virgolette. ```js @@ -39,7 +46,7 @@ const indoorRadioButton = document.querySelector('#indoor'); assert(indoorRadioButton.getAttribute('value').match(/^indoor$/)); ``` -L'attributo `value` del pulsante di opzione `Outdoor` dovrebbe avere il valore `outdoor`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi devono essere racchiusi tra virgolette. +L'attributo `value` del pulsante di opzione `Outdoor` dovrebbe avere il valore `outdoor`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi devono essere circondati da virgolette. ```js const outdoorRadioButton = document.querySelector('#outdoor'); diff --git a/curriculum/challenges/japanese/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md b/curriculum/challenges/japanese/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md index d8008b82ce8..1efb90a9819 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md @@ -9,7 +9,7 @@ dashedName: lock-an-element-to-its-parent-with-absolute-positioning # --description-- -CSS の `position` プロパティの次のオプションは `absolute` です。これは、要素を親コンテナからの相対的な位置に固定します。 `relative` の配置と異なり、このオプションは要素をドキュメントの通常フローから削除するため、周りの項目はその要素を無視します。 CSS オフセットプロパティ (top または bottom および left または right) は位置を調整するために使われます。 +CSS の `position` プロパティの次のオプションは `absolute` です。これは、要素を親コンテナーからの相対的な位置に固定します。 `relative` の配置と異なり、このオプションは要素をドキュメントの通常フローから削除するため、周りの項目はその要素を無視します。 CSS オフセットプロパティ (top または bottom および left または right) は位置を調整するために使われます。 絶対位置指定の注意点の一つは、最も近い *position 指定がされている* 祖先要素に対して固定されることです。 親となる項目に position ルールを追加する (一般的に `position: relative;` が使われます) ことをもし忘れると、ブラウザは一連の要素を辿って探し続け、最終的には `body` タグがデフォルトとして使われます。 diff --git a/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.md b/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.md index ad5cd9da78f..170a1d7f0b9 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.md @@ -11,13 +11,13 @@ dashedName: align-elements-using-the-align-items-property `align-items` プロパティは `justify-content` に似ています。 `justify-content` プロパティは主軸に沿ってフレックスアイテムを整列していたことを思い出してください。 行の主軸は水平線で、列の主軸は垂直線です。 -フレックスコンテナには主軸と対照的な**交差軸** (cross axis) もあります。 行の交差軸は垂直線で、列の交差軸は水平線です。 +フレックスコンテナーには主軸と対照的な**交差軸** (cross axis) もあります。 行の交差軸は垂直線で、列の交差軸は水平線です。 -CSS は `align-items` プロパティを提供しており、フレックスアイテムを交差軸方向に整列させることができます。 行の場合、コンテナ内で行全体のアイテムをどのように上下に揃えるかを CSS に指定します。 そして列の場合は、コンテナ内で全てのアイテムをどのように左右に揃えるかを指定します。 +CSS は `align-items` プロパティを提供しており、フレックスアイテムを交差軸方向に整列させることができます。 行の場合、コンテナー内で行全体のアイテムをどのように上下に揃えるかを CSS に指定します。 そして列の場合は、コンテナー内で全てのアイテムをどのように左右に揃えるかを指定します。 `align-items` で使用できるさまざまな値は次のとおりです。 - + # --instructions-- diff --git a/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md b/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md index 402bfc8ae85..4478583b25e 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md @@ -9,15 +9,15 @@ dashedName: align-elements-using-the-justify-content-property # --description-- -フレックスコンテナ内のフレックスアイテムがコンテナ内のすべてのスペースを埋めないことがあります。 この場合、フレックスのアイテムをどのように整列・空白の配置を行うかを CSS に指示したいと思うのが当然でしょう。 幸いなことに、`justify-content` プロパティにはこれを実現するためのオプションがいくつかあります。 しかしまず最初に、これらのオプションを検討する前に理解すべき重要な用語がいくつかあります。 +フレックスコンテナー内のフレックスアイテムがコンテナー内のすべてのスペースを埋めないことがあります。 この場合、フレックスのアイテムをどのように整列・空白の配置を行うかを CSS に指示したいと思うのが当然でしょう。 幸いなことに、`justify-content` プロパティにはこれを実現するためのオプションがいくつかあります。 しかしまず最初に、これらのオプションを検討する前に理解すべき重要な用語がいくつかあります。 フレックスボックスのプロパティについて詳しくはこちらを参照してください。 -フレックスコンテナを行 (row) として設定すると、フレックスアイテムが左から右に並んで配置されたことを思い出してください。 列 (column) として設定されたフレックスコンテナは、フレックスアイテムを上から下へ垂直に積み重ねて配置します。 それぞれ、フレックスアイテムが配置される方向を**主軸** (main axis) と呼びます。 行の場合、これは各アイテムを横切る水平方向の線です。 そして列の場合、主軸はアイテムを貫く垂直方向の線です。 +フレックスコンテナーを行 (row) として設定すると、フレックスアイテムが左から右に並んで配置されたことを思い出してください。 列 (column) として設定されたフレックスコンテナーは、フレックスアイテムを上から下へ垂直に積み重ねて配置します。 それぞれ、フレックスアイテムが配置される方向を**主軸** (main axis) と呼びます。 行の場合、これは各アイテムを横切る水平方向の線です。 そして列の場合、主軸はアイテムを貫く垂直方向の線です。 -主軸の線に沿ってフレックスアイテムを配置する方法には、いくつかのオプションが存在します。 最もよく使用されるのは `justify-content: center;` で、フレックスコンテナ内のすべてのフレックスアイテムを中央に揃えます。 その他のオプションは以下のとおりです: +主軸の線に沿ってフレックスアイテムを配置する方法には、いくつかのオプションが存在します。 最もよく使用されるのは `justify-content: center;` で、フレックスコンテナー内のすべてのフレックスアイテムを中央に揃えます。 その他のオプションは以下のとおりです: - + # --instructions-- diff --git a/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.md b/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.md index 513c32175bc..b28f8b883af 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.md @@ -9,7 +9,7 @@ dashedName: use-the-flex-direction-property-to-make-a-column # --description-- -直近の 2 つのチャレンジでは、`flex-direction` プロパティに `row` を設定しました。 このプロパティは、フレックスコンテナの子要素を垂直に積み重ねた列 (column) を作成することもできます。 +直近の 2 つのチャレンジでは、`flex-direction` プロパティに `row` を設定しました。 このプロパティは、フレックスコンテナーの子要素を垂直に積み重ねた列 (column) を作成することもできます。 # --instructions-- diff --git a/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.md b/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.md index eb91d1e39a1..4bd612f4a37 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.md @@ -9,7 +9,7 @@ dashedName: use-the-flex-direction-property-to-make-a-row # --description-- -要素に `display: flex` を追加すると、その要素はフレックスコンテナになります。 これにより、その要素の子要素を行または列として配置することができます。 これを行うためには、`flex-direction` プロパティを親アイテムに追加し、row (行) またはcolumn (列) を設定します。 row (行) を作成すると子要素が水平方向に整列され、column (列) を作成すると子要素が垂直方向に整列されます。 +要素に `display: flex` を追加すると、その要素はフレックスコンテナーになります。 これにより、その要素の子要素を行または列として配置することができます。 これを行うためには、`flex-direction` プロパティを親アイテムに追加し、row (行) またはcolumn (列) を設定します。 row (行) を作成すると子要素が水平方向に整列され、column (列) を作成すると子要素が垂直方向に整列されます。 `flex-direction` のその他のオプションとして、`row-reverse` と `column-reverse` があります。 diff --git a/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.md b/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.md index 7b3d3aabcbc..6779efc504f 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.md @@ -9,7 +9,7 @@ dashedName: use-the-flex-grow-property-to-expand-items # --description-- -`flex-shrink` の反対は `flex-grow` プロパティです。 `flex-shrink` はコンテナが縮小するときのアイテムのサイズを制御することを思い出してください。 `flex-grow` プロパティは、親コンテナが拡大されるときのアイテムのサイズを制御します。 +`flex-shrink` の反対は `flex-grow` プロパティです。 `flex-shrink` はコンテナーが縮小するときのアイテムのサイズを制御することを思い出してください。 `flex-grow` プロパティは、親コンテナーが拡大されるときのアイテムのサイズを制御します。 前回のチャレンジと似たような例として、もしあるアイテムが `flex-grow` の値として `1` を持ち、他のアイテムが `flex-grow` の値として `3` を持つ場合、`3` の値を持つアイテムがもう一方に比べて三倍拡大します。 diff --git a/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.md b/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.md index 33c4daff83e..9a17a4d8aa2 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.md @@ -19,7 +19,7 @@ dashedName: use-the-flex-shorthand-property CSS プロパティ `flex` を `#box-1` と `#box-2` の両方に追加します。 `#box-1` への値として `flex-grow` が `2`、 `flex-shrink` が `2`、そして `flex-basis` が `150px` となるよう設定してください。 `#box-2` への値として `flex-grow` が `1`、`flex-shrink` が `1`、そして `flex-basis` が `150px` となるよう設定してください。 -これらの値を指定すると、コンテナが 300px より大きい場合には `#box-1` が `#box-2` の 2 倍の比率で余分なスペースを埋めるように拡大し、コンテナが 300px より小さい場合には `#box-2` の 2 倍の比率で縮小します。 300px は 2 つのボックスの `flex-basis` 値を足し合わせたサイズです。 +これらの値を指定すると、コンテナーが 300px より大きい場合には `#box-1` が `#box-2` の 2 倍の比率で余分なスペースを埋めるように拡大し、コンテナーが 300px より小さい場合には `#box-2` の 2 倍の比率で縮小します。 300px は 2 つのボックスの `flex-basis` 値を足し合わせたサイズです。 # --hints-- diff --git a/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.md b/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.md index 5df1e56aa7b..1280fc4f6bc 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.md @@ -9,11 +9,11 @@ dashedName: use-the-flex-shrink-property-to-shrink-items # --description-- -これまでは、チャレンジ内のすべてのプロパティはフレックスコンテナ (フレックスアイテムの親) に適用されていました。 一方で、フレックスアイテムにもいくつかの便利なプロパティがあります。 +これまでは、チャレンジ内のすべてのプロパティはフレックスコンテナー (フレックスアイテムの親) に適用されていました。 一方で、フレックスアイテムにもいくつかの便利なプロパティがあります。 -1 つ目は `flex-shrink` プロパティです。 これを使用すると、フレックスコンテナが小さすぎるとき、アイテムを縮小させることができます。 親コンテナの幅がその中のすべてのフレックスアイテムを足し合わせた幅より小さい場合に、アイテムが縮小されます。 +1 つ目は `flex-shrink` プロパティです。 これを使用すると、フレックスコンテナーが小さすぎるとき、アイテムを縮小させることができます。 親コンテナの幅がその中のすべてのフレックスアイテムを足し合わせた幅より小さい場合に、アイテムが縮小されます。 -`flex-shrink` プロパティは数値を値として取ります。 数値が大きいほど、コンテナ内の他のアイテムに比べてより縮小します。 例えば、もしあるアイテムが `flex-shrink` の値として `1` を持ち、他のアイテムが `flex-shrink` の値として `3` を持つ場合、`3` の値を持つアイテムがもう一方に比べて三倍縮小します。 +`flex-shrink` プロパティは数値を値として取ります。 数値が大きいほど、コンテナー内の他のアイテムに比べてより縮小します。 例えば、もしあるアイテムが `flex-shrink` の値として `1` を持ち、他のアイテムが `flex-shrink` の値として `3` を持つ場合、`3` の値を持つアイテムがもう一方に比べて三倍縮小します。 # --instructions-- diff --git a/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.md b/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.md index dbc9d0bbaa0..dc949b569b8 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.md @@ -9,9 +9,9 @@ dashedName: use-the-flex-wrap-property-to-wrap-a-row-or-column # --description-- -CSS の flexbox には、フレックスコンテナを複数の行 (または列) に分割する機能があります。 デフォルトでは、フレックスコンテナはすべてのフレックスアイテムが1つに収まるように格納します。 例えば、行はすべて1行になります。 +CSS の flexbox には、フレックスコンテナーを複数の行 (または列) に分割する機能があります。 デフォルトでは、フレックスコンテナーはすべてのフレックスアイテムが1つに収まるように格納します。 例えば、行はすべて1行になります。 -しかし、`flex-wrap` プロパティを使用することでアイテムを折り返すように CSS に指示できます。 これにより、はみ出したアイテムは新しい行または列に移動します。 折り返す際のブレークポイントは、アイテムのサイズとコンテナのサイズによって決まります。 +しかし、`flex-wrap` プロパティを使用することでアイテムを折り返すように CSS に指示できます。 これにより、はみ出したアイテムは新しい行または列に移動します。 折り返す際のブレークポイントは、アイテムのサイズとコンテナーのサイズによって決まります。 CSS には折り返す方向のオプションもあります: diff --git a/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.md b/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.md index 0ccfc772a0d..abb8610a886 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.md @@ -9,7 +9,7 @@ dashedName: use-the-order-property-to-rearrange-items # --description-- -`order` プロパティは、フレックスアイテムをどのような順序でフレックスコンテナ内に表示するかを CSS に指示するために使用されます。 デフォルトでは、アイテムは HTML ソースコードの記述順と同じ順序で表示されます。 プロパティは数値を値として取ることができ、負の数値も使用できます。 +`order` プロパティは、フレックスアイテムをどのような順序でフレックスコンテナー内に表示するかを CSS に指示するために使用されます。 デフォルトでは、アイテムは HTML ソースコードの記述順と同じ順序で表示されます。 プロパティは数値を値として取ることができ、負の数値も使用できます。 # --instructions-- diff --git a/curriculum/challenges/japanese/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md b/curriculum/challenges/japanese/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md index 97d60a0657e..1fb5cdd3343 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md @@ -9,7 +9,7 @@ dashedName: add-columns-with-grid-template-columns # --description-- -グリッド要素を作成するだけでは、あまり違いはありません。 グリッド構造も定義する必要があります。 グリッドに列を追加するには、下記のようにグリッドコンテナに `grid-template-columns` プロパティを設定します: +グリッド要素を作成するだけでは、あまり違いはありません。 グリッド構造も定義する必要があります。 グリッドに列を追加するには、下記のようにグリッドコンテナーに `grid-template-columns` プロパティを設定します: ```css .container { @@ -22,7 +22,7 @@ dashedName: add-columns-with-grid-template-columns # --instructions-- -グリッドコンテナに、各幅 `100px` の列を 3 列作成してください。 +グリッドコンテナーに、各幅 `100px` の列を 3 列作成してください。 # --hints-- diff --git a/curriculum/challenges/japanese/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md b/curriculum/challenges/japanese/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md index 0312363e655..0a71f432168 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md @@ -9,7 +9,7 @@ dashedName: align-all-items-horizontally-using-justify-items # --description-- -CSS グリッドの全てのアイテムを同じ配置にしたい場合があります。 以前に学んだプロパティを使用して個別に整列させることもできますし、グリッドコンテナに `justify-items` を使用することで、一括で水平方向に揃えることもできます。 このプロパティは、前の 2 つのチャレンジで学んだものと同じ値を全て利用することができます。違いはグリッド内の**全ての**項目を目的の位置に移動させることです。 +CSS グリッドの全てのアイテムを同じ配置にしたい場合があります。 以前に学んだプロパティを使用して個別に整列させることもできますし、グリッドコンテナーに `justify-items` を使用することで、一括で水平方向に揃えることもできます。 このプロパティは、前の 2 つのチャレンジで学んだものと同じ値を全て利用することができます。違いはグリッド内の**全ての**項目を目的の位置に移動させることです。 # --instructions-- diff --git a/curriculum/challenges/japanese/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md b/curriculum/challenges/japanese/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md index 3b03f8d1e49..b143655e1f1 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md @@ -9,7 +9,7 @@ dashedName: align-all-items-vertically-using-align-items # --description-- -グリッドコンテナに `align-items` プロパティを使用すると、グリッド内のすべてのアイテムが垂直方向に整列します。 +グリッドコンテナーに `align-items` プロパティを使用すると、グリッド内のすべてのアイテムが垂直方向に整列します。 # --instructions-- diff --git a/curriculum/challenges/japanese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md b/curriculum/challenges/japanese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md index 72d2f0c68ab..14301d0e701 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md @@ -9,13 +9,13 @@ dashedName: create-flexible-layouts-using-auto-fill # --description-- -repeat 関数には auto-fill というオプションがあります。 これにより、希望するサイズの行または列を、コンテナのサイズに応じて可能な限り多く自動的に挿入できます。 以下のように `auto-fill` と `minmax` を組み合わせて柔軟なレイアウトが作成できます: +repeat 関数には auto-fill というオプションがあります。 これにより、希望するサイズの行または列を、コンテナーのサイズに応じて可能な限り多く自動的に挿入できます。 以下のように `auto-fill` と `minmax` を組み合わせて柔軟なレイアウトが作成できます: ```css repeat(auto-fill, minmax(60px, 1fr)); ``` -コンテナのサイズが変更されると、この設定では 60px の列が挿入され続け、次の列を挿入できるようになるまで引き伸ばし続けます。 **注:** コンテナがすべてのアイテムを 1 行に収められない場合、アイテムは新しい行に移動します。 +コンテナーのサイズが変更されると、この設定では 60px の列が挿入され続け、次の列を挿入できるようになるまで引き伸ばし続けます。 **注:** コンテナーがすべてのアイテムを 1 行に収められない場合、アイテムは新しい行に移動します。 # --instructions-- diff --git a/curriculum/challenges/japanese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md b/curriculum/challenges/japanese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md index 4efa5be9092..a3da5c7bd91 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md @@ -9,9 +9,9 @@ dashedName: create-flexible-layouts-using-auto-fit # --description-- -`auto-fit` は `auto-fill` とほぼ同じ動作をします。 唯一の違いは、コンテナのサイズがすべてのアイテムを足し合わせたサイズを超える場合に、`auto-fill` は空の行や列を挿入し続けてアイテムを横に寄せるのに対し、`auto-fit` は空の行や列を押し潰しアイテムをコンテナのサイズに合わせて引き伸ばします。 +`auto-fit` は `auto-fill` とほぼ同じ動作をします。 唯一の違いは、コンテナーのサイズがすべてのアイテムを足し合わせたサイズを超える場合に、`auto-fill` は空の行や列を挿入し続けてアイテムを横に寄せるのに対し、`auto-fit` は空の行や列を押し潰しアイテムをコンテナーのサイズに合わせて引き伸ばします。 -**注:** コンテナがすべてのアイテムを 1 行に収められない場合、アイテムは新しい行に移動します。 +**注:** コンテナーがすべてのアイテムを 1 行に収められない場合、アイテムは新しい行に移動します。 # --instructions-- diff --git a/curriculum/challenges/japanese/01-responsive-web-design/css-grid/create-your-first-css-grid.md b/curriculum/challenges/japanese/01-responsive-web-design/css-grid/create-your-first-css-grid.md index da883841c6b..8b8e448d181 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/css-grid/create-your-first-css-grid.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/css-grid/create-your-first-css-grid.md @@ -9,7 +9,7 @@ dashedName: create-your-first-css-grid # --description-- -`display` プロパティを `grid` に設定することで、任意の HTML 要素をグリッドコンテナに変換します。 これにより、CSS グリッドに関連する他のすべてのプロパティを使用することができます。 +`display` プロパティを `grid` に設定することで、任意の HTML 要素をグリッドコンテナーに変換します。 これにより、CSS グリッドに関連する他のすべてのプロパティを使用することができます。 **注:** CSS グリッドでは、親要素を container、子要素を items と呼びます。 diff --git a/curriculum/challenges/japanese/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md b/curriculum/challenges/japanese/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md index 95717c9c535..83c0fade028 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md @@ -8,7 +8,7 @@ dashedName: divide-the-grid-into-an-area-template # --description-- -グリッドのセルをエリア (area) にまとめてグループ化し、そのエリアにカスタム名を付けることができます。 次のようにコンテナで `grid-template-areas` を使用してください: +グリッドのセルをエリア (area) にまとめてグループ化し、そのエリアにカスタム名を付けることができます。 次のようにコンテナーで `grid-template-areas` を使用してください: ```css grid-template-areas: diff --git a/curriculum/challenges/japanese/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.md b/curriculum/challenges/japanese/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.md index f8c9ecf0ea0..e46c39e7e35 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.md @@ -9,7 +9,7 @@ dashedName: limit-item-size-using-the-minmax-function # --description-- -`grid-template-columns` と `grid-template-rows` と共に使われる組み込み関数にはもう一つ、`minmax` があります。 これはグリッドコンテナのサイズが変更されたときに、アイテムのサイズを制限するために使用されます。 これを行うには、アイテムの許容サイズ範囲を指定する必要があります。 例: +`grid-template-columns` と `grid-template-rows` と共に使われる組み込み関数にはもう一つ、`minmax` があります。 これはグリッドコンテナーのサイズが変更されたときに、アイテムのサイズを制限するために使用されます。 これを行うには、アイテムの許容サイズ範囲を指定する必要があります。 例: ```css grid-template-columns: 100px minmax(50px, 200px); diff --git a/curriculum/challenges/japanese/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md b/curriculum/challenges/japanese/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md index d4aa47715fc..bab6bc5e7b2 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md @@ -9,7 +9,7 @@ dashedName: place-items-in-grid-areas-using-the-grid-area-property # --description-- -前回のチャレンジで示したように、グリッドコンテナ用のエリアテンプレートを作成した後、名前を参照してカスタムエリアにアイテムを配置することができます。 これを行うためには、アイテムの `grid-area` プロパティを使用します。 +前回のチャレンジで示したように、グリッドコンテナー用のエリアテンプレートを作成した後、名前を参照してカスタムエリアにアイテムを配置することができます。 これを行うためには、アイテムの `grid-area` プロパティを使用します。 ```css .item1 { diff --git a/curriculum/challenges/japanese/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md b/curriculum/challenges/japanese/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md index ab4afc662f7..5f130a3447a 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md @@ -15,7 +15,7 @@ CSS グリッドでは `px` や `em` のような絶対単位および相対単 `auto`: 列または行をコンテンツの幅や高さに自動的に設定します。 -`%`: 列または行をコンテナのパーセント幅に調整します。 +`%`: 列または行をコンテナーのパーセント幅に調整します。 プレビューに表示されている出力を生成するコードは次のとおりです: @@ -23,7 +23,7 @@ CSS グリッドでは `px` や `em` のような絶対単位および相対単 grid-template-columns: auto 50px 10% 2fr 1fr; ``` -このスニペットは 5 列を作成します。 1 列目はコンテンツと同じ幅、2 列目は 50px、3 列目はコンテナの 10％ になります。最後の 2 列については、残りのスペースを 3 分割して、2 つを 4 列目に、1 つを 5 列目に割り当てています。 +このスニペットは 5 列を作成します。 1 列目はコンテンツと同じ幅、2 列目は 50px、3 列目はコンテナーの 10％ になります。最後の 2 列については、残りのスペースを 3 分割して、2 つを 4 列目に、1 つを 5 列目に割り当てています。 # --instructions-- diff --git a/curriculum/challenges/japanese/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md b/curriculum/challenges/japanese/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md index c0755a5ea24..0ce47d244b3 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md @@ -9,7 +9,7 @@ dashedName: use-grid-column-to-control-spacing # --description-- -ここまで説明したすべてのプロパティはグリッドコンテナ用です。 `grid-column` プロパティは、グリッドアイテム自身に使用する初めてのプロパティです。 +ここまで説明したすべてのプロパティはグリッドコンテナー用です。 `grid-column` プロパティは、グリッドアイテム自身に使用する初めてのプロパティです。 グリッドを作成する仮想の水平線と垂直線はグリッド線 (lines) と呼ばれます。 これらの線には順番が付けられており、グリッドの左上角の 1 から始まり、列は右に、行は下に向かって数えます。 diff --git a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.md b/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.md index dc611f6769d..3104dcc01e5 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.md @@ -17,11 +17,11 @@ img { } ``` -`max-width` を `100%` にすることで画像が決してそれが入っているコンテナより広がらないようにし、`height` を `auto` にすることで画像が元のアスペクト比を保つようにします。 +`max-width` を `100%` にすることで画像が決してそれが入っているコンテナーより広がらないようにし、`height` を `auto` にすることで画像が元のアスペクト比を保つようにします。 # --instructions-- -`responsive-img` クラスにスタイルルールを追加し、これをレスポンシブにします。 コンテナ (この場合はプレビューウィンドウ) の幅より広がらないようにし、かつ元のアスペクト比を維持する必要があります。 コードを追加したら、画像の動作を確認するためにプレビューのサイズを変更してみましょう。 +`responsive-img` クラスにスタイルルールを追加し、これをレスポンシブにします。 コンテナー (この場合はプレビューウィンドウ) の幅より広がらないようにし、かつ元のアスペクト比を維持する必要があります。 コードを追加したら、画像の動作を確認するためにプレビューのサイズを変更してみましょう。 # --hints-- diff --git a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.md b/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.md index 8ca3ced460a..7c8eb88545a 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.md @@ -9,7 +9,7 @@ dashedName: make-typography-responsive # --description-- -テキストサイズとして `em` や `px` を使用する代わりに、ビューポート単位を使用してレスポンシブなタイポグラフィを作成できます。 ビューポート単位は、パーセンテージと同様に相対単位ですが、これらは異なる項目を基準にします。 ビューポートの単位はデバイスのビューポート寸法 (幅または高さ) からの相対値ですが、パーセンテージは親コンテナ要素のサイズからの相対値です。 +テキストサイズとして `em` や `px` を使用する代わりに、ビューポート単位を使用してレスポンシブなタイポグラフィを作成できます。 ビューポート単位は、パーセンテージと同様に相対単位ですが、これらは異なる項目を基準にします。 ビューポートの単位はデバイスのビューポート寸法 (幅または高さ) からの相対値ですが、パーセンテージは親コンテナー要素のサイズからの相対値です。 4 つの異なるビューポートの単位は次のとおりです: diff --git a/curriculum/challenges/japanese/03-front-end-development-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.md b/curriculum/challenges/japanese/03-front-end-development-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.md index 39f6063bcb8..2c1e5710236 100644 --- a/curriculum/challenges/japanese/03-front-end-development-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.md +++ b/curriculum/challenges/japanese/03-front-end-development-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9acde08712 -title: Bootstrap の fluid コンテナでレスポンシブデザインを使用する +title: Bootstrap の fluid コンテナーでレスポンシブデザインを使用する challengeType: 0 forumTopicId: 18362 dashedName: use-responsive-design-with-bootstrap-fluid-containers diff --git a/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md b/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md index 6137bc4056d..473fe8845f2 100644 --- a/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md +++ b/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md @@ -14,7 +14,7 @@ dashedName: build-a-drum-machine このプロジェクトを完了するために、HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、および jQuery を自在に組み合わせて利用することができます。 このセクションはフロントエンドフレームワークの学習を目的としていますので、React などのフロントエンドフレームワークを使用してください。 上記以外の他のテクノロジーは推奨されません。使用する場合は自己責任で行ってください。 Angular や Vue などの他のフロントエンドフレームワークのサポートを検討していますが、現時点ではサポートされていません。 このプロジェクトで推奨される一連のテクノロジーを使用している場合の不具合報告については、freeCodeCamp にて報告を受け入れ、修正するよう努めます。 コーディングの成功を祈ります！ -**ユーザーストーリー 1:** 対応する `id="drum-machine"` を持ち、他のすべての要素を収める、外側のコンテナを表示できます。 +**ユーザーストーリー 1:** 対応する `id="drum-machine"` を持ち、他のすべての要素を収める、外側のコンテナーを表示できます。 **ユーザーストーリー 2:** `#drum-machine` の中に、対応する `id="display"` を持つ要素を表示できます。 diff --git a/curriculum/challenges/japanese/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md b/curriculum/challenges/japanese/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md index 06fca8763ff..6edc4c7e074 100644 --- a/curriculum/challenges/japanese/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md +++ b/curriculum/challenges/japanese/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md @@ -10,7 +10,7 @@ dashedName: use-dynamic-scales D3 の `min()` メソッドと `max()` メソッドは、スケールを設定する際に便利です。 -複雑なデータセットが与えられた場合、優先事項の一つは、可視化されたものが SVG コンテナの幅と高さに合うようにスケールを設定することです。 すべてのデータがウェブページに表示されるように、SVG キャンバス内にデータをプロットしましょう。 +複雑なデータセットが与えられた場合、優先事項の一つは、可視化されたものが SVG コンテナーの幅と高さに合うようにスケールを設定することです。 すべてのデータがウェブページに表示されるように、SVG キャンバス内にデータをプロットしましょう。 下の例は、散布図データの x 軸スケールを設定します。 `domain()` メソッドは、プロットされる生データ値に関する情報をスケールに渡します。 `range()` メソッドは、ウェブページ上で可視化に使用される実際のスペースに関する情報をスケールに提供します。 diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md index 4b8280105b8..9367f78a024 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md @@ -7,7 +7,7 @@ dashedName: step-41 # --description-- -このプロジェクトで扱うセマンティックな HTML 要素の最後の 2 つは、`footer` 要素と `address` 要素です。 `footer` 要素はページに関連しているコンテンツの集まりを含むコンテナで、`address` 要素はページの著者の連絡先情報を提供するコンテナです。 +このプロジェクトで扱うセマンティックな HTML 要素の最後の 2 つは、`footer` 要素と `address` 要素です。 `footer` 要素はページに関連しているコンテンツの集まりを含むコンテナーで、`address` 要素はページの著者の連絡先情報を提供するコンテナーです。 `main` 要素の後に `footer` 要素を 1 つ追加し、さらにその中に `address` 要素を 1 つネストしてください。 diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md new file mode 100644 index 00000000000..769b87765b7 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md @@ -0,0 +1,41 @@ +--- +id: 60a3e3396c7b40068ad6996d +title: ステップ 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +コンテンツは、パディング (padding) と呼ばれる余白で囲まれています。これは商品と周りの箱の間に入っている緩衝材に似ています。 + +境界線 (border) は、商品が送られてきた段ボール箱のようなものだと考えてください。 + +では、`src` 属性を `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png` に変更してください。 + +# --hints-- + +`img` 要素の `src` を `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 + + + + + Rothko Painting + + +--fcc-editable-region-- + +--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md new file mode 100644 index 00000000000..67b0f084fad --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md @@ -0,0 +1,43 @@ +--- +id: 60a3e3396c7b40068ad6996e +title: ステップ 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +マージン (margin) は箱の外側の領域で、他の箱、つまり他の要素との間隔を制御するために使えます。 + +右の図では下にある要素の上部マージンが大きく設定されているため、ページの下の方へ押し下げられています。 + +CSS ボックスモデルが理解できたところで、ロスコ風の絵に取り掛かりましょう。 + +`` 要素を削除してください。 + +# --hints-- + +コード内に `img` 要素が無いようにしてください。 + +```js +assert(document.querySelector('img') === null); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Rothko Painting + + +--fcc-editable-region-- + +--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md index 40a1cef82c8..a48c98d191b 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md @@ -32,6 +32,13 @@ const radioButtons = [...document.querySelectorAll('input[type="radio"]')]; assert(radioButtons.every((btn) => btn.hasAttribute('name'))); ``` +Os dois botões de opção devem ter um atributo `type`. Verifique se há um espaço depois do nome da tag de abertura e/ou se há espaços antes de todos os nomes dos atributos. + +```js +const radioButtons = [...document.querySelectorAll('input')]; +assert(radioButtons.every((btn) => btn.hasAttribute('type'))); +``` + Os botões de opção devem ter o atributo `name` com o valor `indoor-outdoor`. Você omitiu o valor ou tem um erro de digitação. Lembre-se de que os valores dos atributos devem estar cercados com aspas. ```js diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md index a3beec1b694..4ef6f07e8ae 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md @@ -28,6 +28,12 @@ O botão de opção deve ter um atributo `id`. Verifique se há um espaço depoi assert($('input')[0].hasAttribute('id')); ``` +O botão de opção devem ter um atributo `type`. Verifique se há um espaço depois do nome da tag de abertura e/ou se há espaços antes de todos os nomes dos atributos. + +```js +assert($('input')[0].hasAttribute('type')); +``` + O elemento do botão de opção deve ter o atributo `id` com o valor `indoor`. Você omitiu o valor ou tem um erro de digitação. Lembre-se de que os valores dos atributos devem estar cercados com aspas. ```js diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md index bee36ec339f..1d8ad68c903 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md @@ -32,6 +32,13 @@ const radioButtons = [...document.querySelectorAll('input[type="radio"]')]; assert(radioButtons.every((btn) => btn.hasAttribute('value'))); ``` +Os dois botões de opção devem ter um atributo `type`. Verifique se há um espaço depois do nome da tag de abertura e/ou se há espaços antes de todos os nomes dos atributos. + +```js +const radioButtons = [...document.querySelectorAll('input')]; +assert(radioButtons.every((btn) => btn.hasAttribute('type'))); +``` + O atributo `value` do botão de opção `Indoor` deve estar definido como `indoor`. Você omitiu o valor ou tem um erro de digitação. Lembre-se de que os valores dos atributos devem estar cercados com aspas. ```js diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143862a5e54455d262c212e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143862a5e54455d262c212e.md new file mode 100644 index 00000000000..959223ec2d4 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143862a5e54455d262c212e.md @@ -0,0 +1,75 @@ +--- +id: 6143862a5e54455d262c212e +title: Крок 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +В межах `body` створіть елемент `main`. Потім в цьому елементі створіть `section`, що має `class` зі значенням `heading`. + +# --hints-- + +Ви повинні мати елемент `main`. + +```js +assert.exists(document.querySelector('main')); +``` + +Ваш елемент `main` повинен бути в межах елемента `body`. + +```js +assert(document.querySelector('main')?.parentElement?.localName === 'body'); +``` + +Ви повинні мати елемент `section`. + +```js +assert.exists(document.querySelector('section')); +``` + +Ваш елемент `section` повинен бути в межах елемента `main`. + +```js +assert(document.querySelector('section')?.parentElement?.localName === 'main'); +``` + +Ваш елемент `section` повинен мати `class` зі значенням `heading`. + +```js +assert(document.querySelector('section')?.classList?.contains('heading')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +--fcc-editable-region-- + +--fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614389f601bb4f611db98563.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614389f601bb4f611db98563.md new file mode 100644 index 00000000000..ae311fdaec2 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614389f601bb4f611db98563.md @@ -0,0 +1,134 @@ +--- +id: 614389f601bb4f611db98563 +title: Крок 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Під елементом `.author` створіть новий елемент `div`, що має клас `social-icons`. + +Додайте п’ять елементів `a` в цей новий `div` та надайте їм наступні атрибути `href`. + +- Перший елемент `a` повинен мати `href` зі значенням `https://www.facebook.com/freecodecamp`. +- Другий елемент `a` повинен мати `href` зі значенням `https://twitter.com/freecodecamp`. +- Третій елемент `a` повинен мати `href` зі значенням `https://instagram.com/freecodecamp`. +- Четвертий елемент `a` повинен мати `href` зі значенням `https://www.linkedin.com/school/free-code-camp`. +- П'ятий елемент `a` повинен мати `href` зі значенням `https://www.youtube.com/freecodecamp`. + +# --hints-- + +Ви повинні створити новий елемент `div`. + +```js +assert(document.querySelectorAll('div')?.length === 2); +``` + +Ваш новий елемент `div` повинен йти після елемента `.author`. + +```js +assert(document.querySelector('.author')?.nextElementSibling?.localName === 'div'); +``` + +Ваш новий елемент `div` повинен мати клас `social-icons`. + +```js +assert(document.querySelector('.author')?.nextElementSibling?.classList?.contains('social-icons')); +``` + +Ваш елемент `.social-icons` повинен мати п'ять елементів `a`. + +```js +assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.length === 5); +``` + +Ваш перший елемент `a` повинен мати `href` зі значенням `https://www.facebook.com/freecodecamp`. + +```js +assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.[0]?.getAttribute('href')?.includes('https://www.facebook.com/freecodecamp')); +``` + +Ваш другий елемент `a` повинен мати `href` зі значенням `https://twitter.com/freecodecamp`. + +```js +assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[1]?.getAttribute('href'), 'https://twitter.com/freecodecamp'); +``` + +Ваш третій елемент `a` повинен мати `href` зі значенням `https://instagram.com/freecodecamp`. + +```js +assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[2]?.getAttribute('href'), 'https://instagram.com/freecodecamp'); +``` + +Ваш четвертий елемент `a` повинен мати `href` зі значенням `https://www.linkedin.com/school/free-code-camp`. + +```js +assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[3]?.getAttribute('href'), 'https://www.linkedin.com/school/free-code-camp'); +``` + +Ваш п'ятий елемент `a` повинен мати `href` зі значенням `https://www.youtube.com/freecodecamp`. + +```js +assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[4]?.getAttribute('href'), 'https://www.youtube.com/freecodecamp'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438b5b66d76a6264430f2a.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438b5b66d76a6264430f2a.md new file mode 100644 index 00000000000..2a0836ba36a --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438b5b66d76a6264430f2a.md @@ -0,0 +1,139 @@ +--- +id: 61438b5b66d76a6264430f2a +title: Крок 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +В межах кожного з ваших нових елементів `a` додайте елемент `i` та надайте їм такі класи: + +- Ваш перший елемент `i` повинен мати клас `fab fa-facebook-f` +- Ваш другий елемент `i` повинен мати клас `fab fa-twitter` +- Ваш третій елемент `i` повинен мати клас `fab fa-instagram` +- Ваш четвертий елемент `i` повинен мати клас `fab fa-linkedin-in` +- Ваш п'ятий елемент `i` повинен мати клас `fab fa-youtube` + +# --hints-- + +Ви повинні мати п'ять елементів `i`. + +```js +assert(document.querySelectorAll('i')?.length === 5); +``` + +Кожен елемент `a` повинен мати лише один елемент `i`. + +```js +const aaaaa = [...document.querySelectorAll('.social-icons a')]; +assert(aaaaa?.every(a => a?.children?.length === 1 && a?.children?.[0]?.localName === 'i')); +``` + +Кожен елемент `i` повинен мати атрибут `class`, який містить `fab`. + +```js +const iiiii = [...document.querySelectorAll('i')]; +assert(iiiii?.every(i => i?.classList?.contains('fab'))); +``` + +Перший елемент `i` повинен мати атрибут `class`, який містить `fa-facebook-f`. + +```js +assert(document.querySelectorAll('i')?.[0]?.classList?.contains('fa-facebook-f')); +``` + +Другий елемент `i` повинен мати атрибут `class`, який містить `fa-twitter`. + +```js +assert(document.querySelectorAll('i')?.[1]?.classList?.contains('fa-twitter')); +``` + +Третій елемент `i` повинен мати атрибут `class`, який містить `fa-instagram`. + +```js +assert(document.querySelectorAll('i')?.[2]?.classList?.contains('fa-instagram')); +``` + +Четвертий елемент `i` повинен мати атрибут `class`, який містить `fa-linkedin-in`. + +```js +assert(document.querySelectorAll('i')?.[3]?.classList?.contains('fa-linkedin-in')); +``` + +П’ятий елемент `i` повинен мати атрибут `class`, який містить `fa-youtube`. + +```js +assert(document.querySelectorAll('i')?.[4]?.classList?.contains('fa-youtube')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md new file mode 100644 index 00000000000..3f690e603ca --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md @@ -0,0 +1,129 @@ +--- +id: 61438ec09438696391076d6a +title: Крок 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Під елементом `.heading` створіть новий елемент `section`, що має `class` зі значенням `text`. В цих межах створіть елемент `p`, що має `class` зі значенням `first-paragraph` та такий текст: + +```markup +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. +``` + +# --hints-- + +Ви повинні створити новий елемент `section`. + +```js +assert(document.querySelectorAll('section')?.length === 2); +``` + +Ваш новий елемент `section` повинен йти після елемента `.heading`. + +```js +assert(document.querySelectorAll('section')?.[1]?.previousElementSibling?.className === 'heading'); +``` + +Ваш новий елемент `section` повинен мати `class` зі значенням `text`. + +```js +assert(document.querySelectorAll('section')?.[1]?.className === 'text'); +``` + +Ви повинні створити новий елемент `p` в елементі `.text`. + +```js +assert(document.querySelector('.text')?.querySelectorAll('p')?.length === 1); +``` + +Ваш новий елемент `p` повинен мати `class` зі значенням `first-paragraph`. + +```js +assert(document.querySelector('.text p')?.className === 'first-paragraph'); +``` + +Ваш новий елемент `p` повинен мати наданий текст. + +```js +assert(document.querySelector('.first-paragraph')?.innerText === '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.'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439e33e4fb7967609e0c83.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439e33e4fb7967609e0c83.md new file mode 100644 index 00000000000..b6c9cb80b2e --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439e33e4fb7967609e0c83.md @@ -0,0 +1,148 @@ +--- +id: 61439e33e4fb7967609e0c83 +title: Крок 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Після трьох елементів `p` в своєму елементі `.text` створіть елемент `blockquote`. В цих межах додайте елемент `hr`, елемент `p`, що має `class` зі значенням `quote`, та другий елемент `hr`. + +Надайте елементу `.quote` текст `The entire curriculum should be a series of projects`. + +# --hints-- + +Ви повинні створити новий елемент `blockquote` в елементі `.text`. + +```js +assert.exists(document.querySelector('.text blockquote')); +``` + +Ваш елемент `blockquote` повинен йти після трьох елементів `p`. + +```js +assert(document.querySelector('.text')?.children?.[3]?.localName === 'blockquote'); +``` + +Ваш елемент `blockquote` повинен мати два елементи `hr`. + +```js +assert(document.querySelectorAll('.text blockquote hr')?.length === 2); +``` + +Ваш елемент `blockquote` повинен мати елемент `p`. + +```js +assert.exists(document.querySelector('.text blockquote p')); +``` + +Ваші дочірні елементи `blockquote` повинні бути в правильному порядку. + +```js +const children = document.querySelector('.text blockquote')?.children; +assert(children?.[0]?.localName === 'hr'); +assert(children?.[1]?.localName === 'p'); +assert(children?.[2]?.localName === 'hr'); +``` + +Ваш новий елемент `p` повинен мати `class` зі значенням `quote`. + +```js +assert(document.querySelector('.text blockquote p')?.className === 'quote'); +``` + +Ваш новий елемент `p` повинен мати текст `The entire curriculum should be a series of projects`. + +```js +assert(document.querySelector('.text blockquote p')?.innerText === 'The entire curriculum should be a series of projects'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md new file mode 100644 index 00000000000..421a24128a2 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md @@ -0,0 +1,130 @@ +--- +id: 6143a1a228f7d068ab16a130 +title: Крок 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Під елементом `blockquote` додайте ще один елемент `p` з таким текстом: + +```markup +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. +``` + +# --hints-- + +Ви повинні додати четвертий елемент `p` до свого елемента `.text`. + +```js +assert(document.querySelectorAll('.text p')?.length === 5); +``` + +Ваш новий елемент `p` повинен йти після елемента `blockquote`. + +```js +assert(document.querySelectorAll('.text p')?.[4]?.previousElementSibling?.localName === 'blockquote'); +``` + +Ваш новий елемент `p` повинен мати наданий текст. + +```js +assert(document.querySelectorAll('.text p')?.[4]?.innerText === '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.'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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 +

+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a73279ce6369de4b9bcc.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a73279ce6369de4b9bcc.md new file mode 100644 index 00000000000..b8e2d1b347f --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a73279ce6369de4b9bcc.md @@ -0,0 +1,128 @@ +--- +id: 6143a73279ce6369de4b9bcc +title: Крок 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Створіть п’ятий елемент `p` в кінці свого елемента `.text` та надайте йому такий текст: + +```markup +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". +``` + +# --hints-- + +Ви повинні додати п'ятий елемент `p`. + +```js +assert(document.querySelectorAll('.text p')?.length === 6); +``` + +Ваш новий елемент `p` повинен мати наданий текст. + +```js +assert(document.querySelectorAll('.text p')?.[5]?.innerText === '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".'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md new file mode 100644 index 00000000000..4f7358cdf61 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md @@ -0,0 +1,135 @@ +--- +id: 6143a778bffc206ac6b1dbe3 +title: Крок 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Створіть останній елемент `p` в кінці свого елемента `.text` та надайте йому такий текст: + +```markup +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. +``` + +# --hints-- + +Ви повинні додати шостий елемент `p` до елемента `.text`. + +```js +assert(document.querySelectorAll('.text p')?.length === 7) +``` + +Ваш шостий елемент `p` повинен мати наданий текст. + +```js +assert(document.querySelectorAll('.text p')?.[6]?.innerText === '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.') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+--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". +

+
+--fcc-editable-region-- +
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a83fcc32c26bcfae3efa.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a83fcc32c26bcfae3efa.md new file mode 100644 index 00000000000..2292884bfe7 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a83fcc32c26bcfae3efa.md @@ -0,0 +1,166 @@ +--- +id: 6143a83fcc32c26bcfae3efa +title: Крок 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Під елементом `.text` створіть новий елемент `section` та надайте йому `class` зі значенням `text text-with-images`. В цих межах створіть елемент `article`, що має `class` зі значенням `brief-history` та елемент `aside`, що має `class` зі значенням `image-wrapper`. + +# --hints-- + +Ви повинні створити новий елемент `section`. + +```js +assert(document.querySelectorAll('section')?.length === 3) +``` + +Ваш новий елемент `section` повинен йти після елемента `.text`. + +```js +assert(document.querySelectorAll('section')?.[2]?.previousElementSibling?.className === 'text') +``` + +Ваш новий елемент `section` повинен мати `class` зі значенням `text text-with-images`. + +```js +assert(document.querySelectorAll('section')?.[2]?.className === 'text text-with-images') +``` + +Ваш новий елемент `section` повинен мати елемент `article`. + +```js +assert.exists(document.querySelector('.text-with-images article')); +``` + +Ваш новий елемент `section` повинен мати елемент `aside`. + +```js +assert.exists(document.querySelector('.text-with-images aside')); +``` + +Елемент `article` повинен йти перед елементом `aside`. + +```js +assert(document.querySelector('.text-with-images article')?.nextElementSibling?.localName === 'aside'); +``` + +Ваш елемент `article` повинен мати `class` зі значенням `brief-history`. + +```js +assert(document.querySelector('.text-with-images article')?.className === 'brief-history'); +``` + +Ваш елемент `aside` повинен мати `class` зі значенням `image-wrapper`. + +```js +assert(document.querySelector('.text-with-images aside')?.className === 'image-wrapper'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b97c06c3306d23d5da47.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b97c06c3306d23d5da47.md new file mode 100644 index 00000000000..965ecfdcc5c --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b97c06c3306d23d5da47.md @@ -0,0 +1,174 @@ +--- +id: 6143b97c06c3306d23d5da47 +title: Крок 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +В елементі `article` створіть елемент `h3`, що має `class` зі значенням `list-title` та текст `A Brief History`. Під ним створіть елемент `p` із текстом `Of the Curriculum`. Потім створіть елемент `ul` з класом `lists`. + +# --hints-- + +Ви повинні створити елемент `h3` в елементі `article`. + +```js +assert.exists(document.querySelector('article h3')); +``` + +Ви повинні створити елемент `p` в елементі `article`. + +```js +assert.exists(document.querySelector('article p')); +``` + +Ви повинні створити елемент `ul` в елементі `article`. + +```js +assert.exists(document.querySelector('article ul')); +``` + +Ваші елементи в елементі `article` повинні бути в правильному порядку. + +```js +const children = document.querySelector('article')?.children; +assert(children?.[0]?.localName === 'h3'); +assert(children?.[1]?.localName === 'p'); +assert(children?.[2]?.localName === 'ul'); +``` + +Ваш новий елемент `h3` повинен мати `class` зі значенням `list-title`. + +```js +assert(document.querySelector('article h3')?.className === 'list-title'); +``` + +Ваш новий елемент `h3` повинен мати текст `A Brief History`. + +```js +assert(document.querySelector('article h3')?.innerText === 'A Brief History'); +``` + +Ваш новий елемент `p` повинен мати текст `Of the Curriculum`. + +```js +assert(document.querySelector('article p')?.innerText === 'Of the Curriculum'); +``` + +Ваш новий елемент `ul` повинен мати `class` зі значенням `lists`. + +```js +assert(document.querySelector('article ul')?.className === 'lists'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

+
+
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- + +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b9e1f5035c6e5f2a8231.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b9e1f5035c6e5f2a8231.md new file mode 100644 index 00000000000..ad68f34166b --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b9e1f5035c6e5f2a8231.md @@ -0,0 +1,228 @@ +--- +id: 6143b9e1f5035c6e5f2a8231 +title: Крок 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +В елементі `ul` створіть шість елементів `li`. Додайте елемент `h4`, що має `class` зі значенням `list-subtitle`, та елемент `p` до кожного зі своїх елементів `li`. + +Потім надайте елементам `h4` та `p` наступний текстовий вміст за порядком, причому для кожного `h4` використовуйте те, що знаходиться ліворуч від двокрапки, а для кожного `p` використовуйте те, що знаходиться праворуч: + +- `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.` + +# --hints-- + +Ваш елемент `ul` повинен мати шість елементів `li`. + +```js +assert(document.querySelectorAll('.lists li')?.length === 6); +``` + +Кожен з ваших нових елементів `li` повинен мати елементи `h4` та `p`. + +```js +const lis = [...document.querySelectorAll('.lists li')]; +assert(lis?.every(li => li?.children?.[0]?.localName === 'h4' && li?.children?.[1]?.localName === 'p')); +``` + +Ваш перший `h4` повинен мати текст `V1 - 2014`. + +```js +assert(document.querySelectorAll('.lists li h4')?.[0]?.innerText === 'V1 - 2014'); +``` + +Ваш перший `p` повинен мати текст `We launched freeCodeCamp with a simple list of 15 resources, including Harvard's CS50 and Stanford's Database Class.` + +```js +assert(document.querySelectorAll('.lists li p')?.[0]?.innerText === 'We launched freeCodeCamp with a simple list of 15 resources, including Harvard\'s CS50 and Stanford\'s Database Class.'); +``` + +Ваш другий `h4` повинен мати текст `V2 - 2015`. + +```js +assert(document.querySelectorAll('.lists li h4')?.[1]?.innerText === 'V2 - 2015'); +``` + +Ваш другий `p` повинен мати текст `We added interactive algorithm challenges.` + +```js +assert(document.querySelectorAll('.lists li p')?.[1]?.innerText === 'We added interactive algorithm challenges.'); +``` + +Ваш третій `h4` повинен мати текст `V3 - 2015`. + +```js +assert(document.querySelectorAll('.lists li h4')?.[2]?.innerText === 'V3 - 2015'); +``` + +Ваш третій `p` повинен мати текст `We added our own HTML+CSS challenges (before we'd been relying on General Assembly's Dash course for these).` + +```js +assert(document.querySelectorAll('.lists li p')?.[2]?.innerText === 'We added our own HTML+CSS challenges (before we\'d been relying on General Assembly\'s Dash course for these).'); +``` + +Ваш четвертий `h4` повинен мати текст `V4 - 2016`. + +```js +assert(document.querySelectorAll('.lists li h4')?.[3]?.innerText === 'V4 - 2016'); +``` + +Ваш четвертий `p` повинен мати текст `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`. + +```js +assert(document.querySelectorAll('.lists li p')?.[3]?.innerText === '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.'); +``` + +Ваш п'ятий `h4` повинен мати текст `V5 - 2017`. + +```js +assert(document.querySelectorAll('.lists li h4')?.[4]?.innerText === 'V5 - 2017'); +``` + +Ваш п'ятий `p` повинен мати текст `We added the back end and data visualization challenges.` + +```js +assert(document.querySelectorAll('.lists li p')?.[4]?.innerText === 'We added the back end and data visualization challenges.'); +``` + +Ваш шостий `h4` повинен мати текст `V6 - 2018`. + +```js +assert(document.querySelectorAll('.lists li h4')?.[5]?.innerText === 'V6 - 2018'); +``` + +Ваш шостий `p` повинен мати текст `We launched 6 new certifications to replace our old ones. This was the biggest curriculum improvement to date.` + +```js +assert(document.querySelectorAll('.lists li p')?.[5]?.innerText === 'We launched 6 new certifications to replace our old ones. This was the biggest curriculum improvement to date.'); +``` + +Кожен з ваших шести елементів `h4` повинен мати клас `list-subtitle`. + +```js +const h4s = [...document.querySelectorAll('.lists li h4')]; +assert(h4s?.every(h4 => h4?.classList?.contains('list-subtitle'))); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

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

A Brief History

+

Of the Curriculum

+
    + +
+
+--fcc-editable-region-- + +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md new file mode 100644 index 00000000000..1064632b916 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md @@ -0,0 +1,195 @@ +--- +id: 6143bb50e8e48c6f5ef9d8d5 +title: Крок 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +В елементі `aside` створіть два елементи `img`, елемент `blockquote` та третій елемент `img`. Елементу `blockquote` надайте `class` зі значенням `image-quote`. + +# --hints-- + +Ви повинні створити три елементи `img` в елементі `aside`. + +```js +assert(document.querySelectorAll('aside img')?.length === 3); +``` + +Ви повинні створити елемент `blockquote` в елементі `aside`. + +```js +assert.exists(document.querySelector('aside blockquote')); +``` + +Ваш елемент `blockquote` повинен мати `class` зі значенням `image-quote`. + +```js +assert(document.querySelector('aside blockquote')?.classList?.contains('image-quote')); +``` + +Ваші нові елементи повинні бути в правильному порядку. + +```js +const children = document.querySelector('aside')?.children; +assert(children?.[0]?.localName === 'img'); +assert(children?.[1]?.localName === 'img'); +assert(children?.[2]?.localName === 'blockquote'); +assert(children?.[3]?.localName === 'img'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143c2a363865c715f1a3f72.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143c2a363865c715f1a3f72.md new file mode 100644 index 00000000000..a2ddb3cccd4 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143c2a363865c715f1a3f72.md @@ -0,0 +1,206 @@ +--- +id: 6143c2a363865c715f1a3f72 +title: Крок 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Своєму першому елементу `img` всередині елемента `.image-wrapper` надайте `src` зі значенням `https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png`, `alt` зі значенням `image of the quote machine project`, `class` зі значенням `image-1`, атрибут `loading` зі значенням `lazy`, атрибут `width` зі значенням `600` та атрибут `height` зі значенням `400`. + +# --hints-- + +Ваш перший елемент `img` повинен мати атрибут `src` зі значенням `https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png'); +``` + +Ваш перший елемент `img` повинен мати атрибут `alt` зі значенням `image of the quote machine project`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('alt') === 'image of the quote machine project'); +``` + +Ваш перший елемент `img` повинен мати атрибут `class` зі значенням `image-1`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[0]?.classList?.contains('image-1')); +``` + +Ваш перший елемент `img` повинен мати атрибут `loading` зі значенням `lazy`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('loading') === 'lazy'); +``` + +Ваш перший елемент `img` повинен мати атрибут `width` зі значенням `600`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('width') === '600'); +``` + +Ваш перший елемент `img` повинен мати атрибут `height` зі значенням `400`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('height') === '400'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cd08fe927072ca3a371d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cd08fe927072ca3a371d.md new file mode 100644 index 00000000000..c35cd13ca06 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cd08fe927072ca3a371d.md @@ -0,0 +1,213 @@ +--- +id: 6143cd08fe927072ca3a371d +title: Крок 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Своєму другому елементу `img` всередині елемента `.image-wrapper` надайте `src` зі значенням `https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png`, `alt` зі значенням `image of a calculator project`, атрибут `loading` зі значенням `lazy`, `class` зі значенням `image-2`, атрибут `width` зі значенням `400` та атрибут `height` зі значенням `400`. + +# --hints-- + +Ваш другий елемент `img` повинен мати `src` зі значенням `https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png'); +``` + +Ваш другий елемент `img` повинен мати `alt` зі значенням `image of a calculator project`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('alt') === 'image of a calculator project'); +``` + +Ваш другий елемент `img` повинен мати атрибут `loading` зі значенням `lazy`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('loading') === 'lazy'); +``` + +Ваш другий елемент `img` повинен мати `class` зі значенням `image-2`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[1]?.classList?.contains('image-2')); +``` + +Ваш другий елемент `img` повинен мати `width` зі значенням `400`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('width') === '400'); +``` + +Ваш другий елемент `img` повинен мати `height` зі значенням `400`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('height') === '400'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cdf48b634a747de42104.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cdf48b634a747de42104.md new file mode 100644 index 00000000000..bb7e257d998 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cdf48b634a747de42104.md @@ -0,0 +1,220 @@ +--- +id: 6143cdf48b634a747de42104 +title: Крок 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Своєму третьому елементу `img` всередині елемента `.image-wrapper` надайте `src` зі значенням `https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg`, `alt` зі значенням `four people working on code`, атрибут `loading` зі значенням `lazy`, `class` зі значенням `image-3`, атрибут `width` зі значенням `600` та атрибут `height` зі значенням `400`. + +# --hints-- + +Ваш третій елемент `img` повинен мати `src` зі значенням `https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg'); +``` + +Ваш третій елемент `img` повинен мати `alt` зі значенням `four people working on code`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('alt') === 'four people working on code'); +``` + +Ваш третій елемент `img` повинен мати атрибут `loading` зі значенням `lazy`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('loading') === 'lazy'); +``` + +Ваш третій елемент `img` повинен мати `class` зі значенням `image-3`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[2]?.classList?.contains('image-3')); +``` + +Ваш третій елемент `img` повинен мати атрибут `width` зі значенням `600`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('width') === '600'); +``` + +Ваш третій елемент `img` повинен мати атрибут `height` зі значенням `400`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('height') === '400'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d003ad9e9d76766293ec.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d003ad9e9d76766293ec.md new file mode 100644 index 00000000000..fb31791c890 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d003ad9e9d76766293ec.md @@ -0,0 +1,226 @@ +--- +id: 6143d003ad9e9d76766293ec +title: Крок 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +В елементі `.image-quote` вкладіть елемент `hr`, елемент `p` та другий елемент `hr`. Елементу `p` надайте `class` зі значенням `quote` та текст `The millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals.`. + +# --hints-- + +Ви повинні додати два елементи `hr` до свого елемента `.image-quote`. + +```js +assert(document.querySelectorAll('.image-quote hr')?.length === 2); +``` + +Ви повинні додати елемент `p` до свого елемента `.image-quote`. + +```js +assert(document.querySelectorAll('.image-quote p')?.length === 1); +``` + +Ваші дочірні елементи `.image-quote` повинні бути в правильному порядку. + +```js +const children = document.querySelector('.image-quote')?.children; +assert(children?.[0]?.localName === 'hr'); +assert(children?.[1]?.localName === 'p'); +assert(children?.[2]?.localName === 'hr'); +``` + +Ваш новий елемент `p` повинен мати `class` зі значенням `quote`. + +```js +assert(document.querySelector('.image-quote p')?.classList.contains('quote')); +``` + +Ваш новий елемент `p` повинен мати текст `The millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals.`. + +```js +assert(document.querySelector('.image-quote p')?.innerText === 'The millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals.'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d2842b497779bad947de.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d2842b497779bad947de.md new file mode 100644 index 00000000000..1c216e7805a --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d2842b497779bad947de.md @@ -0,0 +1,217 @@ +--- +id: 6143d2842b497779bad947de +title: Крок 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Щоб запустити свій CSS, нормалізуйте CSS-правила, націливши всі елементи з допомогою `*`, враховуючи псевдоселектори `::before` та `::after`. Встановіть значення властивостей `padding` та `margin` на `0`. + +# --hints-- + +Ви повинні мати селектор `*, ::before, ::after`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')); +``` + +Ваш селектор `*, ::before, ::after` повинен мати властивість `padding` зі значенням `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.padding === '0px'); +``` + +Ваш селектор `*, ::before, ::after` повинен мати властивість `margin` зі значенням `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.margin === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d66a5358db0c80628757.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d66a5358db0c80628757.md new file mode 100644 index 00000000000..018d3858d14 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d66a5358db0c80628757.md @@ -0,0 +1,226 @@ +--- +id: 6144d66a5358db0c80628757 +title: Крок 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Створіть селектор `html` та надайте йому властивість `font-size` зі значенням `62.5%`. Це встановить розмір шрифту за замовчуванням для вашої вебсторінки на 10 пікселів ( в браузері на 16 пікселів). + +Це полегшить вам роботу з одиницями `rem` пізніше, оскільки `2rem` буде 20 пікселів. + +Також встановіть властивість `box-sizing` на `border-box`. + +# --hints-- + +Ви повинні створити селектор `html`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('html')); +``` + +Ваш селектор `html` повинен мати властивість `font-size` зі значенням `62.5%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('html')?.fontSize === '62.5%'); +``` + +Ваш селектор `html` повинен мати властивість `box-sizing` зі значенням `border-box`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d7dbdd3e580da730ff45.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d7dbdd3e580da730ff45.md new file mode 100644 index 00000000000..f3e20df7ec2 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d7dbdd3e580da730ff45.md @@ -0,0 +1,234 @@ +--- +id: 6144d7dbdd3e580da730ff45 +title: Крок 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Створіть селектор `body`. Встановіть властивість `font-family` на `Baskervville`, з резервним шрифтом `serif`. Встановіть властивість `color` на `linen`, а властивість `background-color` на `rgb(20, 30, 40)`. + +# --hints-- + +Ви повинні мати селектор `body`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Ваш селектор `body` повинен мати властивість `font-family` зі значенням `Baskervville`, з резервним шрифтом `serif`. + +```js +const fontFamily = new __helpers.CSSHelp(document).getStyle('body')?.fontFamily; +assert(fontFamily === 'Baskervville, serif' || fontFamily === `"Baskervville", serif`); +``` + +Ваш селектор `body` повинен мати властивість `color` зі значенням `linen`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.color === 'linen'); +``` + +Ваш селектор `body` повинен мати властивість `background-color` зі значенням `rgb(20, 30, 40)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(20, 30, 40)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md new file mode 100644 index 00000000000..867cbb8cfb8 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md @@ -0,0 +1,228 @@ +--- +id: 6144de308591ec10e27d5383 +title: Крок 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Створіть селектор `h1` та встановіть властивість `font-family` на `Anton`, з резервним шрифтом `sans-serif`. + +# --hints-- + +Ви повинні мати селектор `h1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')); +``` + +Ваш селектор `h1` повинен мати властивість `font-family` зі значенням `Anton`, з резервним шрифтом `sans-serif`. + +```js +const fontFamily = new __helpers.CSSHelp(document).getStyle('h1')?.fontFamily; +assert(fontFamily === 'Anton, sans-serif' || fontFamily === `"Anton", sans-serif`); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144e1ba93e435127a7f516d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144e1ba93e435127a7f516d.md new file mode 100644 index 00000000000..f97f37e98df --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144e1ba93e435127a7f516d.md @@ -0,0 +1,232 @@ +--- +id: 6144e1ba93e435127a7f516d +title: Крок 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Створіть селектор `h2, h3, h4, h5, h6`. Надайте йому властивість `font-family` зі значенням `Raleway`, з резервним шрифтом `sans-serif`. + +# --hints-- + +Ви повинні мати селектор `h2, h3, h4, h5, h6`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h2, h3, h4, h5, h6')); +``` + +Ваш селектор `h2, h3, h4, h5, h6` повинен мати властивість `font-family` зі значенням `Raleway`, з резервним шрифтом `sans-serif`. + +```js +const fontFamily = new __helpers.CSSHelp(document).getStyle('h2, h3, h4, h5, h6')?.fontFamily; +assert(fontFamily === 'Raleway, sans-serif' || fontFamily === `"Raleway", sans-serif`); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md new file mode 100644 index 00000000000..c6186cf219d --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md @@ -0,0 +1,241 @@ +--- +id: 6144ee46a9d6e614c598cc05 +title: Крок 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Створіть селектор `a` та надайте йому властивість `text-decoration` зі значенням `none` та властивість `color` зі значенням `linen`. + +# --hints-- + +Ви повинні мати селектор `a`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('a')); +``` + +Ваш селектор `a` повинен мати властивість `text-decoration` зі значенням `none`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('a')?.textDecoration === 'none'); +``` + +Ваш селектор `a` повинен мати властивість `color` зі значенням `linen`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('a')?.color === 'linen'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md new file mode 100644 index 00000000000..3019d9253f1 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md @@ -0,0 +1,250 @@ +--- +id: 6148b07081759c2c691166a9 +title: Крок 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Створіть селектор `.text` та надайте йому властивість `grid-column` зі значенням `2 / 3`. + +# --hints-- + +Ви повинні мати селектор `.text`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text')); +``` + +Ваш селектор `.text` повинен мати властивість `grid-column` зі значенням `2 / 3`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text')?.gridColumn === '2 / 3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +.heading { + grid-column: 2 / 3; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md new file mode 100644 index 00000000000..a4c95c95e49 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md @@ -0,0 +1,250 @@ +--- +id: 6148b30464daf630848c21d4 +title: Крок 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Надайте селектору `.heading` властивість `row-gap` зі значенням `1.5rem`. + +# --hints-- + +Ваш селектор `.heading` повинен мати властивість `row-gap` зі значенням `1.5rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.heading')?.rowGap === '1.5rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +--fcc-editable-region-- +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); +} +--fcc-editable-region-- + +.text { + grid-column: 2 / 3; +} +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md new file mode 100644 index 00000000000..12e5e912f6d --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md @@ -0,0 +1,255 @@ +--- +id: 6148b5623efa8f369f2c3643 +title: Крок 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Надайте селектору `.hero` властивість `position` зі значенням `relative`. + +# --hints-- + +Ваш селектор `.hero` повинен мати властивість `position` зі значенням `relative`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero')?.position === 'relative'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +--fcc-editable-region-- +.hero { + grid-column: 1 / -1; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md new file mode 100644 index 00000000000..25b811e2e45 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md @@ -0,0 +1,280 @@ +--- +id: 6148bd62bbb8c83a5f1fc1b3 +title: Крок 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Створіть селектор `.hero-title` та надайте йому властивість `text-align` зі значенням `center`, властивість `color` зі значенням `orangered` та властивість `font-size` зі значенням `8rem`. + +# --hints-- + +Ви повинні мати селектор `.hero-title`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-title')); +``` + +Ваш селектор `.hero-title` повинен мати властивість `text-align` зі значенням `center`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.textAlign === 'center'); +``` + +Ваш селектор `.hero-title` повинен мати властивість `color` зі значенням `orangered`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.color === 'orangered'); +``` + +Ваш селектор `.hero-title` повинен мати властивість `font-size` зі значенням `8rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.fontSize === '8rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md new file mode 100644 index 00000000000..eceffbfe0e7 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md @@ -0,0 +1,286 @@ +--- +id: 6148be3d605d6b3ca9425d11 +title: Крок 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Підзаголовок також потрібно стилізувати. Створіть селектор `.hero-subtitle` та надайте йому властивість `font-size` зі значенням `2.4rem`, властивість `color` зі значенням `orangered` та властивість `text-align` зі значенням `center`. + +# --hints-- + +Ви повинні мати селектор `.hero-subtitle`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')); +``` + +Ваш селектор `.hero-subtitle` повинен мати властивість `font-size` зі значенням `2.4rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.fontSize === '2.4rem'); +``` + +Ваш селектор `.hero-subtitle` повинен мати властивість `color` зі значенням `orangered`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.color === 'orangered'); +``` + +Ваш селектор `.hero-subtitle` повинен мати властивість `text-align` зі значенням `center`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.textAlign === 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md new file mode 100644 index 00000000000..23a24fc1fd6 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md @@ -0,0 +1,287 @@ +--- +id: 6148be82ca63c63daa8cca49 +title: Крок 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Створіть селектор `.author` та надайте йому властивість `font-size` зі значенням `2rem` та властивість `font-family` зі значенням `Raleway`, з резервним шрифтом `sans-serif`. + +# --hints-- + +Ви повинні мати селектор `.author`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.author')); +``` + +Ваш селектор `.author` повинен мати властивість `font-size` зі значенням `2rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.author')?.fontSize === '2rem'); +``` + +Ваш селектор `.author` повинен мати властивість `font-family` зі значенням `Raleway`, з резервним шрифтом `sans-serif`. + +```js +const fontFamily = new __helpers.CSSHelp(document).getStyle('.author')?.fontFamily; +assert(fontFamily === 'Raleway, sans-serif' || fontFamily === `"Raleway", sans-serif`); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md new file mode 100644 index 00000000000..405381e4610 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md @@ -0,0 +1,289 @@ +--- +id: 6148bfc43df3bc40fe0e6405 +title: Крок 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Створіть селектор `.publish-date` та надайте йому властивість `color` зі значенням `rgba(255, 255, 255, 0.5)`. + +# --hints-- + +Ви повинні мати селектор `.publish-date`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.publish-date')); +``` + +Ваш селектор `.publish-date` повинен мати властивість `color` зі значенням `rgba(255, 255, 255, 0.5)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.publish-date')?.color === 'rgba(255, 255, 255, 0.5)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md new file mode 100644 index 00000000000..d0747593000 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md @@ -0,0 +1,299 @@ +--- +id: 6148c004ffc8434252940dc3 +title: Крок 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Створіть селектор `.social-icons`. Надайте йому властивість `display` зі значенням `grid` та властивість `font-size` зі значенням `3rem`. + +# --hints-- + +Ви повинні мати селектор `.social-icons`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.social-icons')); +``` + +Ваш селектор `.social-icons` повинен мати властивість `display` зі значенням `grid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.display === 'grid'); +``` + +Ваш селектор `.social-icons` повинен мати властивість `font-size` зі значенням `3rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.fontSize === '3rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md new file mode 100644 index 00000000000..6eb68545967 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md @@ -0,0 +1,300 @@ +--- +id: 6148c6aa9981d74af202125e +title: Крок 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Надайте селектору `.text` властивість `font-size` зі значенням `1.8rem` та властивість `letter-spacing` зі значенням `0.6px`. + +# --hints-- + +Ваш селектор `.text` повинен мати властивість `font-size` зі значенням `1.8rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text')?.fontSize === '1.8rem'); +``` + +Ваш селектор `.text` повинен мати властивість `letter-spacing` зі значенням `0.6px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text')?.letterSpacing === '0.6px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +--fcc-editable-region-- +.text { + grid-column: 2 / 3; +} +--fcc-editable-region-- + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md new file mode 100644 index 00000000000..f070c068020 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md @@ -0,0 +1,311 @@ +--- +id: 6148d1f9eb63c252e1f8acc4 +title: Крок 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Щоб надати `hr` колір, потрібно налаштувати властивість `border`. Надайте селектору `hr` властивість `border` зі значенням `1px solid rgba(120, 120, 120, 0.6)`. + +# --hints-- + +Ваш `hr` повинен мати властивість `border` зі значенням `1px solid rgba(120, 120, 120, 0.6)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderWidth, '1px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderStyle, 'solid'); +assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderColor, 'rgba(120, 120, 120, 0.6)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +--fcc-editable-region-- +hr { + margin: 1.5rem 0; +} +--fcc-editable-region-- + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md new file mode 100644 index 00000000000..34cb36466b7 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md @@ -0,0 +1,340 @@ +--- +id: 6148d9825b50a3698aeee644 +title: Крок 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Створіть селектор `.lists` та встановіть властивість `list-style-type` на `none`. Це видалить маркери списку з елементів списку. + +# --hints-- + +Ви повинні мати селектор `.lists`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lists')); +``` + +Ваш селектор `.lists` повинен мати властивість `list-style-type` зі значенням `none`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lists')?.listStyleType === 'none'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md new file mode 100644 index 00000000000..d29922d74b4 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md @@ -0,0 +1,345 @@ +--- +id: 6148e19c3e26436be0155690 +title: Крок 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Створіть правило `.lists li`, щоб націлити елементи списку в елементі `.lists`. Надайте йому властивість `margin-bottom` зі значенням `1.5rem`. + +# --hints-- + +Ви повинні мати селектор `.lists li`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lists li')); +``` + +Ваш селектор `.lists li` повинен мати властивість `margin-bottom` зі значенням `1.5rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lists li')?.marginBottom === '1.5rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md new file mode 100644 index 00000000000..d920cfa57e6 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md @@ -0,0 +1,349 @@ +--- +id: 6148e246146b646cf4255f0c +title: Крок 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Створіть селектор `.list-title, .list-subtitle` та встановіть властивість `color` на `#00beef`. + +# --hints-- + +Ви повинні мати селектор `.list-title, .list-subtitle`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.list-title, .list-subtitle')) +``` + +Ваш селектор `.list-title, .list-subtitle` повинен мати властивість `color` зі значенням `#00beef`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.list-title, .list-subtitle')?.color === 'rgb(0, 190, 239)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md new file mode 100644 index 00000000000..7591a8ea2fc --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md @@ -0,0 +1,355 @@ +--- +id: 6148e2dcdd60306dd77d41cc +title: Крок 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Час стилізувати останню секцію журналу – зображення. + +Зображення обгорнуті елементом `aside` з допомогою класу `image-wrapper`, тому створіть селектор `.image-wrapper`. Встановіть властивість `display` на `grid`. + +# --hints-- + +Ви повинні мати селектор `.image-wrapper`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')); +``` + +Ваш селектор `.image-wrapper` повинен мати властивість `display` зі значенням `grid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.display === 'grid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +.list-title, .list-subtitle { + color: #00beef; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md new file mode 100644 index 00000000000..6701bd24704 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md @@ -0,0 +1,353 @@ +--- +id: 6148e5a204d99e70343a63e4 +title: Крок 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Властивість `gap` – це короткий спосіб встановити значення `column-gap` та `row-gap` одночасно. Якщо задано одне значення, воно встановлене для `column-gap` та `row-gap`. Якщо задано два значення, то для `row-gap` встановлюється перше значення, а для `column-gap` – друге. + +Надайте селектору `.image-wrapper` властивість `gap` зі значенням `2rem`. + +# --hints-- + +Ваш елемент `.image-wrapper` повинен мати властивість `gap` зі значенням `2rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.gap === '2rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +.list-title, .list-subtitle { + color: #00beef; +} + +--fcc-editable-region-- +.image-wrapper { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: repeat(3, min-content); +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e503b110f76d3ac2ff6.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e503b110f76d3ac2ff6.md new file mode 100644 index 00000000000..86b6b9b9978 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e503b110f76d3ac2ff6.md @@ -0,0 +1,256 @@ +--- +id: 614e0e503b110f76d3ac2ff6 +title: Крок 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Ви повинні видалити тимчасовий атрибут `width` перед написанням CSS для свого `.hero-img`. + +# --hints-- + +Ваш `.hero-img` не повинен мати атрибут `width`. + +```js +assert.isNull(document.querySelector('.hero-img')?.getAttribute('width')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+--fcc-editable-region-- + freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

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

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ 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. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md new file mode 100644 index 00000000000..7ce388986cf --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md @@ -0,0 +1,69 @@ +--- +id: 614e0e588f0e8a772a8a81a6 +title: Крок 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Зараз ваше зображення займає багато місця. Щоб краще бачити, над чим ви працюєте, додайте атрибут `width` до елемента `img` зі значенням `400`. + +Коли попрацюєте над CSS, ви видалите його. + +# --hints-- + +Ваш елемент `img` повинен мати атрибут `width` зі значенням `400`. + +```js +assert(document.querySelector('img')?.getAttribute('width') === '400'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +--fcc-editable-region-- +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+
+--fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md new file mode 100644 index 00000000000..50da37f74a8 --- /dev/null +++ b/curriculum/challenges/ukrainian/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(/` після типу. + +```js +assert(code.match(//gi)); +``` + +Ваш елемент `html` повинен мати початковий теґ з атрибутом `lang` зі значенням `en`. + +```js +assert(code.match(//gi)); +``` + +Ваш елемент `html` повинен мати кінцевий теґ. + +```js +assert(code.match(/<\/html\s*>/)); +``` + +Ваша декларація `DOCTYPE` повинна бути на початку HTML. + +```js +assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); +``` + +Ви повинні мати початковий теґ `head`. + +```js +assert(code.match(//i)); +``` + +Ви повинні мати кінцевий теґ `head`. + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +Ви повинні мати початковий теґ `body`. + +```js +assert(code.match(//i)); +``` + +Ви повинні мати кінцевий теґ `body`. + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +Елементи `head` та `body` повинні бути братськими. + +```js +assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); +``` + +Елемент `head` повинен бути в межах елемента `html`. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); +``` + +Елемент `body` повинен бути в межах елемента `html`. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); +``` + +Ваш код повинен мати елемент `title`. + +```js +const title = document.querySelector('title'); +assert.exists(title); +``` + +Ваш проєкт повинен мати титул `Piano`. + +```js +const title = document.querySelector('title'); +assert.equal(title?.text?.trim()?.toLowerCase(), 'piano') +``` + +Пам’ятайте, що вживання великої літери та написання мають значення. + +```js +const title = document.querySelector('title'); +assert.equal(title?.text?.trim(), 'Piano'); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e77aba7ca691f598feb02.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e77aba7ca691f598feb02.md new file mode 100644 index 00000000000..6ea5b561d58 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e77aba7ca691f598feb02.md @@ -0,0 +1,64 @@ +--- +id: 612e77aba7ca691f598feb02 +title: Крок 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Додайте два теґи `meta`: один для оптимізації вашої сторінки для мобільних пристроїв, а інший для визначення прийнятного `charset` для сторінки. + +# --hints-- + +Ви повинні додати два елементи `meta` до своєї сторінки. + +```js +const meta = document.querySelector('meta'); +assert.exists(meta); +``` + +Ви повинні мати два елементи `meta`. + +```js +const meta = document.querySelectorAll('meta'); +assert(meta?.length === 2); +``` + +Один елемент `meta` повинен мати `name` зі значенням `viewport` та `content` зі значенням `width=device-width, initial-scale=1.0`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset')); +assert.exists(target); +``` + +Інший елемент `meta` повинен мати атрибут `charset` зі значенням `UTF-8`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8'); +assert.exists(target); +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + Piano + --fcc-editable-region-- + + --fcc-editable-region-- + + + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e78af05201622d4bab8aa.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e78af05201622d4bab8aa.md new file mode 100644 index 00000000000..77084f9612d --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e78af05201622d4bab8aa.md @@ -0,0 +1,57 @@ +--- +id: 612e78af05201622d4bab8aa +title: Крок 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Час почати працювати над піаніно. Cтворіть елемент `div` в елементі `body`, що має `id` зі значенням `piano`. + +# --hints-- + +Ви повинні створити новий елемент `div`. + +```js +const div = document.querySelector('div'); +assert.exists(div); +``` + +Ваш `div` повинен бути в межах елемента `body`. + +```js +const div = document.querySelector('div'); +assert(div?.parentElement?.localName === 'body'); +``` + +Ваш `div` повинен мати `id` зі значенням `piano`. + +```js +const div = document.querySelector('div'); +assert(div?.getAttribute('id') === 'piano'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + --fcc-editable-region-- + + --fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e7d1c29fb872d6384379c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e7d1c29fb872d6384379c.md new file mode 100644 index 00000000000..0f678d98e00 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e7d1c29fb872d6384379c.md @@ -0,0 +1,60 @@ +--- +id: 612e7d1c29fb872d6384379c +title: Крок 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Вкладіть другий `div` в свій наявний `div` та встановіть `class` на `keys`. + +# --hints-- + +Ви повинні створити другий елемент `div`. + +```js +const divDiv = document.querySelectorAll('div'); +assert(divDiv?.length === 2); +``` + +Ваш новий елемент `div` повинен бути в межах наявного елемента `div`. + +```js +const div = document.querySelector('div'); +assert(div?.children?.length === 1); +assert(div?.children?.[0]?.localName === 'div'); +``` + +Ваш новий елемент `div` повинен мати `class` зі значенням `keys`. + +```js +const div = document.querySelector('div'); +assert(div?.children?.[0]?.className === 'keys'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + +
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e804c54d5e7308d7ebe56.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e804c54d5e7308d7ebe56.md new file mode 100644 index 00000000000..4c17002f691 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e804c54d5e7308d7ebe56.md @@ -0,0 +1,60 @@ +--- +id: 612e804c54d5e7308d7ebe56 +title: Крок 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +В свій елемент `.keys` додайте сім елементів `div`. Надайте їм клас `key`. + +# --hints-- + +Ви повинні створити сім нових елементів `div`. + +```js +const divDivDiv = document.querySelectorAll('div'); +assert(divDivDiv?.length === 9); +``` + +Ваші сім нових елементів `div` повинні бути в межах елемента `.keys`. + +```js +const keys = document.querySelector('.keys'); +assert([...keys?.children].length === 7); +assert([...keys?.children].every(child => child?.tagName === 'DIV')); +``` + +Ваші сім нових елементів `div` повинні мати `class` зі значенням `key`. + +```js +const keys = document.querySelector('.keys'); +assert([...keys?.children].every(child => child?.classList?.contains('key'))); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + --fcc-editable-region-- +
+
+
+ --fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md new file mode 100644 index 00000000000..7c626a5d728 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md @@ -0,0 +1,95 @@ +--- +id: 612e813b3ba67633222cbe54 +title: Крок 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Пам’ятайте, що атрибут `class` може мати декілька значень. Щоб відокремити білі клавіші від чорних, додайте друге значення `class`: `black--key`. Додайте це до другого, третього, п’ятого, шостого та сьомого елементів `.key`. + +# --hints-- + +Ваш другий елемент `.key` також повинен мати `class` зі значенням `black--key`. + +```js +const key = document.querySelectorAll('.key')?.[1]; +assert(key?.className?.includes('black--key')); +``` + +Ваш третій `.key` повинен мати `black--key` в `class`. + +```js +const third = document.querySelectorAll('.key')?.[2]; +assert(third?.classList?.contains('black--key')); +``` + +Ваш п'ятий `.key` повинен мати `black--key` в `class`. + +```js +const fifth = document.querySelectorAll('.key')?.[4]; +assert(fifth?.classList?.contains('black--key')); +``` + +Ваш шостий `.key` повинен мати `black--key` в `class`. + +```js +const sixth = document.querySelectorAll('.key')?.[5]; +assert(sixth?.classList?.contains('black--key')); +``` + +Ваш сьомий `.key` повинен мати `black--key` в `class`. + +```js +const seventh = document.querySelectorAll('.key')?.[6]; +assert(seventh?.classList?.contains('black--key')); +``` + +Ви повинні мати п'ять елементів `.black--key`. + +```js +const blackKeys = document.querySelectorAll('.black--key'); +assert(blackKeys?.length === 5); +``` + +Ви повинні мати сім елементів `.key`. + +```js +const keys = document.querySelectorAll('.key'); +assert(keys?.length === 7); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + --fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md new file mode 100644 index 00000000000..009c02bf78d --- /dev/null +++ b/curriculum/challenges/ukrainian/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` та вкладіть ще два набори в div `.keys`. + +# --hints-- + +Ви повинні мати 21 елемент `.key`. + +```js +const keys = document.querySelectorAll('.key'); +assert(keys?.length === 21); +``` + +Ви повинні мати 15 елементів `.black--key`. + +```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 + + + + + Piano + + + + --fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e83ec2eca1e370f830511.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e83ec2eca1e370f830511.md new file mode 100644 index 00000000000..899110642ed --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e83ec2eca1e370f830511.md @@ -0,0 +1,102 @@ +--- +id: 612e83ec2eca1e370f830511 +title: Крок 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Додайте елемент `link` в межах елемента `head`. Для цього елемента `link` встановіть атрибут `rel` на `stylesheet` та `href` на `./styles.css`. + +# --hints-- + +Ваш код повинен мати елемент `link`. + +```js +assert.match(code, / link')); +``` + +Ваш елемент `link` повинен мати атрибут `rel` зі значенням `stylesheet`. + +```js +const link_element = document.querySelector('link'); +const rel = link_element.getAttribute("rel"); +assert.equal(rel, "stylesheet"); +``` + +Ваш елемент `link` повинен мати атрибут `href` зі значенням `styles.css`. + +```js +const link = document.querySelector('link'); +assert.equal(link.dataset.href, "styles.css"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + --fcc-editable-region-- + + Piano + + --fcc-editable-region-- + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md new file mode 100644 index 00000000000..748b0ac9197 --- /dev/null +++ b/curriculum/challenges/ukrainian/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`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('html')); +``` + +Ваш селектор `html` повинен мати властивість `box-sizing` зі значенням `border-box`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89d254fe5d3df7d6693d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89d254fe5d3df7d6693d.md new file mode 100644 index 00000000000..f9953b50054 --- /dev/null +++ b/curriculum/challenges/ukrainian/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`. + +Селектор `::before` створює псевдоелемент, який є першим дочірнім елементом вибраного елемента, а селектор `::after` створює псевдоелемент, який є останнім дочірнім елементом вибраного елемента. Ці псевдоелементи часто використовують для створення косметичного вмісту, який ви побачите пізніше в цьому проєкті. + +Наразі створіть CSS-селектор, щоб націлити всі елементи з `*` та врахуйте псевдоелементи з `::before` та `::after`. Встановіть властивість `box-sizing` на `inherit`. + +# --hints-- + +Ви повинні мати селектор `*, ::before, ::after`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')); +``` + +Ваш селектор `*, ::before, ::after` повинен мати властивість `box-sizing` зі значенням `inherit`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.boxSizing === 'inherit'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +html { + box-sizing: border-box; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8eebe3a6dc3fcc33a66f.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8eebe3a6dc3fcc33a66f.md new file mode 100644 index 00000000000..6ba75055800 --- /dev/null +++ b/curriculum/challenges/ukrainian/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-- + +Тепер націльте свій елемент `#piano`, використовуючи селектор `id`. Встановіть властивість `background-color` на `#00471b`, властивість `width` на `992px` та властивість `height` на `290px`. + +# --hints-- + +Ви повинні мати селектор `#piano`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#piano')); +``` + +Ваш селектор `#piano` повинен мати властивість `background-color` зі значенням `#00471b`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#piano')?.backgroundColor === 'rgb(0, 71, 27)'); +``` + +Ваш селектор `#piano` повинен мати властивість `width` зі значенням `992px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#piano')?.width === '992px'); +``` + +Ваш селектор `#piano` повинен мати `height` зі значенням `290px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#piano')?.height === '290px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e96fc87fe8e44f69f7ec5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e96fc87fe8e44f69f7ec5.md new file mode 100644 index 00000000000..f33dd2886b1 --- /dev/null +++ b/curriculum/challenges/ukrainian/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` націльте елемент `.keys`, використовуючи селектор `class`. Надайте новому правилу властивості `background-color` зі значенням `#040404`, `width` зі значенням `949px` та `height` зі значенням `180px`. + +# --hints-- + +Ви повинні мати селектор `.keys`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.keys')); +``` + +Ваш селектор `.keys` повинен мати властивість `background-color` зі значенням `#040404`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.keys')?.backgroundColor === 'rgb(4, 4, 4)'); +``` + +Ваш селектор `.keys` повинен мати властивість `width` зі значенням `949px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.keys')?.width === '949px'); +``` + +Ваш селектор `.keys` повинен мати властивість `height` зі значенням `180px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.keys')?.height === '180px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```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/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9a21381a1949327512e6.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9a21381a1949327512e6.md new file mode 100644 index 00000000000..d20906c1a90 --- /dev/null +++ b/curriculum/challenges/ukrainian/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` повинен мати властивість `padding` зі значенням `90px 20px 0 20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#piano')?.padding === '90px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```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/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9d142affc44a453655db.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9d142affc44a453655db.md new file mode 100644 index 00000000000..1e367440666 --- /dev/null +++ b/curriculum/challenges/ukrainian/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-- + +Час стилізувати клавіші. Створіть селектор `class` для елементів `.key`. Встановіть `background-color` на `#ffffff`, `position` на `relative`, `width` на `41px` та `height` на `175px`. + +# --hints-- + +Ви повинні мати селектор `.key`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key')); +``` + +Ваш селектор `.key` повинен мати властивість `background-color` зі значенням `#ffffff`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key')?.backgroundColor === 'rgb(255, 255, 255)'); +``` + +Ваш селектор `.key` повинен мати властивість `position` зі значенням `relative`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key')?.position === 'relative'); +``` + +Ваш селектор `.key` повинен мати властивість `width` зі значенням `41px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key')?.width === '41px'); +``` + +Ваш селектор `.key` повинен мати властивість `height` зі значенням `175px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key')?.height === '175px'); +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```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/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md new file mode 100644 index 00000000000..059acf93aad --- /dev/null +++ b/curriculum/challenges/ukrainian/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` повинен мати властивість `margin` зі значенням `2px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key')?.margin === '2px'); +``` + +Ваш селектор `.key` повинен мати властивість `float` зі значенням `left`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key')?.float === 'left'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```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/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea4c4993aba52ab4aa32e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea4c4993aba52ab4aa32e.md new file mode 100644 index 00000000000..f60bcfe7318 --- /dev/null +++ b/curriculum/challenges/ukrainian/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`. Це націлить елементи з класом `key black--key` та вибере псевдоелемент після цих елементів в HTML. + +В новому селекторі встановіть `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` повинен мати властивість `background-color` зі значенням `#1d1e22`. + +```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 + + + + + Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```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/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea97df5742154772f312e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea97df5742154772f312e.md new file mode 100644 index 00000000000..9c79b917829 --- /dev/null +++ b/curriculum/challenges/ukrainian/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` повинен мати властивість `position` зі значенням `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.position === 'absolute'); +``` + +Ваш селектор `.key.black--key::after` повинен мати властивість `left` зі значенням `-18px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.left === '-18px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```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/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ead8788d28655ef8db056.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ead8788d28655ef8db056.md new file mode 100644 index 00000000000..71f0b71995a --- /dev/null +++ b/curriculum/challenges/ukrainian/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` повинен мати властивість `width` зі значенням `32px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.width === '32px'); +``` + +Ваш `.key.black--key::after` повинен мати властивість `height` зі значенням `100px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.height === '100px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```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/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eaf56b7ba3257fdbfb0db.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eaf56b7ba3257fdbfb0db.md new file mode 100644 index 00000000000..f649671f380 --- /dev/null +++ b/curriculum/challenges/ukrainian/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`. Для `img` надайте `class` зі значенням `logo` та встановіть `src` на `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. Надайте йому `alt` з текстом `freeCodeCamp Logo`. + +# --hints-- + +Ви повинні додати новий елемент `img`. + +```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` повинен мати `src` зі значенням `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'); +``` + +Ваш елемент `img` повинен мати атрибут `alt` зі значенням `freeCodeCamp Logo`. + +```js +assert(document.querySelector('img')?.getAttribute('alt')?.toLowerCase() === 'freecodecamp logo'); +``` + +Пам’ятайте, що вживання великої літери та написання мають значення. + +```js +assert(document.querySelector('img')?.getAttribute('alt') === 'freeCodeCamp Logo'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + + --fcc-editable-region-- +
+
+ --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; +} +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb4893b63c75bb9251ddf.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb4893b63c75bb9251ddf.md new file mode 100644 index 00000000000..10dc78cf125 --- /dev/null +++ b/curriculum/challenges/ukrainian/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` повинен мати властивість `width` зі значенням `200px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.logo')?.width === '200px'); +``` + +Ваш селектор `.logo` повинен мати властивість `position` зі значенням `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.logo')?.position === 'absolute'); +``` + +Ваш селектор `.logo` повинен мати властивість `top` зі значенням `23px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.logo')?.top === '23px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```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/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb75153591b5e3b1ab65e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb75153591b5e3b1ab65e.md new file mode 100644 index 00000000000..4344a894a0e --- /dev/null +++ b/curriculum/challenges/ukrainian/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`, встановлений як точку відліку. Встановіть `position` селектора `#piano` на `relative`. + +# --hints-- + +Ваш селектор `#piano` повинен мати властивість `position` зі значенням `relative`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#piano')?.position === 'relative'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```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/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb7ca8c275d5f89c73333.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb7ca8c275d5f89c73333.md new file mode 100644 index 00000000000..f7c3f58fcc3 --- /dev/null +++ b/curriculum/challenges/ukrainian/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-- + +Щоб згладити гострі краї фортепіано та клавіш, спочатку встановіть `border-radius` `#piano` на `10px`. + +# --hints-- + +Ваш селектор `#piano` повинен мати властивість `border-radius` зі значенням `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#piano')?.borderRadius === '10px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```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/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb934f64a4d6890a45518.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb934f64a4d6890a45518.md new file mode 100644 index 00000000000..6734b8b075c --- /dev/null +++ b/curriculum/challenges/ukrainian/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` повинен мати властивість `border-radius` зі значенням `0 0 3px 3px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.borderRadius === '0px 0px 3px 3px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```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/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebcba99bfa46a15370b11.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebcba99bfa46a15370b11.md new file mode 100644 index 00000000000..75ca01dc989 --- /dev/null +++ b/curriculum/challenges/ukrainian/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-- + +Тепер потрібно зробити його адаптивним. Додайте запит `@media`, що має `max-width` зі значенням `768px`. + +# --hints-- + +Ви повинні додати новий запит `@media`. + +```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 + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```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/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebe7fe6d07e6b76d1cae2.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebe7fe6d07e6b76d1cae2.md new file mode 100644 index 00000000000..502a2d786f2 --- /dev/null +++ b/curriculum/challenges/ukrainian/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-- + +Додайте новий селектор `#piano` в свій запит `@media` та встановіть `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` повинен мати `width` зі значенням `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 + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```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/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec0490ae8626e9adf82e4.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec0490ae8626e9adf82e4.md new file mode 100644 index 00000000000..f0c444302dc --- /dev/null +++ b/curriculum/challenges/ukrainian/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`. Щоб розв'язати цю проблему, встановіть `overflow` на `hidden` в першому селекторі `.keys`. Ця властивість приховає будь-який елемент, який виходить за межі встановленого значення `width` селектора `.keys`. + +# --hints-- + +Ваш початковий селектор `.keys` повинен мати властивість `overflow` зі значенням `hidden`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.keys')?.overflow === 'hidden'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```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/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec19d5268da7074941f84.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec19d5268da7074941f84.md new file mode 100644 index 00000000000..bf9655bc27b --- /dev/null +++ b/curriculum/challenges/ukrainian/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-- + +Додайте інше правило `@media` для застосування, якщо розмір вікна браузера більший за `769px`, але менший за `1199px`. + +# --hints-- + +Ви повинні додати новий запит `@media`. + +```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 + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```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/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec29c84b9a6718b1f5cec.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec29c84b9a6718b1f5cec.md new file mode 100644 index 00000000000..9878869f915 --- /dev/null +++ b/curriculum/challenges/ukrainian/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` встановіть `width` `#piano` на `675px` та `width` `.keys` на `633px`. + +На цьому ваше піаніно готове! + +# --hints-- + +Ваше друге правило `@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` повинен мати `width` зі значенням `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'); +``` + +Ваше друге правило `@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` повинен мати `width` зі значенням `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 + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```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 + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```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; + } +} +```