feat(curriculum): add css colors lab (#56290)

client/i18n/locales/english/intro.json

@@ -2145,7 +2145,12 @@
           "In this workshop, you'll build a set of colored markers. You'll practice different ways to set color values and how to pair colors with each other."
         ]
       },
-      "ogdb": { "title": "64", "intro": [] },
+      "lab-colored-boxes": {
+        "title": "Design a Set of Colored Boxes",
+        "intro": [
+          "In this lab, you'll practice using CSS colors by designing boxes"
+        ]
+      },
       "review-css-colors": {
         "title": "CSS Colors Review",
         "intro": [

client/src/pages/learn/full-stack-developer/lab-colored-boxes/index.md

@@ -0,0 +1,9 @@
+---
+title: Introduction to the Design a Set of Colored Boxes
+block: lab-colored-boxes
+superBlock: full-stack-developer
+---
+
+## Introduction to the Design Colored Boxes
+
+In this lab, you'll practice using CSS colors by designing colored boxes.

curriculum/challenges/_meta/lab-colored-boxes/meta.json

@@ -0,0 +1,11 @@
+{
+  "name": "Design a Set of Colored Boxes",
+  "isUpcomingChange": true,
+  "usesMultifileEditor": true,
+  "dashedName": "lab-colored-boxes",
+  "superBlock": "full-stack-developer",
+  "challengeOrder": [{ "id": "66f3f6eb66ea9dc41cdc30df", "title": "Design a Set Colored Boxes" }],
+  "helpCategory": "HTML-CSS",
+  "blockType": "lab",
+  "blockLayout": "link"
+}

curriculum/challenges/english/25-front-end-development/lab-colored-boxes/66f3f6eb66ea9dc41cdc30df.md

@@ -0,0 +1,210 @@
+---
+id: 66f3f6eb66ea9dc41cdc30df
+title: Design a Set of Colored Boxes
+challengeType: 25
+dashedName: set-of-colored-boxes
+demoType: onClick
+---
+
+# --description--
+
+In this lab, you'll practice using CSS colors by designing boxes.
+
+**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+
+**User Stories:**
+
+1. You should set the background color for `body` to `#f4f4f4`.
+2. You should have a `div` with a class of `color-grid` to hold all your color elements.
+3. You should have five `div` elements within the `.color-grid` element.
+4. The five `div` elements should each have a class of `color-box` and `color#`, where `#` is the number of the order of that `div`. For example: `color1` for the first `div`, `color2` for the second, and so on.
+5. The `.color-box` class should have a set `width` and `height` so your `div` elements are visible on the page.
+6. The `.color1` element should have a `background-color` that uses hexadecimal color value.
+7. The `.color2` element should have a `background-color` that uses an RGB color value.
+8. The `.color3` element should have a `background-color` that uses a predefined (word) color value.
+9. The `.color4` element should have a `background-color` that uses a HSL color value.
+10. The `.color5` element should have a `background-color` set.
+
+**Note:** Be sure to link your stylesheet in your HTML and apply your CSS.
+
+# --hints--
+
+`body` should have a background color of `#f4f4f4`.
+
+```js
+const body = document.body;
+const bodyBgColor = getComputedStyle(body).backgroundColor;
+assert.strictEqual(bodyBgColor, 'rgb(244, 244, 244)');
+```
+
+You should have a `div` element with a class of `color-grid`.
+
+```js
+const colorGrid = document.querySelector('div.color-grid');
+assert.exists(colorGrid);
+```
+
+You should have five `div` elements within the `.color-grid` element.
+
+```js
+const colorGridChildren = document.querySelectorAll('div.color-grid > div');
+assert.strictEqual(colorGridChildren.length, 5);
+```
+
+Each of the five `div` elements should each have a class of `color-box` and `color#`—substitute the order of the `div` for the `#` symbol.
+
+```js
+const colorGridChildren = document.querySelectorAll('div.color-grid > div');
+assert.strictEqual(colorGridChildren.length, 5);
+
+colorGridChildren.forEach((child, index) => {
+  const colorClass = `color${index + 1}`;
+  assert.isTrue(child.classList.contains('color-box'));
+  assert.isTrue(child.classList.contains(colorClass));
+});
+```
+
+The `.color-box` element should have a set `width` and `height`.
+
+```js
+const colorBox = document.querySelector('.color-box');
+assert.exists(colorBox);
+
+const colorBoxStyles = getComputedStyle(colorBox);
+const width = colorBoxStyles.width;
+const height = colorBoxStyles.height;
+
+assert.notStrictEqual(width, '0px');
+assert.notStrictEqual(height, '0px');
+```
+
+The `.color1` element should have a hexadecimal background color.
+
+```js
+assert.match(__helpers.removeCssComments(code), /\.color1\s*{[^}]*\bbackground-color\s*:\s*#[0-9a-fA-F]{3,6}\s*;[^}]*}/);
+```
+
+The `.color2` element should have an RGB background color.
+
+```js
+assert.match(__helpers.removeCssComments(code), /\.color2\s*{[^}]*\bbackground-color\s*:\s*rgb\s*\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)\s*;[^}]*}/);
+```
+
+The `.color3` element should have a predefined (word) background color.
+
+```js
+assert.match(__helpers.removeCssComments(code), /\.color3\s*{[^}]*\bbackground-color\s*:\s*[a-zA-Z]+\s*;[^}]*}/);
+```
+
+The `.color4` element should have a HSL background color.
+
+```js
+assert.match(__helpers.removeCssComments(code), /\.color4\s*{[^}]*\bbackground-color\s*:\s*hsl\s*\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*\)\s*;[^}]*}/);
+```
+
+The `.color5` element should have a background color set.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.color5').getPropVal('background-color', true));
+```
+
+# --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>Colored Boxes</title>
+</head>
+<body>
+
+</body>
+</html>
+```
+
+```css
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Boxes</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <h1>Colored Boxes</h1>
+    <div class="color-grid"> 
+        <div class="color-box color1"></div>
+        <div class="color-box color2"></div>
+        <div class="color-box color3"></div>
+        <div class="color-box color4"></div>
+        <div class="color-box color5"></div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0;
+    padding: 20px;
+    background-color: #f4f4f4;
+}
+
+h1 {
+    margin-bottom: 20px;
+}
+
+.color-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 10px;
+    width: 100%;
+    max-width: 800px;
+}
+
+.color-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    border-radius: 8px;
+    text-align: center;
+    width: 100px;
+    height: 100px;
+}
+
+.color1 {
+    background-color: #33FF57;
+}
+
+.color2 {
+    background-color: rgb(128,0,128);
+}
+
+.color3 {
+    background-color: orange;
+}
+
+.color4 {
+    background-color: hsl(59, 61%, 26%);
+}
+
+.color5 {
+    background-color: red;
+}
+```

curriculum/superblock-structure/full-stack.json

@@ -141,6 +141,7 @@
           "blocks": [
             { "dashedName": "lecture-working-with-colors-in-css" },
             { "dashedName": "workshop-colored-markers" },
+            { "dashedName": "lab-colored-boxes" },
             { "dashedName": "review-css-colors" },
             { "dashedName": "quiz-css-colors" }
           ]