diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json
index e3d0c331bcc..5a0bf95c6da 100644
--- a/client/i18n/locales/english/intro.json
+++ b/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": [
diff --git a/client/src/pages/learn/full-stack-developer/lab-colored-boxes/index.md b/client/src/pages/learn/full-stack-developer/lab-colored-boxes/index.md
new file mode 100644
index 00000000000..4e42d522bb4
--- /dev/null
+++ b/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.
diff --git a/curriculum/challenges/_meta/lab-colored-boxes/meta.json b/curriculum/challenges/_meta/lab-colored-boxes/meta.json
new file mode 100644
index 00000000000..0424351d836
--- /dev/null
+++ b/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"
+}
diff --git a/curriculum/challenges/english/25-front-end-development/lab-colored-boxes/66f3f6eb66ea9dc41cdc30df.md b/curriculum/challenges/english/25-front-end-development/lab-colored-boxes/66f3f6eb66ea9dc41cdc30df.md
new file mode 100644
index 00000000000..86adcee2dc0
--- /dev/null
+++ b/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
+
+
+
+
+
+ Colored Boxes
+
+
+
+
+
+```
+
+```css
+
+```
+
+# --solutions--
+
+```html
+
+
+
+
+
+ Colored Boxes
+
+
+
+