From e878b3ee576ed3db381dc8fb0f39064cbb65dc7d Mon Sep 17 00:00:00 2001 From: Kristofer Koishigawa Date: Wed, 22 Dec 2021 04:45:08 +0900 Subject: [PATCH] feat: add CSS Color Markers project (#44459) * feat: first draft of CSS Color Markers project * Update client/i18n/locales/english/intro.json Co-authored-by: Nicholas Carrigan (he/him) * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-007.md Co-authored-by: Nicholas Carrigan (he/him) * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-046.md Co-authored-by: Nicholas Carrigan (he/him) * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-079.md Co-authored-by: Nicholas Carrigan (he/him) * feat: begin adding tests * feat: add more tests, fix wording and some CSS values * feat: add more steps, fix wording * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-014.md Co-authored-by: Shaun Hamilton * feat: add more tests, simplify some regex tests, fix wording * fix: preformatted block names and help category map * feat: finish first draft of color marker tests * fix: simplify text involving classes * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-004.md Co-authored-by: Shaun Hamilton * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-008.md Co-authored-by: Shaun Hamilton * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-009.md Co-authored-by: Shaun Hamilton * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-010.md Co-authored-by: Shaun Hamilton * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-011.md Co-authored-by: Shaun Hamilton * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-013.md Co-authored-by: Shaun Hamilton * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-014.md Co-authored-by: Shaun Hamilton * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-014.md Co-authored-by: Shaun Hamilton * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-054.md Co-authored-by: Shaun Hamilton * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-089.md Co-authored-by: Shaun Hamilton * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-094.md Co-authored-by: Shaun Hamilton * fix: add outro message to final CSS color markers step * fix: make most regex tests case insensitive, add note about casing for filename * correct double key from rebase * remove jQuery for betterness * move project to new superblock * adjust meta to match others * fix: add new to helper call * regex-ise funny lessons * unnecessary: add -22 superblock * fix: make linter happy * regex-ise missed challenges...oops * Revert "fix: make linter happy" This reverts commit 6e6e3cf50351a4707055250af549aab0e47ee002. * Revert "unnecessary: add -22 superblock" This reverts commit a58045607e03eda93818e11205578553a8184291. * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-005.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-010.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-052.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-053.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-054.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-055.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-056.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-057.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-058.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-059.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-062.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-063.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-064.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-065.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-068.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-069.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-082.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * fix: rename project to "Learn CSS Colors by Building a Set of Colored Markers" * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-010.md Co-authored-by: Shaun Hamilton * adjust superblock to include `2022/` Co-authored-by: Nicholas Carrigan (he/him) Co-authored-by: Shaun Hamilton Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> --- client/i18n/locales/english/intro.json | 29 +- .../index.md | 10 + client/utils/help-category-map.json | 1 + .../meta.json | 390 ++++++++++++++++++ .../step-001.md | 66 +++ .../step-002.md | 67 +++ .../step-003.md | 56 +++ .../step-004.md | 52 +++ .../step-005.md | 53 +++ .../step-006.md | 72 ++++ .../step-007.md | 74 ++++ .../step-008.md | 59 +++ .../step-009.md | 71 ++++ .../step-010.md | 66 +++ .../step-011.md | 68 +++ .../step-012.md | 62 +++ .../step-013.md | 60 +++ .../step-014.md | 91 ++++ .../step-015.md | 65 +++ .../step-016.md | 73 ++++ .../step-017.md | 61 +++ .../step-018.md | 68 +++ .../step-019.md | 86 ++++ .../step-020.md | 86 ++++ .../step-021.md | 84 ++++ .../step-022.md | 90 ++++ .../step-023.md | 98 +++++ .../step-024.md | 78 ++++ .../step-025.md | 84 ++++ .../step-026.md | 79 ++++ .../step-027.md | 79 ++++ .../step-028.md | 79 ++++ .../step-029.md | 77 ++++ .../step-030.md | 77 ++++ .../step-031.md | 79 ++++ .../step-032.md | 79 ++++ .../step-033.md | 77 ++++ .../step-034.md | 95 +++++ .../step-035.md | 91 ++++ .../step-036.md | 87 ++++ .../step-037.md | 87 ++++ .../step-038.md | 84 ++++ .../step-039.md | 82 ++++ .../step-040.md | 79 ++++ .../step-041.md | 87 ++++ .../step-042.md | 89 ++++ .../step-043.md | 77 ++++ .../step-044.md | 99 +++++ .../step-045.md | 107 +++++ .../step-046.md | 81 ++++ .../step-047.md | 85 ++++ .../step-048.md | 87 ++++ .../step-049.md | 83 ++++ .../step-050.md | 87 ++++ .../step-051.md | 79 ++++ .../step-052.md | 79 ++++ .../step-053.md | 79 ++++ .../step-054.md | 85 ++++ .../step-055.md | 79 ++++ .../step-056.md | 77 ++++ .../step-057.md | 79 ++++ .../step-058.md | 79 ++++ .../step-059.md | 79 ++++ .../step-060.md | 79 ++++ .../step-061.md | 79 ++++ .../step-062.md | 77 ++++ .../step-063.md | 79 ++++ .../step-064.md | 81 ++++ .../step-065.md | 91 ++++ .../step-066.md | 79 ++++ .../step-067.md | 77 ++++ .../step-068.md | 77 ++++ .../step-069.md | 77 ++++ .../step-070.md | 87 ++++ .../step-071.md | 92 +++++ .../step-072.md | 85 ++++ .../step-073.md | 88 ++++ .../step-074.md | 89 ++++ .../step-075.md | 92 +++++ .../step-076.md | 103 +++++ .../step-077.md | 99 +++++ .../step-078.md | 104 +++++ .../step-079.md | 98 +++++ .../step-080.md | 97 +++++ .../step-081.md | 100 +++++ .../step-082.md | 123 ++++++ .../step-083.md | 97 +++++ .../step-084.md | 97 +++++ .../step-085.md | 123 ++++++ .../step-086.md | 109 +++++ .../step-087.md | 104 +++++ .../step-088.md | 108 +++++ .../step-089.md | 111 +++++ .../step-090.md | 104 +++++ .../step-091.md | 104 +++++ .../step-092.md | 110 +++++ .../step-093.md | 102 +++++ .../step-094.md | 184 +++++++++ utils/preformatted-block-names.json | 1 + 99 files changed, 8450 insertions(+), 5 deletions(-) create mode 100644 client/src/pages/learn/responsive-web-design/learn-css-colors-by-building-a-set-of-colored-markers/index.md create mode 100644 curriculum/challenges/_meta/learn-css-colors-by-building-a-set-of-colored-markers/meta.json create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-001.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-002.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-003.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-004.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-005.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-006.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-007.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-008.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-009.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-010.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-011.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-012.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-013.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-014.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-015.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-016.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-017.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-018.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-019.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-020.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-021.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-022.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-023.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-024.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-025.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-026.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-027.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-028.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-029.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-030.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-031.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-032.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-033.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-034.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-035.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-036.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-037.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-038.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-039.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-040.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-041.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-042.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-043.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-044.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-045.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-046.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-047.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-048.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-049.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-050.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-051.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-052.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-053.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-054.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-055.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-056.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-057.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-058.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-059.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-060.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-061.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-062.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-063.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-064.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-065.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-066.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-067.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-068.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-069.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-070.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-071.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-072.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-073.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-074.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-075.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-076.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-077.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-078.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-079.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-080.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-081.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-082.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-083.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-084.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-085.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-086.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-087.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-088.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-089.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-090.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-091.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-092.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-093.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-094.md diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 402b304486..fb1cb69f02 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -95,6 +95,10 @@ "title": "Build a Technical Documentation Page Project", "intro": ["placeholder", "holder of place"] }, + "learn-css-colors-by-building-a-set-of-colored-markers": { + "title": "Learn CSS Colors by Building a Set of Colored Markers", + "intro": ["placeholder", "holder of place"] + }, "learn-html-by-building-a-cat-photo-app": { "title": "Learn HTML by Building a Cat Photo App", "intro": [ @@ -262,15 +266,24 @@ }, "basic-javascript-rpg-game": { "title": "Basic JavaScript RPG Game", - "intro": ["", ""] + "intro": [ + "", + "" + ] }, "intermediate-javascript-calorie-counter": { "title": "Intermediate JavaScript Calorie Counter", - "intro": ["", ""] + "intro": [ + "", + "" + ] }, "functional-programming-spreadsheet": { "title": "Functional Programming Spreadsheet", - "intro": ["", ""] + "intro": [ + "", + "" + ] } } }, @@ -370,7 +383,13 @@ "In these projects, you'll need to fetch data and parse a dataset, then use D3 to create different data visualizations. Finish them all to earn your Data Visualization certification." ] }, - "d3-dashboard": { "title": "D3 Dashboard", "intro": ["", ""] } + "d3-dashboard": { + "title": "D3 Dashboard", + "intro": [ + "", + "" + ] + } } }, "relational-databases": { @@ -637,4 +656,4 @@ "legacy-header": "Legacy Courses", "legacy-desc": "These courses are no longer part of the certification path, but are still available for you to further your learning." } -} +} \ No newline at end of file diff --git a/client/src/pages/learn/responsive-web-design/learn-css-colors-by-building-a-set-of-colored-markers/index.md b/client/src/pages/learn/responsive-web-design/learn-css-colors-by-building-a-set-of-colored-markers/index.md new file mode 100644 index 0000000000..19482980c9 --- /dev/null +++ b/client/src/pages/learn/responsive-web-design/learn-css-colors-by-building-a-set-of-colored-markers/index.md @@ -0,0 +1,10 @@ +--- +title: Introduction to the Learn CSS Colors by Building a Set of Colored Markers Project +block: learn-css-colors-by-building-a-set-of-colored-markers +superBlock: Responsive Web Design +isBeta: true +--- + +## Introduction to the Learn CSS Colors by Building a Set of Colored Markers Project + +This is a test for the new project-based curriculum. diff --git a/client/utils/help-category-map.json b/client/utils/help-category-map.json index d159fa7a76..ca9eae3f7f 100644 --- a/client/utils/help-category-map.json +++ b/client/utils/help-category-map.json @@ -79,6 +79,7 @@ "learn-github-by-building-a-list-of-inspirational-quotes": "Relational Databases", "number-guessing-game": "Relational Databases", "learn-accessibility-by-building-a-quiz": "HTML-CSS", + "learn-css-colors-by-building-a-set-of-colored-markers": "HTML-CSS", "learn-html-forms-by-building-a-registration-form": "HTML-CSS", "learn-css-animation-by-building-a-ferris-wheel": "HTML-CSS", "learn-css-flexbox-by-building-a-photo-gallery": "HTML-CSS", diff --git a/curriculum/challenges/_meta/learn-css-colors-by-building-a-set-of-colored-markers/meta.json b/curriculum/challenges/_meta/learn-css-colors-by-building-a-set-of-colored-markers/meta.json new file mode 100644 index 0000000000..4ff8245bd3 --- /dev/null +++ b/curriculum/challenges/_meta/learn-css-colors-by-building-a-set-of-colored-markers/meta.json @@ -0,0 +1,390 @@ +{ + "name": "Learn CSS Colors by Building a Set of Colored Markers", + "isUpcomingChange": false, + "usesMultifileEditor": true, + "hasEditableBoundaries": true, + "dashedName": "learn-css-colors-by-building-a-set-of-colored-markers", + "order": 2, + "time": "5 hours", + "template": "", + "required": [], + "superBlock": "2022/responsive-web-design", + "challengeOrder": [ + [ + "61695197ac34f0407e339882", + "Step 1" + ], + [ + "61695ab9f6ffe951c16d03dd", + "Step 2" + ], + [ + "61695c4aad56f95497c19583", + "Step 3" + ], + [ + "61695d1fbc003856628bf561", + "Step 4" + ], + [ + "616965351e74d4689eb6de30", + "Step 5" + ], + [ + "616968c2c94c8071b349c146", + "Step 6" + ], + [ + "61696ef7ac756c829f9e4048", + "Step 7" + ], + [ + "616971b3cd990186b66c99a1", + "Step 8" + ], + [ + "616d3a67ccf800ad94ec89ae", + "Step 9" + ], + [ + "616d47bc9eedc4bc7f621bec", + "Step 10" + ], + [ + "616d4a84b756d9c4b8255093", + "Step 11" + ], + [ + "616d50b93ba424d6282c99cf", + "Step 12" + ], + [ + "616d525007b8c5d8b3308b1c", + "Step 13" + ], + [ + "616d55bd160a95e22453a081", + "Step 14" + ], + [ + "616d595270d902f0e7086e18", + "Step 15" + ], + [ + "61764c602bee6974e7790f35", + "Step 16" + ], + [ + "61764f23ea21477b76f3b80f", + "Step 17" + ], + [ + "61764f7e5240eb7ccc7f6a0a", + "Step 18" + ], + [ + "61764fdda535587e1fefb3aa", + "Step 19" + ], + [ + "6176519636a76b810ab1219a", + "Step 20" + ], + [ + "617b65579ce424bf5f02ca73", + "Step 21" + ], + [ + "617b8b38f32bf2080a140675", + "Step 22" + ], + [ + "617b8e0d93a8d10d9a90e720", + "Step 23" + ], + [ + "617b92b9de349513466f6156", + "Step 24" + ], + [ + "617b954d9f4f6217a749380e", + "Step 25" + ], + [ + "617b97abd9f3f61d1590b815", + "Step 26" + ], + [ + "617b9ad735109e217284e095", + "Step 27" + ], + [ + "617bb5624a75e86463b7e638", + "Step 28" + ], + [ + "617bb77353188166af43f3ac", + "Step 29" + ], + [ + "617bb9fdef27bc6aa0470ac2", + "Step 30" + ], + [ + "617bbb6b97a83f6d1f7d6e38", + "Step 31" + ], + [ + "617bc3386dc7d07d6469bf20", + "Step 32" + ], + [ + "617bc4824e233180553a8069", + "Step 33" + ], + [ + "617bd6ec666b1da2587e4e37", + "Step 34" + ], + [ + "618a00ed1ca871a2b3aca0cb", + "Step 35" + ], + [ + "618a0927005553b74bfa05ae", + "Step 36" + ], + [ + "618a0b2befb143baefab632b", + "Step 37" + ], + [ + "618a1275e873dcc803c2d1aa", + "Step 38" + ], + [ + "618a132676346ac9f7fd59dd", + "Step 39" + ], + [ + "618a16873520a8d088ffdf44", + "Step 40" + ], + [ + "618a16d21bd3dad1bb3aa8ef", + "Step 41" + ], + [ + "619b72a0db211f1c29afb906", + "Step 42" + ], + [ + "619b7396e57b771f903be90d", + "Step 43" + ], + [ + "619b7424f43ec9215e538afe", + "Step 44" + ], + [ + "619b74fa777a2b2473c94f82", + "Step 45" + ], + [ + "619b761916dac02643940022", + "Step 46" + ], + [ + "619b7c3c83de403126b69c1e", + "Step 47" + ], + [ + "619b7fd56aa2253778bcf5f7", + "Step 48" + ], + [ + "61a489b8579e87364b2d2cdb", + "Step 49" + ], + [ + "61a493ead935c148d2b76312", + "Step 50" + ], + [ + "61b095989e7fc020b43b1bb9", + "Step 51" + ], + [ + "61b095a79e7fc020b43b1bba", + "Step 52" + ], + [ + "61a498399534644f59cff05e", + "Step 53" + ], + [ + "61a49d15bdbb5e57cc6fd280", + "Step 54" + ], + [ + "61a4a53c4459446dc134a1c6", + "Step 55" + ], + [ + "61a4a6e908bc34725b4c25ac", + "Step 56" + ], + [ + "61a4a7877da33a73a1c1723e", + "Step 57" + ], + [ + "61a4ac092eb21e7dbfe61c33", + "Step 58" + ], + [ + "61a4acbb5587197f68544d00", + "Step 59" + ], + [ + "61a4ada3aabeec822b2975d9", + "Step 60" + ], + [ + "61a4ae5f29eb5584187201c3", + "Step 61" + ], + [ + "61b095c79e7fc020b43b1bbb", + "Step 62" + ], + [ + "61a5be9833e7dc178de2af10", + "Step 63" + ], + [ + "61a5bfe091060f1d6a629dd0", + "Step 64" + ], + [ + "61a5c906ab73313316e342f0", + "Step 65" + ], + [ + "61a5ca57f50ded36d33eef96", + "Step 66" + ], + [ + "61a5d594b887335228ee6533", + "Step 67" + ], + [ + "61a5d6701ee08953ca375243", + "Step 68" + ], + [ + "61a5d79c858bef560e26c685", + "Step 69" + ], + [ + "61a5d7ef1cfcf45764df07a2", + "Step 70" + ], + [ + "61adc60b69cd4b87739d2174", + "Step 71" + ], + [ + "61b092eb9e7fc020b43b1bb2", + "Step 72" + ], + [ + "61b093179e7fc020b43b1bb3", + "Step 73" + ], + [ + "61b093219e7fc020b43b1bb4", + "Step 74" + ], + [ + "61b093329e7fc020b43b1bb5", + "Step 75" + ], + [ + "61b093429e7fc020b43b1bb6", + "Step 76" + ], + [ + "61b0934c9e7fc020b43b1bb7", + "Step 77" + ], + [ + "61b0936d9e7fc020b43b1bb8", + "Step 78" + ], + [ + "61adc91467b5d59328b9f781", + "Step 79" + ], + [ + "61add79e739a5faee9d96080", + "Step 80" + ], + [ + "61add929e41980b1edbdba7e", + "Step 81" + ], + [ + "61addaf7e83988b59a7d18ff", + "Step 82" + ], + [ + "61ade49b2dad60c076cbd32d", + "Step 83" + ], + [ + "61b09f739aa6572d2064f9b8", + "Step 84" + ], + [ + "61b0a1b2af494934b7ec1a72", + "Step 85" + ], + [ + "61b0a44a6b865738ba49b9fb", + "Step 86" + ], + [ + "61b306305810f1c9040ce5a2", + "Step 87" + ], + [ + "61b30995968123ceb6b76167", + "Step 88" + ], + [ + "61b30a286c228bd0c493c09a", + "Step 89" + ], + [ + "61b31287fb580ae75a486047", + "Step 90" + ], + [ + "61b315e76a63b3ecbbb11b75", + "Step 91" + ], + [ + "61b3183655ec10efd8c0bb07", + "Step 92" + ], + [ + "61b31a451057fff645ec09be", + "Step 93" + ], + [ + "61b31cd7b0c76bfc076b4719", + "Step 94" + ] + ] +} \ No newline at end of file diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-001.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-001.md new file mode 100644 index 0000000000..8669316c4f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-001.md @@ -0,0 +1,66 @@ +--- +id: 61695197ac34f0407e339882 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +As you've seen in the previous projects, webpages should start with a `DOCTYPE html` declaration, followed by an `html` element. + +Add a `DOCTYPE html` declaration at the top of the document, and an `html` element after that. + +# --hints-- + +Your code should contain the `DOCTYPE` reference. + +```js +assert(code.match(/` after the type. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have an opening tag. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have a closing tag. + +```js +assert(code.match(/<\/html\s*>/gi)); +``` + +Your `html` element should be below the `DOCTYPE` declaration. + +```js +assert(code.match(/(?)/gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-002.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-002.md new file mode 100644 index 0000000000..20f457eb26 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-002.md @@ -0,0 +1,67 @@ +--- +id: 61695ab9f6ffe951c16d03dd +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Nest a `head` element within the `html` element. Just after the `head` element, add a `body` element. + +# --hints-- + +You should have an opening `head` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `head` tag. + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +You should have an opening `body` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `body` tag. + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +Your `head` and `body` elements should be siblings. + +```js +assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); +``` + +Your `head` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); +``` + +Your `body` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-003.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-003.md new file mode 100644 index 0000000000..992c3632b4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-003.md @@ -0,0 +1,56 @@ +--- +id: 61695c4aad56f95497c19583 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Remember that the `title` element gives search engines extra information about the page. It also tells browsers what text to display in the title bar when the page is open, and on the tab for the page. + +Within the `head` element, nest a `title` element with the text `CSS Color Markers`. + +# --hints-- + +You should have an opening `title` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `title` tag. + +```js +assert(code.match(/<\/title\s*>/i)); +``` + +Your project should have the title `CSS Color Markers`. + +```js +const title = document.querySelector('title'); +assert.equal(title?.text?.trim()?.toLowerCase(), 'css color markers') +``` + +Remember, casing and spelling matter for the title text. + +```js +const title = document.querySelector('title'); +assert.equal(title?.text?.trim(), 'CSS Color Markers'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-004.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-004.md new file mode 100644 index 0000000000..aa336b0f71 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-004.md @@ -0,0 +1,52 @@ +--- +id: 61695d1fbc003856628bf561 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +To tell browsers how to encode characters on your page, set the `charset` to `utf-8`. `utf-8` is a universal character set that includes almost every character from all human languages. + +Inside the `head` element, nest a `meta` element with the attribute `charset` set to `utf-8`. Remember that `meta` elements are self-closing, and do not need a closing tag. + +# --hints-- + +You should have one `meta` element. + +```js +const meta = document.querySelectorAll('meta'); +assert(meta?.length === 1); +``` + +Your `meta` element should be a self-closing element. + +```js +assert(code.match(/<\/meta>/i) === null); +``` + +Your `meta` element should have a `charset` attribute set to `utf-8`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => m?.getAttribute('charset')?.toLowerCase() === 'utf-8'); +assert.exists(target); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + CSS Color Markers + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-005.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-005.md new file mode 100644 index 0000000000..b13de50067 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-005.md @@ -0,0 +1,53 @@ +--- +id: 616965351e74d4689eb6de30 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Finally, use a `viewport` `` tag to make sure your page looks the same on all devices. + +Nest a self-closing `meta` element within the `head`. Give it a `name` attribute set to `viewport` and a `content` attribute set to `width=device-width, initial-scale=1.0`. + +# --hints-- + +You should have two `meta` elements. + +```js +const meta = document.querySelectorAll('meta'); +assert(meta?.length === 2); +``` + +Your new `meta` element should be a self-closing element. + +```js +assert(code.match(/<\/meta>/i) === null); +``` + +Your new `meta` element should have a `name` attribute set to `viewport`, and a `content` attribute set to `width=device-width, initial-scale=1.0`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0'); +assert.exists(target); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + CSS Color Markers + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-006.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-006.md new file mode 100644 index 0000000000..97e7cf60b7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-006.md @@ -0,0 +1,72 @@ +--- +id: 616968c2c94c8071b349c146 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Now you're ready to start adding content to the page. + +Within the `body`, nest an `h1` element with the text `CSS Color Markers`. + +# --hints-- + +Your code should have an `h1` element. + +```js +const title = document.querySelector('h1'); +assert.exists(title); +``` + +You should have an opening `h1` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `h1` tag. + +```js +assert(code.match(/<\/h1\s*>/i)); +``` + +Your `h1` element should be within the `body` element. + +```js +assert(document.querySelector('h1')?.parentElement?.localName === 'body'); +``` + +Your `h1` element should have the text `CSS Color Markers`. + +```js +const h1 = document.querySelector('h1'); +assert.equal(h1?.textContent?.trim()?.toLowerCase(), 'css color markers') +``` + +Remember, the casing and spelling matter for the `h1` text. + +```js +const h1 = document.querySelector('h1'); +assert.equal(h1?.textContent?.trim(), 'CSS Color Markers'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-007.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-007.md new file mode 100644 index 0000000000..c82ce980a8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-007.md @@ -0,0 +1,74 @@ +--- +id: 61696ef7ac756c829f9e4048 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +In this project you'll work with an external CSS file to style the page. We've already created a `styles.css` file for you. But before you can use it, you'll need to link it to the page. + +Nest a `link` element within the `head`. Give it a `rel` attribute set to `stylesheet`, a `type` attribute set to `text/css`, and an `href` attribute set to `styles.css`. + +# --hints-- + +Your code should have one `link` element. + +```js +assert(code.match(//i) === null); +``` + +Your `link` element should be within your `head` element. + +```js +const head = code.match(/(.|\r|\n)*<\/head>/i)?.[0]; +assert(head.match(/ + + --fcc-editable-region-- + + + + CSS Color Markers + + --fcc-editable-region-- + +

CSS Color Markers

+ + +``` + +```css +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-008.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-008.md new file mode 100644 index 0000000000..d059c8a436 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-008.md @@ -0,0 +1,59 @@ +--- +id: 616971b3cd990186b66c99a1 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Now that your external CSS file is set up, you can start styling the page. + +As a reminder, here's how to target a paragraph element and align it to the right: + +```css +p { + text-align: right; +} +``` + +Create a new CSS rule that targets the `h1` element, and set its `text-align` property to `center`. + +# --hints-- + +You should use an `h1` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')); +``` + +Your `h1` CSS rule should have a `text-align` property set to `center`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-009.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-009.md new file mode 100644 index 0000000000..3c3ca6e078 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-009.md @@ -0,0 +1,71 @@ +--- +id: 616d3a67ccf800ad94ec89ae +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Now you'll add some elements that you'll eventually style into color markers. + +First, within the `body`, add a `div` element and set its `class` attribute to `container`. Make sure the `div` element is below the `h1` element. + +# --hints-- + +You should have an opening `div` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `div` tag. + +```js +assert(code.match(/<\/div\s*>/i)); +``` + +Your `div` element should be within your `body` element. + +```js +assert(document.querySelector('div')?.parentElement?.localName === 'body'); +``` + +Your `div` element should be after the `h1` element. + +```js +assert.exists(document.querySelector('h1 + div')); +``` + +Your `div` element should have a `class` attribute set to `container`. + +```js +assert(document.querySelector('div')?.classList?.contains('container')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + +--fcc-editable-region-- + +

CSS Color Markers

+ +--fcc-editable-region-- + +``` + +```css +h1 { + text-align: center; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-010.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-010.md new file mode 100644 index 0000000000..29890d0d16 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-010.md @@ -0,0 +1,66 @@ +--- +id: 616d47bc9eedc4bc7f621bec +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Next, within the `div`, add another `div` element and give it a class of `marker`. + +# --hints-- + +Your new `div` element should have an opening tag. + +```js +assert([...code.matchAll(//gi)][1]); +``` + +Your new `div` element should have a closing tag. + +```js +assert([...code.matchAll(/<\/div\s*>/gi)][1]); +``` + +You should nest your new `div` element within the `div` with the class `container`. + +```js +assert(document.querySelector('.container')?.children[0]?.localName === 'div'); +``` + +You should give your new `div` element a class of `marker`. + +```js +const containerChildren = [...document.querySelector('.container')?.children]; +assert(containerChildren.every(child => child.classList?.contains('marker'))); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + +--fcc-editable-region-- + +

CSS Color Markers

+
+
+ +--fcc-editable-region-- + +``` + +```css +h1 { + text-align: center; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-011.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-011.md new file mode 100644 index 0000000000..b4e5739e60 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-011.md @@ -0,0 +1,68 @@ +--- +id: 616d4a84b756d9c4b8255093 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +It's time to add some color to the page. Remember that one way to add color to an element is to use a color keyword like `black`, `cyan`, or `yellow`. + +As a reminder, here's how to target the class `freecodecamp`: + +```css +.freecodecamp { + +} +``` + +Create a new CSS rule that targets the class `marker`, and set its `background-color` property to `red`. + +# --hints-- + +You should create a class selector to target the `marker` class. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.marker')); +``` + +Your `.marker` CSS rule should have a `background-color` property set to `red`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.marker')?.backgroundColor === 'red'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-012.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-012.md new file mode 100644 index 0000000000..cd8da44b1a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-012.md @@ -0,0 +1,62 @@ +--- +id: 616d50b93ba424d6282c99cf +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Notice that your marker doesn't seem to have any color. The background color was actually applied, but since the marker `div` element is empty, it doesn't have any width or height by default. + +In your `.marker` CSS rule, set the `width` property to `200px` and the `height` property to `25px`. + +# --hints-- + +Your `.marker` CSS rule should have a `width` property set to `200px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.marker')?.width === '200px'); +``` + +Your `.marker` CSS rule should have a `height` property set to `25px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.marker')?.height === '25px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +--fcc-editable-region-- +.marker { + background-color: red; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-013.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-013.md new file mode 100644 index 0000000000..e9be78a9b3 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-013.md @@ -0,0 +1,60 @@ +--- +id: 616d525007b8c5d8b3308b1c +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Your marker would look better if it was centered on the page. An easy way to do that is with the `margin` shorthand property. + +In the last project, you set the margin area of elements separately with properties like `margin-top` and `margin-left`. The `margin` shorthand property makes it easy to set multiple margin areas at the same time. + +To center your marker on the page, set its `margin` property to `auto`. This sets `margin-top`, `margin-right`, `margin-bottom`, and `margin-left` all to `auto`. + +# --hints-- + +Your `.marker` CSS rule should have a `margin` property set to `auto`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.marker')?.margin === 'auto'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +--fcc-editable-region-- +.marker { + width: 200px; + height: 25px; + background-color: red; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-014.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-014.md new file mode 100644 index 0000000000..178187523a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-014.md @@ -0,0 +1,91 @@ +--- +id: 616d55bd160a95e22453a081 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Now that you've got one marker centered with color, it's time to add the other markers. + +In the `container` `div`, add two more `div` elements and give them each a class of `marker`. + +# --hints-- + +Your first new `div` element should have an opening tag. + +```js +assert([...code.matchAll(//gi)][2]); +``` + +Your first new `div` element should have a closing tag. + +```js +assert([...code.matchAll(/<\/div\s*>/gi)][2]); +``` + +Your second new `div` element should have an opening tag. + +```js +assert([...code.matchAll(//gi)][3]); +``` + +Your second new `div` element should have a closing tag. + +```js +assert([...code.matchAll(/<\/div\s*>/gi)][3]); +``` + +Your new `div` elements should be within the `div` with the class `container`. + +```js +const containerChildren = [...document.querySelector('.container')?.children]; +assert(containerChildren.every(child => child?.localName === 'div') && containerChildren.length === 3); +``` + +Your new `div` elements should both have a class of `marker`. + +```js +const containerChildren = [...document.querySelector('.container')?.children]; +assert(containerChildren.every(child => child?.classList?.contains('marker'))); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+--fcc-editable-region-- +
+
+
+
+--fcc-editable-region-- + + +``` + +```css +h1 { + text-align: center; +} + +.marker { + width: 200px; + height: 25px; + background-color: red; + margin: auto; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-015.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-015.md new file mode 100644 index 0000000000..35afa215dd --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-015.md @@ -0,0 +1,65 @@ +--- +id: 616d595270d902f0e7086e18 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +While you have three separate marker `div` elements, they look like one big rectangle. You should add some space between them to make it easier to see each element. + +When the shorthand `margin` property has two values, it sets `margin-top` and `margin-bottom` to the first value, and `margin-left` and `margin-right` to the second value. + +In your `.marker` CSS rule, set the `margin` property to `10px auto`. + +# --hints-- + +Your `.marker` CSS rule should have a `margin` property set to `10px auto`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.marker')?.margin === '10px auto'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +--fcc-editable-region-- +.marker { + width: 200px; + height: 25px; + background-color: red; + margin: auto; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-016.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-016.md new file mode 100644 index 0000000000..7c4f6b8146 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-016.md @@ -0,0 +1,73 @@ +--- +id: 61764c602bee6974e7790f35 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +In school, you might have learned that red, yellow, and blue are primary colors, and learned how to create new colors by mixing those. However, this is an outdated model. + +These days, there are two main color models: the additive RGB (red, green, blue) model used in electronic devices, and the subtractive CMYK (cyan, magenta, yellow, black) model used in print. In this project you'll work with the RGB model. + +First, add the `class` `one` to the first marker `div` element. + +# --hints-- + +You should add the class `one` to the first marker `div` element. + +```js +const containerFirstChild = [...document.querySelector('.container')?.children][0]; +assert(containerFirstChild?.classList?.contains('one')); +``` + +Your first marker `div` should have the classes `marker` and `one`. + +```js +const containerFirstChild = [...document.querySelector('.container')?.children][0]; +assert(containerFirstChild?.classList?.contains('marker') && containerFirstChild?.classList?.contains('one')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+--fcc-editable-region-- +
+
+
+
+
+
+--fcc-editable-region-- +
+ + +``` + +```css +h1 { + text-align: center; +} + +.marker { + width: 200px; + height: 25px; + background-color: red; + margin: 10px auto; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-017.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-017.md new file mode 100644 index 0000000000..208e1edb18 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-017.md @@ -0,0 +1,61 @@ +--- +id: 61764f23ea21477b76f3b80f +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Next, remove the `background-color` property and its value from the `.marker` CSS rule. + +# --hints-- + +Your `.marker` CSS rule should not have a `background-color` property and value. + +```js +assert(!code.includes('background-color') && !new __helpers.CSSHelp(document).getStyle('.marker')?.backgroundColor); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +--fcc-editable-region-- +.marker { + width: 200px; + height: 25px; + background-color: red; + margin: 10px auto; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-018.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-018.md new file mode 100644 index 0000000000..be7899ed1b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-018.md @@ -0,0 +1,68 @@ +--- +id: 61764f7e5240eb7ccc7f6a0a +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Then, create a new CSS rule that targets the class `one` and set its `background-color` property to `red`. + +# --hints-- + +You should use a class selector to target the class `one`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')); +``` + +Your `.one` CSS rule should have a `background-color` property set to `red`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'red'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-019.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-019.md new file mode 100644 index 0000000000..47aff680bc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-019.md @@ -0,0 +1,86 @@ +--- +id: 61764fdda535587e1fefb3aa +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Add the class `two` to the second marker `div`, and the class `three` to the third marker `div`. + +# --hints-- + +You should add the class `two` to the second marker `div` element in the `container` `div`. + +```js +const containerSecondChild = [...document.querySelector('.container')?.children][1]; +assert(containerSecondChild?.classList?.contains('two')); +``` + +Your second marker `div` should have the classes `marker` and `two`. + +```js +const containerSecondChild = [...document.querySelector('.container')?.children][1]; +assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild.classList?.contains('two')); +``` + +You should add the class `three` to the third marker `div` element in the `container` `div`. + +```js +const containerThirdChild = [...document.querySelector('.container')?.children][2]; +assert(containerThirdChild?.classList?.contains('three')); +``` + +Your third marker `div` should have the classes `marker` and `three`. + +```js +const containerThirdChild = [...document.querySelector('.container')?.children][2]; +assert(containerThirdChild?.classList?.contains('marker') && containerThirdChild?.classList?.contains('three')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+--fcc-editable-region-- +
+
+
+
+
+
+--fcc-editable-region-- +
+ + +``` + +```css +h1 { + text-align: center; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: red; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-020.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-020.md new file mode 100644 index 0000000000..0d941cc3ea --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-020.md @@ -0,0 +1,86 @@ +--- +id: 6176519636a76b810ab1219a +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Create a CSS rule that targets the class `two` and set its `background-color` property to `green`. + +Also, create a separate CSS rule that targets the class `three` and set its `background-color` to `blue`. + +# --hints-- + +You should use a class selector to target the class `two`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')); +``` + +Your `.two` CSS rule should have a `background-color` property set to `green`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'green'); +``` + +You should use a class selector to target the class `three`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')); +``` + +Your `.three` CSS rule should have a `background-color` property set to `blue`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'blue'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: red; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-021.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-021.md new file mode 100644 index 0000000000..2ba6a89265 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-021.md @@ -0,0 +1,84 @@ +--- +id: 617b65579ce424bf5f02ca73 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Earlier you learned that the RGB color model is additive. This means that colors begin as black, and change as different levels of red, green, and blue are introduced. + +An easy way to see this is with the CSS `rgb` function. + +Create a new CSS rule that targets the class `container` and set its `background-color` to black with `rgb(0, 0, 0)`. + +# --hints-- + +You should use a class selector to target the class `container`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.container')); +``` + +Your `.container` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: red; +} + +.two { + background-color: green; +} + +.three { + background-color: blue; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-022.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-022.md new file mode 100644 index 0000000000..af7414e0be --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-022.md @@ -0,0 +1,90 @@ +--- +id: 617b8b38f32bf2080a140675 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +A function is a piece of code that can take an input and perform a specific action. The CSS `rgb` function accepts a values, or arguments, for red, green, and blue, and produces a color: + +```css +rgb(red, green, blue); +``` + +Each red, green, and blue value is a number from `0` to `255`. `0` means that there's 0% of that color, and is black. `255` means that there's 100% of that color. + +In the `.one` CSS rule, replace the color keyword `red` with the `rgb` function. For the `rgb` function, set the value for red to `255`, the value for green to `0`, and the value for blue to `0`. + +# --hints-- + +Your `.one` CSS rule should not use the `red` color keyword to set the `background-color` property. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor !== 'red'); +``` + +Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(0, 0, 0); +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: red; +} +--fcc-editable-region-- + +.two { + background-color: green; +} + +.three { + background-color: blue; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-023.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-023.md new file mode 100644 index 0000000000..5e3175ae95 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-023.md @@ -0,0 +1,98 @@ +--- +id: 617b8e0d93a8d10d9a90e720 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Notice that the `background-color` for your marker is still red. This is because you set the red value of the `rgb` function to the max of `255`, or 100% red, and set both the green and blue values to `0`. + +Now use the `rgb` function to set the other colors. + +In the `.two` CSS rule, use the `rgb` function to set the `background-color` to the max value for green, and `0` for the other values. And in the `.three` CSS rule, use the `rgb` function to set the `background-color` to the max value for blue, and `0` for the other values. + +# --hints-- + +Your `.two` CSS rule should not use the `green` color keyword to set the `background-color` property. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor !== 'green'); +``` + +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 0)'); +``` + +Your `.three` CSS rule should not use the `blue` color keyword to set the `background-color` property. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor !== 'blue'); +``` + +Your `.three` CSS rule should have a `background-color` property set to `rgb(0, 0, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(0, 0, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(0, 0, 0); +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 0, 0); +} + +--fcc-editable-region-- +.two { + background-color: green; +} + +.three { + background-color: blue; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-024.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-024.md new file mode 100644 index 0000000000..fb48d0acf4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-024.md @@ -0,0 +1,78 @@ +--- +id: 617b92b9de349513466f6156 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +While the red and blue markers look the same, the green one is much lighter than it was before. This is because the `green` color keyword is actually a darker shade, and is about halfway between black and the maximum value for green. + +In the `two` CSS rule, set the green value in the `rgb` function to `127` to lower its intensity. + +# --hints-- + +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 127, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 127, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(0, 0, 0); +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 0, 0); +} + +--fcc-editable-region-- +.two { + background-color: rgb(0, 255, 0); +} +--fcc-editable-region-- + +.three { + background-color: rgb(0, 0, 255); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-025.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-025.md new file mode 100644 index 0000000000..06215e6ecb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-025.md @@ -0,0 +1,84 @@ +--- +id: 617b954d9f4f6217a749380e +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Now add a little more vertical space between your markers and the edge of the `container` element they're in. + +In the `.container` CSS rule, use the shorthand `padding` property to add `10px` of top and bottom padding, and set the left and right padding to `0`. This works similarly to the shorthand `margin` property you used earlier. + +# --hints-- + +You should not remove the `background-color` property and its value from the `.container` CSS rule. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +Your `.container` CSS rule should have a `padding` property set to `10px 0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.container')?.padding === '10px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +--fcc-editable-region-- +.container { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 0, 0); +} + +.two { + background-color: rgb(0, 127, 0); +} + +.three { + background-color: rgb(0, 0, 255); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-026.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-026.md new file mode 100644 index 0000000000..964766f03b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-026.md @@ -0,0 +1,79 @@ +--- +id: 617b97abd9f3f61d1590b815 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +In the additive RGB color model, primary colors are colors that, when combined, create pure white. But for this to happen, each color needs to be at its highest intensity. + +Before you combine colors, set your green marker back to pure green. For the `rgb` function in the `.two` CSS rule, set green back to the max value of `255`. + +# --hints-- + +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(0, 0, 0); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 0, 0); +} + +--fcc-editable-region-- +.two { + background-color: rgb(0, 127, 0); +} +--fcc-editable-region-- + +.three { + background-color: rgb(0, 0, 255); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-027.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-027.md new file mode 100644 index 0000000000..fc74492fbc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-027.md @@ -0,0 +1,79 @@ +--- +id: 617b9ad735109e217284e095 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Now that you have the primary RGB colors, it's time to combine them. + +For the `rgb` function in the `.container` rule, set the red, green, and blue values to the max of `255`. + +# --hints-- + +Your `.container` CSS rule should have a `background-color` property set to `rgb(255, 255, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(255, 255, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +--fcc-editable-region-- +.container { + background-color: rgb(0, 0, 0); + padding: 10px 0; +} +--fcc-editable-region-- + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 0, 0); +} + +.two { + background-color: rgb(0, 255, 0); +} + +.three { + background-color: rgb(0, 0, 255); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-028.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-028.md new file mode 100644 index 0000000000..256363bf31 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-028.md @@ -0,0 +1,79 @@ +--- +id: 617bb5624a75e86463b7e638 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Secondary colors are the colors you get when you combine primary colors. You might have noticed some secondary colors in the last step as you changed the red, green, and blue values. + +To create the first secondary color, yellow, update the `rgb` function in the `.one` CSS rule to combine pure red and pure green. + +# --hints-- + +Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 255, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 255, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: rgb(255, 0, 0); +} +--fcc-editable-region-- + +.two { + background-color: rgb(0, 255, 0); +} + +.three { + background-color: rgb(0, 0, 255); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-029.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-029.md new file mode 100644 index 0000000000..9217b6d4c6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-029.md @@ -0,0 +1,77 @@ +--- +id: 617bb77353188166af43f3ac +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +To create the next secondary color, cyan, update the `rgb` function in the `.two` CSS rule to combine pure green and pure blue. + +# --hints-- + +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 255, 0); +} + +--fcc-editable-region-- +.two { + background-color: rgb(0, 255, 0); +} +--fcc-editable-region-- + +.three { + background-color: rgb(0, 0, 255); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-030.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-030.md new file mode 100644 index 0000000000..6bc59a682d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-030.md @@ -0,0 +1,77 @@ +--- +id: 617bb9fdef27bc6aa0470ac2 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +To create the final secondary color, magenta, update the `rgb` function in the `.three` CSS rule to combine pure blue and pure red. + +# --hints-- + +Your `.three` CSS rule should have a `background-color` property set to `rgb(255, 0, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(255, 0, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 255, 0); +} + +.two { + background-color: rgb(0, 255, 255); +} + +--fcc-editable-region-- +.three { + background-color: rgb(0, 0, 255); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-031.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-031.md new file mode 100644 index 0000000000..f7949d090e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-031.md @@ -0,0 +1,79 @@ +--- +id: 617bbb6b97a83f6d1f7d6e38 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Now that you're familiar with secondary colors, you'll learn how to create tertiary colors. Tertiary colors are created by combining a primary with a nearby secondary color. + +To create the tertiary color orange, update the `rgb` function in the `.one` CSS rule so that red is at the max value, and set green to `127`. + +# --hints-- + +Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 127, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 127, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: rgb(255, 255, 0); +} +--fcc-editable-region-- + +.two { + background-color: rgb(0, 255, 255); +} + +.three { + background-color: rgb(255, 0, 255); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-032.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-032.md new file mode 100644 index 0000000000..26770e0a75 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-032.md @@ -0,0 +1,79 @@ +--- +id: 617bc3386dc7d07d6469bf20 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Notice that, to create orange, you had to increase the intensity of red and decrease the intensity of the green `rgb` values. This is because orange is the combination of red and yellow, and falls between the two colors on the color wheel. + +To create the tertiary color spring green, combine cyan with green. Update the `rgb` function in the `.two` CSS rule so that green is at the max value, and set blue to `127`. + +# --hints-- + +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 127)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 127)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 127, 0); +} + +--fcc-editable-region-- +.two { + background-color: rgb(0, 255, 255); +} +--fcc-editable-region-- + +.three { + background-color: rgb(255, 0, 255); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-033.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-033.md new file mode 100644 index 0000000000..6e30853a82 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-033.md @@ -0,0 +1,77 @@ +--- +id: 617bc4824e233180553a8069 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +And to create the tertiary color violet, combine magenta with blue. Update the `rgb` function in the `.three` CSS rule so that blue is at the max value, and set red to `127`. + +# --hints-- + +Your `.three` CSS rule should have a `background-color` property set to `rgb(127, 0, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(127, 0, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 127, 0); +} + +.two { + background-color: rgb(0, 255, 127); +} + +--fcc-editable-region-- +.three { + background-color: rgb(255, 0, 255); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-034.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-034.md new file mode 100644 index 0000000000..41a84196e6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-034.md @@ -0,0 +1,95 @@ +--- +id: 617bd6ec666b1da2587e4e37 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +There are three more tertiary colors: chartreuse green (green + yellow), azure (blue + cyan), and rose (red + magenta). + +To create chartreuse green, update the `rgb` function in the `.one` rule so that red is at `127`, and set green to the max value. + +For azure, update the `rgb` function in the `.two` rule so that green is at `127` and blue is at the max value. + +And for rose, which is sometimes called bright pink, update the `rgb` function in the `.three` rule so that blue is at `127` and red is at the max value. + +# --hints-- + +Your `.one` CSS rule should have a `background-color` property set to `rgb(127, 255, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(127, 255, 0)'); +``` + +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 127, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 127, 255)'); +``` + +Your `.three` CSS rule should have a `background-color` property set to `rgb(255, 0, 127)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(255, 0, 127)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: rgb(255, 127, 0); +} + +.two { + background-color: rgb(0, 255, 127); +} + +.three { + background-color: rgb(127, 0, 255); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-035.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-035.md new file mode 100644 index 0000000000..3825b561e9 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-035.md @@ -0,0 +1,91 @@ +--- +id: 618a00ed1ca871a2b3aca0cb +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Now that you've gone through all the primary, secondary, and tertiary colors on a color wheel, it'll be easier to understand other color theory concepts and how they impact design. + +First, in the rules `.one`, `.two`, and `.three`, adjust the values in the `rgb` function so that the `background-color` of each element is set to pure black. Remember that the `rgb` function uses the additive color model, where colors start as black and change as the values of red, green, and blue increase. + +# --hints-- + +Your `.one` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +Your `.three` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: rgb(127, 255, 0); +} + +.two { + background-color: rgb(0, 127, 255); +} + +.three { + background-color: rgb(255, 0, 127); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-036.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-036.md new file mode 100644 index 0000000000..2c968cf9ce --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-036.md @@ -0,0 +1,87 @@ +--- +id: 618a0927005553b74bfa05ae +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +A color wheel is a circle where similar colors, or hues, are near each other, and different ones are further apart. For example, pure red is between the hues rose and orange. + +Two colors that are opposite from each other on the color wheel are called complementary colors. If two complementary colors are combined, they produce gray. But when they are placed side-by-side, these colors produce strong visual contrast and appear brighter. + +In the `rgb` function for the `.one` CSS rule, set the red value to the max of `255` to produce pure red. In the `rgb` function for `.two` CSS rule, set the values for green and blue to the max of `255` to produce cyan. + +# --hints-- + +Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 0, 0)'); +``` + +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: rgb(0, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-037.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-037.md new file mode 100644 index 0000000000..e2ffe448b6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-037.md @@ -0,0 +1,87 @@ +--- +id: 618a0b2befb143baefab632b +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Notice that the red and cyan colors are very bright right next to each other. This contrast can be distracting if it's overused on a website, and can make text hard to read if it's placed on a complementary-colored background. + +It's better practice to choose one color as the dominant color, and use its complementary color as an accent to bring attention to certain content on the page. + +First, in the `h1` rule, use the `rbg` function to set its background color to cyan. + +# --hints-- + +You should not remove or modify the `text-align` property or its value. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center'); +``` + +Your `h1` CSS rule should have a `background-color` property set to `rgb(0, 255, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.backgroundColor === 'rgb(0, 255, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +h1 { + text-align: center; +} +--fcc-editable-region-- + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 0, 0); +} + +.two { + background-color: rgb(0, 255, 255); +} + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-038.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-038.md new file mode 100644 index 0000000000..bef36eec05 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-038.md @@ -0,0 +1,84 @@ +--- +id: 618a1275e873dcc803c2d1aa +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Next, in the `.one` rule, use the `rgb` function to set the `background-color` to black. And in the `.two` rule, use the `rgb` function to set the `background-color` to red. + +# --hints-- + +Your `.one` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +Your `.two` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(255, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; + background-color: rgb(0, 255, 255); +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: rgb(255, 0, 0); +} + +.two { + background-color: rgb(0, 255, 255); +} +--fcc-editable-region-- + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-039.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-039.md new file mode 100644 index 0000000000..38f7300c46 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-039.md @@ -0,0 +1,82 @@ +--- +id: 618a132676346ac9f7fd59dd +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Notice how your eyes are naturally drawn to the red color in the center? When designing a site, you can use this effect to draw attention to important headings, buttons, or links. + +There are several other important color combinations outside of complementary colors, but you'll learn those a bit later. + +For now, use the `rgb` function in the `.two` rule to set the `background-color` to black. + +# --hints-- + +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; + background-color: rgb(0, 255, 255); +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(0, 0, 0); +} + +--fcc-editable-region-- +.two { + background-color: rgb(255, 0, 0); +} +--fcc-editable-region-- + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-040.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-040.md new file mode 100644 index 0000000000..4ab74c3f50 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-040.md @@ -0,0 +1,79 @@ +--- +id: 618a16873520a8d088ffdf44 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +And in the `h1` rule, remove the `background-color` property and value to go back to the default white color. + +# --hints-- + +Your `h1` CSS rule should not have a `background-color` property or value. + +```js +const backgroundColorInstances = code.match(/background-color:.*;/gi); +assert(backgroundColorInstances.length === 4 && !new __helpers.CSSHelp(document).getStyle('h1')?.backgroundColor); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +h1 { + text-align: center; + background-color: rgb(0, 255, 255); +} +--fcc-editable-region-- + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(0, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-041.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-041.md new file mode 100644 index 0000000000..0c887a9f4b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-041.md @@ -0,0 +1,87 @@ +--- +id: 618a16d21bd3dad1bb3aa8ef +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Now it's time time to add other details to the markers, starting with the first one. + +In the first marker `div` element, change the class `one` to `red`. + +# --hints-- + +Your first marker `div` should not have the class `one`. + +```js +const containerFirstChild = [...document.querySelector('.container')?.children][0]; +assert(!containerFirstChild?.classList?.contains('one')); +``` + +Your first marker `div` should have the classes `marker` and `red`. + +```js +const containerFirstChild = [...document.querySelector('.container')?.children][0]; +assert(containerFirstChild?.classList?.contains('marker') && containerFirstChild?.classList?.contains('red')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+ --fcc-editable-region-- +
+
+
+
+
+
+ --fcc-editable-region-- +
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(0, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-042.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-042.md new file mode 100644 index 0000000000..bd312d9cea --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-042.md @@ -0,0 +1,89 @@ +--- +id: 619b72a0db211f1c29afb906 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Update the `.one` class selector to target the new `red` class. + +# --hints-- + +Your code should no longer have a `.one` class selector. + +```js +assert(!new __helpers.CSSHelp(document).getStyle('.one')); +``` + +You should use a class selector to target the class `red`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')); +``` + +Your `.red` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: rgb(0, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} + +.three { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-043.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-043.md new file mode 100644 index 0000000000..243bd87a83 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-043.md @@ -0,0 +1,77 @@ +--- +id: 619b7396e57b771f903be90d +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +And update the `rgb` function in the `.red` rule so that the red value is at the max. + +# --hints-- + +Your `.red` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.backgroundColor === 'rgb(255, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background-color: rgb(0, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} + +.three { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-044.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-044.md new file mode 100644 index 0000000000..0e17d99a6c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-044.md @@ -0,0 +1,99 @@ +--- +id: 619b7424f43ec9215e538afe +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Next, change the class `two` to `green` in the second marker `div`, and the class `three` to `blue` in the third marker `div`. + +# --hints-- + +Your second marker `div` should not have the class `two`. + +```js +const containerSecondChild = [...document.querySelector('.container')?.children][1]; +assert(!containerSecondChild?.classList?.contains('two')); +``` + +Your second marker `div` should have the classes `marker` and `green`. + +```js +const containerSecondChild = [...document.querySelector('.container')?.children][1]; +assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild?.classList?.contains('green')); +``` + +Your third marker `div` should not have the class `three`. + +```js +const containerThirdChild = [...document.querySelector('.container')?.children][2]; +assert(!containerThirdChild?.classList?.contains('three')); +``` + +Your third marker `div` should have the classes `marker` and `blue`. + +```js +const containerThirdChild = [...document.querySelector('.container')?.children][2]; +assert(containerThirdChild?.classList?.contains('marker') && containerThirdChild?.classList?.contains('blue')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+ --fcc-editable-region-- +
+
+
+
+
+
+ --fcc-editable-region-- +
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background-color: rgb(255, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-045.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-045.md new file mode 100644 index 0000000000..1484453c26 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-045.md @@ -0,0 +1,107 @@ +--- +id: 619b74fa777a2b2473c94f82 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Update the CSS class selector `.two` so it targets the new `green` class. And update the `.three` selector so it targets the new `blue` class. + +# --hints-- + +Your code should no longer have a `.two` class selector. + +```js +assert(!new __helpers.CSSHelp(document).getStyle('.two')); +``` + +You should use a class selector to target the class `green`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')); +``` + +Your `.green` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +Your code should no longer have a `.three` class selector. + +```js +assert(!new __helpers.CSSHelp(document).getStyle('.three')); +``` + +You should use a class selector to target the class `blue`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')); +``` + +Your `.blue` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background-color: rgb(255, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} + +.three { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-046.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-046.md new file mode 100644 index 0000000000..75d3c1aa67 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-046.md @@ -0,0 +1,81 @@ +--- +id: 619b761916dac02643940022 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +A very common way to apply color to an element with CSS is with hexadecimal or hex values. While hex values sound complicated, they're really just another form of RGB values. + +Hex color values start with a `#` character and take six characters from 0-9 and A-F. The first pair of characters represent red, the second pair represent green, and the third pair represent blue. For example, `#4B5320`. + +In the `.green` CSS rule, set the `background-color` property to a hex color code with the values `00` for red, `FF` for green, and `00` blue. + +# --hints-- + +Your `.green` CSS rule should have a `background-color` property set to `#00FF00`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 255, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background-color: rgb(255, 0, 0); +} + +--fcc-editable-region-- +.green { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +.blue { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-047.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-047.md new file mode 100644 index 0000000000..2b48bfdf6a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-047.md @@ -0,0 +1,85 @@ +--- +id: 619b7c3c83de403126b69c1e +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +You may already be familiar with decimal, or base 10 values, which go from 0 - 10. Hexadecimal, or base 16 values, go from 0 - 9, then A - F: + +``` +0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F +``` + +With hex colors, `00` is 0% of that color, and `FF` is 100%. So `#00FF00` translates to 0% red, 100% green, and 0% blue, and is the same as `rgb(0, 255, 0)`. + +Lower the intensity of green by setting green value of the hex color to `7F`. + +# --hints-- + +Your `.green` CSS rule should have a `background-color` property set to `#007F00`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 127, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background-color: rgb(255, 0, 0); +} + +--fcc-editable-region-- +.green { + background-color: #00FF00; +} +--fcc-editable-region-- + +.blue { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-048.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-048.md new file mode 100644 index 0000000000..2e692827eb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-048.md @@ -0,0 +1,87 @@ +--- +id: 619b7fd56aa2253778bcf5f7 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +The HSL color model, or hue, saturation, and lightness, is another way to represent colors. + +The CSS `hsl` function accepts 3 values: a number from 0 to 360 for hue, a percentage from 0 to 100 for saturation, and a percentage from 0 to 100 for lightness. + +If you imagine a color wheel, the hue red is at 0 degrees, green is at 120 degrees, and blue is at 240 degrees. + +Saturation is the intensity of a color from 0%, or gray, to 100% for pure color. + +Lightness is how bright a color appears, from 0%, or complete black, to 100%, complete white, with 50% being neutral. + +In the `.blue` CSS rule, use the `hsl` function to change the `background-color` property to pure blue. Set the hue to `240`, the saturation to `100%`, and the lightness to `50%`. + +# --hints-- + +Your `.blue` CSS rule should have a `background-color` property set to `hsl(240, 100%, 50%)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(0, 0, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background-color: rgb(255, 0, 0); +} + +.green { + background-color: #007F00; +} + +--fcc-editable-region-- +.blue { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-049.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-049.md new file mode 100644 index 0000000000..2b077238aa --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-049.md @@ -0,0 +1,83 @@ +--- +id: 61a489b8579e87364b2d2cdb +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +You've learned a few ways to set flat colors in CSS, but you can also use a color transition, or gradient, on an element. + +A gradient is when one color transitions into another. The CSS `linear-gradient` function lets you control the direction of the transition along a line, and which colors are used. + +One thing to remember is that the `linear-gradient` function actually creates an `image` element, and is usually paired with the `background` property which can accept an image as a value. + +In the `.red` CSS rule, change the `background-color` property to `background`. + +# --hints-- + +Your `.red` CSS rule should have a `background` property with the value `rgb(255, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red').cssText === 'background: rgb(255, 0, 0);'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background-color: rgb(255, 0, 0); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-050.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-050.md new file mode 100644 index 0000000000..c2809c09ac --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-050.md @@ -0,0 +1,87 @@ +--- +id: 61a493ead935c148d2b76312 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +The `linear-gradient` function is very flexible -- here is the basic syntax you'll use in this tutorial: + +```css +linear-gradient(gradientDirection, color1, color2, ...); +``` + +`gradientDirection` is the direction of the line used for the transition. `color1` and `color2` are color arguments, which are the colors that will be used in the transition itself. These can be any type of color, including color keywords, hex, `rgb`, or `hsl`. + +Now you'll apply a red-to-green gradient along a 90 degree line to the first marker. + +First, in the `.red` CSS rule, set the `background` property to `linear-gradient()`, and pass it the value `90deg` as the `gradientDirection`. + +# --hints-- + +Your `.red` CSS rule should have a `background` property with the value `linear-gradient(90deg)`. + +```js +assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:linear-gradient\(90deg\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: rgb(255, 0, 0); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-051.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-051.md new file mode 100644 index 0000000000..cfe5175ce1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-051.md @@ -0,0 +1,79 @@ +--- +id: 61b095989e7fc020b43b1bb9 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +You'll use the `rgb` function for the colors of this gradient. + +In the `linear-gradient` function, use the `rgb` function to set the first color argument to pure red. + +# --hints-- + +Your `.red` CSS rule should have a `background` property with the value `linear-gradient(90deg, rgb(255, 0, 0))`. + +```js +assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:linear-gradient\(90deg,rgb\(255,0,0\)\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(90deg); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-052.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-052.md new file mode 100644 index 0000000000..87f0294101 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-052.md @@ -0,0 +1,79 @@ +--- +id: 61b095a79e7fc020b43b1bba +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +You won't see gradient yet because the `linear-gradient` function needs at least two color arguments to work. + +In the same `linear-gradient` function, use the `rgb` function to set the second color argument to pure green. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0))`. + +```js +assert.include(['linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(90deg, rgb(255, 0, 0)); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-053.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-053.md new file mode 100644 index 0000000000..f9582aad79 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-053.md @@ -0,0 +1,79 @@ +--- +id: 61a498399534644f59cff05e +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +As you can see, the `linear-gradient` function produced a smooth red-green gradient. While the `linear-gradient` function needs a minimum of two color arguments to work, it can accept many color arguments. + +Use the `rgb` function to add pure blue as the third color argument to the `linear-gradient` function. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255))`. + +```js +assert.include(['linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0)); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-054.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-054.md new file mode 100644 index 0000000000..6124999daf --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-054.md @@ -0,0 +1,85 @@ +--- +id: 61a49d15bdbb5e57cc6fd280 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Color-stops allow you to fine-tune where colors are placed along the gradient line. They are a length unit like `px` or percentages that follow a color in the `linear-gradient` function. + +For example, in this red-black gradient, the transition from red to black takes place at the 90% point along the gradient line, so red takes up most of the available space: + +```css +linear-gradient(90deg, red 90%, black); +``` + +In the `linear-gradient` function, add a `75%` color stop after the first red color argument. Do not add color stops to the other colors arguments. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))`. + +```js +assert.include(['linear-gradient(90deg,rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255)); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-055.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-055.md new file mode 100644 index 0000000000..218a047924 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-055.md @@ -0,0 +1,79 @@ +--- +id: 61a4a53c4459446dc134a1c6 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Now that you know the basics of how the `linear-gradient` function and color-stops work, you can use them to make the markers look more realistic. + +In the `linear-gradient` function, set `gradientDirection` to `180deg`. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))`. + +```js +assert.include(['linear-gradient(rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255)); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-056.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-056.md new file mode 100644 index 0000000000..61621fa7cb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-056.md @@ -0,0 +1,77 @@ +--- +id: 61a4a6e908bc34725b4c25ac +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Next, set the color-stop for red to `0%`, the color-stop for green to `50%`, and the color-stop for blue to `100%`; + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)`. + +```js +assert.include(['linear-gradient(rgb(255,0,0)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(255,0,0)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255)); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-057.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-057.md new file mode 100644 index 0000000000..709803c3c5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-057.md @@ -0,0 +1,79 @@ +--- +id: 61a4a7877da33a73a1c1723e +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Now that the color-stops are set, you'll apply different shades of red to each color argument in the `linear-gradient` function. The shades on the top and bottom edges of the marker will be darker, while the one in the middle will be lighter, as if there's a light above it. + +For the first color argument, which is currently pure red, update the `rgb` function so the value for red is `122`, the value for green is `74`, and the value for blue is `14`. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)`. + +```js +assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-058.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-058.md new file mode 100644 index 0000000000..78b6f435b9 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-058.md @@ -0,0 +1,79 @@ +--- +id: 61a4ac092eb21e7dbfe61c33 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Now modify the second color argument in the `linear-gradient` function, which is currently pure green. + +Update the `rgb` function so the value for red is `245`, the value of green is `62`, and the value of blue is `113`. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(0, 0, 255) 100%)`. + +```js +assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-059.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-059.md new file mode 100644 index 0000000000..77d372a9ac --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-059.md @@ -0,0 +1,79 @@ +--- +id: 61a4acbb5587197f68544d00 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Finally, modify the third color argument in the `linear-gradient` function, which is currently pure blue. + +Update the `rgb` function so the value for red is `162`, the value of green is `27`, and the value of blue is `27`. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%)`. + +```js +assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(162,27,27)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(162,27,27)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(0, 0, 255) 100%); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-060.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-060.md new file mode 100644 index 0000000000..1a9ccaa712 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-060.md @@ -0,0 +1,79 @@ +--- +id: 61a4ada3aabeec822b2975d9 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +The red marker is looking much more realistic. Now you'll do the same for the green marker, using a combination of the `linear-gradient` function and hex colors. + +In the `.green` CSS rule, change the `background-color` property to `background`. + +# --hints-- + +Your `.green` CSS rule should have a `background` property with the value `#007F00`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green').cssText === 'background: rgb(0, 127, 0);'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} + +--fcc-editable-region-- +.green { + background-color: #007F00; +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-061.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-061.md new file mode 100644 index 0000000000..54ba2ab777 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-061.md @@ -0,0 +1,79 @@ +--- +id: 61a4ae5f29eb5584187201c3 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +For this marker, you'll use hex color codes for your gradient. + +Use the `linear-gradient` function and set `gradientDirection` to `180deg`. And for the first color argument, use a hex color code with the values `55` for red, `68` for green, and `0D` for blue. + +# --hints-- + +Your `.green` CSS rule should have a `background` property with the value `linear-gradient(180deg, #55680D)`. + +```js +assert.match(__helpers.removeWhiteSpace(code), /\.green\{.*?background:linear-gradient\(180deg,#55680D\)/i); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} + +--fcc-editable-region-- +.green { + background: #007F00; +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-062.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-062.md new file mode 100644 index 0000000000..a1871f3b98 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-062.md @@ -0,0 +1,77 @@ +--- +id: 61b095c79e7fc020b43b1bbb +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +For the second color argument, use a hex color code with the values `71` for red, `F5` for green, and `3E` for blue. + +# --hints-- + +Your `.green` CSS rule should have a `background` property set to `linear-gradient(180deg, #55680D, #71F53E)`. + +```js +assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} + +--fcc-editable-region-- +.green { + background: linear-gradient(180deg, #55680D); +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-063.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-063.md new file mode 100644 index 0000000000..505c1f31b5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-063.md @@ -0,0 +1,79 @@ +--- +id: 61a5be9833e7dc178de2af10 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +That's looking better, but the bottom edge of the green marker needs to be darker to add a little more dimension. + +In the same `linear-gradient` function, add a hex color code with the values `11` for red, `6C` for green, and `31` for blue as the third color argument. + +# --hints-- + +Your `.green` CSS rule should have a `background` property set to `linear-gradient(180deg, #55680D, #71F53E, #116C31)`. + +```js +assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} + +--fcc-editable-region-- +.green { + background: linear-gradient(180deg, #55680D, #71F53E); +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-064.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-064.md new file mode 100644 index 0000000000..bae44357a4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-064.md @@ -0,0 +1,81 @@ +--- +id: 61a5bfe091060f1d6a629dd0 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Even without the color-stops, you might have noticed that the colors for the green marker transition at the same points as the red marker. The first color is at the start (0%), the second is in the middle (50%), and the last is at the end (100%) of the gradient line. + +The `linear-gradient` function automatically calculates these values for you, and places colors evenly along the gradient line by default. + +In the `.red` CSS rule, remove the three color stops from the `linear-gradient` function to clean up your code a bit. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))`. + +```js +assert.include(['linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} +--fcc-editable-region-- + +.green { + background: linear-gradient(180deg, #55680D, #71F53E, #116C31); +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-065.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-065.md new file mode 100644 index 0000000000..fb633d9069 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-065.md @@ -0,0 +1,91 @@ +--- +id: 61a5c906ab73313316e342f0 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +If no `gradientDirection` argument is provided to the `linear-gradient` function, it arranges colors from top to bottom, or along a 180 degree line, by default. + +Clean up your code a little more by removing the `gradientDirection` argument from both `linear-gradient` functions. + +# --hints-- + +You should remove the `gradientDirection` arguments from the `linear-gradient` functions in your `.red` and `.green` CSS rules. + +```js +assert(!code.match(/linear-gradient\s*\(\s*180deg/gi)); +``` + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))`. + +```js +assert.include(['linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +Your `.green` CSS rule should have a `background` property set to `linear-gradient(#55680D, #71F53E, #116C31)`. + +```js +assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(180deg, #55680D, #71F53E, #116C31); +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-066.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-066.md new file mode 100644 index 0000000000..8ee2379af9 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-066.md @@ -0,0 +1,79 @@ +--- +id: 61a5ca57f50ded36d33eef96 +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Now you'll apply a gradient to the blue marker, this time using the `hsl` function as color arguments. + +In the `.blue` CSS rule, change the `background-color` property to `background`. + +# --hints-- + +Your `.blue` CSS rule should have a `background` property with the value `hsl(240, 100%, 50%)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue').cssText === 'background: rgb(0, 0, 255);'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +--fcc-editable-region-- +.blue { + background-color: hsl(240, 100%, 50%); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-067.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-067.md new file mode 100644 index 0000000000..ea5468050c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-067.md @@ -0,0 +1,77 @@ +--- +id: 61a5d594b887335228ee6533 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Use the `linear-gradient` function, and pass in the `hsl` function with the values `186` for hue, `76%` for saturation, and `16%` for lightness as the first color argument. + +# --hints-- + +Your `.blue` CSS rule should have a `background` property with the value `linear-gradient(hsl(186, 76%, 16%))`. + +```js +assert.match(__helpers.removeWhiteSpace(code), /\.blue\{.*?background:linear-gradient\(hsl\(186,76%,16%\)\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +--fcc-editable-region-- +.blue { + background: hsl(240, 100%, 50%); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-068.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-068.md new file mode 100644 index 0000000000..bac8f67e8b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-068.md @@ -0,0 +1,77 @@ +--- +id: 61a5d6701ee08953ca375243 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +As the second color argument, pass in the `hsl` function with the values `223` for hue, `90%` for saturation, and `60%` for lightness. + +# --hints-- + +Your `.blue` CSS rule should have a `background` property set to `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%))`. + +```js +assert.include(['linear-gradient(rgb(10,66,72),rgb(61,113,245))', 'rgba(0,0,0,0)linear-gradient(rgb(10,66,72),rgb(61,113,245))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.blue')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +--fcc-editable-region-- +.blue { + background: linear-gradient(hsl(186, 76%, 16%)); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-069.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-069.md new file mode 100644 index 0000000000..943076f942 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-069.md @@ -0,0 +1,77 @@ +--- +id: 61a5d79c858bef560e26c685 +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +And as the third color argument, pass in the `hsl` function with the values `240` for hue, `56%` for saturation, and `42%` for lightness. + +# --hints-- + +Your `.blue` CSS rule should have a `background` property set to `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%))`. + +```js +assert.include(['linear-gradient(rgb(10,66,72),rgb(61,113,245),rgb(47,47,167))', 'rgba(0,0,0,0)linear-gradient(rgb(10,66,72),rgb(61,113,245),rgb(47,47,167))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.blue')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +--fcc-editable-region-- +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%)); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-070.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-070.md new file mode 100644 index 0000000000..fc4824f376 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-070.md @@ -0,0 +1,87 @@ +--- +id: 61a5d7ef1cfcf45764df07a2 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Now that the markers have the correct colors, it's time to build the marker sleeves. Start with the red marker. + +Inside the red marker `div`, create a new `div` and give it a class of `sleeve`. + +# --hints-- + +Your new `div` element should be within the red marker's `div` element. + +```js +const redMarkerChildren = [...document.querySelector('.red')?.children]; +assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 1); +``` + +Your new `div` element should have a class of `sleeve`. + +```js +const redMarkerChild = [...document.querySelector('.red')?.children][0]; +assert(redMarkerChild?.classList?.contains('sleeve')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+ --fcc-editable-region-- +
+
+ --fcc-editable-region-- +
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-071.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-071.md new file mode 100644 index 0000000000..d682a587c5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-071.md @@ -0,0 +1,92 @@ +--- +id: 61adc60b69cd4b87739d2174 +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Create a new CSS rule that targets the class `sleeve`. Set the `width` property to `110px`, and the `height` property to `25px`. + +# --hints-- + +You should use a class selector to target class `sleeve`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')); +``` + +Your `.sleeve` CSS rule should have a `width` property set to `110px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.width === '110px'); +``` + +Your `.sleeve` CSS rule should have a `height` property set to `25px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.height === '25px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-072.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-072.md new file mode 100644 index 0000000000..a481b955ca --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-072.md @@ -0,0 +1,85 @@ +--- +id: 61b092eb9e7fc020b43b1bb2 +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +To make the marker look more realistic, give the sleeve a transparent white color. + +First, set the sleeve element's `background-color` to `white`. + +# --hints-- + +Your `.sleeve` CSS rule should have a `background-color` property set to `white`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'white'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; +} +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-073.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-073.md new file mode 100644 index 0000000000..7405a5285a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-073.md @@ -0,0 +1,88 @@ +--- +id: 61b093179e7fc020b43b1bb3 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Opacity describes how opaque, or non-transparent, something is. For example, a solid wall is opaque, and no light can pass through. But a drinking glass is much more transparent, and you can see through the glass to the other side. + +With the CSS `opacity` property, you can control how opaque or transparent an element is. With the value `0`, or 0%, the element will be completely transparent, and at `1.0`, or 100%, the element will be completely opaque like it is by default. + +In the `.sleeve` CSS rule, set the `opacity` property to `0.5`. + +# --hints-- + +Your `.sleeve` CSS rule should have an `opacity` property set to `0.5`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.opacity === '0.5'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: white; +} +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-074.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-074.md new file mode 100644 index 0000000000..6f08255021 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-074.md @@ -0,0 +1,89 @@ +--- +id: 61b093219e7fc020b43b1bb4 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Another way to set the opacity for an element is with the alpha channel. Similar to the `opacity` property, the alpha channel controls how transparent or opaque a color is. + +You've already set sleeve's opacity with a named color and the `opacity` property, but you can add an alpha channel to the other CSS color properties. + +Inside the `.sleeve` rule, remove the `opacity` property and value. + +# --hints-- + +Your `.sleeve` CSS rule should not have an `opacity` property and value. + +```js +assert(!new __helpers.CSSHelp(document).getStyle('.sleeve')?.opacity); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: white; + opacity: 0.5; +} +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-075.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-075.md new file mode 100644 index 0000000000..22a17963be --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-075.md @@ -0,0 +1,92 @@ +--- +id: 61b093329e7fc020b43b1bb5 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +You're already familiar with using the `rgb` function to set colors. To add an alpha channel to an `rgb` color, use the `rgba` function instead. + +The `rgba` function works just like the `rgb` function, but takes one more number from `0` to `1.0` for the alpha channel: + +```css +rgba(redValue, greenValue, blueValue, alphaValue); +``` + +In the `.sleeve` rule, use the `rgba` function to set the `background-color` property to pure white with 50% opacity. + +# --hints-- + +Your `.sleeve` CSS rule should have a `background-color` property set to `rgba(255, 255, 255, 0.5)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'rgba(255, 255, 255, 0.5)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: white; +} +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-076.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-076.md new file mode 100644 index 0000000000..4eea6a66c1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-076.md @@ -0,0 +1,103 @@ +--- +id: 61b093429e7fc020b43b1bb6 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Your sleeve is looking good, but it would look even better if it was positioned more toward the right side of the marker. One way to do that is to add another element before the sleeve to push it to the right. + +Add a new `div` with the class `cap` before the sleeve `div` element. + +# --hints-- + +Your new `div` element should be within the red marker `div`. + +```js +const redMarkerChildren = [...document.querySelector('div.red')?.children]; +assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 2); +``` + +Your new `div` element should have a class of `cap`. + +```js +const redMarkerChildren = [...document.querySelector('div.red')?.children]; +assert(redMarkerChildren.some(child => child?.classList?.contains('cap'))); +``` + +Your cap `div` should be before the sleeve `div`. + +```js +const redMarkerChildren = [...document.querySelector('div.red')?.children]; +const cap = document.querySelector('div.cap'); +const sleeve = document.querySelector('div.sleeve'); +assert(redMarkerChildren.indexOf(cap) < redMarkerChildren.indexOf(sleeve)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+ --fcc-editable-region-- +
+
+
+ --fcc-editable-region-- +
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-077.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-077.md new file mode 100644 index 0000000000..bfbb706917 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-077.md @@ -0,0 +1,99 @@ +--- +id: 61b0934c9e7fc020b43b1bb7 +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Create a new CSS rule to target the class `cap`. In the new rule, set the `width` property to `60px`, and the `height` to `25px`. + +# --hints-- + +You should use a class selector to target the class `cap`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap')); +``` + +Your `.cap` CSS rule should have a `width` property set to `60px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap')?.width === '60px'); +``` + +Your `.cap` CSS rule should have a `height` property set to `25px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap')?.height === '25px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-078.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-078.md new file mode 100644 index 0000000000..912573d6aa --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-078.md @@ -0,0 +1,104 @@ +--- +id: 61b0936d9e7fc020b43b1bb8 +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +It looks like your sleeve disappeared, but don't worry -- it's still there. What happened is that your new cap `div` is taking up the entire width of the marker, and is pushing the sleeve down to the next line. + +This is because the default `display` property for `div` elements is `block`. So when two `block` elements are next to each other, they stack like actual blocks. For example, your marker elements are all stacked on top of each other. + +To position two `div` elements on the same line, set their `display` properties to `inline-block`. + +Create a new rule to target both the `cap` and `sleeve` classes, and set `display` to `inline-block`. + +# --hints-- + +You should use a class selector to target both the `cap` and `sleeve` classes. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap, .sleeve') || new __helpers.CSSHelp(document).getStyle('.sleeve, .cap')); +``` + +Your CSS rule should have a `display` property set to `inline-block`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap, .sleeve')?.display === 'inline-block' || new __helpers.CSSHelp(document).getStyle('.sleeve, .cap')?.display === 'inline-block'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-079.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-079.md new file mode 100644 index 0000000000..bd2f96cece --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-079.md @@ -0,0 +1,98 @@ +--- +id: 61adc91467b5d59328b9f781 +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +In the last project, you learned a little bit about borders and the `border-color` property. + +All HTML elements have borders, though they're usually set to `none` by default. With CSS, you can control all aspects of an element's border, and set the border on all sides, or just one side at a time. For a border to be visible, you need to set its width and style. + +In the `.sleeve` CSS rule, add the `border-left-width` property with the value `10px`. + +# --hints-- + +Your `.sleeve` CSS rule should have a `border-left-width` property and with the value `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftWidth === '10px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-080.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-080.md new file mode 100644 index 0000000000..8d837ae76d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-080.md @@ -0,0 +1,97 @@ +--- +id: 61add79e739a5faee9d96080 +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Borders have several styles to choose from. You can make your border a solid line, but can also go with a dashed or dotted line if you prefer. Solid border lines are probably the most common. + +In the `.sleeve` CSS rule, add the `border-left-style` property with the value `solid`. + +# --hints-- + +Your `.sleeve` CSS rule should have a `border-left-style` property and with the value `solid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftStyle === 'solid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left-width: 10px; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-081.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-081.md new file mode 100644 index 0000000000..25e505173b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-081.md @@ -0,0 +1,100 @@ +--- +id: 61add929e41980b1edbdba7e +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Your border should be visible now. If no color is set, black is used by default. + +But to make your code more readable, it's better to set the border color explicitly. + +In the `.sleeve` CSS rule, add the `border-left-color` property with the value `black`. + +# --hints-- + +Your `.sleeve` CSS rule should have a `border-left-color` property and with the value `black`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftColor === 'black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left-width: 10px; + border-left-style: solid; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-082.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-082.md new file mode 100644 index 0000000000..d3974667f1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-082.md @@ -0,0 +1,123 @@ +--- +id: 61addaf7e83988b59a7d18ff +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +The `border-left` shorthand property lets you to set the left border's width, style, and color at the same time. + +Here is the syntax: + +```css +border-left: width style color; +``` + +In the `.sleeve` CSS rule, replace the `border-left-width`, `border-left-style`, and `border-left-color` properties with the `border-left` shorthand property. The values for the width, style, and color of the left border should be the same. + +# --hints-- + +Your `.sleeve` CSS rule should not have a `border-left-width` property and value. + +```js +assert(!/border-left-width/g.test(code)); +``` + +Your `.sleeve` CSS rule should not have a `border-left-style` property and value. + +```js +assert(!/border-left-style/g.test(code)); +``` + +Your `.sleeve` CSS rule should not have a `border-left-color` property and value. + +```js +assert(!/border-left-color/g.test(code)); +``` + +Your `.sleeve` CSS rule should have a `border-left` shorthand property and with the value `10px solid black`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft, '10px solid black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left-width: 10px; + border-left-style: solid; + border-left-color: black; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-083.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-083.md new file mode 100644 index 0000000000..c606a938ad --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-083.md @@ -0,0 +1,97 @@ +--- +id: 61ade49b2dad60c076cbd32d +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +Your marker is looking good. But to make it look even more realistic, you can change the border style to double solid borders. + +For the `border-left` shorthand property, change the border style value from `solid` to `double`. + +# --hints-- + +Your `.sleeve` CSS rule should have a `border-left` shorthand property and with the value `10px double black`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft === '10px double black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px solid black; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-084.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-084.md new file mode 100644 index 0000000000..fb1a692958 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-084.md @@ -0,0 +1,97 @@ +--- +id: 61b09f739aa6572d2064f9b8 +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +The black color of your border looks pretty harsh against the more transparent sleeve. You can use an alpha channel to lower the opacity of the black border. + +For the `border-left` shorthand property, use the `rgba` function to set the color value to pure black with 75% opacity. + +# --hints-- + +Your `.sleeve` CSS rule should have a `border-left` shorthand property and with the value `10px double rgba(0, 0, 0, 0.75)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft === '10px double rgba(0, 0, 0, 0.75)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double black; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-085.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-085.md new file mode 100644 index 0000000000..4cc3e5e9b2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-085.md @@ -0,0 +1,123 @@ +--- +id: 61b0a1b2af494934b7ec1a72 +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Awesome. Your red marker is looking good. Now all you need to do is add the caps and sleeves to your other markers. + +Add a cap and sleeve to both the green and blue markers. You can just copy the `div` elements from the red marker and paste them into the other two markers. + +# --hints-- + +Your green marker `div` should contain two `div` elements. + +```js +const greenMarkerChildren = [...document.querySelector('.green')?.children]; +assert(greenMarkerChildren.every(child => child?.localName === 'div') && greenMarkerChildren.length === 2); +``` + +Your green marker's cap `div` element should be before the sleeve `div` element. + +```js +const greenMarkerChildren = [...document.querySelector('.green')?.children]; +const greenMarkerCap = document.querySelector('.green .cap'); +const greenMarkerSleeve = document.querySelector('.green .sleeve'); +assert(greenMarkerChildren.indexOf(greenMarkerCap) < greenMarkerChildren.indexOf(greenMarkerSleeve)); +``` + +Your blue marker `div` should contain two `div` elements. + +```js +const blueMarkerChildren = [...document.querySelector('.blue')?.children]; +assert(blueMarkerChildren.every(child => child?.localName === 'div') && blueMarkerChildren.length === 2); +``` + +Your green marker's cap `div` element should be before the sleeve `div` element. + +```js +const blueMarkerChildren = [...document.querySelector('.blue')?.children]; +const blueMarkerCap = document.querySelector('.blue .cap'); +const blueMarkerSleeve = document.querySelector('.blue .sleeve'); +assert(blueMarkerChildren.indexOf(blueMarkerCap) < blueMarkerChildren.indexOf(blueMarkerSleeve)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+ --fcc-editable-region-- +
+
+
+
+
+
+
+
+ --fcc-editable-region-- +
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-086.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-086.md new file mode 100644 index 0000000000..e6af783e2b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-086.md @@ -0,0 +1,109 @@ +--- +id: 61b0a44a6b865738ba49b9fb +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +The last thing you'll do is add a slight shadow to each marker to make them look even more realistic. + +The `box-shadow` property lets you apply one or more shadows around an element. Here is basic syntax: + +```css +box-shadow: offsetX offsetY color; +``` + +Start by adding a simple shadow to the red marker. + +In the `.red` CSS rule, add the `box-shadow` property with the values `5px` for `offsetX`, `5px` for `offsetY`, and `red` for `color`. + +# --hints-- + +Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `5px 5px red`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 5px 5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} +--fcc-editable-region-- + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-087.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-087.md new file mode 100644 index 0000000000..91519a4a17 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-087.md @@ -0,0 +1,104 @@ +--- +id: 61b306305810f1c9040ce5a2 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +As you can see, you added a simple red shadow around your marker that's 5 pixels to the right, and 5 pixels down. + +But what if you wanted to position your shadow on the opposite side? You can do that by using negative values for `offsetX` and `offsetY`. + +Update the values for the `box-shadow` property, and set `offsetX` to `-5px`, and `offsetY` to `-5px`. + +# --hints-- + +Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `-5px -5px red`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red -5px -5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 5px 5px red; +} +--fcc-editable-region-- + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-088.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-088.md new file mode 100644 index 0000000000..5a0b5f0504 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-088.md @@ -0,0 +1,108 @@ +--- +id: 61b30995968123ceb6b76167 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +Notice that the edges of the shadow are sharp. This is because there is an optional `blurRadius` value for the `box-shadow` property: + +```css +box-shadow: offsetX offsetY blurRadius color; +``` + +If a `blurRadius` value isn't included, it defaults to `0` and produces sharp edges. The higher the value of `blurRadius`, the greater the blurring effect is. + +In the `.green` CSS rule, add the `box-shadow` property with the values `5px` for `offsetX`, `5px` for `offsetY`, `5px`, for `blurRadius`, and `green` for `color`. + +# --hints-- + +Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `5px 5px 5px green`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 5px 5px 5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: -5px -5px red; +} + +--fcc-editable-region-- +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} +--fcc-editable-region-- + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-089.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-089.md new file mode 100644 index 0000000000..6240048d1c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-089.md @@ -0,0 +1,111 @@ +--- +id: 61b30a286c228bd0c493c09a +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +But what if you wanted to expand the shadow out further? You can do that with the optional `spreadRadius` value: + +```css +box-shadow: offsetX offsetY blurRadius spreadRadius color; +``` + +Like `blurRadius`, `spreadRadius` defaults to `0` if it isn't included. + +Practice by adding a 5 pixel shadow directly around the blue marker. + +In the `.blue` CSS rule, add the `box-shadow` property with the values `0` for `offsetX`, `0` for `offsetY`, `0`, for `blurRadius`, `5px` for `spreadRadius`, and `blue` for `color`. + +# --hints-- + +Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 0 5px blue`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 0px 5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: -5px -5px red; +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 5px 5px 5px green; +} + +--fcc-editable-region-- +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-090.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-090.md new file mode 100644 index 0000000000..2248c7ba2b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-090.md @@ -0,0 +1,104 @@ +--- +id: 61b31287fb580ae75a486047 +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +Now that you're familiar with the `box-shadow` property you can finalize the shadows, starting with the one for the red marker. + +In the `.red` CSS rule, update the values for the `box-shadow` property so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, and `spreadRadius` is `0`. + +# --hints-- + +Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 red`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: -5px -5px red; +} +--fcc-editable-region-- + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 5px 5px 5px green; +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 0 5px blue; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-091.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-091.md new file mode 100644 index 0000000000..95fe811170 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-091.md @@ -0,0 +1,104 @@ +--- +id: 61b315e76a63b3ecbbb11b75 +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +Next, update the `color` value of the red marker's `box-shadow` property. + +Replace the named color with the `rgba` function. Use the values `83` for red, `14` for green, `14` for `blue` and `0.8` for the alpha channel. + +# --hints-- + +Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 rgba(83, 14, 14, 0.8)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'rgba(83, 14, 14, 0.8) 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 red; +} +--fcc-editable-region-- + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 5px 5px 5px green; +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 0 5px blue; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-092.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-092.md new file mode 100644 index 0000000000..18a055f643 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-092.md @@ -0,0 +1,110 @@ +--- +id: 61b3183655ec10efd8c0bb07 +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +The shadows for your green and blue markers will have the same position, blur, and spread. The only difference will be the colors. + +In the `.green` and `.blue` CSS rules, update the values for the `box-shadow` properties so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, and `spreadRadius` is `0`. Leave the colors as `green` and `blue` for now. + +# --hints-- + +Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 green`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 0px 0px 20px 0px'); +``` + +Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 blue`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); +} + +--fcc-editable-region-- +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 5px 5px 5px green; +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 0 5px blue; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-093.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-093.md new file mode 100644 index 0000000000..c6a0b83c8d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-093.md @@ -0,0 +1,102 @@ +--- +id: 61b31a451057fff645ec09be +title: Step 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +For the green marker's `box-shadow` property, replace the named color with a hex color code. Use the values `3B` for red, `7E` for green, `20` for blue, and `CC` for the alpha channel. + +# --hints-- + +Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 #3B7E20CC`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'rgba(59, 126, 32, 0.8) 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); +} + +--fcc-editable-region-- +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 0 0 20px 0 green; +} +--fcc-editable-region-- + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 20px 0 blue; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-094.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-094.md new file mode 100644 index 0000000000..7cd18908dc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-094.md @@ -0,0 +1,184 @@ +--- +id: 61b31cd7b0c76bfc076b4719 +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +Finally, for the blue marker's `box-shadow` property, replace the named color with the `hsla` function. Use the values `223` for hue, `59%` for saturation, `31%` for lightness, and `0.8` for the alpha channel. + +And with that, your set of colored markers is complete! Well done. + +# --hints-- + +Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 hsla(223, 59%, 31%, 0.8)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'rgba(32, 59, 126, 0.8) 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 0 0 20px 0 #3B7E20CC; +} + +--fcc-editable-region-- +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 20px 0 blue; +} +--fcc-editable-region-- + +``` + +# --solutions-- + +```html + + + + + + CSS Color Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 0 0 20px 0 #3B7E20CC; +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 20px 0 hsla(223, 59%, 31%, 0.8); +} + +``` diff --git a/utils/preformatted-block-names.json b/utils/preformatted-block-names.json index 1f1fed9c50..127411d466 100644 --- a/utils/preformatted-block-names.json +++ b/utils/preformatted-block-names.json @@ -30,6 +30,7 @@ "learn-responsive-web-design-by-building-a-piano": "Learn Responsive Web Design by Building a Piano", "learn-the-css-box-model-by-building-a-rothko-painting": "Learn the CSS Box Model by Building a Rothko Painting", "learn-typography-by-building-a-nutrition-label": "Learn Typography by Building a Nutrition Label", + "learn-css-colors-by-building-a-set-of-colored-markers": "Learn CSS Colors by Building a Set of Colored Markers", "machine-learning-with-python": "Machine Learning with Python", "mongodb-and-mongoose": "MongoDB and Mongoose", "scientific-computing-with-python": "Scientific Computing with Python",