From 3fe2d1aec00532c20e831361569e0c262e846c37 Mon Sep 17 00:00:00 2001 From: camperbot Date: Tue, 5 Sep 2023 10:59:50 -0700 Subject: [PATCH] chore(i18n,learn): processed translations (#51487) --- .../seek-and-destroy.md | 4 +- .../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 +++++++++++ .../seek-and-destroy.md | 4 +- .../615380dff67172357fcf0425.md | 35 ++++- .../6153893900438b4643590367.md | 53 ++++++-- .../6153897c27f6334716ee5abe.md | 59 +++----- .../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 | 36 +++-- .../6493bc0d99879635209565aa.md | 75 +++++++++++ .../6494da0daf5df5197963671d.md | 83 ++++++++++++ .../64dd076a1b33c86d84b4232f.md | 126 ++++++++++++++++++ .../64dd136e4e8b0894f9c70d86.md | 79 +++++++++++ .../seek-and-destroy.md | 4 +- .../61537485c4f2a624f18d7794.md | 2 +- .../61537a8054753e2f1f2a1574.md | 2 +- .../61537bb9b1a29430ac15ad38.md | 2 +- .../61537c5f81f0cf325b4a854c.md | 2 +- .../61537c9eecea6a335db6da79.md | 2 +- .../61537d86bdc3dd343688fceb.md | 2 +- .../615380dff67172357fcf0425.md | 31 ++++- .../6153893900438b4643590367.md | 49 +++++-- .../6153897c27f6334716ee5abe.md | 55 +++----- .../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 | 32 +++-- .../seek-and-destroy.md | 4 +- .../61537485c4f2a624f18d7794.md | 2 +- .../61537a8054753e2f1f2a1574.md | 2 +- .../61537bb9b1a29430ac15ad38.md | 2 +- .../61537c5f81f0cf325b4a854c.md | 2 +- .../61537c9eecea6a335db6da79.md | 2 +- .../61537d86bdc3dd343688fceb.md | 2 +- .../615380dff67172357fcf0425.md | 31 ++++- .../6153893900438b4643590367.md | 49 +++++-- .../6153897c27f6334716ee5abe.md | 55 +++----- .../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 | 32 +++-- .../seek-and-destroy.md | 4 +- .../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 +++++++++++ .../seek-and-destroy.md | 4 +- .../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 +++++++++++ .../seek-and-destroy.md | 4 +- .../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 +++++++++++ .../seek-and-destroy.md | 4 +- .../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 +++++++++++ .../646c48df8674cf2b91020ecc.md | 6 +- .../646c586be7180e40ddf74ff6.md | 4 +- .../646c59e942f35541923104bf.md | 6 +- .../646c5ace05e4be4211407935.md | 12 +- .../646c5e727e56e743c9aed4a1.md | 14 +- .../646c5ffef5598d449b52ec12.md | 10 +- .../646ce8bb4b35544d501c7184.md | 10 +- .../646ce9d790d2a44de5f99e04.md | 8 +- .../646ceae4d57c214e6b03576c.md | 8 +- .../646cecc9eb5c4f4f73dafd07.md | 8 +- .../646cef0c2b98915094df7099.md | 6 +- .../646cf1206cac5f51804f49cf.md | 8 +- .../646cf88aa884405a11ea5bcc.md | 6 +- .../646cfc2b8e6fe95c20a819d5.md | 8 +- .../646cfd853634255d02b64cc1.md | 6 +- .../646dd556d524bc61c0139bd6.md | 12 +- .../646dd6f9caa862627dd87772.md | 8 +- .../646dd8c79ec23463a3d0e356.md | 10 +- .../646ddab8afd73764f5241bbf.md | 4 +- .../646ddd3f9f97a0667b964bdb.md | 8 +- .../646ddf888632fa67f1180940.md | 8 +- .../646de5dc8988076a1d992afd.md | 6 +- .../646de6a97b50a86ac487de86.md | 12 +- .../646de8d204a3426c7d184372.md | 12 +- .../646dea1c98c2426d43a705c3.md | 12 +- .../646deb169847f86df0f95bfc.md | 10 +- .../646dec359bef3b7811fba5a6.md | 12 +- .../646dedbcba062079128b2ecc.md | 4 +- .../646def5e863abf7a14501421.md | 10 +- .../646df03c8f79337ab46f148b.md | 8 +- .../646df0cf26413a7b35e4b8b3.md | 12 +- .../646df1d1aa4ae57bdf1869c4.md | 8 +- .../646f08293804a30685533c6f.md | 4 +- .../646f09293eb3230723a62f77.md | 10 +- .../646f0ef13604420a8744f7d4.md | 10 +- .../646f107abb89d00bb99f387a.md | 10 +- .../646f12da0b4c5d0ca162834a.md | 10 +- .../646f135eab69d90d0c6d4e9b.md | 4 +- .../646f159b2cffb21150b927cb.md | 10 +- .../646f1802a09a171332e14630.md | 4 +- .../646f4e46e81f7021d5fd9c1d.md | 4 +- .../646f516dbfc1342495515625.md | 6 +- .../6476f5c17f99146071ee884c.md | 12 +- .../6476f7a4827bcc61682f2347.md | 10 +- .../6476fc5cf14b276e6d04e82a.md | 16 +-- .../6476fd4213318f6ee211028a.md | 10 +- .../64770351e8586671ec0911f0.md | 12 +- .../6477062778c85972eb648030.md | 16 +-- .../647d855ac12cd436059acd39.md | 6 +- .../seek-and-destroy.md | 4 +- .../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 +++++++++++ .../seek-and-destroy.md | 4 +- .../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 +++++++++++ 244 files changed, 4437 insertions(+), 1163 deletions(-) create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md create mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md create mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md create mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md create mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md create mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md create mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md create mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md create mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md create mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md create mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md create mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md create mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md create mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md create mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md create mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md create mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md create mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md create mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md create mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md create mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md index 1f21f014636..56358bbe943 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md @@ -8,9 +8,9 @@ dashedName: seek-and-destroy # --description-- -سيتم تزويدك بمصفوفة أولية (أول وسيطة في دالة `destroyer`)، تليها وسيطة واحدة أو أكثر. قم بإزالة جميع العناصر من المصفوفة الأولية التي لها نفس قيمة هذه الوسيطات. +You will be provided with an initial array as the first argument to the `destroyer` function, followed by one or more arguments. قم بإزالة جميع العناصر من المصفوفة الأولية التي لها نفس قيمة هذه الوسيطات. -**ملاحظة:** يجب عليك استخدام كائن `arguments`. +The function must accept an indeterminate number of arguments, also known as a variadic function. You can access the additional arguments by adding a rest parameter to the function definition or using the `arguments` object. # --hints-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md index 287d3a1f48b..6d612a773be 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md @@ -1,30 +1,47 @@ --- id: 615380dff67172357fcf0425 -title: الخطوة 7 +title: Step 11 challengeType: 0 -dashedName: step-7 +dashedName: step-11 --- # --description-- -سوي نموذجك للصندوق (box model) عن طريق إنشاء منتقي `*` وتعيين خاصية `box-sizing` ألى `border-box`. +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 `.gallery img` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img')); ``` -يجب أن يكون لمنتقيك `*` خاصية `box-sizing` بقيمة `border-box`. +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/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md index e82445f2d01..9c56de3a432 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md @@ -1,43 +1,63 @@ --- id: 6153893900438b4643590367 -title: الخطوة 9 +title: Step 13 challengeType: 0 -dashedName: step-9 +dashedName: step-13 --- # --description-- -أزل margin من عنصرك `body`، وعيّن `font-family` بقيمة `sans-serif`، وأعطيه `background-color` بقيمة `#f5f6f7`. +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-- -يجب أن يكون لديك منتقي `body`. +You should have a `.header` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('body')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); ``` -يجب أن يحتوي منتقي `body` على خاصية `margin` بقيمة `0`. +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'); ``` -يجب أن يكون لمنتقاك `body` خاصية `font-family` بقيمة `sans-serif`. +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'); ``` -يجب أن يحتوي منتقى `body` على خاصية `background-color` بقيمة `#f5f6f7`. +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/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md index 90abada0f4c..ce85850adb5 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md @@ -1,62 +1,32 @@ --- id: 6153897c27f6334716ee5abe -title: الخطوة 10 +title: Step 14 challengeType: 0 -dashedName: step-10 +dashedName: step-14 --- # --description-- -حاذي نصك `.header` في منتصف. أجعل النص كبير باستخدام خاصية `text-transform` مع خاصية بقيمة `uppercase`. +Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container. -أعطاها padding بقيمة `32px` على جميع الجوانب. عيّن قيم ألوان الخلفية إلى `#0a0a23` والنص إلى `#fff`. +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. -أضف `border-bottom` بقيمة `4px solid #fdb347`. # --hints-- -يجب أن يكون لديك منتقي `.header`. +You should have a `.gallery` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')); ``` -يجب أن يكون لمنتقي `.header` الخاص بك خاصية `text-align` بقيمة `center`. +Your `.gallery` selector should have a `display` property set to `flex` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center'); -``` - -يجب أن يكون لمنتقي `.header` الخاص بك خاصية `text-transform` بقيمة `uppercase`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform === 'uppercase'); -``` - -يجب أن يحتوي منتقي `.header` على خاصية `padding` بقيمة `32px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px'); -``` - -يجب أن يحتوي منتقى `.header` على خاصية `background-color` بقيمة `#0a0a23`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(10, 10, 35)'); -``` - -يجب أن يحتوي منتقي `.header` على خاصية `color` بقيمة `#fff`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.color === 'rgb(255, 255, 255)'); -``` - -يجب أن يكون لمنتقاك `.header` الخاصية `border-bottom` بقيمة `4px solid #fdb347`. - -```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/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md index 0a8865457e2..38136b4fcfb 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md +++ b/curriculum/challenges/arabic/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 15 challengeType: 0 -dashedName: step-12 +dashedName: step-15 --- # --description-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md index c283b4328d2..0cf66cac762 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md +++ b/curriculum/challenges/arabic/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 16 challengeType: 0 -dashedName: step-13 +dashedName: step-16 --- # --description-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md index 207c16e797c..142b19e0860 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md +++ b/curriculum/challenges/arabic/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 17 challengeType: 0 -dashedName: step-14 +dashedName: step-17 --- # --description-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md index 453813ba4a2..35dc6a31b29 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md +++ b/curriculum/challenges/arabic/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 18 challengeType: 0 -dashedName: step-15 +dashedName: step-18 --- # --description-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md index 1783fbd373e..48c03616279 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md +++ b/curriculum/challenges/arabic/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 19 challengeType: 0 -dashedName: step-16 +dashedName: step-19 --- # --description-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md index 105bfffd327..e959ccdd14d 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md +++ b/curriculum/challenges/arabic/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 20 challengeType: 0 -dashedName: step-17 +dashedName: step-20 --- # --description-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md index 4b659eefad0..8fac8913cc0 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md +++ b/curriculum/challenges/arabic/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 21 challengeType: 0 -dashedName: step-18 +dashedName: step-21 --- # --description-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md index 455d3dc0ceb..bb7b139cb0a 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md +++ b/curriculum/challenges/arabic/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 22 challengeType: 0 -dashedName: step-19 +dashedName: step-22 --- # --description-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md index f2285d50eb5..b8a05a7e936 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md +++ b/curriculum/challenges/arabic/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 23 challengeType: 0 -dashedName: step-20 +dashedName: step-23 --- # --description-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md index 142b54f5dac..ac7ac32e97c 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md +++ b/curriculum/challenges/arabic/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 24 challengeType: 0 -dashedName: step-21 +dashedName: step-24 --- # --description-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md index a8fd3814f59..a2756de469f 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md @@ -1,40 +1,45 @@ --- id: 615f171d05def3218035dc85 -title: الخطوة 8 +title: Step 12 challengeType: 0 -dashedName: step-8 +dashedName: step-12 --- # --description-- -صورك كبيرة جداً. أنشئ منتقي `.gallery img` لاستهدافهم. اعطيهم جميعا `width` بقيمة `100%` و `max-width` بقيمة `350px` حتى يتقلص حسب الحاجة، لكنهم لا يصبحون أكبر مما ينبغي. +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. -قم أيضا بتعيين خاصية `height` إلى `300px` للحفاظ على حجم موحد للصور. # --hints-- -يجب أن يكون لديك منتقي `.gallery img`. +You should have a `body` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img')); +assert.exists(new __helpers.CSSHelp(document).getStyle('body')); ``` -يجب أن يحتوي منتقي `.gallery img` على خاصية `width` بقيمة `100%`. +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'); ``` -يجب أن يحتوي منتقي `.gallery img` على خاصية `max-width` بقيمة `350px`. +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'); ``` -يجب أن يحتوي منتقي `.gallery img` على خاصية `height` بقيمة `300px`. +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/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md b/curriculum/challenges/arabic/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/arabic/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/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md b/curriculum/challenges/arabic/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/arabic/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/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md b/curriculum/challenges/arabic/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/arabic/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/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md b/curriculum/challenges/arabic/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/arabic/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/chinese-traditional/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md index 4e6063063ae..40f0d852713 100644 --- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md +++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md @@ -8,9 +8,9 @@ dashedName: seek-and-destroy # --description-- -你將獲得一個初始數組（`destroyer` 函數中的第一個參數），後跟一個或多個參數。 從初始數組中移除所有與後續參數相等的元素。 +You will be provided with an initial array as the first argument to the `destroyer` function, followed by one or more arguments. 從初始數組中移除所有與後續參數相等的元素。 -**注意：** 你可以使用 `arguments` 對象。 +The function must accept an indeterminate number of arguments, also known as a variadic function. You can access the additional arguments by adding a rest parameter to the function definition or using the `arguments` object. # --hints-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md index f2d7d221f7a..6d612a773be 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md @@ -1,30 +1,47 @@ --- id: 615380dff67172357fcf0425 -title: 步驟 7 +title: Step 11 challengeType: 0 -dashedName: step-7 +dashedName: step-11 --- # --description-- -通過創建 `*` 選擇器將 `box-sizing` 屬性設置爲 `border-box` 來規範盒模型。 +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 `.gallery img` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img')); ``` -你的 `*` 選擇器應將 `box-sizing` 屬性設置爲 `border-box`。 +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/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md index cac43cbb499..9c56de3a432 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md @@ -1,43 +1,63 @@ --- id: 6153893900438b4643590367 -title: 步驟 9 +title: Step 13 challengeType: 0 -dashedName: step-9 +dashedName: step-13 --- # --description-- -從 `body` 元素中刪除外邊距，將 `font-family` 設置爲 `sans-serif`，並將 `background-color` 設置爲 `#f5f6f7`。 +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-- -你應該有一個 `body` 選擇器。 +You should have a `.header` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('body')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); ``` -`body` 選擇器的 `margin` 屬性應該設置爲 `0`。 +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'); ``` -`body` 選擇器的 `font-family` 屬性應該設置爲 `sans-serif`。 +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'); ``` -`body` 選擇器的 `background-color` 屬性應該設置爲 `#f5f6f7`。 +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/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md index b4de4f89f9e..ce85850adb5 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md @@ -1,62 +1,32 @@ --- id: 6153897c27f6334716ee5abe -title: 步驟 10 +title: Step 14 challengeType: 0 -dashedName: step-10 +dashedName: step-14 --- # --description-- -將 `.header` 文本居中對齊。 使用 `text-transform` 屬性的 `uppercase` 值將其文本大寫顯示。 +Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container. -將其所有方向的內邊距都設置爲 `32px`。 並將背景設置爲 `#0a0a23`，文本顏色設置爲 `#fff` 。 +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. -並添加 `border-bottom`，使其值爲 `4px solid #fdb347`。 # --hints-- -應該使用 `.header` 選擇器。 +You should have a `.gallery` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')); ``` -`.header` 選擇器應該有一個值爲 `center` 的 `text-align` 屬性。 +Your `.gallery` selector should have a `display` property set to `flex` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center'); -``` - -`.header` 選擇器應該有一個值爲 `uppercase` 的 `text-transform` 屬性。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform === 'uppercase'); -``` - -`.header` 選擇器應該有一個值爲 `32px` 的 `padding` 屬性。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px'); -``` - -`.header` 選擇器應該有一個值爲 `#0a0a23` 的 `background-color` 屬性。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(10, 10, 35)'); -``` - -`.header` 選擇器應該有一個值爲 `#fff` 的 `color` 屬性。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.color === 'rgb(255, 255, 255)'); -``` - -`.header` 選擇器應該有一個值爲 `4px solid #fdb347` 的 `border-bottom` 屬性。 - -```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/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md index 7ce7554bcaf..8d6d04de4fe 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md +++ b/curriculum/challenges/chinese-traditional/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-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md index 154fa19ba04..d13c3623304 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md +++ b/curriculum/challenges/chinese-traditional/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 15 challengeType: 0 -dashedName: step-12 +dashedName: step-15 --- # --description-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md index b1824ba61ed..9d0ddc7aefb 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md +++ b/curriculum/challenges/chinese-traditional/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 16 challengeType: 0 -dashedName: step-13 +dashedName: step-16 --- # --description-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md index a0dc6f03c2a..269332219c3 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md +++ b/curriculum/challenges/chinese-traditional/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 17 challengeType: 0 -dashedName: step-14 +dashedName: step-17 --- # --description-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md index 4d7089e3931..507dc881502 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md +++ b/curriculum/challenges/chinese-traditional/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 18 challengeType: 0 -dashedName: step-15 +dashedName: step-18 --- # --description-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md index 3bc3c6cf002..53907ad9be6 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md +++ b/curriculum/challenges/chinese-traditional/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 19 challengeType: 0 -dashedName: step-16 +dashedName: step-19 --- # --description-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md index 866259c0090..de915b2dff5 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md +++ b/curriculum/challenges/chinese-traditional/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 20 challengeType: 0 -dashedName: step-17 +dashedName: step-20 --- # --description-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md index 6f4d4b21c32..067cc125bfc 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md +++ b/curriculum/challenges/chinese-traditional/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 21 challengeType: 0 -dashedName: step-18 +dashedName: step-21 --- # --description-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md index 27a1d354df2..cdd8400bba0 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md +++ b/curriculum/challenges/chinese-traditional/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 22 challengeType: 0 -dashedName: step-19 +dashedName: step-22 --- # --description-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md index 7593626cb39..586c400f59d 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md +++ b/curriculum/challenges/chinese-traditional/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 23 challengeType: 0 -dashedName: step-20 +dashedName: step-23 --- # --description-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md index 8c2898067fd..a099b847924 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md +++ b/curriculum/challenges/chinese-traditional/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 24 challengeType: 0 -dashedName: step-21 +dashedName: step-24 --- # --description-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md index 7c45aabb751..a2756de469f 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md @@ -1,40 +1,45 @@ --- id: 615f171d05def3218035dc85 -title: 步驟 8 +title: Step 12 challengeType: 0 -dashedName: step-8 +dashedName: step-12 --- # --description-- -你的圖像目前太大，你將無法看到你的 CSS 變化。 創建一個 `.gallery img` 選擇器來定位你的圖像。 將它們的 `width` 屬性設置爲 `100%`，`max-width` 設置爲 `350px`，以便它們適當調整，不至於太大。 +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. -並將 `height` 屬性設置爲 `300px`，以保持圖像大小一致。 # --hints-- -你應該有一個 `.gallery img` 選擇器。 +You should have a `body` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img')); +assert.exists(new __helpers.CSSHelp(document).getStyle('body')); ``` -你的 `.gallery img` 選擇器應該將 `width` 屬性設置爲 `100%`。 +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'); ``` -應將 `.gallery img` 選擇器的 `max-width` 屬性設置爲 `350px`。 +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'); ``` -你的 `.gallery img` 選擇器應該將 `height` 屬性設置爲 `300px`。 +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/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md b/curriculum/challenges/chinese-traditional/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-traditional/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-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md b/curriculum/challenges/chinese-traditional/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-traditional/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-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md b/curriculum/challenges/chinese-traditional/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-traditional/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/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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/chinese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md index 4bacad92460..b5f7f3078d9 100644 --- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md +++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md @@ -8,9 +8,9 @@ dashedName: seek-and-destroy # --description-- -你将获得一个初始数组（`destroyer` 函数中的第一个参数），后跟一个或多个参数。 从初始数组中移除所有与后续参数相等的元素。 +You will be provided with an initial array as the first argument to the `destroyer` function, followed by one or more arguments. 从初始数组中移除所有与后续参数相等的元素。 -**注意：** 你可以使用 `arguments` 对象。 +The function must accept an indeterminate number of arguments, also known as a variadic function. You can access the additional arguments by adding a rest parameter to the function definition or using the `arguments` object. # --hints-- 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 f8c6e293e9c..4eb24de11eb 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: Step 1 +title: 步骤 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 cb9a3aa64ae..5112e9ea0f1 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: Step 2 +title: 步骤 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 3559c9d1880..6f43ee49a81 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: Step 3 +title: 步骤 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 5b98d732d56..19919cd7e6d 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: Step 4 +title: 步骤 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 53362562ff0..d9c9a181fc7 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: Step 5 +title: 步骤 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 9b130892373..36c52c88a46 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: Step 6 +title: 步骤 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 c6623ee49ef..6d612a773be 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 @@ -7,24 +7,41 @@ dashedName: step-11 # --description-- -通过创建 `*` 选择器将 `box-sizing` 属性设置为 `border-box` 来规范盒模型。 +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 `.gallery img` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img')); ``` -你的 `*` 选择器应将 `box-sizing` 属性设置为 `border-box`。 +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/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 290b70d01d0..9c56de3a432 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 @@ -7,37 +7,57 @@ dashedName: step-13 # --description-- -从 `body` 元素中删除外边距，将 `font-family` 设置为 `sans-serif`，并将 `background-color` 设置为 `#f5f6f7`。 +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-- -你应该有一个 `body` 选择器。 +You should have a `.header` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('body')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); ``` -`body` 选择器的 `margin` 属性应该设置为 `0`。 +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'); ``` -`body` 选择器的 `font-family` 属性应该设置为 `sans-serif`。 +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'); ``` -`body` 选择器的 `background-color` 属性应该设置为 `#f5f6f7`。 +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/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 7aed21c2320..ce85850adb5 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 @@ -7,56 +7,26 @@ dashedName: step-14 # --description-- -将 `.header` 文本居中对齐。 使用 `text-transform` 属性的 `uppercase` 值将其文本大写显示。 +Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container. -将其所有方向的内边距都设置为 `32px`。 并将背景设置为 `#0a0a23`，文本颜色设置为 `#fff` 。 +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. -并添加 `border-bottom`，使其值为 `4px solid #fdb347`。 # --hints-- -应该使用 `.header` 选择器。 +You should have a `.gallery` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')); ``` -`.header` 选择器应该有一个值为 `center` 的 `text-align` 属性。 +Your `.gallery` selector should have a `display` property set to `flex` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center'); -``` - -`.header` 选择器应该有一个值为 `uppercase` 的 `text-transform` 属性。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform === 'uppercase'); -``` - -`.header` 选择器应该有一个值为 `32px` 的 `padding` 属性。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px'); -``` - -`.header` 选择器应该有一个值为 `#0a0a23` 的 `background-color` 属性。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(10, 10, 35)'); -``` - -`.header` 选择器应该有一个值为 `#fff` 的 `color` 属性。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.color === 'rgb(255, 255, 255)'); -``` - -`.header` 选择器应该有一个值为 `4px solid #fdb347` 的 `border-bottom` 属性。 - -```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/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 70b0f880946..1c6b5ea36af 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: Step 16 +title: Step 15 challengeType: 0 -dashedName: step-16 +dashedName: step-15 --- # --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 4c8f149554a..964a42ad0cc 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: Step 17 +title: Step 16 challengeType: 0 -dashedName: step-17 +dashedName: step-16 --- # --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 9e6ccfd89dc..8ada9ab6a49 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: Step 18 +title: Step 17 challengeType: 0 -dashedName: step-18 +dashedName: step-17 --- # --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 5ec30f0d171..8780949d8d5 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: Step 19 +title: Step 18 challengeType: 0 -dashedName: step-19 +dashedName: step-18 --- # --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 43f2507a2f7..7ee7c84fec6 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: Step 20 +title: Step 19 challengeType: 0 -dashedName: step-20 +dashedName: step-19 --- # --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 45588ae149c..27980c0f050 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: Step 21 +title: Step 20 challengeType: 0 -dashedName: step-21 +dashedName: step-20 --- # --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 7bebf140257..d241cb33918 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: Step 22 +title: Step 21 challengeType: 0 -dashedName: step-22 +dashedName: step-21 --- # --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 d8e573eae2a..3939f6f2fe4 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: Step 23 +title: Step 22 challengeType: 0 -dashedName: step-23 +dashedName: step-22 --- # --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 49ef1a1fa0e..ed91dacab74 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: Step 24 +title: Step 23 challengeType: 0 -dashedName: step-24 +dashedName: step-23 --- # --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 b2088b361f5..686a1e38eba 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: Step 25 +title: Step 24 challengeType: 0 -dashedName: step-25 +dashedName: step-24 --- # --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 2786c9d145a..a2756de469f 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 @@ -7,34 +7,39 @@ dashedName: step-12 # --description-- -你的图像目前太大，你将无法看到你的 CSS 变化。 创建一个 `.gallery img` 选择器来定位你的图像。 将它们的 `width` 属性设置为 `100%`，`max-width` 设置为 `350px`，以便它们适当调整，不至于太大。 +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. -并将 `height` 属性设置为 `300px`，以保持图像大小一致。 # --hints-- -你应该有一个 `.gallery img` 选择器。 +You should have a `body` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img')); +assert.exists(new __helpers.CSSHelp(document).getStyle('body')); ``` -你的 `.gallery img` 选择器应该将 `width` 属性设置为 `100%`。 +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'); ``` -应将 `.gallery img` 选择器的 `max-width` 属性设置为 `350px`。 +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'); ``` -你的 `.gallery img` 选择器应该将 `height` 属性设置为 `300px`。 +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/espanol/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md index 2253cb5b57c..2ca4063d07a 100644 --- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md +++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md @@ -8,9 +8,9 @@ dashedName: seek-and-destroy # --description-- -Se proporcionará un arreglo inicial (el primer argumento en la función `destroyer`), seguido de uno o más argumentos. Elimina todos los elementos del arreglo inicial que tengan el mismo valor que estos argumentos. +You will be provided with an initial array as the first argument to the `destroyer` function, followed by one or more arguments. Elimina todos los elementos del arreglo inicial que tengan el mismo valor que estos argumentos. -**Nota:** Tienes que utilizar el objeto `arguments`. +The function must accept an indeterminate number of arguments, also known as a variadic function. You can access the additional arguments by adding a rest parameter to the function definition or using the `arguments` object. # --hints-- 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 4b3ad3a20b3..82de9be67ca 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: Step 1 +title: Paso 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 20425f1be0c..ad82f29375f 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: Step 2 +title: Paso 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 474bd20fff6..984e60fa8d6 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: Step 3 +title: Paso 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 06a0859d929..c39b9f9e6c6 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: Step 4 +title: Paso 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 777ec3f16a1..79cef8ffda6 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: Step 5 +title: Paso 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 e98dc176bf8..c8e25c35575 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: Step 6 +title: Paso 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 757da40706f..6d612a773be 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 @@ -7,24 +7,41 @@ dashedName: step-11 # --description-- -Normaliza tu modelo de caja creando un selector `*` y estableciendo la propiedad `box-sizing` con el valor `border-box`. +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-- -Debes tener un 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')); ``` -Tu selector `*` debe tener una propiedad `box-sizing` establecida en `border-box`. +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/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 6d1505c80f0..9c56de3a432 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 @@ -7,37 +7,57 @@ dashedName: step-13 # --description-- -Elimina el margen de tu elemento `body`, establece `font-family` a `sans-serif`, y dale un `background-color` de `#f5f6f7`. +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-- -Debes tener un selector `body`. +You should have a `.header` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('body')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); ``` -Tu selector `body` debe tener una propiedad `margin` establecida en `0`. +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'); ``` -Tu selector `body` debe tener una propiedad `font-family` establecida en `sans-serif`. +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'); ``` -Tu selector `body` debe tener una propiedad `background-color` establecida en `#f5f6f7`. +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/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 2b373056d08..ce85850adb5 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 @@ -7,56 +7,26 @@ dashedName: step-14 # --description-- -Alinea tu texto `.header` en el centro. Pone el texto en mayúsculas usando la propiedad `text-transform` con `uppercase` como valor. +Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container. -Dale un relleno de `32px` en todos los lados. Establece el fondo en `#0a0a23` y el texto en `#fff` como valores de color. +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. -Añade un `border-bottom` con `4px solid #fdb347` como valor. # --hints-- -Debes tener un selector `.header`. +You should have a `.gallery` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')); ``` -Tu selector `.header` debe tener una propiedad `text-align` establecida en `center`. +Your `.gallery` selector should have a `display` property set to `flex` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center'); -``` - -Tu selector `.header` debe tener una propiedad `text-transform` establecida en `uppercase`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform === 'uppercase'); -``` - -Tu selector `.header` debe tener una propiedad `padding` establecida en `32px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px'); -``` - -Tu selector `.header` debe tener una propiedad `background-color` establecida en `#0a0a23`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(10, 10, 35)'); -``` - -Tu selector `.header` debe tener una propiedad `color` establecida en `#fff`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.color === 'rgb(255, 255, 255)'); -``` - -Tu selector `.header` debe tener una propiedad `border-bottom` establecida en `4px solid #fdb347`. - -```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/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 37cdd595b5d..5cc669f7e1d 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: Step 16 +title: Step 15 challengeType: 0 -dashedName: step-16 +dashedName: step-15 --- # --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 e5d1d44aa88..50da62fa79c 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: Step 17 +title: Step 16 challengeType: 0 -dashedName: step-17 +dashedName: step-16 --- # --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 6ea7256cd12..69aacfc2bbb 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: Step 18 +title: Step 17 challengeType: 0 -dashedName: step-18 +dashedName: step-17 --- # --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 f0c499f142d..47fdd5e6e3d 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: Step 19 +title: Step 18 challengeType: 0 -dashedName: step-19 +dashedName: step-18 --- # --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 1447a61a32d..9c30ee69862 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: Step 20 +title: Step 19 challengeType: 0 -dashedName: step-20 +dashedName: step-19 --- # --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 41657d9502c..adf49e95f14 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: Step 21 +title: Step 20 challengeType: 0 -dashedName: step-21 +dashedName: step-20 --- # --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 e58b8130edc..015b414b25f 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: Step 22 +title: Step 21 challengeType: 0 -dashedName: step-22 +dashedName: step-21 --- # --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 f671b063713..db33cf19b75 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: Step 23 +title: Step 22 challengeType: 0 -dashedName: step-23 +dashedName: step-22 --- # --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 8316f996faa..53d7a7cc8fc 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: Step 24 +title: Step 23 challengeType: 0 -dashedName: step-24 +dashedName: step-23 --- # --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 1ac1d665941..8593f0e9496 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: Step 25 +title: Step 24 challengeType: 0 -dashedName: step-25 +dashedName: step-24 --- # --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 4a7f435a064..a2756de469f 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 @@ -7,34 +7,39 @@ dashedName: step-12 # --description-- -Tus imágenes son demasiado grandes. Crea un selector `.gallery img` que las apunte. Dale a todas un `width` de `100%` y un `max-width` de `350px` para que se achiquen lo necesario, sin que se vuelvan demasiado grandes. +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. -También establece la propiedad `height` en `300px` para mantenes las imágenes en un tamaño uniforme. # --hints-- -Debes tener un selector `.gallery img`. +You should have a `body` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img')); +assert.exists(new __helpers.CSSHelp(document).getStyle('body')); ``` -Tu selector `.gallery img` debe tener la propiedad `width` con un valor de `100%`. +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'); ``` -Tu selector `.gallery img` debe tener la propiedad `max-width` con un valor de `350px`. +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'); ``` -Tu selector `.gallery img` debe tener la propiedad `height` con un valor de `300px`. +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/german/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md index 09067ffe825..92d34b65e65 100644 --- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md +++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md @@ -8,9 +8,9 @@ dashedName: seek-and-destroy # --description-- -Dir wird ein Ausgangsarray (das erste Argument in der `destroyer`-Funktion) zur Verfügung gestellt, gefolgt von einem oder mehreren Argumenten. Entferne alle Elemente aus dem Ausgangsarray, die den gleichen Wert wie diese Argumente haben. +You will be provided with an initial array as the first argument to the `destroyer` function, followed by one or more arguments. Entferne alle Elemente aus dem Ausgangsarray, die den gleichen Wert wie diese Argumente haben. -**Hinweis:** Du musst das `arguments`-Objekt verwenden. +The function must accept an indeterminate number of arguments, also known as a variadic function. You can access the additional arguments by adding a rest parameter to the function definition or using the `arguments` object. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md index 5a7f0e68960..6d612a773be 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md @@ -1,30 +1,47 @@ --- id: 615380dff67172357fcf0425 -title: Schritt 7 +title: Step 11 challengeType: 0 -dashedName: step-7 +dashedName: step-11 --- # --description-- -Normalisiere dein Box-Modell, indem du einen `*`-Selektor erstellst und die `box-sizing`-Eigenschaft auf den Wert `border-box` einstellst. +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-- -Du solltest einen `*`-Selektor haben. +You should have a `.gallery img` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img')); ``` -Dein `*`-Selektor sollte eine `box-sizing`-Eigenschaft von `border-box` als Wert haben. +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/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md index dd066c9a3ab..9c56de3a432 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md @@ -1,43 +1,63 @@ --- id: 6153893900438b4643590367 -title: Schritt 9 +title: Step 13 challengeType: 0 -dashedName: step-9 +dashedName: step-13 --- # --description-- -Entferne den Rand aus deinem `body`-Element, setze die `font-family` auf `sans-serif` und gib ihm die `background-color` mit dem Wert `#f5f6f7`. +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-- -Du solltest einen `body`-Selektor haben. +You should have a `.header` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('body')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); ``` -Dein `body`-Selektor sollte eine `margin`-Eigenschaft mit dem Wert `0` haben. +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'); ``` -Dein `body`-Selektor sollte eine `font-family`-Eigenschaft mit dem Wert `sans-serif` haben. +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'); ``` -Dein `body`-Selektor sollte eine `background-color`-Eigenschaft mit dem Wert `#f5f6f7` haben. +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/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md index a2ce85a4164..ce85850adb5 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md @@ -1,62 +1,32 @@ --- id: 6153897c27f6334716ee5abe -title: Schritt 10 +title: Step 14 challengeType: 0 -dashedName: step-10 +dashedName: step-14 --- # --description-- -Richte deinen `.header`-Text mittig aus. Schreibe den Text in Großbuchstaben unter der Verwendung der `text-transform`-Eigenschaft mit dem Wert `uppercase`. +Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container. -Gib ihm auf allen Seiten ein Padding von `32px`. Setze die Farbwerte des Hintergrundes auf `#0a0a23` und des Textes auf `#fff`. +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. -Füge einen `border-bottom` mit `4px solid #fdb347` als Wert hinzu. # --hints-- -Du solltest einen `.header`-Selektor haben. +You should have a `.gallery` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')); ``` -Dein `.header`-Selektor sollte eine `text-align`-Eigenschaft mit dem Wert `center` haben. +Your `.gallery` selector should have a `display` property set to `flex` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center'); -``` - -Dein `.header`-Selektor sollte eine `text-transform`-Eigenschaft mit dem Wert `uppercase` haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform === 'uppercase'); -``` - -Dein `.header`-Selektor sollte eine `padding`-Eigenschaft mit dem Wert `32px` haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px'); -``` - -Dein `.header`-Selektor sollte eine `background-color`-Eigenschaft mit `#0a0a23` als Wert haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(10, 10, 35)'); -``` - -Dein `.header`-Selektor sollte eine `color`-Eigenschaft mit `#fff` als Wert haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.color === 'rgb(255, 255, 255)'); -``` - -Dein `.header`-Selektor sollte eine `border-bottom`-Eigenschaft mit `4px solid #fdb347` als Wert haben. - -```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/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md index 8dab560fa81..f019b715cf8 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md @@ -1,8 +1,8 @@ --- id: 6153908a366afb4d57185c8d -title: Schritt 12 +title: Step 15 challengeType: 0 -dashedName: step-12 +dashedName: step-15 --- # --description-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md index 795e9c949cd..b5c677bc423 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md @@ -1,8 +1,8 @@ --- id: 615392916d83fa4f02f7e2cf -title: Schritt 13 +title: Step 16 challengeType: 0 -dashedName: step-13 +dashedName: step-16 --- # --description-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md index 0ea87f81210..6a57f2dfb9c 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md @@ -1,8 +1,8 @@ --- id: 6153938dce8b294ff8f5a4e9 -title: Schritt 14 +title: Step 17 challengeType: 0 -dashedName: step-14 +dashedName: step-17 --- # --description-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md index ec822bfec68..ec09d043179 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md @@ -1,8 +1,8 @@ --- id: 6153947986535e5117e60615 -title: Schritt 15 +title: Step 18 challengeType: 0 -dashedName: step-15 +dashedName: step-18 --- # --description-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md index 8bfd459f7a0..f1b58ec2cf6 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md @@ -1,8 +1,8 @@ --- id: 61539e07e7430b528fbffe21 -title: Schritt 16 +title: Step 19 challengeType: 0 -dashedName: step-16 +dashedName: step-19 --- # --description-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md index 40aa871c54f..0e5b54485ba 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md @@ -1,8 +1,8 @@ --- id: 61539f32a206bd53ec116465 -title: Schritt 17 +title: Step 20 challengeType: 0 -dashedName: step-17 +dashedName: step-20 --- # --description-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md index df6256b2c5c..cebd9a7bce6 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md @@ -1,8 +1,8 @@ --- id: 6153a04847abee57a3a406ac -title: Schritt 18 +title: Step 21 challengeType: 0 -dashedName: step-18 +dashedName: step-21 --- # --description-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md index b3fed15ef56..da98e73fd6c 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md @@ -1,8 +1,8 @@ --- id: 6153a3485f0b20591d26d2a1 -title: Schritt 19 +title: Step 22 challengeType: 0 -dashedName: step-19 +dashedName: step-22 --- # --description-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md index 13c528783bd..f95c7f1b386 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md @@ -1,8 +1,8 @@ --- id: 6153a3952facd25a83fe8083 -title: Schritt 20 +title: Step 23 challengeType: 0 -dashedName: step-20 +dashedName: step-23 --- # --description-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md index c18949aedba..08366e1e762 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md @@ -1,8 +1,8 @@ --- id: 6153a3ebb4f7f05b8401b716 -title: Schritt 21 +title: Step 24 challengeType: 0 -dashedName: step-21 +dashedName: step-24 --- # --description-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md index 2043d89c8ad..a2756de469f 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md @@ -1,40 +1,45 @@ --- id: 615f171d05def3218035dc85 -title: Schritt 8 +title: Step 12 challengeType: 0 -dashedName: step-8 +dashedName: step-12 --- # --description-- -Deine Bilder sind zu groß. Erstelle einen `.gallery img`-Selektor, um sie zu bestimmen. Gib ihnen allen eine `width` von `100%` und eine `max-width` von `350px`, so dass sie bei Bedarf schrumpfen, aber nicht zu groß werden. +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. -Setze ebenfalls die `height`-Eigenschaft auf `300px`, damit die Bilder eine einheitliche Größe haben. # --hints-- -Du solltest einen `.gallery img`-Selektor haben. +You should have a `body` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img')); +assert.exists(new __helpers.CSSHelp(document).getStyle('body')); ``` -Dein `.gallery img`-Selektor sollte eine `width`-Eigenschaft mit `100%` als Wert haben. +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'); ``` -Dein `.gallery img`-Selektor sollte eine `max-width`-Eigenschaft mit `350px` als Wert haben. +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'); ``` -Dein `.gallery img`-Selektor sollte eine `height`-Eigenschaft mit `300px` als Wert haben. +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/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md b/curriculum/challenges/german/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/german/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/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md b/curriculum/challenges/german/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/german/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/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md b/curriculum/challenges/german/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/german/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/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md b/curriculum/challenges/german/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/german/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/italian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md index e2e590599f1..4b7d1dc73bf 100644 --- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md +++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md @@ -8,9 +8,9 @@ dashedName: seek-and-destroy # --description-- -Ti verrà fornito un array iniziale (il primo argomento nella funzione `destroyer`), seguito da uno o più argomenti. Rimuovi dall'array iniziale tutti gli elementi che hanno lo stesso valore di questi argomenti. +You will be provided with an initial array as the first argument to the `destroyer` function, followed by one or more arguments. Rimuovi dall'array iniziale tutti gli elementi che hanno lo stesso valore di questi argomenti. -**Nota:** È necessario utilizzare l'oggetto `arguments`. +The function must accept an indeterminate number of arguments, also known as a variadic function. You can access the additional arguments by adding a rest parameter to the function definition or using the `arguments` object. # --hints-- diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md index 851e37abf51..6d612a773be 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md +++ b/curriculum/challenges/italian/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-- -Normalizza il box model creando un selettore `*` e impostando la proprietà `box-sizing` su `border-box`. +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-- -Dovresti avere un selettore `*`. +You should have a `.gallery img` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img')); ``` -Il selettore `*` dovrebbe avere una proprietà `box-sizing` con il valore `border-box`. +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/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md index 1e2fa980cba..9c56de3a432 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md +++ b/curriculum/challenges/italian/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-- -Rimuovi il margine dall'elemento `body`, imposta `font-family` su `sans-serif` e dagli un `background-color` con il valore `#f5f6f7`. +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-- -Dovresti avere un selettore `body`. +You should have a `.header` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('body')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); ``` -Il selettore `p` dovrebbe avere una `margin` con il valore `0`. +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'); ``` -Il selettore `body` dovrebbe avere una proprietà `font-family` con il valore `sans-serif`. +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'); ``` -Il selettore `body` dovrebbe avere una proprietà `background-color` con il valore `#f5f6f7`. +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/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md index 178af52f1ed..ce85850adb5 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md +++ b/curriculum/challenges/italian/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-- -Allinea al centro il testo di `.header`. Rendi il testo maiuscolo con la proprietà `text-transform` impostata su `uppercase`. +Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container. -Dagli un padding di `32px` su tutti i lati. Imposta lo sfondo sul colore `#0a0a23` e il testo sul colore `#fff`. +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. -Aggiungi un `border-bottom` con il valore `4px solid #fdb347`. # --hints-- -Dovresti avere un selettore `.header`. +You should have a `.gallery` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')); ``` -Il selettore `.header` dovrebbe avere una proprietà `text-align` con il valore `center`. +Your `.gallery` selector should have a `display` property set to `flex` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center'); -``` - -Il selettore `.header` dovrebbe avere una proprietà `text-transform` con il valore `uppercase`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform === 'uppercase'); -``` - -Il selettore `.header` dovrebbe avere una proprietà `padding` con il valore `32px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px'); -``` - -Il selettore `.header` dovrebbe avere una proprietà `background-color` con il valore `#0a0a23`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(10, 10, 35)'); -``` - -Il selettore `.header` dovrebbe avere una proprietà `color` con il valore `#fff`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.color === 'rgb(255, 255, 255)'); -``` - -Il selettore `.header` dovrebbe avere una proprietà `border-bottom` con il valore `4px solid #fdb347`. - -```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/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md index 2861f6960cd..22d9357d9bd 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md +++ b/curriculum/challenges/italian/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/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md index 2da160b4288..d41dd7dfc8c 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md +++ b/curriculum/challenges/italian/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/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md index ab4b58c8957..d681d093698 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md +++ b/curriculum/challenges/italian/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/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md index ed92222f175..a662a3fbef8 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md +++ b/curriculum/challenges/italian/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/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md index 8958f29b88a..920ff2bb850 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md +++ b/curriculum/challenges/italian/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/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md index 35a18a69bf2..f4cf7f2024c 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md +++ b/curriculum/challenges/italian/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/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md index 4a4144783b1..e46002df508 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md +++ b/curriculum/challenges/italian/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/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md index 0cba99a3ef4..118de0187ee 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md +++ b/curriculum/challenges/italian/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/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md index 6df94db019c..bab4a87d8ca 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md +++ b/curriculum/challenges/italian/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/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md index 178e881d814..78c1c5ccba6 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md +++ b/curriculum/challenges/italian/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/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md index 39685687a57..a2756de469f 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md +++ b/curriculum/challenges/italian/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-- -Le immagini sono troppo grandi. Crea un selettore `.gallery img` per selezionare le immagini. Per tutte le immagini, imposta `width` al `100%` e `max-width` su `350px` in modo che si rimpiccioliscano al bisogno senza poter diventare troppo grandi. +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. -Imposta anche la proprietà `height` su `300px` per mantenere uniforme la dimensione delle immagini. # --hints-- -Dovresti avere un selettore `.gallery img`. +You should have a `body` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img')); +assert.exists(new __helpers.CSSHelp(document).getStyle('body')); ``` -La regola `.gallery img` dovrebbe avere una proprietà `width` con il valore `100%`. +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'); ``` -Il selettore `.gallery img` dovrebbe avere una proprietà `max-width` con il valore `350px`. +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'); ``` -Il selettore `.gallery img` dovrebbe avere una proprietà `height` con il valore `300px`. +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/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md b/curriculum/challenges/italian/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/italian/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/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md b/curriculum/challenges/italian/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/italian/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/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md b/curriculum/challenges/italian/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/italian/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/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md b/curriculum/challenges/italian/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/italian/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/japanese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md index 741e19052b8..0eb1d01bca5 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md @@ -8,9 +8,9 @@ dashedName: seek-and-destroy # --description-- -最初の配列 (`destroyer` 関数の最初の引数) が与えられ、続いて 1 つ以上の引数が与えられます。 これらの引数と同じ値を持つすべての要素を最初の配列から削除してください。 +You will be provided with an initial array as the first argument to the `destroyer` function, followed by one or more arguments. これらの引数と同じ値を持つすべての要素を最初の配列から削除してください。 -**注:** `arguments` オブジェクトを使用する必要があります。 +The function must accept an indeterminate number of arguments, also known as a variadic function. You can access the additional arguments by adding a rest parameter to the function definition or using the `arguments` object. # --hints-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md index 5fa24f5e376..6d612a773be 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md @@ -1,30 +1,47 @@ --- id: 615380dff67172357fcf0425 -title: ステップ 7 +title: Step 11 challengeType: 0 -dashedName: step-7 +dashedName: step-11 --- # --description-- -ボックスモデルについて、ブラウザによる表示の差異を統一するために、`*` セレクターを作成して `box-sizing` プロパティの値を `border-box` に設定してください。 +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 `.gallery img` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img')); ``` -`*` セレクターの `box-sizing` プロパティの値を `border-box` に設定する必要があります。 +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/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md index 2f2e5738db3..9c56de3a432 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md @@ -1,43 +1,63 @@ --- id: 6153893900438b4643590367 -title: ステップ 9 +title: Step 13 challengeType: 0 -dashedName: step-9 +dashedName: step-13 --- # --description-- -`body` 要素からマージンを取り除いて、`font-family` を `sans-serif` に設定し、`background-color` を `#f5f6f7` に設定してください。 +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-- -`body` セレクターが必要です。 +You should have a `.header` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('body')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); ``` -`body` セレクターの `margin` プロパティの値を `0` に設定する必要があります。 +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'); ``` -`body` セレクターの `font-family` プロパティの値を `sans-serif` に設定する必要があります。 +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'); ``` -`body` セレクターの `background-color` プロパティの値を `#f5f6f7` に設定する必要があります。 +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/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md index c1f089b4016..ce85850adb5 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md @@ -1,62 +1,32 @@ --- id: 6153897c27f6334716ee5abe -title: ステップ 10 +title: Step 14 challengeType: 0 -dashedName: step-10 +dashedName: step-14 --- # --description-- -`.header` のテキストを中央揃えにしてください。 また、`text-transform` プロパティと `uppercase` の値を使用して、テキストを大文字にしてください。 +Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container. -各辺のパディングは `32px` にしてください。 背景色を `#0a0a23` に、文字色を `#fff` に設定してください。 +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. -そして `border-bottom` を追加して、値を `4px solid #fdb347` に設定してください。 # --hints-- -`.header` セレクターが必要です。 +You should have a `.gallery` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')); ``` -`.header` セレクターの `text-align` プロパティの値を `center` に設定する必要があります。 +Your `.gallery` selector should have a `display` property set to `flex` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center'); -``` - -`.header` セレクターの `text-transform` プロパティの値を `uppercase` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform === 'uppercase'); -``` - -`.header` セレクターの `padding` プロパティの値を `32px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px'); -``` - -`.header` セレクターの `background-color` プロパティの値を `#0a0a23` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(10, 10, 35)'); -``` - -`.header` セレクターの `color` プロパティの値を `#fff` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.color === 'rgb(255, 255, 255)'); -``` - -`.header` セレクターの `border-bottom` プロパティの値を `4px solid #fdb347` に設定する必要があります。 - -```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/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md index 3ecfc550597..85f0a60f56e 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md +++ b/curriculum/challenges/japanese/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 15 challengeType: 0 -dashedName: step-12 +dashedName: step-15 --- # --description-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md index acda0b3a2d2..4a9053adb03 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md +++ b/curriculum/challenges/japanese/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 16 challengeType: 0 -dashedName: step-13 +dashedName: step-16 --- # --description-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md index c751b0d7704..44912c6edf0 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md +++ b/curriculum/challenges/japanese/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 17 challengeType: 0 -dashedName: step-14 +dashedName: step-17 --- # --description-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md index 8d9a109e1d3..88e17dd8947 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md +++ b/curriculum/challenges/japanese/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 18 challengeType: 0 -dashedName: step-15 +dashedName: step-18 --- # --description-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md index 31bcb1a6bbe..50db3532694 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md +++ b/curriculum/challenges/japanese/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 19 challengeType: 0 -dashedName: step-16 +dashedName: step-19 --- # --description-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md index 5c076a1a075..cf0aa495869 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md +++ b/curriculum/challenges/japanese/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 20 challengeType: 0 -dashedName: step-17 +dashedName: step-20 --- # --description-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md index c0969e7d970..100f8215278 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md +++ b/curriculum/challenges/japanese/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 21 challengeType: 0 -dashedName: step-18 +dashedName: step-21 --- # --description-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md index 2cb6dad63e7..e8f36a3ada8 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md +++ b/curriculum/challenges/japanese/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 22 challengeType: 0 -dashedName: step-19 +dashedName: step-22 --- # --description-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md index 62a4136c5f8..8b7bcb9e22c 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md +++ b/curriculum/challenges/japanese/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 23 challengeType: 0 -dashedName: step-20 +dashedName: step-23 --- # --description-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md index 993ab656172..83f9d52fc63 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md +++ b/curriculum/challenges/japanese/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 24 challengeType: 0 -dashedName: step-21 +dashedName: step-24 --- # --description-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md index 2adf8a98549..a2756de469f 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md @@ -1,40 +1,45 @@ --- id: 615f171d05def3218035dc85 -title: ステップ 8 +title: Step 12 challengeType: 0 -dashedName: step-8 +dashedName: step-12 --- # --description-- -画像が大きすぎますね。 画像を選択する `.gallery img` セレクターを作成してください。 すべての画像の `width` を `100%` に、`max-width` を `350px` に設定することで、必要に応じて縮小されながらも大きくなりすぎないようにしてください。 +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. -また、`height` プロパティを `300px` に設定して画像のサイズを均一にしましょう。 # --hints-- -`.gallery img` セレクターが必要です。 +You should have a `body` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img')); +assert.exists(new __helpers.CSSHelp(document).getStyle('body')); ``` -`.gallery img` セレクターの `width` プロパティの値を `100%` に設定する必要があります。 +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'); ``` -`.gallery img` セレクターの `max-width` プロパティの値を `350px` に設定する必要があります。 +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'); ``` -`.gallery img` セレクターの `height` プロパティの値を `300px` に設定する必要があります。 +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/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md b/curriculum/challenges/japanese/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/japanese/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/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md b/curriculum/challenges/japanese/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/japanese/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/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md b/curriculum/challenges/japanese/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/japanese/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/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md b/curriculum/challenges/japanese/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/japanese/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/portuguese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md index 0c7ed2894a9..d0942315501 100644 --- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md +++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md @@ -8,9 +8,9 @@ dashedName: seek-and-destroy # --description-- -Você receberá um array inicial (o primeiro argumento na função `destroyer`), seguido por um ou mais argumentos. Remova todos os elementos da matriz inicial que são do mesmo valor que esses argumentos. +Você receberá um array inicial como primeiro argumento da função `destroyer`, seguido por um ou mais argumentos. Remova todos os elementos da matriz inicial que são do mesmo valor que esses argumentos. -**Observação:** você tem que usar os `arguments` do objeto. +A função deve aceitar um número indeterminado de argumentos. Em outras palavras, ela deve ser uma função variádica. Você poderá acessar os argumentos adicionais colocando um parâmetro rest na definição da função ou usando o objeto `arguments`. # --hints-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md index 52116362864..6d612a773be 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md @@ -1,30 +1,47 @@ --- id: 615380dff67172357fcf0425 -title: Passo 7 +title: Step 11 challengeType: 0 -dashedName: step-7 +dashedName: step-11 --- # --description-- -Normalize seu modelo de caixa criando um seletor `*` e dê a ele com a propriedade `box-sizing` definida como `border-box`. +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-- -Você deve ter um seletor `*`. +You should have a `.gallery img` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img')); ``` -O seletor `*` deve ter a propriedade `box-sizing` com o valor de `border-box`. +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/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md index 5454c076154..9c56de3a432 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md @@ -1,43 +1,63 @@ --- id: 6153893900438b4643590367 -title: Passo 9 +title: Step 13 challengeType: 0 -dashedName: step-9 +dashedName: step-13 --- # --description-- -Remova a margem do elemento `body`, defina `font-family` como `sans-serif` e dê a ela uma `background-color` com o valor de `#f5f6f7`. +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-- -Você deve ter um seletor `body`. +You should have a `.header` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('body')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); ``` -O seletor `body` deve ter a propriedade `margin` definida como `0`. +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'); ``` -O seletor `body` deve ter a propriedade `font-family` com o valor `sans-serif`. +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'); ``` -O seletor `body` deve ter a propriedade `background-color` definida como `#f5f6f7`. +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/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md index 5a3e8ffa849..ce85850adb5 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md @@ -1,62 +1,32 @@ --- id: 6153897c27f6334716ee5abe -title: Passo 10 +title: Step 14 challengeType: 0 -dashedName: step-10 +dashedName: step-14 --- # --description-- -Alinhe o texto de `.header` no centro. Torne o texto maiúsculo usando a propriedade `text-transform` com `uppercase` como valor. +Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container. -Dê a ele um espaçamento de `32px` em todos os lados. Defina os valores de cor do fundo como `#0a0a23` e do texto como `#fff`. +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. -Adicione uma `border-bottom` com o valor de `4px solid #fdb347`. # --hints-- -Você deve ter um seletor `.header`. +You should have a `.gallery` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')); ``` -O seletor `.header` deve definir a propriedade `text-align` como `center`. +Your `.gallery` selector should have a `display` property set to `flex` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center'); -``` - -O seletor `.header` deve definir a propriedade `text-transform` como `uppercase`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform === 'uppercase'); -``` - -O seletor `.header` deve ter a propriedade `padding` definida como `32px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px'); -``` - -O seletor `.header` deve ter a propriedade `background-color` definida como `#0a0a23`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(10, 10, 35)'); -``` - -O seletor `.header` deve ter a propriedade `color` definida como `#fff`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.color === 'rgb(255, 255, 255)'); -``` - -O seletor `.header` deve ter a propriedade `border-bottom` definida como `4px solid #fdb347`. - -```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/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md index 5d976299057..84ef523cde4 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md @@ -1,8 +1,8 @@ --- id: 6153908a366afb4d57185c8d -title: Passo 12 +title: Step 15 challengeType: 0 -dashedName: step-12 +dashedName: step-15 --- # --description-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md index 8531b6c6557..d986d8162bf 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md @@ -1,8 +1,8 @@ --- id: 615392916d83fa4f02f7e2cf -title: Passo 13 +title: Step 16 challengeType: 0 -dashedName: step-13 +dashedName: step-16 --- # --description-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md index 63d909be0fa..89a9043ef2a 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md @@ -1,8 +1,8 @@ --- id: 6153938dce8b294ff8f5a4e9 -title: Passo 14 +title: Step 17 challengeType: 0 -dashedName: step-14 +dashedName: step-17 --- # --description-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md index 5638af48202..0d97dadfe10 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md @@ -1,8 +1,8 @@ --- id: 6153947986535e5117e60615 -title: Passo 15 +title: Step 18 challengeType: 0 -dashedName: step-15 +dashedName: step-18 --- # --description-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md index 06462165c4a..0e20c8eb92c 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md @@ -1,8 +1,8 @@ --- id: 61539e07e7430b528fbffe21 -title: Passo 16 +title: Step 19 challengeType: 0 -dashedName: step-16 +dashedName: step-19 --- # --description-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md index 1d11da1fcd1..d54662fca52 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md @@ -1,8 +1,8 @@ --- id: 61539f32a206bd53ec116465 -title: Passo 17 +title: Step 20 challengeType: 0 -dashedName: step-17 +dashedName: step-20 --- # --description-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md index 383b5398e08..e791ce4dab1 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md @@ -1,8 +1,8 @@ --- id: 6153a04847abee57a3a406ac -title: Passo 18 +title: Step 21 challengeType: 0 -dashedName: step-18 +dashedName: step-21 --- # --description-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md index 9937fb501e9..22f2f6bad68 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md @@ -1,8 +1,8 @@ --- id: 6153a3485f0b20591d26d2a1 -title: Passo 19 +title: Step 22 challengeType: 0 -dashedName: step-19 +dashedName: step-22 --- # --description-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md index aed0adf8b4a..538bdf20d71 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md @@ -1,8 +1,8 @@ --- id: 6153a3952facd25a83fe8083 -title: Passo 20 +title: Step 23 challengeType: 0 -dashedName: step-20 +dashedName: step-23 --- # --description-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md index 7f8364d5e51..f4b0a363d65 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md @@ -1,8 +1,8 @@ --- id: 6153a3ebb4f7f05b8401b716 -title: Passo 21 +title: Step 24 challengeType: 0 -dashedName: step-21 +dashedName: step-24 --- # --description-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md index f7932f42bf9..a2756de469f 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md @@ -1,40 +1,45 @@ --- id: 615f171d05def3218035dc85 -title: Passo 8 +title: Step 12 challengeType: 0 -dashedName: step-8 +dashedName: step-12 --- # --description-- -As imagens são muito grandes. Crie um seletor `.gallery img` para localizar suas imagens. Dê a elas uma `width` de `100%` e uma `max-width` de `350px` para que encolham conforme necessário, mas não fiquem muito grandes. +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. -Também defina a propriedade `height` para `300px` para manter suas imagens com um tamanho uniforme. # --hints-- -Você deve ter um seletor `.gallery img`. +You should have a `body` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img')); +assert.exists(new __helpers.CSSHelp(document).getStyle('body')); ``` -O seletor `.gallery img` deve ter uma propridade `width` definida como `100%`. +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'); ``` -O seletor `.gallery img` deve ter uma propridade `max-width` definida como `350px`. +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'); ``` -O seletor `.gallery img` deve ter uma propridade `height` definida como `300px`. +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/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md b/curriculum/challenges/portuguese/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/portuguese/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/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md b/curriculum/challenges/portuguese/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/portuguese/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/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md b/curriculum/challenges/portuguese/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/portuguese/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/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md b/curriculum/challenges/portuguese/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/portuguese/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/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c48df8674cf2b91020ecc.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c48df8674cf2b91020ecc.md index a5c06c25ef5..7ae06271069 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c48df8674cf2b91020ecc.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c48df8674cf2b91020ecc.md @@ -11,19 +11,19 @@ Adicione um elemento `link` dentro do elemento `head`. Para esse elemento `link` # --hints-- -Your should have a `link` element. +Você deve ter um elemento `link`. ```js assert.match(code, //) diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md index c06a86c76db..a3d84c9b547 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md @@ -7,7 +7,7 @@ dashedName: step-5 # --description-- -Give your `body` element a `background-color` of `#c9d2fc`. +Dê ao elemento `body` um `background-color` de `#c9d2fc`. # --hints-- @@ -17,7 +17,7 @@ Você deve ter um seletor `body`. assert(new __helpers.CSSHelp(document).getStyle('body')); ``` -Your `body` selector should have a `background-color` property set to `#c9d2fc`. +O seletor `body` deve ter a propriedade `background-color` definida como `#c9d2fc`. ```js assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(201, 210, 252)'); diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md index 58fbb75fb47..c7bb32ef74b 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md @@ -7,7 +7,7 @@ dashedName: step-6 # --description-- -Back in your HTML, create a `main` element. Inside that `main` element, add a `div` element with the class `cat-head`. +De volta ao HTML, crie um elemento `main`. Dentro do elemento `main`, adicione um elemento `div` com a classe `cat-head`. # --hints-- @@ -23,13 +23,13 @@ Você deve ter um elemento `div`. assert(document.querySelectorAll('div').length === 1); ``` -Your `div` element should have the class `cat-head`. +O elemento `div` deve ter a classe `cat-head`. ```js assert(document.querySelector('div')?.getAttribute('class') === 'cat-head'); ``` -Your `div` element should be inside your `main` tag. +O elemento `div` deve estar dentro das tags do elemento `main`. ```js assert(document.querySelectorAll('main div').length === 1); diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md index 954a05c12ff..073ea667a21 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md @@ -7,31 +7,31 @@ dashedName: step-8 # --description-- -To see the `cat-head` element, give it a linear gradient background with `#5e5e5e` at `85%` and `#45454f` at `100%`. +Para ver o elemento `cat-head`, dê a ele um plano de fundo com gradiente linear com os valores `#5e5e5e` em `85%` e `#45454f` em `100%`. -You might not notice the difference between these two colors, but they are there. +Você pode não notar a diferença entre estas duas cores, mas elas estão lá. # --hints-- -Your `.cat-head` selector should have a `background` property. +O seletor `.cat-head` deve ter uma propriedade `background`. ```js assert.match(code, /background:/) ``` -Your `background` property should use the `linear-gradient` function. +A propriedade `background` deve ser a função `linear-gradient`. ```js assert.match(code, /background:\s*linear-gradient\(/) ``` -Your `linear-gradient` function should set the first color to be `#5e5e5e` at `85%`. +A função `linear-gradient` deve definir a primeira cor como `#5e5e5e` em `85%`. ```js assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%/) ``` -Your `linear-gradient` function should set the second color to be `#45454f` at `100%`. +A função `linear-gradient` deve definir a segunda cor como `#45454f` em `100%`. ```js assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%,\s+#45454f\s+100%\);?/) diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md index 8fc0e7ddee7..dbb6385e21a 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md @@ -7,30 +7,30 @@ dashedName: step-9 # --description-- -CSS positioning lets you set how you want an element to be positioned in the browser. It has a `position` property you can set to `static`, `absolute`, `relative`, `sticky` or `fixed`. +O posicionamento do CSS permite que você defina como você deseja que um elemento seja posicionado no navegador. Ele possui uma propriedade `position` que você pode definir como `static`, `absolute`, `relative`, `sticky` ou `fixed`. -Once you set the `position` property of the element, you can move the element around by setting a pixel or a percentage value for one or more of the `top`, `right`, `left`, or `bottom` properties. +Uma vez que você definir a propriedade `position` do elemento, você pode mover o elemento definindo um pixel ou um valor percentual para um ou mais dentre as propriedades `top`, `right`, `left` ou `bottom`. -`static` is the default positioning for all elements. If you assign it to an element, you won't be able to move it around with `top`, `right`, `left`, or `bottom`. +`static` é o posicionamento padrão para todos os elementos. Se você o atribuir a um elemento, não poderá movê-lo usando `top`, `right`, `left` ou `bottom`. -Give `.cat-head` a `position` property of `static`, then set the `top` and `left` properties to `100px` each. +Dê a `.cat-head` uma propriedade `position` `static`, definindo as propriedades `top` e `left` como `100px`. # --hints-- -Your `.cat-head` selector should have a `position` property set to `static`. Make sure you add a semi-colon. +O seletor `.cat-head` deve ter a propriedade `position` definida como `static`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'static') ``` -Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semi-colon. +O seletor `.cat-head` deve ter a propriedade `top` definida como `100px`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') ``` -Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semi-colon. +O seletor `.cat-head` deve ter a propriedade `left` definida como `100px`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md index 455a8781fb6..ca88928de9b 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md @@ -7,25 +7,25 @@ dashedName: step-19 # --description-- -Now you should work on the cat's ears. There will be a right and a left ear, and inside each, there will be an inner ear. +Agora você dever trabalhar nas orelhas do gato. Haverá uma orelha direita e uma orelha esquerda. Dentro delas, haverá uma orelha interna. -Inside your `.cat-head` element, create a `div` element with the class `cat-ears`. +Dentro do elemento `.cat-head`, crie outro elemento `div` com a classe `cat-ears`. # --hints-- -You should not change the existing `div` element with the class `cat-head`. +Você não deve alterar o elemento `div` existente com a classe `cat-head`. ```js assert(document.querySelectorAll('div.cat-head').length === 1); ``` -You should create one `div` element inside your `.cat-head` element. +Você deve ter um elemento `div` dentro do elemento `.cat-head`. ```js assert(document.querySelectorAll('.cat-head div').length === 1); ``` -Your `div` element should have the class `cat-ears`. +O elemento `div` deve ter a classe `cat-ears`. ```js assert(document.querySelectorAll('.cat-head div')[0]?.getAttribute('class') === 'cat-ears'); diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md index bed7492c68b..4a2959eb83d 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md @@ -7,29 +7,29 @@ dashedName: step-20 # --description-- -Inside your `.cat-ears` element, create two `div` elements with the classes `cat-left-ear` and `cat-right-ear` respectively. +Dentro do elemento `.cat-ears`, crie dois elementos `div` com a classe `cat-left-ear` e `cat-right-ear`, respectivamente. # --hints-- -You should not change the existing `div` element with the class `car-ears`. +Você não deve alterar o elemento `div` existente com a classe `cat-ears`. ```js assert(document.querySelectorAll('div.cat-ears').length === 1); ``` -You should create two `div` elements inside your `.cat-ears` element. +Você deve ter dois elementos `div` dentro do elemento `.cat-ears`. ```js assert(document.querySelectorAll('.cat-ears div').length === 2); ``` -Your first `div` element should have the class `cat-left-ear`. +O primeiro elemento `div` deve ter a classe `cat-left-ear`. ```js assert(document.querySelectorAll('.cat-ears div')[0]?.classList.contains('cat-left-ear')); ``` -Your second `div` element should have the class `cat-right-ear`. +O segundo elemento `div` deve ter a classe `cat-right-ear`. ```js assert(document.querySelectorAll('.cat-ears div')[1]?.classList.contains('cat-right-ear')); diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md index 01d066e9351..f6abf1f8a6c 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md @@ -7,23 +7,23 @@ dashedName: step-21 # --description-- -Inside your `.cat-left-ear` element, create another `div` element with the class `cat-left-inner-ear`. +Dentro do elemento `.cat-left-ear`, crie outro elemento `div` com a classe `cat-left-inner-ear`. # --hints-- -You should not change the existing `div` element with the class `cat-left-ear`. +Você não deve alterar o elemento `div` existente com a classe `cat-left-ear`. ```js assert(document.querySelectorAll('div.cat-left-ear').length === 1); ``` -You should have a `div` element inside your `.cat-left-ear` element. +Você deve ter um elemento `div` dentro do elemento `.cat-left-ear`. ```js assert(document.querySelectorAll('.cat-left-ear div').length === 1); ``` -Your `div` element should have the class `cat-left-inner-ear`. +O elemento `div` deve ter a classe `cat-left-inner-ear`. ```js assert(document.querySelectorAll('.cat-left-ear div')[0]?.classList.contains('cat-left-inner-ear')); diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md index ba9356f5705..39b26f140a1 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md @@ -7,23 +7,23 @@ dashedName: step-22 # --description-- -Inside your `.cat-right-ear` element, create another `div` element with the class `cat-right-inner-ear`. +Dentro do elemento `.cat-right-ear`, crie outro elemento `div` com a classe `cat-right-inner-ear`. # --hints-- -You should not change the existing `div` element with the class `cat-right-ear`. +Você não deve alterar o elemento `div` existente com a classe `cat-right-ear`. ```js assert(document.querySelectorAll('div.cat-right-ear').length === 1); ``` -You should have a `div` element inside your `.cat-right-ear` element. +Você deve ter um elemento `div` dentro do elemento `.cat-right-ear`. ```js assert(document.querySelectorAll('.cat-right-ear div').length === 1); ``` -Your `div` element should have the class `cat-right-inner-ear`. +O elemento `div` deve ter a classe `cat-right-inner-ear`. ```js assert(document.querySelectorAll('.cat-right-ear div')[0]?.classList.contains('cat-right-inner-ear')); diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md index c61e8c3ff13..f56c3434ac0 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md @@ -7,23 +7,23 @@ dashedName: step-24 # --description-- -Move the left ear into position by setting a position of `absolute`, a `top` of `-26px`, and a `left` of `-31px`. +Mova a orelha esquerda interna para o lugar com uma position `absolute`, um `top` de `-26px` e um `left` de `-31px`. # --hints-- -Your `.cat-left-ear` selector should have a `position` property set to `absolute`. Don't forget to add a semi-colon. +O seletor `.cat-left-ear` deve ter a propriedade `position` definida como `absolute`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.position === 'absolute') ``` -Your `.cat-left-ear` selector should have a `top` property set to `-26px` +O seletor `.cat-left-ear` deve ter a propriedade `top` definida como `-26px` ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.top === '-26px') ``` -Your `.cat-left-ear` selector should have a `left` property set to `-31px` +O seletor `.cat-left-ear` deve ter a propriedade `left` definida como `-31px` ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.left === '-31px') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md index ed03a9964cc..1b68c88e2de 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md @@ -7,17 +7,17 @@ dashedName: step-25 # --description-- -Those edges are too sharp for an ear. So, set the `border-top-left-radius` to `90px` and the `border-top-right-radius` to `10px`. +Esses lados estão afilados demais para uma orelha. Assim sendo, defina `border-top-left-radius` como `90px` e `border-top-right-radius` como `10px`. # --hints-- -Your `.cat-left-ear` selector should have a `border-top-left-radius` property set to `90px`. +O seletor `.cat-left-ear` deve ter a propriedade `border-top-left-radius` definida como `90px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderTopLeftRadius === '90px') ``` -Your `.cat-left-ear` selector should have a `border-top-right-radius` property set to `10px`. +O seletor `.cat-left-ear` deve ter a propriedade `border-top-right-radius` definida como `10px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderTopRightRadius === '10px') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md index d24036bfc59..1a6e6778aa7 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md @@ -7,15 +7,15 @@ dashedName: step-26 # --description-- -To position the left ear properly, you can use CSS transform to rotate it in a certain degree. +Para posicionar a orelha esquerda corretamente, você pode usar a transformação no CSS para girá-la em um certo grau. -The `transform` property allows you to modify the shape, position, and size of an element without changing the layout or affecting the surrounding elements. It has functions such as `translate()`, `rotate()`, `scale()`, `skew()`, and `matrix()`. +A propriedade `transform` permite que você modifique o formato, a posição e o tamanho de um elemento sem alterar o layout ou afetar os elementos ao redor. Ela tem funções como `translate()`, `rotate()`, `scale()`, `skew()` e `matrix()`. -Set the `transform` property to `rotate(-45deg)` and see what happens. +Defina a propriedade `transform` como `rotate(-45deg)` e veja o que acontece. # --hints-- -You should set the `transform` property of your `.cat-left-ear` element to `rotate(-45deg)`. Don't forget to add a semi-colon. +Você deve definir a propriedade `transform` do elemento `.cat-left-ear` como `rotate(-45deg)`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.transform === 'rotate(-45deg)') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md index 9ff85827531..24dc7aa62d6 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md @@ -7,17 +7,17 @@ dashedName: step-30 # --description-- -Remove the sharp border of the right ear by setting the `border-top-left-radius` to `90px` and the `border-top-right-radius` to `10px`. +Remova a borda afiada da orelha direita, definindo `border-top-left-radius` como `90px` e `border-top-right-radius` como `10px`. # --hints-- -Your `.cat-right-ear` selector should have a `border-top-left-radius` property set to `90px`. Don't forget to add a semi-colon. +O seletor `.cat-right-ear` deve ter a propriedade `border-top-left-radius` definida como `90px`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTopLeftRadius === '90px') ``` -Your `.cat-right-ear` selector should have a `border-top-right-radius` property set to `10px`. Don't forget to add a semi-colon. +O seletor `.cat-right-ear` deve ter a propriedade `border-top-right-radius` definida como `10px`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTopRightRadius === '10px') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md index c718fb113fa..d9d7bf448a1 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md @@ -7,15 +7,15 @@ dashedName: step-31 # --description-- -The ears should always be placed above the part of the head it overlaps. You can do this with the `z-index` property. +As orelhas devem sempre ser colocadas acima da parte da cabeça a que se sobrepõem. Você pode fazer isso com a propriedade `z-index`. -`z-index` is a property you can use to define the order of overlapping HTML elements. Any element with a higher `z-index` will always be positioned over an element with a lower `z-index`. +`z-index` é uma propriedade que você pode usar para definir a ordem de sobreposição dos elementos do HTML. Qualquer elemento com um `z-index` maior sempre será posicionado sobre um elemento com um `z-index` menor. -To see `z-index` in action, set the `z-index`property of the left ear to `-1`. +Para ver o `z-index` em ação, defina a propriedade `z-index`da orelha esquerda como `-1`. # --hints-- -Your `.cat-left-ear` selector should have a `z-index` of `-1`. Don't forget to add a semi-colon. +O seletor `.cat-left-ear` deve ter a propriedade `z-index` definida como `-1`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.zIndex === '-1') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md index 7a4cc4c28c8..0b98c1f054b 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md @@ -7,13 +7,13 @@ dashedName: step-32 # --description-- -That's not the behavior you want. You should make the ears display over the head so the borders that overlap with them don't show. +Esse não é o comportamento que você quer. Você deve fazer com que as orelhas apareçam sobre a cabeça, para que as bordas que se sobrepõem a elas não sejam exibidas. -Instead of `-1`, set the `z-index` property of the left ear to `1`. +Em vez de `-1`, defina a propriedade `z-index` da orelha esquerda como `1`. # --hints-- -Your `.cat-left-ear` selector should have a `z-index` of `1`. Don't forget to add a semi-colon. +O seletor `.cat-left-ear` deve ter a propriedade `z-index` definida como `1`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.zIndex === '1') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md index 29fc0e8ca8e..0618861bfe6 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md @@ -7,31 +7,31 @@ dashedName: step-34 # --description-- -Most cats have different colors in their ear and the inner part of the same ear. You can implement the same too. That's why you defined a `div` element for both right and left inner ears a while ago. +A maioria dos gatos tem cores diferentes na orelha e na parte interna da mesma orelha. Você também pode implementar isso. É por isso que você definiu um elemento `div` para as orelhas internas da direita e da esquerda anteriormente. -Using a class selector, give your `.cat-left-inner-ear` element a left and right border of `20px solid transparent` each. Also give it a bottom border of `40px solid #3b3b4f`. +Usando um seletor de classe, dê ao elemento `.cat-left-inner-ear` uma borda esquerda e uma borda direita de `20px solid transparent`. Além disso, defina a borda inferior como `40px solid #3b3b4f`. # --hints-- -You should have a `.cat-left-inner-ear` selector. +Você deve ter um seletor `.cat-left-inner-ear`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')) ``` -Your `.cat-left-inner-ear` selector should have a `border-left` property set to `20px solid transparent`. +O seletor `.cat-left-inner-ear` deve ter a propriedade `border-left` definida como `20px solid transparent`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderLeft === '20px solid transparent') ``` -Your `.cat-left-inner-ear` selector should have a `border-right` property set to `20px solid transparent`. +O seletor `.cat-left-inner-ear` deve ter a propriedade `border-right` definida como `20px solid transparent`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderRight === '20px solid transparent') ``` -Your `.cat-left-inner-ear` selector should have a `border-bottom` property set to `40px solid #3b3b4f`. +O seletor `.cat-left-inner-ear` deve ter a propriedade `border-bottom` definida como `40px solid #3b3b4f`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottom === '40px solid rgb(59, 59, 79)') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md index 7457a08858e..971cd73bcba 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md @@ -7,23 +7,23 @@ dashedName: step-35 # --description-- -Move the inner ear into position with a `position` property set to `absolute`, a `top` of `22px`, and a `left` of `-20px`. +Mova a parte interna da orelha para o lugar com uma propriedade `position` definida como `absolute`, um `top` de `22px` e um `left` de `-20px`. # --hints-- -Your `.cat-left-inner-ear` selector should have a `position` property set to `absolute`. +O seletor `.cat-left-inner-ear` deve ter a propriedade `position` definida como `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.position === 'absolute') ``` -Your `.cat-left-inner-ear` selector should have a `top` property set to `22px`. +O seletor `.cat-left-inner-ear` deve ter a propriedade `top` definida como `22px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.top === '22px') ``` -Your `.cat-left-inner-ear` selector should have a `left` property set to `-20px`. +O seletor `.cat-left-inner-ear` deve ter a propriedade `left` definida como `-20px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.left === '-20px') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md index df047edf454..53c5a271d99 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md @@ -7,29 +7,29 @@ dashedName: step-37 # --description-- -It's time to work on the right inner ear. Using a class selector, give your `.cat-right-inner-ear` element a left and right border of `20px solid transparent`. Also, give it a bottom border of `40px solid #3b3b4f`. +É hora de trabalhar no ouvido interno direito. Usando um seletor de classe, dê ao elemento `.cat-right-inner-ear` uma borda esquerda e uma borda direita de `20px solid transparent`. Além disso, defina a borda inferior como `40px solid #3b3b4f`. # --hints-- -You should have a `.cat-right-inner-ear` selector. +Você deve ter um seletor `.cat-right-inner-ear`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')) ``` -Your `.cat-right-inner-ear` selector should have a `border-left` property set to `20px solid transparent`. +O seletor `.cat-right-inner-ear` deve ter a propriedade `border-left` definida como `20px solid transparent`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderLeft === '20px solid transparent') ``` -Your `.cat-right-inner-ear` selector should have a `border-right` property set to `20px solid transparent`. +O seletor `.cat-right-inner-ear` deve ter a propriedade `border-right` definida como `20px solid transparent`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderRight === '20px solid transparent') ``` -Your `.cat-right-inner-ear` selector should have a `border-bottom` property set to `40px solid #3b3b4f`. +O seletor `.cat-right-inner-ear` deve ter a propriedade `border-bottom` definida como `40px solid #3b3b4f`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottom === '40px solid rgb(59, 59, 79)') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md index 0b83c60510a..3c053d493e9 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md @@ -23,13 +23,13 @@ O seletor `.cat-right-inner-ear` deve ter a propriedade `border-bottom-left-radi assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottomLeftRadius === '40%') ``` -Your `.cat-right-inner-ear` selector should have a `border-top-left-radius` property set to `90px`. +O seletor `.cat-right-inner-ear` deve ter a propriedade `border-top-left-radius` definida como `90px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderTopLeftRadius === '90px') ``` -Your `.cat-right-inner-ear` selector should have a `border-top-right-radius` property set to `10px`. +O seletor `.cat-right-inner-ear` deve ter a propriedade `border-top-right-radius` definida como `10px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderTopRightRadius === '10px') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md index 4769500a609..4acfbca0de6 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md @@ -7,23 +7,23 @@ dashedName: step-41 # --description-- -Inside the `.cat-left-eye` element, create another `div` element with the class `cat-left-inner-eye`. +Dentro do elemento `.cat-left-eye`, crie outro elemento `div` com a classe `cat-left-inner-eye`. # --hints-- -You should not change the existing `div` element with the class `cat-left-eye`. +Você não deve alterar o elemento `div` existente com a classe `cat-left-eye`. ```js assert(document.querySelectorAll('div.cat-left-eye').length === 1); ``` -You should have a `div` element inside your `.cat-left-eye` element. +Você deve ter um elemento `div` dentro do elemento `.cat-left-eye`. ```js assert(document.querySelectorAll('.cat-left-eye div').length === 1); ``` -Your `div` element should have the class `cat-left-inner-eye`. +O elemento `div` deve ter a classe `cat-left-inner-eye`. ```js assert(document.querySelectorAll('.cat-left-eye div')[0]?.classList.contains('cat-left-inner-eye')); diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md index 7d11d21fb9d..31fa85fa72a 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md @@ -7,23 +7,23 @@ dashedName: step-44 # --description-- -Move the left eye into position with a `position` property of `absolute` a `top` of `54px`, and a `left` of `39px`. +Mova o olho esquerdo para o lugar com uma `position` `absolute`, um `top` de `54px` e um `left` de `39px`. # --hints-- -Your `.cat-left-eye` selector should have a `position` property set to `absolute`. +O seletor `.cat-left-eye` deve ter a propriedade `position` definida como `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.position === 'absolute') ``` -Your `.cat-left-eye` selector should have a `top` property set to `54px`. +O seletor `.cat-left-eye` deve ter a propriedade `top` definida como `54px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.top === '54px') ``` -Your `.cat-left-eye` selector should have a `left` property set to `39px`. +O seletor `.cat-left-eye` deve ter a propriedade `left` definida como `39px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.left === '39px') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md index 8dac64e7955..45e257410ca 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md @@ -7,17 +7,17 @@ dashedName: step-45 # --description-- -To make the left eye look like an eye, give it a border radius of `60%`. Also, using the transform property, rotate it at `25` degrees. +Para fazer com que o olho direito pareça um olho, dê a ele um raio de borda de `60%`. Além disso, usando a propriedade `transform`, gire-o em `-25` graus. # --hints-- -Your `.cat-left-eye` selector should have a `border-radius` property set to `60%`. +O seletor `.cat-left-eye` deve ter a propriedade `border-radius` definida como `60%`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.borderRadius === '60%') ``` -Your `.cat-left-eye` selector should have a `transform` property set to `rotate(25deg)`. +O seletor `.cat-left-eye` deve ter a propriedade `transform` definida como `rotate(25deg)`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.transform === 'rotate(25deg)') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md index 4490894281a..c2d3873b4d1 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md @@ -7,31 +7,31 @@ dashedName: step-46 # --description-- -Now you will work on the right eye by using the same approach. +Agora, você trabalhará no olho direito usando a mesma abordagem. -Using a class selector, give your `.cat-right-eye` element a width of `30px` and a height of `40px`. Also, give it a background color of `#000`. +Usando um seletor de classe, dê ao elemento `.cat-right-eye` uma largura de `30px` e uma altura de `40px`. Além disso, dê a ele uma background-color de `#000`. # --hints-- -You should have a `.cat-right-eye` selector. +Você deve ter um seletor `.cat-right-eye`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')) ``` -Your `.cat-right-eye` selector should have a `width` set to `30px`. +O seletor `.cat-right-eye` deve ter a propriedade `width` definida como `30px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.width === '30px') ``` -Your `.cat-right-eye` selector should have a `height` set to `40px`. +O seletor `.cat-right-eye` deve ter a propriedade `height` definida como `40px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.height === '40px') ``` -Your `.cat-right-eye` selector should have a `background-color` set to `#000`. +O seletor `.cat-right-eye` deve ter a propriedade `background-color` definida como `#000`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.backgroundColor === 'rgb(0, 0, 0)') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md index 095482dfc39..d85d0bc7763 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md @@ -7,31 +7,31 @@ dashedName: step-49 # --description-- -Those look like eyes, but you can still make them better. That's why you created two inner eyes `div` elements. +Se parecem com olhos, mas a aparência ainda pode melhorar. É por isso que você criou dois elementos `div` para a parte interna dos olhos. -Using a class selector, give your `.cat-left-inner-eye` element a width of `10px` and a height of `20px`. Also, give it a background color of `#fff`. +Usando um seletor de classe, dê ao elemento `.cat-left-inner-eye` uma largura de `10px` e uma altura de `20px`. Além disso, dê a ele uma background-color de `#fff`. # --hints-- -You should have a `.cat-left-inner-eye` selector. +Você deve ter um seletor `.cat-left-inner-eye`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')) ``` -Your `.cat-left-inner-eye` selector should have a `width` set to `10px`. +O seletor `.cat-left-inner-eye` deve ter a propriedade `width` definida como `10px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.width === '10px') ``` -Your `.cat-left-inner-eye` selector should have a `height` set to `20px`. +O seletor `.cat-left-inner-eye` deve ter a propriedade `height` definida como `20px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.height === '20px') ``` -Your `.cat-left-inner-eye` selector should have a `background-color` set to `#fff`. +O seletor `.cat-left-inner-eye` deve ter a propriedade `background-color` definida como `#fff`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.backgroundColor === 'rgb(255, 255, 255)') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md index 7d67168271a..10331d43673 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md @@ -7,35 +7,35 @@ dashedName: step-50 # --description-- -Move the left inner eye into position with a `position` property of `absolute`, a `top` of `8px`, and a `left` of `2px`. Also, give it a border radius of `60%` and rotate it at `10` degrees. +Mova a parte interna do olho esquerdo para o lugar com uma `position` `absolute`, um `top` de `8px` e um `left` de `2px`. Além disso, dê a ele um raio de borda de `60%` e gire em `10` graus. # --hints-- -Your `.cat-left-inner-eye` selector should have a `position` property set to `absolute`. +O seletor `.cat-left-inner-eye` deve ter a propriedade `position` definida como `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.position === 'absolute') ``` -Your `.cat-left-inner-eye` selector should have a `top` property set to `8px`. +O seletor `.cat-left-inner-eye` deve ter a propriedade `top` definida como `8px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.top === '8px') ``` -Your `.cat-left-inner-eye` selector should have a `left` property set to `2px`. +O seletor `.cat-left-inner-eye` deve ter a propriedade `left` definida como `2px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.left === '2px') ``` -Your `.cat-left-inner-eye` selector should have a `border-radius` property set to `60%`. +O seletor `.cat-left-inner-eye` deve ter a propriedade `border-radius` definida como `60%`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.borderRadius === '60%') ``` -Your `.cat-left-inner-eye` selector should have a `transform` property set to `10deg`. +O seletor `.cat-left-inner-eye` deve ter a propriedade `transform` definida como `10deg`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.transform === 'rotate(10deg)') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md index 05854fc11a7..f35aaf5b3b1 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md @@ -7,29 +7,29 @@ dashedName: step-51 # --description-- -Using a class selector, give your `.cat-right-inner-eye` element a width of `10px` and a height of `20px`. Also, give it a background color of `#fff`. +Usando um seletor de classe, dê ao elemento `.cat-right-inner-eye` uma largura de `10px` e uma altura de `20px`. Além disso, dê a ele uma background-color de `#fff`. # --hints-- -You should have a `.cat-right-inner-eye` selector. +Você deve ter um seletor `.cat-right-inner-eye`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')) ``` -Your `.cat-right-inner-eye` selector should have a `width` set to `10px`. +O seletor `.cat-right-inner-eye` deve ter a propriedade `width` definida como `10px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.width === '10px') ``` -Your `.cat-right-inner-eye` selector should have a `height` set to `20px`. +O seletor `.cat-right-inner-eye` deve ter a propriedade `height` definida como `20px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.height === '20px') ``` -Your `.cat-right-inner-eye` selector should have a `background-color` set to `#fff`. +O seletor `.cat-right-inner-eye` deve ter a propriedade `background-color` definida como `#fff`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.backgroundColor === 'rgb(255, 255, 255)') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md index 220ef75c063..9108ff51659 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md @@ -7,35 +7,35 @@ dashedName: step-52 # --description-- -Move the right inner eye into position with a `position` of `absolute`, a `top` of `8px`, and a `left` of `18px`. Also, give it a border radius of `60%` and rotate it at `-5deg`. +Mova o olho direito interno para o lugar com uma `position` `absolute`, um `top` de `8px` e um `left` de `18px`. Além disso, dê a ele um raio de borda de `60%` e gire em `-5deg`. # --hints-- -Your `.cat-right-inner-eye` selector should have a `position` property set to `absolute`. +O seletor `.cat-right-inner-eye` deve ter a propriedade `position` definida como `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.position === 'absolute') ``` -Your `.cat-right-inner-eye` selector should have a `top` property set to `8px`. +O seletor `.cat-right-inner-eye` deve ter a propriedade `top` definida como `8px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.top === '8px') ``` -Your `.cat-right-inner-eye` selector should have a `left` property set to `18px`. +O seletor `.cat-right-inner-eye` deve ter a propriedade `left` definida como `18px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.left === '18px') ``` -Your `.cat-right-inner-eye` selector should have a `border-radius` property set to `60%`. +O seletor `.cat-right-inner-eye` deve ter a propriedade `border-radius` definida como `60%`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.borderRadius === '60%') ``` -Your `.cat-right-inner-eye` selector should have a `transform` property set to `-5deg`. +O seletor `.cat-right-inner-eye` deve ter a propriedade `transform` definida como `-5deg`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.transform === 'rotate(-5deg)') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md index 9bb10338880..1afce506848 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md @@ -7,7 +7,7 @@ dashedName: step-53 # --description-- -It's time to work on the nose. In your HTML, create a `div` element with the class `cat-nose`. +É hora de trabalhar no nariz. No HTML, crie um elemento `div` com a classe `cat-nose`. # --hints-- @@ -17,7 +17,7 @@ Você deve criar um elemento `div`. assert(document.querySelectorAll('div').length === 12) ``` -Your `div` element should have the class `cat-nose`. +O elemento `div` deve ter a classe `cat-nose`. ```js assert(document.querySelectorAll('div')[11].classList.contains('cat-nose')) diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md index e89458e7446..4efa2d30e00 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md @@ -7,29 +7,29 @@ dashedName: step-54 # --description-- -Using a class selector, give your `.cat-nose` element a left and right border of `15px solid transparent` each. Also give it a bottom border of `20px solid #442c2c`. +Usando um seletor de classe, dê ao elemento `.cat-nose` uma borda esquerda e uma borda direita de `15px solid transparent`. Além disso, defina a borda inferior como `20px solid #442c2c`. # --hints-- -You should have a `.cat-nose` selector. +Você deve ter um seletor `.cat-nose`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')) ``` -Your `.cat-nose` selector should have a `border-left` property set to `15px solid transparent`. +O seletor `.cat-nose` deve ter a propriedade `border-left` definida como `15px solid transparent`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderLeft === '15px solid transparent') ``` -Your `.cat-nose` selector should have a `border-right` property set to `15px solid transparent`. +O seletor `.cat-nose` deve ter a propriedade `border-right` definida como `15px solid transparent`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderRight === '15px solid transparent') ``` -Your `.cat-nose` selector should have a `border-bottom` property set to `20px solid #442c2c`. +O seletor `.cat-nose` deve ter a propriedade `border-bottom` definida como `20px solid #442c2c`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottom === '20px solid rgb(68, 44, 44)') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md index 876692507a8..7301793b0d0 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md @@ -7,23 +7,23 @@ dashedName: step-55 # --description-- -Move the nose into position with a `position` property of `absolute`, a `top` of `108px`, and a `left` of `85px`. +Mova o nariz para o lugar com uma `position` `absolute`, um `top` de `108px` e um `left` de `85px`. # --hints-- -Your `.cat-nose` selector should have a `position` property set to `absolute`. +O seletor `.cat-nose` deve ter a propriedade `position` definida para `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.position === 'absolute') ``` -Your `.cat-nose` selector should have a `top` property set to `108px`. +O seletor `.cat-nose` deve ter a propriedade `top` definida como `108px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.top === '108px') ``` -Your `.cat-nose` selector should have a `left` property set to `85px`. +O seletor `.cat-nose` deve ter a propriedade `left` definida como `85px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.left === '85px') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md index 33c575e159d..ab9a2765364 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md @@ -7,35 +7,35 @@ dashedName: step-56 # --description-- -Remove the sharp edges of the nose with border radius of `50%` each on the top-left, bottom-right, and bottom-left corners. Also, rotate it at 180 degrees. +Remova as bordas afiadas do nariz com o raio da borda de `50%` nos cantos superior esquerda, inferior direito e inferior esquerdo. Além disso, gire a 180 graus. # --hints-- -Your `.cat-nose` selector should have a `border-top-left-radius` property set to `50%`. +O seletor `.cat-nose` deve ter a propriedade `border-top-left-radius` definida como `50%`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderTopLeftRadius === '50%') ``` -Your `.cat-nose` selector should have a `border-bottom-right-radius` property set to `50%`. +O seletor `.cat-nose` deve ter a propriedade `border-bottom-right-radius` definida como `50%`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottomRightRadius === '50%') ``` -Your `.cat-nose` selector should have a `border-bottom-left-radius` property set to `50%`. +O seletor `.cat-nose` deve ter a propriedade `border-bottom-left-radius` definida como `50%`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottomLeftRadius === '50%') ``` -Your `.cat-nose` selector should have a `transform` property set to `rotate(180deg)`. +O seletor `.cat-nose` deve ter a propriedade `transform` definida como `rotate(180deg)`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.transform === 'rotate(180deg)') ``` -You should not have a `border-top-right-radius` property in your `.cat-nose` selector. +Você não deve ter uma propriedade `border-top-right-radius` no seletor `.cat-nose`. ```js assert(/border-top-right-radius:\s*\d+%;/.test(code) === false); diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md index d4c8241aeab..67c6b65f1d7 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md @@ -7,19 +7,19 @@ dashedName: step-57 # --description-- -Now you will start working on the mouth. There will be a right line and left line for the mouth. +Agora, você vai começar a trabalhar na boca. Haverá uma linha na direita e uma linha na esquerda para a boca. -Create a `div` element with the class `cat-mouth`. +Crie um elemento `div` com a classe `cat-mouth`. # --hints-- -You should create a `div` element. +Você deve criar um elemento `div`. ```js assert(document.querySelectorAll('div').length === 13) ``` -Your `div` element should have the class `cat-mouth` +O elemento `div` deve ter a classe `cat-mouth` ```js assert(document.querySelectorAll('div')[12].classList.contains('cat-mouth')) diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md index c625d56506b..ddcd3721909 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md @@ -7,11 +7,11 @@ dashedName: step-62 # --description-- -Using the `transform` property, rotate the left mouth line at `170` degrees. +Usando a propriedade `transform`, gire a linha esquerda da boca em `170` graus. # --hints-- -Your `.cat-mouth-line-left` property should have a `transform` property set to `rotate(170deg)`. +O seletor `.cat-mouth-line-left` deve ter a propriedade `transform` definida como `rotate(170deg)`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.transform === 'rotate(170deg)') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md index 32995a8525a..5741766db7d 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md @@ -7,29 +7,29 @@ dashedName: step-63 # --description-- -Access your `.cat-mouth-line-right` element with a class selector, then move it into the right position with a `position` of `absolute`, a `top` of `88px` and a `left` of `91px`. +Acesse o elemento `.cat-mouth-line-right` com um seletor de classe. Em seguida, coloque-o no lugar com uma `position` `absolute`, um `top` de `88px` e um `left` de `91px`. # --hints-- -You should have a `.cat-mouth-line-right` selector. +Você deve ter um seletor `.cat-mouth-line-right`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')) ``` -Your `.cat-mouth-line-right` selector should have a `position` property set to `absolute`. +O seletor `.cat-mouth-line-right` deve ter a propriedade `position` definida como `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.position === 'absolute') ``` -Your `.cat-mouth-line-right` selector should have a `top` property set to `88px`. +O seletor `.cat-mouth-line-right` deve ter a propriedade `top` definida como `88px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.top === '88px') ``` -Your `.cat-mouth-line-right` selector should have a `left` property set to `91px`. +O seletor `.cat-mouth-line-right` deve ter a propriedade `left` definida como `91px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.left === '91px') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md index d471abec9a1..fc48fa46e11 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md @@ -7,29 +7,29 @@ dashedName: step-66 # --description-- -Inside the `.cat-whiskers` element, create two `div` elements with the class `cat-whiskers-left` and `cat-whiskers-right`. +Dentro do elemento `.cat-whiskers`, crie dois elementos `div` com a classe `cat-whiskers-left` e `cat-whiskers-right`, respectivamente. # --hints-- -You should not change the existing `div` element with the class `cat-whiskers` +Você não deve alterar o elemento `div` existente com a classe `cat-whiskers` ```js assert(document.querySelectorAll('div.cat-whiskers').length === 1) ``` -You should have two `div` elements inside the `.cat-whiskers` element. +Você deve ter dois elementos `div` dentro do elemento `.cat-whiskers`. ```js assert(document.querySelectorAll('.cat-whiskers div').length === 2) ``` -The first `div` element inside the `.cat-whiskers` element should have the class `cat-whiskers-left`. +O primeiro elemento `div` dentro do elemento `.cat-whiskers` deve ter a classe `cat-whiskers-left`. ```js assert(document.querySelectorAll('.cat-whiskers div')[0].classList.contains('cat-whiskers-left')) ``` -The second `div` element inside the `.cat-whiskers` element should have the class `cat-whiskers-right`. +O segundo elemento `div` dentro do elemento `.cat-whiskers` deve ter a classe `cat-whiskers-right`. ```js assert(document.querySelectorAll('.cat-whiskers div')[1].classList.contains('cat-whiskers-right')) diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md index 3d78357c999..a8470d7f6b5 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md @@ -7,29 +7,29 @@ dashedName: step-69 # --description-- -Use a descendant selector to target the three `div` elements inside your `.cat-whiskers-left` element. Give it a `width` of `40px`, a `height` of `1px`, and a `background-color` of `#000`. +Use o seletor de descendente para apontar para os três elementos `div` dentro do elemento `.cat-whiskers-left`. Dê ao seletor uma `width` de `40px`, uma `height` de `1px` e uma `background-color` de `#000`. # --hints-- -You should have a `.cat-whiskers-left div` selector. +Você deve ter um seletor `.cat-whiskers-left div`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')) ``` -Your `.cat-whiskers-left div` selector should have a `width` set to `40px`. +O seletor `.cat-whiskers-left div` deve ter a propriedade `width` definida como `40px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.width === '40px') ``` -Your `.cat-whiskers-left div` selector should have a `height` set to `1px`. +O seletor `.cat-whiskers-left div` deve ter a propriedade `height` definida como `1px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.height === '1px') ``` -Your `.cat-whiskers-left div` selector should have a `background-color` set to `#000`. +O seletor `.cat-whiskers-left div` deve ter a propriedade `background-color` definida como `#000`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.backgroundColor === 'rgb(0, 0, 0)') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md index a083ab6eca7..dcb08aa0663 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md @@ -7,29 +7,29 @@ dashedName: step-71 # --description-- -Using a class selector, move the `.cat-whisker-left-top` element into place with a `position` of `absolute`, a `top` of `120px`, and a `left` of `52px`. +Usando um seletor de classe, mova `.cat-whisker-left-top` para o lugar certo com uma `position` `absolute`, um `top` de `120px` e um `left` de `52px`. # --hints-- -You should have a `.cat-whisker-left-top` selector. +Você deve ter um seletor `.cat-whisker-left-top`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')) ``` -Your `.cat-whisker-left-top` selector should have a `position` property set to `absolute`. +O seletor `.cat-whisker-left-top` deve ter a propriedade `position` definida como `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.position === 'absolute') ``` -Your `.cat-whisker-left-top` selector should have a `top` property set to `120px`. +O seletor `.cat-whisker-left-top` deve ter a propriedade `top` definida como `120px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.top === '120px') ``` -Your `.cat-whisker-left-top` selector should have a `left` property set to `52px`. +O seletor `.cat-whisker-left-top` deve ter a propriedade `left` definida como `52px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.left === '52px') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md index 58d0efeb53b..1f7a05a6dcb 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md @@ -7,11 +7,11 @@ dashedName: step-72 # --description-- -Rotate the left top whisker at `10` degrees. +Gire o bigode de cima da direita em `10` graus. # --hints-- -Your `.cat-whisker-left-top` selector should have a `transform` property set to `rotate(10deg)`. +O seletor `.cat-whisker-left-top` deve ter a propriedade `transform` definida como `rotate(10deg)`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.transform === 'rotate(10deg)') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md index 4367526308b..bb6b13121b0 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md @@ -7,29 +7,29 @@ dashedName: step-73 # --description-- -Use a class selector to target the `.cat-whisker-left-middle` element. Then move it into place with a `position` property set to `absolute`, a `top` of `127px`, and a `left` of `52px`. +Use um seletor de classe para apontar para o elemento `.cat-whisker-left-middle`. Então, mova-o para o lugar com uma propriedade `position` definida como `absolute`, um `top` de `127px` e um `left` de `52px`. # --hints-- -You should have a `.cat-whisker-left-middle` selector. +Você deve ter um seletor `.cat-whisker-left-middle`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')) ``` -Your `.cat-whisker-left-middle` selector should have a `position` property set to `absolute`. +O seletor `.cat-whisker-left-middle` deve ter a propriedade `position` definida como `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.position === 'absolute') ``` -Your `.cat-whisker-left-middle` selector should have a `top` property set to `127px`. +O seletor `.cat-whisker-left-middle` deve ter a propriedade `top` definida como `127px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.top === '127px') ``` -Your `.cat-whisker-left-middle` selector should have a `left` property set to `52px`. +O seletor `.cat-whisker-left-middle` deve ter a propriedade `left` definida como `52px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.left === '52px') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md index a02b887f6a5..a74d4b4cacd 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md @@ -7,11 +7,11 @@ dashedName: step-76 # --description-- -Rotate the left bottom whisker at `-3` degrees. +Gire o bigode de baixo da direita em `-3` graus. # --hints-- -Your `.cat-whisker-left-bottom` selector should have a `transform` property set to `rotate(-3deg)`. +O seletor `.cat-whisker-left-bottom` deve ter a propriedade `transform` definida como `rotate(-3deg)`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.transform === 'rotate(-3deg)') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md index 05c4de563e6..5bd2e56c9ff 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md @@ -7,11 +7,11 @@ dashedName: step-78 # --description-- -Rotate the top-right whisker at -10 degrees. +Gire o bigode de cima à direita em -10 graus. # --hints-- -Your `.cat-whisker-right-top` selector should have a `transform` property set to `rotate(-10deg)`. +O seletor `.cat-whisker-right-top` deve ter a propriedade `transform` definida como `rotate(-10deg)`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.transform === 'rotate(-10deg)') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md index 612b7be2270..231879a2db1 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md @@ -7,13 +7,13 @@ dashedName: step-82 # --description-- -Rotate the bottom-right whisker at 3 degrees. +Gire o bigode de baixo à direita em 3 graus. -With this final step, your cat painting is now complete. +Com esse último passo, a pintura do gato está completa. # --hints-- -Your `.cat-whisker-right-bottom` selector should have a `transform` property set to `rotate(3deg)`. +O seletor `.cat-whisker-right-bottom` deve ter a propriedade `transform` definida como `rotate(3deg)`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.transform === 'rotate(3deg)') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md index f4f7c79f524..04d5db1fac2 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md @@ -7,27 +7,27 @@ dashedName: step-10 # --description-- -You could see that nothing happens. The `.cat-head` element did not move despite setting a `top` and `left` of `100px` each. But that's not the case with `relative` positioning. +Podemos ver que nada acontece. O elemento `.cat-head` não se moveu apesar de definirmos um `top` e um `left` de `100px`. Isso, porém, não ocorre com o posicionamento `relative`. -When you use the `relative` value, the element is still positioned according to the normal flow of the document, but the `top`, `left`, `bottom`, and `right` values become active. +Quando você usa o valor `relative`, o elemento ainda está posicionado de acordo com o fluxo normal do documento, mas os valores de `top`, `left`, `bottom` e `right` tornam-se ativos. -Instead of `static`, give your `.cat-head` a position of `relative`, and leave both `top` and `left` properties as they are. +Em vez de `static`, dê a `.cat-head` uma propriedade `position` com o valor `relative` e deixe as propriedades `top` e `left` como estão. # --hints-- -Your `.cat-head` selector should have a `position` property set to `relative`. Make sure you add a semi-colon. +O seletor `.cat-head` deve ter a propriedade `position` definida como `relative`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'relative') ``` -Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semi-colon. +O seletor `.cat-head` deve ter a propriedade `top` definida como `100px`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') ``` -Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semi-colon. +O seletor `.cat-head` deve ter a propriedade `left` definida como `100px`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md index ff054ecf035..48df719a4bd 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md @@ -7,28 +7,28 @@ dashedName: step-11 # --description-- -The next position property is `absolute`. When you use the `absolute` value for your `position` property, the element is taken out of the normal flow of the document, and then its position is determined by the `top`, `right`, `bottom`, and `left` properties. +A propriedade `position` seguinte é a `absolute`. Quando você usa o valor `absolute` para a propriedade `position`, o elemento é retirado do fluxo normal do documento. Então, a posição é determinada pelas propriedades `top`, `right`, `bottom` e `left`. -Set the position property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any pixel value. +Defina a propriedade `position` do elemento `.cat-head` como `absolute`. Em seguida, defina as propriedades `top` e `left` com qualquer valor em pixels. # --hints-- -Your `.cat-head` selector should have a `position` property set to `absolute`. Make sure you add a semi-colon. +O seletor `.cat-head` deve ter a propriedade `position` definida como `absolute`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'absolute') ``` -Your `.cat-head` selector should have a `top` property set to any number in `px`. Make sure you add a semi-colon. +O seletor `.cat-head` deve ter a propriedade `top` definida como um número qualquer em `px`. Não se esqueça de adicionar um ponto e vírgula. ```js // assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '300px') assert.match(code, /top:\s*\d{1,4}px;/) ``` -Your `.cat-head` selector should have a `left` property set to any number in `px`. Make sure you add a semi-colon. +O seletor `.cat-head` deve ter a propriedade `left` definida como um número qualquer em `px`. Não se esqueça de adicionar um ponto e vírgula. ```js // assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '400px') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md index 8dd0dec9282..1878f34f4da 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md @@ -7,47 +7,47 @@ dashedName: step-13 # --description-- -Use a class selector to give your `.box` element a width of `200px`, a height of `600px`, and a background color of `#000`. Also, give it a `position` of `absolute`, a `top` of `800px` and a `left` of `650px`. +Use um seletor de classe para dar ao elemento `.box` uma largura de `200px`, uma altura de `600px` e uma cor de fundo de `#000`. Dê a ele, também, uma `position` `absolute`, um valor de `top` de `800px` e um valor de `left` de `650px`. # --hints-- -You should have a `.box` selector. +Você deve ter um seletor `.box`. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.box')) ``` -Your `.box` selector should have a `width` property set to `200px`. +O seletor `.box` deve ter a propriedade `width` definida como `200px`. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.width === '200px') ``` -Your `.box` selector should have a `height` property set to `600px`. +O seletor `.box` deve ter a propriedade `height` definida como `600px`. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.height === '600px') ``` -Your `.box` selector should have a `background-color` property set to `#000`. +O seletor `.box` deve ter a propriedade `background-color` definida como `#000`. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.backgroundColor === 'rgb(0, 0, 0)') ``` -Your `.box` selector should have a `position` property set to `absolute`. +O seletor `.box` deve ter a propriedade `position` definida como `absolute`. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.position === 'absolute') ``` -Your `.box` selector should have a `left` property set to `650px`. +O seletor `.box` deve ter a propriedade `left` definida como `650px`. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.left === '650px') ``` -Your `.box` selector should have a `top` property set to `800px`. +O seletor `.box` deve ter a propriedade `top` definida como `800px`. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.top === '800px') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md index 5ff19f3e502..b7cd8b9a379 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md @@ -7,25 +7,25 @@ dashedName: step-14 # --description-- -Now replace the `position` property value of your `.cat-head` with `fixed`. Leave both `top` and `left` as they are. +Agora, substitua o valor da propriedade `position` em `.cat-head` por `fixed`. Deixe `top` e `left` como estão. -After that, scroll up and down to see how the `fixed` value works. +Depois disso, role para cima e para baixo para ver como o valor `fixed` funciona. # --hints-- -Your `.cat-head` selector should have a `position` property set to `fixed`. Make sure you add a semi-colon. +O seletor `.cat-head` deve ter a propriedade `position` definida como `fixed`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'fixed') ``` -Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semi-colon. +O seletor `.cat-head` deve ter a propriedade `top` definida como `100px`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px') ``` -Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semi-colon. +O seletor `.cat-head` deve ter a propriedade `left` definida como `100px`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md index fb1d358d3fd..510542ea8fa 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md @@ -7,27 +7,27 @@ dashedName: step-15 # --description-- -The last position property value is `sticky`. `sticky` positioning is a hybrid of `relative` and `fixed` positioning. It allows an element to **stick** to a specific position within its containing element or viewport, based on the scroll position. +O valor da última propriedade `position` é `sticky`. O posicionamento `sticky` é um híbrido dos posicionamentos `relative` e `fixed`. Ele permite que um elemento "**se grude**" a uma posição específica dentro do elemento que o contém ou da viewport, com base na posição de rolagem. -Change the value of the `position` property of `.cat-head` to `sticky`, set `top` to `0`, then remove `left` and its value. +Altere o valor da propriedade `position` de `.cat-head` para `sticky`, defina `top` como `0` e remova `left` e seu valor. -**Note**: To see how `sticky` works, you have to place a couple of texts before and after your `.cat-head` `div` element. If you scroll up after that, you'll see that the `.cat-head` gets stuck to the top and remains there. +**Observação**: para ver como `sticky` funciona, você tem de colocar alguns textos antes e depois do elemento `div` de `.cat-head`. Se você rolar para cima depois disso, verá que `.cat-head` fica preso na parte superior e permanece lá. # --hints-- -Your `.cat-head` selector should have a `position` property set to `sticky`. Make sure you add a semi-colon. +O seletor `.cat-head` deve ter a propriedade `position` definida como `sticky`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'sticky') ``` -Your `.cat-head` selector should have a `top` property set to `0`. Make sure you add a semi-colon. +O seletor `.cat-head` deve ter a propriedade `top` definida como `0`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '0px') ``` -You should not have the `left` property and its value in your code. +Você não deve ter a propriedade `left` e seu valor no código. ```js assert.notMatch(code, /left:\s*100px;?/) diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md index 81a7524e394..0b54fa0534c 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md @@ -7,43 +7,43 @@ dashedName: step-16 # --description-- -You should now center the cat head. +Você, agora, deve centralizar a cabeça do gato. -Give the `.cat-head` element a position property set to `absolute`. Set a value of `0` for the `right`, `left`, `top`, `bottom` properties, then set its `margin` property on all sides to `auto`. That's one way to center an element vertically and horizontally using CSS positioning. +Dê ao elemento `.cat-head` uma propriedade `position` definida como `absolute`. Defina um valor de `0` para as propriedades `right`, `left`, `top` e `bottom`. Em seguida, defina a propriedade `margin` de todos os lados como `auto`. Essa é uma maneira de centralizar um elemento verticalmente e horizontalmente usando posicionamento em CSS. # --hints-- -Your `.cat-head` selector should have a `position` property set to `absolute`. Make sure you add a semi-colon. +O seletor `.cat-head` deve ter a propriedade `position` definida como `absolute`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'absolute') ``` -Your `.cat-head` selector should have a `top` property set to `0`. Make sure you add a semi-colon. +O seletor `.cat-head` deve ter a propriedade `top` definida como `0`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '0px') ``` -Your `.cat-head` selector should have a `left` property set to `0`. Make sure you add a semi-colon. +O seletor `.cat-head` deve ter a propriedade `left` definida como `0`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '0px') ``` -Your `.cat-head` selector should have a `right` property set to `0`. Make sure you add a semi-colon. +O seletor `.cat-head` deve ter a propriedade `right` definida como `0`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.right === '0px') ``` -Your `.cat-head` selector should have a `bottom` property set to `0`. Make sure you add a semi-colon. +O seletor `.cat-head` deve ter a propriedade `bottom` definida como `0`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.bottom === '0px') ``` -Your `.cat-head` selector should have a `margin` property set to `auto`. Make sure you add a semi-colon. +O seletor `.cat-head` deve ter a propriedade `margin` definida como `auto`. Não se esqueça de adicionar um ponto e vírgula. ```js assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.margin === 'auto') diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md index 09a91a9ac34..3c2a3ff3860 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md @@ -7,18 +7,18 @@ dashedName: step-4 # --description-- -Use the universal selector to add `box-sizing: border-box;` to your CSS. This ensures elements include padding and border in their specified width and height. +Use o seletor universal para adicionar `box-sizing: border-box;` ao CSS. Isso garante que os elementos incluirão preenchimento e borda na largura e altura especificadas. # --hints-- -You should have the universal selector (`*`). +Você deve ter o seletor universal (`*`). ```js // assert.match(code, /\*\s*{\s*.*\s*}/) assert(new __helpers.CSSHelp(document).getStyle('*')) ``` -Your universal selector should have a `box-sizing` property set to `border-box`. +O seletor universal deve ter a propriedade `box-sizing` definida como `border-box`. ```js // assert.match(code, /\*\s*{\s*box-sizing:\s*border-box;?\s*}/) diff --git a/curriculum/challenges/swahili/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md b/curriculum/challenges/swahili/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md index 4d932b7a6ea..a34a8d06bbc 100644 --- a/curriculum/challenges/swahili/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md +++ b/curriculum/challenges/swahili/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md @@ -8,9 +8,9 @@ dashedName: seek-and-destroy # --description-- -You will be provided with an initial array (the first argument in the `destroyer` function), followed by one or more arguments. Remove all elements from the initial array that are of the same value as these arguments. +You will be provided with an initial array as the first argument to the `destroyer` function, followed by one or more arguments. Remove all elements from the initial array that are of the same value as these arguments. -**Note:** You have to use the `arguments` object. +The function must accept an indeterminate number of arguments, also known as a variadic function. You can access the additional arguments by adding a rest parameter to the function definition or using the `arguments` object. # --hints-- diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md index 33568df74d6..6d612a773be 100644 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md +++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md @@ -1,30 +1,47 @@ --- id: 615380dff67172357fcf0425 -title: Hatua ya 7 +title: Step 11 challengeType: 0 -dashedName: step-7 +dashedName: step-11 --- # --description-- -Rekebisha muundo wa kisanduku chako kwa kuunda kichaguzi cha `*` na kuweka sifa ya `box-sizing` kuwa `border-box` kama thamani. +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-- -Unapaswa kuwa na kichaguz cha `*`. +You should have a `.gallery img` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img')); ``` -Kichaguzi chako cha `*` kinafaa kuwa na sifa ya `box-sizing` yenye `border-box` kama thamani. +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/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md index ef120affeb2..9c56de3a432 100644 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md +++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md @@ -1,43 +1,63 @@ --- id: 6153893900438b4643590367 -title: Hatua ya 9 +title: Step 13 challengeType: 0 -dashedName: step-9 +dashedName: step-13 --- # --description-- -Ondoa ukingo kwenye kipengele chako cha `body`, weka `font-family` kuwa `sans-serif` na ukipe `background-color` ya `#f5f6f7` kama thamani. +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-- -Unapaswa kutumia kichaguzi cha `body`. +You should have a `.header` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('body')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); ``` -Kichaguzi chako cha `body` kinafaa kuwa na sifa ya `margin` yenye thamani ya `0`. +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'); ``` -Kichaguzi chako cha `body` kinafaa kuwa na sifa ya `font-family` yenye thamani ya `sans-serif`. +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'); ``` -Kichaguzi chako cha `body` kinafaa kuwa na sifa ya `background-color` yenye `#f5f6f7` kama thamani yake. +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/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md index 3457b08dbb9..ce85850adb5 100644 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md +++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md @@ -1,62 +1,32 @@ --- id: 6153897c27f6334716ee5abe -title: Hatua ya 10 +title: Step 14 challengeType: 0 -dashedName: step-10 +dashedName: step-14 --- # --description-- -Pangilia maandishi yako ya `.header` katikati. Fanya maandishi kuwa herufi kubwa kwa kutumia kipengele cha `text-transform` chenye `uppercase` kama thamani. +Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container. -Ipe padding ya `32px` pande zote. Weka mandhari ya nyuma kuwa `#0a0a23` na maandishi kuwa `#fff` kama thamani za rangi. +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. -Ongeza `border-bottom` yenye thamani ya `4px solid #fdb347`. # --hints-- -Unapaswa kuwa na kichaguzi cha `.header`. +You should have a `.gallery` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')); ``` -Kichaguzi chako cha `.header` kinafaa kuwa na sifa ya `text-align` yenye `center` kama thamani yake. +Your `.gallery` selector should have a `display` property set to `flex` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center'); -``` - -Kichaguzi chako cha `.header` kinafaa kuwa na sifa ya `text-transform` yenye `uppercase` kama thamani yake. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform === 'uppercase'); -``` - -Kichaguzi chako cha `.header` kinafaa kuwa na sifa ya `padding` yenye thamani ya `32px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px'); -``` - -Kichaguzi chako cha `.header` kinafaa kuwa na sifa ya `background-color` yenye `#0a0a23` kama thamani yake. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(10, 10, 35)'); -``` - -Kichaguzi chako cha `.header` kinafaa kuwa na sifa ya `color` yenye `#fff` thamani yake. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.color === 'rgb(255, 255, 255)'); -``` - -Kichaguzi chako cha `.header` kinafaa kuwa na sifa ya `border-bottom` yenye `4px solid #fdb347` kama thamani yake. - -```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/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md index c5032eb490e..5cfae690433 100644 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md +++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md @@ -1,8 +1,8 @@ --- id: 6153908a366afb4d57185c8d -title: Hatua ya 12 +title: Step 15 challengeType: 0 -dashedName: step-12 +dashedName: step-15 --- # --description-- diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md index 26605ab58aa..06c6561836b 100644 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md +++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md @@ -1,8 +1,8 @@ --- id: 615392916d83fa4f02f7e2cf -title: Hatua ya 13 +title: Step 16 challengeType: 0 -dashedName: step-13 +dashedName: step-16 --- # --description-- diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md index 91e1c9a8f2f..d45cce83914 100644 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md +++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md @@ -1,8 +1,8 @@ --- id: 6153938dce8b294ff8f5a4e9 -title: Hatua ya 14 +title: Step 17 challengeType: 0 -dashedName: step-14 +dashedName: step-17 --- # --description-- diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md index 145b44fbb2f..a6275fb566d 100644 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md +++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md @@ -1,8 +1,8 @@ --- id: 6153947986535e5117e60615 -title: Hatua ya 15 +title: Step 18 challengeType: 0 -dashedName: step-15 +dashedName: step-18 --- # --description-- diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md index 5c8b4c77907..33831ec489c 100644 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md +++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md @@ -1,8 +1,8 @@ --- id: 61539e07e7430b528fbffe21 -title: Hatua ya 16 +title: Step 19 challengeType: 0 -dashedName: step-16 +dashedName: step-19 --- # --description-- diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md index 4d024fe4d9d..4b35b2cbffd 100644 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md +++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md @@ -1,8 +1,8 @@ --- id: 61539f32a206bd53ec116465 -title: Hatua ya 17 +title: Step 20 challengeType: 0 -dashedName: step-17 +dashedName: step-20 --- # --description-- diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md index 4eed81cbd9f..8a562814e20 100644 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md +++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md @@ -1,8 +1,8 @@ --- id: 6153a04847abee57a3a406ac -title: Hatua ya 18 +title: Step 21 challengeType: 0 -dashedName: step-18 +dashedName: step-21 --- # --description-- diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md index dcd9fac9604..74c8eeed3c3 100644 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md +++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md @@ -1,8 +1,8 @@ --- id: 6153a3485f0b20591d26d2a1 -title: Hatua ya 19 +title: Step 22 challengeType: 0 -dashedName: step-19 +dashedName: step-22 --- # --description-- diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md index c8c3ec456bc..34f7c9faf32 100644 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md +++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md @@ -1,8 +1,8 @@ --- id: 6153a3952facd25a83fe8083 -title: Hatua ya 20 +title: Step 23 challengeType: 0 -dashedName: step-20 +dashedName: step-23 --- # --description-- diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md index 2cffc6eb570..b26f1865806 100644 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md +++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md @@ -1,8 +1,8 @@ --- id: 6153a3ebb4f7f05b8401b716 -title: Hatua ya 21 +title: Step 24 challengeType: 0 -dashedName: step-21 +dashedName: step-24 --- # --description-- diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md index 0009ae2290c..a2756de469f 100644 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md +++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md @@ -1,40 +1,45 @@ --- id: 615f171d05def3218035dc85 -title: Hatua ya 8 +title: Step 12 challengeType: 0 -dashedName: step-8 +dashedName: step-12 --- # --description-- -Picha zako ni kubwa mno. Unda kichaguzi cha `.gallery img` ili kuzilenga. Zipe zote `width` ya `100%` na `max-width` ya `350px` ili zipungue inavyohitajika lakini zisiwe kubwa sana. +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. -Pia, weka sifa ya `height` kuwa `300px` ili kuweka picha zako ziwe na ukubwa sawa. # --hints-- -Unapaswa kuwa na kichaguzi cha `.gallery img`. +You should have a `body` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img')); +assert.exists(new __helpers.CSSHelp(document).getStyle('body')); ``` -Kichaguzi chako cha `.gallery img` kinafaa kuwa na sifa ya `width` iliyowekwa kuwa `100%`. +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'); ``` -Kichaguzi chako cha `.gallery img` kinafaa kuwa na sifa ya `max-width` iliyowekwa kuwa `350px`. +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'); ``` -Kichaguzi chako cha `.gallery img` kinafaa kuwa na sifa ya `height` iliyowekwa kuwa `300px`. +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/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md b/curriculum/challenges/swahili/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/swahili/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/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md b/curriculum/challenges/swahili/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/swahili/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/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md b/curriculum/challenges/swahili/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/swahili/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/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md b/curriculum/challenges/swahili/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/swahili/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/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md index 41db2b8773e..3408e4a4e07 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md @@ -8,9 +8,9 @@ dashedName: seek-and-destroy # --description-- -Вам буде надано початковий масив (перший аргумент у функції `destroyer`), який супроводжується одним або більше аргументами. Видаліть всі елементи з початкового масиву, які мають таке ж значення, як ці аргументи. +You will be provided with an initial array as the first argument to the `destroyer` function, followed by one or more arguments. Видаліть всі елементи з початкового масиву, які мають таке ж значення, як ці аргументи. -**Примітка:** потрібно використати об’єкт `arguments`. +The function must accept an indeterminate number of arguments, also known as a variadic function. You can access the additional arguments by adding a rest parameter to the function definition or using the `arguments` object. # --hints-- diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md index 7f8e98f50dd..6d612a773be 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md @@ -1,30 +1,47 @@ --- id: 615380dff67172357fcf0425 -title: Крок 7 +title: Step 11 challengeType: 0 -dashedName: step-7 +dashedName: step-11 --- # --description-- -Нормалізуйте свою блокову модель, створивши селектор `*` та встановивши властивість `box-sizing` на `border-box`. +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 `.gallery img` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img')); ``` -Ваш селектор `*` повинен мати властивість `box-sizing` зі значенням `border-box`. +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/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md index a67a07590aa..9c56de3a432 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md @@ -1,43 +1,63 @@ --- id: 6153893900438b4643590367 -title: Крок 9 +title: Step 13 challengeType: 0 -dashedName: step-9 +dashedName: step-13 --- # --description-- -Видаліть поле зі свого елемента `body`, встановіть `font-family` на `sans-serif` та надайте `background-color` зі значенням `#f5f6f7`. +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-- -Ви повинні мати селектор `body`. +You should have a `.header` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('body')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); ``` -Ваш селектор `body` повинен мати властивість `margin` зі значенням `0`. +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'); ``` -Ваш селектор `body` повинен мати властивість `font-family` зі значенням `sans-serif`. +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'); ``` -Ваш селектор `body` повинен мати властивість `background-color` зі значенням `#f5f6f7`. +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/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md index b967694088a..ce85850adb5 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md @@ -1,62 +1,32 @@ --- id: 6153897c27f6334716ee5abe -title: Крок 10 +title: Step 14 challengeType: 0 -dashedName: step-10 +dashedName: step-14 --- # --description-- -Вирівняйте текст `.header` за центром. Зробіть текст великими літерами, використовуючи властивість `text-transform` зі значенням `uppercase`. +Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container. -Надайте йому відступ зі значенням `32px` з всіх боків. Встановіть значення кольору фону на `#0a0a23` та тексту на `#fff`. +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. -Додайте `border-bottom` зі значенням `4px solid #fdb347`. # --hints-- -Ви повинні мати селектор `.header`. +You should have a `.gallery` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); +assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')); ``` -Ваш селектор `.header` повинен мати властивість `text-align` зі значенням `center`. +Your `.gallery` selector should have a `display` property set to `flex` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center'); -``` - -Ваш селектор `.header` повинен мати властивість `text-transform` зі значенням `uppercase`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform === 'uppercase'); -``` - -Ваш селектор `.header` повинен мати властивість `padding` зі значенням `32px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px'); -``` - -Ваш селектор `.header` повинен мати властивість `background-color` зі значенням `#0a0a23`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(10, 10, 35)'); -``` - -Ваш селектор `.header` повинен мати властивість `color` зі значенням `#fff`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.color === 'rgb(255, 255, 255)'); -``` - -Ваш селектор `.header` повинен мати властивість `border-bottom` зі значенням `4px solid #fdb347`. - -```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/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md index b5bb9a509e6..16e78deb91e 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md +++ b/curriculum/challenges/ukrainian/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 15 challengeType: 0 -dashedName: step-12 +dashedName: step-15 --- # --description-- diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md index 8d66a806142..65c0ff09167 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md +++ b/curriculum/challenges/ukrainian/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 16 challengeType: 0 -dashedName: step-13 +dashedName: step-16 --- # --description-- diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md index c9e2b46a680..bf4374b2bfe 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md +++ b/curriculum/challenges/ukrainian/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 17 challengeType: 0 -dashedName: step-14 +dashedName: step-17 --- # --description-- diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md index 0702193a319..199be5e6d11 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md +++ b/curriculum/challenges/ukrainian/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 18 challengeType: 0 -dashedName: step-15 +dashedName: step-18 --- # --description-- diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md index 184b3d9f43e..a1e2856d06a 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md +++ b/curriculum/challenges/ukrainian/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 19 challengeType: 0 -dashedName: step-16 +dashedName: step-19 --- # --description-- diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md index 6f275e61fec..66daa5833cf 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md +++ b/curriculum/challenges/ukrainian/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 20 challengeType: 0 -dashedName: step-17 +dashedName: step-20 --- # --description-- diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md index 40500692e12..f5bb44feb46 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md +++ b/curriculum/challenges/ukrainian/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 21 challengeType: 0 -dashedName: step-18 +dashedName: step-21 --- # --description-- diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md index b0f2b3698d1..4f08d5c99c8 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md +++ b/curriculum/challenges/ukrainian/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 22 challengeType: 0 -dashedName: step-19 +dashedName: step-22 --- # --description-- diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md index c89f7df4306..84dcf8bdeed 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md +++ b/curriculum/challenges/ukrainian/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 23 challengeType: 0 -dashedName: step-20 +dashedName: step-23 --- # --description-- diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md index d5b7f6e0aae..525b3f1ba5b 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md +++ b/curriculum/challenges/ukrainian/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 24 challengeType: 0 -dashedName: step-21 +dashedName: step-24 --- # --description-- diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md index 01fb7281b70..a2756de469f 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md @@ -1,40 +1,45 @@ --- id: 615f171d05def3218035dc85 -title: Крок 8 +title: Step 12 challengeType: 0 -dashedName: step-8 +dashedName: step-12 --- # --description-- -Ваші зображення занадто великі. Створіть селектор `.gallery img`, щоб націлити їх. Надайте їм `width` зі значенням `100%` та `max-width` зі значенням `350px`, щоб вони зменшувалися за потреби, але не ставали занадто великими. +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. -Також встановіть властивість `height` на `300px`, щоб зберегти однаковий розмір зображень. # --hints-- -Ви повинні мати селектор `.gallery img`. +You should have a `body` selector. ```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img')); +assert.exists(new __helpers.CSSHelp(document).getStyle('body')); ``` -Ваш селектор `.gallery img` повинен мати властивість `width` зі значенням `100%`. +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'); ``` -Ваш селектор `.gallery img` повинен мати властивість `max-width` зі значенням `350px`. +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'); ``` -Ваш селектор `.gallery img` повинен мати властивість `height` зі значенням `300px`. +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/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md b/curriculum/challenges/ukrainian/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/ukrainian/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/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md b/curriculum/challenges/ukrainian/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/ukrainian/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/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md b/curriculum/challenges/ukrainian/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/ukrainian/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/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md b/curriculum/challenges/ukrainian/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/ukrainian/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-- +```