mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-02-24 11:03:36 -05:00
chore(i18n,learn): processed translations (#47217)
This commit is contained in:
camperbot
@@ -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) =>
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -22,7 +22,7 @@ Segui <a href='https://www.freecodecamp.org/news/get-started-with-mongodb-atlas/
|
||||
|
||||
# --instructions--
|
||||
|
||||
`mongodb@~3.6.0` e `mongoose@~5.4.0` sono stati aggiunti al file `package.json` del tuo progetto. Come prima cosa, richiedi mongoose come `mongoose` in `myApp.js`. Poi, crea un file `.env` e aggiungi una variabile `MONGO_URI` ad esso. Il suo valore dovrebbe essere l'URI del database MongoDB Atlas. Assicurati di racchiudere l'URI tra virgolette singole o doppie, e ricorda che non puoi usare spazi attorno al segno `=` nelle variabili d'ambiente. Ad esempio, `MONGO_URI='VALUE'`.
|
||||
`mongoose@^5.11.15` è stato aggiunto al file `package.json` del tuo progetto. Come prima cosa, richiedi mongoose come `mongoose` in `myApp.js`. Poi, crea un file `.env` e aggiungi una variabile `MONGO_URI` ad esso. Il suo valore dovrebbe essere l'URI del database MongoDB Atlas. Assicurati di racchiudere l'URI tra virgolette singole o doppie, e ricorda che non puoi usare spazi attorno al segno `=` nelle variabili d'ambiente. Ad esempio, `MONGO_URI='VALUE'`.
|
||||
|
||||
**Nota:** Se stai usando Replit, non puoi creare un file `.env`. Utilizza invece la scheda <dfn>SECRETS</dfn> integrata per aggiungere la variabile. <em>Non</em> racchiudere i valori in virgolette quando usi la scheda <em>SECRETS</em>.
|
||||
|
||||
@@ -34,27 +34,7 @@ mongoose.connect(<Your URI>, { 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) => {
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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$/));
|
||||
|
||||
@@ -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 <dfn>inline elements</dfn>, 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--
|
||||
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -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` タグがデフォルトとして使われます。
|
||||
|
||||
|
||||
@@ -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` で使用できるさまざまな値は次のとおりです。
|
||||
|
||||
<ul><li><code>flex-start</code>: フレックスコンテナの先頭にアイテムを揃えます。 行の場合、アイテムはコンテナの上部に揃えられます。 列の場合、アイテムはコンテナの左側に揃えられます。</li><li><code>flex-end</code>: フレックスコンテナの末端にアイテムを揃えます。 行の場合、アイテムはコンテナの下部に揃えられます。 列の場合、アイテムはコンテナの右側に揃えられます。</li><li><code>center</code>: アイテムを中心で揃えます。 行の場合、アイテムを垂直方向に揃えます (アイテムの上下のスペースを均等にします)。 列の場合、アイテムを水平方向に揃えます (アイテムの左右のスペースを均等にします)。</li><li><code>stretch</code>: フレックスコンテナいっぱいを埋めるためにアイテムを拡大させます。 たとえば、行のアイテムはフレックスコンテナの上から下いっぱいを埋めるように引き伸ばされます。 <code>align-items</code> の値が指定されていない場合、これがデフォルト値になります。</li><li><code>baseline</code>: アイテムをベースラインで揃えます。 ベースラインとはテキストについての考え方で、文字が乗っているラインだと考えてください。</li></ul>
|
||||
<ul><li><code>flex-start</code>: フレックスコンテナーの先頭にアイテムを揃えます。 行の場合、アイテムはコンテナーの上部に揃えられます。 列の場合、アイテムはコンテナーの左側に揃えられます。</li><li><code>flex-end</code>: フレックスコンテナーの末端にアイテムを揃えます。 行の場合、アイテムはコンテナーの下部に揃えられます。 列の場合、アイテムはコンテナーの右側に揃えられます。</li><li><code>center</code>: アイテムを中心で揃えます。 行の場合、アイテムを垂直方向に揃えます (アイテムの上下のスペースを均等にします)。 列の場合、アイテムを水平方向に揃えます (アイテムの左右のスペースを均等にします)。</li><li><code>stretch</code>: フレックスコンテナーいっぱいを埋めるためにアイテムを拡大させます。 たとえば、行のアイテムはフレックスコンテナーの上から下いっぱいを埋めるように引き伸ばされます。 <code>align-items</code> の値が指定されていない場合、これがデフォルト値になります。</li><li><code>baseline</code>: アイテムをベースラインで揃えます。 ベースラインとはテキストについての考え方で、文字が乗っているラインだと考えてください。</li></ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -9,15 +9,15 @@ dashedName: align-elements-using-the-justify-content-property
|
||||
|
||||
# --description--
|
||||
|
||||
フレックスコンテナ内のフレックスアイテムがコンテナ内のすべてのスペースを埋めないことがあります。 この場合、フレックスのアイテムをどのように整列・空白の配置を行うかを CSS に指示したいと思うのが当然でしょう。 幸いなことに、`justify-content` プロパティにはこれを実現するためのオプションがいくつかあります。 しかしまず最初に、これらのオプションを検討する前に理解すべき重要な用語がいくつかあります。
|
||||
フレックスコンテナー内のフレックスアイテムがコンテナー内のすべてのスペースを埋めないことがあります。 この場合、フレックスのアイテムをどのように整列・空白の配置を行うかを CSS に指示したいと思うのが当然でしょう。 幸いなことに、`justify-content` プロパティにはこれを実現するためのオプションがいくつかあります。 しかしまず最初に、これらのオプションを検討する前に理解すべき重要な用語がいくつかあります。
|
||||
|
||||
<a href="https://www.freecodecamp.org/news/flexbox-the-ultimate-css-flex-cheatsheet/" target="_blank" rel="noopener noreferrer nofollow">フレックスボックスのプロパティについて詳しくはこちらを参照してください。</a>
|
||||
|
||||
フレックスコンテナを行 (row) として設定すると、フレックスアイテムが左から右に並んで配置されたことを思い出してください。 列 (column) として設定されたフレックスコンテナは、フレックスアイテムを上から下へ垂直に積み重ねて配置します。 それぞれ、フレックスアイテムが配置される方向を**主軸** (main axis) と呼びます。 行の場合、これは各アイテムを横切る水平方向の線です。 そして列の場合、主軸はアイテムを貫く垂直方向の線です。
|
||||
フレックスコンテナーを行 (row) として設定すると、フレックスアイテムが左から右に並んで配置されたことを思い出してください。 列 (column) として設定されたフレックスコンテナーは、フレックスアイテムを上から下へ垂直に積み重ねて配置します。 それぞれ、フレックスアイテムが配置される方向を**主軸** (main axis) と呼びます。 行の場合、これは各アイテムを横切る水平方向の線です。 そして列の場合、主軸はアイテムを貫く垂直方向の線です。
|
||||
|
||||
主軸の線に沿ってフレックスアイテムを配置する方法には、いくつかのオプションが存在します。 最もよく使用されるのは `justify-content: center;` で、フレックスコンテナ内のすべてのフレックスアイテムを中央に揃えます。 その他のオプションは以下のとおりです:
|
||||
主軸の線に沿ってフレックスアイテムを配置する方法には、いくつかのオプションが存在します。 最もよく使用されるのは `justify-content: center;` で、フレックスコンテナー内のすべてのフレックスアイテムを中央に揃えます。 その他のオプションは以下のとおりです:
|
||||
|
||||
<ul><li><code>flex-start</code>: フレックスコンテナの先頭にアイテムを揃えます。 行の場合、アイテムはコンテナの左側に揃えられます。 列の場合、アイテムはコンテナの上部に揃えられます。 <code>justify-content</code> が指定されていない場合、これがデフォルトの配置になります。</li><li><code>flex-end</code>: フレックスコンテナの末端にアイテムを揃えます。 行の場合、アイテムはコンテナの右側に揃えられます。 列の場合、アイテムはコンテナの下部に揃えられます。</li><li><code>space-between</code>: アイテムを主軸方向の中央で揃え、各アイテムの間にスペースを挿入します。 最初と最後のアイテムはフレックスコンテナの端に配置されます。 例えば行では、最初のアイテムはコンテナの左端、最後のアイテムはコンテナの右側に接するように配置され、残りのスペースは他のアイテムで均等に分配されます。</li><li><code>space-around</code>: <code>space-between</code> と似ていますが、最初と最後のアイテムはコンテナの端に付かず、全てのアイテムの周りにスペースが分配されます。フレックスコンテナの両端には半分のスペースが配置されます。</li><li><code>space-evenly</code>: フレックスコンテナの両端に完全なスペースを持ち、各フレックスアイテムで均等にスペースを分配します。</li></ul>
|
||||
<ul><li><code>flex-start</code>: フレックスコンテナーの先頭にアイテムを揃えます。 行の場合、アイテムはコンテナーの左側に揃えられます。 列の場合、アイテムはコンテナーの上部に揃えられます。 <code>justify-content</code> が指定されていない場合、これがデフォルトの配置になります。</li><li><code>flex-end</code>: フレックスコンテナーの末端にアイテムを揃えます。 行の場合、アイテムはコンテナーの右側に揃えられます。 列の場合、アイテムはコンテナーの下部に揃えられます。</li><li><code>space-between</code>: アイテムを主軸方向の中央で揃え、各アイテムの間にスペースを挿入します。 最初と最後のアイテムはフレックスコンテナーの端に配置されます。 例えば行では、最初のアイテムはコンテナーの左端、最後のアイテムはコンテナーの右側に接するように配置され、残りのスペースは他のアイテムで均等に分配されます。</li><li><code>space-around</code>: <code>space-between</code> と似ていますが、最初と最後のアイテムはコンテナーの端に付かず、全てのアイテムの周りにスペースが分配されます。フレックスコンテナーの両端には半分のスペースが配置されます。</li><li><code>space-evenly</code>: フレックスコンテナーの両端に完全なスペースを持ち、各フレックスアイテムで均等にスペースを分配します。</li></ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -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--
|
||||
|
||||
|
||||
@@ -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` があります。
|
||||
|
||||
|
||||
@@ -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` の値を持つアイテムがもう一方に比べて三倍拡大します。
|
||||
|
||||
|
||||
@@ -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--
|
||||
|
||||
|
||||
@@ -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--
|
||||
|
||||
|
||||
@@ -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 には折り返す方向のオプションもあります:
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: use-the-order-property-to-rearrange-items
|
||||
|
||||
# --description--
|
||||
|
||||
`order` プロパティは、フレックスアイテムをどのような順序でフレックスコンテナ内に表示するかを CSS に指示するために使用されます。 デフォルトでは、アイテムは HTML ソースコードの記述順と同じ順序で表示されます。 プロパティは数値を値として取ることができ、負の数値も使用できます。
|
||||
`order` プロパティは、フレックスアイテムをどのような順序でフレックスコンテナー内に表示するかを CSS に指示するために使用されます。 デフォルトでは、アイテムは HTML ソースコードの記述順と同じ順序で表示されます。 プロパティは数値を値として取ることができ、負の数値も使用できます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -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--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: align-all-items-horizontally-using-justify-items
|
||||
|
||||
# --description--
|
||||
|
||||
CSS グリッドの全てのアイテムを同じ配置にしたい場合があります。 以前に学んだプロパティを使用して個別に整列させることもできますし、グリッドコンテナに `justify-items` を使用することで、一括で水平方向に揃えることもできます。 このプロパティは、前の 2 つのチャレンジで学んだものと同じ値を全て利用することができます。違いはグリッド内の**全ての**項目を目的の位置に移動させることです。
|
||||
CSS グリッドの全てのアイテムを同じ配置にしたい場合があります。 以前に学んだプロパティを使用して個別に整列させることもできますし、グリッドコンテナーに `justify-items` を使用することで、一括で水平方向に揃えることもできます。 このプロパティは、前の 2 つのチャレンジで学んだものと同じ値を全て利用することができます。違いはグリッド内の**全ての**項目を目的の位置に移動させることです。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: align-all-items-vertically-using-align-items
|
||||
|
||||
# --description--
|
||||
|
||||
グリッドコンテナに `align-items` プロパティを使用すると、グリッド内のすべてのアイテムが垂直方向に整列します。
|
||||
グリッドコンテナーに `align-items` プロパティを使用すると、グリッド内のすべてのアイテムが垂直方向に整列します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -9,13 +9,13 @@ dashedName: create-flexible-layouts-using-auto-fill
|
||||
|
||||
# --description--
|
||||
|
||||
repeat 関数には <dfn>auto-fill</dfn> というオプションがあります。 これにより、希望するサイズの行または列を、コンテナのサイズに応じて可能な限り多く自動的に挿入できます。 以下のように `auto-fill` と `minmax` を組み合わせて柔軟なレイアウトが作成できます:
|
||||
repeat 関数には <dfn>auto-fill</dfn> というオプションがあります。 これにより、希望するサイズの行または列を、コンテナーのサイズに応じて可能な限り多く自動的に挿入できます。 以下のように `auto-fill` と `minmax` を組み合わせて柔軟なレイアウトが作成できます:
|
||||
|
||||
```css
|
||||
repeat(auto-fill, minmax(60px, 1fr));
|
||||
```
|
||||
|
||||
コンテナのサイズが変更されると、この設定では 60px の列が挿入され続け、次の列を挿入できるようになるまで引き伸ばし続けます。 **注:** コンテナがすべてのアイテムを 1 行に収められない場合、アイテムは新しい行に移動します。
|
||||
コンテナーのサイズが変更されると、この設定では 60px の列が挿入され続け、次の列を挿入できるようになるまで引き伸ばし続けます。 **注:** コンテナーがすべてのアイテムを 1 行に収められない場合、アイテムは新しい行に移動します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -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--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: create-your-first-css-grid
|
||||
|
||||
# --description--
|
||||
|
||||
`display` プロパティを `grid` に設定することで、任意の HTML 要素をグリッドコンテナに変換します。 これにより、CSS グリッドに関連する他のすべてのプロパティを使用することができます。
|
||||
`display` プロパティを `grid` に設定することで、任意の HTML 要素をグリッドコンテナーに変換します。 これにより、CSS グリッドに関連する他のすべてのプロパティを使用することができます。
|
||||
|
||||
**注:** CSS グリッドでは、親要素を <dfn>container</dfn>、子要素を <dfn>items</dfn> と呼びます。
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ dashedName: divide-the-grid-into-an-area-template
|
||||
|
||||
# --description--
|
||||
|
||||
グリッドのセルを<dfn>エリア (area)</dfn> にまとめてグループ化し、そのエリアにカスタム名を付けることができます。 次のようにコンテナで `grid-template-areas` を使用してください:
|
||||
グリッドのセルを<dfn>エリア (area)</dfn> にまとめてグループ化し、そのエリアにカスタム名を付けることができます。 次のようにコンテナーで `grid-template-areas` を使用してください:
|
||||
|
||||
```css
|
||||
grid-template-areas:
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: place-items-in-grid-areas-using-the-grid-area-property
|
||||
|
||||
# --description--
|
||||
|
||||
前回のチャレンジで示したように、グリッドコンテナ用のエリアテンプレートを作成した後、名前を参照してカスタムエリアにアイテムを配置することができます。 これを行うためには、アイテムの `grid-area` プロパティを使用します。
|
||||
前回のチャレンジで示したように、グリッドコンテナー用のエリアテンプレートを作成した後、名前を参照してカスタムエリアにアイテムを配置することができます。 これを行うためには、アイテムの `grid-area` プロパティを使用します。
|
||||
|
||||
```css
|
||||
.item1 {
|
||||
|
||||
@@ -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--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: use-grid-column-to-control-spacing
|
||||
|
||||
# --description--
|
||||
|
||||
ここまで説明したすべてのプロパティはグリッドコンテナ用です。 `grid-column` プロパティは、グリッドアイテム自身に使用する初めてのプロパティです。
|
||||
ここまで説明したすべてのプロパティはグリッドコンテナー用です。 `grid-column` プロパティは、グリッドアイテム自身に使用する初めてのプロパティです。
|
||||
|
||||
グリッドを作成する仮想の水平線と垂直線は<dfn>グリッド線 (lines)</dfn> と呼ばれます。 これらの線には順番が付けられており、グリッドの左上角の 1 から始まり、列は右に、行は下に向かって数えます。
|
||||
|
||||
|
||||
@@ -17,11 +17,11 @@ img {
|
||||
}
|
||||
```
|
||||
|
||||
`max-width` を `100%` にすることで画像が決してそれが入っているコンテナより広がらないようにし、`height` を `auto` にすることで画像が元のアスペクト比を保つようにします。
|
||||
`max-width` を `100%` にすることで画像が決してそれが入っているコンテナーより広がらないようにし、`height` を `auto` にすることで画像が元のアスペクト比を保つようにします。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`responsive-img` クラスにスタイルルールを追加し、これをレスポンシブにします。 コンテナ (この場合はプレビューウィンドウ) の幅より広がらないようにし、かつ元のアスペクト比を維持する必要があります。 コードを追加したら、画像の動作を確認するためにプレビューのサイズを変更してみましょう。
|
||||
`responsive-img` クラスにスタイルルールを追加し、これをレスポンシブにします。 コンテナー (この場合はプレビューウィンドウ) の幅より広がらないようにし、かつ元のアスペクト比を維持する必要があります。 コードを追加したら、画像の動作を確認するためにプレビューのサイズを変更してみましょう。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: make-typography-responsive
|
||||
|
||||
# --description--
|
||||
|
||||
テキストサイズとして `em` や `px` を使用する代わりに、ビューポート単位を使用してレスポンシブなタイポグラフィを作成できます。 ビューポート単位は、パーセンテージと同様に相対単位ですが、これらは異なる項目を基準にします。 ビューポートの単位はデバイスのビューポート寸法 (幅または高さ) からの相対値ですが、パーセンテージは親コンテナ要素のサイズからの相対値です。
|
||||
テキストサイズとして `em` や `px` を使用する代わりに、ビューポート単位を使用してレスポンシブなタイポグラフィを作成できます。 ビューポート単位は、パーセンテージと同様に相対単位ですが、これらは異なる項目を基準にします。 ビューポートの単位はデバイスのビューポート寸法 (幅または高さ) からの相対値ですが、パーセンテージは親コンテナー要素のサイズからの相対値です。
|
||||
|
||||
4 つの異なるビューポートの単位は次のとおりです:
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9acde08712
|
||||
title: Bootstrap の fluid コンテナでレスポンシブデザインを使用する
|
||||
title: Bootstrap の fluid コンテナーでレスポンシブデザインを使用する
|
||||
challengeType: 0
|
||||
forumTopicId: 18362
|
||||
dashedName: use-responsive-design-with-bootstrap-fluid-containers
|
||||
|
||||
@@ -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"` を持つ要素を表示できます。
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ dashedName: use-dynamic-scales
|
||||
|
||||
D3 の `min()` メソッドと `max()` メソッドは、スケールを設定する際に便利です。
|
||||
|
||||
複雑なデータセットが与えられた場合、優先事項の一つは、可視化されたものが SVG コンテナの幅と高さに合うようにスケールを設定することです。 すべてのデータがウェブページに表示されるように、SVG キャンバス内にデータをプロットしましょう。
|
||||
複雑なデータセットが与えられた場合、優先事項の一つは、可視化されたものが SVG コンテナーの幅と高さに合うようにスケールを設定することです。 すべてのデータがウェブページに表示されるように、SVG キャンバス内にデータをプロットしましょう。
|
||||
|
||||
下の例は、散布図データの x 軸スケールを設定します。 `domain()` メソッドは、プロットされる生データ値に関する情報をスケールに渡します。 `range()` メソッドは、ウェブページ上で可視化に使用される実際のスペースに関する情報をスケールに提供します。
|
||||
|
||||
|
||||
@@ -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 つネストしてください。
|
||||
|
||||
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Rothko Painting</title>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png">
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,43 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6996e
|
||||
title: ステップ 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
マージン (margin) は箱の外側の領域で、他の箱、つまり他の要素との間隔を制御するために使えます。
|
||||
|
||||
右の図では下にある要素の上部マージンが大きく設定されているため、ページの下の方へ押し下げられています。
|
||||
|
||||
CSS ボックスモデルが理解できたところで、ロスコ風の絵に取り掛かりましょう。
|
||||
|
||||
`<img>` 要素を削除してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
コード内に `img` 要素が無いようにしてください。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img') === null);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Rothko Painting</title>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png">
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
</a>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
--fcc-editable-region--
|
||||
<article class="brief-history">
|
||||
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
<aside class="image-wrapper"></aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
--fcc-editable-region--
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
|
||||
</ul>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
<aside class="image-wrapper"></aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying
|
||||
on General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This
|
||||
was the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
<aside class="image-wrapper">
|
||||
|
||||
</aside>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying
|
||||
on General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This
|
||||
was the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
<aside class="image-wrapper">
|
||||
<img />
|
||||
<img />
|
||||
<blockquote class="image-quote"></blockquote>
|
||||
<img />
|
||||
</aside>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying
|
||||
on General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This
|
||||
was the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img />
|
||||
<blockquote class="image-quote"></blockquote>
|
||||
<img />
|
||||
</aside>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying
|
||||
on General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This
|
||||
was the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<blockquote class="image-quote"></blockquote>
|
||||
--fcc-editable-region--
|
||||
<img />
|
||||
--fcc-editable-region--
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying
|
||||
on General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This
|
||||
was the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
--fcc-editable-region--
|
||||
<blockquote class="image-quote">
|
||||
|
||||
</blockquote>
|
||||
--fcc-editable-region--
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying
|
||||
on General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This
|
||||
was the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<blockquote class="image-quote">
|
||||
<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.
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying
|
||||
on General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This
|
||||
was the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<blockquote class="image-quote">
|
||||
<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.
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*, ::before, ::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying
|
||||
on General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This
|
||||
was the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<blockquote class="image-quote">
|
||||
<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.
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
*, ::before, ::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying
|
||||
on General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This
|
||||
was the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<blockquote class="image-quote">
|
||||
<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.
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying
|
||||
on General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This
|
||||
was the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<blockquote class="image-quote">
|
||||
<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.
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying
|
||||
on General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This
|
||||
was the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<blockquote class="image-quote">
|
||||
<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.
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying
|
||||
on General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This
|
||||
was the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<blockquote class="image-quote">
|
||||
<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.
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying on
|
||||
General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This was
|
||||
the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<blockquote class="image-quote">
|
||||
<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.
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying on
|
||||
General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This was
|
||||
the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<blockquote class="image-quote">
|
||||
<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.
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying on
|
||||
General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This was
|
||||
the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<blockquote class="image-quote">
|
||||
<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.
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying on
|
||||
General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This was
|
||||
the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<blockquote class="image-quote">
|
||||
<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.
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying on
|
||||
General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This was
|
||||
the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<blockquote class="image-quote">
|
||||
<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.
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying on
|
||||
General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This was
|
||||
the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<blockquote class="image-quote">
|
||||
<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.
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying on
|
||||
General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This was
|
||||
the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<blockquote class="image-quote">
|
||||
<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.
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying on
|
||||
General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This was
|
||||
the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<blockquote class="image-quote">
|
||||
<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.
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying on
|
||||
General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This was
|
||||
the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<blockquote class="image-quote">
|
||||
<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.
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying on
|
||||
General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This was
|
||||
the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<blockquote class="image-quote">
|
||||
<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.
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying on
|
||||
General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This was
|
||||
the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<blockquote class="image-quote">
|
||||
<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.
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying on
|
||||
General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This was
|
||||
the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<blockquote class="image-quote">
|
||||
<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.
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying on
|
||||
General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This was
|
||||
the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<blockquote class="image-quote">
|
||||
<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.
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying on
|
||||
General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This was
|
||||
the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<blockquote class="image-quote">
|
||||
<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.
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
--fcc-editable-region--
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
width="400"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
--fcc-editable-region--
|
||||
</header>
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="https://www.facebook.com/freecodecamp/">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/freecodecamp/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://instagram.com/freecodecamp">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/school/free-code-camp/">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/freecodecamp">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text">
|
||||
<p class="first-paragraph">
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<p>
|
||||
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.)
|
||||
</p>
|
||||
<blockquote>
|
||||
<hr />
|
||||
<p class="quote">
|
||||
The entire curriculum should be a series of projects
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="text text-with-images">
|
||||
<article class="brief-history">
|
||||
<h3 class="list-title">A Brief History</h3>
|
||||
<p>Of the Curriculum</p>
|
||||
<ul class="lists">
|
||||
<li>
|
||||
<h4 class="list-subtitle">V1 - 2014</h4>
|
||||
<p>
|
||||
We launched freeCodeCamp with a simple list of 15 resources,
|
||||
including Harvard's CS50 and Stanford's Database Class.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V2 - 2015</h4>
|
||||
<p>We added interactive algorithm challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V3 - 2015</h4>
|
||||
<p>
|
||||
We added our own HTML+CSS challenges (before we'd been relying on
|
||||
General Assembly's Dash course for these).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V4 - 2016</h4>
|
||||
<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.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V5 - 2017</h4>
|
||||
<p>We added the back end and data visualization challenges.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4 class="list-subtitle">V6 - 2018</h4>
|
||||
<p>
|
||||
We launched 6 new certifications to replace our old ones. This was
|
||||
the biggest curriculum improvement to date.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside class="image-wrapper">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
|
||||
alt="image of the quote machine project"
|
||||
loading="lazy"
|
||||
class="image-1"
|
||||
width="600"
|
||||
height="400"
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<blockquote class="image-quote">
|
||||
<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.
|
||||
</p>
|
||||
<hr />
|
||||
</blockquote>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
<section class="heading">
|
||||
<header class="hero">
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
|
||||
alt="freecodecamp logo"
|
||||
loading="lazy"
|
||||
class="hero-img"
|
||||
/>
|
||||
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
|
||||
<p class="hero-subtitle">
|
||||
Our efforts to restructure our curriculum with a more project-based
|
||||
focus
|
||||
</p>
|
||||
</header>
|
||||
</section>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -0,0 +1,131 @@
|
||||
---
|
||||
id: 612e6afc009b450a437940a1
|
||||
title: Крок 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Почніть із базової структури HTML. Додайте декларацію `DOCTYPE` та елементи `html`, `head`, `body` та `title`. Встановіть `title` на `Piano`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш код повинен містити посилання `DOCTYPE`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE/gi));
|
||||
```
|
||||
|
||||
Ви повинні додати пробіл після посилання `DOCTYPE`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+/gi));
|
||||
```
|
||||
|
||||
Ви повинні визначити тип документа як `html`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html/gi));
|
||||
```
|
||||
|
||||
Ви повинні закрити декларацію `DOCTYPE` з допомогою `>` після типу.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
|
||||
```
|
||||
|
||||
Ваш елемент `html` повинен мати початковий теґ з атрибутом `lang` зі значенням `en`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
|
||||
```
|
||||
|
||||
Ваш елемент `html` повинен мати кінцевий теґ.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/html\s*>/));
|
||||
```
|
||||
|
||||
Ваша декларація `DOCTYPE` повинна бути на початку HTML.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
|
||||
```
|
||||
|
||||
Ви повинні мати початковий теґ `head`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>/i));
|
||||
```
|
||||
|
||||
Ви повинні мати кінцевий теґ `head`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head\s*>/i));
|
||||
```
|
||||
|
||||
Ви повинні мати початковий теґ `body`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<body\s*>/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
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Piano</title>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div id="piano">
|
||||
<div class="keys"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key"></div>
|
||||
</div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -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/)
|
||||
```
|
||||
|
||||
Ви не повинні змінювати наявні теґи `head`. Переконайтеся, що не видалили кінцевий теґ.
|
||||
|
||||
```js
|
||||
const heads = document.querySelectorAll('head');
|
||||
assert.equal(heads?.length, 1);
|
||||
```
|
||||
|
||||
Ви повинні мати один самозакривний елемент `link`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('link').length === 1);
|
||||
```
|
||||
|
||||
Ваш елемент `link` повинен бути в межах елемента `head`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('head > 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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
--fcc-editable-region--
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
#piano {
|
||||
background-color: #00471b;
|
||||
width: 992px;
|
||||
height: 290px;
|
||||
margin: 80px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#piano {
|
||||
background-color: #00471b;
|
||||
width: 992px;
|
||||
height: 290px;
|
||||
margin: 80px auto;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.keys {
|
||||
background-color: #040404;
|
||||
width: 949px;
|
||||
height: 180px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
#piano {
|
||||
background-color: #00471b;
|
||||
width: 992px;
|
||||
height: 290px;
|
||||
margin: 80px auto;
|
||||
padding: 90px 20px 0 20px;
|
||||
}
|
||||
|
||||
.keys {
|
||||
background-color: #040404;
|
||||
width: 949px;
|
||||
height: 180px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
#piano {
|
||||
background-color: #00471b;
|
||||
width: 992px;
|
||||
height: 290px;
|
||||
margin: 80px auto;
|
||||
padding: 90px 20px 0 20px;
|
||||
}
|
||||
|
||||
.keys {
|
||||
background-color: #040404;
|
||||
width: 949px;
|
||||
height: 180px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.key {
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
width: 41px;
|
||||
height: 175px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
#piano {
|
||||
background-color: #00471b;
|
||||
width: 992px;
|
||||
height: 290px;
|
||||
margin: 80px auto;
|
||||
padding: 90px 20px 0 20px;
|
||||
}
|
||||
|
||||
.keys {
|
||||
background-color: #040404;
|
||||
width: 949px;
|
||||
height: 180px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.key {
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
width: 41px;
|
||||
height: 175px;
|
||||
margin: 2px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Piano</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="piano">
|
||||
<div class="keys">
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
<div class="key black--key"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
#piano {
|
||||
background-color: #00471b;
|
||||
width: 992px;
|
||||
height: 290px;
|
||||
margin: 80px auto;
|
||||
padding: 90px 20px 0 20px;
|
||||
}
|
||||
|
||||
.keys {
|
||||
background-color: #040404;
|
||||
width: 949px;
|
||||
height: 180px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.key {
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
width: 41px;
|
||||
height: 175px;
|
||||
margin: 2px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.key.black--key::after {
|
||||
background-color: #1d1e22;
|
||||
content: "";
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user