feat(curriculum): add greeting card workshop to cert (freeCodeCamp#56976

)

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

client/i18n/locales/english/intro.json

@@ -2055,7 +2055,13 @@
           "In these lecture videos, you will learn about working with pseudo-classes and pseudo-elements in CSS."
         ]
       },
-      "ohhu": { "title": "58", "intro": [] },
+      "workshop-greeting-card": {
+        "title": "Design a Greeting Card",
+        "intro": [
+          "In the previous lecture videos, you learned how to work with the different types of pseudo-classes.",
+          "In this workshop, you will have a chance to practice what you have learned by designing a greeting card."
+        ]
+      },
       "lab-job-application-form": {
         "title": "Build a Job Application Form",
         "intro": [

client/src/pages/learn/full-stack-developer/workshop-greeting-card/index.md

@@ -0,0 +1,9 @@
+---
+title: Introduction to the Design a Greeting Card
+block: workshop-greeting-card
+superBlock: full-stack-developer
+---
+
+## Introduction to the Design a Greeting Card
+
+This is a test for the new project-based curriculum.

curriculum/challenges/_meta/workshop-greeting-card/meta.json

@@ -0,0 +1,121 @@
+{
+  "name": "Design a Greeting Card",
+  "isUpcomingChange": true,
+  "usesMultifileEditor": true,
+  "hasEditableBoundaries": true,
+  "dashedName": "workshop-greeting-card",
+  "superBlock": "full-stack-developer",
+  "challengeOrder": [
+    {
+      "id": "6720b1f2680ec706ed534acf",
+      "title": "Step 1"
+    },
+    {
+      "id": "6720b3191bbafd269bae0ae8",
+      "title": "Step 2"
+    },
+    {
+      "id": "6720b7f3155a9278d6b6a8b8",
+      "title": "Step 3"
+    },
+    {
+      "id": "6720bbb38f697e2364f41c0e",
+      "title": "Step 4"
+    },
+    {
+      "id": "6728fda085006772a247e779",
+      "title": "Step 5"
+    },
+    {
+      "id": "6729005c87b6320356ac1140",
+      "title": "Step 6"
+    },
+    {
+      "id": "672b42241c0c6515f26786f4",
+      "title": "Step 7"
+    },
+    {
+      "id": "672b4434dd6d6a1edc405419",
+      "title": "Step 8"
+    },
+    {
+      "id": "672e410ddd98b409594890b6",
+      "title": "Step 9"
+    },
+    {
+      "id": "672e44e811e610232fead333",
+      "title": "Step 10"
+    },
+    {
+      "id": "67332db0f793bf08f2a18528",
+      "title": "Step 11"
+    },
+    {
+      "id": "67332e9debcc820d18e3e169",
+      "title": "Step 12"
+    },
+    {
+      "id": "67332fff82eb28128f08ec2c",
+      "title": "Step 13"
+    },
+    {
+      "id": "67333082ab35e414eb4ea70d",
+      "title": "Step 14"
+    },
+    {
+      "id": "6733319f1d586b1923e029e3",
+      "title": "Step 15"
+    },
+    {
+      "id": "673332a6b63f9f1e1f81ba9b",
+      "title": "Step 16"
+    },
+    {
+      "id": "673333130a2c40204162f0c7",
+      "title": "Step 17"
+    },
+    {
+      "id": "6733352ce2a5642827b4f7f0",
+      "title": "Step 18"
+    },
+    {
+      "id": "673337337f794d3025ded433",
+      "title": "Step 19"
+    },
+    {
+      "id": "673338ebd152d736d1bd2aa4",
+      "title": "Step 20"
+    },
+    {
+      "id": "67333a3a400b0a3c68854bcc",
+      "title": "Step 21"
+    },
+    {
+      "id": "67333aa0e231d43e7556c644",
+      "title": "Step 22"
+    },
+    {
+      "id": "67333b1d5f4a7340a121973a",
+      "title": "Step 23"
+    },
+    {
+      "id": "67333ba820f99c43904c9eff",
+      "title": "Step 24"
+    },
+    {
+      "id": "67333c34e357d34620217615",
+      "title": "Step 25"
+    },
+    {
+      "id": "67333d70431f8a4b02596f3c",
+      "title": "Step 26"
+    },
+    {
+      "id": "67333f5462f7aa53fc47bb2f",
+      "title": "Step 27"
+    }
+  ],
+  "helpCategory": "HTML-CSS",
+  "blockLayout": "challenge-grid",
+  "blockType": "workshop"
+}

curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6720b1f2680ec706ed534acf.md

@@ -0,0 +1,64 @@
+---
+id: 6720b1f2680ec706ed534acf
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+In this workshop, you will practice working with different pseudo-classes and pseudo-elements by designing a greeting card. The HTML boilerplate has been provided for you. 
+
+Start the workshop by linking the `styles.css` file.
+
+# --hints--
+
+Your `link` element should be within your `head` element.
+
+```js
+const link = document.querySelector('head > link');
+assert.isNotNull(link);
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const linkRelValue = document.querySelector('link')?.getAttribute('rel');
+assert.strictEqual(linkRelValue, 'stylesheet');
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const linkHrefValue = document.querySelector('link')?.dataset?.href;
+assert.match(linkHrefValue, /^(\.\/)?styles\.css$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+--fcc-editable-region--
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Greeting Card</title>
+
+  </head>
+  <body>
+  </body>
+</html>
+
+--fcc-editable-region--
+
+```
+
+```css
+
+```

curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6720b3191bbafd269bae0ae8.md

@@ -0,0 +1,92 @@
+---
+id: 6720b3191bbafd269bae0ae8
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Create a `div` element that has an `id` of `greeting-card` and a `class` of `card`.
+
+Inside the `div` element, add an `h1` with the text `Happy Birthday!`. Then add a paragraph element with a `class` called `message` and the text `Wishing you all the happiness and joy on your special day!`.
+
+# --hints--
+
+You should have a `div` element.
+
+```js
+assert.exists(document.querySelector("div"));
+```
+
+The `div` element should have an `id` of `greeting-card`.
+
+```js
+assert.strictEqual(document.querySelector("div").id, "greeting-card");
+```
+
+The `div` element should have a `class` of `card`.
+
+```js
+assert.strictEqual(document.querySelector("#greeting-card").className, "card");
+```
+
+You should have an `h1` element inside the `div` element.
+
+```js
+assert.exists(document.querySelector("div > h1"));
+```
+
+The `h1` element should contain the text `Happy Birthday!`.
+
+```js
+assert.strictEqual(document.querySelector("div > h1").textContent.trim(), "Happy Birthday!");
+```
+
+You should have a `p` element inside the `div`.
+
+```js
+assert.exists(document.querySelector("div > p"));
+```
+
+The `p` element should have a `class` of `message`.
+
+```js
+assert.exists(document.querySelector("div > p.message"));
+```
+
+The `p` element should contain the text `Wishing you all the happiness and joy on your special day!`.
+
+```js
+assert.strictEqual(document.querySelector("div > p.message").textContent.trim(), "Wishing you all the happiness and joy on your special day!");
+```
+
+# --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>Greeting Card</title>
+    <link href="styles.css" rel="stylesheet">
+  </head>
+
+--fcc-editable-region--
+
+  <body>
+
+  </body>
+
+--fcc-editable-region--
+
+</html>
+
+```
+
+```css
+
+```

curriculum/challenges/english/25-front-end-development/workshop-greeting-card/6720b7f3155a9278d6b6a8b8.md

@@ -0,0 +1,76 @@
+---
+id: 6720b7f3155a9278d6b6a8b8
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Now it is time to style your greeting card.
+
+Add a selector for the `body` element, then: 
+
+- change the `font-family` to be `Arial` followed by the generic `sans-serif`,
+- give a padding on all sides of `40px`,
+- set the `text-align` property to `center`.
+
+# --hints--
+
+You should have a `body` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle("body"));
+```
+
+You should set `font-family` to `"Arial", sans-serif` in the `body` selector.
+
+```js
+assert.oneOf(new __helpers.CSSHelp(document).getStyle("body")?.getPropertyValue("font-family"), ["'Arial', sans-serif", "Arial, sans-serif", '"Arial", sans-serif']);
+```
+
+You should set `padding` to `40px` in the `body` selector.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle("body")?.getPropertyValue("padding"), "40px");
+```
+
+You should set `text-align` to `center` in the `body` selector.`
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle("body")?.getPropertyValue("text-align"), "center");
+```
+
+# --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>Greeting Card</title>
+    <link href="styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="card" id="greeting-card">
+      <h1>Happy Birthday!</h1>
+      <p class="message">
+        Wishing you all the happiness and joy on your special day!
+      </p>
+  	</div>
+  </body>
+</html>
+
+```
+
+```css
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```