From 04eaee51fc08b27576081519306819d467e62793 Mon Sep 17 00:00:00 2001 From: camperbot Date: Fri, 8 Jul 2022 04:31:58 -0700 Subject: [PATCH] chore(i18n,learn): processed translations (#46799) --- .../use-a-bezier-curve-to-move-a-graphic.md | 2 +- .../use-hex-code-for-specific-colors.md | 4 +- ...ents-using-the-justify-content-property.md | 6 +- .../assignment-with-a-returned-value.md | 2 +- .../basic-javascript/counting-cards.md | 34 + .../create-decimal-numbers-with-javascript.md | 2 +- ...nerate-random-fractions-with-javascript.md | 2 +- .../return-early-pattern-for-functions.md | 2 +- ...returning-boolean-values-from-functions.md | 2 +- .../use-recursion-to-create-a-countdown.md | 2 +- ...pare-scopes-of-the-var-and-let-keywords.md | 2 +- .../mutate-an-array-declared-with-const.md | 2 +- .../dna-pairing.md | 2 +- ...nge-text-inside-an-element-using-jquery.md | 2 +- .../react/introducing-inline-styles.md | 2 +- ...roptypes-to-define-the-props-you-expect.md | 2 +- .../redux/create-a-redux-store.md | 2 +- .../basic-javascript/counting-cards.md | 48 +- .../613297a923965e0703b64796.md | 56 ++ .../61329b210dac0b08047fd6ab.md | 61 ++ .../61329d52e5010e08d9b9d66b.md | 68 ++ .../6133acc353338c0bba9cb553.md | 63 ++ .../6133d11ef548f51f876149e3.md | 68 ++ .../613e2546d0594208229ada50.md | 93 +++ .../613e275749ebd008e74bb62e.md | 66 ++ .../6140827cff96e906bd38fc2b.md | 93 +++ .../6140883f74224508174794c0.md | 89 +++ .../61408e4ae3e35d08feb260eb.md | 83 +++ .../61408f155e798909b6908712.md | 112 +++ .../614090d5a22b6f0a5a6b464c.md | 102 +++ .../6141fabd6f75610664e908fd.md | 125 ++++ .../6141fed65b61320743da5894.md | 111 +++ .../614202874ca576084fca625f.md | 171 +++++ .../614206033d366c090ca7dd42.md | 140 ++++ .../61435e3c0679a306c20f1acc.md | 125 ++++ .../6143610161323a081b249c19.md | 173 +++++ .../6143639d5eddc7094161648c.md | 195 +++++ .../6143908b6aafb00a659ca189.md | 161 ++++ .../6143920c8eafb00b735746ce.md | 127 ++++ .../6143931a113bb80c45546287.md | 139 ++++ .../614394fb41985e0d2012a93e.md | 125 ++++ .../6143956ed76ed60e012faa51.md | 197 +++++ .../614396f7ae83f20ea6f9f4b3.md | 200 +++++ .../6143cb26f7edff2dc28f7da5.md | 177 +++++ .../6144e818fd5ea704fe56081d.md | 195 +++++ .../6144f8dc6849e405dd8bb829.md | 231 ++++++ .../6145e6eeaa66c605eb087fe9.md | 207 ++++++ .../6145e8b5080a5f06bb0223d0.md | 287 ++++++++ .../6145eb5f08a38a0786c7a80c.md | 224 ++++++ .../6145ed1f22caab087630aaad.md | 191 +++++ .../6145ee65e2e1530938cb594d.md | 232 ++++++ .../6145f02240ff8f09f7ec913c.md | 215 ++++++ .../6145f14f019a4b0adb94b051.md | 250 +++++++ .../6145f3a5cd9be60b9459cdd6.md | 222 ++++++ .../6145f47393fbe70c4d885f9c.md | 229 ++++++ .../6145f59029474c0d3dc1c8b8.md | 217 ++++++ .../6145f685797bd30df9784e8c.md | 230 ++++++ .../6145f829ac6a920ebf5797d7.md | 215 ++++++ .../6145f8f8bcd4370f6509078e.md | 220 ++++++ .../6145fb5018cb5b100cb2a88c.md | 229 ++++++ .../6145fc3707fc3310c277f5c8.md | 256 +++++++ .../614796cb8086be482d60e0ac.md | 260 +++++++ .../6147a14ef5668b5881ef2297.md | 260 +++++++ .../614878f7a412310647873015.md | 253 +++++++ .../61487b77d4a37707073a64e5.md | 261 +++++++ .../61487da611a65307e78d2c20.md | 275 +++++++ .../61487f703571b60899055cf9.md | 287 ++++++++ .../614880dc16070e093e29bc56.md | 259 +++++++ .../614883b6fa720e09fb167de9.md | 280 +++++++ .../614884c1f5d6f30ab3d78cde.md | 364 ++++++++++ .../61488ecfd05e290b5712e6da.md | 286 ++++++++ .../6148d99cdc7acd0c519862cb.md | 291 ++++++++ .../6148da157cc0bd0d06df5c0a.md | 306 ++++++++ .../6148dc095264000dce348bf5.md | 323 +++++++++ .../6148dcaaf2e8750e6cb4501a.md | 316 ++++++++ .../6148defa9c01520fb9d178a0.md | 315 ++++++++ .../6148dfab9b54c110577de165.md | 360 +++++++++ .../6148e0bcc13efd10f7d7a6a9.md | 336 +++++++++ .../6148e161ecec9511941f8833.md | 356 +++++++++ .../6148e28706b34912340fd042.md | 359 +++++++++ .../6148e335c1edd512d00e4691.md | 342 +++++++++ .../6148e5aeb102e3142de026a2.md | 685 ++++++++++++++++++ .../614ccc21ea91ef1736b9b578.md | 50 ++ 83 files changed, 13888 insertions(+), 26 deletions(-) create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613297a923965e0703b64796.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133acc353338c0bba9cb553.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408e4ae3e35d08feb260eb.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md diff --git a/curriculum/challenges/japanese/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md b/curriculum/challenges/japanese/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md index 1b3a4c1ad62..c3ffb18b6e8 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md @@ -21,7 +21,7 @@ animation-timing-function: cubic-bezier(0, 0, 0.58, 1); # --instructions-- -このベジェ曲線の効果を確認するには `red` の id を持つ要素の `animation-timing-function` を `cubic-bezier` 関数に変更し、x1, y1, x2, y2 の値をそれぞれ 0, 0, 0.58, 1 に設定します。 これで両方の要素のアニメーションが同じように進行します。 +このベジェ曲線の効果を確認するには `red` の id を持つ要素の `animation-timing-function` を `cubic-bezier` 関数に変更し、x1, y1, x2, y2 をそれぞれ `0, 0, 0.58, 1` に設定します。 これで両方の要素のアニメーションが同じように進行します。 # --hints-- diff --git a/curriculum/challenges/japanese/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md b/curriculum/challenges/japanese/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md index 0ced017c4b2..ccbeb4d22c9 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md @@ -11,9 +11,9 @@ dashedName: use-hex-code-for-specific-colors CSS で色を表現する方法は他にもあることをご存知でしたか？ これらの方法の一つは 16 進数 (hexadecimal) カラーコード、または hexadecimal を略して hex コードと呼ばれます。 -私達は日常的に 10 進数、つまり基数が 10 の数字を使用しています。10 進数では各桁に 0 から 9 の記号を使用します。 16 進数 (または 16 進、ヘクサ、hex など) は基数が 16 の数字です。 これは 16 個の異なる記号を使用することを意味します。 10 進数と同様に、0-9 の記号は 0 から 9 までの値を表します。 その後、A、B、C、D、E、F は 10 から 15 の値を表します。 これを合わせて 0 ～ F で 16 進数の 1 桁を表し、合計 16 個の値をとることができます。 [16 進数について詳しくはこちら](https://www.freecodecamp.org/news/hexadecimal-number-system/) を参照してください。 +私達は日常的に 10 進数、つまり基数が 10 の数字を使用しています。10 進数では各桁に 0 から 9 の記号を使用します。 16 進数 (または 16 進、ヘクサ、hex など) は基数が 16 の数字です。 これは 16 個の異なる記号を使用することを意味します。 10 進数と同様に、0-9 の記号は 0 から 9 までの値を表します。 その後、A、B、C、D、E、F は 10 から 15 の値を表します。 これを合わせて 0 ～ F で 16 進数の 1 桁を表し、合計 16 個の値をとることができます。 16 進数について詳しくはこちら を参照してください。 -CSS では、6 桁の 16 進数の数字を使用して色を表すことができます。2 桁ごとに赤 (R)、緑 (G)、青 (B) の成分を表します。 例えば、`#000000` は黒を表し、また表すことができる最も低い値です。 [RGB カラーモデルについて詳しくはこちら](https://www.freecodecamp.org/news/rgb-color-html-and-css-guide/#whatisthergbcolormodel) を参照してください。 +CSS では、6 桁の 16 進数の数字を使用して色を表すことができます。2 桁ごとに赤 (R)、緑 (G)、青 (B) の成分を表します。 例えば、`#000000` は黒を表し、また表すことができる最も低い値です。 RGB カラーモデルについて詳しくはこちら を参照してください。 ```css body { diff --git a/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md b/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md index 565b8aa9cd1..402bfc8ae85 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md @@ -11,7 +11,7 @@ dashedName: align-elements-using-the-justify-content-property フレックスコンテナ内のフレックスアイテムがコンテナ内のすべてのスペースを埋めないことがあります。 この場合、フレックスのアイテムをどのように整列・空白の配置を行うかを CSS に指示したいと思うのが当然でしょう。 幸いなことに、`justify-content` プロパティにはこれを実現するためのオプションがいくつかあります。 しかしまず最初に、これらのオプションを検討する前に理解すべき重要な用語がいくつかあります。 -[フレックスボックスのプロパティに関する詳細はこちら](https://www.freecodecamp.org/news/flexbox-the-ultimate-css-flex-cheatsheet/) +フレックスボックスのプロパティについて詳しくはこちらを参照してください。 フレックスコンテナを行 (row) として設定すると、フレックスアイテムが左から右に並んで配置されたことを思い出してください。 列 (column) として設定されたフレックスコンテナは、フレックスアイテムを上から下へ垂直に積み重ねて配置します。 それぞれ、フレックスアイテムが配置される方向を**主軸** (main axis) と呼びます。 行の場合、これは各アイテムを横切る水平方向の線です。 そして列の場合、主軸はアイテムを貫く垂直方向の線です。 @@ -23,8 +23,8 @@ dashedName: align-elements-using-the-justify-content-property このプロパティの動作は例を見ると分かりやすいでしょう。 CSS プロパティ `justify-content` を `#box-container` 要素に追加し、値を `center` に設定してください。 -**Bonus** -コードエディタ上で `justify-content` プロパティの他のオプションを試してみて、違いを確認してみましょう。 ただし `center` がこのチャレンジをパスする唯一の値であることに注意してください。 +**追加の学習** +コードエディタ上で `justify-content` プロパティの他のオプションを試し、違いを確認してみましょう。 ただし、このチャレンジをパスできる唯一の値は `center` であることに注意してください。 # --hints-- diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/assignment-with-a-returned-value.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/assignment-with-a-returned-value.md index f0ebfc4cafb..a78a079d4f6 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/assignment-with-a-returned-value.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/assignment-with-a-returned-value.md @@ -9,7 +9,7 @@ dashedName: assignment-with-a-returned-value # --description-- -[代入演算子による値の格納](/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator)で説明したように、等号の右側の部分はすべて、値が代入される前に解決されます。 つまり、関数の戻り値を受け取って変数に代入することができます。 +「代入演算子を使用して値を格納する」で説明したように、等号の右側の部分はすべて、値が代入される前に解決されます。 つまり、関数の戻り値を受け取って変数に代入することができます。 2 つの数値を足し算する関数 `sum` があらかじめ定義されているとします。次の diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md index ab60987076d..35436450b14 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md @@ -25,6 +25,40 @@ dashedName: counting-cards # --hints-- +関数はカウントの値とテキスト (`Bet` または `Hold`) を返す必要があり、カウントとテキストの間にはスペースが 1 つ必要です。 + +```js +assert(// + (function () { + count = 0; + cc(2); + cc(2); + let out = cc(10); + const hasSpace = /-?\d+ Bet/.test('' + out); + return hasSpace; + })() +); +``` + +カードの並びが 3、2、A、10、K の場合は文字列 `-1 Hold` を返す必要があります。 + +```js +assert( + (function () { + count = 0; + cc(3); + cc(2); + cc('A'); + cc(10); + var out = cc('K'); + if (out === '-1 Hold') { + return true; + } + return false; + })() +); +``` + カードの並びが 2、3、4、5、6 の場合は文字列 `5 Bet` を返す必要があります。 ```js diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/create-decimal-numbers-with-javascript.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/create-decimal-numbers-with-javascript.md index 71206a4bff3..b8dc0922b69 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/create-decimal-numbers-with-javascript.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/create-decimal-numbers-with-javascript.md @@ -11,7 +11,7 @@ dashedName: create-decimal-numbers-with-javascript 変数に小数を格納することもできます。 小数は浮動小数点数または float と呼ばれることもあります。 -**注:** 数値は有限精度で計算されます。 そのため、浮動小数点を使用した演算は、期待する結果と異なる結果になる可能性があります。 その場合は、[freeCodeCamp フォーラム](https://forum.freecodecamp.org/)にトピックを作成してください。 +**注:** 数値は有限精度で計算されます。 そのため、浮動小数点を使用した演算は、期待する結果と異なる結果になる可能性があります。 その場合は、freeCodeCamp フォーラムにトピックを作成してください。 # --instructions-- diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-fractions-with-javascript.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-fractions-with-javascript.md index ec0283c6f62..0e431bb7b96 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-fractions-with-javascript.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-fractions-with-javascript.md @@ -13,7 +13,7 @@ dashedName: generate-random-fractions-with-javascript JavaScript には、`0` (含む) から `1` (含まない) の間の小数の乱数を生成する `Math.random()` 関数があります。 つまり、`Math.random()` は `0` を返すことはありますが、`1` を返すことは決してありません。 -**注意:** [代入演算子による値の格納](/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator)の場合と同様に、すべての関数呼び出しは `return` が実行される前に解決されるため、`Math.random()` 関数の値を `return` することができます。 +**注意:** 代入演算子による値の格納の場合と同様に、すべての関数呼び出しは `return` が実行される前に解決されるため、`Math.random()` 関数の値を `return` することができます。 # --instructions-- diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/return-early-pattern-for-functions.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/return-early-pattern-for-functions.md index 8c4ccecdfe4..be733f5159a 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/return-early-pattern-for-functions.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/return-early-pattern-for-functions.md @@ -29,7 +29,7 @@ myFun(); 関数 `abTest` を変更して、`a` または `b` が `0` より小さい場合に関数が `undefined` の値を返して直ちに終了するようにしてください。 **ヒント** -`undefined` はキーワードであって、文字列ではないことに注意してください。 +undefined はキーワードであって、文字列ではないことに注意してください。 # --hints-- diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/returning-boolean-values-from-functions.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/returning-boolean-values-from-functions.md index 1961afbd062..c026e93ff1e 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/returning-boolean-values-from-functions.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/returning-boolean-values-from-functions.md @@ -9,7 +9,7 @@ dashedName: returning-boolean-values-from-functions # --description-- -[等価演算子による比較](/learn/javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator)で説明しましたが、比較演算子はすべて、ブール値の `true` または `false` を返します。 +「等価演算子による比較」で説明した通り、比較演算子はすべて、ブール値の `true` または `false` を返します。 次のように `if/else` ステートメントを使用して比較を行うこともできます。 diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-countdown.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-countdown.md index 3f032a3c27e..f7abea95c34 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-countdown.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-countdown.md @@ -8,7 +8,7 @@ dashedName: use-recursion-to-create-a-countdown # --description-- -[以前のチャレンジ](/learn/javascript-algorithms-and-data-structures/basic-javascript/replace-loops-using-recursion)で、再帰関数を利用して `for` ループを置き換える方法について学びました。 今回はもっと複雑な例として、`1` から関数に渡された数値までの連続した整数の配列を返す関数を考えてみましょう。 +以前のチャレンジで、再帰関数を利用して `for` ループを置き換える方法について学びました。 今回はもっと複雑な例として、`1` から関数に渡された数値までの連続した整数の配列を返す関数を考えてみましょう。 以前のチャレンジで触れたように、基準ケースを記述します。 基準ケースは、再帰をいつ止めるかを再帰関数に指示します。 これは戻り値があらかじめわかっている単純なケースです。 別の引数を付けて元の関数を実行する再帰呼び出しもあります。 関数が適切に記述されていれば、最終的には基準ケースに到達します。 diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md index 7f2b4000984..a5b3e6b3313 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md @@ -8,7 +8,7 @@ dashedName: compare-scopes-of-the-var-and-let-keywords # --description-- -`let` に慣れていない方は、[こちらのチャレンジ](/learn/javascript-algorithms-and-data-structures/basic-javascript/explore-differences-between-the-var-and-let-keywords)をご覧ください。 +`let` に慣れていない方は、let と var の違いに関するこちらのチャレンジをご覧ください。 `var` キーワードを付けて変数を宣言すると、グローバルに宣言されるか、または関数内で宣言された場合はローカルに宣言されます。 diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md index 7acc5a65400..38af156fbfe 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md @@ -8,7 +8,7 @@ dashedName: mutate-an-array-declared-with-const # --description-- -`const` に慣れていない方は、[こちらのチャレンジ](/learn/javascript-algorithms-and-data-structures/basic-javascript/declare-a-read-only-variable-with-the-const-keyword)をご覧ください。 +`const` に慣れていない方は、const キーワードに関するこちらのチャレンジをご覧ください。 `const` 宣言は、現在の JavaScript では多くの用法があります。 diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md index b96a0fc11e6..edac6fed3ec 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md @@ -8,7 +8,7 @@ dashedName: dna-pairing # --description-- -DNA 2 本鎖はタンパク質の塩基対で構成されます。 塩基対は AT および CG という文字で表され、DNA 2 重らせんの基本構成要素を形成します。 +DNA 2 本鎖は核酸塩基対で構成されます。 塩基対は AT および CG という文字で表され、DNA 2 重らせんの基本構成要素を形成します。 DNA 鎖の対を成す要素が欠落しています。 与えられた DNA 鎖の欠落している塩基対を対応させる関数を記述してください。 与えられた文字列の各文字について、塩基対の文字を見つけ出してください。 結果は 2 次元配列で返してください。 diff --git a/curriculum/challenges/japanese/03-front-end-development-libraries/jquery/change-text-inside-an-element-using-jquery.md b/curriculum/challenges/japanese/03-front-end-development-libraries/jquery/change-text-inside-an-element-using-jquery.md index 8d466179b25..cebe583bb76 100644 --- a/curriculum/challenges/japanese/03-front-end-development-libraries/jquery/change-text-inside-an-element-using-jquery.md +++ b/curriculum/challenges/japanese/03-front-end-development-libraries/jquery/change-text-inside-an-element-using-jquery.md @@ -22,7 +22,7 @@ jQuery には `.text()` という同様の関数もあります。この関数 id が `target4` のボタンを変更して、テキストを強調表示してください。 -`` と `` の違いとそれらの用例については、[<em> についてのニュース記事](https://www.freecodecamp.org/news/html-elements-explained-what-are-html-tags/#em-element)を参照してください。 +`` と `` の違いと用例については、freeCodeCamp ニュースブログの <em> に関する記事を参照してください。 `` タグは従来からテキストの強調に使用されていますが、最近ではアイコンのタグとして採用されています。 `` タグは現在、強調用のタグとして広く使用されています。 このチャレンジではどちらも正しく機能します。 diff --git a/curriculum/challenges/japanese/03-front-end-development-libraries/react/introducing-inline-styles.md b/curriculum/challenges/japanese/03-front-end-development-libraries/react/introducing-inline-styles.md index 2d3b109200a..96ce6198443 100644 --- a/curriculum/challenges/japanese/03-front-end-development-libraries/react/introducing-inline-styles.md +++ b/curriculum/challenges/japanese/03-front-end-development-libraries/react/introducing-inline-styles.md @@ -8,7 +8,7 @@ dashedName: introducing-inline-styles # --description-- -他にも、React のコードに強力な機能を追加する複雑な概念があります。 しかし、もっと単純な問題として、React で作成した JSX 要素のスタイルをどのように設定するのでしょうか？ [JSX 要素にクラスを適用する方法](/learn/front-end-development-libraries/react/define-an-html-class-in-jsx)があるので、HTML の場合とまったく同じではないことは理解していると思います。 +他にも、React のコードに強力な機能を追加する複雑な概念があります。 しかし、もっと単純な問題として、React で作成した JSX 要素のスタイルをどのように設定するのでしょうか？ JSX 要素にクラスを適用する方法を思い出すと、HTML の場合とまったく同じではないことが予想できるかと思います。 スタイルシートからスタイルをインポートする場合は、それほど違いはありません。 `className` 属性を使用して JSX 要素にクラスを適用し、スタイルシートでクラスにスタイルを適用します。 もう一つの方法として、ReactJS の開発でごく一般的なインラインスタイルの適用があります。 diff --git a/curriculum/challenges/japanese/03-front-end-development-libraries/react/use-proptypes-to-define-the-props-you-expect.md b/curriculum/challenges/japanese/03-front-end-development-libraries/react/use-proptypes-to-define-the-props-you-expect.md index 41a225acb58..73fbed9115b 100644 --- a/curriculum/challenges/japanese/03-front-end-development-libraries/react/use-proptypes-to-define-the-props-you-expect.md +++ b/curriculum/challenges/japanese/03-front-end-development-libraries/react/use-proptypes-to-define-the-props-you-expect.md @@ -16,7 +16,7 @@ prop の型が事前にわかっている場合は `propTypes` を設定する MyComponent.propTypes = { handleClick: PropTypes.func.isRequired } ``` -この例では、`PropTypes.func` の部分で `handleClick` が関数かどうかをチェックします。 `isRequired` を追加することで、`handleClick` がそのコンポーネントに必要なプロパティであることを React に伝えます。 その prop が指定されていない場合は警告が表示されます。 また、`func` は `function` を表します。 JavaScript の 7 つのプリミティブ型の中で、`function` と `boolean` (`bool` と記述) の 2 つだけは通常と異なるスペルを使用します。 プリミティブ型に加えて、他にも利用可能な型があります。 たとえば、prop が React の要素かどうかをチェックできます。 オプションの一覧については、[ドキュメント](https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes)を参照してください。 +この例では、`PropTypes.func` の部分で `handleClick` が関数かどうかをチェックします。 `isRequired` を追加することで、`handleClick` がそのコンポーネントに必要なプロパティであることを React に伝えます。 その prop が指定されていない場合は警告が表示されます。 また、`func` は `function` を表します。 JavaScript の 7 つのプリミティブ型の中で、`function` と `boolean` (`bool` と記述) の 2 つだけは通常と異なるスペルを使用します。 プリミティブ型に加えて、他にも利用可能な型があります。 たとえば、prop が React の要素かどうかをチェックできます。 オプションの一覧については ドキュメントを参照してください。 **注:** React v15.5.0 では `PropTypes` は React とは独立してインポートされます (例: `import PropTypes from 'prop-types';`)。 diff --git a/curriculum/challenges/japanese/03-front-end-development-libraries/redux/create-a-redux-store.md b/curriculum/challenges/japanese/03-front-end-development-libraries/redux/create-a-redux-store.md index 2f3ba1eba5b..ec0704a0676 100644 --- a/curriculum/challenges/japanese/03-front-end-development-libraries/redux/create-a-redux-store.md +++ b/curriculum/challenges/japanese/03-front-end-development-libraries/redux/create-a-redux-store.md @@ -20,7 +20,7 @@ Redux の `store` は、アプリケーションの `state` を保持して管 `store` 変数を宣言し、それを `createStore()` メソッドに割り当て、引数として `reducer` を渡してください。 -**注:** エディターのコードでは、ES6 のデフォルト引数の構文を使用して、`5` という値を保持するようにこの state を初期化しています。 デフォルト引数に慣れていない場合は、このトピックについて説明している[カリキュラムの ES6 セクション](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions)を参照してください。 +**注:** エディターのコードでは、ES6 のデフォルト引数の構文を使用して、`5` という値を保持するようにこの state を初期化しています。 デフォルト引数に慣れていない場合は、このトピックについて説明しているカリキュラムの ES6 セクションを参照してください。 # --hints-- diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md index 2d5acc09c49..8f41060149e 100644 --- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md +++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md @@ -25,7 +25,41 @@ Não inclua aspas (simples ou duplas) na saída. # --hints-- -Sequência de cartas 2, 3, 4, 5, 6 deve retornar a string `5 Bet` +A função deve retornar um valor para a contagem e o texto (`Bet` ou `Hold`) com um caractere de espaço entre eles. + +```js +assert(// + (function () { + count = 0; + cc(2); + cc(2); + let out = cc(10); + const hasSpace = /-?\d+ Bet/.test('' + out); + return hasSpace; + })() +); +``` + +A sequência de cartas 3, 2, A, 10, K deve retornar a string `-1 Hold` + +```js +assert( + (function () { + count = 0; + cc(3); + cc(2); + cc('A'); + cc(10); + var out = cc('K'); + if (out === '-1 Hold') { + return true; + } + return false; + })() +); +``` + +A sequência de cartas 2, 3, 4, 5, 6 deve retornar a string `5 Bet` ```js assert( @@ -44,7 +78,7 @@ assert( ); ``` -Sequência de cartas 7, 8, 9 deve retornar a string `0 Hold` +A sequência de cartas 7, 8, 9 deve retornar a string `0 Hold` ```js assert( @@ -61,7 +95,7 @@ assert( ); ``` -Sequência de cartas 10, J, Q, K, A deve retornar a string `-5 Hold` +A sequência de cartas 10, J, Q, K, A deve retornar a string `-5 Hold` ```js assert( @@ -80,7 +114,7 @@ assert( ); ``` -Sequência de cartas 3, 7, Q, 8, A deve retornar a string `-1 Hold` +A sequência de cartas 3, 7, Q, 8, A deve retornar a string `-1 Hold` ```js assert( @@ -99,7 +133,7 @@ assert( ); ``` -Sequência de cartas 2, J, 9, 2, 7 deve retornar a string `1 Bet` +A sequência de cartas 2, J, 9, 2, 7 deve retornar a string `1 Bet` ```js assert( @@ -118,7 +152,7 @@ assert( ); ``` -Sequência de cartas 2, 2, 10 deve retornar a string `1 Bet` +A sequência de cartas 2, 2, 10 deve retornar a string `1 Bet` ```js assert( @@ -135,7 +169,7 @@ assert( ); ``` -Sequência de cartas 3, 2, A, 10, K deve retornar a string `-1 Hold` +A sequência de cartas 3, 2, A, 10, K deve retornar a string `-1 Hold` ```js assert( diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613297a923965e0703b64796.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613297a923965e0703b64796.md new file mode 100644 index 00000000000..2125794c86e --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613297a923965e0703b64796.md @@ -0,0 +1,56 @@ +--- +id: 613297a923965e0703b64796 +title: Крок 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Можливо, ви вже знайомі з елементом `meta`: його використовують для визначення інформації про сторінку, такої як заголовок, опис, ключові слова та автор. + +Надайте своїй сторінці елемент `meta` з відповідним значенням `charset`. + +Атрибут `charset` визначає кодування символів сторінки і сьогодні `UTF-8` є єдиним кодуванням, яке підтримується більшістю браузерів. + +# --hints-- + +Ви повинні створити елемент `meta` в межах елемента `head`. + +```js +assert.exists(document.querySelector('head > meta')); +``` + +Для теґу `meta` надайте `charset` зі значенням `UTF-8`. + +```js +assert.equal(document.querySelector('head > meta')?.getAttribute('charset')?.toLowerCase(), 'utf-8'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + +--fcc-editable-region-- + + + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md new file mode 100644 index 00000000000..2ecd7083ddb --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md @@ -0,0 +1,61 @@ +--- +id: 61329b210dac0b08047fd6ab +title: Крок 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Продовжуючи з елементами `meta`: здатність `viewport` розповідає браузеру, як зобразити сторінку. Це одна з речей, що покращує візуальну доступність на мобільних пристроях та удосконалює _SEO_ (пошукову оптимізацію сайту). + +Додайте здатність `viewport` з атрибутом `content`, деталізуючи `width` та `initial-scale` сторінки. + +# --hints-- + +Ви повинні створити інший елемент `meta` в `head`. + +```js +assert.equal(document.querySelectorAll('head > meta')?.length, 2); +``` + +Для `meta` надайте атрибут `name` зі значенням `viewport`. + +```js +assert.equal(document.querySelectorAll('head > meta[name="viewport"]')?.length, 1); +``` + +Для `meta` надайте атрибут `content` зі значенням `width=device-width, initial-scale=1`. + +```js +assert.equal(document.querySelectorAll('head > meta[content="width=device-width, initial-scale=1.0"]')?.length || document.querySelectorAll('head > meta[content="width=device-width, initial-scale=1"]')?.length, 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + + +--fcc-editable-region-- + + + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md new file mode 100644 index 00000000000..ca9b01b36b8 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md @@ -0,0 +1,68 @@ +--- +id: 61329d52e5010e08d9b9d66b +title: Крок 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Інший важливий елемент `meta` для доступності та SEO – це визначення `description`. Значення атрибуту `content` використовується пошуковими системами для надання опису вашої сторінки. + +Додайте елемент `meta` з атрибутом `name`, встановленим на `description`, та надайте йому придатний атрибут `content`. + +# --hints-- + +Додайте новий елемент `meta` до `head`. + +```js +assert.equal(document.querySelectorAll('meta').length, 3); +``` + +Для `meta` надайте атрибут `name` зі значенням `description`. + +```js +assert.exists(document.querySelector('meta[name="description"]')); +``` + +Для `meta` надайте атрибут `content`. + +```js +assert.notEmpty(document.querySelector('meta[name="description"]')?.content); +``` + +Значення атрибуту `content` не повинне перевищувати 165 символів. _Це максимальна довжина опису Google._ + +```js +assert.isAtMost(document.querySelector('meta[name="description"]')?.content?.length, 165); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + + + +--fcc-editable-region-- + + + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133acc353338c0bba9cb553.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133acc353338c0bba9cb553.md new file mode 100644 index 00000000000..140531b5579 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133acc353338c0bba9cb553.md @@ -0,0 +1,63 @@ +--- +id: 6133acc353338c0bba9cb553 +title: Крок 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Останній елемент `title` в `head` корисний для читачів екрану, щоб зрозуміти вміст сторінки. Крім того, це важлива частина _SEO_. + +Надайте вашій сторінці описовий та чіткий `title`. + +# --hints-- + +Ви повинні додати елемент `title` до `head`. + +```js +assert.exists(document.querySelector('head > title')); +``` + +Не створюйте `title` більшим за 60 символів. + +```js +assert.isAtMost(document.querySelector('head > title')?.textContent?.length, 60); +``` + +Намагайтесь зробити ваш елемент `title` більш описовим. _Підказка: принаймні 15 символів_ + +```js +assert.isAtLeast(document.querySelector('head > title')?.textContent?.length, 15); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + + + + +--fcc-editable-region-- + + + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md new file mode 100644 index 00000000000..bb2d6ae274f --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md @@ -0,0 +1,68 @@ +--- +id: 6133d11ef548f51f876149e3 +title: Крок 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Навігація – основна частина доступності і читачі екрану покладаються на вас для забезпечення структури сторінки. Цього можна досягти за допомогою семантичних елементів HTML. + +Додайте елементи `header` та `main` до своєї сторінки. + +Елемент `header` буде використаний для представлення сторінки, а також для надання навігаційного меню. + +Елемент `main` буде містити основний вміст сторінки. + +# --hints-- + +Ви повинні додати елемент `header` до `body`. + +```js +assert.exists(document.querySelector('body > header')); +``` + +Ви повинні додати елемент `main` до `body`. + +```js +assert.exists(document.querySelector('body > main')); +``` + +Елемент `header` повинен бути перед елементом `main`. + +```js +assert.exists(document.querySelector('header + main')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + +--fcc-editable-region-- + + + +--fcc-editable-region-- + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md new file mode 100644 index 00000000000..adb134e7614 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md @@ -0,0 +1,93 @@ +--- +id: 613e2546d0594208229ada50 +title: Крок 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +В межах `header` надайте контекст сторінки шляхом вкладення по одному елементу `img`, `h1` та `nav`. + +`img` має вказувати на `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg` та мати `id` зі значенням `logo`. + +`h1` має містити текст `HTML/CSS Quiz`. + +# --hints-- + +Ви повинні додати елемент `img` до елемента `header`. + +```js +assert.exists(document.querySelector('header > img')); +``` + +Ви повинні додати елемент `h1` до елемента `header`. + +```js +assert.exists(document.querySelector('header > h1')); +``` + +Ви повинні додати елемент `nav` до елемента `header`. + +```js +assert.exists(document.querySelector('header > nav')); +``` + +Ви повинні розмістити елементи `img`, `h1` та `nav` в такому ж порядку. + +```js +assert.exists(document.querySelector('img + h1 + nav')); +``` + +Ви повинні надати елементу `img` атрибут `src` зі значенням `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. + +```js +assert.equal(document.querySelector('img')?.src, 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg'); +``` + +Ви повинні надати елементу `img` атрибут `id` зі значенням `logo`. + +```js +assert.equal(document.querySelector('img')?.id, 'logo'); +``` + +Ви повинні надати елементу `h1` текст `HTML/CSS Quiz`. + +```js +assert.include(document.querySelector('h1')?.innerText?.toLowerCase(), 'html/css quiz'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md new file mode 100644 index 00000000000..5d2e14b1240 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md @@ -0,0 +1,66 @@ +--- +id: 613e275749ebd008e74bb62e +title: Крок 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Корисна властивість _SVG_ (scalable vector graphics) – вміст атрибуту `path`, що дозволяє масштабувати зображення без впливу на роздільність вихідного зображення. + +В цей час `img` припускає свій розмір за замовчуванням, що є занадто великим. Належним способом виміряйте зображення, використовуючи `id` як селектор та встановлюючи `width` на `max(100px, 18vw)`. + +# --hints-- + +Ви повинні використати селектор `#logo`, щоб націлити елемент `img`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('#logo')); +``` + +Для `img` надайте `width` зі значенням `max(100px, 18vw)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md new file mode 100644 index 00000000000..bb83cc9eee8 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md @@ -0,0 +1,93 @@ +--- +id: 6140827cff96e906bd38fc2b +title: Крок 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Як описано в freeCodeCamp Style Guide, логотип має зберігати співвідношення сторін `35 / 4` та мати padding навколо тексту. + +Спочатку замініть `background-color` на `#0a0a23`, щоб можна було бачити логотип. Потім використайте властивість `aspect-ratio`, щоб встановити бажане співвідношення сторін на `35 / 4`. Зрештою, всюди додайте `padding` зі значенням `0.4rem`. + +# --hints-- + +Для `#logo` надайте `background-color` зі значенням `#0a0a23`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.backgroundColor, 'rgb(10, 10, 35)'); +``` + +Використайте властивість `aspect-ratio`. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio); +``` + +Не використовуйте властивість `height`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.height); +``` + +Не змінюйте властивість `width`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)'); +``` + +Для `img` надайте `aspect-ratio` зі значенням `35 / 4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio, '35 / 4'); +``` + +Для `img` надайте `padding` зі значенням `0.4rem`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.padding, '0.4rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +--fcc-editable-region-- +#logo { + width: max(100px, 18vw); + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md new file mode 100644 index 00000000000..efa68253dc4 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md @@ -0,0 +1,89 @@ +--- +id: 6140883f74224508174794c0 +title: Крок 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Зробіть так, щоб `header` займав всю ширину батьківського контейнера, встановіть його `height` на `50px` та встановіть `background-color` на `#1b1b32`. Потім встановіть `display` так, щоб він використовував _Flexbox_. + +# --hints-- + +Використайте селектор елемента `header`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('header')); +``` + +Для `header` надайте `width` зі значенням `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.width, '100%'); +``` + +Для `header` надайте `height` зі значенням `50px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.height, '50px'); +``` + +Для `header` надайте `background-color` зі значенням `#1b1b32`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.backgroundColor, 'rgb(27, 27, 50)'); +``` + +Для `header` надайте `display` зі значенням `flex`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.display, 'flex'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408e4ae3e35d08feb260eb.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408e4ae3e35d08feb260eb.md new file mode 100644 index 00000000000..78c1cd76c12 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408e4ae3e35d08feb260eb.md @@ -0,0 +1,83 @@ +--- +id: 61408e4ae3e35d08feb260eb +title: Крок 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Змініть колір шрифту `h1` на `#f1be32` та встановіть розмір шрифту на `min(5vw, 1.2em)`. + +# --hints-- + +Використайте селектор елемента `h1`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('h1')); +``` + +Для `h1` надайте `color` зі значенням `#f1be32`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.color, 'rgb(241, 190, 50)'); +``` + +Для `h1` надайте `font-size` зі значенням `min(5vw, 1.2em)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.fontSize, 'min(5vw, 1.2em)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md new file mode 100644 index 00000000000..0525bfe8f94 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md @@ -0,0 +1,112 @@ +--- +id: 61408f155e798909b6908712 +title: Крок 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Щоб увімкнути навігацію на сторінці, додайте невпорядкований список з наступними трьома елементами списку: + +- `INFO` +- `HTML` +- `CSS` + +Текст елементів списку повинен бути загорнений в теґах anchor. + +# --hints-- + +Вкладіть один елемент `ul` в межах `nav`. + +```js +assert.equal(document.querySelectorAll('nav > ul')?.length, 1); +``` + +Вкладіть три елементи `li` всередині елементу `ul`. + +```js +assert.equal(document.querySelectorAll('nav > ul > li')?.length, 3); +``` + +Вкладіть один елемент `a` всередині кожного елемента `li`. + +```js +assert.equal(document.querySelectorAll('nav > ul > li > a')?.length, 3); +``` + +Першому елементу `a` надайте текст `INFO`. + +```js +assert.equal(document.querySelectorAll('nav > ul > li > a')?.[0]?.textContent, 'INFO'); +``` + +Другому елементу `a` надайте текст `HTML`. + +```js +assert.equal(document.querySelectorAll('nav > ul > li > a')?.[1]?.textContent, 'HTML'); +``` + +Третьому елементу `a` надайте текст `CSS`. + +```js +assert.equal(document.querySelectorAll('nav > ul > li > a')?.[2]?.textContent, 'CSS'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md new file mode 100644 index 00000000000..1d81ea54e48 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md @@ -0,0 +1,102 @@ +--- +id: 614090d5a22b6f0a5a6b464c +title: Крок 13 +challengeType: 0 +dashedName: step-13 +--- + + + +# --description-- + +Націльте невпорядковані елементи списку в межах елементів `nav` та використайте _Flexbox_, щоб рівномірно розставити дочірні елементи. + +# --hints-- + +Використовуйте селектор `nav > ul`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('nav > ul')); +``` + +Елементам `nav > ul` надайте `display` зі значенням `flex`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.display, 'flex'); +``` + +Елементам `nav > ul` надайте `justify-content` зі значенням `space-evenly`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.justifyContent, 'space-evenly'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md new file mode 100644 index 00000000000..9e9b6349392 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md @@ -0,0 +1,125 @@ +--- +id: 6141fabd6f75610664e908fd +title: Крок 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Оскільки це вікторина, вам знадобиться форма для користувачів, щоб відправляти відповіді. Ви можете самостійно відокремити вміст в межах форми, використовуючи елементи `section`. + +В межах елементу `main` створіть форму з трьома вкладеними елементами `section`. Потім зробіть так, щоб форма відправляла на `https://freecodecamp.org/practice-project/accessibility-quiz`, використовуючи правильний метод. + +# --hints-- + +Ви повинні вкласти елемент `form` в межах елементу `main`. + +```js +assert.exists(document.querySelector('main > form')); +``` + +Ви повинні вкласти три елементи `section` в межах елементу `form`. + +```js +assert.equal(document.querySelectorAll('main > form > section')?.length, 3); +``` + +Елементу `form` надайте атрибут `action`. + +```js +assert.notEmpty(document.querySelector('main > form')?.action); +``` + +Надайте атрибуту `action` значення `https://freecodecamp.org/practice-project/accessibility-quiz`. + +```js +assert.equal(document.querySelector('main > form')?.action, 'https://freecodecamp.org/practice-project/accessibility-quiz'); +``` + +Ви повинні дати елементу `form` атрибут `method`. + +```js +assert.notEmpty(document.querySelector('main > form')?.method); +``` + +Ви повинні дати елементу `form` атрибут `method` зі значенням `post`. + +```js +assert.equal(document.querySelector('main > form')?.method?.toLowerCase(), 'post'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md new file mode 100644 index 00000000000..afcaf7af27e --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md @@ -0,0 +1,111 @@ +--- +id: 6141fed65b61320743da5894 +title: Крок 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Для збільшення доступності сторінки, може бути використаний атрибут `role`, щоб вказати призначення елемента на сторінці для допоміжних технологій. Атрибут `role` є частиною _Web Accessibility Initiative_ (WAI) та приймає задане значення. + +Кожному елементу `section` надайте role `region`. + +# --hints-- + +Першому елементу `section` надайте role `region`. + +```js +assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('role'), 'region'); +``` + +Другому елементу `section` надайте role `region`. + +```js +assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('role'), 'region'); +``` + +Третьому елементу `section` надайте role `region`. + +```js +assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('role'), 'region'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+--fcc-editable-region-- +
+
+
+
+
+--fcc-editable-region-- +
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md new file mode 100644 index 00000000000..8b72787820f --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md @@ -0,0 +1,171 @@ +--- +id: 614202874ca576084fca625f +title: Крок 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Кожен role `region` вимагає видимого label, який посилається на атрибут `aria-labelledby`. + +Елементам `section` надайте наступні атрибути `aria-labelledby`: + +- `student-info` +- `html-questions` +- `css-questions` + +Потім в межах кожного елемента `section` вкладіть один елемент `h2` з `id`, що відповідає атрибуту `aria-labelledby`. Надайте кожному `h2` пригожий текстовий вміст. + +# --hints-- + +Першому елементу `section` надайте атрибут `aria-labelledby` зі значенням `student-info`. + +```js +assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('aria-labelledby'), 'student-info'); +``` + +Другому елементу `section` надайте атрибут `aria-labelledby` зі значенням `html-questions`. + +```js +assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('aria-labelledby'), 'html-questions'); +``` + +Третьому елементу `section` надайте атрибут `aria-labelledby` зі значенням `css-questions`. + +```js +assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('aria-labelledby'), 'css-questions'); +``` + +Вкладіть один елемент `h2` в межах першого елемента `section`. + +```js +assert.equal(document.querySelectorAll('section')?.[0]?.querySelectorAll('h2')?.length, 1); +``` + +Вкладіть один елемент `h2` в межах другого елемента `section`. + +```js +assert.equal(document.querySelectorAll('section')?.[1]?.querySelectorAll('h2')?.length, 1); +``` + +Вкладіть один елемент `h2` в межах третього елемента `section`. + +```js +assert.equal(document.querySelectorAll('section')?.[2]?.querySelectorAll('h2')?.length, 1); +``` + +Першому елементу `h2` надайте атрибут `id` зі значенням `student-info`. + +```js +assert.equal(document.querySelectorAll('h2')?.[0]?.id, 'student-info'); +``` + +Другому елементу `h2` надайте атрибут `id` зі значенням `html-questions`. + +```js +assert.equal(document.querySelectorAll('h2')?.[1]?.id, 'html-questions'); +``` + +Третьому елементу `h2` надайте атрибут `id` зі значенням `css-questions`. + +```js +assert.equal(document.querySelectorAll('h2')?.[2]?.id, 'css-questions'); +``` + +Надайте першому елементу `h2` пригожий текстовий вміст. _Підказка: я б обрав `Student Info`_ + +```js +assert.isAtLeast(document.querySelectorAll('h2')?.[0]?.textContent?.length, 1); +``` + +Надайте другому елементу `h2` пригожий текстовий вміст. _Підказка: я б обрав `HTML`_ + +```js +assert.isAtLeast(document.querySelectorAll('h2')?.[1]?.textContent?.length, 1); +``` + +Надайте третьому елементу `h2` пригожий текстовий вміст. _Підказка: я б обрав `CSS`_ + +```js +assert.isAtLeast(document.querySelectorAll('h2')?.[2]?.textContent?.length, 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+--fcc-editable-region-- +
+
+
+
+
+--fcc-editable-region-- +
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md new file mode 100644 index 00000000000..ae5a42f7df7 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md @@ -0,0 +1,140 @@ +--- +id: 614206033d366c090ca7dd42 +title: Крок 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Гарнітура відіграє важливу роль у доступності сторінки. Деякі шрифти простіші для читання, ніж інші, і це особливо актуально на екранах з низькою роздільною здатністю. + +Змініть шрифт елементів `h1` та `h2` на `Verdana` та використайте інший веббезпечний шрифт з сім'ї sans-serif як запасний варіант. + +Також додайте `border-bottom` зі значенням `4px solid #dfdfe2` для елементів `h2`, щоб зробити секції виразнішими. + +# --hints-- + +Використайте селектор декількох елементів, щоб націлити елементи `h1` та `h2`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('h1, h2') || gs('h2, h1')); +``` + +Встановіть перше значення властивості `font-family` на `Verdana`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const style = gs('h1, h2') || gs('h2, h1'); +assert.include(style?.fontFamily, 'Verdana'); +``` + +Ви повинні встановити друге значення властивості `font-family` на інший sans-serif, веббезпечний шрифт. _Підказка: я б вибрав Tahoma_. + +```js +// Acceptable fonts: Arial, sans-serif, Helvetica, Tahoma, Trebuchet MS. +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const style = gs('h1, h2') || gs('h2, h1'); +assert.match(style?.fontFamily, /(Tahoma)|(Arial)|(sans-serif)|(Helvetica)|(Trebuchet MS)/); +``` + +Використайте селектор елемента `h2`, щоб націлити елементи `h2`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('h2')); +``` + +Надайте `h2` властивість `border-bottom` зі значенням `4px solid #dfdfe2`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.borderBottom, '4px solid rgb(223, 223, 226)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md new file mode 100644 index 00000000000..ed88a0ec38c --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md @@ -0,0 +1,125 @@ +--- +id: 61435e3c0679a306c20f1acc +title: Крок 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Для можливості навігації в межах сторінки, кожному елементу anchor надайте `href`, що відповідає `id` елементів `h2`. + +# --hints-- + +Першому елементу `a` надайте `href` зі значенням `#student-info`. + +```js +assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('href'), '#student-info'); +``` + +Другому елементу `a` надайте `href` зі значенням `#html-questions`. + +```js +assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('href'), '#html-questions'); +``` + +Третьому елементу `a` надайте `href` зі значенням `#css-questions`. + +```js +assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('href'), '#css-questions'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md new file mode 100644 index 00000000000..a6e46e06444 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md @@ -0,0 +1,173 @@ +--- +id: 6143610161323a081b249c19 +title: Крок 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Заповнюючи вміст вікторини, під `#student-info` додайте три елементи `div`, що містять `class` зі значенням `info`. + +Потім в межах кожного `div` вкладіть один елемент `label` та один елемент `input`. + +# --hints-- + +Вкладіть три елементи `div` під елементом `h2#student-info`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.length, 3); +``` + +Першому `div` надайте `class` зі значенням `info`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.className, 'info'); +``` + +Другому `div` надайте `class` зі значенням `info`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.className, 'info'); +``` + +Третьому `div` надайте `class` зі значенням `info`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.className, 'info'); +``` + +Вкладіть один елемент `label` в межах першого `div`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('label')?.length, 1); +``` + +Вкладіть один елемент `input` в межах першого `div`, після `label`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('input')?.length, 1); +assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelector('label + input')); +``` + +Вкладіть один елемент `label` в межах другого `div`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('label')?.length, 1); +``` + +Вкладіть один елемент `input` в межах другого `div`, після `label`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('input')?.length, 1); +assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelector('label + input')); +``` + +Вкладіть один елемент `label` в межах третього `div`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('label')?.length, 1); +``` + +Вкладіть один елемент `input` в межах третього `div`, після `label`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('input')?.length, 1); +assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelector('label + input')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+--fcc-editable-region-- +
+

Student Info

+ +
+--fcc-editable-region-- +
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md new file mode 100644 index 00000000000..2ea399f8ec0 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md @@ -0,0 +1,195 @@ +--- +id: 6143639d5eddc7094161648c +title: Крок 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Важливо пов'язати кожен `input` з відповідним елементом `label`. Це надає користувачам з допоміжними технологіями візуальний референс на input. + +Це роблять завдяки наданню `label` атрибута `for`, який містить `id` теґу `input`. + +Ця секція візьме ім'я, адресу електронної пошти та дату народження учня. Надайте елементам `label` відповідні атрибути `for`, а також текстовий вміст. Потім прив'яжіть елементи `input` до відповідних елементів `label`. + +# --hints-- + +Надайте першому елементу `label` відповідний атрибут `for`. + +```js +assert.isAtLeast(document.querySelectorAll('label')?.[0]?.htmlFor?.length, 1); +``` + +Надайте другому елементу `label` відповідний атрибут `for`. + +```js +assert.isAtLeast(document.querySelectorAll('label')?.[1]?.htmlFor?.length, 1); +``` + +Надайте третьому елементу `label` відповідний атрибут `for`. + +```js +assert.isAtLeast(document.querySelectorAll('label')?.[2]?.htmlFor?.length, 1); +``` + +Надайте першому елементу `label` відповідний текстовий вміст. + +```js +assert.isAtLeast(document.querySelectorAll('label')?.[0]?.textContent?.length, 1); +``` + +Надайте другому елементу `label` відповідний текстовий вміст. + +```js +assert.isAtLeast(document.querySelectorAll('label')?.[1]?.textContent?.length, 1); +``` + +Надайте третьому елементу `label` відповідний текстовий вміст. + +```js +assert.isAtLeast(document.querySelectorAll('label')?.[2]?.textContent?.length, 1); +``` + +Надайте першому елементу `input` атрибут `id`, що відповідає атрибуту `for` першого `label`. + +```js +assert.equal(document.querySelectorAll('input')?.[0]?.id, document.querySelectorAll('label')?.[0]?.htmlFor); +``` + +Надайте другому елементу `input` атрибут `id`, що відповідає атрибуту `for` другого `label`. + +```js +assert.equal(document.querySelectorAll('input')?.[1]?.id, document.querySelectorAll('label')?.[1]?.htmlFor); +``` + +Надайте третьому елементу `input` атрибут `id`, що відповідає атрибуту `for` третього `label`. + +```js +assert.equal(document.querySelectorAll('input')?.[2]?.id, document.querySelectorAll('label')?.[2]?.htmlFor); +``` + +Не використовуйте той самий атрибут `id` для більш ніж одного елемента `input`. + +```js +const id = (n) => document.querySelectorAll('input')?.[n]?.id; +assert.notEqual(id(0), id(1)); +assert.notEqual(id(0), id(2)); +assert.notEqual(id(1), id(2)); +``` + +Не використовуйте той самий атрибут `for` для більш ніж одного елемента `label`. + +```js +const htmlFor = (n) => document.querySelectorAll('label')?.[n]?.htmlFor; +assert.notEqual(htmlFor(0), htmlFor(1)); +assert.notEqual(htmlFor(0), htmlFor(2)); +assert.notEqual(htmlFor(1), htmlFor(2)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+--fcc-editable-region-- +
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+--fcc-editable-region-- +
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md new file mode 100644 index 00000000000..9de8520d64d --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md @@ -0,0 +1,161 @@ +--- +id: 6143908b6aafb00a659ca189 +title: Крок 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Пам'ятаючи застосування inputs форми, надайте кожному `input` відповідні `type` та атрибут `name`. Потім надайте першому `input` атрибут `placeholder`. + +# --hints-- + +Першому `input` надайте `type` зі значенням `text`. + +```js +assert.equal(document.querySelectorAll('input')?.[0]?.type, 'text'); +``` + +Другому `input` надайте `type` зі значенням `email`. + +```js +assert.equal(document.querySelectorAll('input')?.[1]?.type, 'email'); +``` + +Третьому `input` надайте `type` зі значенням `date`. + +```js +assert.equal(document.querySelectorAll('input')?.[2]?.type, 'date'); +``` + +Першому `input` надайте відповідний атрибут `name`. + +```js +assert.isAtLeast(document.querySelectorAll('input')?.[0]?.name?.length, 1); +``` + +Другому `input` надайте відповідний атрибут `name`. + +```js +assert.isAtLeast(document.querySelectorAll('input')?.[1]?.name?.length, 1); +``` + +Третьому `input` надайте відповідний атрибут `name`. + +```js +assert.isAtLeast(document.querySelectorAll('input')?.[2]?.name?.length, 1); +``` + +Першому `input` надайте атрибут `placeholder`. + +```js +assert.notEmpty(document.querySelectorAll('input')?.[0]?.placeholder); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+--fcc-editable-region-- +
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+--fcc-editable-region-- +
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md new file mode 100644 index 00000000000..653a044f378 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md @@ -0,0 +1,127 @@ +--- +id: 6143920c8eafb00b735746ce +title: Крок 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Хоча в попередньому уроці ви додали `placeholder` до першого елемента `input`, це не найкраще застосування для доступності; користувачі занадто часто плутають текст заповнювача з дійсним вхідним значенням – вони думають, що в input вже є значення. + +Видаліть текст заповнювача з першого елемента `input`, посилаючись на `label` як найкраще застосування. + +# --hints-- + +Видаліть атрибут `placeholder` з першого елемента `input`. + +```js +assert.isEmpty(document.querySelectorAll('input')?.[0]?.placeholder); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+--fcc-editable-region-- +
+ + +
+--fcc-editable-region-- +
+ + +
+
+ + +
+
+
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md new file mode 100644 index 00000000000..7bc0a26dbf6 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md @@ -0,0 +1,139 @@ +--- +id: 6143931a113bb80c45546287 +title: Крок 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Можливо, `D.O.B.` недостатньо описує. Особливо це стосується користувачів з порушенням зору. Один зі способів розв'язати цю проблему, без додавання видимого тексту до label – це додавання тексту, який може прочитати лише читач екрана. + +Приєднайте елемент `span` класу `sr-only` до відповідного текстового вмісту третього елемента `label`. + +# --hints-- + +Додайте елемент `span` в межах третього елемента `label`. + +```js +assert.exists(document.querySelector('.info:nth-of-type(3) > label > span')); +``` + +Надайте елементу `span` клас `sr-only`. + +```js +assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.className, 'sr-only'); +``` + +Розмістіть `span` після текстового вмісту `D.O.B.`. + +```js +assert.match(document.querySelector('.info:nth-of-type(3) > label')?.innerHTML, /D\.O\.B\. + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+--fcc-editable-region-- +
+ + +
+--fcc-editable-region-- +
+
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md new file mode 100644 index 00000000000..dc7b0110cdd --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md @@ -0,0 +1,125 @@ +--- +id: 614394fb41985e0d2012a93e +title: Крок 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +В межах елемента `span` додайте текст `(Date of Birth)`. + +# --hints-- + +Надайте елементу `span` текст `(Date of Birth)`. + +```js +assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.textContent, '(Date of Birth)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+--fcc-editable-region-- +
+ + +
+--fcc-editable-region-- +
+
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md new file mode 100644 index 00000000000..673e8a1c3e4 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md @@ -0,0 +1,197 @@ +--- +id: 6143956ed76ed60e012faa51 +title: Крок 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Текст `.sr-only` все ще видимий. Існує шаблон для візуального приховування тексту, що може прочитати лише читач екрана. + +Цей шаблон призначений для встановлення наступних властивостей CSS: + +```css +position: absolute; +width: 1px; +height: 1px; +padding: 0; +margin: -1px; +overflow: hidden; +clip: rect(0, 0, 0, 0); +white-space: nowrap; +border: 0; +``` + +Використайте наведене вище для встановлення класу `sr-only`. + +# --hints-- + +Використайте селектор `.sr-only`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.sr-only')); +``` + +Для `.sr-only` надайте `position` зі значенням `absolute`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.position, 'absolute'); +``` + +Для `.sr-only` надайте `width` зі значенням `1px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.width, '1px'); +``` + +Для `.sr-only` надайте `height` зі значенням `1px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.height, '1px'); +``` + +Для `.sr-only` надайте `padding` зі значенням `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.padding, '0px'); +``` + +Для `.sr-only` надайте `margin` зі значенням `-1px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.margin, '-1px'); +``` + +Для `.sr-only` надайте `overflow` зі значенням `hidden`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.overflow, 'hidden'); +``` + +Для `.sr-only` надайте `clip` зі значенням `rect(0, 0, 0, 0)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.clip, 'rect(0px, 0px, 0px, 0px)'); +``` + +Для `.sr-only` надайте `white-space` зі значенням `nowrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.whiteSpace, 'nowrap'); +``` + +Для `.sr-only` надайте `border` зі значенням `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.borderWidth, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md new file mode 100644 index 00000000000..52b5fe99279 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md @@ -0,0 +1,200 @@ +--- +id: 614396f7ae83f20ea6f9f4b3 +title: Крок 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +В межах другого елемента `section` додайте два елементи `div` класу `question-block`. + +Потім в межах кожного елемента `div.question-block` додайте один елемент `p` з текстом зростання чисел, починаючи з `1`, та один елемент `fieldset` класу `question`. + +# --hints-- + +Вкладіть два елементи `div` в межах другого елемента `section`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.length, 2); +``` + +Надайте першому новому елементу `div` клас `question-block`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[0]?.className, 'question-block'); +``` + +Надайте другому новому елементу `div` клас `question-block`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block'); +``` + +Вкладіть один елемент `p` в межах кожного елемента `div.question-block`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.length, 2); +``` + +Надайте першому елементу `p` текст `1`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[0]?.textContent, '1'); +``` + +Надайте другому елементу `p` текст `2`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[1]?.textContent, '2'); +``` + +Вкладіть один елемент `fieldset` в межах кожного елемента `div.question-block`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2); +``` + +Розмістіть перший елемент `fieldset` після першого елемента `p`. + +```js +assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > p + fieldset')); +``` + +Розмістіть другий елемент `fieldset` після другого елемента `p`. + +```js +assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > p + fieldset')); +``` + +Надайте першому елементу `fieldset` клас `question`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[0]?.className, 'question'); +``` + +Надайте другому елементу `fieldset` клас `question`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[1]?.className, 'question'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+--fcc-editable-region-- +
+

HTML

+ +
+--fcc-editable-region-- +
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md new file mode 100644 index 00000000000..b6a72e43588 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md @@ -0,0 +1,177 @@ +--- +id: 6143cb26f7edff2dc28f7da5 +title: Крок 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Кожен `fieldset` міститиме істинні або хибні висловлювання. + +В межах кожного `fieldset` вкладіть один елемент `legend` та один елемент `ul` з двома опціями. + +# --hints-- + +Ви повинні вкласти один елемент `legend` в межах першого елементу `fieldset`. + +```js +assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > legend')?.length, 1); +``` + +Ви повинні вкласти один елемент `ul` в межах першого елементу `fieldset`. + +```js +assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > ul')?.length, 1); +``` + +Ви повинні вкласти два елементи `li` в межах першого елементу `ul`. + +```js +assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.querySelectorAll('li')?.length, 2); +``` + +Ви повинні вкласти один елемент `legend` в межах другого елементу `fieldset`. + +```js +assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > legend')?.length, 1); +``` + +Ви повинні вкласти один елемент `ul` в межах другого елементу `fieldset`. + +```js +assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > ul')?.length, 1); +``` + +Ви повинні вкласти два елементи `li` в межах другого елементу `ul`. + +```js +assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('li')?.length, 2); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+--fcc-editable-region-- +
+

HTML

+
+

1

+
+
+
+

2

+
+
+
+--fcc-editable-region-- +
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md new file mode 100644 index 00000000000..25c0149c1c9 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md @@ -0,0 +1,195 @@ +--- +id: 6144e818fd5ea704fe56081d +title: Крок 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Надайте кожному `fieldset` належний атрибут `name`. Потім надайте невпорядкованим спискам `class` зі значенням `answers-list`. + +Вкінці використайте `legend` для зображення вмісту `fieldset`, поставивши істинні або хибні висловлювання як текстовий вміст. + +# --hints-- + +Першому `fieldset` потрібно надати належний атрибут `name`. _Підказка: я б використав `html-question-one`_ + +```js +assert.notEmpty(document.querySelectorAll('fieldset')?.[0]?.name); +``` + +Другому `fieldset` потрібно надати належний атрибут `name`. _Підказка: я б використав `html-question-two`_ + +```js +assert.notEmpty(document.querySelectorAll('fieldset')?.[1]?.name); +``` + +Першому елементу `ul` потрібно надати `class` зі значенням `answers-list`. + +```js +assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.className, 'answers-list'); +``` + +Другому елементу `ul` потрібно надати `class` зі значенням `answers-list`. + +```js +assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.className, 'answers-list'); +``` + +Ви повинні надати першому елементу `legend` текстовий вміст. + +```js +assert.notEmpty(document.querySelectorAll('legend')?.[0]?.textContent); +``` + +Ви повинні надати другому елементу `legend` текстовий вміст. + +```js +assert.notEmpty(document.querySelectorAll('legend')?.[1]?.textContent); +``` + +Не можна використовувати однаковий текстовий вміст для двох елементів `legend`. + +```js +assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.querySelectorAll('legend')?.[1]?.textContent); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+--fcc-editable-region-- +
+

HTML

+
+

1

+
+ +
    +
  • +
  • +
+
+
+
+

2

+
+ +
    +
  • +
  • +
+
+
+
+--fcc-editable-region-- +
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md new file mode 100644 index 00000000000..61489ef28d8 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md @@ -0,0 +1,231 @@ +--- +id: 6144f8dc6849e405dd8bb829 +title: Крок 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Щоб істинні та хибні висловлювання працювали, потрібен набір inputs, які не дозволяють обирати дві відповіді одночасно. + +В межах кожного елементу списку вкладіть один елемент `label` та в межах кожного елементу `label` вкладіть один елемент `input` з відповідним `type`. + +# --hints-- + +Ви повинні вкласти один елемент `label` в межах першого елементу `li`. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label')); +``` + +Ви повинні вкласти один елемент `label` в межах другого елементу `li`. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label')); +``` + +Ви повинні вкласти один елемент `label` в межах третього елементу `li`. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label')); +``` + +Ви повинні вкласти один елемент `label` в межах четвертого елементу `li`. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label')); +``` + +Ви повинні вкласти один елемент `input` в межах першого елементу `label`. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label')?.querySelector('input')); +``` + +Ви повинні вкласти один елемент `input` в межах другого елементу `label`. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label')?.querySelector('input')); +``` + +Ви повинні вкласти один елемент `input` в межах третього елементу `label`. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label')?.querySelector('input')); +``` + +Ви повинні вкласти один елемент `input` в межах четвертого елементу `label`. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label')?.querySelector('input')); +``` + +Для першого `input` надайте `type` зі значенням `radio`. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.type, 'radio'); +``` + +Для другого `input` надайте `type` зі значенням `radio`. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.type, 'radio'); +``` + +Для третього `input` надайте `type` зі значенням `radio`. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.type, 'radio'); +``` + +Для четвертого `input` надайте `type` зі значенням `radio`. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.type, 'radio'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +--fcc-editable-region-- +
    +
  • +
  • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • +
  • +
+--fcc-editable-region-- +
+
+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md new file mode 100644 index 00000000000..8340a341d7f --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md @@ -0,0 +1,207 @@ +--- +id: 6145e6eeaa66c605eb087fe9 +title: Крок 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Хоча для елементів `label` з вкладеним `input` це необов'язково, краще прямо пов'язувати `label` з відповідним елементом `input`. + +Прив'яжіть елементи `label` до відповідних елементів `input`. + +# --hints-- + +Першому `label` надайте атрибут `for`, що відповідає `id` його елемента `input`. + +```js +const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[0]?.htmlFor; +assert.notEmpty(htmlFor); +assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.id); +``` + +Другому `label` надайте атрибут `for`, що відповідає `id` його елемента `input`. + +```js +const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[1]?.htmlFor; +assert.notEmpty(htmlFor); +assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.id); +``` + +Третьому `label` надайте атрибут `for`, що відповідає `id` його елемента `input`. + +```js +const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[2]?.htmlFor; +assert.notEmpty(htmlFor); +assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.id); +``` + +Четвертому `label` надайте атрибут `for`, що відповідає `id` його елемента `input`. + +```js +const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[3]?.htmlFor; +assert.notEmpty(htmlFor); +assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.id); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +--fcc-editable-region-- +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+--fcc-editable-region-- +
+
+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md new file mode 100644 index 00000000000..367f4782512 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md @@ -0,0 +1,287 @@ +--- +id: 6145e8b5080a5f06bb0223d0 +title: Крок 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Надайте елементам `label` текст таким чином, що `input` буде перед текстом. Потім для елементів `input` надайте `value`, що відповідає тексту. + +Текст має бути `True` або `False`. + +# --hints-- + +Ви повинні надати першому елементу `label` текстовий вміст. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim()); +``` + +Ви повинні надати другому елементу `label` текстовий вміст. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim()); +``` + +Ви повинні надати третьому елементу `label` текстовий вміст. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim()); +``` + +Ви повинні надати четвертому елементу `label` текстовий вміст. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim()); +``` + +Ви повинні розмістити текстовий вміст першого `label` після елементу `input`. + +```js +assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.innerHTML, />[\s\S]+[a-zA-Z]/); +``` + +Ви повинні розмістити текстовий вміст другого `label` після елементу `input`. + +```js +assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.innerHTML, />[\s\S]+[a-zA-Z]/); +``` + +Ви повинні розмістити текстовий вміст третього `label` після елементу `input`. + +```js +assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.innerHTML, />[\s\S]+[a-zA-Z]/); +``` + +Ви повинні розмістити тестовий вміст четвертого `label` після елементу `input`. + +```js +assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.innerHTML, />[\s\S]+[a-zA-Z]/); +``` + +Ви повинні надати першому `label` текст `True` або `False`. + +```js +assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim()); +``` + +Ви повинні надати другому `label` текст `True`. + +```js +const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim(); +assert(l(0) === 'False' ? l(1) === 'True' : true); +``` + +Ви повинні надати другому `label` текст `False`. + +```js +const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim(); +assert(l(0) === 'True' ? l(1) === 'False' : true); +``` + +Ви повинні надати третьому `label` текст `True` або `False`. + +```js +assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim()); +``` + +Ви повинні надати четвертому `label` текст `True`. + +```js +const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim(); +assert(l(2) === 'False' ? l(3) === 'True' : true); +``` + +Ви повинні надати четвертому `label` текст `False`. + +```js +const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim(); +assert(l(2) === 'True' ? l(3) === 'False' : true); +``` + +Для першого `input` надайте `value`, що відповідає текстовому вмісту `label`. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.value?.toLowerCase()); +``` + +Для другого `input` надайте `value`, що відповідає текстовому вмісту `label`. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.value?.toLowerCase()); +``` + +Для третього `input` надайте `value`, що відповідає текстовому вмісту `label`. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.value?.toLowerCase()); +``` + +Для четвертого `input` надайте `value`, що відповідає текстовому вмісту `label`. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.value?.toLowerCase()); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +--fcc-editable-region-- +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+--fcc-editable-region-- +
+
+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md new file mode 100644 index 00000000000..41a2de35a6b --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md @@ -0,0 +1,224 @@ +--- +id: 6145eb5f08a38a0786c7a80c +title: Крок 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Якщо натиснути на radio inputs, можна помітити, що в межах одного поля істина/хиба можна обрати два варіанти одночасно. + +Згрупуйте дані так, щоб за раз можна було обирати лише один варіант з двох. + +# --hints-- + +Першому `input` надайте атрибут `name`. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.name); +``` + +Другому `input` надайте атрибут `name`. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.name); +``` + +Третьому `input` надайте атрибут `name`. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.name); +``` + +Четвертому `input` надайте атрибут `name`. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.name); +``` + +Другому `input` надайте атрибут `name`, що відповідає атрибуту `name` першого `input`. + +```js +const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name; +assert.equal(i(1), i(0)); +``` + +Четвертому `input` надайте атрибут `name`, що відповідає атрибуту `name` третього `input`. + +```js +const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name; +assert.equal(i(3), i(2)); +``` + +Ви повинні надати різні атрибути `name` першому `input` та третьому `input`. + +```js +const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name; +assert.notEqual(i(0), i(2)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +--fcc-editable-region-- +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+--fcc-editable-region-- +
+
+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md new file mode 100644 index 00000000000..08dbb26b4fd --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md @@ -0,0 +1,191 @@ +--- +id: 6145ed1f22caab087630aaad +title: Крок 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Щоб уникнути небажаного повторення, націльте псевдоелемент `before` елементу `p` та надайте йому властивість `content` зі значенням `"Question #"`. + +# --hints-- + +Ви повинні використати селектор `p::before`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('p::before')); +``` + +Ви повинні надати псевдоелементу `p::before` властивість `content` зі значенням `"Question #"`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, 'Question #'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md new file mode 100644 index 00000000000..b8f24cfe4e3 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md @@ -0,0 +1,232 @@ +--- +id: 6145ee65e2e1530938cb594d +title: Крок 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Остання секція вікторини міститиме випадний список та текстове поле. + +Розпочніть з вкладення `div`, що містить `class` зі значенням `formrow`, та вкладіть чотири елементи `div` всередині нього, чергуючи атрибути `class` з `question-block` та `answer`. + +# --hints-- + +Додайте один елемент `div` в межах останнього `section`. + +```js +assert.exists(document.querySelector('section:nth-of-type(3) > div')); +``` + +Першому `div` надайте `class` зі значенням `formrow`. + +```js +assert.equal(document.querySelector('section:nth-of-type(3) > div')?.className, 'formrow'); +``` + +Розмістіть `div.formrow` після елементу `h2`. + +```js +assert.exists(document.querySelector('section:nth-of-type(3) > h2 + div.formrow')); +``` + +Вкладіть чотири елементи `div` всередині `div.formrow`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(3) > div.formrow > div')?.length, 4); +``` + +Першому вкладеному `div` надайте `class` зі значенням `question-block`. + +```js +assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(1)')?.className, 'question-block'); +``` + +Другому вкладеному `div` надайте `class` зі значенням `answer`. + +```js +assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(2)')?.className, 'answer'); +``` + +Третьому вкладеному `div` надайте `class` зі значенням `question-block`. + +```js +assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(3)')?.className, 'question-block'); +``` + +Четвертому вкладеному `div` надайте `class` зі значенням `answer`. + +```js +assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(4)')?.className, 'answer'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+--fcc-editable-region-- +
+

CSS

+ +
+--fcc-editable-region-- +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md new file mode 100644 index 00000000000..f6b5b179ef4 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md @@ -0,0 +1,215 @@ +--- +id: 6145f02240ff8f09f7ec913c +title: Крок 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +В межах елементів `div.question-block` вкладіть один елемент `label` та надайте елементам `label` текстового вмісту + +# --hints-- + +Вкладіть один елемент `label` в межах першого елементу `div.question-block`. + +```js +assert.exists(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label')); +``` + +Вкладіть один елемент `label` в межах другого елементу `div.question-block`. + +```js +assert.exists(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')); +``` + +Надайте першому елементу `label` текстового вмісту. + +```js +assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label')?.textContent?.length, 1); +``` + +Надайте другому елементу `label` текстового вмісту. + +```js +assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.textContent?.length, 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+--fcc-editable-region-- +
+

CSS

+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md new file mode 100644 index 00000000000..073379bfaab --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md @@ -0,0 +1,250 @@ +--- +id: 6145f14f019a4b0adb94b051 +title: Крок 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +В межах першого елементу `div.answer` вкладіть один обов'язковий елемент `select` з трьома відповідними елементами `option`. + +Першому елементу `option` надайте `value` зі значенням `""` та текст `Select an option`. Другому елементу `option` надайте `value` зі значенням `yes` та текст `Yes`. Третьому елементу `option` надайте `value` зі значенням `no` та текст `No`. + +# --hints-- + +Вкладіть один елемент `select` в межах першого елементу `div.answer`. + +```js +assert.exists(document.querySelector('div.answer > select')); +``` + +Вкладіть три елементи `option` в межах елементу `select`. + +```js +assert.equal(document.querySelectorAll('div.answer > select > option')?.length, 3); +``` + +Першому елементу `option` надайте `value` зі значенням `""`. + +```js +assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.value, ''); +``` + +Першому елементу `option` надайте текстовий вміст зі значенням `Select an option`. + +```js +assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.textContent, 'Select an option'); +``` + +Другому елементу `option` надайте `value` зі значенням `yes`. + +```js +assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.value, 'yes'); +``` + +Другому елементу `option` надайте текстовий вміст зі значенням `Yes`. + +```js +assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.textContent, 'Yes'); +``` + +Третьому елементу `option` надайте `value` зі значенням `no`. + +```js +assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.value, 'no'); +``` + +Третьому елементу `option` надайте текстовий вміст зі значенням `No`. + +```js +assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.textContent, 'No'); +``` + +Для `select` надайте атрибут `required`. + +```js +assert.isTrue(document.querySelector('div.answer > select')?.required); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+ +
+
+
+
+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md new file mode 100644 index 00000000000..c28af46c9a4 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md @@ -0,0 +1,222 @@ +--- +id: 6145f3a5cd9be60b9459cdd6 +title: Крок 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Прив'яжіть перший елемент `label` до елементу `select` та надайте елементу `select` атрибут `name`. + +# --hints-- + +Надайте елементу `label` атрибут `for`. + +```js +assert.notEmpty(document.querySelector('.question-block > label')?.htmlFor); +``` + +Надайте елементу `select` атрибут `id`. + +```js +assert.notEmpty(document.querySelector('.answer > select')?.id); +``` + +Елементу `select` надайте `id`, що відповідає атрибуту `for` елемента `label`. + +```js +assert.equal(document.querySelector('.answer > select')?.id, document.querySelector('.question-block > label')?.htmlFor); +``` + +Надайте елементу `select` атрибут `name`. + +```js +assert.notEmpty(document.querySelector('.answer > select')?.name); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+--fcc-editable-region-- +
+ +
+
+ +
+--fcc-editable-region-- +
+ +
+
+
+
+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md new file mode 100644 index 00000000000..dbe9e0f4a91 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md @@ -0,0 +1,229 @@ +--- +id: 6145f47393fbe70c4d885f9c +title: Крок 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Вкладіть один елемент `textarea` в межах другого елементу `div.answer` та вкажіть кількість рядків та стовпців. + +Потім надайте `textarea` текст заповнювача, що описує приклад відповіді. + +# --hints-- + +Вкладіть один елемент `textarea` в межах другого елементу `div.answer`. + +```js +assert.exists(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')); +``` + +Надайте `textarea` атрибут `rows` з числом. + +```js +const rows = document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('rows'); +assert.notEmpty(rows); +assert.isNotNaN(Number(rows)); +``` + +Надайте `textarea` атрибут `cols` з числом. + +```js +const cols = document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('cols'); +assert.notEmpty(cols); +assert.isNotNaN(Number(cols)); +``` + +Надайте `textarea` атрибут `placeholder` з текстом, що описує приклад відповіді. + +```js +assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('placeholder')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md new file mode 100644 index 00000000000..b406c32a48f --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md @@ -0,0 +1,217 @@ +--- +id: 6145f59029474c0d3dc1c8b8 +title: Крок 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Як і з іншими елементами `input` та `label`, прив'яжіть `textarea` до відповідного елементу `label` та надайте атрибут `name`. + +# --hints-- + +Надайте елементу `label` атрибут `for`. + +```js +assert.notEmpty(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor); +``` + +Надайте елементу `textarea` атрибут `id`, що відповідає атрибуту `for` елемента `label`. + +```js +assert.equal(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor, document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.id); +``` + +Надайте елементу `textarea` атрибут `name`. + +```js +assert.notEmpty(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.name); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+--fcc-editable-region-- +
+ +
+
+ +
+--fcc-editable-region-- +
+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md new file mode 100644 index 00000000000..e60311a3f23 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md @@ -0,0 +1,230 @@ +--- +id: 6145f685797bd30df9784e8c +title: Крок 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Не забудьте надати `form` кнопку для відправки форми. + +# --hints-- + +Ви повинні додати елемент `button` або `input`. + +```js +assert.exists(document.querySelector('button') || document.querySelector('main > input') || document.querySelector('form > input')); +``` + +Розмістіть кнопку для відправки форми в межах елементу `form`. + +```js +assert.exists(document.querySelector('form > button') || document.querySelector('form > input')); +``` + +Розмістіть кнопку для відправки форми після останнього елементу `section`. + +```js +assert.exists(document.querySelector('section:last-of-type + button') || document.querySelector('section:last-of-type + input')); +``` + +Надайте кнопці для відправки форми `type` зі значенням `submit`. + +```js +assert.exists(document.querySelector('button[type="submit"]') || document.querySelector('form > input[type="submit"]')); +``` + +Кнопка для відправки форми повинна мати текст `Submit`. + +```js +assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? document.querySelector('input[type="submit"]')?.value, 'Submit'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+--fcc-editable-region-- +
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+--fcc-editable-region-- +
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md new file mode 100644 index 00000000000..9855c86575c --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md @@ -0,0 +1,215 @@ +--- +id: 6145f829ac6a920ebf5797d7 +title: Крок 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Два останні семантичні елементи HTML цього проєкту – `footer` та `address`. Елемент `footer` є контейнером для збору вмісту, пов'язаного зі сторінкою, а елемент `address` є контейнером для контактної інформації для автора сторінки. + +Після елементу `main` додайте один елемент `footer` та вкладіть один елемент `address` в його межах. + +# --hints-- + +Додайте один елемент `footer` після елементу `main`. + +```js +assert.exists(document.querySelector('main + footer')); +``` + +Вкладіть один елемент `address` в межах елементу `footer`. + +```js +assert.exists(document.querySelector('footer > address')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+--fcc-editable-region-- + +--fcc-editable-region-- + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md new file mode 100644 index 00000000000..c2420888b79 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md @@ -0,0 +1,220 @@ +--- +id: 6145f8f8bcd4370f6509078e +title: Крок 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +В межах елементу `address` додайте наступне: + +```html +freeCodeCamp
+San Francisco
+California
+USA +``` + +Ви можете відвідати, але можете нічого не знайти... + +# --hints-- + +Додайте текст вище, включно з тегами `
`, до елемента `address`. + +```js +assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Francisco\nCalifornia\nUSA'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+--fcc-editable-region-- +
+
+ +
+
+--fcc-editable-region-- + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md new file mode 100644 index 00000000000..e7cf13300af --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md @@ -0,0 +1,229 @@ +--- +id: 6145fb5018cb5b100cb2a88c +title: Крок 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Елемент `address` необов’язково повинен містити фізико-географічне розташування. Його можна використати, щоб надати посилання на предмет. + +Загорніть посилання навколо тексту `freeCodeCamp` та встановіть локацію на `https://freecodecamp.org`. + +# --hints-- + +Додайте елемент `a`. + +```js +assert.exists(document.querySelector('address > a')); +``` + +Надайте елементу `a` атрибут `href` зі значенням `https://freecodecamp.org`. + +```js +assert.equal(document.querySelector('address > a')?.getAttribute('href'), 'https://freecodecamp.org'); +``` + +Загорніть елемент `a` навколо існуючого тексту `freeCodeCamp`. + +```js +assert.equal(document.querySelector('address > a')?.innerHTML, 'freeCodeCamp'); +assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g)?.length, 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+--fcc-editable-region-- +
+
+ freeCodeCamp
+ San Francisco
+ California
+ USA +
+
+--fcc-editable-region-- + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md new file mode 100644 index 00000000000..6d311c7f52e --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md @@ -0,0 +1,256 @@ +--- +id: 6145fc3707fc3310c277f5c8 +title: Крок 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Повернемось до стилізації сторінки. Виберіть елементи списку з панелі навігації та надайте їм наступні стилі: + +```css +color: #dfdfe2; +margin: 0 0.2rem; +padding: 0.2rem; +display: block; +``` + +# --hints-- + +Використайте селектор `nav li` або `nav > ul > li`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('nav li') || gs('nav > ul > li')); +``` + +Елементам `li` надайте `color` зі значенням `#dfdfe2`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const color = gs('nav li')?.color ?? gs('nav > ul > li')?.color; +assert.equal(color, 'rgb(223, 223, 226)'); +``` + +Елементам `li` надайте `margin` зі значенням `0 0.2rem`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const margin = gs('nav li')?.margin ?? gs('nav > ul > li')?.margin; +assert.equal(margin, '0px 0.2rem'); +``` + +Елементам `li` надайте `padding` зі значенням `0.2rem`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const padding = gs('nav li')?.padding ?? gs('nav > ul > li')?.padding; +assert.equal(padding, '0.2rem'); +``` + +Елементам `li` надайте `display` зі значенням `block`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const display = gs('nav li')?.display ?? gs('nav > ul > li')?.display; +assert.equal(display, 'block'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md new file mode 100644 index 00000000000..e320b513af1 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md @@ -0,0 +1,260 @@ +--- +id: 614796cb8086be482d60e0ac +title: Крок 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +На тему візуальної контрастності: контраст між елементами є ключовим фактором. Наприклад, контраст між текстом та фоном заголовка має бути принаймні 4.5:1. + +Змініть колір шрифту всіх елементів anchor в межах елементів списку на контрастний зі співвідношенням не менше 7:1. + +# --hints-- + +Використайте селектор `li > a`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('li > a')); +``` + +Надайте елементу `a` властивість `color`. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('li > a')?.color); +``` + +Надайте властивості `color` контрасту з фоном не менше 7:1. _Підказка: я б використав `#dfdfe2`_ + +```js +function luminance(r, g, b) { + const a = [r, g, b].map((v) => { + v /= 255; + return v <= 0.03928 ? v / 12.92 : Math.pow( (v + 0.055) / 1.055, 2.4 ); + }); + return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; +} +function contrast(rgb1, rgb2) { + const lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]); + const lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]); + const brightest = Math.max(lum1, lum2); + const darkest = Math.min(lum1, lum2); + return (brightest + 0.05) + / (darkest + 0.05); +} +const backgroundColour = [27, 27, 50]; + +for (let elem of document.querySelectorAll('li > a')) { + const a = getComputedStyle(elem)?.color; + const rgbA = a?.match(/(\d+),\s(\d+),\s(\d+)/); + const aColour = [rgbA[1], rgbA[2], rgbA[3]]; + assert.isAtLeast(contrast(backgroundColour, aColour), 7); +} +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md new file mode 100644 index 00000000000..f966aa5cd03 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md @@ -0,0 +1,260 @@ +--- +id: 6147a14ef5668b5881ef2297 +title: Крок 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Щоб навігаційні кнопки виглядали як типові кнопки, видаліть підкреслення з тегів anchor. + +Потім створіть новий селектор, націлений на елементи навігаційного списку, щоб при наведенні курсору на них змінювались колір фону та колір тексту, а курсор ставав указкою. + +# --hints-- + +Ви повинні використати існуючий селектор `li > a`, щоб встановити `text-decoration` на `none`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('li > a')?.textDecoration, 'none'); +``` + +Використайте селектор `nav > ul > li:hover` або `nav li:hover`, щоб стилізувати елементи при наведенні. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('nav > ul > li:hover') || gs('nav li:hover')); +``` + +Наведеним елементам `li` надайте `background-color` зі значенням `#dfdfe2`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const bgColor = gs('nav > ul > li:hover')?.backgroundColor ?? gs('nav li:hover')?.backgroundColor; +assert.equal(bgColor, 'rgb(223, 223, 226)'); +``` + +Наведеним елементам `li` надайте `color` зі значенням `#1b1b32`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const color = gs('nav > ul > li:hover')?.color ?? gs('nav li:hover')?.color; +assert.equal(color, 'rgb(27, 27, 50)'); +``` + +Наведеним елементам `li` надайте `cursor` зі значенням `pointer`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const cursor = gs('nav > ul > li:hover')?.cursor ?? gs('nav li:hover')?.cursor; +assert.equal(cursor, 'pointer'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +--fcc-editable-region-- + + +li > a { + color: inherit; +} +--fcc-editable-region-- + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md new file mode 100644 index 00000000000..f09a7a45f6e --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md @@ -0,0 +1,253 @@ +--- +id: 614878f7a412310647873015 +title: Крок 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Почистьте `header`, використовуючи _Flexbox_, щоб розмістити пробіл між дочірніми елементами, та вертикально зцентруйте їх. + +Потім прикріпіть `header` у верхній частині вюпорту. + +# --hints-- + +Для `header` надайте `justify-content` зі значенням `space-between`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.justifyContent, 'space-between'); +``` + +Для `header` надайте `align-items` зі значенням `center`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.alignItems, 'center'); +``` + +Для `header` надайте `position` зі значенням `fixed`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.position, 'fixed'); +``` + +Для `header` надайте `top` зі значенням `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +--fcc-editable-region-- +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + +} +--fcc-editable-region-- + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md new file mode 100644 index 00000000000..5709edb12d1 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md @@ -0,0 +1,261 @@ +--- +id: 61487b77d4a37707073a64e5 +title: Крок 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Якщо ширина екрана невелика, то `h1` не переносить текстовий вміст як слід. Вирівняйте текст елемента `h1` у центрі. + +Потім для `main` надайте padding таким чином, що header секції `Student Info` можна побачити повністю. + +# --hints-- + +Для `h1` надайте `text-align` зі значенням `center`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign, 'center'); +``` + +Додайте селектор `main`, щоб націлити елемент `main`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('main')); +``` + +Для `main` надайте `padding-top` зі значенням принаймні `25px`. + +```js +assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('main')?.paddingTop?.replace(/\D+/, '')), 25); +``` + +Ви повинні лише змінити значення `padding-top`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingBottom); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingLeft); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +--fcc-editable-region-- +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + +} + + +--fcc-editable-region-- + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md new file mode 100644 index 00000000000..80a408c8aa6 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md @@ -0,0 +1,275 @@ +--- +id: 61487da611a65307e78d2c20 +title: Крок 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +На маленьких екранах неупорядкований список в навігаційній панелі перекриває праву частину екрану. + +Виправте це з допомогою _Flexbox_, щоб перенести вміст `ul`. Потім встановіть наступні властивості CSS, щоб правильно вирівняти текст: + +```css +align-items: center; +padding-inline-start: 0; +margin-block: 0; +height: 100%; +``` + +# --hints-- + +Для `ul` надайте `flex-wrap` зі значенням `wrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.flexWrap, 'wrap'); +``` + +Для `ul` надайте `align-items` зі значенням `center`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.alignItems, 'center'); +``` + +Для `ul` надайте `padding-inline-start` зі значенням `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.paddingInlineStart, '0px'); +``` + +Для `ul` надайте `margin-block` зі значенням `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.marginBlock, '0px'); +``` + +Для `ul` надайте `height` зі значенням `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +--fcc-editable-region-- +nav > ul { + display: flex; + justify-content: space-evenly; + +} +--fcc-editable-region-- + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md new file mode 100644 index 00000000000..ea9134c7352 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md @@ -0,0 +1,287 @@ +--- +id: 61487f703571b60899055cf9 +title: Крок 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Встановіть ширину елементів `section` на `80%` від їхнього батьківського контейнера. Потім використайте margins, щоб зцентрувати елементи `section`, додаючи `10px` до нижнього margin. + +Будьте певні, що елементи `section` не можуть бути більшими за `600px` завширшки. + +# --hints-- + +Використайте селектор `section`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('section')); +``` + +Для `section` надайте `width` зі значенням `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.width, '80%'); +``` + +Для `section` надайте `margin-top` зі значенням `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginTop, '0px'); +``` + +Для `section` надайте `margin-right` зі значенням `auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginRight, 'auto'); +``` + +Для `section` надайте `margin-bottom` зі значенням `10px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginBottom, '10px'); +``` + +Для `section` надайте `margin-left` зі значенням `auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginLeft, 'auto'); +``` + +Для `section` надайте `max-width` зі значенням `600px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +--fcc-editable-region-- + + +--fcc-editable-region-- + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md new file mode 100644 index 00000000000..3e2f59077c9 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md @@ -0,0 +1,259 @@ +--- +id: 614880dc16070e093e29bc56 +title: Крок 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Замініть верхній margin елементів `h2` на верхній padding зі значенням `60px`. + +# --hints-- + +Для `h2` надайте `margin-top` зі значенням `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.marginTop, '0px'); +``` + +Для `h2` надайте `padding-top` зі значенням `60px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +--fcc-editable-region-- +h2 { + border-bottom: 4px solid #dfdfe2; + +} +--fcc-editable-region-- + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md new file mode 100644 index 00000000000..d94c579069e --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md @@ -0,0 +1,280 @@ +--- +id: 614883b6fa720e09fb167de9 +title: Крок 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Додайте padding зверху та зліва від елементів `.info` та встановіть інші значення на `0`. + +# --hints-- + +Використайте селектор `.info`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.info')); +``` + +Для `.info` надайте `padding-top` зі значенням принаймні `1px`. + +```js +assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingTop?.replace(/\D+/, '')), 1); +``` + +Для `.info` надайте `padding-right` зі значенням `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingRight, '0px'); +``` + +Для `.info` надайте `padding-bottom` зі значенням `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingBottom, '0px'); +``` + +Для `.info` надайте `padding-left` зі значенням принаймні `1px`. + +```js +assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingLeft?.replace(/\D+/, '')), 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md new file mode 100644 index 00000000000..f39913df1e9 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md @@ -0,0 +1,364 @@ +--- +id: 614884c1f5d6f30ab3d78cde +title: Крок 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Елементам `.formrow` надайте верхній margin та лівий і правий padding. Інші значення padding повинні бути `0`. + +Потім збільште розмір шрифту для всіх елементів `input`. + +# --hints-- + +Використайте селектор `.formrow`, щоб націлити елементи `.formrow`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.formrow')); +``` + +Для `.formrow` надайте `margin-top` зі значенням принаймні `1px`. + +```js +const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.marginTop; +let valInPx = 0; +if (/^\d+rem$/.test(val)) { + valInPx = remToPx(Number(val.replace('rem', ''))); +} else if (/^\d+em$/.test(val)) { + valInPx = emToPx(Number(val.replace('em', ''))); +} else { + valInPx = Number(val?.replace('px', '')); +} +function emToPx(em) { + return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); +} +function remToPx(rem) { + return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); +} +assert.isAtLeast(valInPx, 1); +``` + +Для `.formrow` надайте `padding-top` зі значенням `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingTop, '0px'); +``` + +Для `.formrow` надайте `padding-right` зі значенням принаймні `1px`. + +```js +const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingRight; +let valInPx = 0; +if (/^\d+rem$/.test(val)) { + valInPx = remToPx(Number(val.replace('rem', ''))); +} else if (/^\d+em$/.test(val)) { + valInPx = emToPx(Number(val.replace('em', ''))); +} else { + valInPx = Number(val?.replace('px', '')); +} +function emToPx(em) { + return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); +} +function remToPx(rem) { + return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); +} +assert.isAtLeast(valInPx, 1); +``` + +Для `.formrow` надайте `padding-bottom` зі значенням `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingBottom, '0px'); +``` + +Для `.formrow` надайте `padding-left` зі значенням принаймні `1px`. + +```js +const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingLeft; +let valInPx = 0; +if (/^\d+rem$/.test(val)) { + valInPx = remToPx(Number(val.replace('rem', ''))); +} else if (/^\d+em$/.test(val)) { + valInPx = emToPx(Number(val.replace('em', ''))); +} else { + valInPx = Number(val?.replace('px', '')); +} +function emToPx(em) { + return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); +} +function remToPx(rem) { + return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); +} +assert.isAtLeast(valInPx, 1); +``` + +Використайте селектор `input`, щоб націлити елементи `input`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('input')); +``` + +Для `input` надайте `font-size` більший за `13px`. + +```js +const val = new __helpers.CSSHelp(document).getStyle('input')?.fontSize; +let valInPx = 0; +if (/^\d+rem$/.test(val)) { + valInPx = remToPx(Number(val.replace('rem', ''))); +} else if (/^\d+em$/.test(val)) { + valInPx = emToPx(Number(val.replace('em', ''))); +} else { + valInPx = Number(val?.replace('px', '')); +} +function emToPx(em) { + return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); +} +function remToPx(rem) { + return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); +} +assert.isAtLeast(valInPx, 13); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md new file mode 100644 index 00000000000..34b82e3403c --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md @@ -0,0 +1,286 @@ +--- +id: 61488ecfd05e290b5712e6da +title: Крок 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Щоб перша секція виглядала більш вбудованою, націльте тільки елементи `input` в межах елементів `.info`, встановіть `width` на `50%` та вирівняйте текст за лівим краєм. + +# --hints-- + +Використайте селектор `.info input` або `.info > input`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('.info input') || gs('.info > input')); +``` + +Елементам `input` надайте `width` зі значенням `50%`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.width; +const width = gs('.info input') ?? gs('.info > input'); +assert.equal(width, '50%'); +``` + +Елементам `input` надайте `text-align` зі значенням `left`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.textAlign; +const textAlign = gs('.info input') ?? gs('.info > input'); +assert.equal(textAlign, 'left'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md new file mode 100644 index 00000000000..f559114e6a5 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md @@ -0,0 +1,291 @@ +--- +id: 6148d99cdc7acd0c519862cb +title: Крок 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Націльте всі елементи `label` в межах елементів `.info`, надайте їм `width` зі значенням `10%` та зробіть так, щоб вони не становили менше за `55px`. + +# --hints-- + +Використайте селектор `.info label` або `.info > label`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('.info label') || gs('.info > label')); +``` + +Елементам `label` надайте `width` зі значенням `10%`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.width; +const width = gs('.info label') || gs('.info > label'); +assert.equal(width, '10%'); +``` + +Елементам `label` надайте `min-width` зі значенням `55px`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.minWidth; +const minWidth = gs('.info label') || gs('.info > label'); +assert.equal(minWidth, '55px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +--fcc-editable-region-- +.info input { + width: 50%; + text-align: left; +} + + +--fcc-editable-region-- + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md new file mode 100644 index 00000000000..25d51617686 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md @@ -0,0 +1,306 @@ +--- +id: 6148da157cc0bd0d06df5c0a +title: Крок 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Щоб вирівняти блоки `input` один з одним, встановіть властивість `display` на `inline-block` для всіх елементів `input` та `label` в межах елементів `.info`. + +Також вирівняйте текст за правим краєм. + +# --hints-- + +Використайте селектор `.info > label, .info > input` або `.info label, .info input`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('.info > label, .info > input') || gs('.info label, .info input') || gs('.info > input, .info > label') || gs('.info input, .info label')); +``` + +Елементам `input` та `label` надайте `display` зі значенням `inline-block`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.display; +const display = gs('.info > label, .info > input') ?? gs('.info label, .info input') ?? gs('.info > input, .info > label') ?? gs('.info input, .info label'); +assert.equal(display, 'inline-block'); +``` + +Елементам `input` та `label` надайте `text-align` зі значенням `right`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.textAlign; +const textAlign = gs('.info > label, .info > input') ?? gs('.info label, .info input') ?? gs('.info > input, .info > label') ?? gs('.info input, .info label'); +assert.equal(textAlign, 'right'); +``` + +Встановіть властивість `text-align: right` перед правилом `.info input`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyleRule(s); +assert(gs('.info input').isDeclaredAfter('.info label, .info input') || gs('.info input').isDeclaredAfter('.info > label, .info > input') || gs('.info input').isDeclaredAfter('.info > input, .info > label') || gs('.info input').isDeclaredAfter('.info input, .info label')); + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +--fcc-editable-region-- + + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} +--fcc-editable-region-- + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md new file mode 100644 index 00000000000..82d4745b23b --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md @@ -0,0 +1,323 @@ +--- +id: 6148dc095264000dce348bf5 +title: Крок 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Щоб підчистити елементи `.question-block`, встановіть наступні властивості CSS: + +```css +text-align: left; +display: block; +width: 100%; +margin-top: 20px; +padding-top: 5px; +``` + +# --hints-- + +Ви повинні використати селектор `.question-block`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.question-block')); +``` + +Елементу `.question-block` надайте `display` зі значенням `block`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.display, 'block'); +``` + +Елементу `.question-block` надайте `width` зі значенням `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.width, '100%'); +``` + +Елементу `.question-block` надайте `margin-top` зі значенням `20px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.marginTop, '20px'); +``` + +Елементу `.question-block` надайте `padding-top` зі значенням `5px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.paddingTop, '5px'); +``` + +Елементу `.question-block` надайте `text-align` зі значенням `left`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAlign, 'left'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md new file mode 100644 index 00000000000..609e25216f9 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md @@ -0,0 +1,316 @@ +--- +id: 6148dcaaf2e8750e6cb4501a +title: Крок 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Використайте наступні властивості CSS, щоб елементи розділів показувались як вищий пріоритет: + +```css +margin-top: 5px; +padding-left: 15px; +font-size: 20px; +``` + +# --hints-- + +Ви повинні використати селектор елемента `p`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('p')); +``` + +Елементу `p` надайте `margin-top` зі значенням `5px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.marginTop, '5px'); +``` + +Елементу `p` надайте `padding-left` зі значенням `15px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.paddingLeft, '15px'); +``` + +Елементу `p` надайте `font-size` зі значенням `20px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md new file mode 100644 index 00000000000..3710f5e5ddb --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md @@ -0,0 +1,315 @@ +--- +id: 6148defa9c01520fb9d178a0 +title: Крок 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Видаліть стиль за замовчуванням для елементів списку `.answers-list` та видаліть padding неупорядкованого списку. + +# --hints-- + +Використайте селектор `.answers-list`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.answers-list')); +``` + +Для `.answers-list` надайте `list-style` зі значенням `none`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.listStyle, 'none'); +``` + +Для `.answers-list` надайте `padding` зі значенням `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md new file mode 100644 index 00000000000..7c234372680 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md @@ -0,0 +1,360 @@ +--- +id: 6148dfab9b54c110577de165 +title: Крок 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Надайте кнопці submit дизайн в стилі freeCodeCamp завдяки наступним властивостям CSS: + +```css +display: block; +margin: 40px auto; +width: 40%; +padding: 15px; +font-size: 23px; +background: #d0d0d5; +border: 3px solid #3b3b4f; +``` + +# --hints-- + +Використайте селектор елемента `button`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('button')); +``` + +Для `button` надайте `display` зі значенням `block`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.display, 'block'); +``` + +Для `button` надайте `margin` зі значенням `40px auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.margin, '40px auto'); +``` + +Для `button` надайте `width` зі значенням `40%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.width, '40%'); +``` + +Для `button` надайте `padding` зі значенням `15px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.padding, '15px'); +``` + +Для `button` надайте `font-size` зі значенням `23px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.fontSize, '23px'); +``` + +Для `button` надайте `background` зі значенням `#d0d0d5`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.backgroundColor, 'rgb(208, 208, 213)'); +``` + +Для `button` надайте `border` зі значенням `3px solid #3b3b4f`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px solid rgb(59, 59, 79)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md new file mode 100644 index 00000000000..ff6f8fb5252 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md @@ -0,0 +1,336 @@ +--- +id: 6148e0bcc13efd10f7d7a6a9 +title: Крок 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Встановіть `footer` background color на `#2a2a40` та використайте _Flexbox_, щоб горизонтально зцентрувати текст. + +# --hints-- + +Використайте селектор елемента `footer`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('footer')); +``` + +Для `footer` надайте `background-color` зі значенням `#2a2a40`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.backgroundColor, 'rgb(42, 42, 64)'); +``` + +Для `footer` надайте `display` зі значенням `flex`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.display, 'flex'); +``` + +Для `footer` надайте `justify-content` зі значенням `center`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent, 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md new file mode 100644 index 00000000000..6bef408f6fb --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md @@ -0,0 +1,356 @@ +--- +id: 6148e161ecec9511941f8833 +title: Крок 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Ми не можемо прочитати текст. Націльте `footer` та елемент anchor в межах, щоб встановити колір шрифту на колір з належним співвідношенням контрасту. + +# --hints-- + +Використайте селектор `footer, footer a`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('footer, footer a') || gs('footer a, footer')); +``` + +Встановіть `color` на значення зі співвідношенням контрасту не менше `7:1`. _Підказка: я рекомендую `#dfdfe2`_ + +```js +function luminance(r, g, b) { + const a = [r, g, b].map((v) => { + v /= 255; + return v <= 0.03928 ? v / 12.92 : Math.pow( (v + 0.055) / 1.055, 2.4 ); + }); + return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; +} +function contrast(rgb1, rgb2) { + const lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]); + const lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]); + const brightest = Math.max(lum1, lum2); + const darkest = Math.min(lum1, lum2); + return (brightest + 0.05) + / (darkest + 0.05); +} +const backgroundColour = [42, 42, 64]; + +const foot = getComputedStyle(document.querySelector('footer'))?.color; +const a = getComputedStyle(document.querySelector('footer a'))?.color; + +const rgbFoot = foot?.match(/(\d+),\s(\d+),\s(\d+)/); +const rgbA = a?.match(/(\d+),\s(\d+),\s(\d+)/); +const footColour = [rgbFoot[1], rgbFoot[2], rgbFoot[3]]; +const aColour = [rgbA[1], rgbA[2], rgbA[3]]; +assert.isAtLeast(contrast(backgroundColour, footColour), 7); +assert.isAtLeast(contrast(backgroundColour, aColour), 7); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md new file mode 100644 index 00000000000..9be845131ea --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md @@ -0,0 +1,359 @@ +--- +id: 6148e28706b34912340fd042 +title: Крок 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Горизонтально зцентруйте весь текст в межах елемента `address` та додайте деякий padding. + +# --hints-- + +Використайте селектор елемента `address`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('address')); +``` + +Для `address` надайте `text-align` зі значенням `center`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('address')?.textAlign, 'center'); +``` + +Для `address` надайте `padding-top` зі значенням принаймні `1px`. + +```js +assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-top')?.replace(/\D\D+/, '')), 1); +``` + +Для `address` надайте `padding-right` зі значенням принаймні `1px`. + +```js +assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-right')?.replace(/\D\D+/, '')), 1); +``` + +Для `address` надайте `padding-bottom` зі значенням принаймні `1px`. + +```js +assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-bottom')?.replace(/\D\D+/, '')), 1); +``` + +Для `address` надайте `padding-left` зі значенням принаймні `1px`. + +```js +assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-left')?.replace(/\D\D+/, '')), 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +footer, +footer a { + color: #dfdfe2; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md new file mode 100644 index 00000000000..f08f402263e --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md @@ -0,0 +1,342 @@ +--- +id: 6148e335c1edd512d00e4691 +title: Крок 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +З натисканням на навігаційні посилання, вюпорт повинен перестрибувати на відповідну секцію. Однак цей стрибок може дезорієнтувати деяких користувачів. + +Виберіть всі елементи та встановіть `scroll-behavior` на `smooth`. + +# --hints-- + +Використайте селектор `*`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +``` + +Для `*` надайте `scroll-behavior` зі значенням `smooth`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smooth'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +footer, +footer a { + color: #dfdfe2; +} + +address { + text-align: center; + padding: 0.3em; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md new file mode 100644 index 00000000000..2f671755a2d --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md @@ -0,0 +1,685 @@ +--- +id: 6148e5aeb102e3142de026a2 +title: Крок 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Зрештою, навігаційна доступність може бути покращена завдяки забезпеченню швидких команд. + +Атрибут `accesskey` приймає розділений пробілами список ключів доступу. Наприклад: + +```html + +``` + +Надайте кожному з навігаційних посилань однолітерний ключ доступу. + +_Примітка: не завжди рекомендовано використовувати ключі доступу, але вони можуть бути корисними_ + +Хороша робота. Ви завершили практичний проєкт _ вікторина «Доступність»_. + +# --hints-- + +Першому елементу `a` надайте однолітерний `accesskey`. + +```js +assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('accesskey')?.length, 1); +``` + +Другому елементу `a` надайте однолітерний `accesskey`. + +```js +assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('accesskey')?.length, 1); +``` + +Третьому елементу `a` надайте однолітерний `accesskey`. + +```js +assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.length, 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +@media (prefers-reduced-motion: no-preference) { + * { + scroll-behavior: smooth; + } +} + +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +footer, +footer a { + color: #dfdfe2; +} + +address { + text-align: center; + padding: 0.3em; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` + +## --solutions-- + +```html + + + + + + + + Accessibility Quiz + + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+ +
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +@media (prefers-reduced-motion: no-preference) { + * { + scroll-behavior: smooth; + } +} + +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + position: fixed; + background-color: #1b1b32; + top: 0; +} + +#logo { + width: max(100px, 18vw); + aspect-ratio: 35 / 4; + max-height: 100%; + background-color: #0a0a23; + padding: 0.4rem; +} + +h1 { + text-align: center; + font-size: min(5vw, 1.2em); + color: #f1be32; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + display: block; + margin: 0 0.2rem; + color: #dfdfe2; + padding: 0.2rem; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0px auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + + +.info { + margin: 0 auto; + padding: 10px 0 0 5px; +} +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, +.info input { + display: inline-block; + text-align: right; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.info input { + width: 50%; + text-align: left; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +footer, +footer a { + color: #dfdfe2; +} + +address { + text-align: center; + padding: 0.3em; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md new file mode 100644 index 00000000000..cd24f68fbb0 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md @@ -0,0 +1,50 @@ +--- +id: 614ccc21ea91ef1736b9b578 +title: Крок 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Вітаємо в першій частині вікторини «Доступність». Оскільки ви стаєте досвідченим HTML та CSS розробником, ми розпочали з базового шаблонного коду. + +Розпочніть подорож по доступності з надання атрибута `lang` елементу `html`. Це допоможе читачам екрану з ідентифікацією мови сторінки. + +# --hints-- + +Ви повинні надати елементу `html` атрибут `lang`. _Підказка: ви можете використати значення `en` для англійської._ + +```js +assert.match(code, //i); +// TODO: This should/could be fixed in the builder.js +// assert.notThrow(Intl.getCanonicalLocales(document.querySelector('html').lang)); +``` + +# --seed-- + +## --seed-contents-- + +```html + +--fcc-editable-region-- + + + + + + + + +--fcc-editable-region-- + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +```