fix(curriculum): implement a lesson about the box-sizing property (#5…

…0795) Co-authored-by: Moshe <shootermv@gmail.com> Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> Co-authored-by: jdwilkin4 <jwilkin4@hotmail.com>
freeCodeCamp · Sep 5, 2023 · 578d162 · 578d162
1 parent 18f7e74
commit 578d162
Show file tree

Hide file tree

Showing 69 changed files with 1,259 additions and 212 deletions.
diff --git a/curriculum/challenges/_meta/learn-css-flexbox-by-building-a-photo-gallery/meta.json b/curriculum/challenges/_meta/learn-css-flexbox-by-building-a-photo-gallery/meta.json
@@ -36,64 +36,76 @@
       "title": "Step 6"
     },
     {
-      "id": "615380dff67172357fcf0425",
+      "id": "64dd076a1b33c86d84b4232f",
       "title": "Step 7"
     },
     {
-      "id": "615f171d05def3218035dc85",
+      "id": "6494da0daf5df5197963671d",
       "title": "Step 8"
     },
     {
-      "id": "6153893900438b4643590367",
+      "id": "6493bc0d99879635209565aa",
       "title": "Step 9"
     },
     {
-      "id": "6153897c27f6334716ee5abe",
+      "id": "64dd136e4e8b0894f9c70d86",
       "title": "Step 10"
     },
     {
-      "id": "615389bd81347947ea7ba896",
+      "id": "615380dff67172357fcf0425",
       "title": "Step 11"
     },
     {
-      "id": "6153908a366afb4d57185c8d",
+      "id": "615f171d05def3218035dc85",
       "title": "Step 12"
     },
     {
-      "id": "615392916d83fa4f02f7e2cf",
+      "id": "6153893900438b4643590367",
       "title": "Step 13"
     },
     {
-      "id": "6153938dce8b294ff8f5a4e9",
+      "id": "6153897c27f6334716ee5abe",
       "title": "Step 14"
     },
     {
-      "id": "6153947986535e5117e60615",
+      "id": "6153908a366afb4d57185c8d",
       "title": "Step 15"
     },
     {
-      "id": "61539e07e7430b528fbffe21",
+      "id": "615392916d83fa4f02f7e2cf",
       "title": "Step 16"
     },
     {
-      "id": "61539f32a206bd53ec116465",
+      "id": "6153938dce8b294ff8f5a4e9",
       "title": "Step 17"
     },
     {
-      "id": "6153a04847abee57a3a406ac",
+      "id": "6153947986535e5117e60615",
       "title": "Step 18"
     },
     {
-      "id": "6153a3485f0b20591d26d2a1",
+      "id": "61539e07e7430b528fbffe21",
       "title": "Step 19"
     },
     {
-      "id": "6153a3952facd25a83fe8083",
+      "id": "61539f32a206bd53ec116465",
       "title": "Step 20"
     },
     {
-      "id": "6153a3ebb4f7f05b8401b716",
+      "id": "6153a04847abee57a3a406ac",
       "title": "Step 21"
+    },
+    {
+      "id": "6153a3485f0b20591d26d2a1",
+      "title": "Step 22"
+    },
+    {
+      "id": "6153a3952facd25a83fe8083",
+      "title": "Step 23"
+    },
+    {
+      "id": "6153a3ebb4f7f05b8401b716",
+      "title": "Step 24"
     }
   ]
 }
diff --git a/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md b/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md
@@ -1,6 +1,6 @@
 ---
 id: 61537485c4f2a624f18d7794
-title: 步骤 1
+title: Step 1
 challengeType: 0
 dashedName: step-1
 ---

diff --git a/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md b/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md
@@ -1,6 +1,6 @@
 ---
 id: 61537a8054753e2f1f2a1574
-title: 步骤 2
+title: Step 2
 challengeType: 0
 dashedName: step-2
 ---

diff --git a/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md b/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md
@@ -1,6 +1,6 @@
 ---
 id: 61537bb9b1a29430ac15ad38
-title: 步骤 3
+title: Step 3
 challengeType: 0
 dashedName: step-3
 ---

diff --git a/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md b/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md
@@ -1,6 +1,6 @@
 ---
 id: 61537c5f81f0cf325b4a854c
-title: 步骤 4
+title: Step 4
 challengeType: 0
 dashedName: step-4
 ---

diff --git a/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md b/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md
@@ -1,6 +1,6 @@
 ---
 id: 61537c9eecea6a335db6da79
-title: 步骤 5
+title: Step 5
 challengeType: 0
 dashedName: step-5
 ---

diff --git a/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md b/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md
@@ -1,6 +1,6 @@
 ---
 id: 61537d86bdc3dd343688fceb
-title: 步骤 6
+title: Step 6
 challengeType: 0
 dashedName: step-6
 ---

diff --git a/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md b/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md
@@ -1,8 +1,8 @@
 ---
 id: 615380dff67172357fcf0425
