diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json
index 863b8dee32..c50456521b 100644
--- a/client/i18n/locales/english/intro.json
+++ b/client/i18n/locales/english/intro.json
@@ -95,10 +95,8 @@
           "In this course, you will use CSS to create your own painting in the style of Picasso. You will learn about FontAwesome SVG icons, CSS positioning, and reinforce the skills you have already been learning."
         ]
       },
-      "css-piano": {
-        "title": "CSS Piano",
-        "intro": ["", ""]
-      }
+      "css-piano": { "title": "CSS Piano", "intro": ["", ""] },
+      "css-photo-gallery": { "title": "CSS Photo Gallery", "intro": ["", ""] }
     }
   },
   "javascript-algorithms-and-data-structures": {
diff --git a/client/src/pages/learn/responsive-web-design/css-photo-gallery/index.md b/client/src/pages/learn/responsive-web-design/css-photo-gallery/index.md
new file mode 100644
index 0000000000..30dba3fac2
--- /dev/null
+++ b/client/src/pages/learn/responsive-web-design/css-photo-gallery/index.md
@@ -0,0 +1,10 @@
+---
+title: Introduction to the CSS Photo Gallery
+block: css-photo-gallery
+superBlock: Responsive Web Design
+isBeta: true
+---
+
+## Introduction to the CSS Photo Gallery
+
+This is a test for the new project-based curriculum.
diff --git a/client/utils/help-category-map.json b/client/utils/help-category-map.json
index 91c49993b0..a18d613758 100644
--- a/client/utils/help-category-map.json
+++ b/client/utils/help-category-map.json
@@ -78,5 +78,6 @@
   "learn-github-by-building-a-list-of-inspirational-quotes": "Relational Databases",
   "number-guessing-game": "Relational Databases",
   "accessibility-quiz": "HTML-CSS",
-  "registration-form": "HTML-CSS"
+  "registration-form": "HTML-CSS",
+  "css-photo-gallery": "HTML-CSS"
 }
