mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-09-21 16:22:18 +08:00
feat(curriculum): add description list workshop to FSD cert (#62597)
Co-authored-by: Allan70 <aabere70@gmail..com> Co-authored-by: Anna Cottrill <a.rcottrill521@gmail.com> Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com> Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> Co-authored-by: Dario <105294544+Dario-DC@users.noreply.github.com> Co-authored-by: jdwilkin4 <jwilkin4@hotmail.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Abere Allan
co-authored by
Allan70
Anna Cottrill
Ilenia
Jessica Wilkins
Dario
jdwilkin4
Copilot
Allan70
Anna Cottrill
Ilenia
Jessica Wilkins
Dario
jdwilkin4
Copilot
parent
6b4ea540d4
commit
6b12b01a7e
@@ -2173,6 +2173,12 @@
|
||||
"In these lessons, you will learn when you should use certain semantic elements like the <code>em</code> element over the <code>i</code> element, description lists, and more."
|
||||
]
|
||||
},
|
||||
"workshop-major-browsers-list": {
|
||||
"title": "Build a List of Major Web Browsers",
|
||||
"intro": [
|
||||
"In this workshop, you will build a description list and work with the <code>dl</code>, <code>dt</code>, and <code>dd</code> elements."
|
||||
]
|
||||
},
|
||||
"lecture-working-with-text-and-time-semantic-elements": {
|
||||
"title": "Working with Text and Time Semantic Elements ",
|
||||
"intro": [
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Introduction to the Build a List of Major Web Browsers
|
||||
block: workshop-major-browsers-list
|
||||
superBlock: full-stack-developer
|
||||
---
|
||||
|
||||
## Introduction to the Build a List of Major Web Browsers
|
||||
|
||||
In this workshop, you will build a description list and work with the `dl`, `dt`, and `dd` elements.
|
||||
+49
@@ -0,0 +1,49 @@
|
||||
---
|
||||
id: 68e6698b29e562d21b1d260c
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
demoType: onLoad
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In this workshop, you are going to build a list of major web browsers. The HTML boilerplate has been provided for you.
|
||||
|
||||
Start by adding a heading to your page that reads `List of Major Web Browsers` using a `h1` element inside the `body` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `h1` element inside the `body` element.
|
||||
|
||||
```js
|
||||
const h1 = document.querySelector('body h1');
|
||||
assert.exists(h1);
|
||||
```
|
||||
|
||||
Your `h1` element should contain the text `List of Major Web Browsers`.
|
||||
|
||||
```js
|
||||
const h1 = document.querySelector('body h1');
|
||||
assert.strictEqual(h1?.textContent.trim(), 'List of Major Web Browsers');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>List of Browsers and Descriptions</title>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+60
@@ -0,0 +1,60 @@
|
||||
---
|
||||
id: 68ecfa0f03d88990bb96a33c
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
As you recall from an earlier lesson, description lists are used to present terms and definitions in an organized and easy-to-read format.
|
||||
|
||||
Here is an example:
|
||||
|
||||
```html
|
||||
<dl>
|
||||
<dt>HTML</dt>
|
||||
<dd>HyperText Markup Language</dd>
|
||||
<dt>CSS</dt>
|
||||
<dd>Cascading Style Sheets</dd>
|
||||
</dl>
|
||||
```
|
||||
|
||||
Below the `h1` element, create a `dl` element. This will hold the list of browsers.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `dl` element.
|
||||
|
||||
```js
|
||||
const dl = document.querySelector('dl');
|
||||
assert.exists(dl);
|
||||
```
|
||||
|
||||
Your `dl` element should be below the `h1` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('h1 + dl'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>List of Browsers and Descriptions</title>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<h1>List of Major Web Browsers</h1>
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+74
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 68ecfa1003d88990bb96a33d
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Description lists are made up of a list of terms and details. The `dt` element represents the description term, while the `dd` element represents the description detail.
|
||||
|
||||
The first browser you will add to your description list will be for Google Chrome.
|
||||
|
||||
Inside your `dl` element, add a `dt` element containing the text `Google Chrome`.
|
||||
|
||||
Below your `dt` element, add a `dd` element with the following text:
|
||||
|
||||
```md
|
||||
This is a free web browser developed by Google and first released in 2008.
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `dt` element inside of your `dl` element.
|
||||
|
||||
```js
|
||||
const dlElement = document.querySelector('dl dt');
|
||||
assert.exists(dlElement);
|
||||
```
|
||||
|
||||
Your `dt` element should have the text `Google Chrome`.
|
||||
|
||||
```js
|
||||
const dt = document.querySelector('dt');
|
||||
assert.strictEqual(dt?.textContent.trim(), "Google Chrome");
|
||||
```
|
||||
|
||||
You should have a `dd` element below your `dt` element.
|
||||
|
||||
```js
|
||||
const ddElement = document.querySelector('dl dd');
|
||||
assert.exists(ddElement);
|
||||
```
|
||||
|
||||
Your `dd` element should contain the text `This is a free web browser developed by Google and first released in 2008.`.
|
||||
|
||||
```js
|
||||
const ddElement = document.querySelector('dd');
|
||||
assert.strictEqual(ddElement?.textContent.trim(), "This is a free web browser developed by Google and first released in 2008.");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>List of Browsers and Descriptions</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>List of Major Web Browsers</h1>
|
||||
--fcc-editable-region--
|
||||
<dl>
|
||||
|
||||
</dl>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+75
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 68ecfa1003d88990bb96a33e
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now it is time to add your second browser to the list.
|
||||
|
||||
Below your `Google Chrome` entry, add another `dt` element containing the text `Firefox`.
|
||||
|
||||
Below your `dt` element, add a `dd` element with the following text:
|
||||
|
||||
```md
|
||||
This is a free web browser developed by the Mozilla Corporation and first created in 2004.
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have two `dt` elements in your code.
|
||||
|
||||
```js
|
||||
const dtElements = document.querySelectorAll('dt');
|
||||
assert.lengthOf(dtElements, 2);
|
||||
```
|
||||
|
||||
Your second `dt` element should have the text `Firefox`.
|
||||
|
||||
```js
|
||||
const dt = document.querySelectorAll('dt')[1];
|
||||
assert.strictEqual(dt?.textContent.trim(), "Firefox");
|
||||
```
|
||||
|
||||
You should have two `dd` elements in your code.
|
||||
|
||||
```js
|
||||
const ddElements = document.querySelectorAll('dd');
|
||||
assert.lengthOf(ddElements, 2);
|
||||
```
|
||||
|
||||
Your second `dd` element should contain the text `This is a free web browser developed by the Mozilla Corporation and first created in 2004.`.
|
||||
|
||||
```js
|
||||
const ddElement = document.querySelectorAll('dd')[1];
|
||||
assert.strictEqual(ddElement?.textContent.trim(), "This is a free web browser developed by the Mozilla Corporation and first created in 2004.");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>List of Browsers and Descriptions</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>List of Major Web Browsers</h1>
|
||||
<dl>
|
||||
<dt>Google Chrome</dt>
|
||||
<dd>This is a free web browser developed by Google and first released in 2008.</dd>
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</dl>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+77
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 69038dd51a41ae215fcc030a
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The third browser you will add to the list will be for the Safari web browser.
|
||||
|
||||
Add another `dt` element containing the text `Safari`.
|
||||
|
||||
Below your `dt` element, add a `dd` element with the following text:
|
||||
|
||||
```md
|
||||
This browser was developed by Apple and is the default browser for iPhone, iPad and Mac devices.
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have three `dt` elements in your code.
|
||||
|
||||
```js
|
||||
const dtElements = document.querySelectorAll('dt');
|
||||
assert.lengthOf(dtElements, 3);
|
||||
```
|
||||
|
||||
Your third `dt` element should have the text `Safari`.
|
||||
|
||||
```js
|
||||
const dt = document.querySelectorAll('dt')[2];
|
||||
assert.strictEqual(dt?.textContent.trim(), "Safari");
|
||||
```
|
||||
|
||||
You should have three `dd` elements in your code.
|
||||
|
||||
```js
|
||||
const ddElements = document.querySelectorAll('dd');
|
||||
assert.lengthOf(ddElements, 3);
|
||||
```
|
||||
|
||||
Your third `dd` element should contain the text `This browser was developed by Apple and is the default browser for iPhone, iPad and Mac devices.`.
|
||||
|
||||
```js
|
||||
const ddElement = document.querySelectorAll('dd')[2];
|
||||
assert.strictEqual(ddElement?.textContent.trim(), "This browser was developed by Apple and is the default browser for iPhone, iPad and Mac devices.");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>List of Browsers and Descriptions</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>List of Major Web Browsers</h1>
|
||||
<dl>
|
||||
<dt>Google Chrome</dt>
|
||||
<dd>This is a free web browser developed by Google and first released in 2008.</dd>
|
||||
|
||||
<dt>Firefox</dt>
|
||||
<dd>This is a free web browser developed by the Mozilla Corporation and first created in 2004.</dd>
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</dl>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+80
@@ -0,0 +1,80 @@
|
||||
---
|
||||
id: 69038f5efad6f722def4a214
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now it is time to add your fourth browser to the list.
|
||||
|
||||
Add another `dt` element containing the text `Brave`.
|
||||
|
||||
Below your `dt` element, add a `dd` element with the following text:
|
||||
|
||||
```md
|
||||
This is a free web browser first released in 2016 that is based on the Chromium web browser.
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have four `dt` elements in your code.
|
||||
|
||||
```js
|
||||
const dtElements = document.querySelectorAll('dt');
|
||||
assert.lengthOf(dtElements, 4);
|
||||
```
|
||||
|
||||
Your fourth `dt` element should have the text `Brave`.
|
||||
|
||||
```js
|
||||
const dt = document.querySelectorAll('dt')[3];
|
||||
assert.strictEqual(dt?.textContent.trim(), "Brave");
|
||||
```
|
||||
|
||||
You should have four `dd` elements in your code.
|
||||
|
||||
```js
|
||||
const ddElements = document.querySelectorAll('dd');
|
||||
assert.lengthOf(ddElements, 4);
|
||||
```
|
||||
|
||||
Your fourth `dd` element should contain the text `This is a free web browser first released in 2016 that is based on the Chromium web browser.`.
|
||||
|
||||
```js
|
||||
const ddElement = document.querySelectorAll('dd')[3];
|
||||
assert.strictEqual(ddElement?.textContent.trim(), "This is a free web browser first released in 2016 that is based on the Chromium web browser.");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>List of Browsers and Descriptions</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>List of Major Web Browsers</h1>
|
||||
<dl>
|
||||
<dt>Google Chrome</dt>
|
||||
<dd>This is a free web browser developed by Google and first released in 2008.</dd>
|
||||
|
||||
<dt>Firefox</dt>
|
||||
<dd>This is a free web browser developed by the Mozilla Corporation and first created in 2004.</dd>
|
||||
|
||||
<dt>Safari</dt>
|
||||
<dd>This browser was developed by Apple and is the default browser for iPhone, iPad and Mac devices.</dd>
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</dl>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+117
@@ -0,0 +1,117 @@
|
||||
---
|
||||
id: 69038fe7da59ca23a5eba82d
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The last browser you will add to the list will be for the Arc browser.
|
||||
|
||||
Add another `dt` element containing the text `Arc`.
|
||||
|
||||
Below your `dt` element, add a `dd` element with the following text:
|
||||
|
||||
```md
|
||||
This is a free Chromium based web browser first released in 2023 by The Browser Company.
|
||||
```
|
||||
|
||||
With that last addition, your browser list is complete!
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have five `dt` elements in your code.
|
||||
|
||||
```js
|
||||
const dtElements = document.querySelectorAll('dt');
|
||||
assert.lengthOf(dtElements, 5);
|
||||
```
|
||||
|
||||
Your fifth `dt` element should have the text `Arc`.
|
||||
|
||||
```js
|
||||
const dt = document.querySelectorAll('dt')[4];
|
||||
assert.strictEqual(dt?.textContent.trim(), "Arc");
|
||||
```
|
||||
|
||||
You should have five `dd` elements in your code.
|
||||
|
||||
```js
|
||||
const ddElements = document.querySelectorAll('dd');
|
||||
assert.lengthOf(ddElements, 5);
|
||||
```
|
||||
|
||||
Your fifth `dd` element should contain the text `This is a free Chromium based web browser first released in 2023 by The Browser Company.`.
|
||||
|
||||
```js
|
||||
const ddElement = document.querySelectorAll('dd')[4];
|
||||
assert.strictEqual(ddElement?.textContent.trim(), "This is a free Chromium based web browser first released in 2023 by The Browser Company.");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>List of Browsers and Descriptions</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>List of Major Web Browsers</h1>
|
||||
<dl>
|
||||
<dt>Google Chrome</dt>
|
||||
<dd>This is a free web browser developed by Google and first released in 2008.</dd>
|
||||
|
||||
<dt>Firefox</dt>
|
||||
<dd>This is a free web browser developed by the Mozilla Corporation and first created in 2004.</dd>
|
||||
|
||||
<dt>Safari</dt>
|
||||
<dd>This browser was developed by Apple and is the default browser for iPhone, iPad and Mac devices.</dd>
|
||||
|
||||
<dt>Brave</dt>
|
||||
<dd>This is a free web browser first released in 2016 that is based on the Chromium web browser.</dd>
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</dl>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>List of Browsers and Descriptions</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>List of Major Web Browsers</h1>
|
||||
<dl>
|
||||
<dt>Google Chrome</dt>
|
||||
<dd>This is a free web browser developed by Google and first released in 2008.</dd>
|
||||
|
||||
<dt>Firefox</dt>
|
||||
<dd>This is a free web browser developed by the Mozilla Corporation and first created in 2004.</dd>
|
||||
|
||||
<dt>Safari</dt>
|
||||
<dd>This browser was developed by Apple and is the default browser for iPhone, iPad and Mac devices.</dd>
|
||||
|
||||
<dt>Brave</dt>
|
||||
<dd>This is a free web browser first released in 2016 that is based on the Chromium web browser.</dd>
|
||||
|
||||
<dt>Arc</dt>
|
||||
<dd>This is a free Chromium based web browser first released in 2023 by The Browser Company.</dd>
|
||||
</dl>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "Build a List of Major Web Browsers",
|
||||
"isUpcomingChange": false,
|
||||
"dashedName": "workshop-major-browsers-list",
|
||||
"helpCategory": "HTML-CSS",
|
||||
"blockLayout": "challenge-grid",
|
||||
"challengeOrder": [
|
||||
{ "id": "68e6698b29e562d21b1d260c", "title": "Step 1" },
|
||||
{ "id": "68ecfa0f03d88990bb96a33c", "title": "Step 2" },
|
||||
{ "id": "68ecfa1003d88990bb96a33d", "title": "Step 3" },
|
||||
{ "id": "68ecfa1003d88990bb96a33e", "title": "Step 4" },
|
||||
{ "id": "69038dd51a41ae215fcc030a", "title": "Step 5" },
|
||||
{ "id": "69038f5efad6f722def4a214", "title": "Step 6" },
|
||||
{ "id": "69038fe7da59ca23a5eba82d", "title": "Step 7" }
|
||||
],
|
||||
"blockLabel": "workshop",
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true
|
||||
}
|
||||
@@ -33,6 +33,7 @@
|
||||
"blocks": [
|
||||
"lecture-importance-of-semantic-html",
|
||||
"lecture-understanding-nuanced-semantic-elements",
|
||||
"workshop-major-browsers-list",
|
||||
"lecture-working-with-text-and-time-semantic-elements",
|
||||
"workshop-quincys-job-tips",
|
||||
"lecture-working-with-specialized-semantic-elements",
|
||||
|
||||
Reference in New Issue
Block a user