mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-06-19 21:09:51 +08:00
chore(curriculum): rework first workshop (#60607)
This commit is contained in:
Tom
GitHub
parent
6772f61c0e
commit
c99800d584
@ -12,20 +12,20 @@
|
||||
"id": "6823ac607bfdbc46331b2559",
|
||||
"title": "Step 1"
|
||||
},
|
||||
{
|
||||
"id": "682cd206883fc7b25eb539c5",
|
||||
{
|
||||
"id": "682ba2318000b62f179bdf04",
|
||||
"title": "Step 2"
|
||||
},
|
||||
{
|
||||
"id": "682cd20b883fc7b25eb539c6",
|
||||
"id": "682cd206883fc7b25eb539c5",
|
||||
"title": "Step 3"
|
||||
},
|
||||
{
|
||||
"id": "682ba2318000b62f179bdf04",
|
||||
"id": "6823c1a0bcada44f32bf0bdc",
|
||||
"title": "Step 4"
|
||||
},
|
||||
{
|
||||
"id": "6823c1a0bcada44f32bf0bdc",
|
||||
"id": "682cd20b883fc7b25eb539c6",
|
||||
"title": "Step 5"
|
||||
},
|
||||
{
|
||||
@ -45,9 +45,13 @@
|
||||
"title": "Step 9"
|
||||
},
|
||||
{
|
||||
"id": "6823e637c1c0ed56f781b4fc",
|
||||
"id": "683921c4769fd23dbadec2fe",
|
||||
"title": "Step 10"
|
||||
},
|
||||
{
|
||||
"id": "6823e637c1c0ed56f781b4fc",
|
||||
"title": "Step 11"
|
||||
}
|
||||
],
|
||||
"helpCategory": "HTML-CSS"
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@ demoType: onLoad
|
||||
|
||||
# --description--
|
||||
|
||||
Welcome to your code editor, where you can write HTML code.
|
||||
HTML stands for HyperText Markup Language. It's the code that defines the structure and content of a webpage. This is your code editor, where you'll write HTML.
|
||||
|
||||
Find line 1 in the editor and type this text:
|
||||
|
||||
@ -37,4 +37,3 @@ assert.match(code, /welcome\s*to\s*freecodecamp/i)
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6823c1a0bcada44f32bf0bdc
|
||||
title: Step 5
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -10,26 +10,26 @@ dashedName: step-5
|
||||
An `h1` element is the main heading of a webpage and you should only use one per page. `h2` elements represent subheadings. You can have multiple per page and they look like this:
|
||||
|
||||
```html
|
||||
<h2>I am a subheading.</h2>
|
||||
<h2>This is a subheading.</h2>
|
||||
```
|
||||
|
||||
Turn the `Full Stack Curriculum` text into an `h2` element by surrounding it with opening and closing `h2` tags.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h2` element should have an opening tag. Opening tags have this syntax: `<elementName>`.
|
||||
Your `h2` element should have an opening `<h2>` tag.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("h2"));
|
||||
```
|
||||
|
||||
Your `h2` element should have a closing tag. Closing tags have this syntax: `</elementName>`.
|
||||
Your `h2` element should have a closing `</h2>` tag.
|
||||
|
||||
```js
|
||||
assert.match(code, /<\/h2\s*\>/);
|
||||
```
|
||||
|
||||
Your `h2` element's text should be `Full Stack Curriculum`.
|
||||
Your `h2` element should look like this: `<h2>Full Stack Curriculum</h2>`.
|
||||
|
||||
```js
|
||||
// purposefully removing friction for early users to help improve retention in early lessons
|
||||
@ -37,12 +37,6 @@ Your `h2` element's text should be `Full Stack Curriculum`.
|
||||
assert.match(code, /\<h2\s*\>\s*Full\s*Stack\s*Curriculum\s*\<\/h2\s*\>/i);
|
||||
```
|
||||
|
||||
Your `h2` element should be below your `h1` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("h1 + h2"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
@ -52,5 +46,4 @@ assert.exists(document.querySelector("h1 + h2"));
|
||||
--fcc-editable-region--
|
||||
Full Stack Curriculum
|
||||
--fcc-editable-region--
|
||||
Learn the skills to become a full stack developer
|
||||
```
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: step-6
|
||||
When you need to add a paragraph to a webpage, you can use the `p` element like this:
|
||||
|
||||
```html
|
||||
<p>I am a paragraph element.</p>
|
||||
<p>This is a paragraph element.</p>
|
||||
```
|
||||
|
||||
Turn `Learn all of the skills to become a full stack developer` into a paragraph element.
|
||||
|
||||
@ -7,18 +7,9 @@ dashedName: step-7
|
||||
|
||||
# --description--
|
||||
|
||||
There are six heading elements in HTML. Here are all of them in order from most important to least:
|
||||
There are six heading elements in HTML: `h1` through `h6`. They're used to show the importance of sections on your webpage, with `h1` being the most important and `h6` the least.
|
||||
|
||||
```html
|
||||
<h1>Heading level 1</h1>
|
||||
<h2>Heading level 2</h2>
|
||||
<h3>Heading level 3</h3>
|
||||
<h4>Heading level 4</h4>
|
||||
<h5>Heading level 5</h5>
|
||||
<h6>Heading level 6</h6>
|
||||
```
|
||||
|
||||
Below your `p` element, add an `h3` element that displays the following text:
|
||||
Below your `p` element, add an `h3` heading with the text:
|
||||
|
||||
```md
|
||||
Introduction to HTML
|
||||
@ -26,19 +17,19 @@ Introduction to HTML
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h3` element should have an opening tag. Opening tags have this syntax: `<elementName>`.
|
||||
Your `h3` element should have an opening `<h3>` tag.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("h3"));
|
||||
```
|
||||
|
||||
Your `h3` element should have a closing tag. Closing tags have this syntax: `</elementName>`.
|
||||
Your `h3` element should have a closing `</h3>` tag.
|
||||
|
||||
```js
|
||||
assert.match(code, /<\/h3\s*\>/);
|
||||
```
|
||||
|
||||
Your `h3` element's text should be `Introduction to HTML`. You can copy the text from the instructions.
|
||||
Your `h3` element's text should be `Introduction to HTML`.
|
||||
|
||||
```js
|
||||
// purposefully removing friction for early users to help improve retention in early lessons
|
||||
|
||||
@ -7,20 +7,12 @@ dashedName: step-9
|
||||
|
||||
# --description--
|
||||
|
||||
You're getting the hang of it. Now it is time to add another `h3` and `p` element to the page.
|
||||
|
||||
First, add an `h3` element with the text:
|
||||
You're getting the hang of it. Next, add another `h3` element at the bottom of the editor with the text:
|
||||
|
||||
```md
|
||||
Introduction to CSS
|
||||
```
|
||||
|
||||
Then, below that `h3` element, add a `p` element with the following text:
|
||||
|
||||
```md
|
||||
CSS is used to style a webpage
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a second `h3` element to the page.
|
||||
@ -37,20 +29,6 @@ Your `h3` element's text should be `Introduction to CSS`.
|
||||
assert.match(code, /\<h3\s*\>\s*Introduction\s*to\s*CSS\s*\<\/h3\s*\>/i);
|
||||
```
|
||||
|
||||
You should add a third `p` element to the page.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll("p"), 3);
|
||||
```
|
||||
|
||||
Your `p` element should have the text `CSS is used to style a webpage`. You can copy the text from the instructions.
|
||||
|
||||
```js
|
||||
// purposefully removing friction for early users to help improve retention in early lessons
|
||||
// this if very forgiving of spaces and casing
|
||||
assert.match(code, /\<p\s*\>\s*CSS\s*is\s*used\s*to\s*style\s*a\s*webpage\s*\<\/p\s*\>/i);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
---
|
||||
id: 6823e637c1c0ed56f781b4fc
|
||||
title: Step 10
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For the last step of the workshop, you will add another `h3` and `p` element to the page.
|
||||
Finally, JavaScript makes your webpage interactive — it lets you tell the page what to do when someone clicks a button, submits a form, or many other things.
|
||||
|
||||
For the last step of the workshop, add another `h3` and `p` element to the page describing JavaScript.
|
||||
|
||||
First, add an `h3` element with the text:
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 682ba2318000b62f179bdf04
|
||||
title: Step 4
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -19,19 +19,19 @@ Turn your `Welcome to freeCodeCamp` text into an `h1` element by adding an openi
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h1` element should have an opening tag. Opening tags have this syntax: `<elementName>`.
|
||||
Your `h1` element should have an opening `<h1>` tag.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("h1"));
|
||||
```
|
||||
|
||||
Your `h1` element should have a closing tag. Closing tags have this syntax: `</elementName>`.
|
||||
Your `h1` element should have a closing `</h1>` tag.
|
||||
|
||||
```js
|
||||
assert.match(code, /<\/h1\s*\>/);
|
||||
```
|
||||
|
||||
Your `h1` element's text should be `Welcome to freeCodeCamp`. You have either omitted the text, have a typo, or it is not between the `h1` element's opening and closing tags.
|
||||
Your `h1` element should look like this: `<h1>Welcome to freeCodeCamp</h1>`.
|
||||
|
||||
```js
|
||||
// purposefully removing friction for early users to help improve retention in early lessons
|
||||
@ -39,16 +39,6 @@ Your `h1` element's text should be `Welcome to freeCodeCamp`. You have either om
|
||||
assert.match(code, /\<h1\s*\>\s*Welcome\s*to\s*freeCodeCamp\s*\<\/h1\s*\>/i);
|
||||
```
|
||||
|
||||
You appear to be using a browser extension that is modifying the page. Be sure to turn off all browser extensions.
|
||||
|
||||
```js
|
||||
if(__checkForBrowserExtensions){
|
||||
assert.isAtMost(document.querySelectorAll("script").length, 2);
|
||||
assert.equal(document.querySelectorAll("style").length, 1);
|
||||
assert.equal(document.querySelectorAll("link").length, 0);
|
||||
}
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
@ -57,6 +47,4 @@ if(__checkForBrowserExtensions){
|
||||
--fcc-editable-region--
|
||||
Welcome to freeCodeCamp
|
||||
--fcc-editable-region--
|
||||
Full Stack Curriculum
|
||||
Learn the skills to become a full stack developer
|
||||
```
|
||||
|
||||
@ -1,22 +1,20 @@
|
||||
---
|
||||
id: 682cd206883fc7b25eb539c5
|
||||
title: Step 2
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Notice that the HTML code you write in the editor shows up in the preview.
|
||||
Notice that the HTML you write in the editor shows up in the preview. In this workshop, you will write the HTML for a partial curriculum webpage.
|
||||
|
||||
Below the text you added, type the following on line 2:
|
||||
Below your `h1` element, type the following on the empty line:
|
||||
|
||||
```md
|
||||
Full Stack Curriculum
|
||||
```
|
||||
|
||||
When you are done, click the "check your code" button to see if it's correct.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have the text `Full Stack Curriculum` in your editor. Double-check for spelling.
|
||||
@ -32,9 +30,8 @@ assert.match(code, /full\s*stack\s*curriculum/i)
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
Welcome to freeCodeCamp
|
||||
<h1>Welcome to freeCodeCamp</h1>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
|
||||
@ -1,14 +1,12 @@
|
||||
---
|
||||
id: 682cd20b883fc7b25eb539c6
|
||||
title: Step 3
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML stands for HyperText Markup Language. It represents the content and structure of a webpage. In this workshop, you will write the HTML code for a partial curriculum outline.
|
||||
|
||||
Below the other two lines of text, add:
|
||||
|
||||
```md
|
||||
@ -30,10 +28,9 @@ assert.match(code, /learn\s*the\s*skills\s*to\s*become\s*a\s*full\s*stack\s*deve
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
Welcome to freeCodeCamp
|
||||
Full Stack Curriculum
|
||||
<h1>Welcome to freeCodeCamp</h1>
|
||||
<h2>Full Stack Curriculum</h2>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
|
||||
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 683921c4769fd23dbadec2fe
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
While HTML defines the structure and content of a webpage, CSS is used to add style — things like colors, fonts, spacing, and layout.
|
||||
|
||||
Below the `h3` you just added, add another paragraph element with the text:
|
||||
|
||||
```md
|
||||
CSS is used to style a webpage
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a second `h3` element to the page.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll("h3"), 2);
|
||||
```
|
||||
|
||||
Your `h3` element's text should be `Introduction to CSS`.
|
||||
|
||||
```js
|
||||
// purposefully removing friction for early users to help improve retention in early lessons
|
||||
// this if very forgiving of spaces and casing
|
||||
assert.match(code, /\<h3\s*\>\s*Introduction\s*to\s*CSS\s*\<\/h3\s*\>/i);
|
||||
```
|
||||
|
||||
You should add a third `p` element to the page.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll("p"), 3);
|
||||
```
|
||||
|
||||
Your `p` element should have the text `CSS is used to style a webpage`. You can copy the text from the instructions.
|
||||
|
||||
```js
|
||||
// purposefully removing friction for early users to help improve retention in early lessons
|
||||
// this if very forgiving of spaces and casing
|
||||
assert.match(code, /\<p\s*\>\s*CSS\s*is\s*used\s*to\s*style\s*a\s*webpage\s*\<\/p\s*\>/i);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Welcome to freeCodeCamp</h1>
|
||||
<h2>Full Stack Curriculum</h2>
|
||||
<p>Learn the skills to become a full stack developer</p>
|
||||
|
||||
<h3>Introduction to HTML</h3>
|
||||
<p>HTML represents the content and structure of a webpage</p>
|
||||
|
||||
--fcc-editable-region--
|
||||
<h3>Introduction to CSS</h3>
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user