diff --git a/curriculum/challenges/_meta/css-photo-gallery/meta.json b/curriculum/challenges/_meta/css-photo-gallery/meta.json
new file mode 100644
index 0000000000..3448ad5cf0
--- /dev/null
+++ b/curriculum/challenges/_meta/css-photo-gallery/meta.json
@@ -0,0 +1,98 @@
+{
+  "name": "CSS Photo Gallery",
+  "isUpcomingChange": true,
+  "dashedName": "css-photo-gallery",
+  "order": 20,
+  "time": "5 hours",
+  "template": "",
+  "required": [],
+  "superBlock": "responsive-web-design",
+  "superOrder": 1,
+  "isBeta": true,
+  "challengeOrder": [
+    [
+      "61537485c4f2a624f18d7794",
+      "Step 1"
+    ],
+    [
+      "61537a8054753e2f1f2a1574",
+      "Step 2"
+    ],
+    [
+      "61537bb9b1a29430ac15ad38",
+      "Step 3"
+    ],
+    [
+      "61537c5f81f0cf325b4a854c",
+      "Step 4"
+    ],
+    [
+      "61537c9eecea6a335db6da79",
+      "Step 5"
+    ],
+    [
+      "61537d86bdc3dd343688fceb",
+      "Step 6"
+    ],
+    [
+      "615380dff67172357fcf0425",
+      "Step 7"
+    ],
+    [
+      "615f171d05def3218035dc85",
+      "Step 8"
+    ],
+    [
+      "6153893900438b4643590367",
+      "Step 9"
+    ],
+    [
+      "6153897c27f6334716ee5abe",
+      "Step 10"
+    ],
+    [
+      "615389bd81347947ea7ba896",
+      "Step 11"
+    ],
+    [
+      "6153908a366afb4d57185c8d",
+      "Step 12"
+    ],
+    [
+      "615392916d83fa4f02f7e2cf",
+      "Step 13"
+    ],
+    [
+      "6153938dce8b294ff8f5a4e9",
+      "Step 14"
+    ],
+    [
+      "6153947986535e5117e60615",
+      "Step 15"
+    ],
+    [
+      "61539e07e7430b528fbffe21",
+      "Step 16"
+    ],
+    [
+      "61539f32a206bd53ec116465",
+      "Step 17"
+    ],
+    [
+      "6153a04847abee57a3a406ac",
+      "Step 18"
+    ],
+    [
+      "6153a3485f0b20591d26d2a1",
+      "Step 19"
+    ],
+    [
+      "6153a3952facd25a83fe8083",
+      "Step 20"
+    ],
+    [
+      "6153a3ebb4f7f05b8401b716",
+      "Step 21"
+    ]
+  ]
+}
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-001.md b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-001.md
new file mode 100644
index 0000000000..e87f069508
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-001.md
@@ -0,0 +1,110 @@
+---
+id: 61537485c4f2a624f18d7794
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+Begin with your standard HTML boilerplate. Add a `DOCTYPE` declaration, an `html` element, a `head` element, and a `body` element.
+
+# --hints--
+
+Your code should contain the `DOCTYPE` reference.
+
+```js
+assert(code.match(/<!DOCTYPE/gi));
+```
+
+You should include a space after the `DOCTYPE` reference.
+
+```js
+assert(code.match(/<!DOCTYPE\s+/gi));
+```
+
+You should define the document type to be `html`.
+
+```js
+assert(code.match(/<!DOCTYPE\s+html/gi));
+```
+
+You should close the `DOCTYPE` declaration with a `>` after the type.
+
+```js
+assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
+```
+
+Your `html` element should have an opening tag.
+
+```js
+assert(code.match(/<html\s*>/gi));
+```
+
+Your `html` element should have a closing tag.
+
+```js
+assert(code.match(/<\/html\s*>/));
+```
+
+Your `html` element should be below the `DOCTYPE` declaration.
+
+```js
+assert(code.match(/(?<!<html\s*>)<!DOCTYPE\s+html\s*>/gi));
+```
+
+You should have an opening `head` tag.
+
+```js
+assert(code.match(/<head\s*>/i));
+```
+
+You should have a closing `head` tag.
+
+```js
+assert(code.match(/<\/head\s*>/i));
+```
+
+You should have an opening `body` tag.
+
+```js
+assert(code.match(/<body\s*>/i));
+```
+
+You should have a closing `body` tag.
+
+```js
+assert(code.match(/<\/body\s*>/i));
+```
+
+The `head` and `body` elements should be siblings.
+
+```js
+assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
+```
+
+The `head` element should be within the `html` element.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
+```
+
+The `body` element should be within the `html` element.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-002.md b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-002.md
new file mode 100644
index 0000000000..bf692c5d36
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-002.md
@@ -0,0 +1,58 @@
+---
+id: 61537a8054753e2f1f2a1574
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Within your `head` element, add a `meta` tag with the `name` set to `viewport` and the `content` set to `width=device-width, initial-scale=1`.
+
+Also add a `meta` tag with the `charset` set to `UTF-8`.
+
+# --hints--
+
+You should have two `meta` elements.
+
+```js
+const meta = document.querySelectorAll('meta');
+assert(meta?.length === 2);
+```
+
+One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`.
+
+```js
+const meta = [...document.querySelectorAll('meta')];
+const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content').match(/width=device-width,\s?initial-scale=1(.0)?/) && !m?.getAttribute('charset'));
+assert.exists(target);
+```
+
+Your other `meta` element should have the `charset` attribute set to `UTF-8`.
+
+```js
+const meta = [...document.querySelectorAll('meta')];
+const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8');
+assert.exists(target);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html>
+  <head>
+
+  </head>
+  <body>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-003.md b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-003.md
new file mode 100644
index 0000000000..a1b92f1e8d
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-003.md
@@ -0,0 +1,62 @@
+---
+id: 61537bb9b1a29430ac15ad38
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Within your `head` element, add a `title` element with the text set to `CSS Flexbox Photo Gallery`, and a `link` element to add your `styles.css` file to the page.
+
+# --hints--
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+Your code should have a `title` element.
+
+```js
+const title = document.querySelector('title');
+assert.exists(title);
+```
+
+Your project should have a title of `CSS Flexbox Photo Gallery`.
+
+```js
+const title = document.querySelector('title');
+assert.equal(title?.text?.trim()?.toLowerCase(), 'css flexbox photo gallery')
+```
+
+Remember, the casing and spelling matter for the title.
+
+```js
+const title = document.querySelector('title');
+assert.equal(title?.text?.trim(), 'CSS Flexbox Photo Gallery');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+  </head>
+  <body>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-004.md b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-004.md
new file mode 100644
index 0000000000..9f8b4e0a8c
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-004.md
@@ -0,0 +1,62 @@
+---
+id: 61537c5f81f0cf325b4a854c
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Within the `body` element, create a `div` with the `class` set to `header`.
+
+Inside the `.header` element nest an `h1` element with the text `CSS FLEXBOX PHOTO GALLERY`.
+
+# --hints--
+
+You should have a `div` element within your `body` element.
+
+```js
+assert.exists(document.querySelector('body')?.querySelector('div'))
+```
+
+Your `div` element should have the `class` set to `header`.
+
+```js
+assert(document?.querySelector('body')?.querySelector('div')?.classList?.contains('header'))
+```
+
+Your `.header` element should have an `h1` element.
+
+```js
+assert.exists(document.querySelector('.header')?.querySelector('h1'));
+```
+
+Your `h1` should have the text `CSS FLEXBOX PHOTO GALLERY`. Remember that casing matters.
+
+```js
+assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'CSS FLEXBOX PHOTO GALLERY')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Flexbox Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-005.md b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-005.md
new file mode 100644
index 0000000000..8f51084a02
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-005.md
@@ -0,0 +1,65 @@
+---
+id: 61537c9eecea6a335db6da79
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Below your `.header` element, create a new `div` element with the `id` set to `gallery`.
+
+In that `#gallery` element, create ten `img` elements.
+
+# --hints--
+
+You should create a second `div` element in your `body` element.
+
+```js
+assert(document.querySelector('body')?.querySelectorAll('div')?.length === 2);
+```
+
+Your new `div` element should come after your `.header` element.
+
+```js
+assert(document.querySelector('body')?.querySelectorAll('div')?.[0]?.classList?.contains('header'));
+```
+
+Your new `div` element should have an `id` set to `gallery`.
+
+```js
+assert(document.querySelector('body')?.querySelectorAll('div')?.[1]?.id === 'gallery');
+```
+
+Your `#gallery` element should have ten `img` elements.
+
+```js
+assert(document.querySelector('#gallery')?.querySelectorAll('img')?.length === 10);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Flexbox Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="header">
+      <h1>CSS FLEXBOX PHOTO GALLERY</h1>
+    </div>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-006.md b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-006.md
new file mode 100644
index 0000000000..7d735f5331
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-006.md
@@ -0,0 +1,120 @@
+---
+id: 61537d86bdc3dd343688fceb
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Now you need to give each `img` element a `src` attribute. You are going to use the format `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/#.jpg`, replacing `#` with the `img` element order.
+
+So your first `img` element would use `1.jpg`, your second would use `2.jpg`, and so on.
+
+# --hints--
+
+All ten of your `img` elements should have a `src` attribute.
+
+```js
+const images = [...document.querySelectorAll('img')];
+assert(images.every(image => image.getAttribute('src')));
+```
+
+Your first `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg`.
+
+```js
+assert(document.querySelectorAll('img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg');
+```
+
+Your second `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg`.
+
+```js
+assert(document.querySelectorAll('img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg');
+```
+
+Your third `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg`.
+
+```js
+assert(document.querySelectorAll('img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg');
+```
+
+Your fourth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg`.
+
+```js
+assert(document.querySelectorAll('img')?.[3]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg');
+```
+
+Your fifth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg`.
+
+```js
+assert(document.querySelectorAll('img')?.[4]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg');
+```
+
+Your sixth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg`.
+
+```js
+assert(document.querySelectorAll('img')?.[5]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg');
+```
+
+Your seventh `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg`.
+
+```js
+assert(document.querySelectorAll('img')?.[6]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg');
+```
+
+Your eighth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg`.
+
+```js
+assert(document.querySelectorAll('img')?.[7]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg');
+```
+
+Your ninth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg`.
+
+```js
+assert(document.querySelectorAll('img')?.[8]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg');
+```
+
+Your tenth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg`.
+
+```js
+assert(document.querySelectorAll('img')?.[9]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Flexbox Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="header">
+      <h1>CSS FLEXBOX PHOTO GALLERY</h1>
+    </div>
+--fcc-editable-region--
+    <div id="gallery">
+      <img />
+      <img />
+      <img />
+      <img />
+      <img />
+      <img />
+      <img />
+      <img />
+      <img />
+      <img />
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-007.md b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-007.md
new file mode 100644
index 0000000000..03f0153401
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-007.md
@@ -0,0 +1,63 @@
+---
+id: 615380dff67172357fcf0425
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Normalize your box model by creating a `*` selector and setting the `box-sizing` property to `border-box`.
+
+# --hints--
+
+You should have a `*` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+Your `*` selector should have a `box-sizing` property set to `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Flexbox Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="header">
+      <h1>CSS FLEXBOX PHOTO GALLERY</h1>
+    </div>
+    <div id="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-008.md b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-008.md
new file mode 100644
index 0000000000..6cecbb51e2
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-008.md
@@ -0,0 +1,77 @@
+---
+id: 615f171d05def3218035dc85
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Your images are currently too large, and you will not be able to see your CSS changes.
+
+Create a `#gallery img` selector to target your images. Give it a `width` property set to `25%`.
+
+Also set the `height` property to `300px` to keep your images a uniform size.
+
+# --hints--
+
+You should have a `#gallery img` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('#gallery img'))
+```
+
+Your `#gallery img` selector should have a `width` property set to `25%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.width === '25%')
+```
+
+Your `#gallery img` selector should have a `height` property set to `300px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.height === '300px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Flexbox Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="header">
+      <h1>CSS FLEXBOX PHOTO GALLERY</h1>
+    </div>
+    <div id="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-009.md b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-009.md
new file mode 100644
index 0000000000..b7fe717c4d
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-009.md
@@ -0,0 +1,78 @@
+---
+id: 6153893900438b4643590367
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Remove the margin from your `body` element, set the font to `Arial`, and give it a background color of `#EBE7E7`.
+
+# --hints--
+
+You should have a `body` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'))
+```
+
+Your `body` selector should have a `font-family` property set to `Arial`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'Arial');
+```
+
+Your `body` selector should have a `background-color` property set to `#EBE7E7`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(235, 231, 231)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Flexbox Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="header">
+      <h1>CSS FLEXBOX PHOTO GALLERY</h1>
+    </div>
+    <div id="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+#gallery img {
+  width: 25%;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-010.md b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-010.md
new file mode 100644
index 0000000000..d8970fdd8a
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-010.md
@@ -0,0 +1,90 @@
+---
+id: 6153897c27f6334716ee5abe
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Align your `.header` text in the center, give it a padding of `32px` on all sides, and set the background to `#E0DDDD`.
+
+# --hints--
+
+You should have a `.header` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.header'));
+```
+
+Your `.header` selector should have a `text-align` property set to `center`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center');
+```
+
+Your `.header` selector should have a `padding` property set to `32px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px');
+```
+
+Your `.header` selector should have a `background-color` property set to `#E0DDDD`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(224, 221, 221)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Flexbox Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="header">
+      <h1>CSS FLEXBOX PHOTO GALLERY</h1>
+    </div>
+    <div id="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Arial;
+  background: #EBE7E7;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+#gallery img {
+  width: 25%;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-011.md b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-011.md
new file mode 100644
index 0000000000..4496521429
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-011.md
@@ -0,0 +1,86 @@
+---
+id: 615389bd81347947ea7ba896
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Flexbox is a one-dimensional CSS layout approach that focuses on the flow of content. It offers the ability to control the way items are spaced and aligned within a container.
+
+To set an element to use Flexbox, you give it a `display` property set to `flex`. Create a `#gallery` selector and give it that property.
+
+# --hints--
+
+You should have a `#gallery` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gallery'));
+```
+
+Your `#gallery` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.display === 'flex');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Flexbox Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="header">
+      <h1>CSS FLEXBOX PHOTO GALLERY</h1>
+    </div>
+    <div id="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Arial;
+  background: #EBE7E7;
+}
+
+.header {
+  text-align: center;
+  padding: 32px;
+  background: #E0DDDD;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+#gallery img {
+  width: 25%;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-012.md b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-012.md
new file mode 100644
index 0000000000..5d6347a6c8
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-012.md
@@ -0,0 +1,82 @@
+---
+id: 6153908a366afb4d57185c8d
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Flexbox can be thought of as having two axes, the main axis and the cross axis. The main axis is determined by the `flex-direction` property. If `flex-direction` is set to `row` or `row-reverse`, the main axis is horizontal. If `flex-direction` is set to `column` or `column-reverse`, the main axis is vertical.
+
+Give your `#gallery` selector a `flex-direction` property set to `row`.
+
+# --hints--
+
+Your `#gallery` selector should have a `flex-direction` property set to `row`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexDirection === 'row');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Flexbox Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="header">
+      <h1>CSS FLEXBOX PHOTO GALLERY</h1>
+    </div>
+    <div id="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Arial;
+  background: #EBE7E7;
+}
+
+.header {
+  text-align: center;
+  padding: 32px;
+  background: #E0DDDD;
+}
+
+--fcc-editable-region--
+#gallery {
+  display: flex;
+}
+--fcc-editable-region--
+
+#gallery img {
+  width: 25%;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-013.md b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-013.md
new file mode 100644
index 0000000000..63d4aba35b
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-013.md
@@ -0,0 +1,85 @@
+---
+id: 615392916d83fa4f02f7e2cf
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+You may have noticed that your images have all moved onto the same row.
+
+The `flex-wrap` property determines how your items should behave when the flex container is too small. Setting this property to `wrap` will allow your items to wrap to the next row/column (depending on your main axis), where `nowrap` will prevent your items from wrapping. When this is set to `nowrap`, items may either shrink to fit or overflow.
+
+Give the `#gallery` selector a `flex-wrap` property set to `wrap`. You should see your images take a four-column layout. This is because you set their `width` to `25%` in an earlier step.
+
+# --hints--
+
+Your `#gallery` selector should have a `flex-wrap` property set to `wrap`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexWrap === 'wrap');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Flexbox Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="header">
+      <h1>CSS FLEXBOX PHOTO GALLERY</h1>
+    </div>
+    <div id="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Arial;
+  background: #EBE7E7;
+}
+
+.header {
+  text-align: center;
+  padding: 32px;
+  background: #E0DDDD;
+}
+
+--fcc-editable-region--
+#gallery {
+  display: flex;
+  flex-direction: row;
+}
+--fcc-editable-region--
+
+#gallery img {
+  width: 25%;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-014.md b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-014.md
new file mode 100644
index 0000000000..1e7166d1e0
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-014.md
@@ -0,0 +1,84 @@
+---
+id: 6153938dce8b294ff8f5a4e9
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+The `justify-content` property determines how the items inside a flex container are positioned along the main axis, affecting their position and the space around them.
+
+Give your `#gallery` selector a `justify-content` property set to `center`.
+
+# --hints--
+
+Your `#gallery` selector should have a `justify-content` property set to `center`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.justifyContent === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Flexbox Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="header">
+      <h1>CSS FLEXBOX PHOTO GALLERY</h1>
+    </div>
+    <div id="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Arial;
+  background: #EBE7E7;
+}
+
+.header {
+  text-align: center;
+  padding: 32px;
+  background: #E0DDDD;
+}
+
+--fcc-editable-region--
+#gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+--fcc-editable-region--
+
+#gallery img {
+  width: 25%;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-015.md b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-015.md
new file mode 100644
index 0000000000..026ce5d4c9
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-015.md
@@ -0,0 +1,85 @@
+---
+id: 6153947986535e5117e60615
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+The `align-items` property positions the flex content along the cross axis. In this case, with your `flex-direction` set to `row`, your cross axis would be vertical.
+
+To vertically center your images, give your `#gallery` selector an `align-items` property set to `center`.
+
+# --hints--
+
+Your `#gallery` selector should have an `align-items` property set to `center`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.alignItems === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Flexbox Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="header">
+      <h1>CSS FLEXBOX PHOTO GALLERY</h1>
+    </div>
+    <div id="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Arial;
+  background: #EBE7E7;
+}
+
+.header {
+  text-align: center;
+  padding: 32px;
+  background: #E0DDDD;
+}
+
+--fcc-editable-region--
+#gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+--fcc-editable-region--
+
+#gallery img {
+  width: 25%;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-016.md b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-016.md
new file mode 100644
index 0000000000..3127787491
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-016.md
@@ -0,0 +1,84 @@
+---
+id: 61539e07e7430b528fbffe21
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Give your `#gallery` selector a `padding` property set to `0 4px`.
+
+# --hints--
+
+Your `#gallery` selector should have a `padding` property set to `0 4px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.padding === '0px 4px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Flexbox Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="header">
+      <h1>CSS FLEXBOX PHOTO GALLERY</h1>
+    </div>
+    <div id="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Arial;
+  background: #EBE7E7;
+}
+
+.header {
+  text-align: center;
+  padding: 32px;
+  background: #E0DDDD;
+}
+
+--fcc-editable-region--
+#gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+--fcc-editable-region--
+
+#gallery img {
+  width: 25%;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-017.md b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-017.md
new file mode 100644
index 0000000000..53550b8c88
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-017.md
@@ -0,0 +1,86 @@
+---
+id: 61539f32a206bd53ec116465
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Notice how some of your images have become distorted. This is because the images have different aspect ratios. Rather than setting each aspect ratio individually, you can use the `object-fit` property to determine how images should behave.
+
+Give your `#gallery img` selector the `object-fit` property and set it to `cover`. This will tell the image to fill the `img` container while maintaining aspect ratio, resulting in cropping to fit.
+
+# --hints--
+
+Your `#gallery img` selector should have an `object-fit` property set to `cover`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.objectFit === 'cover');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Flexbox Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="header">
+      <h1>CSS FLEXBOX PHOTO GALLERY</h1>
+    </div>
+    <div id="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Arial;
+  background: #EBE7E7;
+}
+
+.header {
+  text-align: center;
+  padding: 32px;
+  background: #E0DDDD;
+}
+
+#gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+--fcc-editable-region--
+#gallery img {
+  width: 25%;
+  height: 300px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-018.md b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-018.md
new file mode 100644
index 0000000000..5e493415d2
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-018.md
@@ -0,0 +1,93 @@
+---
+id: 6153a04847abee57a3a406ac
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Your images need some space between them.
+
+Give your `#gallery img` selector a `margin-top` property of `8px` and a `padding` property of `0 4px`.
+
+# --hints--
+
+Your `#gallery img` selector should have a `margin-top` property of `8px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.marginTop === '8px');
+```
+
+Your `#gallery img` selector should have a `padding` property of `0 4px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.padding === '0px 4px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Flexbox Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="header">
+      <h1>CSS FLEXBOX PHOTO GALLERY</h1>
+    </div>
+    <div id="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Arial;
+  background: #EBE7E7;
+}
+
+.header {
+  text-align: center;
+  padding: 32px;
+  background: #E0DDDD;
+}
+
+#gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+--fcc-editable-region--
+#gallery img {
+  width: 25%;
+  height: 300px;
+  object-fit: cover;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-019.md b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-019.md
new file mode 100644
index 0000000000..c199c0c76f
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-019.md
@@ -0,0 +1,87 @@
+---
+id: 6153a3485f0b20591d26d2a1
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Smooth out your images a bit by giving the `#gallery img` selector a `border-radius` property of `10px`.
+
+# --hints--
+
+Your `#gallery img` selector should have a `border-radius` property set to `10px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.borderRadius === '10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Flexbox Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="header">
+      <h1>CSS FLEXBOX PHOTO GALLERY</h1>
+    </div>
+    <div id="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Arial;
+  background: #EBE7E7;
+}
+
+.header {
+  text-align: center;
+  padding: 32px;
+  background: #E0DDDD;
+}
+
+#gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+--fcc-editable-region--
+#gallery img {
+  width: 25%;
+  height: 300px;
+  object-fit: cover;
+  margin-top: 8px;
+  padding: 0 4px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-020.md b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-020.md
new file mode 100644
index 0000000000..b2e702e390
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-020.md
@@ -0,0 +1,111 @@
+---
+id: 6153a3952facd25a83fe8083
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Create a media query for screens smaller than `800px` in width. In that media query, create a `#gallery img` rule and set the `width` property to `50%`. This will convert your gallery to a two-column layout.
+
+# --hints--
+
+You should add a new `@media` query.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1);
+```
+
+Your new `@media` query should have a `max-width` of `800px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === '(max-width: 800px)');
+```
+
+Your `@media` query should have a `#gallery img` rule.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 800px)');
+assert(rules?.find(rule => rule.selectorText === '#gallery img'));
+```
+
+Your `#gallery img` rule should have a `width` property set to `50%`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 800px)');
+const imgRule = rules?.find(rule => rule.selectorText === '#gallery img');
+assert(imgRule?.style.width === '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Flexbox Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="header">
+      <h1>CSS FLEXBOX PHOTO GALLERY</h1>
+    </div>
+    <div id="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Arial;
+  background: #EBE7E7;
+}
+
+.header {
+  text-align: center;
+  padding: 32px;
+  background: #E0DDDD;
+}
+
+#gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+#gallery img {
+  width: 25%;
+  height: 300px;
+  object-fit: cover;
+  margin-top: 8px;
+  padding: 0 4px;
+  border-radius: 10px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-021.md b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-021.md
new file mode 100644
index 0000000000..044158a50d
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-photo-gallery/step-021.md
@@ -0,0 +1,127 @@
+---
+id: 6153a3ebb4f7f05b8401b716
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Resize the preview to see the layout change from your media query.
+
+Finally, create another media query for screens smaller than `600px` wide. In that media query, create a `#gallery img` rule and set the `width` property to `100%`. This will give your gallery a single-column layout.
+
+Your CSS Flexbox Photo Gallery is now complete.
+
+# --hints--
+
+You should have a second `@media` query.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2);
+```
+
+Your new `@media` query should come after your existing one.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === '(max-width: 800px)');
+```
+
+Your new `@media` query should have a `max-width` of `600px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.media?.mediaText === '(max-width: 600px)');
+```
+
+Your new `@media` query should have a `#gallery img` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 600px)');
+assert(rules?.find(rule => rule?.selectorText === '#gallery img'));
+```
+
+Your `#gallery img` rule should have a `width` property set to `100%`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 600px)');
+const imgRule = rules?.find(rule => rule?.selectorText === '#gallery img');
+assert(imgRule?.style?.width === '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Flexbox Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="header">
+      <h1>CSS FLEXBOX PHOTO GALLERY</h1>
+    </div>
+    <div id="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Arial;
+  background: #EBE7E7;
+}
+
+.header {
+  text-align: center;
+  padding: 32px;
+  background: #E0DDDD;
+}
+
+#gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+#gallery img {
+  width: 25%;
+  height: 300px;
+  object-fit: cover;
+  margin-top: 8px;
+  padding: 0 4px;
+  border-radius: 10px;
+}
+
+@media (max-width: 800px) {
+  #gallery img {
+    width: 50%;
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/utils/preformatted-block-names.json b/utils/preformatted-block-names.json
index c1c9890589..49ac4424a7 100644
--- a/utils/preformatted-block-names.json
+++ b/utils/preformatted-block-names.json
@@ -27,5 +27,6 @@
   "javascript-spreadsheet": "JavaScript Spreadsheet",
   "intermediate-javascript-calorie-counter": "Intermediate JavaScript Calorie Counter",
   "d3-dashboard": "D3 Dashboard",
-  "registration-form": "Registration Form"
+  "registration-form": "Registration Form",
+  "css-photo-gallery": "CSS Photo Gallery"
 }