-title: 步骤 7
+title: Step 11
 challengeType: 0
-dashedName: step-7
+dashedName: step-11
 ---
 
 # --description--

diff --git a/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md b/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md
@@ -1,8 +1,8 @@
 ---
 id: 6153893900438b4643590367
-title: 步骤 9
+title: Step 13
 challengeType: 0
-dashedName: step-9
+dashedName: step-13
 ---
 
 # --description--

diff --git a/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md b/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md
@@ -1,8 +1,8 @@
 ---
 id: 6153897c27f6334716ee5abe
-title: 步骤 10
+title: Step 14
 challengeType: 0
-dashedName: step-10
+dashedName: step-14
 ---
 
 # --description--

diff --git a/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md b/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md
@@ -1,8 +1,8 @@
 ---
 id: 615389bd81347947ea7ba896
-title: 步骤 11
+title: Step 15
 challengeType: 0
-dashedName: step-11
+dashedName: step-15
 ---
 
 # --description--

diff --git a/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md b/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md
@@ -1,8 +1,8 @@
 ---
 id: 6153908a366afb4d57185c8d
-title: 步骤 12
+title: Step 16
 challengeType: 0
-dashedName: step-12
+dashedName: step-16
 ---
 
 # --description--

diff --git a/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md b/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md
@@ -1,8 +1,8 @@
 ---
 id: 615392916d83fa4f02f7e2cf
-title: 步骤 13
+title: Step 17
 challengeType: 0
-dashedName: step-13
+dashedName: step-17
 ---
 
 # --description--

diff --git a/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md b/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md
@@ -1,8 +1,8 @@
 ---
 id: 6153938dce8b294ff8f5a4e9
-title: 步骤 14
+title: Step 18
 challengeType: 0
-dashedName: step-14
+dashedName: step-18
 ---
 
 # --description--

diff --git a/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md b/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md
@@ -1,8 +1,8 @@
 ---
 id: 6153947986535e5117e60615
-title: 步骤 15
+title: Step 19
 challengeType: 0
-dashedName: step-15
+dashedName: step-19
 ---
 
 # --description--

diff --git a/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md b/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md
@@ -1,8 +1,8 @@
 ---
 id: 61539e07e7430b528fbffe21
-title: 步骤 16
+title: Step 20
 challengeType: 0
-dashedName: step-16
+dashedName: step-20
 ---
 
 # --description--

diff --git a/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md b/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md
@@ -1,8 +1,8 @@
 ---
 id: 61539f32a206bd53ec116465
-title: 步骤 17
+title: Step 21
 challengeType: 0
-dashedName: step-17
+dashedName: step-21
 ---
 
 # --description--

diff --git a/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md b/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md
@@ -1,8 +1,8 @@
 ---
 id: 6153a04847abee57a3a406ac
-title: 步骤 18
+title: Step 22
 challengeType: 0
-dashedName: step-18
+dashedName: step-22
 ---
 
 # --description--

diff --git a/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md b/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md
@@ -1,8 +1,8 @@
 ---
 id: 6153a3485f0b20591d26d2a1
-title: 步骤 19
+title: Step 23
 challengeType: 0
-dashedName: step-19
+dashedName: step-23
 ---
 
 # --description--

diff --git a/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md b/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md
@@ -1,8 +1,8 @@
 ---
 id: 6153a3952facd25a83fe8083
-title: 步骤 20
+title: Step 24
 challengeType: 0
-dashedName: step-20
+dashedName: step-24
 ---
 
 # --description--

diff --git a/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md b/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md
@@ -1,8 +1,8 @@
 ---
 id: 6153a3ebb4f7f05b8401b716
-title: 步骤 21
+title: Step 25
 challengeType: 0
-dashedName: step-21
+dashedName: step-25
 ---
 
 # --description--

diff --git a/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md b/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md
@@ -1,8 +1,8 @@
 ---
 id: 615f171d05def3218035dc85
-title: 步骤 8
+title: Step 12
 challengeType: 0
-dashedName: step-8
+dashedName: step-12
 ---
 
 # --description--

diff --git a/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md b/...gn-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md
@@ -0,0 +1,75 @@
+---
+id: 6493bc0d99879635209565aa
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+The `border-box` sizing model does the opposite of `content-box`. The total width of the element, including padding and border, will be the explicit width set. The content of the element will shrink to make room for the padding and border.
+
+Change the `box-sizing` property to `border-box`. Notice how your blue image borders now fit within your red gallery border.
+
+# --hints--
+
+
+Your * selector should have a `box-sizing` property set to `border-box` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'border-box');
+```
+
+
+# --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>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="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">
+    </div>
+  </body>
+</html>
+
+
+```
+
+```css
+--fcc-editable-region--
+ * {
+  box-sizing: content-box;
+}
+--fcc-editable-region--
+
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+```