From 578d162b902dc5a657fd29a2143366261db290a2 Mon Sep 17 00:00:00 2001 From: Christine Belzie <105683440+CBID2@users.noreply.github.com> Date: Tue, 5 Sep 2023 10:42:39 -0400 Subject: [PATCH] fix(curriculum): implement a lesson about the box-sizing property (#50795) Co-authored-by: Moshe Co-authored-by: Naomi Carrigan Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> Co-authored-by: jdwilkin4 --- .../meta.json | 42 +++--- .../61537485c4f2a624f18d7794.md | 2 +- .../61537a8054753e2f1f2a1574.md | 2 +- .../61537bb9b1a29430ac15ad38.md | 2 +- .../61537c5f81f0cf325b4a854c.md | 2 +- .../61537c9eecea6a335db6da79.md | 2 +- .../61537d86bdc3dd343688fceb.md | 2 +- .../615380dff67172357fcf0425.md | 4 +- .../6153893900438b4643590367.md | 4 +- .../6153897c27f6334716ee5abe.md | 4 +- .../615389bd81347947ea7ba896.md | 4 +- .../6153908a366afb4d57185c8d.md | 4 +- .../615392916d83fa4f02f7e2cf.md | 4 +- .../6153938dce8b294ff8f5a4e9.md | 4 +- .../6153947986535e5117e60615.md | 4 +- .../61539e07e7430b528fbffe21.md | 4 +- .../61539f32a206bd53ec116465.md | 4 +- .../6153a04847abee57a3a406ac.md | 4 +- .../6153a3485f0b20591d26d2a1.md | 4 +- .../6153a3952facd25a83fe8083.md | 4 +- .../6153a3ebb4f7f05b8401b716.md | 4 +- .../615f171d05def3218035dc85.md | 4 +- .../6493bc0d99879635209565aa.md | 75 +++++++++++ .../6494da0daf5df5197963671d.md | 83 ++++++++++++ .../64dd076a1b33c86d84b4232f.md | 126 ++++++++++++++++++ .../64dd136e4e8b0894f9c70d86.md} | 52 +++----- .../615380dff67172357fcf0425.md | 35 ++++- .../6153893900438b4643590367.md | 53 ++++++-- .../6153897c27f6334716ee5abe.md | 59 +++----- .../6153908a366afb4d57185c8d.md | 4 +- .../615392916d83fa4f02f7e2cf.md | 4 +- .../6153938dce8b294ff8f5a4e9.md | 4 +- .../6153947986535e5117e60615.md | 4 +- .../61539e07e7430b528fbffe21.md | 4 +- .../61539f32a206bd53ec116465.md | 4 +- .../6153a04847abee57a3a406ac.md | 4 +- .../6153a3485f0b20591d26d2a1.md | 4 +- .../6153a3952facd25a83fe8083.md | 4 +- .../6153a3ebb4f7f05b8401b716.md | 4 +- .../615f171d05def3218035dc85.md | 36 +++-- .../6493bc0d99879635209565aa.md | 75 +++++++++++ .../6494da0daf5df5197963671d.md | 83 ++++++++++++ .../64dd076a1b33c86d84b4232f.md | 126 ++++++++++++++++++ .../64dd136e4e8b0894f9c70d86.md | 79 +++++++++++ .../61537485c4f2a624f18d7794.md | 2 +- .../61537a8054753e2f1f2a1574.md | 2 +- .../61537bb9b1a29430ac15ad38.md | 2 +- .../61537c5f81f0cf325b4a854c.md | 2 +- .../61537c9eecea6a335db6da79.md | 2 +- .../61537d86bdc3dd343688fceb.md | 2 +- .../615380dff67172357fcf0425.md | 4 +- .../6153893900438b4643590367.md | 4 +- .../6153897c27f6334716ee5abe.md | 4 +- .../615389bd81347947ea7ba896.md | 4 +- .../6153908a366afb4d57185c8d.md | 4 +- .../615392916d83fa4f02f7e2cf.md | 4 +- .../6153938dce8b294ff8f5a4e9.md | 4 +- .../6153947986535e5117e60615.md | 4 +- .../61539e07e7430b528fbffe21.md | 4 +- .../61539f32a206bd53ec116465.md | 4 +- .../6153a04847abee57a3a406ac.md | 4 +- .../6153a3485f0b20591d26d2a1.md | 4 +- .../6153a3952facd25a83fe8083.md | 4 +- .../6153a3ebb4f7f05b8401b716.md | 4 +- .../615f171d05def3218035dc85.md | 4 +- .../6493bc0d99879635209565aa.md | 75 +++++++++++ .../6494da0daf5df5197963671d.md | 83 ++++++++++++ .../64dd076a1b33c86d84b4232f.md | 126 ++++++++++++++++++ .../64dd136e4e8b0894f9c70d86.md | 79 +++++++++++ 69 files changed, 1259 insertions(+), 212 deletions(-) create mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md create mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md create mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md rename curriculum/challenges/{english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md => chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md} (58%) create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md create mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md create mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md create mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md create mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md 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 index b3fc7b166b9..8042842b2ad 100644 --- 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" } ] } \ No newline at end of file diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md index 4eb24de11eb..f8c6e293e9c 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-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/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md index 5112e9ea0f1..cb9a3aa64ae 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-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/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md index 6f43ee49a81..3559c9d1880 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-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/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md index 19919cd7e6d..5b98d732d56 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-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/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md index d9c9a181fc7..53362562ff0 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-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/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md index 36c52c88a46..9b130892373 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-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/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md index afac51457d5..c6623ee49ef 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-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/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md index 3d589ba50fe..290b70d01d0 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-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/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md index 99601044777..7aed21c2320 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-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/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md index 8e052412447..7b3f591ef32 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-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/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md index 4d3fb26cad7..70b0f880946 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-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/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md index 0928ff4051c..4c8f149554a 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-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/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md index a568e8921eb..9e6ccfd89dc 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-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/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md index ebe99e53ede..5ec30f0d171 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-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/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md index 78b1b333ea8..43f2507a2f7 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-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/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md index 7b5ff80baf5..45588ae149c 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-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/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md index 79de6674604..7bebf140257 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-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/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md index d14f500f1cf..d8e573eae2a 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-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/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md index a749cca73f3..49ef1a1fa0e 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-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/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md index d0c9465a9a8..b2088b361f5 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-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/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md index 837d9362ee6..2786c9d145a 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-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/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md new file mode 100644 index 00000000000..07af535331f --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-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 + + + + + + Photo Gallery + + + +
+

css flexbox photo gallery

+
+
+ + + + + + + + + +
+ + + + +``` + +```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; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md new file mode 100644 index 00000000000..781bfe093d1 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md @@ -0,0 +1,83 @@ +--- +id: 6494da0daf5df5197963671d +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Notice how the blue image border extends beyond the red gallery border. This is due to the way browsers calculate the size of container elements. + +The `box-sizing` property is used to set this behavior. By default, the `content-box` model is used. With this model, when an element has a specific width, that width is calculated based only on the element's content. Padding and border values get added to the total width, so the element grows to accommodate these values. + +Try setting `box-sizing` to `content-box` explicitly, with the global `*` selector. At this point, you will not see any changes, because you are using the default value. + +# --hints-- + +You should have a `*` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +``` + +Your `*` selector should have a `box-sizing` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing); +``` + +Your `*` selector should have its `box-sizing` property set to `content-box`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'content-box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

css flexbox photo gallery

+
+
+ + + + + + + + + +
+ + + ``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +.gallery { + border: 5px solid red; + width: 50%; +} + +img { + width: 100%; + border: 5px solid blue; + padding: 5px; +} +``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md new file mode 100644 index 00000000000..b62a6d87885 --- /dev/null +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md @@ -0,0 +1,126 @@ +--- +id: 64dd076a1b33c86d84b4232f +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +In order to better visualize how your elements are sized, adding a border can be helpful. + +Give your `.gallery` element a `width` of `50%` and a `border` set to `5px solid red`. + +Then give your `img` elements a `width` of `100%`, `padding` set to `5px`, and a `border` set to `5px solid blue`. + +# --hints-- + +You should have a `.gallery` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')); +``` + +Your `.gallery` selector should have a `width` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.width); +``` + +Your `.gallery` selector should have a `width` property set to `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.width, '50%'); +``` + +Your `.gallery` selector should have a `border` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.border); +``` + +Your `.gallery` selector should have a `border` property set to `5px solid red`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.border, '5px solid red'); +``` + +You should have an `img` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('img')); +``` + +Your `img` selector should have a `width` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.width); +``` + +Your `img` selector should have a `width` property set to `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.width, '100%'); +``` + +Your `img` selector should have a `padding` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.padding); +``` + +Your `img` selector should have a `padding` property set to `5px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.padding, '5px'); +``` + +Your `img` selector should have a `border` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.border); +``` + +Your `img` selector should have a `border` property set to `5px solid blue`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.border, '5px solid blue'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

css flexbox photo gallery

+
+
+ + + + + + + + + +
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md similarity index 58% rename from curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md rename to curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md index 7db27249482..7b1c43d14af 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md @@ -1,30 +1,28 @@ --- -id: 615389bd81347947ea7ba896 -title: Step 11 +id: 64dd136e4e8b0894f9c70d86 +title: Step 10 challengeType: 0 -dashedName: step-11 +dashedName: step-10 --- # --description-- -Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container. +Now that you have figured out your `box-sizing` approach, you can clean up the CSS you added to see the changes. -To use it, give an element a `display` property of `flex`. This will make the element a flex container. Any direct children of a flex container are called flex items. - -Create a `.gallery` selector and make it a flex container. +Remove your `.gallery` and `img` selectors, and all rules within. # --hints-- -You should have a `.gallery` selector. +You should not have a `.gallery` selector. ```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')); +assert.notExists(new __helpers.CSSHelp(document).getStyle('.gallery')); ``` -Your `.gallery` selector should have a `display` property set to `flex` as the value. +You should not have an `img` selector. ```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.display === 'flex'); +assert.notExists(new __helpers.CSSHelp(document).getStyle('img')); ``` # --seed-- @@ -57,35 +55,25 @@ assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.display === 'flex') + + ``` ```css -* { + * { box-sizing: border-box; } -body { - margin: 0; - font-family: sans-serif; - background: #f5f6f7; +--fcc-editable-region-- +.gallery { + border: 5px solid red; + width: 50%; } -.header { - text-align: center; - text-transform: uppercase; - padding: 32px; - background-color: #0a0a23; - color: #fff; - border-bottom: 4px solid #fdb347; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.gallery img { +img { width: 100%; - max-width: 350px; - height: 300px; + border: 5px solid blue; + padding: 5px; } +--fcc-editable-region-- ``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md index 8dc007fa7f3..6d612a773be 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md @@ -1,30 +1,47 @@ --- id: 615380dff67172357fcf0425 -title: Step 7 +title: Step 11 challengeType: 0 -dashedName: step-7 +dashedName: step-11 --- # --description-- -Normalize your box model by creating a `*` selector and setting the `box-sizing` property to `border-box` as the value. +Now your images are too big. + +Create a `.gallery img` selector to target them. Give them all a `width` of `100%` and a `max-width` of `350px`. + +Also set the `height` property to `300px` to keep your images a uniform size. # --hints-- -You should have a `*` selector. +You should have a `.gallery img` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img')); ``` -Your `*` selector should have a `box-sizing` property set to `border-box` as the value. +Your `.gallery img` selector should have a `width` property set to `100%` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box'); +assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%'); +``` + +Your `.gallery img` selector should have a `max-width` property set to `350px` as the value. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth, '350px'); +``` + +Your `.gallery img` selector should have a `height` property set to `300px` as the value. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height, '300px'); ``` # --seed-- + ## --seed-contents-- ```html @@ -56,6 +73,10 @@ assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box' ``` ```css +* { + box-sizing: border-box; +} + --fcc-editable-region-- --fcc-editable-region-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md index 82026c6a38e..9c56de3a432 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md @@ -1,43 +1,63 @@ --- id: 6153893900438b4643590367 -title: Step 9 +title: Step 13 challengeType: 0 -dashedName: step-9 +dashedName: step-13 --- # --description-- -Remove the margin from your `body` element, set the `font-family` to `sans-serif`, and give it a `background-color` of `#f5f6f7` as the value. +Align your `.header` text in the center. Make the text uppercase using the `text-transform` property with `uppercase` as the value. + +Give it a padding of `32px` on all sides. Set the background to `#0a0a23` and the text to `#fff` as the color values. + +Add a `border-bottom` with `4px solid #fdb347` as the value. # --hints-- -You should have a `body` selector. +You should have a `.header` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('body')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); ``` -Your `body` selector should have a `margin` property set to `0` as the value. +Your `.header` selector should have a `text-align` property set to `center` as the value. ```js -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px'); -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginBottom, '0px'); -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px'); -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign, 'center'); ``` -Your `body` selector should have a `font-family` property set to `sans-serif` as the value. +Your `.header` selector should have a `text-transform` property set to `uppercase` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform, 'uppercase'); ``` -Your `body` selector should have a `background-color` property set to `#f5f6f7` as the value. +Your `.header` selector should have a `padding` property set to `32px` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.padding, '32px'); ``` +Your `.header` selector should have a `background-color` property set to `#0a0a23` as the value. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor, 'rgb(10, 10, 35)'); +``` + +Your `.header` selector should have a `color` property set to `#fff` as the value. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.color, 'rgb(255, 255, 255)'); +``` + +Your `.header` selector should have a `border-bottom` property set to `4px solid #fdb347` as the value. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.borderBottom, '4px solid rgb(253, 179, 71)'); +``` + + # --seed-- ## --seed-contents-- @@ -74,6 +94,11 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rg * { box-sizing: border-box; } +body { + margin: 0; + font-family: sans-serif; + background-color: #f5f6f7; +} --fcc-editable-region-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md index e4cb8a61120..ce85850adb5 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md @@ -1,62 +1,32 @@ --- id: 6153897c27f6334716ee5abe -title: Step 10 +title: Step 14 challengeType: 0 -dashedName: step-10 +dashedName: step-14 --- # --description-- -Align your `.header` text in the center. Make the text uppercase using the `text-transform` property with `uppercase` as the value. +Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container. -Give it a padding of `32px` on all sides. Set the background to `#0a0a23` and the text to `#fff` as the color values. +To use it, give an element a `display` property of `flex`. This will make the element a flex container. Any direct children of a flex container are called flex items. + +Create a `.gallery` selector and make it a flex container. -Add a `border-bottom` with `4px solid #fdb347` as the value. # --hints-- -You should have a `.header` selector. +You should have a `.gallery` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')); ``` -Your `.header` selector should have a `text-align` property set to `center` as the value. +Your `.gallery` selector should have a `display` property set to `flex` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center'); -``` - -Your `.header` selector should have a `text-transform` property set to `uppercase` as the value. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform === 'uppercase'); -``` - -Your `.header` selector should have a `padding` property set to `32px` as the value. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px'); -``` - -Your `.header` selector should have a `background-color` property set to `#0a0a23` as the value. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(10, 10, 35)'); -``` - -Your `.header` selector should have a `color` property set to `#fff` as the value. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.color === 'rgb(255, 255, 255)'); -``` - -Your `.header` selector should have a `border-bottom` property set to `4px solid #fdb347` as the value. - -```js -console.log(new __helpers.CSSHelp(document).getStyle('.header')) -assert(new __helpers.CSSHelp(document).getStyle('.header')?.borderBottom === '4px solid rgb(253, 179, 71)'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.display, 'flex'); ``` # --seed-- @@ -102,6 +72,15 @@ body { background: #f5f6f7; } +.header { + text-align: center; + text-transform: uppercase; + padding: 32px; + background-color: #0a0a23; + color: #fff; + border-bottom: 4px solid #fdb347; +} + --fcc-editable-region-- --fcc-editable-region-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md index b7c95ab2a98..6a05e450136 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md @@ -1,8 +1,8 @@ --- id: 6153908a366afb4d57185c8d -title: Step 12 +title: Step 15 challengeType: 0 -dashedName: step-12 +dashedName: step-15 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md index 277105f76b3..d4e4d07a8b2 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md @@ -1,8 +1,8 @@ --- id: 615392916d83fa4f02f7e2cf -title: Step 13 +title: Step 16 challengeType: 0 -dashedName: step-13 +dashedName: step-16 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md index dd3c1101a09..c1857ab1868 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md @@ -1,8 +1,8 @@ --- id: 6153938dce8b294ff8f5a4e9 -title: Step 14 +title: Step 17 challengeType: 0 -dashedName: step-14 +dashedName: step-17 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md index 488165a36f3..73b5431bccc 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md @@ -1,8 +1,8 @@ --- id: 6153947986535e5117e60615 -title: Step 15 +title: Step 18 challengeType: 0 -dashedName: step-15 +dashedName: step-18 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md index 5f23aedb9e9..e85322ac4aa 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md @@ -1,8 +1,8 @@ --- id: 61539e07e7430b528fbffe21 -title: Step 16 +title: Step 19 challengeType: 0 -dashedName: step-16 +dashedName: step-19 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md index 0ae907c8829..bc2bfc9b3dd 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md @@ -1,8 +1,8 @@ --- id: 61539f32a206bd53ec116465 -title: Step 17 +title: Step 20 challengeType: 0 -dashedName: step-17 +dashedName: step-20 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md index abb839852ab..e77113a29c5 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md @@ -1,8 +1,8 @@ --- id: 6153a04847abee57a3a406ac -title: Step 18 +title: Step 21 challengeType: 0 -dashedName: step-18 +dashedName: step-21 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md index f1ec2efa5c7..a636387c923 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md @@ -1,8 +1,8 @@ --- id: 6153a3485f0b20591d26d2a1 -title: Step 19 +title: Step 22 challengeType: 0 -dashedName: step-19 +dashedName: step-22 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md index 5dc832ce2bd..95a478ec337 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md @@ -1,8 +1,8 @@ --- id: 6153a3952facd25a83fe8083 -title: Step 20 +title: Step 23 challengeType: 0 -dashedName: step-20 +dashedName: step-23 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md index 54faa13bd9b..1b583175f48 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md @@ -1,8 +1,8 @@ --- id: 6153a3ebb4f7f05b8401b716 -title: Step 21 +title: Step 24 challengeType: 0 -dashedName: step-21 +dashedName: step-24 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md index c92fa4f61ed..a2756de469f 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md @@ -1,40 +1,45 @@ --- id: 615f171d05def3218035dc85 -title: Step 8 +title: Step 12 challengeType: 0 -dashedName: step-8 +dashedName: step-12 --- # --description-- -Your images are too big. Create a `.gallery img` selector to target them. Give them all a `width` of `100%` and a `max-width` of `350px` so they shrink as needed but don't get too big. +Remove the margin from your body element, set the `font-family` to `sans-serif`, and give it a `background-color` of `#f5f6f7` as the value. -Also set the `height` property to `300px` to keep your images a uniform size. # --hints-- -You should have a `.gallery img` selector. +You should have a `body` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img')); +assert.exists(new __helpers.CSSHelp(document).getStyle('body')); ``` -Your `.gallery img` selector should have a `width` property set to `100%` as the value. +Your `body` selector should have a `margin` property set to 0 as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px'); + +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginBottom, '0px'); + +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px'); + +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px'); ``` -Your `.gallery img` selector should have a `max-width` property set to `350px` as the value. +Your `body` selector should have a `font-family` property set to `sans-serif` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth === '350px'); +assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif'); ``` -Your `.gallery img` selector should have a `height` property set to `300px` as the value. +Your `body` selector should have a `background-color` property set to `#f5f6f7` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height === '300px'); +assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)'); ``` # --seed-- @@ -77,4 +82,11 @@ assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height === '300 --fcc-editable-region-- --fcc-editable-region-- + +.gallery img { + width: 100%; + max-width: 350px; + height: 300px; +} + ``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md new file mode 100644 index 00000000000..07af535331f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-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 + + + + + + Photo Gallery + + + +
+

css flexbox photo gallery

+
+
+ + + + + + + + + +
+ + + + +``` + +```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; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md new file mode 100644 index 00000000000..781bfe093d1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md @@ -0,0 +1,83 @@ +--- +id: 6494da0daf5df5197963671d +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Notice how the blue image border extends beyond the red gallery border. This is due to the way browsers calculate the size of container elements. + +The `box-sizing` property is used to set this behavior. By default, the `content-box` model is used. With this model, when an element has a specific width, that width is calculated based only on the element's content. Padding and border values get added to the total width, so the element grows to accommodate these values. + +Try setting `box-sizing` to `content-box` explicitly, with the global `*` selector. At this point, you will not see any changes, because you are using the default value. + +# --hints-- + +You should have a `*` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +``` + +Your `*` selector should have a `box-sizing` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing); +``` + +Your `*` selector should have its `box-sizing` property set to `content-box`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'content-box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

css flexbox photo gallery

+
+
+ + + + + + + + + +
+ + + ``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +.gallery { + border: 5px solid red; + width: 50%; +} + +img { + width: 100%; + border: 5px solid blue; + padding: 5px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md new file mode 100644 index 00000000000..b62a6d87885 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md @@ -0,0 +1,126 @@ +--- +id: 64dd076a1b33c86d84b4232f +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +In order to better visualize how your elements are sized, adding a border can be helpful. + +Give your `.gallery` element a `width` of `50%` and a `border` set to `5px solid red`. + +Then give your `img` elements a `width` of `100%`, `padding` set to `5px`, and a `border` set to `5px solid blue`. + +# --hints-- + +You should have a `.gallery` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')); +``` + +Your `.gallery` selector should have a `width` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.width); +``` + +Your `.gallery` selector should have a `width` property set to `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.width, '50%'); +``` + +Your `.gallery` selector should have a `border` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.border); +``` + +Your `.gallery` selector should have a `border` property set to `5px solid red`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.border, '5px solid red'); +``` + +You should have an `img` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('img')); +``` + +Your `img` selector should have a `width` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.width); +``` + +Your `img` selector should have a `width` property set to `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.width, '100%'); +``` + +Your `img` selector should have a `padding` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.padding); +``` + +Your `img` selector should have a `padding` property set to `5px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.padding, '5px'); +``` + +Your `img` selector should have a `border` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.border); +``` + +Your `img` selector should have a `border` property set to `5px solid blue`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.border, '5px solid blue'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

css flexbox photo gallery

+
+
+ + + + + + + + + +
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md new file mode 100644 index 00000000000..7b1c43d14af --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md @@ -0,0 +1,79 @@ +--- +id: 64dd136e4e8b0894f9c70d86 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Now that you have figured out your `box-sizing` approach, you can clean up the CSS you added to see the changes. + +Remove your `.gallery` and `img` selectors, and all rules within. + +# --hints-- + +You should not have a `.gallery` selector. + +```js +assert.notExists(new __helpers.CSSHelp(document).getStyle('.gallery')); +``` + +You should not have an `img` selector. + +```js +assert.notExists(new __helpers.CSSHelp(document).getStyle('img')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

css flexbox photo gallery

+
+
+ + + + + + + + + +
+ + + + +``` + +```css + * { + box-sizing: border-box; +} + +--fcc-editable-region-- +.gallery { + border: 5px solid red; + width: 50%; +} + +img { + width: 100%; + border: 5px solid blue; + padding: 5px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md index 82de9be67ca..4b3ad3a20b3 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md @@ -1,6 +1,6 @@ --- id: 61537485c4f2a624f18d7794 -title: Paso 1 +title: Step 1 challengeType: 0 dashedName: step-1 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md index ad82f29375f..20425f1be0c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md @@ -1,6 +1,6 @@ --- id: 61537a8054753e2f1f2a1574 -title: Paso 2 +title: Step 2 challengeType: 0 dashedName: step-2 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md index 984e60fa8d6..474bd20fff6 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md @@ -1,6 +1,6 @@ --- id: 61537bb9b1a29430ac15ad38 -title: Paso 3 +title: Step 3 challengeType: 0 dashedName: step-3 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md index c39b9f9e6c6..06a0859d929 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md @@ -1,6 +1,6 @@ --- id: 61537c5f81f0cf325b4a854c -title: Paso 4 +title: Step 4 challengeType: 0 dashedName: step-4 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md index 79cef8ffda6..777ec3f16a1 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md @@ -1,6 +1,6 @@ --- id: 61537c9eecea6a335db6da79 -title: Paso 5 +title: Step 5 challengeType: 0 dashedName: step-5 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md index c8e25c35575..e98dc176bf8 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md @@ -1,6 +1,6 @@ --- id: 61537d86bdc3dd343688fceb -title: Paso 6 +title: Step 6 challengeType: 0 dashedName: step-6 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md index ae7e4762acc..757da40706f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md @@ -1,8 +1,8 @@ --- id: 615380dff67172357fcf0425 -title: Paso 7 +title: Step 11 challengeType: 0 -dashedName: step-7 +dashedName: step-11 --- # --description-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md index 7dd358cb3f5..6d1505c80f0 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md @@ -1,8 +1,8 @@ --- id: 6153893900438b4643590367 -title: Paso 9 +title: Step 13 challengeType: 0 -dashedName: step-9 +dashedName: step-13 --- # --description-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md index 4d5bdd4651c..2b373056d08 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md @@ -1,8 +1,8 @@ --- id: 6153897c27f6334716ee5abe -title: Paso 10 +title: Step 14 challengeType: 0 -dashedName: step-10 +dashedName: step-14 --- # --description-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md index 295768eb391..99067cc3a11 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md @@ -1,8 +1,8 @@ --- id: 615389bd81347947ea7ba896 -title: Paso 11 +title: Step 15 challengeType: 0 -dashedName: step-11 +dashedName: step-15 --- # --description-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md index 2ec88478a8e..37cdd595b5d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md @@ -1,8 +1,8 @@ --- id: 6153908a366afb4d57185c8d -title: Paso 12 +title: Step 16 challengeType: 0 -dashedName: step-12 +dashedName: step-16 --- # --description-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md index 969529f52df..e5d1d44aa88 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md @@ -1,8 +1,8 @@ --- id: 615392916d83fa4f02f7e2cf -title: Paso 13 +title: Step 17 challengeType: 0 -dashedName: step-13 +dashedName: step-17 --- # --description-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md index ef1d75bdb6d..6ea7256cd12 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md @@ -1,8 +1,8 @@ --- id: 6153938dce8b294ff8f5a4e9 -title: Paso 14 +title: Step 18 challengeType: 0 -dashedName: step-14 +dashedName: step-18 --- # --description-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md index 9c28be6fdc2..f0c499f142d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md @@ -1,8 +1,8 @@ --- id: 6153947986535e5117e60615 -title: Paso 15 +title: Step 19 challengeType: 0 -dashedName: step-15 +dashedName: step-19 --- # --description-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md index 3b3daf86a5c..1447a61a32d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md @@ -1,8 +1,8 @@ --- id: 61539e07e7430b528fbffe21 -title: Paso 16 +title: Step 20 challengeType: 0 -dashedName: step-16 +dashedName: step-20 --- # --description-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md index c3ececf4aa1..41657d9502c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md @@ -1,8 +1,8 @@ --- id: 61539f32a206bd53ec116465 -title: Paso 17 +title: Step 21 challengeType: 0 -dashedName: step-17 +dashedName: step-21 --- # --description-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md index 569de2a21f6..e58b8130edc 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md @@ -1,8 +1,8 @@ --- id: 6153a04847abee57a3a406ac -title: Paso 18 +title: Step 22 challengeType: 0 -dashedName: step-18 +dashedName: step-22 --- # --description-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md index c2c624f6426..f671b063713 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md @@ -1,8 +1,8 @@ --- id: 6153a3485f0b20591d26d2a1 -title: Paso 19 +title: Step 23 challengeType: 0 -dashedName: step-19 +dashedName: step-23 --- # --description-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md index aada9fe73f8..8316f996faa 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md @@ -1,8 +1,8 @@ --- id: 6153a3952facd25a83fe8083 -title: Paso 20 +title: Step 24 challengeType: 0 -dashedName: step-20 +dashedName: step-24 --- # --description-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md index 4804a150c4f..1ac1d665941 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md @@ -1,8 +1,8 @@ --- id: 6153a3ebb4f7f05b8401b716 -title: Paso 21 +title: Step 25 challengeType: 0 -dashedName: step-21 +dashedName: step-25 --- # --description-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md index e453fc68a15..4a7f435a064 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md @@ -1,8 +1,8 @@ --- id: 615f171d05def3218035dc85 -title: Paso 8 +title: Step 12 challengeType: 0 -dashedName: step-8 +dashedName: step-12 --- # --description-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md new file mode 100644 index 00000000000..07af535331f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-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 + + + + + + Photo Gallery + + + +
+

css flexbox photo gallery

+
+
+ + + + + + + + + +
+ + + + +``` + +```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; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md new file mode 100644 index 00000000000..781bfe093d1 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md @@ -0,0 +1,83 @@ +--- +id: 6494da0daf5df5197963671d +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Notice how the blue image border extends beyond the red gallery border. This is due to the way browsers calculate the size of container elements. + +The `box-sizing` property is used to set this behavior. By default, the `content-box` model is used. With this model, when an element has a specific width, that width is calculated based only on the element's content. Padding and border values get added to the total width, so the element grows to accommodate these values. + +Try setting `box-sizing` to `content-box` explicitly, with the global `*` selector. At this point, you will not see any changes, because you are using the default value. + +# --hints-- + +You should have a `*` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +``` + +Your `*` selector should have a `box-sizing` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing); +``` + +Your `*` selector should have its `box-sizing` property set to `content-box`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'content-box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

css flexbox photo gallery

+
+
+ + + + + + + + + +
+ + + ``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +.gallery { + border: 5px solid red; + width: 50%; +} + +img { + width: 100%; + border: 5px solid blue; + padding: 5px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md new file mode 100644 index 00000000000..b62a6d87885 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md @@ -0,0 +1,126 @@ +--- +id: 64dd076a1b33c86d84b4232f +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +In order to better visualize how your elements are sized, adding a border can be helpful. + +Give your `.gallery` element a `width` of `50%` and a `border` set to `5px solid red`. + +Then give your `img` elements a `width` of `100%`, `padding` set to `5px`, and a `border` set to `5px solid blue`. + +# --hints-- + +You should have a `.gallery` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')); +``` + +Your `.gallery` selector should have a `width` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.width); +``` + +Your `.gallery` selector should have a `width` property set to `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.width, '50%'); +``` + +Your `.gallery` selector should have a `border` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.border); +``` + +Your `.gallery` selector should have a `border` property set to `5px solid red`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.border, '5px solid red'); +``` + +You should have an `img` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('img')); +``` + +Your `img` selector should have a `width` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.width); +``` + +Your `img` selector should have a `width` property set to `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.width, '100%'); +``` + +Your `img` selector should have a `padding` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.padding); +``` + +Your `img` selector should have a `padding` property set to `5px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.padding, '5px'); +``` + +Your `img` selector should have a `border` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.border); +``` + +Your `img` selector should have a `border` property set to `5px solid blue`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.border, '5px solid blue'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

css flexbox photo gallery

+
+
+ + + + + + + + + +
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md new file mode 100644 index 00000000000..7b1c43d14af --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md @@ -0,0 +1,79 @@ +--- +id: 64dd136e4e8b0894f9c70d86 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Now that you have figured out your `box-sizing` approach, you can clean up the CSS you added to see the changes. + +Remove your `.gallery` and `img` selectors, and all rules within. + +# --hints-- + +You should not have a `.gallery` selector. + +```js +assert.notExists(new __helpers.CSSHelp(document).getStyle('.gallery')); +``` + +You should not have an `img` selector. + +```js +assert.notExists(new __helpers.CSSHelp(document).getStyle('img')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

css flexbox photo gallery

+
+
+ + + + + + + + + +
+ + + + +``` + +```css + * { + box-sizing: border-box; +} + +--fcc-editable-region-- +.gallery { + border: 5px solid red; + width: 50%; +} + +img { + width: 100%; + border: 5px solid blue; + padding: 5px; +} +--fcc-editable-region-- +```