feat: css magazine (#43507)
* feat: initial infrastructure * feat: html steps done * feat: through step 50 * feat: complete steps * feat: write tests * chore: apply gikf's review suggestions Co-authored-by: Krzysztof <60067306+gikf@users.noreply.github.com> * chore: use correct alt text Co-authored-by: Krzysztof <60067306+gikf@users.noreply.github.com> * fix: image size Co-authored-by: Krzysztof <60067306+gikf@users.noreply.github.com> * feat: add temporary width * chore: apply sem's review suggestions Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> * chore: missed one Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> * chore: apply kris' review suggestions Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * chore: no text walls Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * chore: walls of text * chore: remaining review suggestions * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: linting index.md * chore: lang tags * feat: clarify noreferrer * feat: clarify lazy loading * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: note about justify * fix: split step 7 * fix: hero title * chore: parts are secretly steps * chore: apply tom's review suggestions Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * chore: missed one Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> Co-authored-by: Krzysztof <60067306+gikf@users.noreply.github.com> Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
This commit is contained in:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
5ffdaf7606
commit
cb5244be73
@ -96,7 +96,8 @@
|
||||
]
|
||||
},
|
||||
"css-piano": { "title": "CSS Piano", "intro": ["", ""] },
|
||||
"css-photo-gallery": { "title": "CSS Photo Gallery", "intro": ["", ""] }
|
||||
"css-photo-gallery": { "title": "CSS Photo Gallery", "intro": ["", ""] },
|
||||
"css-grid-magazine": { "title": "CSS Grid Magazine", "intro": ["", ""] }
|
||||
}
|
||||
},
|
||||
"javascript-algorithms-and-data-structures": {
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Introduction to the CSS Grid Magazine
|
||||
block: css-grid-magazine
|
||||
superBlock: Responsive Web Design
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Introduction to the CSS Grid Magazine
|
||||
|
||||
This is a test for the new project-based curriculum.
|
||||
@ -79,5 +79,6 @@
|
||||
"number-guessing-game": "Relational Databases",
|
||||
"accessibility-quiz": "HTML-CSS",
|
||||
"registration-form": "HTML-CSS",
|
||||
"css-photo-gallery": "HTML-CSS"
|
||||
"css-photo-gallery": "HTML-CSS",
|
||||
"css-grid-magazine": "HTML-CSS"
|
||||
}
|
||||
|
||||
334
curriculum/challenges/_meta/css-grid-magazine/meta.json
Normal file
334
curriculum/challenges/_meta/css-grid-magazine/meta.json
Normal file
@ -0,0 +1,334 @@
|
||||
{
|
||||
"name": "CSS Grid Magazine",
|
||||
"isUpcomingChange": true,
|
||||
"dashedName": "css-grid-magazine",
|
||||
"order": 16,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"superOrder": 1,
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"61437d575fb98f57fa8f7f36",
|
||||
"Step 1"
|
||||
],
|
||||
[
|
||||
"614385513d91ae5c251c2052",
|
||||
"Step 2"
|
||||
],
|
||||
[
|
||||
"6143862a5e54455d262c212e",
|
||||
"Step 3"
|
||||
],
|
||||
[
|
||||
"6143869bb45bd85e3b1926aa",
|
||||
"Step 4"
|
||||
],
|
||||
[
|
||||
"6165d3b702a5d92ad970b30c",
|
||||
"Step 5"
|
||||
],
|
||||
[
|
||||
"614e0e588f0e8a772a8a81a6",
|
||||
"Step 6"
|
||||
],
|
||||
[
|
||||
"614387cbefeeba5f3654a291",
|
||||
"Step 7"
|
||||
],
|
||||
[
|
||||
"6169cd8a558aa8434e0ad7f6",
|
||||
"Step 8"
|
||||
],
|
||||
[
|
||||
"614389f601bb4f611db98563",
|
||||
"Step 9"
|
||||
],
|
||||
[
|
||||
"61438b5b66d76a6264430f2a",
|
||||
"Step 10"
|
||||
],
|
||||
[
|
||||
"61438ec09438696391076d6a",
|
||||
"Step 11"
|
||||
],
|
||||
[
|
||||
"61439dc084fa5f659cf75d7c",
|
||||
"Step 12"
|
||||
],
|
||||
[
|
||||
"61439dfc811e12666b04be6f",
|
||||
"Step 13"
|
||||
],
|
||||
[
|
||||
"61439e33e4fb7967609e0c83",
|
||||
"Step 14"
|
||||
],
|
||||
[
|
||||
"6143a1a228f7d068ab16a130",
|
||||
"Step 15"
|
||||
],
|
||||
[
|
||||
"6143a73279ce6369de4b9bcc",
|
||||
"Step 16"
|
||||
],
|
||||
[
|
||||
"6143a778bffc206ac6b1dbe3",
|
||||
"Step 17"
|
||||
],
|
||||
[
|
||||
"6143a83fcc32c26bcfae3efa",
|
||||
"Step 18"
|
||||
],
|
||||
[
|
||||
"6143b97c06c3306d23d5da47",
|
||||
"Step 19"
|
||||
],
|
||||
[
|
||||
"6143b9e1f5035c6e5f2a8231",
|
||||
"Step 20"
|
||||
],
|
||||
[
|
||||
"6143bb50e8e48c6f5ef9d8d5",
|
||||
"Step 21"
|
||||
],
|
||||
[
|
||||
"6143c2a363865c715f1a3f72",
|
||||
"Step 22"
|
||||
],
|
||||
[
|
||||
"6143cd08fe927072ca3a371d",
|
||||
"Step 23"
|
||||
],
|
||||
[
|
||||
"6143cdf48b634a747de42104",
|
||||
"Step 24"
|
||||
],
|
||||
[
|
||||
"6143d003ad9e9d76766293ec",
|
||||
"Step 25"
|
||||
],
|
||||
[
|
||||
"6143d2842b497779bad947de",
|
||||
"Step 26"
|
||||
],
|
||||
[
|
||||
"6144d66a5358db0c80628757",
|
||||
"Step 27"
|
||||
],
|
||||
[
|
||||
"6144d7dbdd3e580da730ff45",
|
||||
"Step 28"
|
||||
],
|
||||
[
|
||||
"6144de308591ec10e27d5383",
|
||||
"Step 29"
|
||||
],
|
||||
[
|
||||
"6144e1ba93e435127a7f516d",
|
||||
"Step 30"
|
||||
],
|
||||
[
|
||||
"6144ee46a9d6e614c598cc05",
|
||||
"Step 31"
|
||||
],
|
||||
[
|
||||
"6144ee790af79815ad15a832",
|
||||
"Step 32"
|
||||
],
|
||||
[
|
||||
"6144f1410990ea17187a722b",
|
||||
"Step 33"
|
||||
],
|
||||
[
|
||||
"6144f3818bfbc51844152e36",
|
||||
"Step 34"
|
||||
],
|
||||
[
|
||||
"6144f42204c8c8195f1f3345",
|
||||
"Step 35"
|
||||
],
|
||||
[
|
||||
"6144f47b7c631e1a6f304dd5",
|
||||
"Step 36"
|
||||
],
|
||||
[
|
||||
"6148b07081759c2c691166a9",
|
||||
"Step 37"
|
||||
],
|
||||
[
|
||||
"6148b0d764e4192e5712ed92",
|
||||
"Step 38"
|
||||
],
|
||||
[
|
||||
"6148b185ef37522f688316b0",
|
||||
"Step 39"
|
||||
],
|
||||
[
|
||||
"6148b30464daf630848c21d4",
|
||||
"Step 40"
|
||||
],
|
||||
[
|
||||
"6148b4b150434734143db6f2",
|
||||
"Step 41"
|
||||
],
|
||||
[
|
||||
"6148b5623efa8f369f2c3643",
|
||||
"Step 42"
|
||||
],
|
||||
[
|
||||
"614e0e503b110f76d3ac2ff6",
|
||||
"Step 43"
|
||||
],
|
||||
[
|
||||
"6148b59ef318e03875f35c4a",
|
||||
"Step 44"
|
||||
],
|
||||
[
|
||||
"6148bd62bbb8c83a5f1fc1b3",
|
||||
"Step 45"
|
||||
],
|
||||
[
|
||||
"6148be3d605d6b3ca9425d11",
|
||||
"Step 46"
|
||||
],
|
||||
[
|
||||
"6148be82ca63c63daa8cca49",
|
||||
"Step 47"
|
||||
],
|
||||
[
|
||||
"6148bf49fcc7913f05dbf9b7",
|
||||
"Step 48"
|
||||
],
|
||||
[
|
||||
"6148bfc43df3bc40fe0e6405",
|
||||
"Step 49"
|
||||
],
|
||||
[
|
||||
"6148c004ffc8434252940dc3",
|
||||
"Step 50"
|
||||
],
|
||||
[
|
||||
"6148c224ecb157439bc5247c",
|
||||
"Step 51"
|
||||
],
|
||||
[
|
||||
"6148c434bd731d45617a76c6",
|
||||
"Step 52"
|
||||
],
|
||||
[
|
||||
"6148c5036ddad94692a66230",
|
||||
"Step 53"
|
||||
],
|
||||
[
|
||||
"6148c58bace368497fb11bcf",
|
||||
"Step 54"
|
||||
],
|
||||
[
|
||||
"6148c6aa9981d74af202125e",
|
||||
"Step 55"
|
||||
],
|
||||
[
|
||||
"6148c721e74ecd4c619ae51c",
|
||||
"Step 56"
|
||||
],
|
||||
[
|
||||
"6148ceaf5d897d4d8b3554b3",
|
||||
"Step 57"
|
||||
],
|
||||
[
|
||||
"6148cf094b3f2b4e8a032c63",
|
||||
"Step 58"
|
||||
],
|
||||
[
|
||||
"6148d0b863d10d50544ace0e",
|
||||
"Step 59"
|
||||
],
|
||||
[
|
||||
"6148d1bdf39c5b5186f5974b",
|
||||
"Step 60"
|
||||
],
|
||||
[
|
||||
"6148d1f9eb63c252e1f8acc4",
|
||||
"Step 61"
|
||||
],
|
||||
[
|
||||
"6148d2444d01ab541e64a1e4",
|
||||
"Step 62"
|
||||
],
|
||||
[
|
||||
"6148d33e31fccf558696c745",
|
||||
"Step 63"
|
||||
],
|
||||
[
|
||||
"6148d3fff5186b57123d97e2",
|
||||
"Step 64"
|
||||
],
|
||||
[
|
||||
"6148d4d57b965358c9fa38bf",
|
||||
"Step 65"
|
||||
],
|
||||
[
|
||||
"6148d7720f0db36775db868a",
|
||||
"Step 66"
|
||||
],
|
||||
[
|
||||
"6148d94fdf6a5d6899f8ff15",
|
||||
"Step 67"
|
||||
],
|
||||
[
|
||||
"6148d9825b50a3698aeee644",
|
||||
"Step 68"
|
||||
],
|
||||
[
|
||||
"6148e162e255676ae0da6a76",
|
||||
"Step 69"
|
||||
],
|
||||
[
|
||||
"6148e19c3e26436be0155690",
|
||||
"Step 70"
|
||||
],
|
||||
[
|
||||
"6148e246146b646cf4255f0c",
|
||||
"Step 71"
|
||||
],
|
||||
[
|
||||
"6148e2dcdd60306dd77d41cc",
|
||||
"Step 72"
|
||||
],
|
||||
[
|
||||
"6148e4d6861a486f60681f36",
|
||||
"Step 73"
|
||||
],
|
||||
[
|
||||
"6148e5a204d99e70343a63e4",
|
||||
"Step 74"
|
||||
],
|
||||
[
|
||||
"6148e62a6f768f71c4f04828",
|
||||
"Step 75"
|
||||
],
|
||||
[
|
||||
"6148e789329dc9736ce59b85",
|
||||
"Step 76"
|
||||
],
|
||||
[
|
||||
"6148f34ebedc2274bceeb99c",
|
||||
"Step 77"
|
||||
],
|
||||
[
|
||||
"6148f600cde42b7670c2611f",
|
||||
"Step 78"
|
||||
],
|
||||
[
|
||||
"6148f693e0728f77c87f3020",
|
||||
"Step 79"
|
||||
],
|
||||
[
|
||||
"6148f6f7d8914c78e93136ca",
|
||||
"Step 80"
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,135 @@
|
||||
---
|
||||
id: 61437d575fb98f57fa8f7f36
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Begin with your standard HTML boilerplate. Add a `DOCTYPE` declaration, an `html` element, a `head` element, and a `body` element.
|
||||
|
||||
Add a `meta` tag with the appropriate `charset` and a `meta` tag for mobile responsiveness within the `head` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should contain the `DOCTYPE` reference.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE/gi));
|
||||
```
|
||||
|
||||
You should include a space after the `DOCTYPE` reference.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+/gi));
|
||||
```
|
||||
|
||||
You should define the document type to be `html`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html/gi));
|
||||
```
|
||||
|
||||
You should close the `DOCTYPE` declaration with a `>` after the type.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
|
||||
```
|
||||
|
||||
Your `html` element should have an opening tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s*>/gi));
|
||||
```
|
||||
|
||||
Your `html` element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/html\s*>/));
|
||||
```
|
||||
|
||||
Your `html` element should be below the `DOCTYPE` declaration.
|
||||
|
||||
```js
|
||||
assert(code.match(/(?<!<html\s*>)<!DOCTYPE\s+html\s*>/gi));
|
||||
```
|
||||
|
||||
You should have an opening `head` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>/i));
|
||||
```
|
||||
|
||||
You should have a closing `head` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head\s*>/i));
|
||||
```
|
||||
|
||||
You should have an opening `body` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<body\s*>/i));
|
||||
```
|
||||
|
||||
You should have a closing `body` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/body\s*>/i));
|
||||
```
|
||||
|
||||
The `head` and `body` elements should be siblings.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
|
||||
```
|
||||
|
||||
The `head` element should be within the `html` element.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
|
||||
```
|
||||
|
||||
The `body` element should be within the `html` element.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
|
||||
```
|
||||
|
||||
You should have two `meta` elements.
|
||||
|
||||
```js
|
||||
const meta = document.querySelectorAll('meta');
|
||||
assert(meta?.length === 2);
|
||||
```
|
||||
|
||||
One `meta` element should have a `name` set to `viewport`, and `content` set to `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);
|
||||
```
|
||||
|
||||
The other `meta` element should have the `charset` attribute set to `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
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 614385513d91ae5c251c2052
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a `title` element with the text `CSS Grid Magazine`, a `link` element for the `https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&display=swap` font stylesheet, a `link` for the `https://use.fontawesome.com/releases/v5.8.2/css/all.css` FontAwesome stylesheet, and a `link` for your `./styles.css` stylesheet.
|
||||
|
||||
Your font stylesheet will load three separate fonts: `Anton`, `Baskervville`, and `Raleway`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have three `link` elements.
|
||||
|
||||
```js
|
||||
assert(code.match(/<link/g)?.length === 3);
|
||||
```
|
||||
|
||||
Your `link` elements should be self-closing elements.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/link>/i) === null);
|
||||
```
|
||||
|
||||
Your `link` elements should be within your `head` element.
|
||||
|
||||
```js
|
||||
const head = code.match(/<head>(.|\r|\n)*<\/head>/i)?.[0];
|
||||
assert(head.match(/<link/g)?.length === 3)
|
||||
```
|
||||
|
||||
Your three `link` elements should have a `rel` attribute with the value `stylesheet`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<link[\s\S]*?rel=('|"|`)stylesheet\1/gi)?.length === 3);
|
||||
```
|
||||
|
||||
One of your link elements should have the `href` set to `https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&display=swap`.
|
||||
|
||||
```js
|
||||
const links = [...document.querySelectorAll('link')];
|
||||
assert(links.find(link => link.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&display=swap'));
|
||||
```
|
||||
|
||||
One of your link elements should have the `href` set to `https://use.fontawesome.com/releases/v5.8.2/css/all.css`.
|
||||
|
||||
```js
|
||||
const links = [...document.querySelectorAll('link')];
|
||||
assert(links.find(link => link.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css'));
|
||||
```
|
||||
|
||||
One of your `link` elements should have an `href` attribute with the value `styles.css`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
|
||||
```
|
||||
|
||||
Your code should have a `title` element.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.exists(title);
|
||||
```
|
||||
|
||||
Your project should have a title of `CSS Grid Magazine`.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title?.text?.trim()?.toLowerCase(), 'css grid magazine')
|
||||
```
|
||||
|
||||
Remember, the casing and spelling matter for the title.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title?.text?.trim(), 'CSS Grid Magazine');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 6143862a5e54455d262c212e
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within your `body`, create a `main` element. Then in that element, create a `section` with a `class` set to `heading`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `main` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('main'));
|
||||
```
|
||||
|
||||
Your `main` element should be within your `body` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('main')?.parentElement?.localName === 'body');
|
||||
```
|
||||
|
||||
You should have a `section` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('section'));
|
||||
```
|
||||
|
||||
Your `section` element should be within your `main` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('section')?.parentElement?.localName === 'main');
|
||||
```
|
||||
|
||||
Your `section` element should have the `class` set to `heading`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('section')?.classList?.contains('heading'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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,109 @@
|
||||
---
|
||||
id: 6143869bb45bd85e3b1926aa
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within your `.heading` element, create a `header` element with the `class` set to `hero`.
|
||||
|
||||
In that element, create an `img` element with the `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png`, the `alt` set to `freecodecamp logo`, and the `class` set to `hero-img`.
|
||||
|
||||
The `loading` attribute on an `img` element can be set to `lazy` to tell the browser not to fetch the image resource until it is needed (as in, when the user scrolls the image into view). As an additional benefit, lazy loaded elements will not load until the non-lazy elements are loaded - this means users with slow internet connections can view the content of your page without having to wait for the images to load.
|
||||
|
||||
Give your new `img` element a `loading` attribute set to `lazy`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `header` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('header'));
|
||||
```
|
||||
|
||||
Your `header` element should be within your `.heading` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('header')?.parentElement?.className === 'heading');
|
||||
```
|
||||
|
||||
Your `header` element should have the `class` set to `hero`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('header')?.className === 'hero');
|
||||
```
|
||||
|
||||
You should create an `img` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('img'));
|
||||
```
|
||||
|
||||
Your `img` element should be within your `header` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img')?.parentElement?.localName === 'header');
|
||||
```
|
||||
|
||||
Your `img` element should have the `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img')?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png');
|
||||
```
|
||||
|
||||
Your `img` element should have the `alt` set to `freecodecamp logo`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img')?.getAttribute('alt') === 'freecodecamp logo');
|
||||
```
|
||||
|
||||
Your `img` element should have the `loading` attribute set to `lazy`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img')?.getAttribute('loading') === 'lazy');
|
||||
```
|
||||
|
||||
Your `img` element should have the `class` set to `hero-img`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img')?.className === 'hero-img');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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">
|
||||
|
||||
</section>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 6165d3b702a5d92ad970b30c
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
After your `img` element, add an `h1` element with the `class` set to `hero-title` and the text set to `OUR NEW CURRICULUM`, followed by a `p` element with the `class` set to `hero-subtitle` and the text set to `Our efforts to restructure our curriculum with a more project-based focus`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create an `h1` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('h1'));
|
||||
```
|
||||
|
||||
Your `h1` element should come after your `img` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('h1')?.previousElementSibling?.localName === 'img');
|
||||
```
|
||||
|
||||
Your `h1` element should have the `class` set to `hero-title`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('h1')?.className === 'hero-title');
|
||||
```
|
||||
|
||||
Your `h1` element should have the text set to `OUR NEW CURRICULUM`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('h1')?.textContent === 'OUR NEW CURRICULUM');
|
||||
```
|
||||
|
||||
You should create a new `p` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('p'));
|
||||
```
|
||||
|
||||
Your `p` element should come after your `h1` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1');
|
||||
```
|
||||
|
||||
Your `p` element should have the `class` set to `hero-subtitle`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('p')?.className === 'hero-subtitle');
|
||||
```
|
||||
|
||||
Your `p` element should have the text set to `Our efforts to restructure our curriculum with a more project-based focus`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('p')?.textContent === 'Our efforts to restructure our curriculum with a more project-based focus');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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"
|
||||
/>
|
||||
</header>
|
||||
</section>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 614e0e588f0e8a772a8a81a6
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your image currently takes up a lot of space. To better see what you are working on, add a `width` attribute to the `img` element, with a value of `400`.
|
||||
|
||||
You will remove this later on when you have worked on the CSS.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `img` element should have a `width` attribute set to `400`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img')?.getAttribute('width') === '400');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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,152 @@
|
||||
---
|
||||
id: 614387cbefeeba5f3654a291
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
After your `header` element, create a `div` with the `class` set to `author`.
|
||||
|
||||
Within that `div`, create a `p` element with the `class` set to `author-name` and give it the text `By freeCodeCamp`. Wrap the `freeCodeCamp` portion in an `a` element with the `href` set to `https://freecodecamp.org`, and the `target` set to `_blank`.
|
||||
|
||||
|
||||
Below that, add a second `p` element with the class `publish-date` and the text `March 7, 2019`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `div` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div'));
|
||||
```
|
||||
|
||||
Your `div` element should come after your `header` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.previousElementSibling?.localName === 'header');
|
||||
```
|
||||
|
||||
Your `div` element should have the `class` set to `author`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.className === 'author');
|
||||
```
|
||||
|
||||
You should create two new `p` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('p')?.length === 3);
|
||||
```
|
||||
|
||||
Your two new `p` elements should be within your `div` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div')?.querySelectorAll('p')?.length === 2);
|
||||
```
|
||||
|
||||
Your first new `p` element should have a `class` set to `author-name`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.querySelector('p')?.className === 'author-name');
|
||||
```
|
||||
|
||||
Your first new `p` element should have the text `By freeCodeCamp`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.querySelector('p')?.innerText === 'By freeCodeCamp');
|
||||
```
|
||||
|
||||
Your second new `p` element should have a `class` set to `publish-date`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.querySelectorAll('p')?.[1]?.className === 'publish-date');
|
||||
```
|
||||
|
||||
Your second new `p` element should have the text `March 7, 2019`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.querySelectorAll('p')?.[1]?.innerText === 'March 7, 2019');
|
||||
```
|
||||
|
||||
You should create a new `a` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('a'));
|
||||
```
|
||||
|
||||
Your `a` element should be within your first new `p` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.localName === 'a');
|
||||
```
|
||||
|
||||
Your `a` element should have the `href` set to `https://freecodecamp.org`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.getAttribute('href') === 'https://freecodecamp.org');
|
||||
```
|
||||
|
||||
Your `a` element should have the `target` set to `_blank`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.getAttribute('target') === '_blank');
|
||||
```
|
||||
|
||||
Your `a` element should surround the text `freeCodeCamp`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.textContent === 'freeCodeCamp');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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>
|
||||
--fcc-editable-region--
|
||||
|
||||
</section>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 6169cd8a558aa8434e0ad7f6
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `Referer` HTTP header contains information about the address or URL of a page that a user might be visiting from. This information can be used in analytics to track how many users from your page visit freecodecamp.org, for example. Setting the `rel` attribute to `noreferrer` omits this information from the HTTP request. Give your `a` element a `rel` attribute set to `noreferrer`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `a` element should have the `rel` set to `noreferrer`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.getAttribute('rel') === 'noreferrer');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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>
|
||||
--fcc-editable-region--
|
||||
<div class="author">
|
||||
<p class="author-name">
|
||||
By
|
||||
<a href="https://freecodecamp.org" target="_blank"
|
||||
>freeCodeCamp</a
|
||||
>
|
||||
</p>
|
||||
<p class="publish-date">March 7, 2019</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,134 @@
|
||||
---
|
||||
id: 614389f601bb4f611db98563
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `.author` element, create a new `div` element with the class `social-icons`.
|
||||
|
||||
Add five `a` elements within that new `div`, and give them the following `href` attributes.
|
||||
|
||||
- The first `a` element should have an `href` set to `https://www.facebook.com/freecodecamp`.
|
||||
- The second `a` element should have an `href` set to `https://twitter.com/freecodecamp`.
|
||||
- The third `a` element should have an `href` set to `https://instagram.com/freecodecamp`.
|
||||
- The fourth `a` element should have an `href` set to `https://www.linkedin.com/school/free-code-camp`.
|
||||
- The fifth `a` element should have an `href` set to `https://www.youtube.com/freecodecamp`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `div` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div')?.length === 2);
|
||||
```
|
||||
|
||||
Your new `div` element should come after your `.author` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.author')?.nextElementSibling?.localName === 'div');
|
||||
```
|
||||
|
||||
Your new `div` element should have the class `social-icons`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.author')?.nextElementSibling?.classList?.contains('social-icons'));
|
||||
```
|
||||
|
||||
Your `.social-icons` element should have five `a` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.length === 5);
|
||||
```
|
||||
|
||||
Your first `a` element should have an `href` set to `https://www.facebook.com/freecodecamp`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.[0]?.getAttribute('href')?.includes('https://www.facebook.com/freecodecamp'));
|
||||
```
|
||||
|
||||
Your second `a` element should have an `href` set to `https://twitter.com/freecodecamp`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.[1]?.getAttribute('href') === 'https://twitter.com/freecodecamp');
|
||||
```
|
||||
|
||||
Your third `a` element should have an `href` set to `https://instagram.com/freecodecamp`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.[2]?.getAttribute('href') === 'https://instagram.com/freecodecamp');
|
||||
```
|
||||
|
||||
Your fourth `a` element should have an `href` set to `https://www.linkedin.com/school/free-code-camp`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.[3]?.getAttribute('href') === 'https://www.linkedin.com/school/free-code-camp');
|
||||
```
|
||||
|
||||
Your fifth `a` element should have an `href` set to `https://www.youtube.com/freecodecamp`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.[4]?.getAttribute('href') === 'https://www.youtube.com/freecodecamp');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within each of your new `a` elements, add an `i` element and give them the following classes:
|
||||
|
||||
- Your first `i` element should have the class `fab fa-facebook-f`
|
||||
- Your second `i` element should have the class `fab fa-twitter`
|
||||
- Your third `i` element should have the class `fab fa-instagram`
|
||||
- Your fourth `i` element should have the class `fab fa-linkedin-in`
|
||||
- Your fifth `i` element should have the class `fab fa-youtube`
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have five `i` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('i')?.length === 5);
|
||||
```
|
||||
|
||||
Each `a` element should only have one `i` element.
|
||||
|
||||
```js
|
||||
const aaaaa = [...document.querySelectorAll('.social-icons a')];
|
||||
assert(aaaaa?.every(a => a?.children?.length === 1 && a?.children?.[0]?.localName === 'i'));
|
||||
```
|
||||
|
||||
Each `i` element should have a `class` attribute which includes `fab`.
|
||||
|
||||
```js
|
||||
const iiiii = [...document.querySelectorAll('i')];
|
||||
assert(iiiii?.every(i => i?.classList?.contains('fab')));
|
||||
```
|
||||
|
||||
The first `i` element should have a `class` attribute which includes `fa-facebook-f`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('i')?.[0]?.classList?.contains('fa-facebook-f'));
|
||||
```
|
||||
|
||||
The second `i` element should have a `class` attribute which includes `fa-twitter`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('i')?.[1]?.classList?.contains('fa-twitter'));
|
||||
```
|
||||
|
||||
The third `i` element should have a `class` attribute which includes `fa-instagram`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('i')?.[2]?.classList?.contains('fa-instagram'));
|
||||
```
|
||||
|
||||
The fourth `i` element should have a `class` attribute which includes `fa-linkedin-in`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('i')?.[3]?.classList?.contains('fa-linkedin-in'));
|
||||
```
|
||||
|
||||
The fifth `i` element should have a `class` attribute which includes `fa-youtube`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('i')?.[4]?.classList?.contains('fa-youtube'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `.heading` element, create a new `section` element with the `class` set to `text`. Within that, create a `p` element with the `class` set to `first-paragraph` and the following text:
|
||||
|
||||
```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--
|
||||
|
||||
You should create a new `section` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('section')?.length === 2);
|
||||
```
|
||||
|
||||
Your new `section` element should come after your `.heading` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('section')?.[1]?.previousElementSibling?.className === 'heading');
|
||||
```
|
||||
|
||||
Your new `section` element should have the `class` set to `text`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('section')?.[1]?.className === 'text');
|
||||
```
|
||||
|
||||
You should create a new `p` element within your `.text` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.text')?.querySelectorAll('p')?.length === 1);
|
||||
```
|
||||
|
||||
Your new `p` element should have the `class` set to `first-paragraph`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.text p')?.className === 'first-paragraph');
|
||||
```
|
||||
|
||||
Your new `p` element should have the provided text.
|
||||
|
||||
```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>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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,109 @@
|
||||
---
|
||||
id: 61439dc084fa5f659cf75d7c
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create another `p` element below your `.first-paragraph` element, and give it the following text:
|
||||
|
||||
```markup
|
||||
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!
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a second `p` element within your `.text` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.text p')?.length === 2)
|
||||
```
|
||||
|
||||
Your second `p` element should have the provided text.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.text p')?.[1]?.innerText === '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!')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,113 @@
|
||||
---
|
||||
id: 61439dfc811e12666b04be6f
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a third `p` element at the end of your `.text` element, and give it the following text:
|
||||
|
||||
```markup
|
||||
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.)
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a third `p` element in your `.text` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.text p')?.length === 3);
|
||||
```
|
||||
|
||||
Your third `p` element should have the provided text.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.text p')?.[2]?.innerText === "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.)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,148 @@
|
||||
---
|
||||
id: 61439e33e4fb7967609e0c83
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
After the three `p` elements within your `.text` element, create a `blockquote` element. Within that, add an `hr` element, a `p` element with the `class` set to `quote`, and a second `hr` element.
|
||||
|
||||
Give the `.quote` element the text `The entire curriculum should be a series of projects`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `blockquote` element within your `.text` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.text blockquote'));
|
||||
```
|
||||
|
||||
Your `blockquote` element should come after your three `p` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.text')?.children?.[3]?.localName === 'blockquote');
|
||||
```
|
||||
|
||||
Your `blockquote` element should have two `hr` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.text blockquote hr')?.length === 2);
|
||||
```
|
||||
|
||||
Your `blockquote` element should have a `p` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.text blockquote p'));
|
||||
```
|
||||
|
||||
Your `blockquote` children should be in the correct order.
|
||||
|
||||
```js
|
||||
const children = document.querySelector('.text blockquote')?.children;
|
||||
assert(children?.[0]?.localName === 'hr');
|
||||
assert(children?.[1]?.localName === 'p');
|
||||
assert(children?.[2]?.localName === 'hr');
|
||||
```
|
||||
|
||||
Your new `p` element should have the `class` set to `quote`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.text blockquote p')?.className === 'quote');
|
||||
```
|
||||
|
||||
Your new `p` element should have the text `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>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `blockquote` element, add another `p` element with the following text:
|
||||
|
||||
```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--
|
||||
|
||||
You should add a fourth `p` element to your `.text` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.text p')?.length === 5);
|
||||
```
|
||||
|
||||
Your new `p` element should come after your `blockquote` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.text p')?.[4]?.previousElementSibling?.localName === 'blockquote');
|
||||
```
|
||||
|
||||
Your new `p` element should have the provided text.
|
||||
|
||||
```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>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a fifth `p` element at the end of your `.text` element, and give it the following 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--
|
||||
|
||||
You should add a fifth `p` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.text p')?.length === 6);
|
||||
```
|
||||
|
||||
Your new `p` element should have the provided text.
|
||||
|
||||
```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>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create one final `p` element at the end of your `.text` element and give it the following 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--
|
||||
|
||||
You should add a sixth `p` element to the `.text` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.text p')?.length === 7)
|
||||
```
|
||||
|
||||
Your sixth `p` element should have the provided text.
|
||||
|
||||
```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>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `.text` element, create a new `section` element and give it a `class` of `text text-with-images`. Within that, create an `article` element with a `class` set to `brief-history`, and an `aside` element with the `class` set to `image-wrapper`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `section` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('section')?.length === 3)
|
||||
```
|
||||
|
||||
Your new `section` element should come after your `.text` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('section')?.[2]?.previousElementSibling?.className === 'text')
|
||||
```
|
||||
|
||||
Your new `section` element should have the `class` set to `text text-with-images`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('section')?.[2]?.className === 'text text-with-images')
|
||||
```
|
||||
|
||||
Your new `section` element should have an `article` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.text-with-images article'));
|
||||
```
|
||||
|
||||
Your new `section` element should have an `aside` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.text-with-images aside'));
|
||||
```
|
||||
|
||||
The `article` element should come before the `aside` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.text-with-images article')?.nextElementSibling?.localName === 'aside');
|
||||
```
|
||||
|
||||
Your `article` element should have the `class` set to `brief-history`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.text-with-images article')?.className === 'brief-history');
|
||||
```
|
||||
|
||||
Your `aside` element should have the `class` set to `image-wrapper`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.text-with-images aside')?.className === 'image-wrapper');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within your `article` element, create an `h3` element with the `class` set to `list-title` and the text of `A Brief History`. Below that, create a `p` element with the text `Of the Curriculum`. Then create a `ul` element with the class `lists`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create an `h3` element within your `article` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('article h3'));
|
||||
```
|
||||
|
||||
You should create a `p` element within your `article` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('article p'));
|
||||
```
|
||||
|
||||
You should create a `ul` element within your `article` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('article ul'));
|
||||
```
|
||||
|
||||
Your elements within the `article` element should be in the correct order.
|
||||
|
||||
```js
|
||||
const children = document.querySelector('article')?.children;
|
||||
assert(children?.[0]?.localName === 'h3');
|
||||
assert(children?.[1]?.localName === 'p');
|
||||
assert(children?.[2]?.localName === 'ul');
|
||||
```
|
||||
|
||||
Your new `h3` element should have the `class` set to `list-title`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('article h3')?.className === 'list-title');
|
||||
```
|
||||
|
||||
Your new `h3` element should have the text of `A Brief History`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('article h3')?.innerText === 'A Brief History');
|
||||
```
|
||||
|
||||
Your new `p` element should have the text of `Of the Curriculum`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('article p')?.innerText === 'Of the Curriculum');
|
||||
```
|
||||
|
||||
Your new `ul` element should have the `class` set to `lists`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('article ul')?.className === 'lists');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within your `ul` element, create six `li` elements. Add an `h4` element with a `class` set to `list-subtitle` and a `p` element to each of your `li` elements.
|
||||
|
||||
Then give the `h4` and `p` elements the following text content, in order, with each `h4` using what's on the left side of the colon, and each `p` using what's on the right:
|
||||
|
||||
- `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--
|
||||
|
||||
Your `ul` element should have six `li` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.lists li')?.length === 6);
|
||||
```
|
||||
|
||||
Each of your new `li` elements should have an `h4` and `p` element.
|
||||
|
||||
```js
|
||||
const lis = [...document.querySelectorAll('.lists li')];
|
||||
assert(lis?.every(li => li?.children?.[0]?.localName === 'h4' && li?.children?.[1]?.localName === 'p'));
|
||||
```
|
||||
|
||||
Your first `h4` should have the text `V1 - 2014`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.lists li h4')?.[0]?.innerText === 'V1 - 2014');
|
||||
```
|
||||
|
||||
Your first `p` should have the text `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.');
|
||||
```
|
||||
|
||||
Your second `h4` should have the text `V2 - 2015`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.lists li h4')?.[1]?.innerText === 'V2 - 2015');
|
||||
```
|
||||
|
||||
Your second `p` should have the text `We added interactive algorithm challenges.`
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.lists li p')?.[1]?.innerText === 'We added interactive algorithm challenges.');
|
||||
```
|
||||
|
||||
Your third `h4` should have the text `V3 - 2015`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.lists li h4')?.[2]?.innerText === 'V3 - 2015');
|
||||
```
|
||||
|
||||
Your third `p` should have the text `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).');
|
||||
```
|
||||
|
||||
Your fourth `h4` should have the text `V4 - 2016`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.lists li h4')?.[3]?.innerText === 'V4 - 2016');
|
||||
```
|
||||
|
||||
Your fourth `p` should have the text `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.');
|
||||
```
|
||||
|
||||
Your fifth `h4` should have the text `V5 - 2017`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.lists li h4')?.[4]?.innerText === 'V5 - 2017');
|
||||
```
|
||||
|
||||
Your fifth `p` should have the text `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.');
|
||||
```
|
||||
|
||||
Your sixth `h4` should have the text `V6 - 2018`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.lists li h4')?.[5]?.innerText === 'V6 - 2018');
|
||||
```
|
||||
|
||||
Your sixth `p` should have the text `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.');
|
||||
```
|
||||
|
||||
Your six `h4` elements should each have the class `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>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within your `aside` element, create two `img` elements, a `blockquote` element, and a third `img` element. Give the `blockquote` element a `class` set to `image-quote`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create three `img` elements within your `aside` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('aside img')?.length === 3);
|
||||
```
|
||||
|
||||
You should create a `blockquote` element within your `aside` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('aside blockquote'));
|
||||
```
|
||||
|
||||
Your `blockquote` element should have a `class` set to `image-quote`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('aside blockquote')?.classList?.contains('image-quote'));
|
||||
```
|
||||
|
||||
Your new elements should be in the correct order.
|
||||
|
||||
```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>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `.image-wrapper` element, give your first `img` element a `src` of `https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png`, an `alt` of `image of the quote machine project`, a `class` of `image-1`, a `loading` attribute set to `lazy`, a `width` attribute of `600`, and a `height` attribute of `400`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your first `img` element should have a `src` attribute set to `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');
|
||||
```
|
||||
|
||||
Your first `img` element should have an `alt` attribute set to `image of the quote machine project`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('alt') === 'image of the quote machine project');
|
||||
```
|
||||
|
||||
Your first `img` element should have a `class` attribute set to `image-1`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.image-wrapper img')?.[0]?.classList?.contains('image-1'));
|
||||
```
|
||||
|
||||
Your first `img` element should have a `loading` attribute set to `lazy`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('loading') === 'lazy');
|
||||
```
|
||||
|
||||
Your first `img` element should have a `width` attribute set to `600`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('width') === '600');
|
||||
```
|
||||
|
||||
Your first `img` element should have a `height` attribute set to `400`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('height') === '400');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within your `.image-wrapper` element, give the second `img` element a `src` of `https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png`, an `alt` of `image of the calculator project`, a `loading` attribute set to `lazy`, a `class` set to `image-2`, a `width` attribute set to `400`, and a `height` attribute set to `400`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your second `img` element should have a `src` set to `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');
|
||||
```
|
||||
|
||||
Your second `img` element should have an `alt` set to `image of the calculator project`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('alt') === 'image of the calculator project');
|
||||
```
|
||||
|
||||
Your second `img` element should have a `loading` attribute set to `lazy`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('loading') === 'lazy');
|
||||
```
|
||||
|
||||
Your second `img` element should have a `class` set to `image-2`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.image-wrapper img')?.[1]?.classList?.contains('image-2'));
|
||||
```
|
||||
|
||||
Your second `img` element should have a `width` set to `400`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('width') === '400');
|
||||
```
|
||||
|
||||
Your second `img` element should have a `height` set to `400`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('height') === '400');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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,221 @@
|
||||
---
|
||||
id: 6143cdf48b634a747de42104
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within your `.image-wrapper` element, give your third `img` element a `src` of `https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg`, an `alt` of `four people working on code`, a `loading` attribute of `lazy`, a `class` set to `image-3`, a `width` attribute set to `600`, and a `height` attribute set to `400`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your third `img` element should have a `src` set to `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');
|
||||
```
|
||||
|
||||
Your third `img` element should have an `alt` set to `four people working on code`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('alt') === 'four people working on code');
|
||||
```
|
||||
|
||||
Your third `img` element should have a `loading` attribute set to `lazy`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('loading') === 'lazy');
|
||||
```
|
||||
|
||||
Your third `img` element should have a `class` set to `image-3`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.image-wrapper img')?.[2]?.classList?.contains('image-3'));
|
||||
```
|
||||
|
||||
Your third `img` element should have a `width` attribute set to `600`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('width') === '600');
|
||||
```
|
||||
|
||||
Your third `img` element should have a `height` attribute set to `400`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('height') === '400');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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>
|
||||
<img />
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,226 @@
|
||||
---
|
||||
id: 6143d003ad9e9d76766293ec
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within your `.image-quote` element, nest an `hr` element, a `p` element and a second `hr` element. Give the `p` element a `class` set to `quote` and the text `The millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals.`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add two `hr` elements to your `.image-quote` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.image-quote hr')?.length === 2);
|
||||
```
|
||||
|
||||
You should add a `p` element to your `.image-quote` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.image-quote p')?.length === 1);
|
||||
```
|
||||
|
||||
Your `.image-quote` children should be in the correct order.
|
||||
|
||||
```js
|
||||
const children = document.querySelector('.image-quote')?.children;
|
||||
assert(children?.[0]?.localName === 'hr');
|
||||
assert(children?.[1]?.localName === 'p');
|
||||
assert(children?.[2]?.localName === 'hr');
|
||||
```
|
||||
|
||||
Your new `p` element should have a `class` set to `quote`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.image-quote p')?.classList.contains('quote'));
|
||||
```
|
||||
|
||||
Your new `p` element should have the text `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>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To start your CSS, normalize the CSS rules by targeting all elements with `*`, including the `::before` and `::after` pseudo-selectors. Set the `padding` property and `margin` property both to `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `*, ::before, ::after` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after'));
|
||||
```
|
||||
|
||||
Your `*, ::before, ::after` selector should have a `padding` property set to `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.padding === '0px');
|
||||
```
|
||||
|
||||
Your `*, ::before, ::after` selector should have a `margin` property set to `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.margin === '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create an `html` selector and give it a `font-size` property set to `62.5%`. This will set the default font size for your web page to 10px (the browser default is 16px).
|
||||
|
||||
This will make it easier for you to work with `rem` units later, as `2rem` would be 20px.
|
||||
|
||||
Also, set the `box-sizing` property to `border-box`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create an `html` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('html'));
|
||||
```
|
||||
|
||||
Your `html` selector should have a `font-size` property set to `62.5%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('html')?.fontSize === '62.5%');
|
||||
```
|
||||
|
||||
Your `html` selector should have a `box-sizing` property set to `border-box`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a `body` selector. Set the `font-family` property to `Baskervville`, with a fallback of `serif`. Set the `color` property to `linen` and the `background-color` property to `rgb(20, 30, 40)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `body` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body'));
|
||||
```
|
||||
|
||||
Your `body` selector should have a `font-family` property set to `Baskervville`, with a fallback of `serif`.
|
||||
|
||||
```js
|
||||
const fontFamily = new __helpers.CSSHelp(document).getStyle('body')?.fontFamily;
|
||||
assert(fontFamily === 'Baskervville, serif' || fontFamily === `"Baskervville", serif`);
|
||||
```
|
||||
|
||||
Your `body` selector should have a `color` property set to `linen`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body')?.color === 'linen');
|
||||
```
|
||||
|
||||
Your `body` selector should have a `background-color` property set to `rgb(20, 30, 40)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(20, 30, 40)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create an `h1` selector, and set the `font-family` property to `Anton` with the fallback of `sans-serif`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `h1` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('h1'));
|
||||
```
|
||||
|
||||
Your `h1` selector should have a `font-family` property set to `Anton` with the fallback of `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>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create an `h2, h3, h4, h5, h6` selector. Give it a `font-family` property set to `Raleway` with a fallback of `sans-serif`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `h2, h3, h4, h5, h6` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('h2, h3, h4, h5, h6'));
|
||||
```
|
||||
|
||||
Your `h2, h3, h4, h5, h6` selector should have a `font-family` property set to `Raleway` with a fallback of `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>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create an `a` selector, and give it a `text-decoration` property set to `none` and a `color` property set to `linen`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `a` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('a'));
|
||||
```
|
||||
|
||||
Your `a` selector should have a `text-decoration` property set to `none`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('a')?.textDecoration === 'none');
|
||||
```
|
||||
|
||||
Your `a` selector should have a `color` property set to `linen`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('a')?.color === 'linen');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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,242 @@
|
||||
---
|
||||
id: 6144ee790af79815ad15a832
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you are ready to start putting together the grid layout. CSS Grid offers a two-dimensional grid-based layout, allowing you to center items horizontally and vertically while still retaining control to do things like overlap elements.
|
||||
|
||||
Begin by creating a `main` selector and giving it a `display` property set to `grid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `main` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('main'));
|
||||
```
|
||||
|
||||
Your `main` selector should have a `display` property set to `grid`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('main')?.display === 'grid');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,238 @@
|
||||
---
|
||||
id: 6144f1410990ea17187a722b
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you can style the layout of your grid. CSS Grid is similar to Flexbox in that it has a special property for both the parent and child elements.
|
||||
|
||||
In this case, your parent element is the `main` element. Set the content to have a three-column layout by adding a `grid-template-columns` property with a value of `1fr 94rem 1fr`. This will create three columns where the middle column is `94rem` wide, and the first and last columns are both 1 fraction of the remaining space in the grid container.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `main` section should have a `grid-template-columns` property set to `1fr 94rem 1fr`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('main')?.gridTemplateColumns === '1fr 94rem 1fr');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
main {
|
||||
display: grid;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,239 @@
|
||||
---
|
||||
id: 6144f3818bfbc51844152e36
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use the `minmax` function to make your columns responsive on any device. The `minmax` function takes two arguments, the first being the minimum value and the second being the maximum. These values could be a length, percentage, `fr`, or even a keyword like `max-content`.
|
||||
|
||||
Wrap each of your already defined values of the `grid-template-columns` property in a `minmax` function, using each value as the second argument. The first argument should be `2rem`, `min-content`, and `2rem` respectively.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `main` selector should have a `grid-template-columns` property set to `minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('main')?.gridTemplateColumns === 'minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 94rem 1fr;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,237 @@
|
||||
---
|
||||
id: 6144f42204c8c8195f1f3345
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To add space between rows in the grid layout, you can use the `row-gap` property. Give the `main` selector a `row-gap` property of `3rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `main` selector should have a `row-gap` property of `3rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('main')?.rowGap === '3rem');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,250 @@
|
||||
---
|
||||
id: 6144f47b7c631e1a6f304dd5
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your magazine will have three primary sections. You already set the overall layout in the `main` rule, but you can adjust the placement in the child rules.
|
||||
|
||||
One option is the `grid-column` property, which is shorthand for `grid-column-start` and `grid-column-end`. The `grid-column` property tells the grid item which grid line to start and end at.
|
||||
|
||||
Create a `.heading` rule and set the `grid-column` property to `2 / 3`. This will tell the `.heading` element to start at grid line 2 and end at grid line 3.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.heading` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.heading'));
|
||||
```
|
||||
|
||||
Your `.heading` selector should have a `grid-column` property set to `2 / 3`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.heading')?.gridColumn === '2 / 3');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,250 @@
|
||||
---
|
||||
id: 6148b07081759c2c691166a9
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a `.text` selector and give it a `grid-column` property set to `2 / 3`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.text` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.text'));
|
||||
```
|
||||
|
||||
Your `.text` selector should have a `grid-column` property set to `2 / 3`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.text')?.gridColumn === '2 / 3');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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,248 @@
|
||||
---
|
||||
id: 6148b0d764e4192e5712ed92
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For additional control over the layout of your content, you can have a CSS Grid within a CSS Grid.
|
||||
|
||||
Set the `display` property of your `.heading` selector to `grid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.heading` selector should have a `display` property set to `grid`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.heading')?.display === 'grid');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.text {
|
||||
grid-column: 2 / 3;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,253 @@
|
||||
---
|
||||
id: 6148b185ef37522f688316b0
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you can style the content of the `.heading` element with CSS Grid.
|
||||
|
||||
The CSS `repeat()` function is used to repeat a value, rather than writing it out manually, and is helpful for grid layouts. For example, setting the `grid-template-columns` property to `repeat(20, 200px)` would create 20 columns each `200px` wide.
|
||||
|
||||
Give your `.heading` element a `grid-template-columns` property set to `repeat(2, 1fr)` to create two columns of equal width.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.heading` selector should have a `grid-template-columns` property set to `repeat(2, 1fr)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.heading')?.gridTemplateColumns === 'repeat(2, 1fr)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.text {
|
||||
grid-column: 2 / 3;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,250 @@
|
||||
---
|
||||
id: 6148b30464daf630848c21d4
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give your `.heading` selector a `row-gap` property set to `1.5rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.heading` selector should have a `row-gap` property set to `1.5rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.heading')?.rowGap === '1.5rem');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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,261 @@
|
||||
---
|
||||
id: 6148b4b150434734143db6f2
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Remember that the `grid-column` property determines which columns an element starts and ends at. There may be times where you are unsure of how many columns your grid will have, but you want an element to stop at the last column. To do this, you can use `-1` for the end column.
|
||||
|
||||
Create a `.hero` selector and give it a `grid-column` property set to `1 / -1`. This will tell the element to span the full width of the grid.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.hero` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.hero'));
|
||||
```
|
||||
|
||||
Your `.hero` selector should have a `grid-column` property set to `1 / -1`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.hero')?.gridColumn === '1 / -1');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,255 @@
|
||||
---
|
||||
id: 6148b5623efa8f369f2c3643
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `.hero` selector a `position` property set to `relative`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.hero` selector should have a `position` property set to `relative`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.hero')?.position === 'relative');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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,255 @@
|
||||
---
|
||||
id: 614e0e503b110f76d3ac2ff6
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You should remove the temporary `width` attribute before writing the CSS for your `.hero-img`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.hero-img` should not have a `width` attribute.
|
||||
|
||||
```js
|
||||
assert.isNull(document.querySelector('.hero-img')?.getAttribute('width'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,271 @@
|
||||
---
|
||||
id: 6148b59ef318e03875f35c4a
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create an `img` selector and give it a `width` property set to `100%`, and an `object-fit` property set to `cover`.
|
||||
|
||||
The `object-fit` property tells the browser how to position the element within its container. In this case, `cover` will set the image to fill the container, cropping as needed to avoid changing the aspect ratio.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `img` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('img'));
|
||||
```
|
||||
|
||||
Your `img` selector should have a `width` property set to `100%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('img')?.width === '100%');
|
||||
```
|
||||
|
||||
Your `img` selector should have an `object-fit` property set to `cover`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('img')?.objectFit === 'cover');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--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;
|
||||
}
|
||||
|
||||
.hero {
|
||||
grid-column: 1 / -1;
|
||||
position: relative;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,280 @@
|
||||
---
|
||||
id: 6148bd62bbb8c83a5f1fc1b3
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a `.hero-title` selector and give it a `text-align` property set to `center`, a `color` property set to `orangered` and a `font-size` property set to `8rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.hero-title` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.hero-title'));
|
||||
```
|
||||
|
||||
Your `.hero-title` selector should have a `text-align` property set to `center`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.textAlign === 'center');
|
||||
```
|
||||
|
||||
Your `.hero-title` selector should have a `color` property set to `orangered`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.color === 'orangered');
|
||||
```
|
||||
|
||||
Your `.hero-title` selector should have a `font-size` property set to `8rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.fontSize === '8rem');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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: Step 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The subtitle also needs to be styled. Create a `.hero-subtitle` selector and give it a `font-size` property set to `2.4rem`, a `color` property set to `orangered`, and a `text-align` property set to `center`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.hero-subtitle` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle'));
|
||||
```
|
||||
|
||||
Your `.hero-subtitle` selector should have a `font-size` property set to `2.4rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.fontSize === '2.4rem');
|
||||
```
|
||||
|
||||
Your `.hero-subtitle` selector should have a `color` property set to `orangered`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.color === 'orangered');
|
||||
```
|
||||
|
||||
Your `.hero-subtitle` selector should have a `text-align` property set to `center`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.textAlign === 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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: Step 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create an `.author` selector and give it a `font-size` property set to `2rem` and a `font-family` property set to `Raleway` with a fallback of `sans-serif`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `.author` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.author'));
|
||||
```
|
||||
|
||||
Your `.author` selector should have a `font-size` property set to `2rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.author')?.fontSize === '2rem');
|
||||
```
|
||||
|
||||
Your `.author` selector should have a `font-family` property set to `Raleway` with a fallback of `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>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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,287 @@
|
||||
---
|
||||
id: 6148bf49fcc7913f05dbf9b7
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a `.author-name a:hover` selector and give it a `background-color` property set to `#306203`.
|
||||
|
||||
This will create a hover effect only for the `a` element within the `.author-name`, showing the original freeCodeCamp green in the background.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `.author-name a:hover` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.author-name a:hover'));
|
||||
```
|
||||
|
||||
Your `.author-name a:hover` selector should have a `background-color` property set to `#306203`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.author-name a:hover')?.backgroundColor === 'rgb(48, 98, 3)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,289 @@
|
||||
---
|
||||
id: 6148bfc43df3bc40fe0e6405
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a `.publish-date` selector and give it a `color` property of `rgba(255, 255, 255, 0.5)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.publish-date` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.publish-date'));
|
||||
```
|
||||
|
||||
Your `.publish-date` selector should have a `color` property set to `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>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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: Step 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a `.social-icons` selector. Give it a `display` property set to `grid`, and a `font-size` property set to `3rem.`
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.social-icons` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.social-icons'));
|
||||
```
|
||||
|
||||
Your `.social-icons` selector should have a `display` property set to `grid`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.display === 'grid');
|
||||
```
|
||||
|
||||
Your `.social-icons` selector should have a `font-size` property set to `3rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.fontSize === '3rem');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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,290 @@
|
||||
---
|
||||
id: 6148c224ecb157439bc5247c
|
||||
title: Step 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The default settings for CSS Grid will create additional rows as needed, unlike Flexbox. Give the `.social-icons` selector a `grid-template-columns` property set to `repeat(5, 1fr)` to arrange the icons in a single row.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.social-icons` selector should have a `grid-template-columns` property set to `repeat(5, 1fr)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.gridTemplateColumns === 'repeat(5, 1fr)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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--
|
||||
.social-icons {
|
||||
display: grid;
|
||||
font-size: 3rem;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,295 @@
|
||||
---
|
||||
id: 6148c434bd731d45617a76c6
|
||||
title: Step 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If you wanted to add more social icons, but keep them on the same row, you would need to update `grid-template-columns` to create additional columns. As an alternative, you can use the `grid-auto-flow` property.
|
||||
|
||||
This property takes either `row` or `column` as the first value, with an optional second value of `dense`. `grid-auto-flow` uses an auto-placement algorithm to adjust the grid layout. Setting it to `column` will tell the algorithm to create new columns for content as needed. The `dense` value allows the algorithm to backtrack and fill holes in the grid with smaller items, which can result in items appearing out of order.
|
||||
|
||||
For your `.social-icons` selector, set the `grid-auto-flow` property to `column`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.social-icons` selector should have a `grid-auto-flow` property set to `column`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.gridAutoFlow === 'column');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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--
|
||||
.social-icons {
|
||||
display: grid;
|
||||
font-size: 3rem;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,294 @@
|
||||
---
|
||||
id: 6148c5036ddad94692a66230
|
||||
title: Step 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now the auto-placement algorithm will kick in when you add a new icon element. However, the algorithm defaults the new column width to be `auto`, which will not match your current columns.
|
||||
|
||||
You can override this with the `grid-auto-columns` property. Give the `.social-icons` selector a `grid-auto-columns` property set to `1fr`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.social-icons` selector should have a `grid-auto-columns` property set to `1fr`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.gridAutoColumns === '1fr');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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--
|
||||
.social-icons {
|
||||
display: grid;
|
||||
font-size: 3rem;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,295 @@
|
||||
---
|
||||
id: 6148c58bace368497fb11bcf
|
||||
title: Step 54
|
||||
challengeType: 0
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Much like Flexbox, with CSS Grid you can align the content of grid items with `align-items` and `justify-items`. `align-items` will align child elements along the column axis, and `justify-items` will align child elements along the row axis.
|
||||
|
||||
Give the `.social-icons` selector an `align-items` property set to `center`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.social-icons` selector should have an `align-items` property set to `center`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.alignItems === 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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--
|
||||
.social-icons {
|
||||
display: grid;
|
||||
font-size: 3rem;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 1fr;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,300 @@
|
||||
---
|
||||
id: 6148c6aa9981d74af202125e
|
||||
title: Step 55
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `.text` selector a `font-size` property set to `1.8rem` and a `letter-spacing` property set to `0.6px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.text` selector should have a `font-size` property set to `1.8rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.text')?.fontSize === '1.8rem');
|
||||
```
|
||||
|
||||
Your `.text` selector should have a `letter-spacing` property set to `0.6px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.text')?.letterSpacing === '0.6px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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,298 @@
|
||||
---
|
||||
id: 6148c721e74ecd4c619ae51c
|
||||
title: Step 56
|
||||
challengeType: 0
|
||||
dashedName: step-56
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your `.text` element is not a CSS Grid, but you can create columns within an element without using Grid by using the `column-width` property.
|
||||
|
||||
Give your `.text` selector a `column-width` property set to `25rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.text` selector should have a `column-width` property set to `25rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.text')?.columnWidth === '25rem');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
font-size: 1.8rem;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
--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,299 @@
|
||||
---
|
||||
id: 6148ceaf5d897d4d8b3554b3
|
||||
title: Step 57
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Magazines often use justified text in their printed content to structure their layout and control the flow of their content. While this works in printed form, justified text on websites can be an accessibility concern, for example presenting challenges for folks with dyslexia.
|
||||
|
||||
To make your project look like a printed magazine, give the `.text` selector a `text-align` property set to `justify`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.text` selector should have a `text-align` property set to `justify`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.text')?.textAlign === 'justify');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
font-size: 1.8rem;
|
||||
letter-spacing: 0.6px;
|
||||
column-width: 25rem;
|
||||
}
|
||||
--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,314 @@
|
||||
---
|
||||
id: 6148cf094b3f2b4e8a032c63
|
||||
title: Step 58
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `::first-letter` pseudo-selector allows you to target the first letter in the text content of an element.
|
||||
|
||||
Create a `.first-paragraph::first-letter` selector and set the `font-size` property to `6rem`. Also give it a `color` property set to `orangered` to make it stand out.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.first-paragraph::first-letter` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter'));
|
||||
```
|
||||
|
||||
Your `.first-paragraph::first-letter` selector should have a `font-size` property set to `6rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.fontSize === '6rem');
|
||||
```
|
||||
|
||||
Your `.first-paragraph::first-letter` selector should have a `color` property set to `orangered`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.color === 'orangered');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,309 @@
|
||||
---
|
||||
id: 6148d0b863d10d50544ace0e
|
||||
title: Step 59
|
||||
challengeType: 0
|
||||
dashedName: step-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The other text has been shifted out of place. Move it into position by giving the `.first-paragraph::first-letter` selector a `float` property set to `left` and a `margin-right` property set to `1rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.first-paragraph::first-letter` selector should have a `float` property set to `left`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.float === 'left');
|
||||
```
|
||||
|
||||
Your `.first-paragraph::first-letter` selector should have a `margin-right` property set to `1rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.marginRight === '1rem');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.first-paragraph::first-letter {
|
||||
font-size: 6rem;
|
||||
color: orangered;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,313 @@
|
||||
---
|
||||
id: 6148d1bdf39c5b5186f5974b
|
||||
title: Step 60
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create an `hr` selector, and give it a `margin` property set to `1.5rem 0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `hr` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('hr'));
|
||||
```
|
||||
|
||||
Your `hr` selector should have a `margin` property set to `1.5rem 0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('hr')?.margin === '1.5rem 0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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--
|
||||
|
||||
--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,309 @@
|
||||
---
|
||||
id: 6148d1f9eb63c252e1f8acc4
|
||||
title: Step 61
|
||||
challengeType: 0
|
||||
dashedName: step-61
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To give the `hr` a color, you need to adjust the `border` property. Give the `hr` selector a `border` property set to `1px solid rgba(120, 120, 120, 0.6)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `hr` should have a `border` property set to `1px solid rgba(120, 120, 120, 0.6)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('hr')?.border === '1px solid rgba(120, 120, 120, 0.6)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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,329 @@
|
||||
---
|
||||
id: 6148d2444d01ab541e64a1e4
|
||||
title: Step 62
|
||||
challengeType: 0
|
||||
dashedName: step-62
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a `.quote` selector. Give it a `color` property set to `#00beef`, a `font-size` property set to `2.4rem`, and a `text-align` property set to `center`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.quote` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.quote'));
|
||||
```
|
||||
|
||||
Your `.quote` selector should have a `color` property set to `#00beef`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.quote')?.color === 'rgb(0, 190, 239)');
|
||||
```
|
||||
|
||||
Your `.quote` selector should have a `font-size` property set to `2.4rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.quote')?.fontSize === '2.4rem');
|
||||
```
|
||||
|
||||
Your `.quote` selector should have a `text-align` property set to `center`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.quote')?.textAlign === 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,316 @@
|
||||
---
|
||||
id: 6148d33e31fccf558696c745
|
||||
title: Step 63
|
||||
challengeType: 0
|
||||
dashedName: step-63
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To make the quote text stand out more, give the `.quote` selector a `font-family` property set to `Raleway` with a fallback of `sans-serif`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.quote` selector should have a `font-family` property set to `Raleway` with a fallback of `sans-serif`.
|
||||
|
||||
```js
|
||||
const fontFamily = new __helpers.CSSHelp(document).getStyle('.quote')?.fontFamily;
|
||||
assert(fontFamily === 'Raleway, sans-serif' || fontFamily === `"Raleway", sans-serif`);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.quote {
|
||||
color: #00beef;
|
||||
font-size: 2.4rem;
|
||||
text-align: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,340 @@
|
||||
---
|
||||
id: 6148d3fff5186b57123d97e2
|
||||
title: Step 64
|
||||
challengeType: 0
|
||||
dashedName: step-64
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A quote is not really a quote without proper quotation marks. You can add these with CSS pseudo selectors.
|
||||
|
||||
Create a `.quote::before` selector and set the `content` property to `"` with a space following it.
|
||||
|
||||
Also, create a `.quote::after` selector and set the `content` property to `"` with a space preceding it.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.quote::before` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.quote::before'));
|
||||
```
|
||||
|
||||
Your `.quote::before` selector should have a `content` property set to `'" '`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\\?\"\s/));
|
||||
```
|
||||
|
||||
You should have a `.quote::after` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.quote::after'));
|
||||
```
|
||||
|
||||
Your `.quote::after` selector should have a `content` property set to `' "'`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.quote::after')?.content?.match(/\s\\?\"/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,334 @@
|
||||
---
|
||||
id: 6148d4d57b965358c9fa38bf
|
||||
title: Step 65
|
||||
challengeType: 0
|
||||
dashedName: step-65
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now to style your second `section`. Note that it has the `text` and `text-with-images` values for the `class` attribute, which means it is already inheriting the styles from your `.text` rule.
|
||||
|
||||
Create a `.text-with-images` selector and set the `display` property to `grid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.text-with-images` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.text-with-images'));
|
||||
```
|
||||
|
||||
Your `.text-with-images` selector should have a `display` property set to `grid`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.display === 'grid');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
.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: ' "';
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,334 @@
|
||||
---
|
||||
id: 6148d7720f0db36775db868a
|
||||
title: Step 66
|
||||
challengeType: 0
|
||||
dashedName: step-66
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You will need to have a column for text and a column for images. Give the `.text-with-images` selector a `grid-template-columns` property set to `1fr 2fr`. Also set the `column-gap` property to `3rem` to provide more spacing between the columns.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.text-with-images` selector should have a `grid-template-columns` property set to `1fr 2fr`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.gridTemplateColumns === '1fr 2fr');
|
||||
```
|
||||
|
||||
Your `.text-with-images` selector should have a `column-gap` property set to `3rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.columnGap === '3rem');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
.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: ' "';
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.text-with-images {
|
||||
display: grid;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,330 @@
|
||||
---
|
||||
id: 6148d94fdf6a5d6899f8ff15
|
||||
title: Step 67
|
||||
challengeType: 0
|
||||
dashedName: step-67
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `.text-with-images` selector a `margin-bottom` property set to `3rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.text-with-images` selector should have a `margin-bottom` property set to `3rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.marginBottom === '3rem');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
.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: ' "';
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.text-with-images {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
column-gap: 3rem;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,339 @@
|
||||
---
|
||||
id: 6148d9825b50a3698aeee644
|
||||
title: Step 68
|
||||
challengeType: 0
|
||||
dashedName: step-68
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a `.lists` selector and set the `list-style-type` property to `none`. This will get rid of the bullet points on the list items.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.lists` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.lists'));
|
||||
```
|
||||
|
||||
Your `.lists` selector should have a `list-style-type` property set to `none`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.lists')?.listStyleType === 'none');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
.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,335 @@
|
||||
---
|
||||
id: 6148e162e255676ae0da6a76
|
||||
title: Step 69
|
||||
challengeType: 0
|
||||
dashedName: step-69
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `.lists` selector a `margin-top` property set to `2rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.lists` selector should have a `margin-top` property set to `2rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.lists')?.marginTop === '2rem');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
.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--
|
||||
.lists {
|
||||
list-style-type: none;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,344 @@
|
||||
---
|
||||
id: 6148e19c3e26436be0155690
|
||||
title: Step 70
|
||||
challengeType: 0
|
||||
dashedName: step-70
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a `.lists li` rule to target the list items within your `.lists` element. Give it a `margin-bottom` property set to `1.5rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.lists li` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.lists li'));
|
||||
```
|
||||
|
||||
Your `.lists li` selector should have a `margin-bottom` property set to `1.5rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.lists li')?.marginBottom === '1.5rem');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
.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,348 @@
|
||||
---
|
||||
id: 6148e246146b646cf4255f0c
|
||||
title: Step 71
|
||||
challengeType: 0
|
||||
dashedName: step-71
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a `.list-title, .list-subtitle` selector and set the `color` property to `#00beef`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.list-title, .list-subtitle` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.list-title, .list-subtitle'))
|
||||
```
|
||||
|
||||
Your `.list-title, .list-subtitle` selector should have a `color` property set to `#00beef`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.list-title, .list-subtitle')?.color === 'rgb(0, 190, 239)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
.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,354 @@
|
||||
---
|
||||
id: 6148e2dcdd60306dd77d41cc
|
||||
title: Step 72
|
||||
challengeType: 0
|
||||
dashedName: step-72
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Time to style the last section of the magazine - the images.
|
||||
|
||||
The images are wrapped with an `aside` element using the `image-wrapper` class, so create an `.image-wrapper` selector. Set the `display` property to `grid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `.image-wrapper` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper'));
|
||||
```
|
||||
|
||||
Your `.image-wrapper` selector should have a `display` property set to `grid`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.display === 'grid');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
.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,356 @@
|
||||
---
|
||||
id: 6148e4d6861a486f60681f36
|
||||
title: Step 73
|
||||
challengeType: 0
|
||||
dashedName: step-73
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The images should be within a two column, three row layout.
|
||||
|
||||
Give the `.image-wrapper` selector a `grid-template-columns` property set to `2fr 1fr` and a `grid-template-rows` property set to `repeat(3, min-content)`. This will give our grid rows that adjust in height based on the content, but columns that remain a fixed width based on the container.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.image-wrapper` selector should have a `grid-template-columns` property set to `2fr 1fr`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.gridTemplateColumns === '2fr 1fr');
|
||||
```
|
||||
|
||||
Your `.image-wrapper` selector should have a `grid-template-rows` property set to `repeat(3, min-content)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.gridTemplateRows === 'repeat(3, min-content)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,352 @@
|
||||
---
|
||||
id: 6148e5a204d99e70343a63e4
|
||||
title: Step 74
|
||||
challengeType: 0
|
||||
dashedName: step-74
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `gap` property is a shorthand way to set the value of `column-gap` and `row-gap` at the same time. If given one value, it sets the `column-gap` and `row-gap` both to that value. If given two values, it sets the `row-gap` to the first value and the `column-gap` to the second.
|
||||
|
||||
Give the `.image-wrapper` selector a `gap` property set to `2rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.image-wrapper` element should have a `gap` property set to `2rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.gap === '2rem');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
.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,353 @@
|
||||
---
|
||||
id: 6148e62a6f768f71c4f04828
|
||||
title: Step 75
|
||||
challengeType: 0
|
||||
dashedName: step-75
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `place-items` property can be used to set the `align-items` and `justify-items` values at the same time. The `place-items` property takes one or two values. If one value is provided, it is used for both the `align-items` and `justify-items` properties. If two values are provided, the first value is used for the `align-items` property and the second value is used for the `justify-items` property.
|
||||
|
||||
Give the `.image-wrapper` selector a `place-items` property set to `center`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.image-wrapper` selector should have a `place-items` property set to `center`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.placeItems === 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
.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);
|
||||
gap: 2rem;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,360 @@
|
||||
---
|
||||
id: 6148e789329dc9736ce59b85
|
||||
title: Step 76
|
||||
challengeType: 0
|
||||
dashedName: step-76
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create an `.image-1, .image-3` rule and give it a `grid-column` property set to `1 / -1`. This will allow the first and third images to span the full width of the grid.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `.image-1, .image-3` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.image-1, .image-3'));
|
||||
```
|
||||
|
||||
Your `.image-1, .image-3` selector should have a `grid-column` property set to `1 / -1`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.image-1, .image-3')?.gridColumn === '1 / -1');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-rows: repeat(3, min-content);
|
||||
gap: 2rem;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,374 @@
|
||||
---
|
||||
id: 6148f34ebedc2274bceeb99c
|
||||
title: Step 77
|
||||
challengeType: 0
|
||||
dashedName: step-77
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that the magazine layout is finished, you need to make it responsive.
|
||||
|
||||
Start with a `@media` query for `only screen` with a `max-width` of `720px`. Inside, create an `.image-wrapper` selector and give it a `grid-template-columns` property of `1fr`.
|
||||
|
||||
This will collapse the three images into one column on smaller screens.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `@media` rule for `only screen and (max-width: 720px)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === 'only screen and (max-width: 720px)');
|
||||
```
|
||||
|
||||
Your new `@media` rule should have an `.image-wrapper` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.cssRules?.[0]?.selectorText === '.image-wrapper');
|
||||
```
|
||||
|
||||
Your new `.image-wrapper` selector should have a `grid-template-columns` property of `1fr`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.cssRules?.[0]?.style?.gridTemplateColumns === '1fr');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-rows: repeat(3, min-content);
|
||||
gap: 2rem;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.image-1, .image-3 {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,378 @@
|
||||
---
|
||||
id: 6148f600cde42b7670c2611f
|
||||
title: Step 78
|
||||
challengeType: 0
|
||||
dashedName: step-78
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create another `@media` query for `only screen` with a `max-width` of `600px`. Within, create a `.text-with-images` rule and give it a `grid-template-columns` property of `1fr`.
|
||||
|
||||
This will collapse your bottom text area into a single column on smaller screens.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `@media` query for `only screen and (max-width: 600px)`. This should be below your previous `@media` query.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.media?.mediaText === 'only screen and (max-width: 600px)');
|
||||
```
|
||||
|
||||
Your new `@media` query should have a `.text-with-images` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.cssRules?.[0]?.selectorText === '.text-with-images');
|
||||
```
|
||||
|
||||
Your new `.text-with-images` selector should have a `grid-template-columns` property with a value of `1fr`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.cssRules?.[0]?.style?.gridTemplateColumns === '1fr');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-rows: repeat(3, min-content);
|
||||
gap: 2rem;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.image-1, .image-3 {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
.image-wrapper {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,403 @@
|
||||
---
|
||||
id: 6148f693e0728f77c87f3020
|
||||
title: Step 79
|
||||
challengeType: 0
|
||||
dashedName: step-79
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a third `@media` query for `only screen` with a `max-width` of `550px`. Within, create a `.hero-title` selector with a `font-size` set to `6rem`, a `.hero-subtitle, .author, .quote, .list-header` selector with a `font-size` set to `1.8rem`, a `.social-icons` selector with a `font-size` set to `2rem`, and a `.text` selector with a `font-size` set to `1.6rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `@media` query for `only screen` with a `max-width` of `550px`. This should come after your previous two.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.media?.mediaText === 'only screen and (max-width: 550px)');
|
||||
```
|
||||
|
||||
Your new `@media` rule should have a `.hero-title` selector, a `.hero-subtitle, .author, .quote, .list-header` selector, a `.social-icons` selector, and a `.text` selector. These selectors should be in this order.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[0]?.selectorText === '.hero-title');
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[1]?.selectorText === '.hero-subtitle, .author, .quote, .list-header');
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[2]?.selectorText === '.social-icons');
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[3]?.selectorText === '.text');
|
||||
```
|
||||
|
||||
Your `.hero-title` selector should have a `font-size` set to `6rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[0]?.style?.fontSize === '6rem');
|
||||
```
|
||||
|
||||
Your `.hero-subtitle, .author, .quote, .list-header` selector should have a `font-size` set to `1.8rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[1]?.style?.fontSize === '1.8rem');
|
||||
```
|
||||
|
||||
Your `.social-icons` selector should have a `font-size` set to `2rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[2]?.style?.fontSize === '2rem');
|
||||
```
|
||||
|
||||
Your `.text` selector should have a `font-size` set to `1.6rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[3]?.style?.fontSize === '1.6rem');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-rows: repeat(3, min-content);
|
||||
gap: 2rem;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.image-1, .image-3 {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
.image-wrapper {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.text-with-images {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,405 @@
|
||||
---
|
||||
id: 6148f6f7d8914c78e93136ca
|
||||
title: Step 80
|
||||
challengeType: 0
|
||||
dashedName: step-80
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create one final `@media` query for `only screen` with a `max-width` of `420px`. Within, create a `.hero-title` selector with a `font-size` property set to `4.5rem`.
|
||||
|
||||
Congratulations! Your magazine is now complete.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `@media` query for `only screen and (max-width: 420px)`. This should be the last query in the `@media` query list.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.media?.mediaText === 'only screen and (max-width: 420px)');
|
||||
```
|
||||
|
||||
Your new `@media` query should have a `.hero-title` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.cssRules?.[0]?.selectorText === '.hero-title');
|
||||
```
|
||||
|
||||
Your `.hero-title` selector should have a `font-size` property set to `4.5rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.cssRules?.[0]?.style?.fontSize === '4.5rem');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Grid Magazine</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-rows: repeat(3, min-content);
|
||||
gap: 2rem;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.image-1, .image-3 {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
.image-wrapper {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.text-with-images {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 550px) {
|
||||
.hero-title {
|
||||
font-size: 6rem;
|
||||
}
|
||||
|
||||
.hero-subtitle,
|
||||
.author,
|
||||
.quote,
|
||||
.list-header {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.social-icons {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -28,5 +28,6 @@
|
||||
"intermediate-javascript-calorie-counter": "Intermediate JavaScript Calorie Counter",
|
||||
"d3-dashboard": "D3 Dashboard",
|
||||
"registration-form": "Registration Form",
|
||||
"css-photo-gallery": "CSS Photo Gallery"
|
||||
"css-photo-gallery": "CSS Photo Gallery",
|
||||
"css-grid-magazine": "CSS Grid Magazine"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user