feat(curriculum): add Build a Bookstore Page Workshop to FSD cert (freeCodeCamp#62723)

Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
Co-authored-by: Dario <105294544+Dario-DC@users.noreply.github.com>

Author: 3 people

client/i18n/locales/english/intro.json

@@ -2087,6 +2087,12 @@
           "In these lessons, you will learn about HTML fundamentals like the <code>div</code> element, the <code>id</code> and <code>class</code> attributes, the HTML boilerplate, HTML entities, and more."
         ]
       },
+      "workshop-bookstore-page": {
+        "title": "Build a Bookstore Page",
+        "intro": [
+          "In this workshop, you will practice working with classes, ids and the <code>div</code> element by building a bookstore page."
+        ]
+      },
       "lecture-understanding-how-html-affects-seo": {
         "title": "Understanding How HTML Affects SEO",
         "intro": [

client/src/pages/learn/full-stack-developer/workshop-bookstore-page/index.md

@@ -0,0 +1,9 @@
+---
+title: Introduction to the Build a Bookstore Page
+block: workshop-bookstore-page
+superBlock: full-stack-developer
+---
+
+## Introduction to the Build a Bookstore Page
+
+In this workshop, you will practice working with classes, ids and the <code>div</code> element by building a bookstore page.

curriculum/challenges/english/blocks/workshop-bookstore-page/68e97fe79367ad7b5dd6c9cd.md

@@ -0,0 +1,37 @@
+---
+id: 68e97fe79367ad7b5dd6c9cd
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+In this workshop, you will build a bookstore page by creating book cards that display information about different books. You'll practice organizing content using `div` elements, classes, and IDs.
+
+Start by adding an `h1` element with the text `XYZ Bookstore`.
+
+# --hints--
+
+You should have an `h1` element.
+
+```js
+assert.exists(document.querySelector('h1'));
+```
+
+Your `h1` element's text should be `XYZ Bookstore`. Double check for spelling or capitalization errors.
+
+```js
+assert.equal(document.querySelector('h1')?.innerText.trim(), 'XYZ Bookstore');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/blocks/workshop-bookstore-page/68ebdbacdd3fa474132cc975.md

@@ -0,0 +1,41 @@
+---
+id: 68ebdbacdd3fa474132cc975
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Below the `h1` element, add a `p` element with this text: `Browse our collection of amazing books!`.
+
+# --hints--
+
+You should have a `p` element.
+
+```js
+assert.exists(document.querySelector('p'));
+```
+
+Your `p` element's text should be: `Browse our collection of amazing books!`. 
+
+```js
+assert.equal(document.querySelector('p')?.innerText.trim(), 'Browse our collection of amazing books!');
+```
+
+Your `p` element should be below your `h1` element.
+
+```js
+assert.exists(document.querySelector('h1 + p'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<h1>XYZ Bookstore</h1>
+
+--fcc-editable-region--
+```

curriculum/challenges/english/blocks/workshop-bookstore-page/68ec6cd5b7e8f5a8f7319e32.md

@@ -0,0 +1,38 @@
+---
+id: 68ec6cd5b7e8f5a8f7319e32
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+The `div` element is used as a container to group other HTML elements. You will mainly use the `div` element when you want to group HTML elements that will share a set of CSS styles.
+
+Below the `p` element, add a `div` element. This `div` will be a container for your book cards.
+
+# --hints--
+
+You should have a `div` element.
+
+```js
+assert.exists(document.querySelector('div'));
+```
+
+Your `div` element should be below your `p` element.
+
+```js
+assert.exists(document.querySelector('p + div'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<h1>XYZ Bookstore</h1>
+<p>Browse our collection of amazing books!</p>
+
+--fcc-editable-region--
+```

curriculum/challenges/english/blocks/workshop-bookstore-page/68ec6d9a315221aa31e54816.md

@@ -0,0 +1,46 @@
+---
+id: 68ec6d9a315221aa31e54816
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The `class` attribute is used to identify one or more elements for styling. Unlike the `id` attribute, class names do not need to be unique: multiple elements can share the same class.
+
+Here is an example:
+
+```html
+<p class="example">example paragraph</p>
+```
+
+Add a `class` attribute to your `div` element and set its value to `card-container`.
+
+# --hints--
+
+Your `div` element should have a `class` attribute.
+
+```js
+assert.isTrue(document.querySelector('div')?.hasAttribute('class'));
+```
+
+Your `div` element should have a `class` attribute with the value of `card-container`.
+
+```js
+assert.equal(document.querySelector('div')?.className, 'card-container');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<h1>XYZ Bookstore</h1>
+<p>Browse our collection of amazing books!</p>
+<div>
+    
+</div>
+--fcc-editable-region--
+```

curriculum/challenges/english/blocks/workshop-bookstore-page/68ec6e8d0caee3afaaf142ef.md

@@ -0,0 +1,46 @@
+---
+id: 68ec6e8d0caee3afaaf142ef
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Inside the element having a `class` of `card-container`, create another `div` element. This `div` will represent the first book card.
+
+Add a `class` attribute to this new `div` element and set the value of the `class` attribute to `card`.
+
+# --hints--
+
+You should have a `div` element nested inside the element with a class of `card-container`.
+
+```js
+assert.exists(document.querySelector('.card-container div'));
+```
+
+Your new `div` element should have a `class` attribute.
+
+```js
+assert.isTrue(document.querySelector('.card-container div')?.hasAttribute('class'));
+```
+
+Your new `div` element should have a `class` having the value of `card`.
+
+```js
+assert.exists(document.querySelector('.card-container div.card'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<h1>XYZ Bookstore</h1>
+<p>Browse our collection of amazing books!</p>
+<div class="card-container">
+
+</div>
+--fcc-editable-region--
+```

curriculum/challenges/english/blocks/workshop-bookstore-page/68ec9332a9b5b2b32487bd00.md

@@ -0,0 +1,50 @@
+---
+id: 68ec9332a9b5b2b32487bd00
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+The `id` attribute adds a unique identifier to an HTML element. Each `id` should be unique within a page and should only be used once.
+
+`id` values cannot contain spaces and should only contain letters, digits, underscores, and dashes.
+
+Here is an example:
+
+```html
+<p id="para">example paragraph</p>
+```
+
+Add an `id` attribute to your element having a class of `card` and set its value to `sally-adventure-book`.
+
+# --hints--
+
+Your element with a class of `card` should have an `id` attribute.
+
+```js
+assert.isTrue(document.querySelector('.card')?.hasAttribute('id'));
+```
+
+Your element having a class of `card` should have an `id` having the value of `sally-adventure-book`.
+
+```js
+assert.equal(document.querySelector('.card')?.id, 'sally-adventure-book');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h1>XYZ Bookstore</h1>
+<p>Browse our collection of amazing books!</p>
+<div class="card-container">
+  --fcc-editable-region--
+  <div class="card">
+
+  </div>
+  --fcc-editable-region--
+</div>
+```

curriculum/challenges/english/blocks/workshop-bookstore-page/68ec98b38d83a3c28dd30efe.md

@@ -0,0 +1,40 @@
+---
+id: 68ec98b38d83a3c28dd30efe
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Inside the first element having a class of `card`, add an `h2` element with the text `Sally's SciFi Adventure`.
+
+# --hints--
+
+You should have an `h2` element nested inside the element having a class of `card`.
+
+```js
+assert.exists(document.querySelector('.card h2'));
+```
+
+Your `h2` element's text should be `Sally's SciFi Adventure`. 
+
+```js
+assert.equal(document.querySelector('.card h2')?.innerText.trim(), "Sally's SciFi Adventure");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h1>XYZ Bookstore</h1>
+<p>Browse our collection of amazing books!</p>
+<div class="card-container">
+  --fcc-editable-region--
+  <div class="card" id="sally-adventure-book">
+
+  </div>
+  --fcc-editable-region--
+</div>
+```

curriculum/challenges/english/blocks/workshop-bookstore-page/68ec99e478211dc578699944.md

@@ -0,0 +1,51 @@
+---
+id: 68ec99e478211dc578699944
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Below the `h2` element in the first element having a class of `card`, add a `p` element with the following text:
+
+```md
+This is an epic story of Sally and her dog Rex as they navigate through other worlds.
+```
+
+# --hints--
+
+You should have a `p` element nested inside the element having a class of `card`.
+
+```js
+assert.exists(document.querySelector('.card p'));
+```
+
+Your `p` element's text should be `This is an epic story of Sally and her dog Rex as they navigate through other worlds.`.
+
+```js
+assert.equal(document.querySelector('.card p')?.innerText.trim(), "This is an epic story of Sally and her dog Rex as they navigate through other worlds.");
+```
+
+Your `p` element should be below your `h2` element.
+
+```js
+assert.exists(document.querySelector('.card h2 + p'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h1>XYZ Bookstore</h1>
+<p>Browse our collection of amazing books!</p>
+<div class="card-container">
+  --fcc-editable-region--
+  <div class="card" id="sally-adventure-book">
+    <h2>Sally's SciFi Adventure</h2>
+
+  </div>
+  --fcc-editable-region--
+</div>
+```