mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
chore(curriculum): update HTML chapter to address last issue found in analytics report (#60386)
Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com> Co-authored-by: ahmad abdolsaheb <ahmad.abdolsaheb@gmail.com>
This commit is contained in:
Jessica Wilkins
@@ -1744,7 +1744,6 @@
|
||||
"This certification will take you a substantial amount of time and effort to complete. If you start now, you may be ready to start the remaining material and final exam when we launch it in the coming months."
|
||||
],
|
||||
"chapters": {
|
||||
"freecodecamp": "Welcome",
|
||||
"html": "HTML",
|
||||
"css": "CSS",
|
||||
"javascript": "JavaScript",
|
||||
@@ -1755,7 +1754,6 @@
|
||||
"exam-certified-full-stack-developer": "Certified Full Stack Developer Exam"
|
||||
},
|
||||
"modules": {
|
||||
"getting-started-with-freecodecamp": "Getting Started with freeCodeCamp",
|
||||
"basic-html": "Basic HTML",
|
||||
"semantic-html": "Semantic HTML",
|
||||
"html-forms-and-tables": "Forms and Tables",
|
||||
@@ -1827,17 +1825,32 @@
|
||||
"exam-python": "Python Exam"
|
||||
},
|
||||
"blocks": {
|
||||
"lecture-welcome-to-freecodecamp": {
|
||||
"title": "Welcome to freeCodeCamp",
|
||||
"workshop-curriculum-outline": {
|
||||
"title": "Build a Curriculum Outline",
|
||||
"intro": [
|
||||
"Watch these videos to learn what freeCodeCamp is, and how millions of people have learned to code and gotten developer jobs using it."
|
||||
"Welcome to freeCodeCamp!",
|
||||
"This workshop will serve as your introduction to HTML and coding in general. You will learn about headings and paragraph elements."
|
||||
]
|
||||
},
|
||||
"lecture-welcome-to-freecodecamp": {
|
||||
"title": "Welcome Message from Quincy Larson",
|
||||
"intro": [
|
||||
"Hear from Quincy Larson, the founder and teacher of freeCodeCamp.",
|
||||
"Quincy will welcome you to the platform and talk about how the certification works. Quincy will also provide tips on how to learn effectively."
|
||||
]
|
||||
},
|
||||
"lab-debug-camperbots-profile-page": {
|
||||
"title": "Debug Camperbot's Profile Page",
|
||||
"intro": [
|
||||
"Camperbot is learning how to code too and needs some help with their HTML.",
|
||||
"In this lab, you will help Camperbot find and fix the errors in their code."
|
||||
]
|
||||
},
|
||||
"lecture-what-is-html": {
|
||||
"title": "What is HTML?",
|
||||
"title": "Understanding HTML Attributes and the HTML Boilerplate",
|
||||
"intro": [
|
||||
"In this lecture video, you will be introduced to HTML (HyperText Markup Language), a markup language for creating web pages.",
|
||||
"You will learn about HTML's role on the web, the basic syntax, and what HTML attributes are."
|
||||
"In these lecture videos, you will learn more about HTML (HyperText Markup Language), a markup language for creating web pages.",
|
||||
"You will learn about HTML's role on the web, the HTML boilerplate and what HTML attributes are."
|
||||
]
|
||||
},
|
||||
"workshop-cat-photo-app": {
|
||||
@@ -2036,10 +2049,7 @@
|
||||
"Open up this page to review concepts around the basics of HTML elements, semantic HTML, tables, forms and accessibility."
|
||||
]
|
||||
},
|
||||
"qpra": {
|
||||
"title": "30",
|
||||
"intro": []
|
||||
},
|
||||
"qpra": { "title": "30", "intro": [] },
|
||||
"lecture-understanding-computer-internet-and-tooling-basics": {
|
||||
"title": "Understanding Computer, Internet, and Tooling Basics",
|
||||
"intro": [
|
||||
@@ -3443,10 +3453,7 @@
|
||||
"Open up this page to review all of the concepts taught including variables, strings, booleans, functions, objects, arrays, debugging, working with the DOM and more."
|
||||
]
|
||||
},
|
||||
"kagw": {
|
||||
"title": "258",
|
||||
"intro": []
|
||||
},
|
||||
"kagw": { "title": "258", "intro": [] },
|
||||
"lecture-introduction-to-javascript-libraries-and-frameworks": {
|
||||
"title": "Introduction to JavaScript Libraries and Frameworks",
|
||||
"intro": [
|
||||
@@ -3518,14 +3525,8 @@
|
||||
"In these lecture videos, you will learn about effects and referencing values with React."
|
||||
]
|
||||
},
|
||||
"xdyh": {
|
||||
"title": "270",
|
||||
"intro": []
|
||||
},
|
||||
"vjgg": {
|
||||
"title": "272",
|
||||
"intro": []
|
||||
},
|
||||
"xdyh": { "title": "270", "intro": [] },
|
||||
"vjgg": { "title": "272", "intro": [] },
|
||||
"review-react-state-and-hooks": {
|
||||
"title": "React State and Hooks Review",
|
||||
"intro": [
|
||||
@@ -3564,10 +3565,7 @@
|
||||
"In these lecture videos, you will learn about data fetching and memoization in React."
|
||||
]
|
||||
},
|
||||
"ffpt": {
|
||||
"title": "279",
|
||||
"intro": []
|
||||
},
|
||||
"ffpt": { "title": "279", "intro": [] },
|
||||
"lab-currency-converter": {
|
||||
"title": "Build a Currency Converter",
|
||||
"intro": [
|
||||
@@ -3668,26 +3666,11 @@
|
||||
"In these lecture videos, you will learn what TypeScript is and how to use it."
|
||||
]
|
||||
},
|
||||
"trvf": {
|
||||
"title": "293",
|
||||
"intro": []
|
||||
},
|
||||
"kwmg": {
|
||||
"title": "294",
|
||||
"intro": []
|
||||
},
|
||||
"nodx": {
|
||||
"title": "295",
|
||||
"intro": []
|
||||
},
|
||||
"erfj": {
|
||||
"title": "296",
|
||||
"intro": []
|
||||
},
|
||||
"muyw": {
|
||||
"title": "297",
|
||||
"intro": []
|
||||
},
|
||||
"trvf": { "title": "293", "intro": [] },
|
||||
"kwmg": { "title": "294", "intro": [] },
|
||||
"nodx": { "title": "295", "intro": [] },
|
||||
"erfj": { "title": "296", "intro": [] },
|
||||
"muyw": { "title": "297", "intro": [] },
|
||||
"review-typescript": {
|
||||
"title": "Typescript Review",
|
||||
"intro": [
|
||||
@@ -3705,14 +3688,8 @@
|
||||
"Review the Front End Libraries concepts to prepare for the upcoming quiz."
|
||||
]
|
||||
},
|
||||
"rdzk": {
|
||||
"title": "301",
|
||||
"intro": []
|
||||
},
|
||||
"vtpz": {
|
||||
"title": "302",
|
||||
"intro": []
|
||||
},
|
||||
"rdzk": { "title": "301", "intro": [] },
|
||||
"vtpz": { "title": "302", "intro": [] },
|
||||
"workshop-bash-boilerplate": {
|
||||
"title": "Build a Boilerplate",
|
||||
"intro": [
|
||||
@@ -3730,10 +3707,7 @@
|
||||
"title": "Bash Commands Quiz",
|
||||
"intro": ["Test what you've learned bash commands with this quiz."]
|
||||
},
|
||||
"voks": {
|
||||
"title": "306",
|
||||
"intro": []
|
||||
},
|
||||
"voks": { "title": "306", "intro": [] },
|
||||
"workshop-database-of-video-game-characters": {
|
||||
"title": "Build a Database of Video Game Characters",
|
||||
"intro": [
|
||||
@@ -3759,10 +3733,7 @@
|
||||
"Test what you've learned on relational databases with this quiz."
|
||||
]
|
||||
},
|
||||
"pexz": {
|
||||
"title": "311",
|
||||
"intro": []
|
||||
},
|
||||
"pexz": { "title": "311", "intro": [] },
|
||||
"workshop-bash-five-programs": {
|
||||
"title": "Build Five Programs",
|
||||
"intro": [
|
||||
@@ -3780,10 +3751,7 @@
|
||||
"title": "Bash Scripting Quiz",
|
||||
"intro": ["Test what you've learned on bash scripting in this quiz."]
|
||||
},
|
||||
"tkgg": {
|
||||
"title": "315",
|
||||
"intro": []
|
||||
},
|
||||
"tkgg": { "title": "315", "intro": [] },
|
||||
"workshop-sql-student-database-part-1": {
|
||||
"title": "Build a Student Database: Part 1",
|
||||
"intro": [
|
||||
@@ -3833,10 +3801,7 @@
|
||||
"title": "Bash and SQL Quiz",
|
||||
"intro": ["Test what you've learned in this quiz on Bash and SQL."]
|
||||
},
|
||||
"eeez": {
|
||||
"title": "324",
|
||||
"intro": []
|
||||
},
|
||||
"eeez": { "title": "324", "intro": [] },
|
||||
"workshop-castle": {
|
||||
"title": "Build a Castle",
|
||||
"intro": [
|
||||
@@ -3852,10 +3817,7 @@
|
||||
"title": "Nano Quiz",
|
||||
"intro": ["Test what you've learned on Nano with this quiz ."]
|
||||
},
|
||||
"rhhl": {
|
||||
"title": "328",
|
||||
"intro": []
|
||||
},
|
||||
"rhhl": { "title": "328", "intro": [] },
|
||||
"workshop-sql-reference-object": {
|
||||
"title": "Build an SQL Reference Object",
|
||||
"intro": [
|
||||
@@ -4052,10 +4014,7 @@
|
||||
"title": "Placeholder - Waiting for title",
|
||||
"intro": [""]
|
||||
},
|
||||
"lab-placeholder-oop-3": {
|
||||
"title": "",
|
||||
"intro": [""]
|
||||
},
|
||||
"lab-placeholder-oop-3": { "title": "", "intro": [""] },
|
||||
"review-object-oriented-programming": {
|
||||
"title": "Object Oriented Programming Review",
|
||||
"intro": [
|
||||
@@ -4109,14 +4068,8 @@
|
||||
"title": "Build a Bisection Method",
|
||||
"intro": [""]
|
||||
},
|
||||
"workshop-merge-sort": {
|
||||
"title": "Build a Merge Sort",
|
||||
"intro": [""]
|
||||
},
|
||||
"lab-quick-sort": {
|
||||
"title": "Build a Quick Sort",
|
||||
"intro": [""]
|
||||
},
|
||||
"workshop-merge-sort": { "title": "Build a Merge Sort", "intro": [""] },
|
||||
"lab-quick-sort": { "title": "Build a Quick Sort", "intro": [""] },
|
||||
"lab-selection-sort": {
|
||||
"title": "Build a Selection Sort",
|
||||
"intro": [""]
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Introduction to the Debug Camperbot's Profile Page
|
||||
block: lab-debug-camperbots-profile-page
|
||||
superBlock: full-stack-developer
|
||||
---
|
||||
|
||||
## Introduction to the Debug Camperbot's Profile Page
|
||||
|
||||
In this lab, you will help Camperbot debug the errors in their HTML.
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Introduction to the Build a Curriculum Outline
|
||||
block: workshop-curriculum-outline
|
||||
superBlock: full-stack-developer
|
||||
---
|
||||
|
||||
## Introduction to the Build a Curriculum Outline
|
||||
|
||||
Welcome to freeCodeCamp! This is your first introduction to HTML and coding in general.
|
||||
@@ -783,7 +783,11 @@ const Editor = (props: EditorProps): JSX.Element => {
|
||||
descContainer.appendChild(desc);
|
||||
desc.innerHTML = description;
|
||||
Prism.hooks.add('complete', enhancePrismAccessibility);
|
||||
Prism.hooks.add('complete', makePrismCollapsible);
|
||||
|
||||
// To reduce confusion on the first workshop. Will need to find a better solution.
|
||||
if (props.block !== 'workshop-curriculum-outline') {
|
||||
Prism.hooks.add('complete', makePrismCollapsible);
|
||||
}
|
||||
Prism.highlightAllUnder(desc);
|
||||
|
||||
// Since the description can be resized without React knowing about it, the
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"name": "Debug Camperbot's Profile Page",
|
||||
"blockType": "lab",
|
||||
"blockLayout": "link",
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"dashedName": "lab-debug-camperbots-profile-page",
|
||||
"superBlock": "full-stack-developer",
|
||||
"challengeOrder": [{ "id": "6823f9df49cc206af5471a30", "title": "Debug Camperbot's Profile Page" }],
|
||||
"helpCategory": "HTML-CSS"
|
||||
}
|
||||
@@ -6,7 +6,7 @@
|
||||
"challengeOrder": [
|
||||
{
|
||||
"id": "66f6db08d55022680a3cfbc9",
|
||||
"title": "What Is HTML, and What Role Does It Play on the Web?"
|
||||
"title": "What Role Does HTML Play on the Web?"
|
||||
},
|
||||
{
|
||||
"id": "6708143cab2b583ecd3324f5",
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
{
|
||||
"name": "Build a Curriculum Outline",
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"blockType": "workshop",
|
||||
"blockLayout": "challenge-grid",
|
||||
"dashedName": "workshop-curriculum-outline",
|
||||
"superBlock": "full-stack-developer",
|
||||
"challengeOrder": [
|
||||
{
|
||||
"id": "6823ac607bfdbc46331b2559",
|
||||
"title": "Step 1"
|
||||
},
|
||||
{
|
||||
"id": "682cd206883fc7b25eb539c5",
|
||||
"title": "Step 2"
|
||||
},
|
||||
{
|
||||
"id": "682cd20b883fc7b25eb539c6",
|
||||
"title": "Step 3"
|
||||
},
|
||||
{
|
||||
"id": "682ba2318000b62f179bdf04",
|
||||
"title": "Step 4"
|
||||
},
|
||||
{
|
||||
"id": "6823c1a0bcada44f32bf0bdc",
|
||||
"title": "Step 5"
|
||||
},
|
||||
{
|
||||
"id": "6823d6244511f252c8300eed",
|
||||
"title": "Step 6"
|
||||
},
|
||||
{
|
||||
"id": "6823d9ac8bdc3853df65a1ff",
|
||||
"title": "Step 7"
|
||||
},
|
||||
{
|
||||
"id": "6823e036ea4b71553558c01b",
|
||||
"title": "Step 8"
|
||||
},
|
||||
{
|
||||
"id": "6823e169fda14755fbf00445",
|
||||
"title": "Step 9"
|
||||
},
|
||||
{
|
||||
"id": "6823e637c1c0ed56f781b4fc",
|
||||
"title": "Step 10"
|
||||
}
|
||||
],
|
||||
"helpCategory": "HTML-CSS"
|
||||
}
|
||||
+118
@@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 6823f9df49cc206af5471a30
|
||||
title: Debug Camperbot's Profile Page
|
||||
challengeType: 25
|
||||
dashedName: lab-debug-camperbots-profile-page
|
||||
# Purposefully removed the demo type because I don't want any example to show since this is a debugging project.
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Camperbot just started learning how to code and is trying to build a profile page. They asked a friend to look over their code so far and their friend said it had tons of errors.
|
||||
|
||||
Your job is to fix all of Camperbot's errors so they can continue to build their profile page. Complete the items in the user stories below and click "Run the Tests" to see if you fixed all the errors.
|
||||
|
||||
**User Stories:**
|
||||
|
||||
1. Camperbot is not following best practices and has multiple `h1` elements on the page. Remove all `h1` elements except for the first one.
|
||||
2. Camperbot is trying to use a `heading2` element. But that element does not exist in HTML. Fix that mistake so it uses the correct second level heading element.
|
||||
3. Camperbot is trying to add some paragraphs but is using the wrong element. Fix these errors to use the correct HTML element for paragraphs.
|
||||
4. Camperbot is using an `h3` element for the `Background and Interests` subheading but it has a syntax error. Spot the issue and resolve it.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should only have one `h1` on the page.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll("h1"), 1);
|
||||
```
|
||||
|
||||
You should not remove the `<h1>Hello from Camperbot!</h1>` from the page.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelector("h1:first-of-type")?.innerText, "Hello from Camperbot!");
|
||||
```
|
||||
|
||||
You should have a valid `h2` element on the page.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("h2"));
|
||||
```
|
||||
|
||||
You should not change the `About` text for the `h2` element.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelector("h2")?.innerText, "About");
|
||||
```
|
||||
|
||||
Your first paragraph element should have a valid opening tag. Remember that `p` elements have opening tags using this syntax: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<p>\s*My\s+name/);
|
||||
```
|
||||
|
||||
Your first paragraph element should have a valid closing tag. Remember that `p` elements have closing tags using this syntax: `</elementName>`.
|
||||
|
||||
```js
|
||||
assert.match(code, /new\s+things\.<\/p>/);
|
||||
```
|
||||
|
||||
Your second paragraph element should have a valid opening tag. Remember that `p` elements have opening tags using this syntax: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<p>\s*I\s+enjoy/);
|
||||
```
|
||||
|
||||
Your second paragraph element should have a valid closing tag. Remember that `p` elements have closing tags using this syntax: `</elementName>`.
|
||||
|
||||
```js
|
||||
assert.match(code, /solving\s+puzzles\.<\/p>/);
|
||||
```
|
||||
|
||||
Your first valid paragraph element should have the text `My name is Camperbot and I love reading and learning new things.`. Double check your spelling.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelector("p:first-of-type")?.innerText, "My name is Camperbot and I love reading and learning new things.");
|
||||
```
|
||||
|
||||
Your `h3` element should have a valid closing tag. Remember that `h3` elements have closing tags using this syntax: `</elementName>`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<\/h3\>/);
|
||||
```
|
||||
|
||||
Your second valid paragraph element should have the text `I enjoy solving puzzles.`. Double check your spelling.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelector("h3 + p")?.innerText, "I enjoy solving puzzles.");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello from Camperbot!</h1>
|
||||
|
||||
<h1>Welcome!</h1>
|
||||
|
||||
<heading2>About</heading2>
|
||||
|
||||
<pp>My name is Camperbot and I love reading and learning new things.<pp>
|
||||
|
||||
<h3>Background and Interests<h3>
|
||||
<pp>I enjoy solving puzzles.<pp>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello from Camperbot!</h1>
|
||||
|
||||
<h2>About</h2>
|
||||
|
||||
<p>My name is Camperbot and I love reading and learning new things.</p>
|
||||
|
||||
<h3>Background and Interests</h3>
|
||||
<p>I enjoy solving puzzles.</p>
|
||||
```
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 66f6db08d55022680a3cfbc9
|
||||
title: What Is HTML, and What Role Does It Play on the Web?
|
||||
title: What Role Does HTML Play on the Web?
|
||||
challengeType: 11
|
||||
videoId: Me-GFJKL-9E
|
||||
dashedName: what-is-html
|
||||
@@ -12,7 +12,7 @@ Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What Is HTML, and What Role Does It Play on the Web?
|
||||
What Role Does HTML Play on the Web?
|
||||
|
||||
HTML, which stands for Hypertext Markup Language, is a markup language for creating web pages. When you visit a website and see content like paragraphs, headings, links, images, and videos; that's HTML. HTML represents the content and structure of a webpage through the use of elements. Here's an example of a paragraph element:
|
||||
|
||||
|
||||
+2
-11
@@ -8,18 +8,9 @@ demoType: onLoad
|
||||
|
||||
# --description--
|
||||
|
||||
In this workshop, you will learn how to work with basic HTML elements like headings, paragraphs, and lists by building a cat photo app.
|
||||
In this workshop, you will continue working with basic HTML elements like headings, paragraphs, and lists by building a cat photo app.
|
||||
|
||||
The first element you will learn about is the `h1` element. The `h1` element is a heading element and is used for the main heading of a webpage.
|
||||
|
||||
```html
|
||||
<h1>This is a main heading</h1>
|
||||
```
|
||||
|
||||
Add an `h1` element with the text of `CatPhotoApp` and watch
|
||||
the change in the browser preview.
|
||||
|
||||
When you are done, press the "Check Your Code" button to see if it's correct.
|
||||
Begin the workshop by adding an `h1` element with the text of `CatPhotoApp`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
-13
@@ -7,19 +7,6 @@ dashedName: step-2
|
||||
|
||||
# --description--
|
||||
|
||||
The `h1` through `h6` heading elements are used to signify the importance of content below them. The lower the number, the higher the importance, so `h2` elements have less importance than `h1` elements.
|
||||
|
||||
```html
|
||||
<h1>most important heading element</h1>
|
||||
<h2>second most important heading element</h2>
|
||||
<h3>third most important heading element</h3>
|
||||
<h4>fourth most important heading element</h4>
|
||||
<h5>fifth most important heading element</h5>
|
||||
<h6>least important heading element</h6>
|
||||
```
|
||||
|
||||
Only use one `h1` element per page and place lower-importance headings below higher-importance headings.
|
||||
|
||||
Below the `h1` element, add an `h2` element with this text:
|
||||
|
||||
`Cat Photos`
|
||||
|
||||
+1
-1
@@ -7,7 +7,7 @@ dashedName: step-3
|
||||
|
||||
# --description--
|
||||
|
||||
The `p` element is used to create a paragraph of text on websites. Create a `p` element below your `h2` element and give it the following text:
|
||||
Create a `p` element below your `h2` element and give it the following text:
|
||||
|
||||
`Everyone loves cute cats online!`
|
||||
|
||||
|
||||
+40
@@ -0,0 +1,40 @@
|
||||
---
|
||||
id: 6823ac607bfdbc46331b2559
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
demoType: onLoad
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Welcome to your code editor, where you can write HTML code.
|
||||
|
||||
Find line 1 in the editor and type this text:
|
||||
|
||||
```md
|
||||
Welcome to freeCodeCamp
|
||||
```
|
||||
|
||||
When you are done, click the "check your code" button to see if it's correct.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have the text `Welcome to freeCodeCamp` in your editor. Double-check for spelling.
|
||||
|
||||
```js
|
||||
// purposefully providing forgiveness in spacing and casing to remove some friction and
|
||||
// keep camper retention this early on.
|
||||
assert.match(code, /welcome\s*to\s*freecodecamp/i)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
+56
@@ -0,0 +1,56 @@
|
||||
---
|
||||
id: 6823c1a0bcada44f32bf0bdc
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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>
|
||||
```
|
||||
|
||||
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>`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("h2"));
|
||||
```
|
||||
|
||||
Your `h2` element should have a closing tag. Closing tags have this syntax: `</elementName>`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<\/h2\s*\>/);
|
||||
```
|
||||
|
||||
Your `h2` element's text should be `Full Stack Curriculum`.
|
||||
|
||||
```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, /\<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--
|
||||
|
||||
```html
|
||||
<h1>Welcome to freeCodeCamp</h1>
|
||||
--fcc-editable-region--
|
||||
Full Stack Curriculum
|
||||
--fcc-editable-region--
|
||||
Learn the skills to become a full stack developer
|
||||
```
|
||||
+56
@@ -0,0 +1,56 @@
|
||||
---
|
||||
id: 6823d6244511f252c8300eed
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
When you need to add a paragraph to a web page, you can use the `p` element like this:
|
||||
|
||||
```html
|
||||
<p>I am a paragraph element.</p>
|
||||
```
|
||||
|
||||
Turn your `Learn all of the skills to become a full stack developer` into a paragraph element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `p` element should have an opening tag. Opening tags have this syntax: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("p"));
|
||||
```
|
||||
|
||||
Your `p` element should have a closing tag. Closing tags have this syntax: `</elementName>`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<\/p\s*\>/);
|
||||
```
|
||||
|
||||
Your `p` element's text should be `Learn the skills to become a full stack developer`.
|
||||
|
||||
```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*Learn\s*the\s*skills\s*to\s*become\s*a\s*full\s*stack\s*developer\s*\<\/p\s*\>/i);
|
||||
```
|
||||
|
||||
Your `p` element should be below your `h2` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("h2 + p"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Welcome to freeCodeCamp</h1>
|
||||
<h2>Full Stack Curriculum</h2>
|
||||
--fcc-editable-region--
|
||||
Learn the skills to become a full stack developer
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+61
@@ -0,0 +1,61 @@
|
||||
---
|
||||
id: 6823d9ac8bdc3853df65a1ff
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
There are six heading elements in HTML. Here are all of them in order from most important to 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:
|
||||
|
||||
```md
|
||||
Introduction to HTML
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h3` element should have an opening tag. Opening tags have this syntax: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("h3"));
|
||||
```
|
||||
|
||||
Your `h3` element should have a closing tag. Closing tags have this syntax: `</elementName>`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<\/h3\s*\>/);
|
||||
```
|
||||
|
||||
Your `h3` element's text should be `Introduction to HTML`. 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, /\<h3\s*\>\s*Introduction\s*to\s*HTML\s*\<\/h3\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>
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+47
@@ -0,0 +1,47 @@
|
||||
---
|
||||
id: 6823e036ea4b71553558c01b
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Notice that each heading looks a little different in the preview. Same with the paragraph.
|
||||
|
||||
Next, add another `p` element that displays the following text:
|
||||
|
||||
```md
|
||||
HTML represents the content and structure of a webpage
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a second `p` element.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll("p"), 2);
|
||||
```
|
||||
|
||||
Your `p` element should have the text `HTML represents the content and structure of 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*HTML\s*represents\s*the\s*content\s*and\s*structure\s*of\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>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+69
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 6823e169fda14755fbf00445
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
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:
|
||||
|
||||
```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.
|
||||
|
||||
```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--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+89
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 6823e637c1c0ed56f781b4fc
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For the last step of the workshop, you will add another `h3` and `p` element to the page.
|
||||
|
||||
First, add an `h3` element with the text:
|
||||
|
||||
```md
|
||||
Introduction to JavaScript
|
||||
```
|
||||
|
||||
Then, below that `h3` element, add a `p` element with the following text:
|
||||
|
||||
```md
|
||||
JavaScript adds interactivity to a webpage
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a third `h3` element to the page.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll("h3"), 3);
|
||||
```
|
||||
|
||||
Your `h3` element's text should be `Introduction to JavaScript`.
|
||||
|
||||
```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*JavaScript\s*\<\/h3\s*\>/i);
|
||||
```
|
||||
|
||||
You should add a fourth `p` element to the page.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll("p"), 4);
|
||||
```
|
||||
|
||||
Your `p` element should have the text `JavaScript adds interactivity to a webpage`
|
||||
|
||||
```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*JavaScript\s*adds\s*interactivity\s*to\s*a\s*web\s*page\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>
|
||||
|
||||
<h3>Introduction to CSS</h3>
|
||||
<p>CSS is used to style a webpage</p>
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Welcome to freeCodeCamp</h1>
|
||||
<h2>Full Stack Curriculum</h2>
|
||||
<p>Learn all of 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>
|
||||
|
||||
<h3>Introduction to CSS</h3>
|
||||
<p>CSS is used to style a webpage</p>
|
||||
|
||||
<h3>Introduction to JavaScript</h3>
|
||||
<p>JavaScript adds interactivity to a webpage</p>
|
||||
```
|
||||
+62
@@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 682ba2318000b62f179bdf04
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML is made up of elements. The first one you will use is the `h1` element:
|
||||
|
||||
```html
|
||||
<h1>Welcome to freeCodeCamp</h1>
|
||||
```
|
||||
|
||||
It starts with an opening tag (`<h1>`), ends with a closing tag (`</h1>`), and has the text it will display in between the tags.
|
||||
|
||||
Turn your `Welcome to freeCodeCamp` text into an `h1` element by adding an opening tag in front of it, and a closing tag after it.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h1` element should have an opening tag. Opening tags have this syntax: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("h1"));
|
||||
```
|
||||
|
||||
Your `h1` element should have a closing tag. Closing tags have this syntax: `</elementName>`.
|
||||
|
||||
```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.
|
||||
|
||||
```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, /\<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--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
Welcome to freeCodeCamp
|
||||
--fcc-editable-region--
|
||||
Full Stack Curriculum
|
||||
Learn the skills to become a full stack developer
|
||||
```
|
||||
+40
@@ -0,0 +1,40 @@
|
||||
---
|
||||
id: 682cd206883fc7b25eb539c5
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Notice that the HTML code you write in the editor shows up in the preview.
|
||||
|
||||
Below the text you added, type the following on line 2:
|
||||
|
||||
```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.
|
||||
|
||||
```js
|
||||
// purposefully providing forgiveness in spacing and casing to remove some friction and
|
||||
// keep camper retention this early on.
|
||||
assert.match(code, /full\s*stack\s*curriculum/i)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
Welcome to freeCodeCamp
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
+39
@@ -0,0 +1,39 @@
|
||||
---
|
||||
id: 682cd20b883fc7b25eb539c6
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --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
|
||||
Learn the skills to become a full stack developer
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have the text `Learn the skills to become a full stack developer` in your editor. Double-check for spelling.
|
||||
|
||||
```js
|
||||
// purposefully providing forgiveness in spacing and casing to remove some friction and
|
||||
// keep camper retention this early on.
|
||||
assert.match(code, /learn\s*the\s*skills\s*to\s*become\s*a\s*full\s*stack\s*developer/i)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
Welcome to freeCodeCamp
|
||||
Full Stack Curriculum
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -1,24 +1,20 @@
|
||||
{
|
||||
"chapters": [
|
||||
{
|
||||
"dashedName": "freecodecamp",
|
||||
"modules": [
|
||||
{
|
||||
"dashedName": "getting-started-with-freecodecamp",
|
||||
"blocks": [
|
||||
{
|
||||
"dashedName": "lecture-welcome-to-freecodecamp"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"dashedName": "html",
|
||||
"modules": [
|
||||
{
|
||||
"dashedName": "basic-html",
|
||||
"blocks": [
|
||||
{
|
||||
"dashedName": "workshop-curriculum-outline"
|
||||
},
|
||||
{
|
||||
"dashedName": "lecture-welcome-to-freecodecamp"
|
||||
},
|
||||
{
|
||||
"dashedName": "lab-debug-camperbots-profile-page"
|
||||
},
|
||||
{
|
||||
"dashedName": "lecture-what-is-html"
|
||||
},
|
||||
|
||||
@@ -355,11 +355,11 @@ test.describe('Donation modal appearance logic - Certified user claiming a new m
|
||||
}) => {
|
||||
test.setTimeout(40000);
|
||||
|
||||
// Go to the last lecture of the Welcome to freeCodeCamp block.
|
||||
// Go to the last lecture of the Code Editors block.
|
||||
// This lecture is not added to the seed data, so it is not completed.
|
||||
// By completing this lecture, we claim both the block and its module.
|
||||
await page.goto(
|
||||
'/learn/full-stack-developer/lecture-welcome-to-freecodecamp/how-can-you-build-effective-learning-habits-and-work-smarter'
|
||||
'/learn/full-stack-developer/lecture-working-with-code-editors-and-ides/what-are-some-good-vs-code-extensions-you-can-use-in-your-editor'
|
||||
);
|
||||
|
||||
// Wait for the page content to render
|
||||
@@ -372,9 +372,9 @@ test.describe('Donation modal appearance logic - Certified user claiming a new m
|
||||
.locator("div[class='video-quiz-options']")
|
||||
.all();
|
||||
|
||||
await radioGroups[0].getByRole('radio').nth(2).click({ force: true });
|
||||
await radioGroups[0].getByRole('radio').nth(1).click({ force: true });
|
||||
await radioGroups[1].getByRole('radio').nth(2).click({ force: true });
|
||||
await radioGroups[2].getByRole('radio').nth(3).click({ force: true });
|
||||
await radioGroups[2].getByRole('radio').nth(1).click({ force: true });
|
||||
|
||||
await page.getByRole('button', { name: /Check your answer/ }).click();
|
||||
await page.getByRole('button', { name: /Submit and go/ }).click();
|
||||
@@ -392,9 +392,7 @@ test.describe('Donation modal appearance logic - Certified user claiming a new m
|
||||
// Second part of the modal.
|
||||
// Use `slowExpect` as we need to wait 20s for this part to show up.
|
||||
await slowExpect(
|
||||
donationModal.getByText(
|
||||
'Nicely done. You just completed Getting Started with freeCodeCamp.'
|
||||
)
|
||||
donationModal.getByText('Nicely done. You just completed Code Editors.')
|
||||
).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -163,7 +163,7 @@ test.describe('Super Block Page - Authenticated User', () => {
|
||||
// What is HTML block
|
||||
await expect(
|
||||
page.getByRole('button', {
|
||||
name: /Lecture What is HTML/
|
||||
name: /Lecture Understanding HTML Attributes and the HTML Boilerplate/
|
||||
})
|
||||
).toHaveAttribute('aria-expanded', 'true');
|
||||
});
|
||||
@@ -175,22 +175,22 @@ test.describe('Super Block Page - Authenticated User', () => {
|
||||
|
||||
await page.goto('/learn/full-stack-developer');
|
||||
|
||||
// First chapter
|
||||
// HTML chapter
|
||||
await expect(
|
||||
page.getByTestId('chapter-button').filter({ hasText: /Welcome/ })
|
||||
page.getByTestId('chapter-button').filter({ hasText: /HTML/ })
|
||||
).toHaveAttribute('aria-expanded', 'true');
|
||||
|
||||
// First module
|
||||
await expect(
|
||||
page.getByRole('button', {
|
||||
name: /Getting Started with freeCodeCamp/
|
||||
name: /Basic HTML \d+ of \d+ steps complete/
|
||||
})
|
||||
).toHaveAttribute('aria-expanded', 'true');
|
||||
|
||||
// First block
|
||||
await expect(
|
||||
page.getByRole('button', {
|
||||
name: /Lecture Welcome to freeCodeCamp/
|
||||
name: /Build a Curriculum Outline/
|
||||
})
|
||||
).toHaveAttribute('aria-expanded', 'true');
|
||||
|
||||
@@ -204,16 +204,6 @@ test.describe('Super Block Page - Authenticated User', () => {
|
||||
// Go back to the super block page
|
||||
await page.goto('/learn/full-stack-developer');
|
||||
|
||||
// The entire first chapter is collapsed
|
||||
await expect(
|
||||
page.getByTestId('chapter-button').filter({ hasText: /Welcome/ })
|
||||
).toHaveAttribute('aria-expanded', 'false');
|
||||
|
||||
// HTML chapter
|
||||
await expect(
|
||||
page.getByTestId('chapter-button').filter({ hasText: /HTML/ })
|
||||
).toHaveAttribute('aria-expanded', 'true');
|
||||
|
||||
// Semantic HTML module
|
||||
await expect(
|
||||
page.getByRole('button', { name: /^Semantic HTML/ })
|
||||
@@ -262,20 +252,20 @@ test.describe('Super Block Page - Unauthenticated User', () => {
|
||||
|
||||
// First chapter
|
||||
await expect(
|
||||
page.getByTestId('chapter-button').filter({ hasText: /Welcome/ })
|
||||
page.getByTestId('chapter-button').filter({ hasText: /HTML/ })
|
||||
).toHaveAttribute('aria-expanded', 'true');
|
||||
|
||||
// First module
|
||||
await expect(
|
||||
page.getByRole('button', {
|
||||
name: 'Getting Started with freeCodeCamp'
|
||||
name: /Basic HTML \d+ of \d+ steps complete/
|
||||
})
|
||||
).toHaveAttribute('aria-expanded', 'true');
|
||||
|
||||
// First block
|
||||
await expect(
|
||||
page.getByRole('button', {
|
||||
name: 'Lecture Welcome to freeCodeCamp'
|
||||
name: 'Build a Curriculum Outline'
|
||||
})
|
||||
).toHaveAttribute('aria-expanded', 'true');
|
||||
});
|
||||
|
||||
@@ -12263,6 +12263,22 @@ module.exports.fullyCertifiedUser = {
|
||||
{
|
||||
completedDate: 1729240849345,
|
||||
id: '6763500bd5a85d5898cc21a9'
|
||||
},
|
||||
{
|
||||
completedDate: 1729240849345,
|
||||
id: '672d26269456511aa3db614d'
|
||||
},
|
||||
{
|
||||
completedDate: 1729240849345,
|
||||
id: '672d45583fd75a504136fbbb'
|
||||
},
|
||||
{
|
||||
completedDate: 1729240849345,
|
||||
id: '672d45651d83b450801efb3a'
|
||||
},
|
||||
{
|
||||
completedDate: 1729240849345,
|
||||
id: '672d456f4ac35950b300e93f'
|
||||
}
|
||||
],
|
||||
completedExams: [
|
||||
|
||||
Reference in New Issue
Block a user