diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 0e0b48054ca..22cc53f298d 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -2173,6 +2173,12 @@ "In these lessons, you will learn when you should use certain semantic elements like the em element over the i 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 dl, dt, and dd elements." + ] + }, "lecture-working-with-text-and-time-semantic-elements": { "title": "Working with Text and Time Semantic Elements ", "intro": [ diff --git a/client/src/pages/learn/full-stack-developer/workshop-major-browsers-list/index.md b/client/src/pages/learn/full-stack-developer/workshop-major-browsers-list/index.md new file mode 100644 index 00000000000..5e37e18a8df --- /dev/null +++ b/client/src/pages/learn/full-stack-developer/workshop-major-browsers-list/index.md @@ -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. diff --git a/curriculum/challenges/english/blocks/workshop-major-browsers-list/68e6698b29e562d21b1d260c.md b/curriculum/challenges/english/blocks/workshop-major-browsers-list/68e6698b29e562d21b1d260c.md new file mode 100644 index 00000000000..3e01c93103c --- /dev/null +++ b/curriculum/challenges/english/blocks/workshop-major-browsers-list/68e6698b29e562d21b1d260c.md @@ -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 + + + + + + List of Browsers and Descriptions + + + --fcc-editable-region-- + + --fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/english/blocks/workshop-major-browsers-list/68ecfa0f03d88990bb96a33c.md b/curriculum/challenges/english/blocks/workshop-major-browsers-list/68ecfa0f03d88990bb96a33c.md new file mode 100644 index 00000000000..2404cc9be48 --- /dev/null +++ b/curriculum/challenges/english/blocks/workshop-major-browsers-list/68ecfa0f03d88990bb96a33c.md @@ -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 +
+
HTML
+
HyperText Markup Language
+
CSS
+
Cascading Style Sheets
+
+``` + +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 + + + + + + List of Browsers and Descriptions + + + --fcc-editable-region-- +

List of Major Web Browsers

+ + --fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/english/blocks/workshop-major-browsers-list/68ecfa1003d88990bb96a33d.md b/curriculum/challenges/english/blocks/workshop-major-browsers-list/68ecfa1003d88990bb96a33d.md new file mode 100644 index 00000000000..2d3538d31e1 --- /dev/null +++ b/curriculum/challenges/english/blocks/workshop-major-browsers-list/68ecfa1003d88990bb96a33d.md @@ -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 + + + + + + List of Browsers and Descriptions + + +

List of Major Web Browsers

+ --fcc-editable-region-- +
+ +
+ --fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/english/blocks/workshop-major-browsers-list/68ecfa1003d88990bb96a33e.md b/curriculum/challenges/english/blocks/workshop-major-browsers-list/68ecfa1003d88990bb96a33e.md new file mode 100644 index 00000000000..c5e31f08cfd --- /dev/null +++ b/curriculum/challenges/english/blocks/workshop-major-browsers-list/68ecfa1003d88990bb96a33e.md @@ -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 + + + + + + List of Browsers and Descriptions + + +

List of Major Web Browsers

+
+
Google Chrome
+
This is a free web browser developed by Google and first released in 2008.
+ + --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/english/blocks/workshop-major-browsers-list/69038dd51a41ae215fcc030a.md b/curriculum/challenges/english/blocks/workshop-major-browsers-list/69038dd51a41ae215fcc030a.md new file mode 100644 index 00000000000..4b31e8d0ac6 --- /dev/null +++ b/curriculum/challenges/english/blocks/workshop-major-browsers-list/69038dd51a41ae215fcc030a.md @@ -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 + + + + + + List of Browsers and Descriptions + + +

List of Major Web Browsers

+
+
Google Chrome
+
This is a free web browser developed by Google and first released in 2008.
+ +
Firefox
+
This is a free web browser developed by the Mozilla Corporation and first created in 2004.
+ + --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` diff --git a/curriculum/challenges/english/blocks/workshop-major-browsers-list/69038f5efad6f722def4a214.md b/curriculum/challenges/english/blocks/workshop-major-browsers-list/69038f5efad6f722def4a214.md new file mode 100644 index 00000000000..e307123a0b7 --- /dev/null +++ b/curriculum/challenges/english/blocks/workshop-major-browsers-list/69038f5efad6f722def4a214.md @@ -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 + + + + + + List of Browsers and Descriptions + + +

List of Major Web Browsers

+
+
Google Chrome
+
This is a free web browser developed by Google and first released in 2008.
+ +
Firefox
+
This is a free web browser developed by the Mozilla Corporation and first created in 2004.
+ +
Safari
+
This browser was developed by Apple and is the default browser for iPhone, iPad and Mac devices.
+ + --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` diff --git a/curriculum/challenges/english/blocks/workshop-major-browsers-list/69038fe7da59ca23a5eba82d.md b/curriculum/challenges/english/blocks/workshop-major-browsers-list/69038fe7da59ca23a5eba82d.md new file mode 100644 index 00000000000..8d6bf386f0e --- /dev/null +++ b/curriculum/challenges/english/blocks/workshop-major-browsers-list/69038fe7da59ca23a5eba82d.md @@ -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 + + + + + + List of Browsers and Descriptions + + +

List of Major Web Browsers

+
+
Google Chrome
+
This is a free web browser developed by Google and first released in 2008.
+ +
Firefox
+
This is a free web browser developed by the Mozilla Corporation and first created in 2004.
+ +
Safari
+
This browser was developed by Apple and is the default browser for iPhone, iPad and Mac devices.
+ +
Brave
+
This is a free web browser first released in 2016 that is based on the Chromium web browser.
+ + --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + +# --solutions-- + +```html + + + + + + List of Browsers and Descriptions + + +

List of Major Web Browsers

+
+
Google Chrome
+
This is a free web browser developed by Google and first released in 2008.
+ +
Firefox
+
This is a free web browser developed by the Mozilla Corporation and first created in 2004.
+ +
Safari
+
This browser was developed by Apple and is the default browser for iPhone, iPad and Mac devices.
+ +
Brave
+
This is a free web browser first released in 2016 that is based on the Chromium web browser.
+ +
Arc
+
This is a free Chromium based web browser first released in 2023 by The Browser Company.
+
+ + +``` diff --git a/curriculum/structure/blocks/workshop-major-browsers-list.json b/curriculum/structure/blocks/workshop-major-browsers-list.json new file mode 100644 index 00000000000..f8f998c8337 --- /dev/null +++ b/curriculum/structure/blocks/workshop-major-browsers-list.json @@ -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 +} diff --git a/curriculum/structure/superblocks/full-stack-developer.json b/curriculum/structure/superblocks/full-stack-developer.json index 5b19031a59c..c9524173260 100644 --- a/curriculum/structure/superblocks/full-stack-developer.json +++ b/curriculum/structure/superblocks/full-stack-developer.json @@ -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",