From e492649aec6275ef27f2b144172021f1ea1a614a Mon Sep 17 00:00:00 2001 From: camperbot Date: Mon, 27 Jan 2025 13:52:44 +0000 Subject: [PATCH] chore(i18n,learn): processed translations --- .../5ef9b03c81a63668521804d2.md | 2 +- .../656a46e84a0ad845901ea907.md | 10 +- .../6556bc95e6ce5d850d37dd07.md | 21 ++-- .../6708396caa00e11b597b3365.md | 2 +- .../672aa578a2129554d4675049.md | 38 ++++++ .../672ab82c1a9bbd0e3aabc39d.md | 24 ++++ .../672ab83c4297910eade53c2e.md | 26 ++++ .../672ab849aa1ef70eefd29364.md | 30 +++++ .../672ab8573f32480f192aaae1.md | 48 +++++++ .../672aa6c9e379285acca5a2aa.md | 28 +++++ .../672baa97f2990e6631d522e7.md | 32 +++++ .../672baaa62d4b46667a8ac869.md | 22 ++++ .../672baab2a0c3df66ad987b94.md | 22 ++++ .../672baabf16290b66e6b79a39.md | 38 ++++++ .../672baacb7f2f446728e77efe.md | 28 +++++ .../672baad7bbc4f86762ca173e.md | 28 +++++ .../672baae11d06c867a16f64e1.md | 27 ++++ .../672aa58c389eb9565978495d.md | 26 ++++ .../672ac37104dc2530a769e6a4.md | 52 ++++++++ .../672ac39a22b0cc30eb8fd65e.md | 48 +++++++ .../672ac3c5d0e9fd31835ff772.md | 68 ++++++++++ .../672ac3f129efbf327742eb33.md | 36 ++++++ .../672ac403a9ba7732b31c6480.md | 56 +++++++++ .../6716744f7245947a3dd60009.md | 24 ++++ .../671682dd88e461a8e2620f38.md | 63 ++++++++++ .../6716830dbaf95da9564f2e3b.md | 26 +++- .../67168323932391a9ee0d3a9e.md | 20 +++ .../673263e80dd43da7df3ae565.md | 2 +- .../66ed8fb9f45ce3ece4053eac.md | 118 +++++++++--------- .../66ed8fe1f45ce3ece4053eb1.md | 52 ++------ .../66edc25ae5ea80bf6f785552.md | 72 +++++------ .../6723ce555ff2dfc0cc04b69a.md | 2 +- .../6723c554025f449f4f39c3f5.md | 2 +- .../6723d3cfdd0717d3f1bf27e3.md | 2 +- .../5ef9b03c81a63668521804d2.md | 2 +- .../66a8290a27c2c625e2355042.md | 2 +- .../66a83601cd819e37f0dccd14.md | 19 ++- .../66a83bdcf425e7446900b7c4.md | 4 +- .../66a83e5e491625454b6f62c3.md | 2 +- .../66a83fec026a7a4631e084d2.md | 4 +- .../66a84111965a0c46df6bbd0a.md | 18 +-- .../66a930b20f589b6664c51cb0.md | 4 +- .../66a93730719e1f68410cce54.md | 2 +- .../66a937e74920ba68ebe5e86d.md | 2 +- .../66a93bbe65a26169dbf3bc39.md | 8 +- .../66a93c95bc58e26a8fe95818.md | 10 +- .../66a9401c9d660d6bb15993e2.md | 6 +- .../66a9419e2d18476c645ce693.md | 12 +- .../66a94ea5df66236ebed260e8.md | 4 +- .../66a9521bc70162712caf118d.md | 16 +-- .../66a954b2bcddba72076c1857.md | 18 +-- .../66a9577022877d72d8f43b4f.md | 2 +- .../66a95d0eff8168747805f1f3.md | 20 +-- .../66a96127422411756204bc1b.md | 18 +-- .../66a962954f4e0d76223b37ed.md | 30 ++--- .../66a9689b1bf24b7750898a1b.md | 14 +-- .../66a969951120be7818d8ee49.md | 10 +- .../66a96b01f33ef178dfca9e42.md | 2 +- .../66a972137acd1179fa3fe8a0.md | 10 +- .../66a975c259525b7bc2d5c776.md | 8 +- .../66a97ca8c4cbae7d0bb6e0ad.md | 10 +- .../66a97f40ddd40d7deb0618b7.md | 2 +- .../66a9824ac5d9f77ec304969f.md | 9 +- .../66a9843525e9fa8046d709b7.md | 2 +- .../673543d867b44ac7580610a2.md | 2 +- .../66fbcf750a62784cf11f5630.md | 2 +- .../6740495ba48aa94e5667b436.md | 2 +- .../63effe558c87a70e7072e447.md | 2 +- .../5ef9b03c81a63668521804d2.md | 2 +- .../656a46e84a0ad845901ea907.md | 10 +- .../6556bc95e6ce5d850d37dd07.md | 21 ++-- .../6708396caa00e11b597b3365.md | 2 +- .../672aa578a2129554d4675049.md | 38 ++++++ .../672ab82c1a9bbd0e3aabc39d.md | 24 ++++ .../672ab83c4297910eade53c2e.md | 26 ++++ .../672ab849aa1ef70eefd29364.md | 30 +++++ .../672ab8573f32480f192aaae1.md | 48 +++++++ .../672aa6c9e379285acca5a2aa.md | 28 +++++ .../672baa97f2990e6631d522e7.md | 32 +++++ .../672baaa62d4b46667a8ac869.md | 22 ++++ .../672baab2a0c3df66ad987b94.md | 22 ++++ .../672baabf16290b66e6b79a39.md | 38 ++++++ .../672baacb7f2f446728e77efe.md | 28 +++++ .../672baad7bbc4f86762ca173e.md | 28 +++++ .../672baae11d06c867a16f64e1.md | 27 ++++ .../672aa58c389eb9565978495d.md | 26 ++++ .../672ac37104dc2530a769e6a4.md | 52 ++++++++ .../672ac39a22b0cc30eb8fd65e.md | 48 +++++++ .../672ac3c5d0e9fd31835ff772.md | 68 ++++++++++ .../672ac3f129efbf327742eb33.md | 36 ++++++ .../672ac403a9ba7732b31c6480.md | 56 +++++++++ .../6716744f7245947a3dd60009.md | 24 ++++ .../671682dd88e461a8e2620f38.md | 63 ++++++++++ .../6716830dbaf95da9564f2e3b.md | 26 +++- .../67168323932391a9ee0d3a9e.md | 20 +++ .../673263e80dd43da7df3ae565.md | 2 +- .../66ed8fb9f45ce3ece4053eac.md | 118 +++++++++--------- .../66ed8fe1f45ce3ece4053eb1.md | 52 ++------ .../66edc25ae5ea80bf6f785552.md | 72 +++++------ .../6723ce555ff2dfc0cc04b69a.md | 2 +- .../6723c554025f449f4f39c3f5.md | 2 +- .../6723d3cfdd0717d3f1bf27e3.md | 2 +- .../5ef9b03c81a63668521804d2.md | 2 +- .../66a8290a27c2c625e2355042.md | 2 +- .../66a83601cd819e37f0dccd14.md | 19 ++- .../66a83bdcf425e7446900b7c4.md | 4 +- .../66a83e5e491625454b6f62c3.md | 2 +- .../66a83fec026a7a4631e084d2.md | 4 +- .../66a84111965a0c46df6bbd0a.md | 18 +-- .../66a930b20f589b6664c51cb0.md | 4 +- .../66a93730719e1f68410cce54.md | 2 +- .../66a937e74920ba68ebe5e86d.md | 2 +- .../66a93bbe65a26169dbf3bc39.md | 8 +- .../66a93c95bc58e26a8fe95818.md | 10 +- .../66a9401c9d660d6bb15993e2.md | 6 +- .../66a9419e2d18476c645ce693.md | 12 +- .../66a94ea5df66236ebed260e8.md | 4 +- .../66a9521bc70162712caf118d.md | 16 +-- .../66a954b2bcddba72076c1857.md | 18 +-- .../66a9577022877d72d8f43b4f.md | 2 +- .../66a95d0eff8168747805f1f3.md | 20 +-- .../66a96127422411756204bc1b.md | 18 +-- .../66a962954f4e0d76223b37ed.md | 30 ++--- .../66a9689b1bf24b7750898a1b.md | 14 +-- .../66a969951120be7818d8ee49.md | 10 +- .../66a96b01f33ef178dfca9e42.md | 2 +- .../66a972137acd1179fa3fe8a0.md | 10 +- .../66a975c259525b7bc2d5c776.md | 8 +- .../66a97ca8c4cbae7d0bb6e0ad.md | 10 +- .../66a97f40ddd40d7deb0618b7.md | 2 +- .../66a9824ac5d9f77ec304969f.md | 9 +- .../66a9843525e9fa8046d709b7.md | 2 +- .../673543d867b44ac7580610a2.md | 2 +- .../66fbcf750a62784cf11f5630.md | 2 +- .../6740495ba48aa94e5667b436.md | 2 +- .../63effe558c87a70e7072e447.md | 2 +- .../5ef9b03c81a63668521804d2.md | 2 +- .../656a46e84a0ad845901ea907.md | 10 +- .../6556bc95e6ce5d850d37dd07.md | 21 ++-- .../6708396caa00e11b597b3365.md | 2 +- .../67298243760ae980de5266db.md | 21 ++++ .../672985445d7da807c6b4f406.md | 55 ++++++++ .../672990ecf71a852804ababe7.md | 71 +++++++++++ .../6729959bf9c8e835f46b3f78.md | 30 +++++ .../672995ac85fd943657c2ede5.md | 33 +++++ .../672995bda6c67e369aaf8588.md | 46 +++++++ .../672995c9e6f69436dbcccc79.md | 67 ++++++++++ .../672995d673bd3237200b9e7c.md | 36 ++++++ .../672995e43674fb3775b9ec5d.md | 31 +++++ .../672995f16ed97837b365a9f6.md | 34 +++++ .../672995ffdfd2f337f5f215f8.md | 50 +++++++- .../6729960ed6e2ca3825940e97.md | 41 ++++++ .../6729963b1ab11638753cf082.md | 45 +++++++ .../672aa578a2129554d4675049.md | 38 ++++++ .../672ab82c1a9bbd0e3aabc39d.md | 24 ++++ .../672ab83c4297910eade53c2e.md | 26 ++++ .../672ab849aa1ef70eefd29364.md | 30 +++++ .../672ab8573f32480f192aaae1.md | 48 +++++++ .../672bafd715f6ba77d57f3ec0.md | 8 +- .../672aa6c9e379285acca5a2aa.md | 28 +++++ .../672baa97f2990e6631d522e7.md | 32 +++++ .../672baaa62d4b46667a8ac869.md | 22 ++++ .../672baab2a0c3df66ad987b94.md | 22 ++++ .../672baabf16290b66e6b79a39.md | 38 ++++++ .../672baacb7f2f446728e77efe.md | 28 +++++ .../672baad7bbc4f86762ca173e.md | 28 +++++ .../672baae11d06c867a16f64e1.md | 27 ++++ .../672aa58c389eb9565978495d.md | 26 ++++ .../672ac37104dc2530a769e6a4.md | 52 ++++++++ .../672ac39a22b0cc30eb8fd65e.md | 48 +++++++ .../672ac3c5d0e9fd31835ff772.md | 68 ++++++++++ .../672ac3f129efbf327742eb33.md | 36 ++++++ .../672ac403a9ba7732b31c6480.md | 56 +++++++++ .../6729974ec29be33cb00eb54d.md | 51 ++++++++ .../672a4cd3d59756726657efb8.md | 47 +++++++ .../672a4ce6dab9eb735828b48b.md | 44 +++++++ .../672a4cf959443073a6774908.md | 36 ++++++ .../672a4fa7d335bc7cfb63a392.md | 52 ++++++++ .../672a511bb408ec81c592eb68.md | 46 +++++++ .../6716744f7245947a3dd60009.md | 24 ++++ .../671682dd88e461a8e2620f38.md | 63 ++++++++++ .../6716830dbaf95da9564f2e3b.md | 26 +++- .../67168323932391a9ee0d3a9e.md | 20 +++ .../673263e80dd43da7df3ae565.md | 2 +- .../66ed8fb9f45ce3ece4053eac.md | 118 +++++++++--------- .../66ed8fe1f45ce3ece4053eb1.md | 52 ++------ .../66edd07682767adff3a6231e.md | 4 +- .../66edcd0ecb4b25dc64a34804.md | 6 +- .../66edc25ae5ea80bf6f785552.md | 72 +++++------ .../66ed903cf45ce3ece4053ebe.md | 2 +- .../6723ce555ff2dfc0cc04b69a.md | 2 +- .../6723c554025f449f4f39c3f5.md | 2 +- .../6723d3cfdd0717d3f1bf27e3.md | 2 +- .../671a83934b61f64cefe87a61.md | 2 +- .../5ef9b03c81a63668521804d2.md | 2 +- .../66a8290a27c2c625e2355042.md | 2 +- .../66a83601cd819e37f0dccd14.md | 19 ++- .../66a83bdcf425e7446900b7c4.md | 4 +- .../66a83e5e491625454b6f62c3.md | 2 +- .../66a83fec026a7a4631e084d2.md | 4 +- .../66a84111965a0c46df6bbd0a.md | 18 +-- .../66a930b20f589b6664c51cb0.md | 4 +- .../66a93730719e1f68410cce54.md | 2 +- .../66a937e74920ba68ebe5e86d.md | 2 +- .../66a93bbe65a26169dbf3bc39.md | 8 +- .../66a93c95bc58e26a8fe95818.md | 10 +- .../66a9401c9d660d6bb15993e2.md | 6 +- .../66a9419e2d18476c645ce693.md | 12 +- .../66a94ea5df66236ebed260e8.md | 4 +- .../66a9521bc70162712caf118d.md | 16 +-- .../66a954b2bcddba72076c1857.md | 18 +-- .../66a9577022877d72d8f43b4f.md | 2 +- .../66a95d0eff8168747805f1f3.md | 20 +-- .../66a96127422411756204bc1b.md | 18 +-- .../66a962954f4e0d76223b37ed.md | 30 ++--- .../66a9689b1bf24b7750898a1b.md | 14 +-- .../66a969951120be7818d8ee49.md | 10 +- .../66a96b01f33ef178dfca9e42.md | 2 +- .../66a972137acd1179fa3fe8a0.md | 10 +- .../66a975c259525b7bc2d5c776.md | 8 +- .../66a97ca8c4cbae7d0bb6e0ad.md | 10 +- .../66a97f40ddd40d7deb0618b7.md | 2 +- .../66a9824ac5d9f77ec304969f.md | 9 +- .../66a9843525e9fa8046d709b7.md | 2 +- .../673543d867b44ac7580610a2.md | 2 +- .../66fbcf750a62784cf11f5630.md | 2 +- .../6740495ba48aa94e5667b436.md | 2 +- .../63effe558c87a70e7072e447.md | 2 +- 228 files changed, 4066 insertions(+), 911 deletions(-) diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md index 01fa0edae5..9a900cde7b 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md @@ -9,7 +9,7 @@ dashedName: step-29 有序列表（`ol`）的代碼類似於無序列表，但有序列表中的列表項在顯示時會被編號。 -在第二個 `section` 元素的最後一個 `h3` 元素之後，添加一個包含以下三個列表項的有序列表： +Below the `h3` element, add an ordered list with these three list items: `flea treatment` `thunder` `other cats` diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a46e84a0ad845901ea907.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a46e84a0ad845901ea907.md index 4003df9904..717d988dcc 100644 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a46e84a0ad845901ea907.md +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a46e84a0ad845901ea907.md @@ -13,15 +13,17 @@ To `experiment` means to try new ideas or methods. An `interview` is a conversation where someone asks questions to get information. -An `infographic` is a visual image like a chart or diagram used to represent information. For example: +An `infographic` is a visual image like a chart or diagram used to represent information. `Readers` are people who read, especially those who read a particular publication. -`We experiment with new teaching methods` (trying new ideas) +For example: -`The journalist conducts interviews with her readers` (conversation for information) +* `We experiment with new teaching methods.` (trying new ideas) -`They use infographics to explain data` (visual images for information) +* `The journalist conducts interviews with her readers.` (conversation for information) + +* `They use infographics to explain data.` (visual images for information) # --fillInTheBlank-- diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556bc95e6ce5d850d37dd07.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556bc95e6ce5d850d37dd07.md index 783e6cd38e..6ccc20d5b1 100644 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556bc95e6ce5d850d37dd07.md +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556bc95e6ce5d850d37dd07.md @@ -7,24 +7,23 @@ dashedName: task-3 # --description-- -Adjectives are words that describe or give more information about nouns or pronouns. For example, in the phrase `the blue sky`, `blue` is an adjective describing the sky. +Adjectives describe or provide more information about nouns or pronouns. They usually come before the noun they modify. For example: -Notice how the adjective comes before the noun. It is `blue sky` not `sky blue`. +- `The blue sky` - Here, `blue` is an adjective describing the noun `sky`. Notice how the adjective `blue` comes before the noun. -Expressive language can include idiomatic expressions or descriptive adjectives to communicate strong feelings or vivid ideas, like saying `sparkling eyes` to describe someone's bright, lively eyes. +- `She enjoys early mornings.` - The adjective `early` describes the type of mornings she enjoys. -Instead of saying `It seems like you have a ton of energy this morning`, James could say something like `You look energetic this morning` to convey the same idea. `Energetic` is the adjective to represent someone who has a lot of energy. +- `He has a quick shower in the morning.` - The adjective `quick` describes how short the shower is. -Here are some more examples: +Adjectives can also make language more expressive by giving details about a person, place, or thing. For example: -* `She wakes up early every day` - `Early` describes the time of her waking up. -* `He has a quick shower in the morning` - `Quick` describes the short duration of the shower. +Instead of saying `It seems like you have a lot of energy this morning`, you could say `You look energetic this morning`. Here, the adjective `energetic` is more concise and expressive, showing that someone has a lot of energy in a positive way. # --questions-- ## --text-- -What does the adjective `energetic` imply about someone? +In the sentence `You look energetic this morning`, what does `energetic` suggest about the person? ## --answers-- @@ -32,7 +31,7 @@ That the person is feeling unwell. ### --feedback-- -`Energetic` is generally used to express a positive feeling about a person, not that they are feeling unwell.. +Does `energetic` usually describe someone who feels negative or unwell? Think about how we use it to describe someone's energy level. --- @@ -44,7 +43,7 @@ That the person is uncomfortable. ### --feedback-- -`Energetic` is generally used to express how dynamic the person looks, not how comfortable they are. +Does `energetic` describe someone's comfort level, or does it describe something more related to activity or energy? --- @@ -52,7 +51,7 @@ That the person is late. ### --feedback-- -The adjective `energetic` does not relate to time or punctuality. +Does `energetic` have any connection to time or being late? Reflect on its meaning in the description. ## --video-solution-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md index 37a474eeaf..1154df0acb 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md @@ -2,7 +2,7 @@ id: 6708396caa00e11b597b3365 title: What Is the Role of Open Graph Tags, and How Do They Affect SEO? challengeType: 11 -videoId: 94IAhyEfO8I +videoId: Bat8HyGzkU8 dashedName: what-is-the-role-of-open-graph-tags --- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md index 96d642737c..ec7e5a02d0 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md @@ -10,6 +10,44 @@ dashedName: what-are-the-basic-parts-of-a-computer Watch the video lecture and answer the questions below. +# --transcript-- + +What are the basic parts of a computer? + +Computers are very powerful machines that perform a variety of tasks like writing documents, playing games, and browsing the internet. + +As a developer, it is important to understand the basic inner workings of a computer. + +The first major component of a computer would be the motherboard. The motherboard holds all of the memory, connectors, and hard drives that are needed to run the computer. It serves as the main circuit board for the computer. + +Inside the computer case of the motherboard, you will find the CPU which stands for Central Processing Unit. The CPU is a processor that is responsible for executing instructions and performing calculations. It is often referred to as the brain of the computer. + +The CPU is a small square with a chip that goes into the motherboard's CPU socket. A socket is a place where the CPU is inserted. The CPU processor speed is measured in gigahertz (GHz) and mega-hertz (MHz). Gigahertz is a billion cycles per second and mega-hertz is a million cycles per second. + +The next critical component of a computer would be the system's short term memory. This is known as RAM or Random Access Memory. RAM is a temporary storage location for the computer's CPU. Anytime the computer needs to access data quickly, it will use RAM. + +The more RAM you have on your computer, the faster it will run and the more programs you can run at the same time. If you are running low on RAM, your computer will run slower and you will notice the difference in performance. + +It is important to note that RAM is volatile memory. This means that it is lost when the computer is turned off. This is why it is important to save your work on your computer. + +When you do save your files, they are stored on the hard drive. The hard disk drive, or HDD, is a permanent storage location that is used to store data even when the computer is turned off. This is where all of your files and software are stored. + +The hard drive is made up of a spinning platter and an arm. The platter is where the data is stored and the arm is used to read and write data to the platter. When you have a faster hard drive, your computer will boot up faster and your programs will run faster. + +Another type of data storage would be the Solid State Drive, or SSD for short. SSD is non volatile flash memory and can be used in place of a hard drive. SSDs are faster and smaller than hard drives but hard drives are cheaper and have more storage capacity. + +Another key component of a computer is the power supply unit, or PSU. The PSU is responsible for converting the electricity from the wall outlet into a form that the computer can use. It sends the power from the outlet to the motherboard, CPU, and other components of the computer. + +Another key component would be the expansion cards. These are cards that are inserted into the motherboard to add additional functionality to the computer. Examples of expansion cards would be the video card, sound card, and network card. + +The video card, also known as the Graphics Processing Unit or GPU, is responsible for rendering visuals on the computer screen. + +The sound card is responsible for playing sound on the computer speakers. + +The network card is responsible for connecting the computer to the internet. + +Even though there are many more parts to the computer, these are some basic parts that you should familiarize yourself with. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md index 91a1e84380..d70561820e 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md @@ -10,6 +10,30 @@ dashedName: how-to-effectively-work-with-your-keyboard-mouse-and-other-pointing- Watch the lecture video and answer the questions below. +# --transcript-- + +How can you effectively work with your keyboard, mouse, and other pointing devices? + +Many of you have been used to working with your keyboard and mouse for years on end for a variety of activities like gaming, performing tasks for work, or surfing the web. + +But prolonged misuse of these devices can lead to serious health problems down the road. + +In this lecture video, we will cover ways to work with your computer’s keyboard and mouse in healthy ways. + +The first tip is to be mindful of the mouse grip. When working on serious tasks for work or during intense gaming moments, you may tend to grip the mouse too hard. However, this can lead to serious hand and wrist issues. To prevent this, you want to make sure to hold the mouse gently and keep your fingers nice and relaxed. + +The second tip is to consider using an ergonomic keyboard and mouse. These tools are designed to reduce wrist strain by keeping your hands in a more natural position. + +While prices for these devices can vary and may be a costly purchase for your current budget, they can be a good investment in your overall long-term health. So, you might consider starting to research an ergonomic keyboard and mouse to use. + +Another tip is to keep your mouse the same height as your keyboard. You don't want to have to reach up or down to use the mouse, as this can strain your wrist and arm muscles over time. + +You also want to be mindful of your overall posture when sitting at the computer for hours on end. Being slouched over your computer and putting your wrist in an unnatural position at the keyboard will lead to long-term health issues. So, you want to make sure to sit up straight when working at your computer and maintain a healthy and natural wrist position. + +The last tip would be to use keyboard shortcuts whenever possible to help minimize typing. There are dozens of shortcuts available for tasks such as navigating the web, navigating around your operating system, working within a code editor, and more. So, it’s best to research some of these keyboard shortcuts and and start incorporating them into your daily computer usage. + +As you continue using your mouse and keyboard for upcoming coding projects and other activities, remember to keep these health tips in mind. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md index 515d189cc8..d79affa6b0 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md @@ -10,6 +10,32 @@ dashedName: what-are-the-different-types-of-internet-service-providers Watch the lecture video and answer the questions below. +# --transcript-- + +What are the different types of internet service providers? + +First, what is an internet service provider, or ISP? It’s a company that sells access to the global internet network, essentially. And they come in three different tiers. + +The first tier are the giant conglomerate companies, which have the infrastructure to handle most (if not all) of their network traffic independently. + +The second tier are the country-wide providers, which sometimes rent access to tier 1 networks but can stand fairly well on their own. + +The third tier are the small companies that primarily focus on providing internet to local markets, and rely on larger ISPs to provide their infrastructure. + +These providers will offer different types of connections as well. + +Fibre optic connections rely on glass or plastic fibres to transmit data via light, resulting in very high connection speeds and data exchange. + +Cable connections use the same infrastructure as a cable television provider, which often makes them readily available in many regions. + +DSL connections use the infrastructure that landline phone services use. Because of the prevalence of this infrastructure, DSL is available in areas where cable might not be. But it is also frequently a slower option. + +Dial-up also uses the phone lines, but requires exclusive connection (disabling the use of the line for phone purposes when connected to the internet). This is a much older technology that has fallen into disuse. + +Satellite connections use an array of satellites orbiting the earth to connect various devices across the world. And finally, similar to that, a 5G home internet provider uses the cell tower infrastructure to keep you online. + +And that should give you a basic rundown of what types of internet service providers and internet connections are out there! + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md index 8e1b267afd..085ff16bd6 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md @@ -10,6 +10,36 @@ dashedName: what-are-safe-ways-to-sign-into-your-computer Watch the lecture video and answer the questions below. +# --transcript-- + +What are safe ways to sign into your computer? + +Many of you have being using computers for a while. But you might not have thought about the safest or most secure ways to sign into your computer. + +Whether you are using a Mac or PC, there are many ways to safely sign into your computer. + +The first thing you should do is to make sure that your computer is password protected. + +For Windows users, start by opening the Start menu and selecting Settings. From there, go to Accounts and then Sign-in options. You can then set up a password for your computer. + +*Note: If you encounter any difficulties or are using a different version of Windows, refer to the official Microsoft documentation or support resources for detailed instructions tailored to your specific version.* + +When creating your password, make sure it is a long and complex password. You can use a combination of letters, numbers and special characters to make it more secure. + +Choosing an easy password like `12345` or `password` is not a good idea. These are easy to guess and can be easily hacked. + +Also, do not use passwords based on personal information like your name, birthday, or address. Those are also easy for hackers to guess. + +When you create your password, it is also a good idea to setup two-factor authentication (2FA). 2FA serves as an extra layer of security and requires a second form of verification to ensure that the person trying to access the account is indeed the authorized user. + +If you are a Mac user, you can click on the Apple menu and then go to system settings. From there you can go to Users & Groups and set up a password for your computer. + +Some Mac computers come with a touch ID feature, which is often considered more secure than regular passwords. This feature allows you to sign into your computer using your fingerprint. + +For Windows users, the Windows Hello feature offers a more secure way to sign in. It uses biometric methods such as facial recognition or fingerprints for authentication, providing an alternative to traditional passwords. + +After you finish watching these set of lecture videos, I urge you to look into these additional security features and set them up on your computer so that you can keep your computer safe and secure. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md index 0aba68160a..22988e04c5 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md @@ -10,6 +10,54 @@ dashedName: what-are-the-different-types-of-tools-professional-developers-use Watch the lecture video and answer the questions below. +# --transcript-- + +What are the different types of tools professional developers use? + +Professional developers rely on a variety of tools to increase productivity and code quality. Let's learn about those tools, including the ones that seem very obvious. + +The first among the tools is computers. A computer is the primary development environment. It could be a heavy desktop or a portable laptop with either Windows, macOS, or Linux as the operating system. + +Professional developers often go for computers with fast processing power and plenty of RAM to handle resource-intensive tasks. + +After the computer is a program for writing and editing code right on that computer. That's a code editor or integrated development environment (IDE). + +IDEs like Visual Studio, IntelliJ IDEA, JetBrains, and PyCharm provide powerful features like code completion, debugging, and integrated terminal support. + +Visual Studio Code (VS Code) is essentially a code editor, but it also provides these functionalities with its rich extension library. + +Other code editors are Sublime Text, Atom, Notepad++, and Brackets. + +When you write code with code editors and IDEs, you need to track the changes you make to them. The tool that lets you track those changes is a version control system. + +Git is the most widely used version control system in the development community. + +Platforms like GitHub, GitLab, and Bitbucket provide cloud-based hosting services for your Git repositories. These platforms enable collaboration with other developers, allow you to work on multiple branches, and facilitate the merging of code changes. + +Package managers are another critical tool. They help developers simplify the process of adding, updating, and removing libraries and project dependencies. + +Examples of popular package managers are: + +* NPM, Yarn, and PNPM for JavaScript +* PIP for Python +* Composer for PHP +* Maven for Java + +After writing code with different tools, developers test that code to make sure it's working as expected. + +For this, developers use testing frameworks like Cypress, Playwright, Selenium, and others. There are also language-specific testing frameworks. Examples are: + +* Jest for JavaScript +* pytest for Python +* JUnit for Java +* PHPUnit for PHP + +You don't only need to test the code to make sure it's working as expected. You also need to test what the code looks like visually to the end users. Developers use web browsers for this. + +Modern browsers like Chrome, Firefox, Edge, and Safari offer developer tools for inspecting HTML, CSS, and JavaScript code. There are also tools for debugging and performance profiling. + +These tools help developers test and optimize their web applications across different browsers for the end users. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672aa6c9e379285acca5a2aa.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672aa6c9e379285acca5a2aa.md index 906f1f1cb1..6a70a954f8 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672aa6c9e379285acca5a2aa.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672aa6c9e379285acca5a2aa.md @@ -10,6 +10,34 @@ dashedName: what-are-common-design-terms-to-help-you-communicate-with-designers Watch the video lecture and answer the questions below. +# --transcript-- + +What are common design terms to help you communicate with designers? + +As a developer, you may need to work closely with designers. If you understand basic design terminology, you'll have a shared vocabulary and you'll be able to participate in the design process more actively. This can make your workflow more efficient and result in a better user experience. + +So let's dive in. We'll start with the term layout. Layout is how the visual elements are arranged on a page or screen to communicate a message. These elements may include text, images, and white space. The layout is like the blueprint of a design. Designers must consider the placement, size, and hierarchy of each element. + +The term that is closely related to layout is alignment. Alignment is how the elements are placed in relation to one another. Using alignment correctly is helpful for making the design look clean and organized. Designers create visual order by aligning elements along imaginary lines, edges, or a central point. + +Great. Now let's talk about composition. Composition is the art of arranging elements to create a harmonious design. It determines how elements like images, text, and shapes relate to each other and contribute to the design in an artistic way. While layout mostly focuses on the placement of the elements, composition also considers the artistic impact that this placement will have in the overall design. + +Composition is closely related to concepts of balance. Balance is how the visual weight is distributed within a composition. Designers aim to create an equilibrium through symmetrical or asymmetrical arrangements. A balanced design feels harmonious. + +Hierarchy is another important concept that you should know. Hierarchy establishes the order of importance of the elements in a design. It's about making sure the most important information is noticed first. You can implement a visual hierarchy with size, color, contrast, alignment, white space, and even typography. + +To create clear distinctions between the elements, you can use contrast. Contrast is helpful for guiding user attention to what you want to emphasize. You can do this through variations in color, size, shape, texture, or any other visual characteristic. Strong contrast is also helpful for improving readability. + +Another helpful term is white space. White Space, also known as "negative space", is the empty space in a design. It's the area surrounding the elements. You might be surprised to know that white space is not necessarily white. Actually, it can be space in any color or texture. Its purpose is to improve the readability and enhance the visual hierarchy of a design. + +These are general design concepts that you will find very often, but you may also find design terms that are more closely related to software development. + +The user interface, also known as UI, is how humans interact with computers. A user interface includes the visual and interactive elements that users can see on their screens, like icons, images, text, menus, links, and buttons. + +The user experience, also known as UX, is about how users feel when using a product or service. An application with a well-designed user experience is intuitive, easy to use, efficient, accessible, and enjoyable. The user interface plays a key role in making the user experience as easy and enjoyable as possible, so they are very closely related. + +These are some of the common terms that you should know to communicate with designers. With this knowledge, now you can take a more active role in the design process. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baa97f2990e6631d522e7.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baa97f2990e6631d522e7.md index edb9ff819c..8c2a153704 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baa97f2990e6631d522e7.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baa97f2990e6631d522e7.md @@ -10,6 +10,38 @@ dashedName: how-do-you-create-good-background-and-foreground-contrast-in-your-de Watch the lecture video and answer the questions below. +# --transcript-- + +How do you create good background and foreground contrast in your designs? + +First, you may need to familiarize yourself with contrast. Contrast is the difference between two colors - or how easy it is to tell them apart. + +Colors with a higher contrast will be more visually distinct, whereas colors with a lower contrast will be more visually similar. For example, black and white have a very high contrast ratio. Whereas light blue and light purple have less of a contrast. + +Of course, in these examples the distinction might be made clearer because of the layout. But what about applying these colors to text? You can have the high contrast black text on a white background. And the low contrast purple text on a blue background. + +But how do you determine what is a "good enough" contrast? You can't base it solely on how the text looks to you, as every user will have a different experience. Thankfully, the Web Content Accessibility Guidelines, or WCAG, provide a standard for this. + +Text with a contrast ratio of 4.5:1 is considered the AA standard, which is the bare minimum you should follow to be accessible to most users. Text with a contrast ratio of 7:1 is considered the AAA standard, and ensures the best level of accessibility. + +There are a number of websites that can check the contrast ratio between two colors, but most browsers will allow you to do this directly in the developer tools on your website. + +Let's open the developer tools and inspect the text elements of the example site. + +The black text on a white background has a contrast ratio of 21:1, which more than meets the AAA standard. The purple text on a blue background, however, has a contrast ratio of 1.48:1, which does not even meet the AA standard. + +How can you fix this? Well, there are three aspects that impact the contrast ratio. + +The first is the hue, which represents the general color type, like red, blue, orange. Let's shift to a hue that is further away from blue. In this case, let's use red. + +Unfortunately, this change only brought the contrast ratio to 1.49:1, which means you need to change the saturation, or the "amount" of color present. Let's increase the amount of red in the text. That brings us much closer to the goal, with a 3.54:1 contrast ratio. + +However, you can potentially get even closer by changing the last value, which is lightness. Lightness represents how much white is present in the color. + +Let's decrease the lightness of the red. Now there is a much darker red against the light blue background, which brings the contrast ratio to 10.34:1. + +You could continue to adjust the colors to find the balance between the visual effect you want and an accessible contrast ratio. But it is important to remember that accessibility should always take precedence. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baaa62d4b46667a8ac869.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baaa62d4b46667a8ac869.md index 9f54e1fa1a..c8573e5c85 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baaa62d4b46667a8ac869.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baaa62d4b46667a8ac869.md @@ -10,6 +10,28 @@ dashedName: what-is-the-importance-of-good-visual-hierarchy-in-design Watch the lecture video and answer the questions below. +# --transcript-- + +What is the importance of good visual hierarchy in design? + +Visual hierarchy refers to the way you layout and display the content of your page to guide the viewer's attention. + +A strong hierarchy can provide a clear path for the eye to follow, ensuring that the information you convey is consumed in the order that you intended. + +Let's consider a basic page layout in which the HTML for the page is semantically correct, but the styling applied does not create a strong visual hierarchy. + +If the font size isn't distinct, there is no visible indication of the document flow, although things are separated by headings. + +To create a visual hierarchy, you should apply different font sizes to the heading tiers. You could also use something like a "callout box" to highlight a specific section. + +Visual hierarchy can also help increase your user conversion. For example, you can take advantage of the callout box to further draw attention to a Call to Action (CTA) button. + +With the CTA button being visually tied to the work history section, it guides the user to the vital information and the action you want them to take based on that information. + +Finally, your visual hierarchy can be important for conveying other components, like a navigation bar or a footer. + +This makes it easier for your users to find the essential information that they may be looking for. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baab2a0c3df66ad987b94.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baab2a0c3df66ad987b94.md index 4aa66228a4..740be31be1 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baab2a0c3df66ad987b94.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baab2a0c3df66ad987b94.md @@ -10,6 +10,28 @@ dashedName: how-does-scale-work-in-design Watch the lecture video and answer the questions below. +# --transcript-- + +How does scale work in design? + +The "scale" of something refers to its size. + +When you're looking at scaling in your web design, you're looking at the size relationships between different elements, and how these elements might adapt to different screen sizes. + +Using the correct scale for your elements plays an important role in visual hierarchy. Larger elements will draw more attention, which can guide your users through the content in the way that you want. + +For example, the visual separation between a heading and a paragraph draws your reader’s attention, but the scale should be appropriate to get an eye-catching text that pulls your reader to that section. + +Scale doesn't apply just to text, though. It's also important for images. And while the scale of a banner image might make sense for a desktop layout, it might be too large on a mobile layout. + +By scaling an image down to a more appropriate ratio, you can keep the visual impact while ensuring the information on the site is visible. + +Scale is also important for interactivity, and the ability to actually use your website. If the text in a navigation bar is not at an appropriate scale, mobile phone users will have a hard time tapping on the links. + +And if you scale it appropriately, you end up with links that are not only easier to read, but easier to click on for your mobile users. + +There are many ways that scale is important in your designs. We've covered the basics, so you should now have a fundamental understanding of its importance. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baabf16290b66e6b79a39.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baabf16290b66e6b79a39.md index 0a966fe5ac..0bbe32cf6f 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baabf16290b66e6b79a39.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baabf16290b66e6b79a39.md @@ -10,6 +10,44 @@ dashedName: how-does-alignment-work-in-design Watch the lecture video and answer the questions below. +# --transcript-- + +How does alignment work in design? + +When you are designing web pages, it is important to create cohesive and visually appealing designs. One way to achieve this is through the use of alignment. + +Alignment is the process of arranging text and images in a way that creates a visual connection between elements. + +It helps to create a sense of order and organization on the page, making it easier for users to navigate and understand the content. + +There are several types of alignment you can use, but the basic ones are: + +- left alignment +- center alignment +- right alignment +- justified alignment +- vertical alignment + +Left, right, and center alignments are all subtypes of horizontal alignment, while vertical alignment is used to align elements along a vertical axis. + +Let's take a closer look at each type of alignment and how you can use them in your designs. + +Left alignment is commonly used with text where each element is aligned to the left margin. Aligning all of the headings and paragraphs on a web page to the left margin makes it easier for the user to read and follow the content. + +The opposite of left alignment is right alignment, where each element is aligned to the right margin. This is often used on websites to display additional content like promotional banners or advertisements. + +For example, an ad that is aligned to the right margin makes it stand out from the rest of the content on the page but doesn't distract the user from the main content. + +Center alignment is where elements are centered on the page. This is often used for headings, logos, and other important elements that you want to draw attention to. + +Justified alignment is when text is aligned to both the left and right margins. This is typically used for descriptive passages or articles, and creates a clean and professional look. + +The last type of alignment is vertical alignment, which is used to align elements along a vertical axis. + +Vertical alignment can be used, for example, for a contact form on a website. Aligning all of the form inputs like the name, email, and message fields along a vertical axis makes it easier for the user to fill out the form. + +By using different types of alignment, you can create a sense of order and organization on the page that makes it easier for users to navigate and understand the content. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baacb7f2f446728e77efe.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baacb7f2f446728e77efe.md index 86b23b4ca3..0eefe09390 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baacb7f2f446728e77efe.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baacb7f2f446728e77efe.md @@ -10,6 +10,34 @@ dashedName: what-is-the-importance-of-whitespace-in-design Watch the lecture video and answer the questions below. +# --transcript-- + +What is the important of whitespace in design? + +White space refers to any type of space around elements like images, text, and buttons. White space is important in design because it helps to create a balance between the elements on the page. + +Let's take a look at some examples of how white space can be used effectively in design. + +For example, let's consider a call-to-action (CTA) button. CTAs are used to encourage users to take a specific action like signing up for a newsletter or making a purchase. + +By using white space effectively, we can help to make a CTA button more prominent and encourage users to click on it. + +Now let's take a closer look at the different types of white space. + +This first example uses both macro and active white space. Macro white space is the space between larger elements like images, text blocks, and buttons. + +Active white space is the space that is intentionally created to help guide the user's eye and draw attention to certain elements on the page. + +In contrast to active white space, there is also passive white space. Passive white space is the space that is left over after all the elements on a page have been placed. + +Another type of whitespace would be micro white space. This is the space between individual characters in a line of text. + +Micro white space is important because it helps to improve readability and legibility, making it easier for users to scan and understand the content. + +When designing your web pages, you always want to be mindful of the law of proximity. This law states that elements that are close together are perceived as being related, while elements that are far apart are perceived as being unrelated. + +You can use white space to help group related elements together and help navigate users through the content on your page. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md index 6e3678f0a1..9c4ea2e5b5 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md @@ -10,6 +10,34 @@ dashedName: what-are-best-practices-for-working-with-images-in-your-designs Watch the lecture video and answer the questions below. +# --transcript-- + +What are best practices for working with images in your designs? + +Adding images to your websites is a great way to engage your users and increase the visual appeal of your site. But there are a few things to consider when working with images in your designs. + +The first thing to consider is creating responsive images. Responsive images are images that scale to fit the size of the screen they are being viewed on. This is important because it ensures that your images look good on all devices, from desktops to mobile phones. + +Another thing to consider is the resolution for images. Higher quality images with better resolution have more pixels per inch. Pixels are small squares that make up an image. + +Pixels per inch, or PPI, is the number of pixels in one inch of an image. The higher the PPI, the better the image quality. + +You want to make sure that your images are high quality and look good on all devices. This means that you should use high resolution images that are optimized for the web. + +Another thing to consider is the size of your images and how they fit within the spaces in the layout. You want to make sure that your images are the right size and are not too large or too small. + +Using large images that are meant to fit in smaller spaces in the design can slow down your website and make it harder for users to load your site. You want to make sure that your images are the right size and are optimized for the web. + +When it comes to image placement, you want to think about balance, hierarchy, and alignment to help ensure your images are optimized for the web. + +Balance is the distribution of visual weight in a design. You want to make sure there is a good balance between text and images on the site so it creates a harmonious design. + +Hierarchy is the order in which elements are viewed on a page. You want to make sure that images that align with important content are placed higher than images that are less important. + +Alignment is the placement of elements in relation to each other. You want to make sure that your images are aligned with the text and other elements on your site so that it creates a cohesive design. + +The last thing to consider is accessibility for images. You want to make sure that your images are accessible to all users, including those with visual impairments. This means that you should use alt text for your images so that screen readers can read the text to users who are visually impaired. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baae11d06c867a16f64e1.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baae11d06c867a16f64e1.md index 868b9face5..0237f75b0a 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baae11d06c867a16f64e1.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baae11d06c867a16f64e1.md @@ -10,6 +10,33 @@ dashedName: what-is-progressive-enhancement Watch the lecture video and answer the questions below. +# --transcript-- + +What is progressive enhancement? + +Progressive enhancement is a design approach that ensures all users, regardless of browser or device, can access the essential content and functionality of an application. + +It focuses on delivering a core experience that works for everyone, while offering extra features and improvements to users with more advanced browsers or better internet connections. + +The progressive enhancement approach lives by these core principles: + +- All core content and basic functionality should be accessible on all browsers +- All advanced layouts should be provided through external CSS stylesheets +- All advanced functionality should be provided through external JavaScript files +- A user's browser preferences should be respected + +Using a progressive enhancement approach makes your applications more accessible because all core content and functionality should not be blocked in unsupported environments. + +In terms of speed, a progressive enhancement approach can also help improve the performance of your applications. + +Those users that are working with slower internet connection speeds will still be able to access the content because the browser will download the necessary resources first. + +When it comes to SEO, progressive enhancement can also help improve the visibility of your applications. + +Search engines will be able to crawl the content of your applications because the core content is available in the initial HTML response. + +While some have criticized this approach deeming that it is not always realistic for applications that rely heavily on JavaScript for their functionality, it is still a good practice to follow when building applications. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672aa58c389eb9565978495d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672aa58c389eb9565978495d.md index 5e118ee608..ccbb2240dc 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672aa58c389eb9565978495d.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672aa58c389eb9565978495d.md @@ -10,6 +10,32 @@ dashedName: how-can-you-use-file-management-applications-on-your-computer Watch the video lecture and answer the questions below. +# --transcript-- + +How to use file management applications? + +A file management application is a way to easily store, organize, and edit your files on your computer. Whether you use a Mac or Windows computer, there are built-in applications you can use to organize your files. + +If you have a Windows computer, the default file manager is the File Explorer. This is used to browse, search, and manage files and folders, as well as perform file operations like copying, moving, and deleting. + +To find the File Explorer, you can go to the Start menu or press the Windows logo key on your keyboard. + +To pin a folder, you can right click with your mouse and select "Pin". To move a file or folder, you first need to select it, then select "Cut" and then navigate to the new location to paste it. + +If you have a Mac computer, the default file manager is the Finder. This provides access to local and remote files, supports file previews, and offers a variety of organizational features like tags and Smart Folders. + +To access the Finder on your Mac, go to the Dock at the bottom and click on the Finder icon. + +You will notice a sidebar on the left-hand side where your favorite folders are located. + +One way to organize your files, is to use tags. To tag a file or folder, you can select the item in the Finder and then right click with your mouse. You will see the "Tags..." option in the dropdown and you can apply a custom colored tag. + +To search for tagged items, you can scroll to the bottom of the sidebar and click on the corresponding colored tag, or you can search for the tag by color name in the search field. + +Another way to organize your files is to use smart folders. Smart folders are collections of files that are automatically organized based on criteria you set, such as file type, date, or keywords. + +Whether you're using File Explorer on Windows or Finder on Mac, these applications provide flexibility to manage your files with features like tags, search, and Smart Folders. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac37104dc2530a769e6a4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac37104dc2530a769e6a4.md index 683f59ec45..eff43a863d 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac37104dc2530a769e6a4.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac37104dc2530a769e6a4.md @@ -10,6 +10,58 @@ dashedName: what-are-best-practices-for-naming-files-for-web-applications Watch the lecture video and answer the questions below. +# --transcript-- + +What are best practices for naming files for web applications? + +As you start to build out your own web applications, you will need to be mindful of what you name your files. + +You will want to name your files in a way that is easy to understand and maintain. + +Let's take a look at some examples of good and bad file names for HTML files. Note that the `.html` extension in these examples tells us that this is an HTML file. + +Here is an example of a bad file name: + +```md +index1234.html +``` + +By the name alone, it is not clear what the file is about. This file could be for a products page, blog page, or any other type of page but we don't know that from the file name. + +Here is an example of a better file name for an HTML file: + +```md +about-us.html +``` + +By using a more descriptive name like `about-us.html`, it is clear what the file is about. + +You will also notice in this file name that there are no spaces. Instead, you use a hyphen, `-`, to separate the words. + +Sometimes you might see a file name called `index.html`. This is a special file name that is used to represent the main page of a website. When you visit a website, the `index.html` file is the first file that is loaded. + +Another important consideration when naming files is the use of special characters. + +Using a mixture of special characters, numbers, and letters can make it difficult to understand what the file is about. + +Here is an example of a bad file name: + +```md +file-1!@.html +``` + +This name looks unnecessarily complicated and does not give us any information about what the file is about. + +So it is best to stick with only using letters and dashes in your file names. + +As you start to learn more languages, you will see that there are common conventions for naming files in those languages as well. + +In these situations, it is always best to consult with official documentation or other resources to understand the best practices for naming files in that language. + +Also you will be in situations where you are working on a team and you will need to follow the conventions that the team has established for naming files. + +Always consult with the team's style guide to make sure your file names are consistent with the rest of the team. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac39a22b0cc30eb8fd65e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac39a22b0cc30eb8fd65e.md index 9f46d28c0f..d918513227 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac39a22b0cc30eb8fd65e.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac39a22b0cc30eb8fd65e.md @@ -10,6 +10,54 @@ dashedName: what-are-best-practices-for-file-folder-organization-in-web-applicat Watch the lecture video and answer the questions below. +# --transcript-- + +What are best practices for file and folder organization in web applications? + +When building out web applications, it is important to think about the organization of your files and folders. This will help keep your code organized and easier to maintain. + +Let's take a look at an example folder structure for an HTML and CSS project: + +```bash +. +├── /assets +│ ├── /images +│ │ ├── logo.png +│ │ ├── banner.jpg +│ │ └── icons.svg +│ ├── /fonts +│ │ ├── custom-font.woff +│ │ └── custom-font.woff2 +├── /css +│ ├── main.css +│ ├── about.css +│ └── contact.css +├── index.html +├── about.html +├── contact.html +└── README.md +``` + +At the top of the example, there is a single dot, which represents the root directory. + +The root directory is the top-level directory in a file system, serving as the starting point for all file paths and containing all other directories and files. A directory is another name for a folder. + +Inside the root directory, the first directory shown is the `assets` directory. The term `assets` refers to any files that are used in the project, such as images, fonts, or other resources. + +In this example, there are two directories inside the `assets` directory called `images` and `fonts`. + +The next directory would be the `css` directory. Sometimes this is also referred to as a stylesheets directory. This is where you would store all of your CSS files. + +Below the `css` directory are the HTML files. The `index.html` file represents the homepage, while `about.html` and `contact.html` represent the About and Contact pages, respectively. + +Lastly, there is a `README.md` file. `README` files are commonly used to provide useful information about the project, such as what it does, how to use it, and any other relevant details. + +The `.md` extension stands for Markdown, which is a lightweight markup language that is often used to write documentation. + +By organizing your project into assets, CSS, and HTML files, it makes it easy to find what you are looking for. This also makes it easy for other developers to contribute to your project. + +It is important to note that this is just one example of how you can organize your files and folders. There are many different ways to structure a project. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac3c5d0e9fd31835ff772.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac3c5d0e9fd31835ff772.md index a06c421fc9..881b1f0662 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac3c5d0e9fd31835ff772.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac3c5d0e9fd31835ff772.md @@ -10,6 +10,74 @@ dashedName: how-to-create-move-and-delete-files-and-folders-using-explorer-finde Watch the lecture video and answer the questions below. +# --transcript-- + +How to create, move, and delete files and folders using the Explorer or Finder? + +To create a file on Windows using the Explorer, you can click on the "New" option at the top right. This will show you a list of the different types of files that you can create. + +You can also create files in their corresponding applications. Let's create a text file to show you the process. + +When you click on "New" and select the file type, you will see a new text file in your current folder with a default name. You can rename it if you'd like. + +The process of creating folders is exactly the same. Click the "New" button at the top right and then select the "Folder" option or right-click on an empty spot and go to "New." Then, select the "Folder" option. You'll see a new empty folder in your current location. + +You can rename files and folders by selecting them and clicking on the "Rename" option at the top. When current name of the file is highlighted, you can start writing the new name of the file. Press Enter to confirm the changes. + +Alternatively, you can right-click on the file or folder and select the "Rename" option or use the F2 keyboard shortcut. Write the new name and press Enter to confirm the changes. + +You can move a file or folder to another folder by dragging and dropping it into the destination folder, if you have it opened it as a tab. + +You can also select the file or folder and select the "Cut" option at the top. + +Then, go to the destination folder and paste it by clicking the "Paste" button at the top. If you copied or cut the file previously, this button will be enabled. + +You can also do this by right-clicking on an empty spot and then clicking on the paste icon. This will remove the file or folder from its original location. + +To delete a file or folder, click on it and then click on the Trash icon at the top. You will also find a "Delete" option if you right-click on it. + +Great. Now let's see how you can do this on macOS using Finder. + +Finder is the default file manager on macOS. + +To create a file on macOS, you need to open an application that lets you create the type of document that you need to create. Currently, there isn't a built-in way to create a file directly on Finder. + +For example, to create a simple plain text file, you can open TextEdit and save your file. The process works exactly the same for any type of file. + +There are many ways to open TextEdit. One of them is to go to Launchpad. Then, search for an app where you can create the type of file that you're interested in. In this case, that would be "TextEdit." Click on the icon to open the app. + +Once you are inside the app, you should see an option to save your file in the App menu. This menu is located at the top-right, next to the Apple menu icon. + +In one of the App menu options, you should see a command to save the file. This is usually under the File menu. + +Next to it, you will see the keyboard shortcut for saving your file. This is usually `Command + S` on macOS. + +When you are saving the file for the first time, you should see a dialog window, where you can write the name of the file and choose a location. + +Usually, the file extension is added by the application automatically but you can change it before saving the file. + +After saving the file, you can open Finder by clicking on the Finder icon in the Dock. You should see your new file in the folder where you saved it. + +To create a new folder, you should go to the location where you want to create that new folder and rick-click on an empty spot. You will see a list of options. The first option is "New Folder." + +If you click on it, you can assign a name to your new folder. Write the name and press Enter to confirm. + +There are multiple ways to move files and folders in Finder. If you need to move them to a folder listed in your Finder "Favorites" section, you can just drag and drop it. + +If you need to move it to a different folder, you have two options. + +You can either open the destination folder as a tab and drag and drop the file or folder into the tab. + +Or you can use keyboard shortcuts. First, copy the file with `Command + C`, go to the new folder, and then use `Command + Option + V` to paste the file or folder in that location. This will also remove it from the original folder. + +To delete a file or folder, you can right-click on it and select "Move to trash." + +You can also drag and drop them into the trash icon on the Dock. This is equivalent. + +When the file or folder is in the trash can, you can right-click on it to delete it immediately or you can empty the trash to remove all the deleted files and folders permanently. + +Knowing how to create, move, and delete files and folders on Windows and macOS is very important. By mastering these skills, you can organize your files, locate them quickly, and free up storage on your computer by deleting unnecessary files. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac3f129efbf327742eb33.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac3f129efbf327742eb33.md index edb1dbb4b7..effaff66d2 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac3f129efbf327742eb33.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac3f129efbf327742eb33.md @@ -10,6 +10,42 @@ dashedName: how-to-search-for-files-and-folders-on-your-computer Watch the lecture video and answer the questions below. +# --transcript-- + +How to search for files and folder on your computer? + +Let's learn how to search for files and folders on Windows and macOS. + +We'll start with Windows. You can search from the Taskbar or from the File Explorer. + +To search from the Taskbar, write the name of the file or folder that you are looking for. You can also search for keywords. You'll see results from across your PC and OneDrive. + +If you only want to see documents, you can click on the "Documents" tab. You also have tabs for apps and web results. + +Another alternative is to use the Search File Explorer. You will find it at the top right of the Explorer window, where you can see "Search Documents." + +You have three options to define the scope of the search: + +- You can search from Home to find files from your PC and from the cloud quickly. + +- You can search from a folder to find files stored inside it. + +- You can search from This PC for a slow but in-depth search. + +This is how you can search for files and folders on Windows. Now let's see how you can do this on macOS. + +First, you can use Spotlight, a tool that helps you find files on your Mac. To open Spotlight, go to your menu bar at the top right and find the magnifying glass icon. If you don't see this icon on the menu bar, you can add it in the Control Center settings. + +Go to your settings, filter by "Control Center", click on this option and then scroll down until you find the "Spotlight" option. You can also use a keyboard shortcut to open Spotlight: `Command + Spacebar`. + +When you open Spotlight, you'll see the Spotlight Search, where you can search for any file or folder by typing its name. When you start typing, you'll see the results grouped by category, including suggestions, folders, presentations, photos, documents, and related searches. + +You can also expand a specific category by clicking on "Show More." + +Another way to search for files that you have recently opened is to open Finder by click on the Finder icon in the Dock. Then, go to "Recents" in the Finder sidebar. And there, you'll find all the files that you've recently viewed. + +This is how you can search for files and folders on macOS. With these search tools, you can optimize your workflow and find the files and folders you need very quickly. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac403a9ba7732b31c6480.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac403a9ba7732b31c6480.md index 025f69cab1..f35d416a40 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac403a9ba7732b31c6480.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac403a9ba7732b31c6480.md @@ -10,6 +10,62 @@ dashedName: what-are-some-common-file-types-you-will-work-with-in-web-applicatio Watch the lecture video and answer the questions below. +# --transcript-- + +What are some common file types used in web applications? + +Files are classified based on their content and structure. The file type determines how a file is opened and processed by computer programs. + +We identify file types based on their extensions. A file extension is a three or four letter suffix at the end of the file name. The three main file types that you will find in web applications are HTML, CSS, and JavaScript. + +HTML files contain the structure and content of the web application. They have a `.html` file extension. + +CSS files define the styles. They have a `.css` file extension. + +And JavaScript files add more advanced functionality and interactivity. They have a `.js` file extension. + +As you develop web applications, you will also need to include images. These are some of the most widely used image file types. + +JPEG, which stands for "Joint Photographic Experts Group," is known for its efficient compression. It's great for photographs and images. However, the compression is lossy, which means that some image quality is lost to reduce the file size. + +PNG, which stands for "Portable Network Graphics," preserves image quality, even after compression. This results in larger files. PNG supports transparency and it's great for images with sharp edges, like logos and icons. + +The GIF image format supports both animation and transparency but has a limited color palette. GIF stands for "Graphics Interchange Format." + +And finally, we have SVG, which stands for "Scalable Vector Graphics." It's a vector image format. These images can be scaled as much as needed without losing quality. + +Great. Now that you know about image formats, let's see some video and audio formats. + +MP3 is an audio format known for its efficient compression. It's a lossy format, so some audio data is lost during the compression to make these files smaller. + +MP4 is one of the most common video formats. It offers good compression and supports multiple audio and video codecs, subtitles, and metadata. + +MOV, the QuickTime multimedia file format developed by Apple, is primarily associated with QuickTime Player. + +Other popular audio and video file types are WAV, a lossless audio format that keeps the original quality of the audio, and WebM, a high-quality open-source video format. + +If you ever need to customize the fonts of your web application, you will also work with font formats. These are three of the most widely used ones. + +TTF, which stands for "TrueType Font", is a font format compatible with different operating systems. + +WOFF is a modern font format, specifically designed for web development purposes. It stands for "Web Open Font Format". These files are smaller because they have better compression. They can also store metadata, including licensing information. + +And WOFF2 is the successor of WOFF with even more efficient compression and performance. + +You can also create archive files if you need to group multiple folders and files. The most widely used archive format is ZIP. ZIP offers lossless compression, so no data is lost during the process. It's widely supported across operating systems and software applications. + +And finally, let's talk about documentation. In web applications, you will usually find a file called `README` that contains information about the application, like how to use it, how to install it, its license, and how to contribute. + +They are usually written in a file format called Markdown. With Markdown, you can create structured documents with headings, subheadings, links, images, lists, and more. Markdown files have a `.md` or `.markdown` extension. + +Here you can find the `README` file of freeCodeCamp's GitHub repository: https://github.com/freeCodeCamp/freeCodeCamp/blob/main/README.md + +You can create this detailed structure and format using Markdown. + +You will definitely read and write many `README` files throughout your career. Learning about these common file types is essential for web development. + +From the core building blocks of HTML, CSS, and JavaScript to image, video, and audio formats, every file type has an important role in creating interactive web applications. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/6716744f7245947a3dd60009.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/6716744f7245947a3dd60009.md index 950d3b1275..914d95482a 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/6716744f7245947a3dd60009.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/6716744f7245947a3dd60009.md @@ -10,6 +10,30 @@ dashedName: what-are-the-different-target-attribute-types Watch the video and answer the questions below. +# --transcript-- + +What are the different `target` attribute types, and how do they work? + +You may have seen the `target` attribute on anchor elements, or links. This important attribute tells the browser where to open the URL for the anchor element: + +```html +Visit freeCodeCamp +``` + +There are four important possible values for this attribute. Note that each value is preceded by an underscore. + +The first value is `_self`, which is the default value. This opens the link in the current browsing context. In most cases, this will be the current tab or window. + +The second value is `_blank`, which opens the link in a new browsing context. Typically, this will open in a new tab. But some users might configure their browsers to open a new window instead. + +The third value is `_parent`, which opens the link in the parent of the current context. For example, if your website has an `iframe`, a `_parent` value in that `iframe` would open in your website's tab/window, not in the embedded frame. + +The fourth value is `_top`, which opens the link in the top-most browsing context - think "the parent of the parent". This is similar to `_parent`, but the link will always open in the full browser tab/window, even for nested embedded frames. + +There is a fifth value, called `_unfencedTop`, which is currently used for the experimental FencedFrame API. At the time of this video, you probably won't have a reason to use this one yet. + +Selecting the right `target` value to control where your users end up is an important consideration when creating a website. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/671682dd88e461a8e2620f38.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/671682dd88e461a8e2620f38.md index 7bc6e9ff7d..e663d54571 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/671682dd88e461a8e2620f38.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/671682dd88e461a8e2620f38.md @@ -10,6 +10,69 @@ dashedName: what-is-the-difference-between-absolute-and-relative-paths Watch the video and answer the questions below. +# --transcript-- + +What is the different between absolute and relative paths? + +A path is a string that specifies the location of a file or directory in a file system. In web development, paths let developers link to resources like images, stylesheets, scripts, and other web pages. There are absolute and relative paths - both are essential when specifying file locations within a file system. Let's look at the two so you can decide which one of them to use and when. + +An absolute path is a complete link to a resource. It starts from the root directory, includes every other directory, and finally the filename and extension. The "root directory" refers to the top-level directory or folder in a hierarchy. + +An absolute path also includes the protocol - which could be `http`, `https`, and `file` and the domain name if the resource is on the web. Here's an example of an absolute path that links to the freeCodeCamp logo: + +```html + + View fCC Logo + +``` + +In this example, the protocol is `https`, the domain name is `design-style-guide.freecodecamp.org`, and the filename is `fcc_secondary_small.svg`. + +Now, what if the resource you want to link to using an absolute path is on your local machine? Here's how to link to the `about.html` file with an absolute path: + +```html +

+ Read more on the + About Page +

+``` + +It looks like this because we are going into a folder called `Users`, then into a folder called `user`, then into a folder called `Desktop`, then into a folder called `fCC`, then into a folder called `script-code`, then into a folder called `absolute-vs-relative-paths`, then into a folder called `pages` to finally get the `about.html` file. + +Here's what the absolute URL looks like in the browser address bar: + +```sh +file:///Users/user/Desktop/fCC/script-code/absolute-vs-relative-paths/pages/about.html +``` + +The URL includes the protocol, `file://`. It also include the path, which looks like this: `/Users/user/Desktop/fCC/script-code/absolute-vs-relative-paths/pages/`, and represents the series of folders that lead to the file. And finally, it also includes the `about.html`, which is the filename and the extension. + +Now, lets look at the relative path. A relative path specifies the location of a file relative to the directory of the current file. It does not include the protocol or the domain name, making it shorter and more flexible for internal links within the same website. Here's an example of linking to the `about.html` page from the `contact.html` page, both of which are in the same folder: + +```html +

+ Read more on the + About Page +

+``` + +So imagine you are on the `contact.html` page, and because the `about.html` page is in the same place, you simply get the filename. This is an example of using a relative file path. + +So, which should you use and when; an absolute path or a relative path? Here are the rules you should follow: + +- Use absolute paths when linking to a resource hosted on an external website. + +- Use absolute paths when you need the link to a page or resource to work consistently regardless of the document location within the site. + +- Use relative paths when linking to resources within the same website. + +- Use relative paths if you want to keep your code cleaner and easier to maintain during development. + +- Use relative paths during local testing to ensure links work without an internet connection. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md index 9327a2725c..ff8d9357a9 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md @@ -1,6 +1,6 @@ --- id: 6716830dbaf95da9564f2e3b -videoId: GTgzy4wPXcM +videoId: 5EfMkiLB9BA title: What Is the Difference Between Slashes, a Single Dot, and Double Dot in Path Syntax? challengeType: 11 dashedName: what-is-the-difference-between-slashes-a-single-dot-and-double-dot-in-path-syntax @@ -10,6 +10,30 @@ dashedName: what-is-the-difference-between-slashes-a-single-dot-and-double-dot-i Watch the video and answer the questions below. +# --transcript-- + +You may have seen links like `/public/logo.png`, `./script.js`, or `../styles.css` before. But what do these special types of links mean? These are called file paths. There are three key syntaxes to know. First is the slash, which can be a backslash (`\`) or forward slash (`/`) depending on your operating system. The second is the single dot (`.`). And finally, we have the double dot (`..`). + +The slash is known as the "path separator". It is used to indicate a break in the text between folder or file names. This is how your computer knows that `naomis-files/` points to a directory of that same name, while `naomis/files/` points to a `files` directory in the `naomis` directory. + +A single dot points to the current directory, and two dots point to the parent directory. You will typically see a single dot used to ensure that the path is recognized as a relative path. Remember that you learned in a previous lecture about relative versus absolute paths before. + +Double dots, however, are much more common to access files outside of the current working directory. + +For example, given this file tree: + +```sh +my-app/ +├─ public/ +│ ├─ favicon.ico +│ ├─ index.html +├─ src/ +│ ├─ index.css +│ ├─ index.js +``` + +If your `public/index.html` file needed to load the `favicon.ico` file, you would use a relative path with a single dot to access the current directory: `./favicon.ico`. If your `public/index.html` file needed to load the `index.css` file, you would use a relative path with double dots to navigate to the parent `my-app` directory first, then to the `src` directory, and finally to your file: `../src/index.css`. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md index c2d2741e7a..68d8c1f1d3 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md @@ -10,6 +10,26 @@ dashedName: what-are-the-different-link-states Watch the video and answer the questions below. +# --transcript-- + +What are the different link states, and why are they important? + +You may have seen a link on a web page become purple after you click it. This is because the state of the link has changed, so different styling gets applied. There are five different states a link can be in. + +The first is the default state, which is `:link`. This state represents a link which the user has not visited, clicked, or interacted with yet. You can think of this state as providing the base styles for all links on your page. The other states build on top of it. + +The second state is `:visited`, which applies when a user has already visited the page being linked to. By default, this turns the link purple - but you can leverage CSS to provide a different visual indication to the user. This is helpful to let someone know they have already read a portion of your documentation. Or, that the site is one they can trust because they have used it before. + +The third state is `:hover`. This state applies when a user is hovering their cursor over a link. This state is helpful for providing extra attention to a link, to ensure a user actually intends to click it. + +Then we have `:focus`. This state applies when we focus on a link. + +And finally, we have `:active`. This state applies to links that are being activated by the user. This typically means clicking on the link with the primary mouse button by left clicking, in most cases. This state can be helpful for showing a user that the element they clicked on is interactive. + +When you use these states to style your links, there is a specific order you need to write your CSS in: `link`, `visited`, `hover`, `focus`, then `active`. + +You should now know how to give links in your page your own personal flair, while still providing the important information a user needs about the state of each link. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md index 9999634949..4aa306a97c 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md @@ -2,7 +2,7 @@ id: 673263e80dd43da7df3ae565 title: How Can You Find the Position of a Substring in a String? challengeType: 11 -videoId: k2QaBPHl_00 +videoId: tTm8t9inci8 dashedName: how-can-you-find-the-position-of-a-substring-in-a-string --- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md index e59a69ece4..76e1f146f4 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md @@ -39,23 +39,23 @@ Motherboard #### --text-- -Which is not a conventional way to connect a keyboard to the computer? +What are browser developer tools? #### --distractors-- -USB Receiver +Tools for editing browser settings and managing user profiles. --- -Bluetooth +Utilities for blocking ads and improving web page performance. --- -USB Cable +Software for managing browser extensions and plug-ins. #### --answer-- -Ethernet Cable +Built-in features in browsers that help developers debug and inspect websites. ### --question-- @@ -87,25 +87,25 @@ Which of the following is NOT a safe practice when signing in? #### --distractors-- -Using a fingerprint or face scanner +Using a fingerprint or face scanner. --- -Making a long and complex password like `@ppl3_+B@nana34823` +Making a long and complex password like `@ppl3_+B@nana34823`. --- -Utilizing a physical USB security key +Setting up two-factor authentication (2FA). #### --answer-- -Saving passwords in the browser on a public computer +Using passwords based on personal information like your birthday. ### --question-- #### --text-- -Which of the following is not a Web Browser? +Which of the following is NOT a Web Browser? #### --distractors-- @@ -113,11 +113,11 @@ Safari --- -Opera GX +Opera --- -DuckDuckGo +Microsoft Edge #### --answer-- @@ -149,7 +149,7 @@ Visual Studio Code #### --text-- -Which of the following stores and accesses files on the hard drive? +Which of the following is used primarily for managing files stored on a local hard drive? #### --distractors-- @@ -171,45 +171,45 @@ Windows File Explorer #### --text-- -What is not a good practice when naming files for later use? +What is NOT a good practice when naming files? #### --distractors-- -Putting an underscore or hyphen between words +Putting an underscore or hyphen between words. --- -Use a casing style such as camelCase and sticking with it +Use a casing style such as camelCase and sticking with it. --- -Putting a version number at the end of a document like `summaryReport_v2.docx` +Putting a version number at the end of a document like `summaryReport_v2.docx`. #### --answer-- -Being lazy and pounding your keyboard like `asdfloweiueld` to get it over with +Using non-descriptive names like `file1.txt`. ### --question-- #### --text-- -Which of the following is a way to move files? +What does the term "domain name" refer to? #### --distractors-- -Using `Ctrl + X` and `Ctrl + V` (or `Command + X` and `Command + V` on Mac) +A type of software that manages website files and databases. --- -Dragging the file and dropping it at the destination +The physical location of a web server in a data center. --- -Using a terminal command such as `move` (`mv` on Mac) +None of the other choices. #### --answer-- -All of the other choices +The address used to identify websites on the internet. ### --question-- @@ -219,47 +219,47 @@ Which of the following is a way to send a file to the Recycle Bin/Trash? #### --distractors-- -All of the other choices +All of the other choices. --- -Pressing the `Backspace` key on the keyboard +Pressing the `Backspace` key on the keyboard. --- -Moving it to an Archived folder +Moving it to an Archived folder. #### --answer-- -Pressing the `Delete` key on the keyboard (`Command + Delete` on Mac) +Right-click on it and select the Delete/Move to trash option. ### --question-- #### --text-- -Which of the following is not a feature when searching for files locally? +What is a RAM? #### --distractors-- -Using boolean operators like `AND`, `OR`, and `NOT` +A network protocol used for transferring files between devices. --- -Using filters like `*.jpg` +A permanent storage device used for saving files and applications. --- -Using Cortana on Windows or Spotlight Search on Mac +A component in a computer responsible for generating graphics and rendering images. #### --answer-- -Typing the name of the file into your Web Browser and hitting `Enter` +A temporary memory for fast data access by the processor. ### --question-- #### --text-- -What file type will be best suited for writing documentation? +What file type will be best suited for writing a `README` file? #### --distractors-- @@ -281,29 +281,29 @@ What file type will be best suited for writing documentation? #### --text-- -Which of the following is not a configuration file? +What is an Integrated Development Environment (IDE)? #### --distractors-- -`.env` +A platform designed for deploying and hosting web applications. --- -`.build` +A type of hardware device used for testing and debugging electronic circuits. --- -`.yaml` or `.yml` +A version control system that helps developers track changes in source code during software development. #### --answer-- -`.log` +A program that integrates tools for writing, debugging, and running code. ### --question-- #### --text-- -A piece of software that allows you to look at online content is called a: +What is a piece of software that allows you to look at online content called? #### --distractors-- @@ -325,7 +325,7 @@ Web Browser #### --text-- -A piece of software that lists web pages related to a user's query is a called a: +What is a piece of software that lists web pages related to a user's query called? #### --distractors-- @@ -347,7 +347,7 @@ Search Engine #### --text-- -A set of one or more web pages under one domain name is called a: +What is a set of one or more web pages under one domain name called? #### --distractors-- @@ -369,15 +369,15 @@ Website #### --text-- -To search for an exact phrase, you should use what character? +To search for an exact phrase, what should you enclose your search query with? #### --distractors-- -Backtick +Backticks --- -Parenthesis +Parentheses --- @@ -391,65 +391,65 @@ Quotation marks #### --text-- -Which is not a way to install a Web Browser? +Which is NOT a way to install a Web Browser? #### --distractors-- -Using a Package Manager +Using a Package Manager. --- -Directly downloading from the website +Directly downloading from the website. --- -Using an App Store like Microsoft Store +Using an App Store like Microsoft Store. #### --answer-- -Pressing the Network/Internet button in Settings +Pressing the Network/Internet button in Settings. ### --question-- #### --text-- -Which of these peripherals is an input device? +Which of the following formats does NOT preserve image quality after compression? #### --distractors-- -Projector +All of the other choices. --- -Speakers +PNG --- -Monitor +SVG #### --answer-- -Microphone +JPEG ### --question-- #### --text-- -Which of the following lists of parts can all be found in the circuit board? +Which of the following parts can be found in the circuit board? #### --distractors-- -Printer, Router, USB Ports +Printer and Router. --- -Mouse, Keyboard, Monitor +Mouse and Keyboard. --- -Motherboard, Hard Drive, GPU +Hard Drive and GPU. #### --answer-- -BIOS/UEFI Chip, CPU, RAM +CPU and RAM. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md index 449e3fe6e7..f8f31ec1f5 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md @@ -413,91 +413,59 @@ Which color model includes the `hue` component? #### --text-- -Which of the following is the correct syntax to create a CSS variable with a fallback value? +Which color function also allows you to set the opacity of the color? #### --distractors-- ```css -.element { - color: var(--main-color; red); -} +hsl(0, 20%, 30%, 50%) ``` --- ```css -.element { - color: var(--main-color); -} +rgb(20, 30, 80, 0.5) ``` --- ```css -.element { - color: var(--main-color: red); -} +rgba(20, 30, 80) ``` #### --answer-- ```css -.element { - color: var(--main-color, red); -} +hsla(0, 20%, 30%, 50%) ``` ### --question-- #### --text-- -How can you use CSS variables to dynamically change the color of multiple elements? +Which of the following is the correct way to give an element a top-to-bottom red-to-blue gradient background? #### --distractors-- ```css -:root { - primary-color: blue; -} - -.element1, .element2 { - color: --primary-color; -} +background: radial-gradient(red, blue) ``` --- ```css -body { - --color: blue; -} - -.element1, .element2 { - color: var(color); -} +background: radial-gradient(blue, red) ``` --- ```css -:root { - primary: blue; -} - -.element1, .element2 { - color: var(--primary); -} +background: linear-gradient(blue, red) ``` #### --answer-- ```css -:root { - --primary-color: blue; -} - -.element1, .element2 { - color: var(--primary-color); -} +background: linear-gradient(red, blue) ``` diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md index c84a01b0e9..20d4ffa285 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md @@ -17,7 +17,7 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -What is JavaScript? +Which of the following best describes JavaScript? #### --distractors-- @@ -33,7 +33,7 @@ A database management system. #### --answer-- -A programming language primarily used for web development. +A programming language used for web development. ### --question-- @@ -43,19 +43,19 @@ Which of the following is NOT a JavaScript data type? #### --distractors-- -`null` +`Number` --- -`undefined` +`Undefined` --- -`bigInt` +`Object` #### --answer-- -`double` +`Double` ### --question-- @@ -77,29 +77,29 @@ Which of the following is NOT a valid JavaScript variable declaration? #### --answer-- -`public final Long x;` +`public Int x;` ### --question-- #### --text-- -Which of the following is a conventional variable name in JavaScript? +Which of the following is a common naming convention for variables in JavaScript? #### --distractors-- -`my_var` +JavaScript case --- -`my-var` +Lightning case --- -`MyVar` +Giraffe case #### --answer-- -`myVar` +Camel case ### --question-- @@ -127,28 +127,23 @@ What is the difference between `let` and `const` variable declarations in JavaSc #### --text-- -What would be the outcome of the following code? - -```js -let name = "Andy"; -name[0] = "M"; -``` +Why are strings considered immutable in JavaScript? #### --distractors-- -The value of `name` would be `"MAndy"`. +You cannot create strings using variables. --- -The value of `name` would be `"Mndy"`. +Strings can only be created using literals. --- -The value of `name` would still be `"Andy"`. +You can change strings, but only through global variables. #### --answer-- -It would throw an error. +Once a string is created, you cannot change its characters directly. ### --question-- @@ -186,7 +181,7 @@ console.log(hello); #### --distractors-- -Reassigns `world` to the variable `hello`, and prints it out in the console. +Reassigns `" world"` to the variable `hello`, and prints it out in the console. --- @@ -194,33 +189,33 @@ Prints out the number of characters in `Hello world` in the console. --- -Adds the string `world` to the variable `hello`, and prints it out in the console. +Combines `"Hello"` and `" world"` into a new string and prints it, but the value of `hello` remains `"Hello"`. #### --answer-- -Creates a new string that is made of the values of `hello` and `" world"` combined together, and assigns this new string back to `hello` and then prints it out in the console. +Combines the current value of `hello` with the string `" world"`, reassigns it to `hello`, and prints it to the console. ### --question-- #### --text-- -Are semicolons required in JavaScript? +Which JavaScript character is used to mark the end of a statement? #### --distractors-- -Yes. The code won't work without semicolons. +`:` --- -Semicolons are sometimes required in JavaScript. +`,` --- -No. It's recommended not to use semicolons in JavaScript. +`.` #### --answer-- -No, but it is generally recommended to use semicolons consistently to avoid potential issues in code. +`;` ### --question-- @@ -264,7 +259,7 @@ JavaScript performs type checking before execution, meaning type related errors #### --answer-- -You don't need to declare the data type of a variable before using it. JavaScript infers the type based on the value assigned to the variable. +JavaScript infers the type based on the value assigned to the variable. ### --question-- @@ -410,7 +405,7 @@ Which of the following is NOT a valid string concatenation method in JavaScript? --- -``console.log(`${string1} ${string2}`);`` +`console.log("string1 " + string2);` --- @@ -424,7 +419,7 @@ Which of the following is NOT a valid string concatenation method in JavaScript? #### --text-- -Which of the following variable names uses camelCase correctly? +Which of the following variable names uses camel case correctly? #### --distractors-- @@ -446,23 +441,23 @@ Which of the following variable names uses camelCase correctly? #### --text-- -Which character JavaScript uses to mark the end of a statement? +Why is it beneficial to use semicolons explicitly even though JavaScript has Automatic Semicolon Insertion? #### --distractors-- -`:` +To increase the execution speed of the code. --- -`,` +To maintain consistency with other programming languages. --- -`.` +To allow for better debugging and error tracing. #### --answer-- -`;` +To improve code readability and reliability. ### --question-- @@ -485,4 +480,3 @@ Which of the following is NOT a JavaScript data type? #### --answer-- `Float` - diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-form-validation-with-javascript/6723ce555ff2dfc0cc04b69a.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-form-validation-with-javascript/6723ce555ff2dfc0cc04b69a.md index 9c220360ea..e8b56c6cae 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-form-validation-with-javascript/6723ce555ff2dfc0cc04b69a.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-form-validation-with-javascript/6723ce555ff2dfc0cc04b69a.md @@ -91,7 +91,7 @@ button.addEventListener('click',(event) => { ``` -- **`enctype` Attribute**: The `form` element accepts an `enctype` attribute, which represents the encoding type to use for the data. This attribute only accepts three values: `application/x-www-form-urlencoded` (which is the default, sending the data as a URL-encoded form body), `text/plain` (which sends the data in plaintext form, in `name=value` pairs separated by new lines), or `mulitpart/form-data`, which is specifically for handling forms with a file upload. +- **`enctype` Attribute**: The `form` element accepts an `enctype` attribute, which represents the encoding type to use for the data. This attribute only accepts three values: `application/x-www-form-urlencoded` (which is the default, sending the data as a URL-encoded form body), `text/plain` (which sends the data in plaintext form, in `name=value` pairs separated by new lines), or `multipart/form-data`, which is specifically for handling forms with a file upload. # --assignment-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-comparisons-and-conditionals/6723c554025f449f4f39c3f5.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-comparisons-and-conditionals/6723c554025f449f4f39c3f5.md index 5ebdbeb3cc..94e4249f6d 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-comparisons-and-conditionals/6723c554025f449f4f39c3f5.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-comparisons-and-conditionals/6723c554025f449f4f39c3f5.md @@ -28,7 +28,7 @@ console.log(null === undefined); // false ## `switch` Statements -- **Definition**: A `switch` statement evaluates an expression and matches its value against a series of `case` clauses. When a match is found, the code block associated with that case is executed. +- **Definition**: A `switch` statement evaluates an expression and matches its value against a series of `case` clauses. When a match is found, the code block associated with that case is executed. A `break` statement should be placed at the end of each case, to terminate its execution and continue with the next. The `default` case is an optional case and only executes if none of the other cases match. The `default` case is placed at the end of a `switch` statement. ```js const dayOfWeek = 3; diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md index 8579e569a2..3d41c6a64e 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md @@ -2126,7 +2126,7 @@ button.addEventListener('click',(event) => { ``` -- **`enctype` Attribute**: The `form` element accepts an `enctype` attribute, which represents the encoding type to use for the data. This attribute only accepts three values: `application/x-www-form-urlencoded` (which is the default, sending the data as a URL-encoded form body), `text/plain` (which sends the data in plaintext form, in `name=value` pairs separated by new lines), or `mulitpart/form-data`, which is specifically for handling forms with a file upload. +- **`enctype` Attribute**: The `form` element accepts an `enctype` attribute, which represents the encoding type to use for the data. This attribute only accepts three values: `application/x-www-form-urlencoded` (which is the default, sending the data as a URL-encoded form body), `text/plain` (which sends the data in plaintext form, in `name=value` pairs separated by new lines), or `multipart/form-data`, which is specifically for handling forms with a file upload. ## The `date()` Object and Common Methods diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-photo-app/5ef9b03c81a63668521804d2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-photo-app/5ef9b03c81a63668521804d2.md index 8841cff630..d414bd8b0e 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-photo-app/5ef9b03c81a63668521804d2.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-photo-app/5ef9b03c81a63668521804d2.md @@ -9,7 +9,7 @@ dashedName: step-29 The code for an ordered list (`ol`) is similar to an unordered list, but list items in an ordered list are numbered when displayed. -After the second `section` element's last `h3` element, add an ordered list with these three list items: +Below the `h3` element, add an ordered list with these three list items: `flea treatment` `thunder` `other cats` diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a8290a27c2c625e2355042.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a8290a27c2c625e2355042.md index 55e9f29c37..bd0d132c5a 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a8290a27c2c625e2355042.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a8290a27c2c625e2355042.md @@ -8,7 +8,7 @@ demoType: onLoad # --description-- -In this workshop, you will learn how to work with HTML forms by building a Hotel Feedback Form. +In this workshop, you will practice working with HTML forms by building a Hotel Feedback Form. Start by adding the `` followed by an `html` element with a `lang` attribute of `en`. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a83601cd819e37f0dccd14.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a83601cd819e37f0dccd14.md index c92f18c0e6..e8fe06eb85 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a83601cd819e37f0dccd14.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a83601cd819e37f0dccd14.md @@ -45,14 +45,14 @@ Your `h1` element should have the text `Hotel Feedback Form`. ```js const h1 = document.querySelector('h1'); -assert.strictEqual(h1.innerText, 'Hotel Feedback Form'); +assert.strictEqual(h1?.innerText, 'Hotel Feedback Form'); ``` Your `h1` element should be inside the `header` element. ```js const h1 = document.querySelector('h1'); -assert.strictEqual(h1.parentElement.tagName, 'HEADER'); +assert.strictEqual(h1?.parentElement.tagName, 'HEADER'); ``` You should have an opening `p` tag. @@ -71,14 +71,21 @@ Your paragraph element should have the text `Thank you for staying with us. Plea ```js const pElement = document.querySelector('header p'); -assert.strictEqual(pElement.innerText, 'Thank you for staying with us. Please provide feedback on your recent stay.'); +assert.strictEqual(pElement?.innerText, 'Thank you for staying with us. Please provide feedback on your recent stay.'); ``` Your paragraph element should be inside your `header`. ```js const pElement = document.querySelector('p'); -assert.strictEqual(pElement.parentElement.tagName, 'HEADER'); +assert.strictEqual(pElement?.parentElement.tagName, 'HEADER'); +``` + +Your paragraph element should come after your `h1`. + +```js +const pElement = document.querySelector('p'); +assert.strictEqual(pElement?.previousElementSibling.tagName, 'H1'); ``` @@ -94,9 +101,9 @@ assert.strictEqual(pElement.parentElement.tagName, 'HEADER'); Hotel Feedback Form - --fcc-editable-region-- +--fcc-editable-region-- - --fcc-editable-region-- +--fcc-editable-region-- ``` diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a83bdcf425e7446900b7c4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a83bdcf425e7446900b7c4.md index 317e3b2da4..22ed9f831e 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a83bdcf425e7446900b7c4.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a83bdcf425e7446900b7c4.md @@ -41,14 +41,14 @@ Your `form` element should have an `action` attribute set to `"https://hotel-fee ```js const formElement = document.querySelector('form'); -assert.strictEqual(formElement.getAttribute('action'), 'https://hotel-feedback.freecodecamp.org'); +assert.strictEqual(formElement?.getAttribute('action'), 'https://hotel-feedback.freecodecamp.org'); ``` Your `form` element should have a `method` attribute set to `"POST"`. ```js const formElement = document.querySelector('form'); -assert.strictEqual(formElement.getAttribute('method'), 'POST'); +assert.strictEqual(formElement?.getAttribute('method'), 'POST'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a83e5e491625454b6f62c3.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a83e5e491625454b6f62c3.md index 7c3ccd4156..22d7a07ed9 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a83e5e491625454b6f62c3.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a83e5e491625454b6f62c3.md @@ -7,7 +7,7 @@ dashedName: step-7 # --description-- -Forms consist of `inputs` where users can input their data. You can group related inputs together using the fieldset element. +Forms consist of `inputs` where users can input their data. You can group related inputs together using the `fieldset` element. Here is an example of using a `fieldset` element: diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a83fec026a7a4631e084d2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a83fec026a7a4631e084d2.md index 1ef392435c..f1e080224b 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a83fec026a7a4631e084d2.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a83fec026a7a4631e084d2.md @@ -7,7 +7,7 @@ dashedName: step-8 # --description-- -When working with `fieldset` elements, it is common to use a caption to describe the group of inputs. You can use the legend element for this. +When working with `fieldset` elements, it is common to use a caption to describe the group of inputs. You can use the `legend` element for this. Here is an example of using a `legend` element: @@ -46,7 +46,7 @@ Your `legend` element should contain the text `Personal Information`. ```js const legend = document.querySelector('fieldset legend'); -assert.strictEqual(legend.innerText, 'Personal Information'); +assert.strictEqual(legend?.innerText, 'Personal Information'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a84111965a0c46df6bbd0a.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a84111965a0c46df6bbd0a.md index 85c28d9283..967ef87a06 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a84111965a0c46df6bbd0a.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a84111965a0c46df6bbd0a.md @@ -16,7 +16,7 @@ In the previous lecture videos, you learned how to associate a `label` element w The `for` attribute on the `label` element should match the `id` attribute on the `input` element. This is known as an explicit association. -Below your `legend` element, add a `label` element with the text of `Name (required):`. For the `for` attribute, set it to the value of `"full-name"`. +Below your `legend` element, add a `label` element with the text of `Name (required):`. Set its `for` attribute to the value of `"full-name"`. Then below your `label` element, add an `input` element with no attributes. In the next steps, you will add the necessary attributes. @@ -34,30 +34,30 @@ You should have a closing `label` tag. assert.match(code, /<\/label>/); ``` -Your `label` element should be inside the `fieldset` element. +Your `label` element should be placed below your `legend` inside the `fieldset` element. ```js -assert.isNotNull(document.querySelector('fieldset label')); +assert.isNotNull(document.querySelector('fieldset legend + label')); ``` Your `label` element should have a `for` attribute with the value of `"full-name"`. ```js -const label = document.querySelector('fieldset label'); -assert.strictEqual(label.getAttribute('for'), 'full-name'); +const label = document.querySelector('fieldset legend + label'); +assert.strictEqual(label?.getAttribute('for'), 'full-name'); ``` Your `label` element should have the text of `Name (required):`. ```js -const label = document.querySelector('fieldset label'); -assert.strictEqual(label.innerText, 'Name (required):'); +const label = document.querySelector('fieldset legend + label'); +assert.strictEqual(label?.innerText, 'Name (required):'); ``` -You should have an `input` element. +You should have an `input` element below your `label` element. ```js -assert.isNotNull(document.querySelector('fieldset input')); +assert.isNotNull(document.querySelector('fieldset label + input')); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a930b20f589b6664c51cb0.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a930b20f589b6664c51cb0.md index 8081206ad6..d83972cc3e 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a930b20f589b6664c51cb0.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a930b20f589b6664c51cb0.md @@ -37,14 +37,14 @@ Your `input` element should have a `type` attribute with the value of `"text"`. ```js const input = document.querySelector('fieldset input'); -assert.strictEqual(input.getAttribute('type'), 'text'); +assert.strictEqual(input?.getAttribute('type'), 'text'); ``` Your `input` element should have an `id` attribute with the value of `"full-name"`. ```js const input = document.querySelector('fieldset input'); -assert.strictEqual(input.getAttribute('id'), 'full-name'); +assert.strictEqual(input?.getAttribute('id'), 'full-name'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a93730719e1f68410cce54.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a93730719e1f68410cce54.md index 18f06cf3fa..4b1fd523b8 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a93730719e1f68410cce54.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a93730719e1f68410cce54.md @@ -35,7 +35,7 @@ Your `input` element should have a `name` attribute with the value of `"name"`. ```js const input = document.querySelector('fieldset input'); -assert.strictEqual(input.getAttribute('name'), 'name'); +assert.strictEqual(input?.getAttribute('name'), 'name'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a937e74920ba68ebe5e86d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a937e74920ba68ebe5e86d.md index 1ec34433f3..0abf6bacb5 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a937e74920ba68ebe5e86d.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a937e74920ba68ebe5e86d.md @@ -28,7 +28,7 @@ assert.isNotNull(document.querySelector('fieldset input')); Your `input` should have a `placeholder` attribute with the value of `"Ex. John Doe"`. ```js -assert.strictEqual(document.querySelector('fieldset input').getAttribute('placeholder'), 'Ex. John Doe'); +assert.strictEqual(document.querySelector('fieldset input')?.getAttribute('placeholder'), 'Ex. John Doe'); ``` Your `input` should have a `required` attribute. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a93bbe65a26169dbf3bc39.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a93bbe65a26169dbf3bc39.md index 95e2e486b3..7875c9bb91 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a93bbe65a26169dbf3bc39.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a93bbe65a26169dbf3bc39.md @@ -22,13 +22,13 @@ assert.strictEqual(document.querySelectorAll('fieldset label').length, 2); Your `label` element should have the text `Email address (required):`. ```js -assert.strictEqual(document.querySelector('fieldset label:nth-of-type(2)').innerText, 'Email address (required):'); +assert.strictEqual(document.querySelector('fieldset label:nth-of-type(2)')?.innerText, 'Email address (required):'); ``` Your `label` element should have a `for` attribute set to the value of `"email"`. ```js -assert.strictEqual(document.querySelector('fieldset label[for="email"]').getAttribute('for'), 'email'); +assert.strictEqual(document.querySelector('fieldset label[for="email"]')?.getAttribute('for'), 'email'); ``` # --seed-- @@ -56,9 +56,9 @@ assert.strictEqual(document.querySelector('fieldset label[for="email"]').getAttr Personal Information - --fcc-editable-region-- +--fcc-editable-region-- - --fcc-editable-region-- +--fcc-editable-region-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a93c95bc58e26a8fe95818.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a93c95bc58e26a8fe95818.md index 3c863ffb16..53904abd62 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a93c95bc58e26a8fe95818.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a93c95bc58e26a8fe95818.md @@ -7,7 +7,7 @@ dashedName: step-14 # --description-- -Next, add an `input` with the type of `"email"` to the form. This `input` should have an `id` attribute set to the value of `"email"`. Also, set the `name` attribute to the value of `"email"`. +Next, add an `input` with the type of `"email"` below your email `label`. This `input` should have an `id` attribute set to the value of `"email"`. Also, set the `name` attribute to the value of `"email"`. This `input` is also required, so make sure to add the `required` attribute. @@ -15,10 +15,10 @@ Finally, add a `placeholder` attribute set to `"example@email.com"`. # --hints-- -You should have an `input` element. +You should have an `input` element below your email `label`. ```js -assert.strictEqual(document.querySelectorAll('input').length, 2); +assert.isNotNull(document.querySelector('label[for="email"] + input')); ``` Your `input` element should have a `type` of `"email"`. @@ -42,13 +42,13 @@ assert.isNotNull(document.querySelector('input[name="email"]')); Your `input` element should have a `required` attribute. ```js -assert.strictEqual(document.querySelector('input#email').getAttribute('required'), ""); +assert.strictEqual(document.querySelector('input#email')?.getAttribute('required'), ""); ``` Your `input` element should have a `placeholder` attribute set to `"example@email.com"`. ```js -assert.strictEqual(document.querySelector('input#email').getAttribute('placeholder'), "example@email.com"); +assert.strictEqual(document.querySelector('input#email')?.getAttribute('placeholder'), "example@email.com"); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9401c9d660d6bb15993e2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9401c9d660d6bb15993e2.md index 3d015651c6..dffe71fe9a 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9401c9d660d6bb15993e2.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9401c9d660d6bb15993e2.md @@ -30,7 +30,7 @@ assert.isNotNull(document.querySelector('label[for="age"]')); Your `label` element should have the text `Age (optional):`. ```js -assert.strictEqual(document.querySelector('label[for="age"]').textContent, "Age (optional):"); +assert.strictEqual(document.querySelector('label[for="age"]')?.textContent, "Age (optional):"); ``` # --seed-- @@ -67,9 +67,9 @@ assert.strictEqual(document.querySelector('label[for="age"]').textContent, "Age type="email" name="email" /> - --fcc-editable-region-- +--fcc-editable-region-- - --fcc-editable-region-- +--fcc-editable-region-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9419e2d18476c645ce693.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9419e2d18476c645ce693.md index 345cb949e2..a26f542b9d 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9419e2d18476c645ce693.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9419e2d18476c645ce693.md @@ -23,34 +23,34 @@ The `name` attribute should be set to `"age"`, the `min` attribute should be set # --hints-- -You should have a number `input`. +You should have a number `input` below your `label` element. ```js -assert.isNotNull(document.querySelector('input[type="number"]')); +assert.isNotNull(document.querySelector('label + input[type="number"]')); ``` Your number `input` should have an `id` of `age`. ```js -assert.isNotNull(document.querySelector('input#age')); +assert.isNotNull(document.querySelector('label + input#age')); ``` Your number `input` should have a `name` attribute set to `age`. ```js -assert.isNotNull(document.querySelector('input[name="age"]')); +assert.isNotNull(document.querySelector('label + input[name="age"]')); ``` Your number `input` should have a `min` attribute set to `"3"`. ```js -assert.isNotNull(document.querySelector('input[min="3"]')); +assert.isNotNull(document.querySelector('label + input[min="3"]')); ``` Your number `input` should have a `max` attribute set to `"100"`. ```js -assert.isNotNull(document.querySelector('input[max="100"]')); +assert.isNotNull(document.querySelector('label + input[max="100"]')); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a94ea5df66236ebed260e8.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a94ea5df66236ebed260e8.md index c77341470d..516d5dcefb 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a94ea5df66236ebed260e8.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a94ea5df66236ebed260e8.md @@ -24,13 +24,13 @@ assert.strictEqual(document.querySelectorAll('fieldset').length, 2); You should have a `legend` element inside of your `fieldset` element. ```js -assert.strictEqual(document.querySelectorAll('legend').length, 2); +assert.strictEqual(document.querySelectorAll('fieldset legend').length, 2); ``` Your `legend` element should have the text of `Was this your first time at our hotel?`. ```js -assert.strictEqual(document.querySelectorAll('legend')[1].textContent, 'Was this your first time at our hotel?'); +assert.strictEqual(document.querySelectorAll('fieldset legend')[1]?.textContent, 'Was this your first time at our hotel?'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9521bc70162712caf118d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9521bc70162712caf118d.md index 98bb22dbc7..7d826203c3 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9521bc70162712caf118d.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9521bc70162712caf118d.md @@ -26,40 +26,40 @@ Below your `label` element, add a `radio` button with the `id` set to `"yes-opti # --hints-- -You should have a `label` element inside your `fieldset` element. +You should have a `label` element below your `legend` element. ```js -assert(document.querySelector('fieldset:nth-of-type(2) label')); +assert(document.querySelector('fieldset:nth-of-type(2) legend + label')); ``` Your `label` element should have a `for` attribute set to `"yes-option"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label').htmlFor, 'yes-option'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) legend + label')?.htmlFor, 'yes-option'); ``` Your `label` element should have the text `Yes`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label').innerText, 'Yes'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) legend + label')?.innerText, 'Yes'); ``` -You should have a `radio` button inside your `fieldset` element. +You should have a `radio` button below your `label` element. ```js -assert(document.querySelector('fieldset:nth-of-type(2) input[type="radio"]')); +assert(document.querySelector('fieldset:nth-of-type(2) label + input[type="radio"]')); ``` Your `radio` button should have an `id` attribute set to `"yes-option"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input[type="radio"]').id, 'yes-option'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input[type="radio"]')?.id, 'yes-option'); ``` Your `radio` button should have a `name` attribute set to `"hotel-stay"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input[type="radio"]').name, 'hotel-stay'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input[type="radio"]')?.name, 'hotel-stay'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a954b2bcddba72076c1857.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a954b2bcddba72076c1857.md index 8b4de80104..d2e53d586a 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a954b2bcddba72076c1857.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a954b2bcddba72076c1857.md @@ -15,46 +15,46 @@ When you are finished, you can now try out the radio buttons by selecting one op # --hints-- -You should have a `label` element inside your `fieldset` element. +You should have a `label` element below your first radio button. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(2) label').length, 2); +assert.isNotNull(document.querySelector('fieldset:nth-of-type(2) input[type="radio"] + label')); ``` Your `label` should have a `for` attribute set to `"no-option"`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(2) label[for="no-option"]').length, 1); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input[type="radio"] + label')?.htmlFor, "no-option"); ``` Your `label` should have the text of `No`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label[for="no-option"]').textContent, 'No'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input[type="radio"] + label[for="no-option"]')?.textContent, 'No'); ``` -You should have a second `input` inside your `fieldset` element. +You should have a second `input` below your second `label` element. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(2) input').length, 2); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(2) label + input').length, 2); ``` Your `input` should have a `type` of `radio`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input:nth-of-type(2)').getAttribute('type'), 'radio'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input:nth-of-type(2)')?.getAttribute('type'), 'radio'); ``` Your `input` should have an `id` of `"no-option"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input:nth-of-type(2)').id, 'no-option'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input:nth-of-type(2)')?.id, 'no-option'); ``` Your `input` should have a `name` of `"hotel-stay"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input:nth-of-type(2)').name, 'hotel-stay'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input:nth-of-type(2)')?.name, 'hotel-stay'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9577022877d72d8f43b4f.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9577022877d72d8f43b4f.md index 55098c5259..91e45a7216 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9577022877d72d8f43b4f.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9577022877d72d8f43b4f.md @@ -30,7 +30,7 @@ assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) legend').l Your `legend` element should have the text of `Why did you choose to stay at our hotel? (Check all that apply)`. Double check for spelling errors and spacing issues. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) legend').innerText, 'Why did you choose to stay at our hotel? (Check all that apply)'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) legend')?.innerText, 'Why did you choose to stay at our hotel? (Check all that apply)'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a95d0eff8168747805f1f3.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a95d0eff8168747805f1f3.md index 52a8a52d72..1b5fd435a8 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a95d0eff8168747805f1f3.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a95d0eff8168747805f1f3.md @@ -29,47 +29,47 @@ Below your `label` element, add a checkbox input with the `id`, `name` and `valu # --hints-- -You should have a `label` element inside your `fieldset`. +You should have a `label` element below your `legend`. ```js -assert(document.querySelector("fieldset:nth-of-type(3) label")); +assert(document.querySelector("fieldset:nth-of-type(3) legend + label")); ``` Your `label` element should have the text of `Social Media Ads`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label").textContent, "Social Media Ads"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) legend + label")?.textContent, "Social Media Ads"); ``` Your `label` element should have a `for` attribute set to `"ads"`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label").getAttribute("for"), "ads"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) legend + label")?.getAttribute("for"), "ads"); ``` -You should have a checkbox `input` inside your `fieldset`. +You should have a checkbox `input` below your `label`. ```js -const inputElement = document.querySelector("fieldset:nth-of-type(3) input[type='checkbox']"); -assert.strictEqual(inputElement.parentElement.tagName, "FIELDSET"); +const inputElement = document.querySelector("fieldset:nth-of-type(3) label + input[type='checkbox']"); +assert.strictEqual(inputElement?.parentElement.tagName, "FIELDSET"); ``` Your checkbox should have an `id` attribute set to `"ads"`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input[type='checkbox']").id, "ads"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input[type='checkbox']")?.id, "ads"); ``` Your checkbox should have a `name` attribute set to `"ads"`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input[type='checkbox']").name, "ads"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input[type='checkbox']")?.name, "ads"); ``` Your checkbox should have a `value` attribute set to `"ads"`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input[type='checkbox']").value, "ads"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input[type='checkbox']")?.value, "ads"); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a96127422411756204bc1b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a96127422411756204bc1b.md index 2f9dba34ae..954d1936f0 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a96127422411756204bc1b.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a96127422411756204bc1b.md @@ -13,46 +13,46 @@ Below the `label` element, add another checkbox `input` with the `id`, `name` an # --hints-- -You should have a `label` element. +You should have a `label` element below your checkbox. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label").length, 2); +assert.isNotNull(document.querySelector('fieldset:nth-of-type(3) input[type="checkbox"] + label')); ``` Your `label` element should have the text of `Personal Recommendation`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label")[1].textContent, "Personal Recommendation"); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[type="checkbox"] + label')?.textContent, "Personal Recommendation"); ``` Your `label` element should have a `for` attribute set to `"recommendation"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label")[1].getAttribute("for"), "recommendation"); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[type="checkbox"] + label')?.getAttribute("for"), "recommendation"); ``` -You should have a checkbox `input`. +You should have a checkbox `input` below your `label`. ```js -assert(document.querySelector("fieldset:nth-of-type(3) input:nth-of-type(2)[type='checkbox']")); +assert(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(2)[type='checkbox']")); ``` Your checkbox should have an `id` set to `"recommendation"`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input:nth-of-type(2)[type='checkbox']").id, "recommendation"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(2)[type='checkbox']")?.id, "recommendation"); ``` Your checkbox should have a `name` attribute set to `"recommendation"`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input:nth-of-type(2)[type='checkbox']").name, "recommendation"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(2)[type='checkbox']")?.name, "recommendation"); ``` Your checkbox should have a `value` attribute set to `"recommendation"`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input:nth-of-type(2)[type='checkbox']").value, "recommendation"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(2)[type='checkbox']")?.value, "recommendation"); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a962954f4e0d76223b37ed.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a962954f4e0d76223b37ed.md index 8ad7956530..0cf5a36caa 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a962954f4e0d76223b37ed.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a962954f4e0d76223b37ed.md @@ -20,73 +20,73 @@ For the checkbox `input`, both the `id`, `name` and `value` attributes should be You should have a `label` element with the text of `Location`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[2].textContent, 'Location'); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[2]?.textContent, 'Location'); ``` Your `label` should have the `for` attribute set to `"location"`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[2].getAttribute('for'), 'location'); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[2]?.getAttribute('for'), 'location'); ``` -You should have a third checkbox `input`. +You should have a third checkbox `input` after your `label`. ```js -assert(document.querySelector("fieldset:nth-of-type(3) input:nth-of-type(3)[type='checkbox']")); +assert(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(3)[type='checkbox']")); ``` Your third checkbox input should have an `id` set to `"location"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[2].getAttribute('id'), 'location'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[2]?.getAttribute('id'), 'location'); ``` Your third checkbox should have a `name` of `"location"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[2].getAttribute('name'), 'location'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[2]?.getAttribute('name'), 'location'); ``` Your third checkbox should have a `value` of `"location"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[2].getAttribute('value'), 'location'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[2]?.getAttribute('value'), 'location'); ``` -You should have a `label` element with the text of `Reputation`. +You should have a `label` element with the text of `Reputation` below the location checkbox. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[3].textContent, 'Reputation'); +assert.isNotNull(document.querySelectorAll('fieldset:nth-of-type(3) input[value="location"] + label')?.textContent, 'Reputation'); ``` Your `label` should have the `for` attribute set to `"reputation"`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[3].getAttribute('for'), 'reputation'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[value="location"] + label')?.getAttribute('for'), 'reputation'); ``` -You should have a fourth checkbox `input`. +You should have a fourth checkbox `input` below your `label`. ```js -assert(document.querySelector("fieldset:nth-of-type(3) input:nth-of-type(4)[type='checkbox']")); +assert(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(4)[type='checkbox']")); ``` You should have a fourth checkbox `input` with an `id` of `"reputation"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[3].getAttribute('id'), 'reputation'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[3]?.getAttribute('id'), 'reputation'); ``` Your fourth checkbox should have a `name` of `"reputation"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[3].getAttribute('name'), 'reputation'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[3]?.getAttribute('name'), 'reputation'); ``` Your fourth checkbox should have a `value` of `"reputation"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[3].getAttribute('value'), 'reputation'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[3]?.getAttribute('value'), 'reputation'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9689b1bf24b7750898a1b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9689b1bf24b7750898a1b.md index 7b424f1e2f..3b54dddd70 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9689b1bf24b7750898a1b.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9689b1bf24b7750898a1b.md @@ -18,37 +18,37 @@ Now you can test out your `form` by selecting the various checkboxes. You should have a `label` element with the text of `Price`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[4].textContent, 'Price'); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[4]?.textContent, 'Price'); ``` Your `label` should have the `for` attribute set to `"price"`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[4].getAttribute('for'), 'price'); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[4]?.getAttribute('for'), 'price'); ``` -You should have a fifth checkbox `input`. +You should have a fifth checkbox `input` below your `label`. ```js -assert(document.querySelector("fieldset:nth-of-type(3) input:nth-of-type(5)[type='checkbox']")); +assert(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(5)[type='checkbox']")); ``` You should have a checkbox input with an `id` of `"price"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[4].getAttribute('id'), 'price'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[4]?.getAttribute('id'), 'price'); ``` You should have a checkbox input with a `name` of `"price"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[4].getAttribute('name'), 'price'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[4]?.getAttribute('name'), 'price'); ``` Your checkbox input should have a `value` of `"price"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[4].getAttribute('value'), 'price'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[4]?.getAttribute('value'), 'price'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a969951120be7818d8ee49.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a969951120be7818d8ee49.md index 1b28672801..e6180e368c 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a969951120be7818d8ee49.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a969951120be7818d8ee49.md @@ -30,25 +30,25 @@ assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend').l Your legend should have the text `Ratings`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend')[0].textContent, 'Ratings'); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend')[0]?.textContent, 'Ratings'); ``` -Your `fieldset` should have a `label` element. +Your `fieldset` should have a `label` element below the `legend`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) label').length, 1); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend + label').length, 1); ``` Your `label` should have the text `How was the service?`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) label')[0].textContent, 'How was the service?'); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend + label')[0]?.textContent, 'How was the service?'); ``` Your `label` should have the `for` attribute set to `"service"`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) label')[0].getAttribute('for'), 'service'); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend + label')[0]?.getAttribute('for'), 'service'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a96b01f33ef178dfca9e42.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a96b01f33ef178dfca9e42.md index c8a4f54634..3edb25fe2b 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a96b01f33ef178dfca9e42.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a96b01f33ef178dfca9e42.md @@ -7,7 +7,7 @@ dashedName: step-27 # --description-- -When you want users to make selections from a dropdown menu, you can use the select and option elements. +When you want users to make selections from a dropdown menu, you can use the `select` and `option` elements. Here is an example of using the `select` and `option` elements to create a dropdown for different cities: diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a972137acd1179fa3fe8a0.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a972137acd1179fa3fe8a0.md index e5a4b516bf..3f0f3b6410 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a972137acd1179fa3fe8a0.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a972137acd1179fa3fe8a0.md @@ -36,7 +36,7 @@ assert(document.querySelector('option[value="poor"]')); Your `option` element with the `value` of `"poor"` should have the text `Poor`. ```js -assert.strictEqual(document.querySelector('option[value="poor"]').textContent, 'Poor'); +assert.strictEqual(document.querySelector('option[value="poor"]')?.textContent, 'Poor'); ``` You should have an `option` element with the `value` set to `"satisfactory"`. @@ -48,7 +48,7 @@ assert(document.querySelector('option[value="satisfactory"]')); Your `option` element with the `value` of `"satisfactory"` should have the text `Satisfactory`. ```js -assert.strictEqual(document.querySelector('option[value="satisfactory"]').textContent, 'Satisfactory'); +assert.strictEqual(document.querySelector('option[value="satisfactory"]')?.textContent, 'Satisfactory'); ``` You should have an `option` element with the `value` set to `"good"`. @@ -61,7 +61,7 @@ Your `option` element with the `value` of `"good"` should have the text `Good`. ```js -assert.strictEqual(document.querySelector('option[value="good"]').textContent, 'Good'); +assert.strictEqual(document.querySelector('option[value="good"]')?.textContent, 'Good'); ``` You should have an `option` element with the value set to `"very-good"`. @@ -73,7 +73,7 @@ assert(document.querySelector('option[value="very-good"]')); Your `option` element with the `value` of `"very-good"` should have the text `Very Good`. ```js -assert.strictEqual(document.querySelector('option[value="very-good"]').textContent, 'Very Good'); +assert.strictEqual(document.querySelector('option[value="very-good"]')?.textContent, 'Very Good'); ``` You should have an `option` element with the value set to `"excellent"`. @@ -86,7 +86,7 @@ Your `option` element with the `value` of `"excellent"` should have the text `Ex ```js -assert.strictEqual(document.querySelector('option[value="excellent"]').textContent, 'Excellent'); +assert.strictEqual(document.querySelector('option[value="excellent"]')?.textContent, 'Excellent'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a975c259525b7bc2d5c776.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a975c259525b7bc2d5c776.md index eea5aeddc9..ace80b2a3e 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a975c259525b7bc2d5c776.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a975c259525b7bc2d5c776.md @@ -24,19 +24,19 @@ assert(document.querySelector('label[for="food"]')); Your `label` should have the text `How was the food?`. ```js -assert.strictEqual(document.querySelector('label[for="food"]').textContent, 'How was the food?'); +assert.strictEqual(document.querySelector('label[for="food"]')?.textContent, 'How was the food?'); ``` -You should have a `select` element with the `id` set to `"food"`. +You should have a `select` element with the `id` set to `"food"` below your `label`. ```js -assert(document.querySelector('select#food')); +assert(document.querySelector('label + select#food')); ``` Your `select` element should have the `name` attribute set to `"food"`. ```js -assert(document.querySelector('select[name="food"]')); +assert(document.querySelector('label + select[name="food"]')); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a97ca8c4cbae7d0bb6e0ad.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a97ca8c4cbae7d0bb6e0ad.md index e80ed7f2d8..ef486068e4 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a97ca8c4cbae7d0bb6e0ad.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a97ca8c4cbae7d0bb6e0ad.md @@ -39,7 +39,7 @@ assert(document.querySelector('fieldset:nth-of-type(4) select#food option[value= Your `option` with the `value` of `"poor"` should have the text `"Poor"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="poor"]').textContent, 'Poor'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="poor"]')?.textContent, 'Poor'); ``` You should have an `option` element with the `value` set to `"satisfactory"`. @@ -51,7 +51,7 @@ assert(document.querySelector('fieldset:nth-of-type(4) select#food option[value= Your `option` with the `value` of `"satisfactory"` should have the text `"Satisfactory"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="satisfactory"]').textContent, 'Satisfactory'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="satisfactory"]')?.textContent, 'Satisfactory'); ``` You should have an `option` element with the `value` set to `"good"`. @@ -64,7 +64,7 @@ Your `option` with the `value` of `"good"` should have the text `"Good"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="good"]').textContent, 'Good'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="good"]')?.textContent, 'Good'); ``` You should have an `option` element with the value set to `"very-good"`. @@ -76,7 +76,7 @@ assert(document.querySelector('fieldset:nth-of-type(4) select#food option[value= Your `option` with the `value` of `"very-good"` should have the text `"Very Good"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="very-good"]').textContent, 'Very Good'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="very-good"]')?.textContent, 'Very Good'); ``` You should have an `option` element with the value set to `"excellent"`. @@ -89,7 +89,7 @@ Your `option` with the `value` of `"excellent"` should have the text `"Excellent ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="excellent"]').textContent, 'Excellent'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="excellent"]')?.textContent, 'Excellent'); ``` You should have an `option` element with the `selected` attribute set to `"excellent"`. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a97f40ddd40d7deb0618b7.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a97f40ddd40d7deb0618b7.md index e759527462..9476fdf2ec 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a97f40ddd40d7deb0618b7.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a97f40ddd40d7deb0618b7.md @@ -22,7 +22,7 @@ assert(document.querySelector('label[for="comments"]')); Your `label` should have the text `Other Comments?`. ```js -assert.strictEqual(document.querySelector('label[for="comments"]').textContent, 'Other Comments?'); +assert.strictEqual(document.querySelector('label[for="comments"]')?.textContent, 'Other Comments?'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9824ac5d9f77ec304969f.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9824ac5d9f77ec304969f.md index 92817376e8..433a93fdf1 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9824ac5d9f77ec304969f.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9824ac5d9f77ec304969f.md @@ -7,7 +7,7 @@ dashedName: step-33 # --description-- -If you want users to have more space to write their comments, you can use a textarea element. +If you want users to have more space to write their comments, you can use a `textarea` element. The `textarea` element is a multi-line text input control that allows users to enter text that is longer than a single line. It can be used to create a comment box, a message input, or other text input that requires multiple lines. @@ -23,10 +23,10 @@ Below your `label` element, add a `textarea` element. In the next step, you will # --hints-- -You should have a `textarea` element inside your form. +You should have a `textarea` element below your label. ```js -assert(document.querySelector('form textarea')); +assert(document.querySelector('label + textarea')); ``` # --seed-- @@ -131,9 +131,8 @@ assert(document.querySelector('form textarea')); - - --fcc-editable-region-- + --fcc-editable-region-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9843525e9fa8046d709b7.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9843525e9fa8046d709b7.md index 2ec87e3fe8..4c59546d93 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9843525e9fa8046d709b7.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9843525e9fa8046d709b7.md @@ -32,7 +32,7 @@ assert(document.querySelector('button[type="submit"]')); Your button should have the text content of `Submit`. ```js -assert.strictEqual(document.querySelector('button').textContent, 'Submit'); +assert.strictEqual(document.querySelector('button')?.textContent, 'Submit'); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md index 233026de48..ac61da05b2 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md @@ -9,7 +9,7 @@ dashedName: step-18 To finish the project, you'll need to run the `updateResultsList` function when the recipe form is submitted. -Use an event listener to do so, and remember that you'll need to prevent the default behaviour (or the page will refresh). +Use an event listener to do so, and remember that you'll need to prevent the default behavior (or the page will refresh). Once that's done, take some time to experiment with different values in the form before moving on to the next module. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md index 408895d618..77e052536f 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md @@ -9,7 +9,7 @@ dashedName: step-6 A third `recipe3` object has been filled in for you. It has the same properties as `recipe1` and `recipe2`. -You should now push the three objects into the `recipes` array. To do thus, you can use the `push()` method. +You should now push the three objects into the `recipes` array. To do this, you can use the `push()` method. Use the `push()` method to push all the recipe objects into the `recipes` array. Make sure to push `recipe1`, `recipe2`, and `recipe3` in that order. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-mega-navbar/6740495ba48aa94e5667b436.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-mega-navbar/6740495ba48aa94e5667b436.md index 2e0e0fd742..1b7a8867a4 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-mega-navbar/6740495ba48aa94e5667b436.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-mega-navbar/6740495ba48aa94e5667b436.md @@ -8,7 +8,7 @@ demoType: onLoad # --description-- -In this workshop, you will practice working with React functional components by building a resuable navbar. +In this workshop, you will practice working with React functional components by building a reusable navbar. All the CSS have been provided for you so you can focus on creating the navbar. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-shopping-cart/63effe558c87a70e7072e447.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-shopping-cart/63effe558c87a70e7072e447.md index bff342d205..c355e87360 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-shopping-cart/63effe558c87a70e7072e447.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-shopping-cart/63effe558c87a70e7072e447.md @@ -7,7 +7,7 @@ dashedName: step-27 # --description-- -The behaviour of the `addItem` method needs to change if the product is already in the cart or not. Create a ternary that checks if the current product is already in the cart. Use `undefined` for both the truthy and falsy expressions to avoid a syntax error. +The behavior of the `addItem` method needs to change if the product is already in the cart or not. Create a ternary that checks if the current product is already in the cart. Use `undefined` for both the truthy and falsy expressions to avoid a syntax error. # --hints-- diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md index 5d6f1bbc3e..4e4df21a38 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md @@ -9,7 +9,7 @@ dashedName: step-29 有序列表（`ol`）的代码类似于无序列表，但有序列表中的列表项在显示时会被编号。 -在第二个 `section` 元素的最后一个 `h3` 元素之后，添加一个包含以下三个列表项的有序列表： +Below the `h3` element, add an ordered list with these three list items: `flea treatment` `thunder` `other cats` diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a46e84a0ad845901ea907.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a46e84a0ad845901ea907.md index 4003df9904..717d988dcc 100644 --- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a46e84a0ad845901ea907.md +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a46e84a0ad845901ea907.md @@ -13,15 +13,17 @@ To `experiment` means to try new ideas or methods. An `interview` is a conversation where someone asks questions to get information. -An `infographic` is a visual image like a chart or diagram used to represent information. For example: +An `infographic` is a visual image like a chart or diagram used to represent information. `Readers` are people who read, especially those who read a particular publication. -`We experiment with new teaching methods` (trying new ideas) +For example: -`The journalist conducts interviews with her readers` (conversation for information) +* `We experiment with new teaching methods.` (trying new ideas) -`They use infographics to explain data` (visual images for information) +* `The journalist conducts interviews with her readers.` (conversation for information) + +* `They use infographics to explain data.` (visual images for information) # --fillInTheBlank-- diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556bc95e6ce5d850d37dd07.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556bc95e6ce5d850d37dd07.md index a68a36e742..d9627f7db9 100644 --- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556bc95e6ce5d850d37dd07.md +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556bc95e6ce5d850d37dd07.md @@ -7,24 +7,23 @@ dashedName: task-3 # --description-- -Adjectives are words that describe or give more information about nouns or pronouns. For example, in the phrase `the blue sky`, `blue` is an adjective describing the sky. +Adjectives describe or provide more information about nouns or pronouns. They usually come before the noun they modify. For example: -Notice how the adjective comes before the noun. It is `blue sky` not `sky blue`. +- `The blue sky` - Here, `blue` is an adjective describing the noun `sky`. Notice how the adjective `blue` comes before the noun. -Expressive language can include idiomatic expressions or descriptive adjectives to communicate strong feelings or vivid ideas, like saying `sparkling eyes` to describe someone's bright, lively eyes. +- `She enjoys early mornings.` - The adjective `early` describes the type of mornings she enjoys. -Instead of saying `It seems like you have a ton of energy this morning`, James could say something like `You look energetic this morning` to convey the same idea. `Energetic` is the adjective to represent someone who has a lot of energy. +- `He has a quick shower in the morning.` - The adjective `quick` describes how short the shower is. -Here are some more examples: +Adjectives can also make language more expressive by giving details about a person, place, or thing. For example: -* `She wakes up early every day` - `Early` describes the time of her waking up. -* `He has a quick shower in the morning` - `Quick` describes the short duration of the shower. +Instead of saying `It seems like you have a lot of energy this morning`, you could say `You look energetic this morning`. Here, the adjective `energetic` is more concise and expressive, showing that someone has a lot of energy in a positive way. # --questions-- ## --text-- -What does the adjective `energetic` imply about someone? +In the sentence `You look energetic this morning`, what does `energetic` suggest about the person? ## --answers-- @@ -32,7 +31,7 @@ That the person is feeling unwell. ### --feedback-- -`Energetic` is generally used to express a positive feeling about a person, not that they are feeling unwell.. +Does `energetic` usually describe someone who feels negative or unwell? Think about how we use it to describe someone's energy level. --- @@ -44,7 +43,7 @@ That the person is uncomfortable. ### --feedback-- -`Energetic` is generally used to express how dynamic the person looks, not how comfortable they are. +Does `energetic` describe someone's comfort level, or does it describe something more related to activity or energy? --- @@ -52,7 +51,7 @@ That the person is late. ### --feedback-- -The adjective `energetic` does not relate to time or punctuality. +Does `energetic` have any connection to time or being late? Reflect on its meaning in the description. ## --video-solution-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md b/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md index 37a474eeaf..1154df0acb 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md @@ -2,7 +2,7 @@ id: 6708396caa00e11b597b3365 title: What Is the Role of Open Graph Tags, and How Do They Affect SEO? challengeType: 11 -videoId: 94IAhyEfO8I +videoId: Bat8HyGzkU8 dashedName: what-is-the-role-of-open-graph-tags --- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md index 96d642737c..ec7e5a02d0 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md @@ -10,6 +10,44 @@ dashedName: what-are-the-basic-parts-of-a-computer Watch the video lecture and answer the questions below. +# --transcript-- + +What are the basic parts of a computer? + +Computers are very powerful machines that perform a variety of tasks like writing documents, playing games, and browsing the internet. + +As a developer, it is important to understand the basic inner workings of a computer. + +The first major component of a computer would be the motherboard. The motherboard holds all of the memory, connectors, and hard drives that are needed to run the computer. It serves as the main circuit board for the computer. + +Inside the computer case of the motherboard, you will find the CPU which stands for Central Processing Unit. The CPU is a processor that is responsible for executing instructions and performing calculations. It is often referred to as the brain of the computer. + +The CPU is a small square with a chip that goes into the motherboard's CPU socket. A socket is a place where the CPU is inserted. The CPU processor speed is measured in gigahertz (GHz) and mega-hertz (MHz). Gigahertz is a billion cycles per second and mega-hertz is a million cycles per second. + +The next critical component of a computer would be the system's short term memory. This is known as RAM or Random Access Memory. RAM is a temporary storage location for the computer's CPU. Anytime the computer needs to access data quickly, it will use RAM. + +The more RAM you have on your computer, the faster it will run and the more programs you can run at the same time. If you are running low on RAM, your computer will run slower and you will notice the difference in performance. + +It is important to note that RAM is volatile memory. This means that it is lost when the computer is turned off. This is why it is important to save your work on your computer. + +When you do save your files, they are stored on the hard drive. The hard disk drive, or HDD, is a permanent storage location that is used to store data even when the computer is turned off. This is where all of your files and software are stored. + +The hard drive is made up of a spinning platter and an arm. The platter is where the data is stored and the arm is used to read and write data to the platter. When you have a faster hard drive, your computer will boot up faster and your programs will run faster. + +Another type of data storage would be the Solid State Drive, or SSD for short. SSD is non volatile flash memory and can be used in place of a hard drive. SSDs are faster and smaller than hard drives but hard drives are cheaper and have more storage capacity. + +Another key component of a computer is the power supply unit, or PSU. The PSU is responsible for converting the electricity from the wall outlet into a form that the computer can use. It sends the power from the outlet to the motherboard, CPU, and other components of the computer. + +Another key component would be the expansion cards. These are cards that are inserted into the motherboard to add additional functionality to the computer. Examples of expansion cards would be the video card, sound card, and network card. + +The video card, also known as the Graphics Processing Unit or GPU, is responsible for rendering visuals on the computer screen. + +The sound card is responsible for playing sound on the computer speakers. + +The network card is responsible for connecting the computer to the internet. + +Even though there are many more parts to the computer, these are some basic parts that you should familiarize yourself with. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md index 91a1e84380..d70561820e 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md @@ -10,6 +10,30 @@ dashedName: how-to-effectively-work-with-your-keyboard-mouse-and-other-pointing- Watch the lecture video and answer the questions below. +# --transcript-- + +How can you effectively work with your keyboard, mouse, and other pointing devices? + +Many of you have been used to working with your keyboard and mouse for years on end for a variety of activities like gaming, performing tasks for work, or surfing the web. + +But prolonged misuse of these devices can lead to serious health problems down the road. + +In this lecture video, we will cover ways to work with your computer’s keyboard and mouse in healthy ways. + +The first tip is to be mindful of the mouse grip. When working on serious tasks for work or during intense gaming moments, you may tend to grip the mouse too hard. However, this can lead to serious hand and wrist issues. To prevent this, you want to make sure to hold the mouse gently and keep your fingers nice and relaxed. + +The second tip is to consider using an ergonomic keyboard and mouse. These tools are designed to reduce wrist strain by keeping your hands in a more natural position. + +While prices for these devices can vary and may be a costly purchase for your current budget, they can be a good investment in your overall long-term health. So, you might consider starting to research an ergonomic keyboard and mouse to use. + +Another tip is to keep your mouse the same height as your keyboard. You don't want to have to reach up or down to use the mouse, as this can strain your wrist and arm muscles over time. + +You also want to be mindful of your overall posture when sitting at the computer for hours on end. Being slouched over your computer and putting your wrist in an unnatural position at the keyboard will lead to long-term health issues. So, you want to make sure to sit up straight when working at your computer and maintain a healthy and natural wrist position. + +The last tip would be to use keyboard shortcuts whenever possible to help minimize typing. There are dozens of shortcuts available for tasks such as navigating the web, navigating around your operating system, working within a code editor, and more. So, it’s best to research some of these keyboard shortcuts and and start incorporating them into your daily computer usage. + +As you continue using your mouse and keyboard for upcoming coding projects and other activities, remember to keep these health tips in mind. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md index 515d189cc8..d79affa6b0 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md @@ -10,6 +10,32 @@ dashedName: what-are-the-different-types-of-internet-service-providers Watch the lecture video and answer the questions below. +# --transcript-- + +What are the different types of internet service providers? + +First, what is an internet service provider, or ISP? It’s a company that sells access to the global internet network, essentially. And they come in three different tiers. + +The first tier are the giant conglomerate companies, which have the infrastructure to handle most (if not all) of their network traffic independently. + +The second tier are the country-wide providers, which sometimes rent access to tier 1 networks but can stand fairly well on their own. + +The third tier are the small companies that primarily focus on providing internet to local markets, and rely on larger ISPs to provide their infrastructure. + +These providers will offer different types of connections as well. + +Fibre optic connections rely on glass or plastic fibres to transmit data via light, resulting in very high connection speeds and data exchange. + +Cable connections use the same infrastructure as a cable television provider, which often makes them readily available in many regions. + +DSL connections use the infrastructure that landline phone services use. Because of the prevalence of this infrastructure, DSL is available in areas where cable might not be. But it is also frequently a slower option. + +Dial-up also uses the phone lines, but requires exclusive connection (disabling the use of the line for phone purposes when connected to the internet). This is a much older technology that has fallen into disuse. + +Satellite connections use an array of satellites orbiting the earth to connect various devices across the world. And finally, similar to that, a 5G home internet provider uses the cell tower infrastructure to keep you online. + +And that should give you a basic rundown of what types of internet service providers and internet connections are out there! + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md index 8e1b267afd..085ff16bd6 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md @@ -10,6 +10,36 @@ dashedName: what-are-safe-ways-to-sign-into-your-computer Watch the lecture video and answer the questions below. +# --transcript-- + +What are safe ways to sign into your computer? + +Many of you have being using computers for a while. But you might not have thought about the safest or most secure ways to sign into your computer. + +Whether you are using a Mac or PC, there are many ways to safely sign into your computer. + +The first thing you should do is to make sure that your computer is password protected. + +For Windows users, start by opening the Start menu and selecting Settings. From there, go to Accounts and then Sign-in options. You can then set up a password for your computer. + +*Note: If you encounter any difficulties or are using a different version of Windows, refer to the official Microsoft documentation or support resources for detailed instructions tailored to your specific version.* + +When creating your password, make sure it is a long and complex password. You can use a combination of letters, numbers and special characters to make it more secure. + +Choosing an easy password like `12345` or `password` is not a good idea. These are easy to guess and can be easily hacked. + +Also, do not use passwords based on personal information like your name, birthday, or address. Those are also easy for hackers to guess. + +When you create your password, it is also a good idea to setup two-factor authentication (2FA). 2FA serves as an extra layer of security and requires a second form of verification to ensure that the person trying to access the account is indeed the authorized user. + +If you are a Mac user, you can click on the Apple menu and then go to system settings. From there you can go to Users & Groups and set up a password for your computer. + +Some Mac computers come with a touch ID feature, which is often considered more secure than regular passwords. This feature allows you to sign into your computer using your fingerprint. + +For Windows users, the Windows Hello feature offers a more secure way to sign in. It uses biometric methods such as facial recognition or fingerprints for authentication, providing an alternative to traditional passwords. + +After you finish watching these set of lecture videos, I urge you to look into these additional security features and set them up on your computer so that you can keep your computer safe and secure. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md index 0aba68160a..22988e04c5 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md @@ -10,6 +10,54 @@ dashedName: what-are-the-different-types-of-tools-professional-developers-use Watch the lecture video and answer the questions below. +# --transcript-- + +What are the different types of tools professional developers use? + +Professional developers rely on a variety of tools to increase productivity and code quality. Let's learn about those tools, including the ones that seem very obvious. + +The first among the tools is computers. A computer is the primary development environment. It could be a heavy desktop or a portable laptop with either Windows, macOS, or Linux as the operating system. + +Professional developers often go for computers with fast processing power and plenty of RAM to handle resource-intensive tasks. + +After the computer is a program for writing and editing code right on that computer. That's a code editor or integrated development environment (IDE). + +IDEs like Visual Studio, IntelliJ IDEA, JetBrains, and PyCharm provide powerful features like code completion, debugging, and integrated terminal support. + +Visual Studio Code (VS Code) is essentially a code editor, but it also provides these functionalities with its rich extension library. + +Other code editors are Sublime Text, Atom, Notepad++, and Brackets. + +When you write code with code editors and IDEs, you need to track the changes you make to them. The tool that lets you track those changes is a version control system. + +Git is the most widely used version control system in the development community. + +Platforms like GitHub, GitLab, and Bitbucket provide cloud-based hosting services for your Git repositories. These platforms enable collaboration with other developers, allow you to work on multiple branches, and facilitate the merging of code changes. + +Package managers are another critical tool. They help developers simplify the process of adding, updating, and removing libraries and project dependencies. + +Examples of popular package managers are: + +* NPM, Yarn, and PNPM for JavaScript +* PIP for Python +* Composer for PHP +* Maven for Java + +After writing code with different tools, developers test that code to make sure it's working as expected. + +For this, developers use testing frameworks like Cypress, Playwright, Selenium, and others. There are also language-specific testing frameworks. Examples are: + +* Jest for JavaScript +* pytest for Python +* JUnit for Java +* PHPUnit for PHP + +You don't only need to test the code to make sure it's working as expected. You also need to test what the code looks like visually to the end users. Developers use web browsers for this. + +Modern browsers like Chrome, Firefox, Edge, and Safari offer developer tools for inspecting HTML, CSS, and JavaScript code. There are also tools for debugging and performance profiling. + +These tools help developers test and optimize their web applications across different browsers for the end users. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672aa6c9e379285acca5a2aa.md b/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672aa6c9e379285acca5a2aa.md index 906f1f1cb1..6a70a954f8 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672aa6c9e379285acca5a2aa.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672aa6c9e379285acca5a2aa.md @@ -10,6 +10,34 @@ dashedName: what-are-common-design-terms-to-help-you-communicate-with-designers Watch the video lecture and answer the questions below. +# --transcript-- + +What are common design terms to help you communicate with designers? + +As a developer, you may need to work closely with designers. If you understand basic design terminology, you'll have a shared vocabulary and you'll be able to participate in the design process more actively. This can make your workflow more efficient and result in a better user experience. + +So let's dive in. We'll start with the term layout. Layout is how the visual elements are arranged on a page or screen to communicate a message. These elements may include text, images, and white space. The layout is like the blueprint of a design. Designers must consider the placement, size, and hierarchy of each element. + +The term that is closely related to layout is alignment. Alignment is how the elements are placed in relation to one another. Using alignment correctly is helpful for making the design look clean and organized. Designers create visual order by aligning elements along imaginary lines, edges, or a central point. + +Great. Now let's talk about composition. Composition is the art of arranging elements to create a harmonious design. It determines how elements like images, text, and shapes relate to each other and contribute to the design in an artistic way. While layout mostly focuses on the placement of the elements, composition also considers the artistic impact that this placement will have in the overall design. + +Composition is closely related to concepts of balance. Balance is how the visual weight is distributed within a composition. Designers aim to create an equilibrium through symmetrical or asymmetrical arrangements. A balanced design feels harmonious. + +Hierarchy is another important concept that you should know. Hierarchy establishes the order of importance of the elements in a design. It's about making sure the most important information is noticed first. You can implement a visual hierarchy with size, color, contrast, alignment, white space, and even typography. + +To create clear distinctions between the elements, you can use contrast. Contrast is helpful for guiding user attention to what you want to emphasize. You can do this through variations in color, size, shape, texture, or any other visual characteristic. Strong contrast is also helpful for improving readability. + +Another helpful term is white space. White Space, also known as "negative space", is the empty space in a design. It's the area surrounding the elements. You might be surprised to know that white space is not necessarily white. Actually, it can be space in any color or texture. Its purpose is to improve the readability and enhance the visual hierarchy of a design. + +These are general design concepts that you will find very often, but you may also find design terms that are more closely related to software development. + +The user interface, also known as UI, is how humans interact with computers. A user interface includes the visual and interactive elements that users can see on their screens, like icons, images, text, menus, links, and buttons. + +The user experience, also known as UX, is about how users feel when using a product or service. An application with a well-designed user experience is intuitive, easy to use, efficient, accessible, and enjoyable. The user interface plays a key role in making the user experience as easy and enjoyable as possible, so they are very closely related. + +These are some of the common terms that you should know to communicate with designers. With this knowledge, now you can take a more active role in the design process. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baa97f2990e6631d522e7.md b/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baa97f2990e6631d522e7.md index edb9ff819c..8c2a153704 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baa97f2990e6631d522e7.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baa97f2990e6631d522e7.md @@ -10,6 +10,38 @@ dashedName: how-do-you-create-good-background-and-foreground-contrast-in-your-de Watch the lecture video and answer the questions below. +# --transcript-- + +How do you create good background and foreground contrast in your designs? + +First, you may need to familiarize yourself with contrast. Contrast is the difference between two colors - or how easy it is to tell them apart. + +Colors with a higher contrast will be more visually distinct, whereas colors with a lower contrast will be more visually similar. For example, black and white have a very high contrast ratio. Whereas light blue and light purple have less of a contrast. + +Of course, in these examples the distinction might be made clearer because of the layout. But what about applying these colors to text? You can have the high contrast black text on a white background. And the low contrast purple text on a blue background. + +But how do you determine what is a "good enough" contrast? You can't base it solely on how the text looks to you, as every user will have a different experience. Thankfully, the Web Content Accessibility Guidelines, or WCAG, provide a standard for this. + +Text with a contrast ratio of 4.5:1 is considered the AA standard, which is the bare minimum you should follow to be accessible to most users. Text with a contrast ratio of 7:1 is considered the AAA standard, and ensures the best level of accessibility. + +There are a number of websites that can check the contrast ratio between two colors, but most browsers will allow you to do this directly in the developer tools on your website. + +Let's open the developer tools and inspect the text elements of the example site. + +The black text on a white background has a contrast ratio of 21:1, which more than meets the AAA standard. The purple text on a blue background, however, has a contrast ratio of 1.48:1, which does not even meet the AA standard. + +How can you fix this? Well, there are three aspects that impact the contrast ratio. + +The first is the hue, which represents the general color type, like red, blue, orange. Let's shift to a hue that is further away from blue. In this case, let's use red. + +Unfortunately, this change only brought the contrast ratio to 1.49:1, which means you need to change the saturation, or the "amount" of color present. Let's increase the amount of red in the text. That brings us much closer to the goal, with a 3.54:1 contrast ratio. + +However, you can potentially get even closer by changing the last value, which is lightness. Lightness represents how much white is present in the color. + +Let's decrease the lightness of the red. Now there is a much darker red against the light blue background, which brings the contrast ratio to 10.34:1. + +You could continue to adjust the colors to find the balance between the visual effect you want and an accessible contrast ratio. But it is important to remember that accessibility should always take precedence. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baaa62d4b46667a8ac869.md b/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baaa62d4b46667a8ac869.md index 9f54e1fa1a..c8573e5c85 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baaa62d4b46667a8ac869.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baaa62d4b46667a8ac869.md @@ -10,6 +10,28 @@ dashedName: what-is-the-importance-of-good-visual-hierarchy-in-design Watch the lecture video and answer the questions below. +# --transcript-- + +What is the importance of good visual hierarchy in design? + +Visual hierarchy refers to the way you layout and display the content of your page to guide the viewer's attention. + +A strong hierarchy can provide a clear path for the eye to follow, ensuring that the information you convey is consumed in the order that you intended. + +Let's consider a basic page layout in which the HTML for the page is semantically correct, but the styling applied does not create a strong visual hierarchy. + +If the font size isn't distinct, there is no visible indication of the document flow, although things are separated by headings. + +To create a visual hierarchy, you should apply different font sizes to the heading tiers. You could also use something like a "callout box" to highlight a specific section. + +Visual hierarchy can also help increase your user conversion. For example, you can take advantage of the callout box to further draw attention to a Call to Action (CTA) button. + +With the CTA button being visually tied to the work history section, it guides the user to the vital information and the action you want them to take based on that information. + +Finally, your visual hierarchy can be important for conveying other components, like a navigation bar or a footer. + +This makes it easier for your users to find the essential information that they may be looking for. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baab2a0c3df66ad987b94.md b/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baab2a0c3df66ad987b94.md index 4aa66228a4..740be31be1 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baab2a0c3df66ad987b94.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baab2a0c3df66ad987b94.md @@ -10,6 +10,28 @@ dashedName: how-does-scale-work-in-design Watch the lecture video and answer the questions below. +# --transcript-- + +How does scale work in design? + +The "scale" of something refers to its size. + +When you're looking at scaling in your web design, you're looking at the size relationships between different elements, and how these elements might adapt to different screen sizes. + +Using the correct scale for your elements plays an important role in visual hierarchy. Larger elements will draw more attention, which can guide your users through the content in the way that you want. + +For example, the visual separation between a heading and a paragraph draws your reader’s attention, but the scale should be appropriate to get an eye-catching text that pulls your reader to that section. + +Scale doesn't apply just to text, though. It's also important for images. And while the scale of a banner image might make sense for a desktop layout, it might be too large on a mobile layout. + +By scaling an image down to a more appropriate ratio, you can keep the visual impact while ensuring the information on the site is visible. + +Scale is also important for interactivity, and the ability to actually use your website. If the text in a navigation bar is not at an appropriate scale, mobile phone users will have a hard time tapping on the links. + +And if you scale it appropriately, you end up with links that are not only easier to read, but easier to click on for your mobile users. + +There are many ways that scale is important in your designs. We've covered the basics, so you should now have a fundamental understanding of its importance. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baabf16290b66e6b79a39.md b/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baabf16290b66e6b79a39.md index 0a966fe5ac..0bbe32cf6f 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baabf16290b66e6b79a39.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baabf16290b66e6b79a39.md @@ -10,6 +10,44 @@ dashedName: how-does-alignment-work-in-design Watch the lecture video and answer the questions below. +# --transcript-- + +How does alignment work in design? + +When you are designing web pages, it is important to create cohesive and visually appealing designs. One way to achieve this is through the use of alignment. + +Alignment is the process of arranging text and images in a way that creates a visual connection between elements. + +It helps to create a sense of order and organization on the page, making it easier for users to navigate and understand the content. + +There are several types of alignment you can use, but the basic ones are: + +- left alignment +- center alignment +- right alignment +- justified alignment +- vertical alignment + +Left, right, and center alignments are all subtypes of horizontal alignment, while vertical alignment is used to align elements along a vertical axis. + +Let's take a closer look at each type of alignment and how you can use them in your designs. + +Left alignment is commonly used with text where each element is aligned to the left margin. Aligning all of the headings and paragraphs on a web page to the left margin makes it easier for the user to read and follow the content. + +The opposite of left alignment is right alignment, where each element is aligned to the right margin. This is often used on websites to display additional content like promotional banners or advertisements. + +For example, an ad that is aligned to the right margin makes it stand out from the rest of the content on the page but doesn't distract the user from the main content. + +Center alignment is where elements are centered on the page. This is often used for headings, logos, and other important elements that you want to draw attention to. + +Justified alignment is when text is aligned to both the left and right margins. This is typically used for descriptive passages or articles, and creates a clean and professional look. + +The last type of alignment is vertical alignment, which is used to align elements along a vertical axis. + +Vertical alignment can be used, for example, for a contact form on a website. Aligning all of the form inputs like the name, email, and message fields along a vertical axis makes it easier for the user to fill out the form. + +By using different types of alignment, you can create a sense of order and organization on the page that makes it easier for users to navigate and understand the content. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baacb7f2f446728e77efe.md b/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baacb7f2f446728e77efe.md index 86b23b4ca3..0eefe09390 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baacb7f2f446728e77efe.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baacb7f2f446728e77efe.md @@ -10,6 +10,34 @@ dashedName: what-is-the-importance-of-whitespace-in-design Watch the lecture video and answer the questions below. +# --transcript-- + +What is the important of whitespace in design? + +White space refers to any type of space around elements like images, text, and buttons. White space is important in design because it helps to create a balance between the elements on the page. + +Let's take a look at some examples of how white space can be used effectively in design. + +For example, let's consider a call-to-action (CTA) button. CTAs are used to encourage users to take a specific action like signing up for a newsletter or making a purchase. + +By using white space effectively, we can help to make a CTA button more prominent and encourage users to click on it. + +Now let's take a closer look at the different types of white space. + +This first example uses both macro and active white space. Macro white space is the space between larger elements like images, text blocks, and buttons. + +Active white space is the space that is intentionally created to help guide the user's eye and draw attention to certain elements on the page. + +In contrast to active white space, there is also passive white space. Passive white space is the space that is left over after all the elements on a page have been placed. + +Another type of whitespace would be micro white space. This is the space between individual characters in a line of text. + +Micro white space is important because it helps to improve readability and legibility, making it easier for users to scan and understand the content. + +When designing your web pages, you always want to be mindful of the law of proximity. This law states that elements that are close together are perceived as being related, while elements that are far apart are perceived as being unrelated. + +You can use white space to help group related elements together and help navigate users through the content on your page. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md b/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md index 6e3678f0a1..9c4ea2e5b5 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md @@ -10,6 +10,34 @@ dashedName: what-are-best-practices-for-working-with-images-in-your-designs Watch the lecture video and answer the questions below. +# --transcript-- + +What are best practices for working with images in your designs? + +Adding images to your websites is a great way to engage your users and increase the visual appeal of your site. But there are a few things to consider when working with images in your designs. + +The first thing to consider is creating responsive images. Responsive images are images that scale to fit the size of the screen they are being viewed on. This is important because it ensures that your images look good on all devices, from desktops to mobile phones. + +Another thing to consider is the resolution for images. Higher quality images with better resolution have more pixels per inch. Pixels are small squares that make up an image. + +Pixels per inch, or PPI, is the number of pixels in one inch of an image. The higher the PPI, the better the image quality. + +You want to make sure that your images are high quality and look good on all devices. This means that you should use high resolution images that are optimized for the web. + +Another thing to consider is the size of your images and how they fit within the spaces in the layout. You want to make sure that your images are the right size and are not too large or too small. + +Using large images that are meant to fit in smaller spaces in the design can slow down your website and make it harder for users to load your site. You want to make sure that your images are the right size and are optimized for the web. + +When it comes to image placement, you want to think about balance, hierarchy, and alignment to help ensure your images are optimized for the web. + +Balance is the distribution of visual weight in a design. You want to make sure there is a good balance between text and images on the site so it creates a harmonious design. + +Hierarchy is the order in which elements are viewed on a page. You want to make sure that images that align with important content are placed higher than images that are less important. + +Alignment is the placement of elements in relation to each other. You want to make sure that your images are aligned with the text and other elements on your site so that it creates a cohesive design. + +The last thing to consider is accessibility for images. You want to make sure that your images are accessible to all users, including those with visual impairments. This means that you should use alt text for your images so that screen readers can read the text to users who are visually impaired. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baae11d06c867a16f64e1.md b/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baae11d06c867a16f64e1.md index 868b9face5..0237f75b0a 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baae11d06c867a16f64e1.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baae11d06c867a16f64e1.md @@ -10,6 +10,33 @@ dashedName: what-is-progressive-enhancement Watch the lecture video and answer the questions below. +# --transcript-- + +What is progressive enhancement? + +Progressive enhancement is a design approach that ensures all users, regardless of browser or device, can access the essential content and functionality of an application. + +It focuses on delivering a core experience that works for everyone, while offering extra features and improvements to users with more advanced browsers or better internet connections. + +The progressive enhancement approach lives by these core principles: + +- All core content and basic functionality should be accessible on all browsers +- All advanced layouts should be provided through external CSS stylesheets +- All advanced functionality should be provided through external JavaScript files +- A user's browser preferences should be respected + +Using a progressive enhancement approach makes your applications more accessible because all core content and functionality should not be blocked in unsupported environments. + +In terms of speed, a progressive enhancement approach can also help improve the performance of your applications. + +Those users that are working with slower internet connection speeds will still be able to access the content because the browser will download the necessary resources first. + +When it comes to SEO, progressive enhancement can also help improve the visibility of your applications. + +Search engines will be able to crawl the content of your applications because the core content is available in the initial HTML response. + +While some have criticized this approach deeming that it is not always realistic for applications that rely heavily on JavaScript for their functionality, it is still a good practice to follow when building applications. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672aa58c389eb9565978495d.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672aa58c389eb9565978495d.md index 5e118ee608..ccbb2240dc 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672aa58c389eb9565978495d.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672aa58c389eb9565978495d.md @@ -10,6 +10,32 @@ dashedName: how-can-you-use-file-management-applications-on-your-computer Watch the video lecture and answer the questions below. +# --transcript-- + +How to use file management applications? + +A file management application is a way to easily store, organize, and edit your files on your computer. Whether you use a Mac or Windows computer, there are built-in applications you can use to organize your files. + +If you have a Windows computer, the default file manager is the File Explorer. This is used to browse, search, and manage files and folders, as well as perform file operations like copying, moving, and deleting. + +To find the File Explorer, you can go to the Start menu or press the Windows logo key on your keyboard. + +To pin a folder, you can right click with your mouse and select "Pin". To move a file or folder, you first need to select it, then select "Cut" and then navigate to the new location to paste it. + +If you have a Mac computer, the default file manager is the Finder. This provides access to local and remote files, supports file previews, and offers a variety of organizational features like tags and Smart Folders. + +To access the Finder on your Mac, go to the Dock at the bottom and click on the Finder icon. + +You will notice a sidebar on the left-hand side where your favorite folders are located. + +One way to organize your files, is to use tags. To tag a file or folder, you can select the item in the Finder and then right click with your mouse. You will see the "Tags..." option in the dropdown and you can apply a custom colored tag. + +To search for tagged items, you can scroll to the bottom of the sidebar and click on the corresponding colored tag, or you can search for the tag by color name in the search field. + +Another way to organize your files is to use smart folders. Smart folders are collections of files that are automatically organized based on criteria you set, such as file type, date, or keywords. + +Whether you're using File Explorer on Windows or Finder on Mac, these applications provide flexibility to manage your files with features like tags, search, and Smart Folders. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac37104dc2530a769e6a4.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac37104dc2530a769e6a4.md index 683f59ec45..eff43a863d 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac37104dc2530a769e6a4.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac37104dc2530a769e6a4.md @@ -10,6 +10,58 @@ dashedName: what-are-best-practices-for-naming-files-for-web-applications Watch the lecture video and answer the questions below. +# --transcript-- + +What are best practices for naming files for web applications? + +As you start to build out your own web applications, you will need to be mindful of what you name your files. + +You will want to name your files in a way that is easy to understand and maintain. + +Let's take a look at some examples of good and bad file names for HTML files. Note that the `.html` extension in these examples tells us that this is an HTML file. + +Here is an example of a bad file name: + +```md +index1234.html +``` + +By the name alone, it is not clear what the file is about. This file could be for a products page, blog page, or any other type of page but we don't know that from the file name. + +Here is an example of a better file name for an HTML file: + +```md +about-us.html +``` + +By using a more descriptive name like `about-us.html`, it is clear what the file is about. + +You will also notice in this file name that there are no spaces. Instead, you use a hyphen, `-`, to separate the words. + +Sometimes you might see a file name called `index.html`. This is a special file name that is used to represent the main page of a website. When you visit a website, the `index.html` file is the first file that is loaded. + +Another important consideration when naming files is the use of special characters. + +Using a mixture of special characters, numbers, and letters can make it difficult to understand what the file is about. + +Here is an example of a bad file name: + +```md +file-1!@.html +``` + +This name looks unnecessarily complicated and does not give us any information about what the file is about. + +So it is best to stick with only using letters and dashes in your file names. + +As you start to learn more languages, you will see that there are common conventions for naming files in those languages as well. + +In these situations, it is always best to consult with official documentation or other resources to understand the best practices for naming files in that language. + +Also you will be in situations where you are working on a team and you will need to follow the conventions that the team has established for naming files. + +Always consult with the team's style guide to make sure your file names are consistent with the rest of the team. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac39a22b0cc30eb8fd65e.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac39a22b0cc30eb8fd65e.md index 9f46d28c0f..d918513227 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac39a22b0cc30eb8fd65e.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac39a22b0cc30eb8fd65e.md @@ -10,6 +10,54 @@ dashedName: what-are-best-practices-for-file-folder-organization-in-web-applicat Watch the lecture video and answer the questions below. +# --transcript-- + +What are best practices for file and folder organization in web applications? + +When building out web applications, it is important to think about the organization of your files and folders. This will help keep your code organized and easier to maintain. + +Let's take a look at an example folder structure for an HTML and CSS project: + +```bash +. +├── /assets +│ ├── /images +│ │ ├── logo.png +│ │ ├── banner.jpg +│ │ └── icons.svg +│ ├── /fonts +│ │ ├── custom-font.woff +│ │ └── custom-font.woff2 +├── /css +│ ├── main.css +│ ├── about.css +│ └── contact.css +├── index.html +├── about.html +├── contact.html +└── README.md +``` + +At the top of the example, there is a single dot, which represents the root directory. + +The root directory is the top-level directory in a file system, serving as the starting point for all file paths and containing all other directories and files. A directory is another name for a folder. + +Inside the root directory, the first directory shown is the `assets` directory. The term `assets` refers to any files that are used in the project, such as images, fonts, or other resources. + +In this example, there are two directories inside the `assets` directory called `images` and `fonts`. + +The next directory would be the `css` directory. Sometimes this is also referred to as a stylesheets directory. This is where you would store all of your CSS files. + +Below the `css` directory are the HTML files. The `index.html` file represents the homepage, while `about.html` and `contact.html` represent the About and Contact pages, respectively. + +Lastly, there is a `README.md` file. `README` files are commonly used to provide useful information about the project, such as what it does, how to use it, and any other relevant details. + +The `.md` extension stands for Markdown, which is a lightweight markup language that is often used to write documentation. + +By organizing your project into assets, CSS, and HTML files, it makes it easy to find what you are looking for. This also makes it easy for other developers to contribute to your project. + +It is important to note that this is just one example of how you can organize your files and folders. There are many different ways to structure a project. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac3c5d0e9fd31835ff772.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac3c5d0e9fd31835ff772.md index a06c421fc9..881b1f0662 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac3c5d0e9fd31835ff772.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac3c5d0e9fd31835ff772.md @@ -10,6 +10,74 @@ dashedName: how-to-create-move-and-delete-files-and-folders-using-explorer-finde Watch the lecture video and answer the questions below. +# --transcript-- + +How to create, move, and delete files and folders using the Explorer or Finder? + +To create a file on Windows using the Explorer, you can click on the "New" option at the top right. This will show you a list of the different types of files that you can create. + +You can also create files in their corresponding applications. Let's create a text file to show you the process. + +When you click on "New" and select the file type, you will see a new text file in your current folder with a default name. You can rename it if you'd like. + +The process of creating folders is exactly the same. Click the "New" button at the top right and then select the "Folder" option or right-click on an empty spot and go to "New." Then, select the "Folder" option. You'll see a new empty folder in your current location. + +You can rename files and folders by selecting them and clicking on the "Rename" option at the top. When current name of the file is highlighted, you can start writing the new name of the file. Press Enter to confirm the changes. + +Alternatively, you can right-click on the file or folder and select the "Rename" option or use the F2 keyboard shortcut. Write the new name and press Enter to confirm the changes. + +You can move a file or folder to another folder by dragging and dropping it into the destination folder, if you have it opened it as a tab. + +You can also select the file or folder and select the "Cut" option at the top. + +Then, go to the destination folder and paste it by clicking the "Paste" button at the top. If you copied or cut the file previously, this button will be enabled. + +You can also do this by right-clicking on an empty spot and then clicking on the paste icon. This will remove the file or folder from its original location. + +To delete a file or folder, click on it and then click on the Trash icon at the top. You will also find a "Delete" option if you right-click on it. + +Great. Now let's see how you can do this on macOS using Finder. + +Finder is the default file manager on macOS. + +To create a file on macOS, you need to open an application that lets you create the type of document that you need to create. Currently, there isn't a built-in way to create a file directly on Finder. + +For example, to create a simple plain text file, you can open TextEdit and save your file. The process works exactly the same for any type of file. + +There are many ways to open TextEdit. One of them is to go to Launchpad. Then, search for an app where you can create the type of file that you're interested in. In this case, that would be "TextEdit." Click on the icon to open the app. + +Once you are inside the app, you should see an option to save your file in the App menu. This menu is located at the top-right, next to the Apple menu icon. + +In one of the App menu options, you should see a command to save the file. This is usually under the File menu. + +Next to it, you will see the keyboard shortcut for saving your file. This is usually `Command + S` on macOS. + +When you are saving the file for the first time, you should see a dialog window, where you can write the name of the file and choose a location. + +Usually, the file extension is added by the application automatically but you can change it before saving the file. + +After saving the file, you can open Finder by clicking on the Finder icon in the Dock. You should see your new file in the folder where you saved it. + +To create a new folder, you should go to the location where you want to create that new folder and rick-click on an empty spot. You will see a list of options. The first option is "New Folder." + +If you click on it, you can assign a name to your new folder. Write the name and press Enter to confirm. + +There are multiple ways to move files and folders in Finder. If you need to move them to a folder listed in your Finder "Favorites" section, you can just drag and drop it. + +If you need to move it to a different folder, you have two options. + +You can either open the destination folder as a tab and drag and drop the file or folder into the tab. + +Or you can use keyboard shortcuts. First, copy the file with `Command + C`, go to the new folder, and then use `Command + Option + V` to paste the file or folder in that location. This will also remove it from the original folder. + +To delete a file or folder, you can right-click on it and select "Move to trash." + +You can also drag and drop them into the trash icon on the Dock. This is equivalent. + +When the file or folder is in the trash can, you can right-click on it to delete it immediately or you can empty the trash to remove all the deleted files and folders permanently. + +Knowing how to create, move, and delete files and folders on Windows and macOS is very important. By mastering these skills, you can organize your files, locate them quickly, and free up storage on your computer by deleting unnecessary files. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac3f129efbf327742eb33.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac3f129efbf327742eb33.md index edb1dbb4b7..effaff66d2 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac3f129efbf327742eb33.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac3f129efbf327742eb33.md @@ -10,6 +10,42 @@ dashedName: how-to-search-for-files-and-folders-on-your-computer Watch the lecture video and answer the questions below. +# --transcript-- + +How to search for files and folder on your computer? + +Let's learn how to search for files and folders on Windows and macOS. + +We'll start with Windows. You can search from the Taskbar or from the File Explorer. + +To search from the Taskbar, write the name of the file or folder that you are looking for. You can also search for keywords. You'll see results from across your PC and OneDrive. + +If you only want to see documents, you can click on the "Documents" tab. You also have tabs for apps and web results. + +Another alternative is to use the Search File Explorer. You will find it at the top right of the Explorer window, where you can see "Search Documents." + +You have three options to define the scope of the search: + +- You can search from Home to find files from your PC and from the cloud quickly. + +- You can search from a folder to find files stored inside it. + +- You can search from This PC for a slow but in-depth search. + +This is how you can search for files and folders on Windows. Now let's see how you can do this on macOS. + +First, you can use Spotlight, a tool that helps you find files on your Mac. To open Spotlight, go to your menu bar at the top right and find the magnifying glass icon. If you don't see this icon on the menu bar, you can add it in the Control Center settings. + +Go to your settings, filter by "Control Center", click on this option and then scroll down until you find the "Spotlight" option. You can also use a keyboard shortcut to open Spotlight: `Command + Spacebar`. + +When you open Spotlight, you'll see the Spotlight Search, where you can search for any file or folder by typing its name. When you start typing, you'll see the results grouped by category, including suggestions, folders, presentations, photos, documents, and related searches. + +You can also expand a specific category by clicking on "Show More." + +Another way to search for files that you have recently opened is to open Finder by click on the Finder icon in the Dock. Then, go to "Recents" in the Finder sidebar. And there, you'll find all the files that you've recently viewed. + +This is how you can search for files and folders on macOS. With these search tools, you can optimize your workflow and find the files and folders you need very quickly. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac403a9ba7732b31c6480.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac403a9ba7732b31c6480.md index 025f69cab1..f35d416a40 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac403a9ba7732b31c6480.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac403a9ba7732b31c6480.md @@ -10,6 +10,62 @@ dashedName: what-are-some-common-file-types-you-will-work-with-in-web-applicatio Watch the lecture video and answer the questions below. +# --transcript-- + +What are some common file types used in web applications? + +Files are classified based on their content and structure. The file type determines how a file is opened and processed by computer programs. + +We identify file types based on their extensions. A file extension is a three or four letter suffix at the end of the file name. The three main file types that you will find in web applications are HTML, CSS, and JavaScript. + +HTML files contain the structure and content of the web application. They have a `.html` file extension. + +CSS files define the styles. They have a `.css` file extension. + +And JavaScript files add more advanced functionality and interactivity. They have a `.js` file extension. + +As you develop web applications, you will also need to include images. These are some of the most widely used image file types. + +JPEG, which stands for "Joint Photographic Experts Group," is known for its efficient compression. It's great for photographs and images. However, the compression is lossy, which means that some image quality is lost to reduce the file size. + +PNG, which stands for "Portable Network Graphics," preserves image quality, even after compression. This results in larger files. PNG supports transparency and it's great for images with sharp edges, like logos and icons. + +The GIF image format supports both animation and transparency but has a limited color palette. GIF stands for "Graphics Interchange Format." + +And finally, we have SVG, which stands for "Scalable Vector Graphics." It's a vector image format. These images can be scaled as much as needed without losing quality. + +Great. Now that you know about image formats, let's see some video and audio formats. + +MP3 is an audio format known for its efficient compression. It's a lossy format, so some audio data is lost during the compression to make these files smaller. + +MP4 is one of the most common video formats. It offers good compression and supports multiple audio and video codecs, subtitles, and metadata. + +MOV, the QuickTime multimedia file format developed by Apple, is primarily associated with QuickTime Player. + +Other popular audio and video file types are WAV, a lossless audio format that keeps the original quality of the audio, and WebM, a high-quality open-source video format. + +If you ever need to customize the fonts of your web application, you will also work with font formats. These are three of the most widely used ones. + +TTF, which stands for "TrueType Font", is a font format compatible with different operating systems. + +WOFF is a modern font format, specifically designed for web development purposes. It stands for "Web Open Font Format". These files are smaller because they have better compression. They can also store metadata, including licensing information. + +And WOFF2 is the successor of WOFF with even more efficient compression and performance. + +You can also create archive files if you need to group multiple folders and files. The most widely used archive format is ZIP. ZIP offers lossless compression, so no data is lost during the process. It's widely supported across operating systems and software applications. + +And finally, let's talk about documentation. In web applications, you will usually find a file called `README` that contains information about the application, like how to use it, how to install it, its license, and how to contribute. + +They are usually written in a file format called Markdown. With Markdown, you can create structured documents with headings, subheadings, links, images, lists, and more. Markdown files have a `.md` or `.markdown` extension. + +Here you can find the `README` file of freeCodeCamp's GitHub repository: https://github.com/freeCodeCamp/freeCodeCamp/blob/main/README.md + +You can create this detailed structure and format using Markdown. + +You will definitely read and write many `README` files throughout your career. Learning about these common file types is essential for web development. + +From the core building blocks of HTML, CSS, and JavaScript to image, video, and audio formats, every file type has an important role in creating interactive web applications. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/6716744f7245947a3dd60009.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/6716744f7245947a3dd60009.md index 950d3b1275..914d95482a 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/6716744f7245947a3dd60009.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/6716744f7245947a3dd60009.md @@ -10,6 +10,30 @@ dashedName: what-are-the-different-target-attribute-types Watch the video and answer the questions below. +# --transcript-- + +What are the different `target` attribute types, and how do they work? + +You may have seen the `target` attribute on anchor elements, or links. This important attribute tells the browser where to open the URL for the anchor element: + +```html +Visit freeCodeCamp +``` + +There are four important possible values for this attribute. Note that each value is preceded by an underscore. + +The first value is `_self`, which is the default value. This opens the link in the current browsing context. In most cases, this will be the current tab or window. + +The second value is `_blank`, which opens the link in a new browsing context. Typically, this will open in a new tab. But some users might configure their browsers to open a new window instead. + +The third value is `_parent`, which opens the link in the parent of the current context. For example, if your website has an `iframe`, a `_parent` value in that `iframe` would open in your website's tab/window, not in the embedded frame. + +The fourth value is `_top`, which opens the link in the top-most browsing context - think "the parent of the parent". This is similar to `_parent`, but the link will always open in the full browser tab/window, even for nested embedded frames. + +There is a fifth value, called `_unfencedTop`, which is currently used for the experimental FencedFrame API. At the time of this video, you probably won't have a reason to use this one yet. + +Selecting the right `target` value to control where your users end up is an important consideration when creating a website. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/671682dd88e461a8e2620f38.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/671682dd88e461a8e2620f38.md index 7bc6e9ff7d..e663d54571 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/671682dd88e461a8e2620f38.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/671682dd88e461a8e2620f38.md @@ -10,6 +10,69 @@ dashedName: what-is-the-difference-between-absolute-and-relative-paths Watch the video and answer the questions below. +# --transcript-- + +What is the different between absolute and relative paths? + +A path is a string that specifies the location of a file or directory in a file system. In web development, paths let developers link to resources like images, stylesheets, scripts, and other web pages. There are absolute and relative paths - both are essential when specifying file locations within a file system. Let's look at the two so you can decide which one of them to use and when. + +An absolute path is a complete link to a resource. It starts from the root directory, includes every other directory, and finally the filename and extension. The "root directory" refers to the top-level directory or folder in a hierarchy. + +An absolute path also includes the protocol - which could be `http`, `https`, and `file` and the domain name if the resource is on the web. Here's an example of an absolute path that links to the freeCodeCamp logo: + +```html + + View fCC Logo + +``` + +In this example, the protocol is `https`, the domain name is `design-style-guide.freecodecamp.org`, and the filename is `fcc_secondary_small.svg`. + +Now, what if the resource you want to link to using an absolute path is on your local machine? Here's how to link to the `about.html` file with an absolute path: + +```html +

+ Read more on the + About Page +

+``` + +It looks like this because we are going into a folder called `Users`, then into a folder called `user`, then into a folder called `Desktop`, then into a folder called `fCC`, then into a folder called `script-code`, then into a folder called `absolute-vs-relative-paths`, then into a folder called `pages` to finally get the `about.html` file. + +Here's what the absolute URL looks like in the browser address bar: + +```sh +file:///Users/user/Desktop/fCC/script-code/absolute-vs-relative-paths/pages/about.html +``` + +The URL includes the protocol, `file://`. It also include the path, which looks like this: `/Users/user/Desktop/fCC/script-code/absolute-vs-relative-paths/pages/`, and represents the series of folders that lead to the file. And finally, it also includes the `about.html`, which is the filename and the extension. + +Now, lets look at the relative path. A relative path specifies the location of a file relative to the directory of the current file. It does not include the protocol or the domain name, making it shorter and more flexible for internal links within the same website. Here's an example of linking to the `about.html` page from the `contact.html` page, both of which are in the same folder: + +```html +

+ Read more on the + About Page +

+``` + +So imagine you are on the `contact.html` page, and because the `about.html` page is in the same place, you simply get the filename. This is an example of using a relative file path. + +So, which should you use and when; an absolute path or a relative path? Here are the rules you should follow: + +- Use absolute paths when linking to a resource hosted on an external website. + +- Use absolute paths when you need the link to a page or resource to work consistently regardless of the document location within the site. + +- Use relative paths when linking to resources within the same website. + +- Use relative paths if you want to keep your code cleaner and easier to maintain during development. + +- Use relative paths during local testing to ensure links work without an internet connection. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md index 9327a2725c..ff8d9357a9 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md @@ -1,6 +1,6 @@ --- id: 6716830dbaf95da9564f2e3b -videoId: GTgzy4wPXcM +videoId: 5EfMkiLB9BA title: What Is the Difference Between Slashes, a Single Dot, and Double Dot in Path Syntax? challengeType: 11 dashedName: what-is-the-difference-between-slashes-a-single-dot-and-double-dot-in-path-syntax @@ -10,6 +10,30 @@ dashedName: what-is-the-difference-between-slashes-a-single-dot-and-double-dot-i Watch the video and answer the questions below. +# --transcript-- + +You may have seen links like `/public/logo.png`, `./script.js`, or `../styles.css` before. But what do these special types of links mean? These are called file paths. There are three key syntaxes to know. First is the slash, which can be a backslash (`\`) or forward slash (`/`) depending on your operating system. The second is the single dot (`.`). And finally, we have the double dot (`..`). + +The slash is known as the "path separator". It is used to indicate a break in the text between folder or file names. This is how your computer knows that `naomis-files/` points to a directory of that same name, while `naomis/files/` points to a `files` directory in the `naomis` directory. + +A single dot points to the current directory, and two dots point to the parent directory. You will typically see a single dot used to ensure that the path is recognized as a relative path. Remember that you learned in a previous lecture about relative versus absolute paths before. + +Double dots, however, are much more common to access files outside of the current working directory. + +For example, given this file tree: + +```sh +my-app/ +├─ public/ +│ ├─ favicon.ico +│ ├─ index.html +├─ src/ +│ ├─ index.css +│ ├─ index.js +``` + +If your `public/index.html` file needed to load the `favicon.ico` file, you would use a relative path with a single dot to access the current directory: `./favicon.ico`. If your `public/index.html` file needed to load the `index.css` file, you would use a relative path with double dots to navigate to the parent `my-app` directory first, then to the `src` directory, and finally to your file: `../src/index.css`. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md index c2d2741e7a..68d8c1f1d3 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md @@ -10,6 +10,26 @@ dashedName: what-are-the-different-link-states Watch the video and answer the questions below. +# --transcript-- + +What are the different link states, and why are they important? + +You may have seen a link on a web page become purple after you click it. This is because the state of the link has changed, so different styling gets applied. There are five different states a link can be in. + +The first is the default state, which is `:link`. This state represents a link which the user has not visited, clicked, or interacted with yet. You can think of this state as providing the base styles for all links on your page. The other states build on top of it. + +The second state is `:visited`, which applies when a user has already visited the page being linked to. By default, this turns the link purple - but you can leverage CSS to provide a different visual indication to the user. This is helpful to let someone know they have already read a portion of your documentation. Or, that the site is one they can trust because they have used it before. + +The third state is `:hover`. This state applies when a user is hovering their cursor over a link. This state is helpful for providing extra attention to a link, to ensure a user actually intends to click it. + +Then we have `:focus`. This state applies when we focus on a link. + +And finally, we have `:active`. This state applies to links that are being activated by the user. This typically means clicking on the link with the primary mouse button by left clicking, in most cases. This state can be helpful for showing a user that the element they clicked on is interactive. + +When you use these states to style your links, there is a specific order you need to write your CSS in: `link`, `visited`, `hover`, `focus`, then `active`. + +You should now know how to give links in your page your own personal flair, while still providing the important information a user needs about the state of each link. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md index 9999634949..4aa306a97c 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md +++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md @@ -2,7 +2,7 @@ id: 673263e80dd43da7df3ae565 title: How Can You Find the Position of a Substring in a String? challengeType: 11 -videoId: k2QaBPHl_00 +videoId: tTm8t9inci8 dashedName: how-can-you-find-the-position-of-a-substring-in-a-string --- diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md b/curriculum/challenges/chinese/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md index e59a69ece4..76e1f146f4 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md @@ -39,23 +39,23 @@ Motherboard #### --text-- -Which is not a conventional way to connect a keyboard to the computer? +What are browser developer tools? #### --distractors-- -USB Receiver +Tools for editing browser settings and managing user profiles. --- -Bluetooth +Utilities for blocking ads and improving web page performance. --- -USB Cable +Software for managing browser extensions and plug-ins. #### --answer-- -Ethernet Cable +Built-in features in browsers that help developers debug and inspect websites. ### --question-- @@ -87,25 +87,25 @@ Which of the following is NOT a safe practice when signing in? #### --distractors-- -Using a fingerprint or face scanner +Using a fingerprint or face scanner. --- -Making a long and complex password like `@ppl3_+B@nana34823` +Making a long and complex password like `@ppl3_+B@nana34823`. --- -Utilizing a physical USB security key +Setting up two-factor authentication (2FA). #### --answer-- -Saving passwords in the browser on a public computer +Using passwords based on personal information like your birthday. ### --question-- #### --text-- -Which of the following is not a Web Browser? +Which of the following is NOT a Web Browser? #### --distractors-- @@ -113,11 +113,11 @@ Safari --- -Opera GX +Opera --- -DuckDuckGo +Microsoft Edge #### --answer-- @@ -149,7 +149,7 @@ Visual Studio Code #### --text-- -Which of the following stores and accesses files on the hard drive? +Which of the following is used primarily for managing files stored on a local hard drive? #### --distractors-- @@ -171,45 +171,45 @@ Windows File Explorer #### --text-- -What is not a good practice when naming files for later use? +What is NOT a good practice when naming files? #### --distractors-- -Putting an underscore or hyphen between words +Putting an underscore or hyphen between words. --- -Use a casing style such as camelCase and sticking with it +Use a casing style such as camelCase and sticking with it. --- -Putting a version number at the end of a document like `summaryReport_v2.docx` +Putting a version number at the end of a document like `summaryReport_v2.docx`. #### --answer-- -Being lazy and pounding your keyboard like `asdfloweiueld` to get it over with +Using non-descriptive names like `file1.txt`. ### --question-- #### --text-- -Which of the following is a way to move files? +What does the term "domain name" refer to? #### --distractors-- -Using `Ctrl + X` and `Ctrl + V` (or `Command + X` and `Command + V` on Mac) +A type of software that manages website files and databases. --- -Dragging the file and dropping it at the destination +The physical location of a web server in a data center. --- -Using a terminal command such as `move` (`mv` on Mac) +None of the other choices. #### --answer-- -All of the other choices +The address used to identify websites on the internet. ### --question-- @@ -219,47 +219,47 @@ Which of the following is a way to send a file to the Recycle Bin/Trash? #### --distractors-- -All of the other choices +All of the other choices. --- -Pressing the `Backspace` key on the keyboard +Pressing the `Backspace` key on the keyboard. --- -Moving it to an Archived folder +Moving it to an Archived folder. #### --answer-- -Pressing the `Delete` key on the keyboard (`Command + Delete` on Mac) +Right-click on it and select the Delete/Move to trash option. ### --question-- #### --text-- -Which of the following is not a feature when searching for files locally? +What is a RAM? #### --distractors-- -Using boolean operators like `AND`, `OR`, and `NOT` +A network protocol used for transferring files between devices. --- -Using filters like `*.jpg` +A permanent storage device used for saving files and applications. --- -Using Cortana on Windows or Spotlight Search on Mac +A component in a computer responsible for generating graphics and rendering images. #### --answer-- -Typing the name of the file into your Web Browser and hitting `Enter` +A temporary memory for fast data access by the processor. ### --question-- #### --text-- -What file type will be best suited for writing documentation? +What file type will be best suited for writing a `README` file? #### --distractors-- @@ -281,29 +281,29 @@ What file type will be best suited for writing documentation? #### --text-- -Which of the following is not a configuration file? +What is an Integrated Development Environment (IDE)? #### --distractors-- -`.env` +A platform designed for deploying and hosting web applications. --- -`.build` +A type of hardware device used for testing and debugging electronic circuits. --- -`.yaml` or `.yml` +A version control system that helps developers track changes in source code during software development. #### --answer-- -`.log` +A program that integrates tools for writing, debugging, and running code. ### --question-- #### --text-- -A piece of software that allows you to look at online content is called a: +What is a piece of software that allows you to look at online content called? #### --distractors-- @@ -325,7 +325,7 @@ Web Browser #### --text-- -A piece of software that lists web pages related to a user's query is a called a: +What is a piece of software that lists web pages related to a user's query called? #### --distractors-- @@ -347,7 +347,7 @@ Search Engine #### --text-- -A set of one or more web pages under one domain name is called a: +What is a set of one or more web pages under one domain name called? #### --distractors-- @@ -369,15 +369,15 @@ Website #### --text-- -To search for an exact phrase, you should use what character? +To search for an exact phrase, what should you enclose your search query with? #### --distractors-- -Backtick +Backticks --- -Parenthesis +Parentheses --- @@ -391,65 +391,65 @@ Quotation marks #### --text-- -Which is not a way to install a Web Browser? +Which is NOT a way to install a Web Browser? #### --distractors-- -Using a Package Manager +Using a Package Manager. --- -Directly downloading from the website +Directly downloading from the website. --- -Using an App Store like Microsoft Store +Using an App Store like Microsoft Store. #### --answer-- -Pressing the Network/Internet button in Settings +Pressing the Network/Internet button in Settings. ### --question-- #### --text-- -Which of these peripherals is an input device? +Which of the following formats does NOT preserve image quality after compression? #### --distractors-- -Projector +All of the other choices. --- -Speakers +PNG --- -Monitor +SVG #### --answer-- -Microphone +JPEG ### --question-- #### --text-- -Which of the following lists of parts can all be found in the circuit board? +Which of the following parts can be found in the circuit board? #### --distractors-- -Printer, Router, USB Ports +Printer and Router. --- -Mouse, Keyboard, Monitor +Mouse and Keyboard. --- -Motherboard, Hard Drive, GPU +Hard Drive and GPU. #### --answer-- -BIOS/UEFI Chip, CPU, RAM +CPU and RAM. diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md b/curriculum/challenges/chinese/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md index 449e3fe6e7..f8f31ec1f5 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md @@ -413,91 +413,59 @@ Which color model includes the `hue` component? #### --text-- -Which of the following is the correct syntax to create a CSS variable with a fallback value? +Which color function also allows you to set the opacity of the color? #### --distractors-- ```css -.element { - color: var(--main-color; red); -} +hsl(0, 20%, 30%, 50%) ``` --- ```css -.element { - color: var(--main-color); -} +rgb(20, 30, 80, 0.5) ``` --- ```css -.element { - color: var(--main-color: red); -} +rgba(20, 30, 80) ``` #### --answer-- ```css -.element { - color: var(--main-color, red); -} +hsla(0, 20%, 30%, 50%) ``` ### --question-- #### --text-- -How can you use CSS variables to dynamically change the color of multiple elements? +Which of the following is the correct way to give an element a top-to-bottom red-to-blue gradient background? #### --distractors-- ```css -:root { - primary-color: blue; -} - -.element1, .element2 { - color: --primary-color; -} +background: radial-gradient(red, blue) ``` --- ```css -body { - --color: blue; -} - -.element1, .element2 { - color: var(color); -} +background: radial-gradient(blue, red) ``` --- ```css -:root { - primary: blue; -} - -.element1, .element2 { - color: var(--primary); -} +background: linear-gradient(blue, red) ``` #### --answer-- ```css -:root { - --primary-color: blue; -} - -.element1, .element2 { - color: var(--primary-color); -} +background: linear-gradient(red, blue) ``` diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md index c84a01b0e9..20d4ffa285 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md @@ -17,7 +17,7 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -What is JavaScript? +Which of the following best describes JavaScript? #### --distractors-- @@ -33,7 +33,7 @@ A database management system. #### --answer-- -A programming language primarily used for web development. +A programming language used for web development. ### --question-- @@ -43,19 +43,19 @@ Which of the following is NOT a JavaScript data type? #### --distractors-- -`null` +`Number` --- -`undefined` +`Undefined` --- -`bigInt` +`Object` #### --answer-- -`double` +`Double` ### --question-- @@ -77,29 +77,29 @@ Which of the following is NOT a valid JavaScript variable declaration? #### --answer-- -`public final Long x;` +`public Int x;` ### --question-- #### --text-- -Which of the following is a conventional variable name in JavaScript? +Which of the following is a common naming convention for variables in JavaScript? #### --distractors-- -`my_var` +JavaScript case --- -`my-var` +Lightning case --- -`MyVar` +Giraffe case #### --answer-- -`myVar` +Camel case ### --question-- @@ -127,28 +127,23 @@ What is the difference between `let` and `const` variable declarations in JavaSc #### --text-- -What would be the outcome of the following code? - -```js -let name = "Andy"; -name[0] = "M"; -``` +Why are strings considered immutable in JavaScript? #### --distractors-- -The value of `name` would be `"MAndy"`. +You cannot create strings using variables. --- -The value of `name` would be `"Mndy"`. +Strings can only be created using literals. --- -The value of `name` would still be `"Andy"`. +You can change strings, but only through global variables. #### --answer-- -It would throw an error. +Once a string is created, you cannot change its characters directly. ### --question-- @@ -186,7 +181,7 @@ console.log(hello); #### --distractors-- -Reassigns `world` to the variable `hello`, and prints it out in the console. +Reassigns `" world"` to the variable `hello`, and prints it out in the console. --- @@ -194,33 +189,33 @@ Prints out the number of characters in `Hello world` in the console. --- -Adds the string `world` to the variable `hello`, and prints it out in the console. +Combines `"Hello"` and `" world"` into a new string and prints it, but the value of `hello` remains `"Hello"`. #### --answer-- -Creates a new string that is made of the values of `hello` and `" world"` combined together, and assigns this new string back to `hello` and then prints it out in the console. +Combines the current value of `hello` with the string `" world"`, reassigns it to `hello`, and prints it to the console. ### --question-- #### --text-- -Are semicolons required in JavaScript? +Which JavaScript character is used to mark the end of a statement? #### --distractors-- -Yes. The code won't work without semicolons. +`:` --- -Semicolons are sometimes required in JavaScript. +`,` --- -No. It's recommended not to use semicolons in JavaScript. +`.` #### --answer-- -No, but it is generally recommended to use semicolons consistently to avoid potential issues in code. +`;` ### --question-- @@ -264,7 +259,7 @@ JavaScript performs type checking before execution, meaning type related errors #### --answer-- -You don't need to declare the data type of a variable before using it. JavaScript infers the type based on the value assigned to the variable. +JavaScript infers the type based on the value assigned to the variable. ### --question-- @@ -410,7 +405,7 @@ Which of the following is NOT a valid string concatenation method in JavaScript? --- -``console.log(`${string1} ${string2}`);`` +`console.log("string1 " + string2);` --- @@ -424,7 +419,7 @@ Which of the following is NOT a valid string concatenation method in JavaScript? #### --text-- -Which of the following variable names uses camelCase correctly? +Which of the following variable names uses camel case correctly? #### --distractors-- @@ -446,23 +441,23 @@ Which of the following variable names uses camelCase correctly? #### --text-- -Which character JavaScript uses to mark the end of a statement? +Why is it beneficial to use semicolons explicitly even though JavaScript has Automatic Semicolon Insertion? #### --distractors-- -`:` +To increase the execution speed of the code. --- -`,` +To maintain consistency with other programming languages. --- -`.` +To allow for better debugging and error tracing. #### --answer-- -`;` +To improve code readability and reliability. ### --question-- @@ -485,4 +480,3 @@ Which of the following is NOT a JavaScript data type? #### --answer-- `Float` - diff --git a/curriculum/challenges/chinese/25-front-end-development/review-form-validation-with-javascript/6723ce555ff2dfc0cc04b69a.md b/curriculum/challenges/chinese/25-front-end-development/review-form-validation-with-javascript/6723ce555ff2dfc0cc04b69a.md index 9c220360ea..e8b56c6cae 100644 --- a/curriculum/challenges/chinese/25-front-end-development/review-form-validation-with-javascript/6723ce555ff2dfc0cc04b69a.md +++ b/curriculum/challenges/chinese/25-front-end-development/review-form-validation-with-javascript/6723ce555ff2dfc0cc04b69a.md @@ -91,7 +91,7 @@ button.addEventListener('click',(event) => { ``` -- **`enctype` Attribute**: The `form` element accepts an `enctype` attribute, which represents the encoding type to use for the data. This attribute only accepts three values: `application/x-www-form-urlencoded` (which is the default, sending the data as a URL-encoded form body), `text/plain` (which sends the data in plaintext form, in `name=value` pairs separated by new lines), or `mulitpart/form-data`, which is specifically for handling forms with a file upload. +- **`enctype` Attribute**: The `form` element accepts an `enctype` attribute, which represents the encoding type to use for the data. This attribute only accepts three values: `application/x-www-form-urlencoded` (which is the default, sending the data as a URL-encoded form body), `text/plain` (which sends the data in plaintext form, in `name=value` pairs separated by new lines), or `multipart/form-data`, which is specifically for handling forms with a file upload. # --assignment-- diff --git a/curriculum/challenges/chinese/25-front-end-development/review-javascript-comparisons-and-conditionals/6723c554025f449f4f39c3f5.md b/curriculum/challenges/chinese/25-front-end-development/review-javascript-comparisons-and-conditionals/6723c554025f449f4f39c3f5.md index 5ebdbeb3cc..94e4249f6d 100644 --- a/curriculum/challenges/chinese/25-front-end-development/review-javascript-comparisons-and-conditionals/6723c554025f449f4f39c3f5.md +++ b/curriculum/challenges/chinese/25-front-end-development/review-javascript-comparisons-and-conditionals/6723c554025f449f4f39c3f5.md @@ -28,7 +28,7 @@ console.log(null === undefined); // false ## `switch` Statements -- **Definition**: A `switch` statement evaluates an expression and matches its value against a series of `case` clauses. When a match is found, the code block associated with that case is executed. +- **Definition**: A `switch` statement evaluates an expression and matches its value against a series of `case` clauses. When a match is found, the code block associated with that case is executed. A `break` statement should be placed at the end of each case, to terminate its execution and continue with the next. The `default` case is an optional case and only executes if none of the other cases match. The `default` case is placed at the end of a `switch` statement. ```js const dayOfWeek = 3; diff --git a/curriculum/challenges/chinese/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md b/curriculum/challenges/chinese/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md index 8579e569a2..3d41c6a64e 100644 --- a/curriculum/challenges/chinese/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md +++ b/curriculum/challenges/chinese/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md @@ -2126,7 +2126,7 @@ button.addEventListener('click',(event) => { ``` -- **`enctype` Attribute**: The `form` element accepts an `enctype` attribute, which represents the encoding type to use for the data. This attribute only accepts three values: `application/x-www-form-urlencoded` (which is the default, sending the data as a URL-encoded form body), `text/plain` (which sends the data in plaintext form, in `name=value` pairs separated by new lines), or `mulitpart/form-data`, which is specifically for handling forms with a file upload. +- **`enctype` Attribute**: The `form` element accepts an `enctype` attribute, which represents the encoding type to use for the data. This attribute only accepts three values: `application/x-www-form-urlencoded` (which is the default, sending the data as a URL-encoded form body), `text/plain` (which sends the data in plaintext form, in `name=value` pairs separated by new lines), or `multipart/form-data`, which is specifically for handling forms with a file upload. ## The `date()` Object and Common Methods diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-cat-photo-app/5ef9b03c81a63668521804d2.md b/curriculum/challenges/chinese/25-front-end-development/workshop-cat-photo-app/5ef9b03c81a63668521804d2.md index 8841cff630..d414bd8b0e 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-cat-photo-app/5ef9b03c81a63668521804d2.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-cat-photo-app/5ef9b03c81a63668521804d2.md @@ -9,7 +9,7 @@ dashedName: step-29 The code for an ordered list (`ol`) is similar to an unordered list, but list items in an ordered list are numbered when displayed. -After the second `section` element's last `h3` element, add an ordered list with these three list items: +Below the `h3` element, add an ordered list with these three list items: `flea treatment` `thunder` `other cats` diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a8290a27c2c625e2355042.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a8290a27c2c625e2355042.md index 2a89d257cb..869bc7520c 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a8290a27c2c625e2355042.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a8290a27c2c625e2355042.md @@ -8,7 +8,7 @@ demoType: onLoad # --description-- -In this workshop, you will learn how to work with HTML forms by building a Hotel Feedback Form. +In this workshop, you will practice working with HTML forms by building a Hotel Feedback Form. Start by adding the `` followed by an `html` element with a `lang` attribute of `en`. diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a83601cd819e37f0dccd14.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a83601cd819e37f0dccd14.md index 3c7716ab7b..8b5f1cd32e 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a83601cd819e37f0dccd14.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a83601cd819e37f0dccd14.md @@ -45,14 +45,14 @@ Your `h1` element should have the text `Hotel Feedback Form`. ```js const h1 = document.querySelector('h1'); -assert.strictEqual(h1.innerText, 'Hotel Feedback Form'); +assert.strictEqual(h1?.innerText, 'Hotel Feedback Form'); ``` Your `h1` element should be inside the `header` element. ```js const h1 = document.querySelector('h1'); -assert.strictEqual(h1.parentElement.tagName, 'HEADER'); +assert.strictEqual(h1?.parentElement.tagName, 'HEADER'); ``` You should have an opening `p` tag. @@ -71,14 +71,21 @@ Your paragraph element should have the text `Thank you for staying with us. Plea ```js const pElement = document.querySelector('header p'); -assert.strictEqual(pElement.innerText, 'Thank you for staying with us. Please provide feedback on your recent stay.'); +assert.strictEqual(pElement?.innerText, 'Thank you for staying with us. Please provide feedback on your recent stay.'); ``` Your paragraph element should be inside your `header`. ```js const pElement = document.querySelector('p'); -assert.strictEqual(pElement.parentElement.tagName, 'HEADER'); +assert.strictEqual(pElement?.parentElement.tagName, 'HEADER'); +``` + +Your paragraph element should come after your `h1`. + +```js +const pElement = document.querySelector('p'); +assert.strictEqual(pElement?.previousElementSibling.tagName, 'H1'); ``` @@ -94,9 +101,9 @@ assert.strictEqual(pElement.parentElement.tagName, 'HEADER'); Hotel Feedback Form - --fcc-editable-region-- +--fcc-editable-region-- - --fcc-editable-region-- +--fcc-editable-region-- ``` diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a83bdcf425e7446900b7c4.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a83bdcf425e7446900b7c4.md index 187555dc6e..a5fd6b48cc 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a83bdcf425e7446900b7c4.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a83bdcf425e7446900b7c4.md @@ -41,14 +41,14 @@ Your `form` element should have an `action` attribute set to `"https://hotel-fee ```js const formElement = document.querySelector('form'); -assert.strictEqual(formElement.getAttribute('action'), 'https://hotel-feedback.freecodecamp.org'); +assert.strictEqual(formElement?.getAttribute('action'), 'https://hotel-feedback.freecodecamp.org'); ``` Your `form` element should have a `method` attribute set to `"POST"`. ```js const formElement = document.querySelector('form'); -assert.strictEqual(formElement.getAttribute('method'), 'POST'); +assert.strictEqual(formElement?.getAttribute('method'), 'POST'); ``` # --seed-- diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a83e5e491625454b6f62c3.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a83e5e491625454b6f62c3.md index 13553c4188..f234278a11 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a83e5e491625454b6f62c3.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a83e5e491625454b6f62c3.md @@ -7,7 +7,7 @@ dashedName: step-7 # --description-- -Forms consist of `inputs` where users can input their data. You can group related inputs together using the fieldset element. +Forms consist of `inputs` where users can input their data. You can group related inputs together using the `fieldset` element. Here is an example of using a `fieldset` element: diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a83fec026a7a4631e084d2.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a83fec026a7a4631e084d2.md index 4d04800d98..cae6aecd0b 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a83fec026a7a4631e084d2.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a83fec026a7a4631e084d2.md @@ -7,7 +7,7 @@ dashedName: step-8 # --description-- -When working with `fieldset` elements, it is common to use a caption to describe the group of inputs. You can use the legend element for this. +When working with `fieldset` elements, it is common to use a caption to describe the group of inputs. You can use the `legend` element for this. Here is an example of using a `legend` element: @@ -46,7 +46,7 @@ Your `legend` element should contain the text `Personal Information`. ```js const legend = document.querySelector('fieldset legend'); -assert.strictEqual(legend.innerText, 'Personal Information'); +assert.strictEqual(legend?.innerText, 'Personal Information'); ``` # --seed-- diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a84111965a0c46df6bbd0a.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a84111965a0c46df6bbd0a.md index aa3271581f..9648931791 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a84111965a0c46df6bbd0a.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a84111965a0c46df6bbd0a.md @@ -16,7 +16,7 @@ In the previous lecture videos, you learned how to associate a `label` element w The `for` attribute on the `label` element should match the `id` attribute on the `input` element. This is known as an explicit association. -Below your `legend` element, add a `label` element with the text of `Name (required):`. For the `for` attribute, set it to the value of `"full-name"`. +Below your `legend` element, add a `label` element with the text of `Name (required):`. Set its `for` attribute to the value of `"full-name"`. Then below your `label` element, add an `input` element with no attributes. In the next steps, you will add the necessary attributes. @@ -34,30 +34,30 @@ You should have a closing `label` tag. assert.match(code, /<\/label>/); ``` -Your `label` element should be inside the `fieldset` element. +Your `label` element should be placed below your `legend` inside the `fieldset` element. ```js -assert.isNotNull(document.querySelector('fieldset label')); +assert.isNotNull(document.querySelector('fieldset legend + label')); ``` Your `label` element should have a `for` attribute with the value of `"full-name"`. ```js -const label = document.querySelector('fieldset label'); -assert.strictEqual(label.getAttribute('for'), 'full-name'); +const label = document.querySelector('fieldset legend + label'); +assert.strictEqual(label?.getAttribute('for'), 'full-name'); ``` Your `label` element should have the text of `Name (required):`. ```js -const label = document.querySelector('fieldset label'); -assert.strictEqual(label.innerText, 'Name (required):'); +const label = document.querySelector('fieldset legend + label'); +assert.strictEqual(label?.innerText, 'Name (required):'); ``` -You should have an `input` element. +You should have an `input` element below your `label` element. ```js -assert.isNotNull(document.querySelector('fieldset input')); +assert.isNotNull(document.querySelector('fieldset label + input')); ``` # --seed-- diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a930b20f589b6664c51cb0.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a930b20f589b6664c51cb0.md index 4d3d843b30..669f6a0923 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a930b20f589b6664c51cb0.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a930b20f589b6664c51cb0.md @@ -37,14 +37,14 @@ Your `input` element should have a `type` attribute with the value of `"text"`. ```js const input = document.querySelector('fieldset input'); -assert.strictEqual(input.getAttribute('type'), 'text'); +assert.strictEqual(input?.getAttribute('type'), 'text'); ``` Your `input` element should have an `id` attribute with the value of `"full-name"`. ```js const input = document.querySelector('fieldset input'); -assert.strictEqual(input.getAttribute('id'), 'full-name'); +assert.strictEqual(input?.getAttribute('id'), 'full-name'); ``` # --seed-- diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a93730719e1f68410cce54.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a93730719e1f68410cce54.md index 18f06cf3fa..4b1fd523b8 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a93730719e1f68410cce54.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a93730719e1f68410cce54.md @@ -35,7 +35,7 @@ Your `input` element should have a `name` attribute with the value of `"name"`. ```js const input = document.querySelector('fieldset input'); -assert.strictEqual(input.getAttribute('name'), 'name'); +assert.strictEqual(input?.getAttribute('name'), 'name'); ``` # --seed-- diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a937e74920ba68ebe5e86d.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a937e74920ba68ebe5e86d.md index 42f7d55d83..153b3ef947 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a937e74920ba68ebe5e86d.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a937e74920ba68ebe5e86d.md @@ -28,7 +28,7 @@ assert.isNotNull(document.querySelector('fieldset input')); Your `input` should have a `placeholder` attribute with the value of `"Ex. John Doe"`. ```js -assert.strictEqual(document.querySelector('fieldset input').getAttribute('placeholder'), 'Ex. John Doe'); +assert.strictEqual(document.querySelector('fieldset input')?.getAttribute('placeholder'), 'Ex. John Doe'); ``` Your `input` should have a `required` attribute. diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a93bbe65a26169dbf3bc39.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a93bbe65a26169dbf3bc39.md index f7237dc020..5d0dc250c7 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a93bbe65a26169dbf3bc39.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a93bbe65a26169dbf3bc39.md @@ -22,13 +22,13 @@ assert.strictEqual(document.querySelectorAll('fieldset label').length, 2); Your `label` element should have the text `Email address (required):`. ```js -assert.strictEqual(document.querySelector('fieldset label:nth-of-type(2)').innerText, 'Email address (required):'); +assert.strictEqual(document.querySelector('fieldset label:nth-of-type(2)')?.innerText, 'Email address (required):'); ``` Your `label` element should have a `for` attribute set to the value of `"email"`. ```js -assert.strictEqual(document.querySelector('fieldset label[for="email"]').getAttribute('for'), 'email'); +assert.strictEqual(document.querySelector('fieldset label[for="email"]')?.getAttribute('for'), 'email'); ``` # --seed-- @@ -56,9 +56,9 @@ assert.strictEqual(document.querySelector('fieldset label[for="email"]').getAttr Personal Information - --fcc-editable-region-- +--fcc-editable-region-- - --fcc-editable-region-- +--fcc-editable-region-- diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a93c95bc58e26a8fe95818.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a93c95bc58e26a8fe95818.md index 3c863ffb16..53904abd62 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a93c95bc58e26a8fe95818.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a93c95bc58e26a8fe95818.md @@ -7,7 +7,7 @@ dashedName: step-14 # --description-- -Next, add an `input` with the type of `"email"` to the form. This `input` should have an `id` attribute set to the value of `"email"`. Also, set the `name` attribute to the value of `"email"`. +Next, add an `input` with the type of `"email"` below your email `label`. This `input` should have an `id` attribute set to the value of `"email"`. Also, set the `name` attribute to the value of `"email"`. This `input` is also required, so make sure to add the `required` attribute. @@ -15,10 +15,10 @@ Finally, add a `placeholder` attribute set to `"example@email.com"`. # --hints-- -You should have an `input` element. +You should have an `input` element below your email `label`. ```js -assert.strictEqual(document.querySelectorAll('input').length, 2); +assert.isNotNull(document.querySelector('label[for="email"] + input')); ``` Your `input` element should have a `type` of `"email"`. @@ -42,13 +42,13 @@ assert.isNotNull(document.querySelector('input[name="email"]')); Your `input` element should have a `required` attribute. ```js -assert.strictEqual(document.querySelector('input#email').getAttribute('required'), ""); +assert.strictEqual(document.querySelector('input#email')?.getAttribute('required'), ""); ``` Your `input` element should have a `placeholder` attribute set to `"example@email.com"`. ```js -assert.strictEqual(document.querySelector('input#email').getAttribute('placeholder'), "example@email.com"); +assert.strictEqual(document.querySelector('input#email')?.getAttribute('placeholder'), "example@email.com"); ``` # --seed-- diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9401c9d660d6bb15993e2.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9401c9d660d6bb15993e2.md index 8b7bf973dc..1a4ead3f05 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9401c9d660d6bb15993e2.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9401c9d660d6bb15993e2.md @@ -30,7 +30,7 @@ assert.isNotNull(document.querySelector('label[for="age"]')); Your `label` element should have the text `Age (optional):`. ```js -assert.strictEqual(document.querySelector('label[for="age"]').textContent, "Age (optional):"); +assert.strictEqual(document.querySelector('label[for="age"]')?.textContent, "Age (optional):"); ``` # --seed-- @@ -67,9 +67,9 @@ assert.strictEqual(document.querySelector('label[for="age"]').textContent, "Age type="email" name="email" /> - --fcc-editable-region-- +--fcc-editable-region-- - --fcc-editable-region-- +--fcc-editable-region-- diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9419e2d18476c645ce693.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9419e2d18476c645ce693.md index 83e79e3d12..83221208c1 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9419e2d18476c645ce693.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9419e2d18476c645ce693.md @@ -23,34 +23,34 @@ The `name` attribute should be set to `"age"`, the `min` attribute should be set # --hints-- -You should have a number `input`. +You should have a number `input` below your `label` element. ```js -assert.isNotNull(document.querySelector('input[type="number"]')); +assert.isNotNull(document.querySelector('label + input[type="number"]')); ``` Your number `input` should have an `id` of `age`. ```js -assert.isNotNull(document.querySelector('input#age')); +assert.isNotNull(document.querySelector('label + input#age')); ``` Your number `input` should have a `name` attribute set to `age`. ```js -assert.isNotNull(document.querySelector('input[name="age"]')); +assert.isNotNull(document.querySelector('label + input[name="age"]')); ``` Your number `input` should have a `min` attribute set to `"3"`. ```js -assert.isNotNull(document.querySelector('input[min="3"]')); +assert.isNotNull(document.querySelector('label + input[min="3"]')); ``` Your number `input` should have a `max` attribute set to `"100"`. ```js -assert.isNotNull(document.querySelector('input[max="100"]')); +assert.isNotNull(document.querySelector('label + input[max="100"]')); ``` # --seed-- diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a94ea5df66236ebed260e8.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a94ea5df66236ebed260e8.md index c77341470d..516d5dcefb 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a94ea5df66236ebed260e8.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a94ea5df66236ebed260e8.md @@ -24,13 +24,13 @@ assert.strictEqual(document.querySelectorAll('fieldset').length, 2); You should have a `legend` element inside of your `fieldset` element. ```js -assert.strictEqual(document.querySelectorAll('legend').length, 2); +assert.strictEqual(document.querySelectorAll('fieldset legend').length, 2); ``` Your `legend` element should have the text of `Was this your first time at our hotel?`. ```js -assert.strictEqual(document.querySelectorAll('legend')[1].textContent, 'Was this your first time at our hotel?'); +assert.strictEqual(document.querySelectorAll('fieldset legend')[1]?.textContent, 'Was this your first time at our hotel?'); ``` # --seed-- diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9521bc70162712caf118d.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9521bc70162712caf118d.md index 16a65dcef4..e9c1e6b988 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9521bc70162712caf118d.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9521bc70162712caf118d.md @@ -26,40 +26,40 @@ Below your `label` element, add a `radio` button with the `id` set to `"yes-opti # --hints-- -You should have a `label` element inside your `fieldset` element. +You should have a `label` element below your `legend` element. ```js -assert(document.querySelector('fieldset:nth-of-type(2) label')); +assert(document.querySelector('fieldset:nth-of-type(2) legend + label')); ``` Your `label` element should have a `for` attribute set to `"yes-option"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label').htmlFor, 'yes-option'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) legend + label')?.htmlFor, 'yes-option'); ``` Your `label` element should have the text `Yes`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label').innerText, 'Yes'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) legend + label')?.innerText, 'Yes'); ``` -You should have a `radio` button inside your `fieldset` element. +You should have a `radio` button below your `label` element. ```js -assert(document.querySelector('fieldset:nth-of-type(2) input[type="radio"]')); +assert(document.querySelector('fieldset:nth-of-type(2) label + input[type="radio"]')); ``` Your `radio` button should have an `id` attribute set to `"yes-option"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input[type="radio"]').id, 'yes-option'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input[type="radio"]')?.id, 'yes-option'); ``` Your `radio` button should have a `name` attribute set to `"hotel-stay"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input[type="radio"]').name, 'hotel-stay'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input[type="radio"]')?.name, 'hotel-stay'); ``` # --seed-- diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a954b2bcddba72076c1857.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a954b2bcddba72076c1857.md index da181eb352..e51bbc1690 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a954b2bcddba72076c1857.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a954b2bcddba72076c1857.md @@ -15,46 +15,46 @@ When you are finished, you can now try out the radio buttons by selecting one op # --hints-- -You should have a `label` element inside your `fieldset` element. +You should have a `label` element below your first radio button. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(2) label').length, 2); +assert.isNotNull(document.querySelector('fieldset:nth-of-type(2) input[type="radio"] + label')); ``` Your `label` should have a `for` attribute set to `"no-option"`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(2) label[for="no-option"]').length, 1); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input[type="radio"] + label')?.htmlFor, "no-option"); ``` Your `label` should have the text of `No`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label[for="no-option"]').textContent, 'No'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input[type="radio"] + label[for="no-option"]')?.textContent, 'No'); ``` -You should have a second `input` inside your `fieldset` element. +You should have a second `input` below your second `label` element. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(2) input').length, 2); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(2) label + input').length, 2); ``` Your `input` should have a `type` of `radio`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input:nth-of-type(2)').getAttribute('type'), 'radio'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input:nth-of-type(2)')?.getAttribute('type'), 'radio'); ``` Your `input` should have an `id` of `"no-option"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input:nth-of-type(2)').id, 'no-option'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input:nth-of-type(2)')?.id, 'no-option'); ``` Your `input` should have a `name` of `"hotel-stay"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input:nth-of-type(2)').name, 'hotel-stay'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input:nth-of-type(2)')?.name, 'hotel-stay'); ``` # --seed-- diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9577022877d72d8f43b4f.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9577022877d72d8f43b4f.md index 841aa7d79b..39fd3c8cf5 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9577022877d72d8f43b4f.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9577022877d72d8f43b4f.md @@ -30,7 +30,7 @@ assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) legend').l Your `legend` element should have the text of `Why did you choose to stay at our hotel? (Check all that apply)`. Double check for spelling errors and spacing issues. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) legend').innerText, 'Why did you choose to stay at our hotel? (Check all that apply)'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) legend')?.innerText, 'Why did you choose to stay at our hotel? (Check all that apply)'); ``` # --seed-- diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a95d0eff8168747805f1f3.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a95d0eff8168747805f1f3.md index 1ea82bd783..ba63705b21 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a95d0eff8168747805f1f3.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a95d0eff8168747805f1f3.md @@ -29,47 +29,47 @@ Below your `label` element, add a checkbox input with the `id`, `name` and `valu # --hints-- -You should have a `label` element inside your `fieldset`. +You should have a `label` element below your `legend`. ```js -assert(document.querySelector("fieldset:nth-of-type(3) label")); +assert(document.querySelector("fieldset:nth-of-type(3) legend + label")); ``` Your `label` element should have the text of `Social Media Ads`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label").textContent, "Social Media Ads"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) legend + label")?.textContent, "Social Media Ads"); ``` Your `label` element should have a `for` attribute set to `"ads"`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label").getAttribute("for"), "ads"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) legend + label")?.getAttribute("for"), "ads"); ``` -You should have a checkbox `input` inside your `fieldset`. +You should have a checkbox `input` below your `label`. ```js -const inputElement = document.querySelector("fieldset:nth-of-type(3) input[type='checkbox']"); -assert.strictEqual(inputElement.parentElement.tagName, "FIELDSET"); +const inputElement = document.querySelector("fieldset:nth-of-type(3) label + input[type='checkbox']"); +assert.strictEqual(inputElement?.parentElement.tagName, "FIELDSET"); ``` Your checkbox should have an `id` attribute set to `"ads"`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input[type='checkbox']").id, "ads"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input[type='checkbox']")?.id, "ads"); ``` Your checkbox should have a `name` attribute set to `"ads"`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input[type='checkbox']").name, "ads"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input[type='checkbox']")?.name, "ads"); ``` Your checkbox should have a `value` attribute set to `"ads"`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input[type='checkbox']").value, "ads"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input[type='checkbox']")?.value, "ads"); ``` # --seed-- diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a96127422411756204bc1b.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a96127422411756204bc1b.md index a199c6f2f6..088c4b67b7 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a96127422411756204bc1b.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a96127422411756204bc1b.md @@ -13,46 +13,46 @@ Below the `label` element, add another checkbox `input` with the `id`, `name` an # --hints-- -You should have a `label` element. +You should have a `label` element below your checkbox. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label").length, 2); +assert.isNotNull(document.querySelector('fieldset:nth-of-type(3) input[type="checkbox"] + label')); ``` Your `label` element should have the text of `Personal Recommendation`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label")[1].textContent, "Personal Recommendation"); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[type="checkbox"] + label')?.textContent, "Personal Recommendation"); ``` Your `label` element should have a `for` attribute set to `"recommendation"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label")[1].getAttribute("for"), "recommendation"); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[type="checkbox"] + label')?.getAttribute("for"), "recommendation"); ``` -You should have a checkbox `input`. +You should have a checkbox `input` below your `label`. ```js -assert(document.querySelector("fieldset:nth-of-type(3) input:nth-of-type(2)[type='checkbox']")); +assert(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(2)[type='checkbox']")); ``` Your checkbox should have an `id` set to `"recommendation"`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input:nth-of-type(2)[type='checkbox']").id, "recommendation"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(2)[type='checkbox']")?.id, "recommendation"); ``` Your checkbox should have a `name` attribute set to `"recommendation"`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input:nth-of-type(2)[type='checkbox']").name, "recommendation"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(2)[type='checkbox']")?.name, "recommendation"); ``` Your checkbox should have a `value` attribute set to `"recommendation"`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input:nth-of-type(2)[type='checkbox']").value, "recommendation"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(2)[type='checkbox']")?.value, "recommendation"); ``` # --seed-- diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a962954f4e0d76223b37ed.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a962954f4e0d76223b37ed.md index b1d68111d6..244ab4be7c 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a962954f4e0d76223b37ed.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a962954f4e0d76223b37ed.md @@ -20,73 +20,73 @@ For the checkbox `input`, both the `id`, `name` and `value` attributes should be You should have a `label` element with the text of `Location`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[2].textContent, 'Location'); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[2]?.textContent, 'Location'); ``` Your `label` should have the `for` attribute set to `"location"`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[2].getAttribute('for'), 'location'); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[2]?.getAttribute('for'), 'location'); ``` -You should have a third checkbox `input`. +You should have a third checkbox `input` after your `label`. ```js -assert(document.querySelector("fieldset:nth-of-type(3) input:nth-of-type(3)[type='checkbox']")); +assert(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(3)[type='checkbox']")); ``` Your third checkbox input should have an `id` set to `"location"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[2].getAttribute('id'), 'location'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[2]?.getAttribute('id'), 'location'); ``` Your third checkbox should have a `name` of `"location"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[2].getAttribute('name'), 'location'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[2]?.getAttribute('name'), 'location'); ``` Your third checkbox should have a `value` of `"location"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[2].getAttribute('value'), 'location'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[2]?.getAttribute('value'), 'location'); ``` -You should have a `label` element with the text of `Reputation`. +You should have a `label` element with the text of `Reputation` below the location checkbox. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[3].textContent, 'Reputation'); +assert.isNotNull(document.querySelectorAll('fieldset:nth-of-type(3) input[value="location"] + label')?.textContent, 'Reputation'); ``` Your `label` should have the `for` attribute set to `"reputation"`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[3].getAttribute('for'), 'reputation'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[value="location"] + label')?.getAttribute('for'), 'reputation'); ``` -You should have a fourth checkbox `input`. +You should have a fourth checkbox `input` below your `label`. ```js -assert(document.querySelector("fieldset:nth-of-type(3) input:nth-of-type(4)[type='checkbox']")); +assert(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(4)[type='checkbox']")); ``` You should have a fourth checkbox `input` with an `id` of `"reputation"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[3].getAttribute('id'), 'reputation'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[3]?.getAttribute('id'), 'reputation'); ``` Your fourth checkbox should have a `name` of `"reputation"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[3].getAttribute('name'), 'reputation'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[3]?.getAttribute('name'), 'reputation'); ``` Your fourth checkbox should have a `value` of `"reputation"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[3].getAttribute('value'), 'reputation'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[3]?.getAttribute('value'), 'reputation'); ``` # --seed-- diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9689b1bf24b7750898a1b.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9689b1bf24b7750898a1b.md index c542706973..5165168177 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9689b1bf24b7750898a1b.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9689b1bf24b7750898a1b.md @@ -18,37 +18,37 @@ Now you can test out your `form` by selecting the various checkboxes. You should have a `label` element with the text of `Price`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[4].textContent, 'Price'); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[4]?.textContent, 'Price'); ``` Your `label` should have the `for` attribute set to `"price"`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[4].getAttribute('for'), 'price'); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[4]?.getAttribute('for'), 'price'); ``` -You should have a fifth checkbox `input`. +You should have a fifth checkbox `input` below your `label`. ```js -assert(document.querySelector("fieldset:nth-of-type(3) input:nth-of-type(5)[type='checkbox']")); +assert(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(5)[type='checkbox']")); ``` You should have a checkbox input with an `id` of `"price"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[4].getAttribute('id'), 'price'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[4]?.getAttribute('id'), 'price'); ``` You should have a checkbox input with a `name` of `"price"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[4].getAttribute('name'), 'price'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[4]?.getAttribute('name'), 'price'); ``` Your checkbox input should have a `value` of `"price"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[4].getAttribute('value'), 'price'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[4]?.getAttribute('value'), 'price'); ``` # --seed-- diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a969951120be7818d8ee49.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a969951120be7818d8ee49.md index e2bdc99695..7f0d62fc3b 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a969951120be7818d8ee49.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a969951120be7818d8ee49.md @@ -30,25 +30,25 @@ assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend').l Your legend should have the text `Ratings`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend')[0].textContent, 'Ratings'); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend')[0]?.textContent, 'Ratings'); ``` -Your `fieldset` should have a `label` element. +Your `fieldset` should have a `label` element below the `legend`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) label').length, 1); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend + label').length, 1); ``` Your `label` should have the text `How was the service?`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) label')[0].textContent, 'How was the service?'); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend + label')[0]?.textContent, 'How was the service?'); ``` Your `label` should have the `for` attribute set to `"service"`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) label')[0].getAttribute('for'), 'service'); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend + label')[0]?.getAttribute('for'), 'service'); ``` # --seed-- diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a96b01f33ef178dfca9e42.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a96b01f33ef178dfca9e42.md index e00c308e15..8aefea04d4 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a96b01f33ef178dfca9e42.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a96b01f33ef178dfca9e42.md @@ -7,7 +7,7 @@ dashedName: step-27 # --description-- -When you want users to make selections from a dropdown menu, you can use the select and option elements. +When you want users to make selections from a dropdown menu, you can use the `select` and `option` elements. Here is an example of using the `select` and `option` elements to create a dropdown for different cities: diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a972137acd1179fa3fe8a0.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a972137acd1179fa3fe8a0.md index e5a4b516bf..3f0f3b6410 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a972137acd1179fa3fe8a0.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a972137acd1179fa3fe8a0.md @@ -36,7 +36,7 @@ assert(document.querySelector('option[value="poor"]')); Your `option` element with the `value` of `"poor"` should have the text `Poor`. ```js -assert.strictEqual(document.querySelector('option[value="poor"]').textContent, 'Poor'); +assert.strictEqual(document.querySelector('option[value="poor"]')?.textContent, 'Poor'); ``` You should have an `option` element with the `value` set to `"satisfactory"`. @@ -48,7 +48,7 @@ assert(document.querySelector('option[value="satisfactory"]')); Your `option` element with the `value` of `"satisfactory"` should have the text `Satisfactory`. ```js -assert.strictEqual(document.querySelector('option[value="satisfactory"]').textContent, 'Satisfactory'); +assert.strictEqual(document.querySelector('option[value="satisfactory"]')?.textContent, 'Satisfactory'); ``` You should have an `option` element with the `value` set to `"good"`. @@ -61,7 +61,7 @@ Your `option` element with the `value` of `"good"` should have the text `Good`. ```js -assert.strictEqual(document.querySelector('option[value="good"]').textContent, 'Good'); +assert.strictEqual(document.querySelector('option[value="good"]')?.textContent, 'Good'); ``` You should have an `option` element with the value set to `"very-good"`. @@ -73,7 +73,7 @@ assert(document.querySelector('option[value="very-good"]')); Your `option` element with the `value` of `"very-good"` should have the text `Very Good`. ```js -assert.strictEqual(document.querySelector('option[value="very-good"]').textContent, 'Very Good'); +assert.strictEqual(document.querySelector('option[value="very-good"]')?.textContent, 'Very Good'); ``` You should have an `option` element with the value set to `"excellent"`. @@ -86,7 +86,7 @@ Your `option` element with the `value` of `"excellent"` should have the text `Ex ```js -assert.strictEqual(document.querySelector('option[value="excellent"]').textContent, 'Excellent'); +assert.strictEqual(document.querySelector('option[value="excellent"]')?.textContent, 'Excellent'); ``` # --seed-- diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a975c259525b7bc2d5c776.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a975c259525b7bc2d5c776.md index eea5aeddc9..ace80b2a3e 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a975c259525b7bc2d5c776.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a975c259525b7bc2d5c776.md @@ -24,19 +24,19 @@ assert(document.querySelector('label[for="food"]')); Your `label` should have the text `How was the food?`. ```js -assert.strictEqual(document.querySelector('label[for="food"]').textContent, 'How was the food?'); +assert.strictEqual(document.querySelector('label[for="food"]')?.textContent, 'How was the food?'); ``` -You should have a `select` element with the `id` set to `"food"`. +You should have a `select` element with the `id` set to `"food"` below your `label`. ```js -assert(document.querySelector('select#food')); +assert(document.querySelector('label + select#food')); ``` Your `select` element should have the `name` attribute set to `"food"`. ```js -assert(document.querySelector('select[name="food"]')); +assert(document.querySelector('label + select[name="food"]')); ``` # --seed-- diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a97ca8c4cbae7d0bb6e0ad.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a97ca8c4cbae7d0bb6e0ad.md index d532b91850..5ebfc2a181 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a97ca8c4cbae7d0bb6e0ad.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a97ca8c4cbae7d0bb6e0ad.md @@ -39,7 +39,7 @@ assert(document.querySelector('fieldset:nth-of-type(4) select#food option[value= Your `option` with the `value` of `"poor"` should have the text `"Poor"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="poor"]').textContent, 'Poor'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="poor"]')?.textContent, 'Poor'); ``` You should have an `option` element with the `value` set to `"satisfactory"`. @@ -51,7 +51,7 @@ assert(document.querySelector('fieldset:nth-of-type(4) select#food option[value= Your `option` with the `value` of `"satisfactory"` should have the text `"Satisfactory"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="satisfactory"]').textContent, 'Satisfactory'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="satisfactory"]')?.textContent, 'Satisfactory'); ``` You should have an `option` element with the `value` set to `"good"`. @@ -64,7 +64,7 @@ Your `option` with the `value` of `"good"` should have the text `"Good"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="good"]').textContent, 'Good'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="good"]')?.textContent, 'Good'); ``` You should have an `option` element with the value set to `"very-good"`. @@ -76,7 +76,7 @@ assert(document.querySelector('fieldset:nth-of-type(4) select#food option[value= Your `option` with the `value` of `"very-good"` should have the text `"Very Good"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="very-good"]').textContent, 'Very Good'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="very-good"]')?.textContent, 'Very Good'); ``` You should have an `option` element with the value set to `"excellent"`. @@ -89,7 +89,7 @@ Your `option` with the `value` of `"excellent"` should have the text `"Excellent ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="excellent"]').textContent, 'Excellent'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="excellent"]')?.textContent, 'Excellent'); ``` You should have an `option` element with the `selected` attribute set to `"excellent"`. diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a97f40ddd40d7deb0618b7.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a97f40ddd40d7deb0618b7.md index c8ebe9f23f..5be1d42402 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a97f40ddd40d7deb0618b7.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a97f40ddd40d7deb0618b7.md @@ -22,7 +22,7 @@ assert(document.querySelector('label[for="comments"]')); Your `label` should have the text `Other Comments?`. ```js -assert.strictEqual(document.querySelector('label[for="comments"]').textContent, 'Other Comments?'); +assert.strictEqual(document.querySelector('label[for="comments"]')?.textContent, 'Other Comments?'); ``` # --seed-- diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9824ac5d9f77ec304969f.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9824ac5d9f77ec304969f.md index 317659b62e..31926bf3d6 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9824ac5d9f77ec304969f.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9824ac5d9f77ec304969f.md @@ -7,7 +7,7 @@ dashedName: step-33 # --description-- -If you want users to have more space to write their comments, you can use a textarea element. +If you want users to have more space to write their comments, you can use a `textarea` element. The `textarea` element is a multi-line text input control that allows users to enter text that is longer than a single line. It can be used to create a comment box, a message input, or other text input that requires multiple lines. @@ -23,10 +23,10 @@ Below your `label` element, add a `textarea` element. In the next step, you will # --hints-- -You should have a `textarea` element inside your form. +You should have a `textarea` element below your label. ```js -assert(document.querySelector('form textarea')); +assert(document.querySelector('label + textarea')); ``` # --seed-- @@ -131,9 +131,8 @@ assert(document.querySelector('form textarea')); - - --fcc-editable-region-- + --fcc-editable-region-- diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9843525e9fa8046d709b7.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9843525e9fa8046d709b7.md index a0b6123339..6e1b408d38 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9843525e9fa8046d709b7.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9843525e9fa8046d709b7.md @@ -32,7 +32,7 @@ assert(document.querySelector('button[type="submit"]')); Your button should have the text content of `Submit`. ```js -assert.strictEqual(document.querySelector('button').textContent, 'Submit'); +assert.strictEqual(document.querySelector('button')?.textContent, 'Submit'); ``` # --seed-- diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md b/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md index 233026de48..ac61da05b2 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md @@ -9,7 +9,7 @@ dashedName: step-18 To finish the project, you'll need to run the `updateResultsList` function when the recipe form is submitted. -Use an event listener to do so, and remember that you'll need to prevent the default behaviour (or the page will refresh). +Use an event listener to do so, and remember that you'll need to prevent the default behavior (or the page will refresh). Once that's done, take some time to experiment with different values in the form before moving on to the next module. diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md b/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md index 408895d618..77e052536f 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md @@ -9,7 +9,7 @@ dashedName: step-6 A third `recipe3` object has been filled in for you. It has the same properties as `recipe1` and `recipe2`. -You should now push the three objects into the `recipes` array. To do thus, you can use the `push()` method. +You should now push the three objects into the `recipes` array. To do this, you can use the `push()` method. Use the `push()` method to push all the recipe objects into the `recipes` array. Make sure to push `recipe1`, `recipe2`, and `recipe3` in that order. diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-mega-navbar/6740495ba48aa94e5667b436.md b/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-mega-navbar/6740495ba48aa94e5667b436.md index 2e0e0fd742..1b7a8867a4 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-mega-navbar/6740495ba48aa94e5667b436.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-mega-navbar/6740495ba48aa94e5667b436.md @@ -8,7 +8,7 @@ demoType: onLoad # --description-- -In this workshop, you will practice working with React functional components by building a resuable navbar. +In this workshop, you will practice working with React functional components by building a reusable navbar. All the CSS have been provided for you so you can focus on creating the navbar. diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-shopping-cart/63effe558c87a70e7072e447.md b/curriculum/challenges/chinese/25-front-end-development/workshop-shopping-cart/63effe558c87a70e7072e447.md index bff342d205..c355e87360 100644 --- a/curriculum/challenges/chinese/25-front-end-development/workshop-shopping-cart/63effe558c87a70e7072e447.md +++ b/curriculum/challenges/chinese/25-front-end-development/workshop-shopping-cart/63effe558c87a70e7072e447.md @@ -7,7 +7,7 @@ dashedName: step-27 # --description-- -The behaviour of the `addItem` method needs to change if the product is already in the cart or not. Create a ternary that checks if the current product is already in the cart. Use `undefined` for both the truthy and falsy expressions to avoid a syntax error. +The behavior of the `addItem` method needs to change if the product is already in the cart or not. Create a ternary that checks if the current product is already in the cart. Use `undefined` for both the truthy and falsy expressions to avoid a syntax error. # --hints-- diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md index 693b548dd5..77ef706860 100644 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md +++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md @@ -9,7 +9,7 @@ dashedName: step-29 The code for an ordered list (`ol`) is similar to an unordered list, but list items in an ordered list are numbered when displayed. -Baada ya kipengele cha pili cha `section` cha `h3` cha mwisho, ongeza orodha iliyopangwa na orodha hizi tatu: +Below the `h3` element, add an ordered list with these three list items: `flea treatment` `thunder` `other cats` diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a46e84a0ad845901ea907.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a46e84a0ad845901ea907.md index 4003df9904..717d988dcc 100644 --- a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a46e84a0ad845901ea907.md +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a46e84a0ad845901ea907.md @@ -13,15 +13,17 @@ To `experiment` means to try new ideas or methods. An `interview` is a conversation where someone asks questions to get information. -An `infographic` is a visual image like a chart or diagram used to represent information. For example: +An `infographic` is a visual image like a chart or diagram used to represent information. `Readers` are people who read, especially those who read a particular publication. -`We experiment with new teaching methods` (trying new ideas) +For example: -`The journalist conducts interviews with her readers` (conversation for information) +* `We experiment with new teaching methods.` (trying new ideas) -`They use infographics to explain data` (visual images for information) +* `The journalist conducts interviews with her readers.` (conversation for information) + +* `They use infographics to explain data.` (visual images for information) # --fillInTheBlank-- diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556bc95e6ce5d850d37dd07.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556bc95e6ce5d850d37dd07.md index 183dddda2f..903686e319 100644 --- a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556bc95e6ce5d850d37dd07.md +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556bc95e6ce5d850d37dd07.md @@ -7,24 +7,23 @@ dashedName: task-3 # --description-- -Adjectives are words that describe or give more information about nouns or pronouns. For example, in the phrase `the blue sky`, `blue` is an adjective describing the sky. +Adjectives describe or provide more information about nouns or pronouns. They usually come before the noun they modify. For example: -Notice how the adjective comes before the noun. It is `blue sky` not `sky blue`. +- `The blue sky` - Here, `blue` is an adjective describing the noun `sky`. Notice how the adjective `blue` comes before the noun. -Expressive language can include idiomatic expressions or descriptive adjectives to communicate strong feelings or vivid ideas, like saying `sparkling eyes` to describe someone's bright, lively eyes. +- `She enjoys early mornings.` - The adjective `early` describes the type of mornings she enjoys. -Instead of saying `It seems like you have a ton of energy this morning`, James could say something like `You look energetic this morning` to convey the same idea. `Energetic` is the adjective to represent someone who has a lot of energy. +- `He has a quick shower in the morning.` - The adjective `quick` describes how short the shower is. -Here are some more examples: +Adjectives can also make language more expressive by giving details about a person, place, or thing. For example: -* `She wakes up early every day` - `Early` describes the time of her waking up. -* `He has a quick shower in the morning` - `Quick` describes the short duration of the shower. +Instead of saying `It seems like you have a lot of energy this morning`, you could say `You look energetic this morning`. Here, the adjective `energetic` is more concise and expressive, showing that someone has a lot of energy in a positive way. # --questions-- ## --text-- -What does the adjective `energetic` imply about someone? +In the sentence `You look energetic this morning`, what does `energetic` suggest about the person? ## --answers-- @@ -32,7 +31,7 @@ That the person is feeling unwell. ### --feedback-- -`Energetic` is generally used to express a positive feeling about a person, not that they are feeling unwell.. +Does `energetic` usually describe someone who feels negative or unwell? Think about how we use it to describe someone's energy level. --- @@ -44,7 +43,7 @@ That the person is uncomfortable. ### --feedback-- -`Energetic` is generally used to express how dynamic the person looks, not how comfortable they are. +Does `energetic` describe someone's comfort level, or does it describe something more related to activity or energy? --- @@ -52,7 +51,7 @@ That the person is late. ### --feedback-- -The adjective `energetic` does not relate to time or punctuality. +Does `energetic` have any connection to time or being late? Reflect on its meaning in the description. ## --video-solution-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md b/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md index 37a474eeaf..1154df0acb 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md @@ -2,7 +2,7 @@ id: 6708396caa00e11b597b3365 title: What Is the Role of Open Graph Tags, and How Do They Affect SEO? challengeType: 11 -videoId: 94IAhyEfO8I +videoId: Bat8HyGzkU8 dashedName: what-is-the-role-of-open-graph-tags --- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/67298243760ae980de5266db.md b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/67298243760ae980de5266db.md index 5036e40439..1c59e6c104 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/67298243760ae980de5266db.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/67298243760ae980de5266db.md @@ -10,6 +10,27 @@ dashedName: why-should-you-care-about-semantic-html Watch the lecture video and answer the questions below. +# --transcript-- + +Why should you care about semantic HTML? + +Semantics are the meaning of words, or phrases, in a language. In HTML, which is a language, elements have their own semantic meaning too. In fact, you can think of your HTML document like you would a text document. And much like a text document, you might have headings, images, bold text, and other formatting. + +The semantic meaning of an element refers to what special information that element conveys. The semantic meaning of a `p` element, for example, is a paragraph of text: + +```html +

+ Let me tell you about my fantastic holiday in Paris. + I saw the impressive Eiffel Tower up close! +

+``` + +Most elements have semantic meaning. The `div` element is one of the very few that does not. But why is this important? + +First and foremost, using proper semantic HTML will ensure the best experience for users with assistive technology like screen readers. But also, semantic HTML can improve your search rankings. This is referred to as search engine optimization, or SEO. + +Finally, using correct semantic elements can improve your development experience. Rather than having to sift through a bunch of developments to find your navigation bar, you can edit the `nav` element directly and know what you're changing. Throughout this section, you will learn more about these topics, how to use semantic elements, and why semantic HTML is so important. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md index 9d0fab401d..9e9b61316c 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md @@ -10,6 +10,61 @@ dashedName: why-is-it-important-to-have-good-structural-hierarchy Watch the lecture video and answer the questions below. +# --transcript-- + +Why is it important to have good structural hierarchy? + +The most important aspect of creating a structural hierarchy is the proper use of heading elements. Heading elements are numbered as `h1`, `h2`, `h3`, and so on. These numbers represent the heading level for that element. + +Much like a text document, you do not want to use heading levels in the incorrect order. Your `h1` element is your top-level heading. You will rarely have more than one of these on a page, and it should typically come before all of your content. + +Your `h2` element is your subheading. It should always come after your `h1` and might come after some introductory text. Unlike an `h1` element, you can have multiple `h2` elements on your page. You'll often do this to delineate different sections of content. + +Following the pattern, your `h3` element should always come after an `h2` element. That is, you should never skip directly from `h1` to `h3`. You can, however, have multiple heading elements at the same level. For example, this code is correct: + +```html +
+
+

freeCodeCamp

+

Learn Front-End Development

+

Learn Back-End Development

+
+
+``` + +But this code would not be correct, because `h3` comes before `h2`: + +```html +
+
+

freeCodeCamp

+

Learn Front-End Development

+

Learn Back-End Development

+
+
+``` + +It may be tempting to use a specific heading element because of its styling, such as `h1` for large text: + +```html +
+

+ Here is some +

Large Text

+

+
+``` + +Instead, you should choose the appropriate element for your document structure and use CSS to achieve the styling you'd like. + +Using the right hierarchy is important for accessibility. Assistive technologies, like screen readers, rely on the structure of a web page to determine how to pause and announce that web page to the user. Using an `h3` element after an `h1` might cause a screen reader user to believe they have accidentally skipped over important content, due to the lack of an `h2` element. + +Proper structure is also important for SEO. Search engines use automation to pause the content of your web page and determine when and where it should show up in results. If your structure is malformed, search engines may not be able to rank you very well in the relevant search results. + +Finally, depending on how incorrect your structure is, your HTML may not even be technically valid. When this happens, the web browser has to effectively guess what you meant to do. And what it guesses might not even be what you want at all. + +As you have learned today, there are many reasons to use the proper structural hierarchy for your page. Keep this in mind as you build new projects. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672990ecf71a852804ababe7.md b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672990ecf71a852804ababe7.md index 345a4ca8af..c511a7c4e5 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672990ecf71a852804ababe7.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672990ecf71a852804ababe7.md @@ -10,6 +10,77 @@ dashedName: what-is-the-difference-between-presentational-and-semantic-html Watch the lecture video and answer the questions below. +# --transcript-- + +What's the difference between presentational and semantic HTML? + +Presentational HTML focuses on the appearance and style of the content. In the early days of HTML, developers would use elements like the `center`, `big`, and `font` elements. But in modern web development you shouldn't use these types of elements, because of their limitations and negative impact on accessibility and maintainability. + +Many presentational HTML elements are deprecated, which means that they are outdated and no longer recommended. There are better ways to get the same results. However, it is helpful to know that they exist, so we'll take a look at some examples. + +The `font` element is a deprecated element used to set the font size and color of the text. Here's an example of a `font` element: + +```html +This text is blue and large. +``` + +This example sets the color of the text to `blue` and the size to a value of `5`. The range for the `size` attribute is from `1` to `7`, with `1` being the smallest and `7` being the largest. The default value is `3`, if you don't set the value explicitly. + +While this element still works, you should not use it because the font size and color should always be set in CSS, not in HTML. + +The `center` element is another deprecated element that is used to center the content horizontally within its container. Here's an example of the `center` element that contains text and a paragraph element: + +```html +
+ This text is centered. +

HTML is awesome.

+
+``` + +In the browser, you would see all of the content within the `center` element centered horizontally. + +And next, we have the `big` element. This is another deprecated presentational HTML element that makes the enclosed text one level bigger than its surrounding text. Here we have an example that defines a paragraph with two parts: + +```html +

+ This text has a normal font size. + This text is larger. +

+``` + +The first part has normal sized text, while the second part enclosed within the `big` element will be displayed in a larger font size. In the browser, you would see the text within the `big` element looks larger compared to the surrounding text. + +However, remember that font size should always be set with CSS, so you should not use this element in modern HTML. + +These were examples of presentational HTML elements. But all of them are deprecated and no longer recommended. So what should you use instead? Let's see. + +Semantic HTML is now the recommended practice. It describes the content of the elements, so it's much easier to read, understand, and maintain. + +Search engines can easily understand your website when you use semantic HTML. It's also helpful for accessibility purposes, because screen readers need semantic information to describe what's on the web page. + +Examples of semantic HTML elements include: + +- The `header` element for defining the header of the document, or section. +- The navigation section element, `nav`, for sections with navigation links. +- The `section` element for grouping related information. +- The `figure` element for illustrations and diagrams. + +This is an example of a `header` element that contains a navigation section element: + +```html +
+ +
+``` + +The semantic elements clearly show their purpose within the HTML structure. There are many different semantic HTML elements. You will definitely find one that fits the needs of your project. + +Great work. Now you know the difference between presentational and semantic HTML: semantic HTML describes the content, while presentational HTML focuses on the appearance. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/6729959bf9c8e835f46b3f78.md b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/6729959bf9c8e835f46b3f78.md index e9ee54a2a9..8ee7ed00f6 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/6729959bf9c8e835f46b3f78.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/6729959bf9c8e835f46b3f78.md @@ -10,6 +10,36 @@ dashedName: when-should-you-use-the-emphasis-element-over-the-idiomatic-text-ele Watch the lecture video and answer the questions below. +# --transcript-- + +When should you use the emphasis element over the idiomatic text element? + +These elements are very closely related to the concepts of presentational and semantic HTML. The idiomatic text element, `i`, was originally used for presentational purposes to display the text in italics. But now, it is frequently used for highlighting alternative voice or mood, idiomatic terms from another language, technical terms, and thoughts. + +Here is example from the official HTML spec, using the `i` element to show an idiomatic phrase in French: + +```html +

There is a certain je ne sais quoi in the air.

+``` + +The `lang` attribute inside the open `` tag is used to specify the language of the content. In this case, the language would be French. The `i` element does not indicate if the text is important or not, it only shows that it's somehow different from the surrounding text. + +If you do need to emphasize the importance of the text, you can use a similar semantic element called the emphasis element, `em`. This is usually recommended if you need to provide more context. You should use this element for parts of the text that require a special emphasis compared to surrounding text. It's usually limited to only a few words, because it can alter the meaning of the sentence. + +This is an example of the emphasis element within a paragraph: + +```html +

+ Never give up on your dreams. +

+``` + +You can see the sentence `Never give up on your dreams`. Notice that the word `your` will be emphasized, because it's inside this element. In the browser you would see the word `your` is italicized to tell readers that this is an important word in the sentence. + +Even if it looks the same when the text was inside the idiomatic text element, the semantic emphasis element conveys its meaning and importance behind the scenes. + +It's important to know that these elements should not be used for presentational purposes only. If you need to display the text in italics, but the text doesn't have a special purpose, style, or meaning in the paragraph, you should use CSS instead. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995ac85fd943657c2ede5.md b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995ac85fd943657c2ede5.md index dace91f968..e151885c2d 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995ac85fd943657c2ede5.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995ac85fd943657c2ede5.md @@ -10,6 +10,39 @@ dashedName: when-should-you-use-the-strong-element-over-the-bring-attention-to-e Watch the lecture video and answer the questions below. +# --transcript-- + +When should you use the `strong` element over the "bring attention to" element? + +The "bring attention to" element, `b`, is commonly used to highlight keywords in summaries, or product names in reviews. Usually, browsers display this text in boldface. Here's an example using the `b` element to highlight product names in this review: + +```html +

+ We tested several products, including the SuperSound 3000 for audio + quality, the QuickCharge Pro for fast charging, and the + EcoClean Vacuum for cleaning. The first two performed well, but the + EcoClean Vacuum did not meet expectations. +

+``` + +The browser renders these parts of the text as bold text. This visual emphasis will draw readers attention to the product names. + +If you need to emphasize the importance of the text, you should use the `strong` element instead of the `b` element. + +`strong` is a semantic HTML element that emphasizes text that is crucial, or urgent. This is an example where the `strong` element is used to label a very important warning about the potential allergic reactions that customers may have to a product: + +```html +

+ Warning: This product may cause allergic reactions. +

+``` + +The `strong` element communicates that sense of urgency. + +Visually both are very similar, because they are both rendered as bold by default. But their meanings are quite different. While the "bring attention to" element only draws attention to the text, without indicating the higher level of importance, the `strong` element does more than that. It conveys a sense of importance, or urgency. This is their main difference. + +To choose between them, consider the purpose of the text and its importance within the surrounding content. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995bda6c67e369aaf8588.md b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995bda6c67e369aaf8588.md index 732248d55e..81b111ada3 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995bda6c67e369aaf8588.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995bda6c67e369aaf8588.md @@ -10,6 +10,52 @@ dashedName: what-are-description-lists Watch the lecture video and answer the questions below. +# --transcript-- + +What are description lists, and when should you use them? + +Description lists are perfect for presenting terms and definitions in an organized and easy-to-read format, like in a glossary, or real dictionary, where you can find words with their corresponding definitions. + +This is an example of a description list in HTML with two terms and their corresponding details: + +```html +
+
HTML
+
HyperText Markup Language
+
CSS
+
Cascading Style Sheets
+
+``` + +In this case the terms are the acronyms HTML and CSS, and the details are their expansions. The details could also be definitions, or other information related to the terms. + +You will need three HTML elements to define a description list. First, the description list element, `dl`, which is the container for the entire list. You can see it wraps around all the other elements of the description list in the example. + +Then, one description term element, `dt`, for each term. In this case the description list has two terms, HTML and CSS, so it has two of these elements. + +And finally, after each term you will find a description details element, `dd`, for the description, or details associated with that term. In this example, they are Hypertext Markup Language and Cascading Style Sheets. + +In the browser, you would see each term followed by its corresponding description. By default, the descriptions are slightly more indented towards the right to distinguish them visually. + +But description lists are not limited to only terms and definitions. They are much more versatile than that. Here we have a recipe with two ingredients. + +```html +
+
Flour
+
2 cups
+
Sugar
+
1/2 cup
+
+``` + +The entire description list is within a description list element. The first ingredient, `Flour`, is within a description term element. Then, you can see how much of this ingredient you will need: `2 cups`. This is within a description details element directly after its corresponding ingredients. + +And the same structure is repeated for `Sugar`. In this case, the recipe has only two ingredients, but if there were more the same structure could be repeated throughout the description list. + +In the browser, you would see the ingredients aligned to the left, and the measurements indented to separate them visually. + +Other use cases for description lists include product specifications, frequently asked questions, contact information, and metadata. Essentially, when you have two related pieces of information in a key-value pair format, where one acts as a label, the key, and the other acts as additional related information, the value, you can use a description list. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995c9e6f69436dbcccc79.md b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995c9e6f69436dbcccc79.md index f8501e6312..d60329bf99 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995c9e6f69436dbcccc79.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995c9e6f69436dbcccc79.md @@ -10,6 +10,73 @@ dashedName: how-do-block-and-inline-quotes-work-in-html Watch the lecture video and answer the questions below. +# --transcript-- + +How do block and inline quotes work in HTML? + +In HTML, quoted elements are used to distinguish quoted text from the surrounding content. This gives the quoted text a format that is easy to identify. + +You should use the block quotation element for representing a section quoted from another source. It's mainly used for extended quotations. If the source of the quote has an address, you can cite it with the `cite` attribute. The value of this attribute should be a valid URL. This is an example of a quote within a block quotation element: + +```html +
+ "Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?" +
+``` + +This element has a `cite` attribute. The value of the `cite` attribute is the URL of the source. While this attribute doesn't change the presentation of the block quote, it's very helpful for giving screen readers and search engines more information about the quote. In the browser, you'll see that the text is slightly indented. + +If you want to start and end the block quote with quotation marks, you may need to write them explicitly within the text. You can write the text directly within the block quotation element, like I just did, or wrap it within one or more paragraph elements. This is helpful when the text has multiple paragraphs, but you want to keep them within the same block quote. Here's an example with four paragraphs: + +```html +
+

Build your projects. Show them to your friends. Build projects for your friends.

+

Build your network. Help the people you meet along the way. What goes around comes around. You'll get what's coming to you.

+

It is not too late. Life is long.

+

You will look back on this moment years from now and be glad you made a move.

+
+``` + +All the paragraphs are contained within the same block quotation element, so they are part of the same quotation. You can see that the element has a `cite` attribute with the URL of the source. In the browser, you'll see that the four paragraphs are aligned relative to each other, but they are indented relative to their container. + +So far I've been using the `cite` attribute to attribute the source of the quotation, but the attribute doesn't really show the source to the user. It only works behind the scenes. + +If you want to attribute the source visually, you can add a citation element, `cite`, outside of the block quotation element. This is different from the `cite` attribute. The citation element is an HTML element that you can use to mark up the title of a referenced creative work like a book article, song, film, website, or research paper. Here's an example: + +```html +
+
+ Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon? +
+

—Quincy Larson, How to Learn to Code and Get a Developer Job [Full Book].

+
+``` + +The block quotation element contains quoted text. Below the element you can see a paragraph element with the name of the author, followed by a citation element. The citation element contains the title of the book where the quotation came from. + +If you go to the browser, now the source will be clearly visible and see that the quote comes from a book written by Quincy Larson. The title of this book is `How to Learn to Code and Get a Developer Job`. + +You should use block quotes like these for long quotations from other sources. But sometimes you will only need to quote a few words within a larger paragraph. + +That's exactly what the inline quotation element is for. It's for short inline quotations from other sources. Most modern browsers will add quotation marks around the inline quote automatically when you use this element. This is an example: + +```html +

+ As Quincy Larson said, + + Momentum is everything. + +

+``` + +You can see a paragraph element that contains text. Part of the text is an inline quote, because it's within the inline quotation element. You can also add a `cite` attribute to attribute the source. + +This works exactly the same as it did with the block quotation element. There won't be any visual changes, but it will give screen readers and search engines more information about the quote. + +In the browser, you'll see that the quoted text is part of the paragraph and it's surrounded by quotation marks. Most modern browsers will add these quotation marks automatically. + +What's the difference between block quotes and inline quotes? You should use block quotes for extended quotations from other sources and inline quotes for short quotations from other sources that should be part of existing paragraphs. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995d673bd3237200b9e7c.md b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995d673bd3237200b9e7c.md index 671eaa7226..975c8b5eed 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995d673bd3237200b9e7c.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995d673bd3237200b9e7c.md @@ -10,6 +10,42 @@ dashedName: how-do-you-display-abbreviations-and-acronyms-in-html Watch the lecture video and answer the questions below. +# --transcript-- + +How do you display abbreviations and acronyms in HTML? + +An abbreviation is a shortened form of a word. For example, "Dr" followed by a period, is an abbreviation for the word "doctor". + +An acronym is a word formed from the initial letters of a phrase, with each letter representing the first letter of a word in that phrase. HTML is an example of an acronym. It stands for HyperText Markup Language. + +By taking the first letters of each word H, T, M, and L, you get the acronym HTML. They are both very helpful for writing more concise text, especially when they are well-known and easy to understand in a given context. + +If you need to display abbreviations and acronyms in HTML, the abbreviation element is exactly what you're looking for. You should always explain their full meaning when you use them for the first time. Then you can use the abbreviation element to highlight them and provide more details. + +Here's an example where you can see a paragraph with the sentence `HTML is the foundation of the web`: + +```html +

HTML is the foundation of the web.

+``` + +The acronym HTML is within an abbreviation element. In the browser, you'll see that nothing has really changed. It still looks like normal text. The abbreviation element is providing helpful context behind the scenes, but users will still see the acronym as normal text. + +If you want to help users understand what this acronym means, you can show its full form with the `title` attribute. + +The `title` attribute is optional, but if you decide to include it, it must be a human readable description of the abbreviation, or acronym. + +Let's take the same example as before, but add the `title` attribute. It will be `HyperText Markup Language`, the expanded form of the acronym: + +```html +

HTML is the foundation of the web.

+``` + +Usually, the style of the abbreviation element will change when you add this attribute. The specific style will depend on the browser. Some browsers may display a dotted underline, while others may convert the contents to small caps, or even assign certain default styles, such us a dotted underline. When the user hovers over the acronym with the mouse, the full form is displayed as a tooltip. + +While you don't necessarily need to use the abbreviation element for every abbreviation, or acronym on your web page, it's recommended for those that might be unclear and those that might need additional context. + +You should use your best judgment to find the right balance between information and presentation to avoid cluttering the text while being clear and concise. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995e43674fb3775b9ec5d.md b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995e43674fb3775b9ec5d.md index b74354d3b9..ae9ccfb305 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995e43674fb3775b9ec5d.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995e43674fb3775b9ec5d.md @@ -10,6 +10,37 @@ dashedName: how-do-you-display-addresses-in-html Watch the lecture video and answer the questions below. +# --transcript-- + +How do you display addresses in HTML? + +The contact address element is used to represent contact information for a section on a web page. The `address` element is versatile and can be used for business pages, author pages, personal sites, and more. + +When it comes to building out your website's contact sections, you should use the semantic `address` element over a generic element like a `div`. + +Here is an example of using the `address` element for a company contact page: + +```html +
+

Company Name

+

+ 1234 Elm Street
+ Springfield, IL 62701
+ United States +

+

Phone: +1 (555) 555-5555

+

Email: contact@company.com

+
+``` + +In this example, there is the company name, physical address, phone, and email information. For the physical address, the line break element, `br`, is used to show the division between the street name, city, and country. + +For the phone number, we have an anchor element with the `href` value set for telephone numbers. The `tel:+` value inside the `href` attribute creates a clickable link to initiate a phone call on certain devices that support that. + +For the email address, another anchor element is used with the `href` value set to a `mailto` link. `mailto` links are used in HTML documents to allow users to open a new email within their preferred email client. + +One of the downsides of using a `mailto` link is that users often perceive it as spam. Unfortunately, a lot of spammers will use this option to send emails to users. So just keep that in mind when you're using it. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md index 516dfb03e3..332dfa47a1 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md @@ -10,6 +10,40 @@ dashedName: how-do-you-display-times-and-dates-in-html Watch the lecture video and answer the questions below. +# --transcript-- + +How do you display times and dates in HTML? + +The `time` element is used to represent a specific moment in time. + +Here is an example using the `time` element to represent twenty hundred hours, or eight PM in the evening. + +```html +

The reservations are for

+``` + +The `datetime` attribute is used to translate dates and times into a machine-readable format. + +This is important, because it helps with search engine results and helps the browser process date and time information more effectively. + +The value for the `datetime` attribute must be either a valid year, valid month, valid time, local date, global date, or valid duration string. + +Here is another example of using the time element to represent a particular date: + +```html +

+ The graduation will be on +

+``` + +The value for the `datetime` attribute is in the ISO 8601 format. ISO 8601 is an international standard to represent dates and times. + +The first part of that value is the year, month and day. The capital T in the value is a separator between the date and time. + +The fifteen hundred hours would be three PM in the afternoon. + +Whenever you need to represent events, publication dates, or appointments, it is best to use the `time` element. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995ffdfd2f337f5f215f8.md b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995ffdfd2f337f5f215f8.md index 1ecd98c26e..735a031bf3 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995ffdfd2f337f5f215f8.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/672995ffdfd2f337f5f215f8.md @@ -10,11 +10,49 @@ dashedName: how-do-you-display-mathematical-equations-and-chemical-formulas-in-h Watch the lecture video and answer the questions below. +# --transcript-- + +How do you display mathematical equations and chemical formulas in HTML? + +The superscript element is used to display a piece of text as a superscript. A superscript is a symbol or letter printed above the normal line of text. + +Here is an example using the superscript element to illustrate exponents: + +```html +

22 (2 squared) is 4.

+``` + +In this example, the number 2 is wrapped in `sup` tags to represent the superscript inside the paragraph. In the browser, you would see that the second number 2 is smaller and slightly higher than the first number 2. + +Common use cases for the superscript element would include exponents, superior lettering, and ordinal numbers. Here is an example using the superscript element for superior lettering: + +```html +

+ Monseigneur is often written as Mgr. +

+``` + +Superior lettering refers to letters written in superscript, usually to indicate abbreviations. The letters `g` and `r` are wrapped inside superscript tags to illustrate the abbreviation in this example. + +It is important to note that the superscript element should only be used for typographical reasons. If you want style a piece of text with a raised baseline, then you should use CSS instead of the superscript element. + +To represent chemical equations inside HTML, you would use the subscript element. This element uses a subscript which displays a lowered baseline using smaller text. + +Here is an example of using the subscript element to show the chemical representation for carbon dioxide. + +```html +

CO2

+``` + +The number two is wrapped inside `sub` tags to illustrate that the character should be a subscript. + +Common uses cases for the subscript element include chemical formulas, foot notes, and variable subscripts. + # --questions-- ## --text-- -What is the primary use of the `superscript` element in HTML? +What is the primary use of the superscript element in HTML? ## --answers-- @@ -22,7 +60,7 @@ To display text in a different color. ### --feedback-- -Review the beginning of the video where the `superscript` element is discussed. +Review the beginning of the video where the superscript element is discussed. --- @@ -30,7 +68,7 @@ To show text in a smaller font size. ### --feedback-- -Review the beginning of the video where the `superscript` element is discussed. +Review the beginning of the video where the superscript element is discussed. --- @@ -42,7 +80,7 @@ To underline text. ### --feedback-- -Review the beginning of the video where the `superscript` element is discussed. +Review the beginning of the video where the superscript element is discussed. ## --video-solution-- @@ -50,7 +88,7 @@ Review the beginning of the video where the `superscript` element is discussed. ## --text-- -Which of the following is an example of using the `superscript` element correctly? +Which of the following is an example of using the superscript element correctly? ## --answers-- @@ -86,7 +124,7 @@ The example should represent an exponent with a number displayed above the norma ## --text-- -What should be used instead of the `superscript` element if you want to style text with a raised baseline for typographical reasons? +What should be used instead of the superscript element if you want to style text with a raised baseline for typographical reasons? ## --answers-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/6729960ed6e2ca3825940e97.md b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/6729960ed6e2ca3825940e97.md index a1906a3977..5f7db9d298 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/6729960ed6e2ca3825940e97.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/6729960ed6e2ca3825940e97.md @@ -10,6 +10,47 @@ dashedName: how-do-you-represent-computer-code-in-html Watch the lecture video and answer the questions below. +# --transcript-- + +How do you represent computer code in HTML? + +The inline code element is used to represent short snippets of code inside text. Common use cases for the code element would be for technical articles and documentation pages. + +Here is an example of using the `code` element to show a CSS code snippet: + +```html +

+ To set the text color to blue in CSS, use the following code: + color: blue; +

+``` + +In this example, the CSS `color` property is used to set the text color to `blue`. By wrapping this code snippet inside `` tags, it communicates to the browser that the text is a piece of inline code. + +The browser will apply default styles for content inside of the `code` element. The default styling is a monospaced font. + +The `code` element is meant to represent a single line of code. If you want to represent multiple lines of code, you will need to place a `code` element inside a preformatted text element. + +The preformatted text element is used to represent preformatted text. Here is an example of using the preformatted text element to show a CSS declaration: + +```html +
+  
+    body {
+      color: red;
+    }
+  
+
+``` + +When using the `pre` element, you will need to be mindful of spacing because it will display exactly as written inside the HTML document. + +In the browser, you will see that the code is indented several spaces to the right. If you were to change the indentation in the code example, then you will see a difference in indentation on the screen. + +When it comes to including code examples inside your HTML document, you should use the `code` element for short inline examples. + +If you need to display longer code snippets, then you will need to use the `pre` and `code` elements. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/6729963b1ab11638753cf082.md b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/6729963b1ab11638753cf082.md index 74e222cd9f..83f2798fc3 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/6729963b1ab11638753cf082.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-importance-of-semantic-html/6729963b1ab11638753cf082.md @@ -10,6 +10,51 @@ dashedName: what-are-the-u-s-and-ruby-elements-used-for Watch the lecture video and answer the questions below. +# --transcript-- + +What are the `u`, `s`, and `ruby` elements used for, and how do they work? + +The unarticulated annotation element, or `u` element for short, is used to represent inline text that has non-textual annotation applied. + +Here is an example of using the `u` element to highlight various spelling errors: + +```html +

+ You can use the unarticulated annotation element to highlight + inccccort spling issses. +

+``` + +In the example, the words `incorrect`, `spelling`, and `issues` are misspelled. The default styling for the `u` element is a black underline underneath the text. + +In HTML4, the `u` element was used for styling purposes. But in HTML5, the `u` element should only be used to indicate that text has non-textual annotation applied. + +If you want to style a piece of text with a underline, then you should use CSS instead of HTML. + +The strikethrough element, or `s` element for short, should be used to represent when text is no longer accurate or relevant. Here is an example of using the `s` element to show the cancellation of an activity: + +```html +

Tomorrow's hike will be meeting at noon.

+ +

Due to unforeseen weather conditions, the hike has been cancelled.

+``` + +In this example, the first sentence is crossed out because the hike was cancelled due to weather reasons. + +The `s` element should never be used to just to show changes to a document. More appropriate elements in that case would be the deleted text element and the inserted text element. + +The `ruby` element represents small text shown above or below the main text. It is typically used to show the pronunciation of East Asian characters. Here is the `ruby` element example from the MDN web docs page: + +```html + 明日 (Ashita) +``` + +The `rp` element, or ruby fallback parenthesis element, is used as a fallback for browsers lacking support for displaying ruby annotations. + +The `rt` element, or ruby text element, is used to indicate text for the ruby annotation. This text is usually used for pronunciation, or translation details in East Asian typography. + +While the `ruby` element can be used for other types of annotations, the most common use case is for East Asian typography. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md b/curriculum/challenges/swahili/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md index 96d642737c..ec7e5a02d0 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md @@ -10,6 +10,44 @@ dashedName: what-are-the-basic-parts-of-a-computer Watch the video lecture and answer the questions below. +# --transcript-- + +What are the basic parts of a computer? + +Computers are very powerful machines that perform a variety of tasks like writing documents, playing games, and browsing the internet. + +As a developer, it is important to understand the basic inner workings of a computer. + +The first major component of a computer would be the motherboard. The motherboard holds all of the memory, connectors, and hard drives that are needed to run the computer. It serves as the main circuit board for the computer. + +Inside the computer case of the motherboard, you will find the CPU which stands for Central Processing Unit. The CPU is a processor that is responsible for executing instructions and performing calculations. It is often referred to as the brain of the computer. + +The CPU is a small square with a chip that goes into the motherboard's CPU socket. A socket is a place where the CPU is inserted. The CPU processor speed is measured in gigahertz (GHz) and mega-hertz (MHz). Gigahertz is a billion cycles per second and mega-hertz is a million cycles per second. + +The next critical component of a computer would be the system's short term memory. This is known as RAM or Random Access Memory. RAM is a temporary storage location for the computer's CPU. Anytime the computer needs to access data quickly, it will use RAM. + +The more RAM you have on your computer, the faster it will run and the more programs you can run at the same time. If you are running low on RAM, your computer will run slower and you will notice the difference in performance. + +It is important to note that RAM is volatile memory. This means that it is lost when the computer is turned off. This is why it is important to save your work on your computer. + +When you do save your files, they are stored on the hard drive. The hard disk drive, or HDD, is a permanent storage location that is used to store data even when the computer is turned off. This is where all of your files and software are stored. + +The hard drive is made up of a spinning platter and an arm. The platter is where the data is stored and the arm is used to read and write data to the platter. When you have a faster hard drive, your computer will boot up faster and your programs will run faster. + +Another type of data storage would be the Solid State Drive, or SSD for short. SSD is non volatile flash memory and can be used in place of a hard drive. SSDs are faster and smaller than hard drives but hard drives are cheaper and have more storage capacity. + +Another key component of a computer is the power supply unit, or PSU. The PSU is responsible for converting the electricity from the wall outlet into a form that the computer can use. It sends the power from the outlet to the motherboard, CPU, and other components of the computer. + +Another key component would be the expansion cards. These are cards that are inserted into the motherboard to add additional functionality to the computer. Examples of expansion cards would be the video card, sound card, and network card. + +The video card, also known as the Graphics Processing Unit or GPU, is responsible for rendering visuals on the computer screen. + +The sound card is responsible for playing sound on the computer speakers. + +The network card is responsible for connecting the computer to the internet. + +Even though there are many more parts to the computer, these are some basic parts that you should familiarize yourself with. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md b/curriculum/challenges/swahili/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md index 91a1e84380..d70561820e 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md @@ -10,6 +10,30 @@ dashedName: how-to-effectively-work-with-your-keyboard-mouse-and-other-pointing- Watch the lecture video and answer the questions below. +# --transcript-- + +How can you effectively work with your keyboard, mouse, and other pointing devices? + +Many of you have been used to working with your keyboard and mouse for years on end for a variety of activities like gaming, performing tasks for work, or surfing the web. + +But prolonged misuse of these devices can lead to serious health problems down the road. + +In this lecture video, we will cover ways to work with your computer’s keyboard and mouse in healthy ways. + +The first tip is to be mindful of the mouse grip. When working on serious tasks for work or during intense gaming moments, you may tend to grip the mouse too hard. However, this can lead to serious hand and wrist issues. To prevent this, you want to make sure to hold the mouse gently and keep your fingers nice and relaxed. + +The second tip is to consider using an ergonomic keyboard and mouse. These tools are designed to reduce wrist strain by keeping your hands in a more natural position. + +While prices for these devices can vary and may be a costly purchase for your current budget, they can be a good investment in your overall long-term health. So, you might consider starting to research an ergonomic keyboard and mouse to use. + +Another tip is to keep your mouse the same height as your keyboard. You don't want to have to reach up or down to use the mouse, as this can strain your wrist and arm muscles over time. + +You also want to be mindful of your overall posture when sitting at the computer for hours on end. Being slouched over your computer and putting your wrist in an unnatural position at the keyboard will lead to long-term health issues. So, you want to make sure to sit up straight when working at your computer and maintain a healthy and natural wrist position. + +The last tip would be to use keyboard shortcuts whenever possible to help minimize typing. There are dozens of shortcuts available for tasks such as navigating the web, navigating around your operating system, working within a code editor, and more. So, it’s best to research some of these keyboard shortcuts and and start incorporating them into your daily computer usage. + +As you continue using your mouse and keyboard for upcoming coding projects and other activities, remember to keep these health tips in mind. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md b/curriculum/challenges/swahili/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md index 515d189cc8..d79affa6b0 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md @@ -10,6 +10,32 @@ dashedName: what-are-the-different-types-of-internet-service-providers Watch the lecture video and answer the questions below. +# --transcript-- + +What are the different types of internet service providers? + +First, what is an internet service provider, or ISP? It’s a company that sells access to the global internet network, essentially. And they come in three different tiers. + +The first tier are the giant conglomerate companies, which have the infrastructure to handle most (if not all) of their network traffic independently. + +The second tier are the country-wide providers, which sometimes rent access to tier 1 networks but can stand fairly well on their own. + +The third tier are the small companies that primarily focus on providing internet to local markets, and rely on larger ISPs to provide their infrastructure. + +These providers will offer different types of connections as well. + +Fibre optic connections rely on glass or plastic fibres to transmit data via light, resulting in very high connection speeds and data exchange. + +Cable connections use the same infrastructure as a cable television provider, which often makes them readily available in many regions. + +DSL connections use the infrastructure that landline phone services use. Because of the prevalence of this infrastructure, DSL is available in areas where cable might not be. But it is also frequently a slower option. + +Dial-up also uses the phone lines, but requires exclusive connection (disabling the use of the line for phone purposes when connected to the internet). This is a much older technology that has fallen into disuse. + +Satellite connections use an array of satellites orbiting the earth to connect various devices across the world. And finally, similar to that, a 5G home internet provider uses the cell tower infrastructure to keep you online. + +And that should give you a basic rundown of what types of internet service providers and internet connections are out there! + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md b/curriculum/challenges/swahili/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md index 8e1b267afd..085ff16bd6 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md @@ -10,6 +10,36 @@ dashedName: what-are-safe-ways-to-sign-into-your-computer Watch the lecture video and answer the questions below. +# --transcript-- + +What are safe ways to sign into your computer? + +Many of you have being using computers for a while. But you might not have thought about the safest or most secure ways to sign into your computer. + +Whether you are using a Mac or PC, there are many ways to safely sign into your computer. + +The first thing you should do is to make sure that your computer is password protected. + +For Windows users, start by opening the Start menu and selecting Settings. From there, go to Accounts and then Sign-in options. You can then set up a password for your computer. + +*Note: If you encounter any difficulties or are using a different version of Windows, refer to the official Microsoft documentation or support resources for detailed instructions tailored to your specific version.* + +When creating your password, make sure it is a long and complex password. You can use a combination of letters, numbers and special characters to make it more secure. + +Choosing an easy password like `12345` or `password` is not a good idea. These are easy to guess and can be easily hacked. + +Also, do not use passwords based on personal information like your name, birthday, or address. Those are also easy for hackers to guess. + +When you create your password, it is also a good idea to setup two-factor authentication (2FA). 2FA serves as an extra layer of security and requires a second form of verification to ensure that the person trying to access the account is indeed the authorized user. + +If you are a Mac user, you can click on the Apple menu and then go to system settings. From there you can go to Users & Groups and set up a password for your computer. + +Some Mac computers come with a touch ID feature, which is often considered more secure than regular passwords. This feature allows you to sign into your computer using your fingerprint. + +For Windows users, the Windows Hello feature offers a more secure way to sign in. It uses biometric methods such as facial recognition or fingerprints for authentication, providing an alternative to traditional passwords. + +After you finish watching these set of lecture videos, I urge you to look into these additional security features and set them up on your computer so that you can keep your computer safe and secure. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md b/curriculum/challenges/swahili/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md index 0aba68160a..22988e04c5 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md @@ -10,6 +10,54 @@ dashedName: what-are-the-different-types-of-tools-professional-developers-use Watch the lecture video and answer the questions below. +# --transcript-- + +What are the different types of tools professional developers use? + +Professional developers rely on a variety of tools to increase productivity and code quality. Let's learn about those tools, including the ones that seem very obvious. + +The first among the tools is computers. A computer is the primary development environment. It could be a heavy desktop or a portable laptop with either Windows, macOS, or Linux as the operating system. + +Professional developers often go for computers with fast processing power and plenty of RAM to handle resource-intensive tasks. + +After the computer is a program for writing and editing code right on that computer. That's a code editor or integrated development environment (IDE). + +IDEs like Visual Studio, IntelliJ IDEA, JetBrains, and PyCharm provide powerful features like code completion, debugging, and integrated terminal support. + +Visual Studio Code (VS Code) is essentially a code editor, but it also provides these functionalities with its rich extension library. + +Other code editors are Sublime Text, Atom, Notepad++, and Brackets. + +When you write code with code editors and IDEs, you need to track the changes you make to them. The tool that lets you track those changes is a version control system. + +Git is the most widely used version control system in the development community. + +Platforms like GitHub, GitLab, and Bitbucket provide cloud-based hosting services for your Git repositories. These platforms enable collaboration with other developers, allow you to work on multiple branches, and facilitate the merging of code changes. + +Package managers are another critical tool. They help developers simplify the process of adding, updating, and removing libraries and project dependencies. + +Examples of popular package managers are: + +* NPM, Yarn, and PNPM for JavaScript +* PIP for Python +* Composer for PHP +* Maven for Java + +After writing code with different tools, developers test that code to make sure it's working as expected. + +For this, developers use testing frameworks like Cypress, Playwright, Selenium, and others. There are also language-specific testing frameworks. Examples are: + +* Jest for JavaScript +* pytest for Python +* JUnit for Java +* PHPUnit for PHP + +You don't only need to test the code to make sure it's working as expected. You also need to test what the code looks like visually to the end users. Developers use web browsers for this. + +Modern browsers like Chrome, Firefox, Edge, and Safari offer developer tools for inspecting HTML, CSS, and JavaScript code. There are also tools for debugging and performance profiling. + +These tools help developers test and optimize their web applications across different browsers for the end users. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-user-centered-design/672bafd715f6ba77d57f3ec0.md b/curriculum/challenges/swahili/25-front-end-development/lecture-user-centered-design/672bafd715f6ba77d57f3ec0.md index 6e345c61d7..a4c7750a8f 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-user-centered-design/672bafd715f6ba77d57f3ec0.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-user-centered-design/672bafd715f6ba77d57f3ec0.md @@ -26,7 +26,7 @@ User research involves studying the people who use your product. --- -To measure user needs, behaviours, and pain points. +To measure user needs, behaviors, and pain points. --- @@ -94,7 +94,7 @@ Functional requirements are important, while non-functional requirements are opt ### --feedback-- -The lecture mentions that requirements can be categorised into two types based on what they dictate about the application. +The lecture mentions that requirements can be categorized into two types based on what they dictate about the application. --- @@ -106,7 +106,7 @@ Functional requirements are set by stakeholders, while non-functional requiremen ### --feedback-- -The lecture mentions that requirements can be categorised into two types based on what they dictate about the application. +The lecture mentions that requirements can be categorized into two types based on what they dictate about the application. --- @@ -114,7 +114,7 @@ Functional requirements are static, while non-functional requirements change ove ### --feedback-- -The lecture mentions that requirements can be categorised into two types based on what they dictate about the application. +The lecture mentions that requirements can be categorized into two types based on what they dictate about the application. ## --video-solution-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672aa6c9e379285acca5a2aa.md b/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672aa6c9e379285acca5a2aa.md index 906f1f1cb1..6a70a954f8 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672aa6c9e379285acca5a2aa.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672aa6c9e379285acca5a2aa.md @@ -10,6 +10,34 @@ dashedName: what-are-common-design-terms-to-help-you-communicate-with-designers Watch the video lecture and answer the questions below. +# --transcript-- + +What are common design terms to help you communicate with designers? + +As a developer, you may need to work closely with designers. If you understand basic design terminology, you'll have a shared vocabulary and you'll be able to participate in the design process more actively. This can make your workflow more efficient and result in a better user experience. + +So let's dive in. We'll start with the term layout. Layout is how the visual elements are arranged on a page or screen to communicate a message. These elements may include text, images, and white space. The layout is like the blueprint of a design. Designers must consider the placement, size, and hierarchy of each element. + +The term that is closely related to layout is alignment. Alignment is how the elements are placed in relation to one another. Using alignment correctly is helpful for making the design look clean and organized. Designers create visual order by aligning elements along imaginary lines, edges, or a central point. + +Great. Now let's talk about composition. Composition is the art of arranging elements to create a harmonious design. It determines how elements like images, text, and shapes relate to each other and contribute to the design in an artistic way. While layout mostly focuses on the placement of the elements, composition also considers the artistic impact that this placement will have in the overall design. + +Composition is closely related to concepts of balance. Balance is how the visual weight is distributed within a composition. Designers aim to create an equilibrium through symmetrical or asymmetrical arrangements. A balanced design feels harmonious. + +Hierarchy is another important concept that you should know. Hierarchy establishes the order of importance of the elements in a design. It's about making sure the most important information is noticed first. You can implement a visual hierarchy with size, color, contrast, alignment, white space, and even typography. + +To create clear distinctions between the elements, you can use contrast. Contrast is helpful for guiding user attention to what you want to emphasize. You can do this through variations in color, size, shape, texture, or any other visual characteristic. Strong contrast is also helpful for improving readability. + +Another helpful term is white space. White Space, also known as "negative space", is the empty space in a design. It's the area surrounding the elements. You might be surprised to know that white space is not necessarily white. Actually, it can be space in any color or texture. Its purpose is to improve the readability and enhance the visual hierarchy of a design. + +These are general design concepts that you will find very often, but you may also find design terms that are more closely related to software development. + +The user interface, also known as UI, is how humans interact with computers. A user interface includes the visual and interactive elements that users can see on their screens, like icons, images, text, menus, links, and buttons. + +The user experience, also known as UX, is about how users feel when using a product or service. An application with a well-designed user experience is intuitive, easy to use, efficient, accessible, and enjoyable. The user interface plays a key role in making the user experience as easy and enjoyable as possible, so they are very closely related. + +These are some of the common terms that you should know to communicate with designers. With this knowledge, now you can take a more active role in the design process. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baa97f2990e6631d522e7.md b/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baa97f2990e6631d522e7.md index edb9ff819c..8c2a153704 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baa97f2990e6631d522e7.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baa97f2990e6631d522e7.md @@ -10,6 +10,38 @@ dashedName: how-do-you-create-good-background-and-foreground-contrast-in-your-de Watch the lecture video and answer the questions below. +# --transcript-- + +How do you create good background and foreground contrast in your designs? + +First, you may need to familiarize yourself with contrast. Contrast is the difference between two colors - or how easy it is to tell them apart. + +Colors with a higher contrast will be more visually distinct, whereas colors with a lower contrast will be more visually similar. For example, black and white have a very high contrast ratio. Whereas light blue and light purple have less of a contrast. + +Of course, in these examples the distinction might be made clearer because of the layout. But what about applying these colors to text? You can have the high contrast black text on a white background. And the low contrast purple text on a blue background. + +But how do you determine what is a "good enough" contrast? You can't base it solely on how the text looks to you, as every user will have a different experience. Thankfully, the Web Content Accessibility Guidelines, or WCAG, provide a standard for this. + +Text with a contrast ratio of 4.5:1 is considered the AA standard, which is the bare minimum you should follow to be accessible to most users. Text with a contrast ratio of 7:1 is considered the AAA standard, and ensures the best level of accessibility. + +There are a number of websites that can check the contrast ratio between two colors, but most browsers will allow you to do this directly in the developer tools on your website. + +Let's open the developer tools and inspect the text elements of the example site. + +The black text on a white background has a contrast ratio of 21:1, which more than meets the AAA standard. The purple text on a blue background, however, has a contrast ratio of 1.48:1, which does not even meet the AA standard. + +How can you fix this? Well, there are three aspects that impact the contrast ratio. + +The first is the hue, which represents the general color type, like red, blue, orange. Let's shift to a hue that is further away from blue. In this case, let's use red. + +Unfortunately, this change only brought the contrast ratio to 1.49:1, which means you need to change the saturation, or the "amount" of color present. Let's increase the amount of red in the text. That brings us much closer to the goal, with a 3.54:1 contrast ratio. + +However, you can potentially get even closer by changing the last value, which is lightness. Lightness represents how much white is present in the color. + +Let's decrease the lightness of the red. Now there is a much darker red against the light blue background, which brings the contrast ratio to 10.34:1. + +You could continue to adjust the colors to find the balance between the visual effect you want and an accessible contrast ratio. But it is important to remember that accessibility should always take precedence. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baaa62d4b46667a8ac869.md b/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baaa62d4b46667a8ac869.md index 9f54e1fa1a..c8573e5c85 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baaa62d4b46667a8ac869.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baaa62d4b46667a8ac869.md @@ -10,6 +10,28 @@ dashedName: what-is-the-importance-of-good-visual-hierarchy-in-design Watch the lecture video and answer the questions below. +# --transcript-- + +What is the importance of good visual hierarchy in design? + +Visual hierarchy refers to the way you layout and display the content of your page to guide the viewer's attention. + +A strong hierarchy can provide a clear path for the eye to follow, ensuring that the information you convey is consumed in the order that you intended. + +Let's consider a basic page layout in which the HTML for the page is semantically correct, but the styling applied does not create a strong visual hierarchy. + +If the font size isn't distinct, there is no visible indication of the document flow, although things are separated by headings. + +To create a visual hierarchy, you should apply different font sizes to the heading tiers. You could also use something like a "callout box" to highlight a specific section. + +Visual hierarchy can also help increase your user conversion. For example, you can take advantage of the callout box to further draw attention to a Call to Action (CTA) button. + +With the CTA button being visually tied to the work history section, it guides the user to the vital information and the action you want them to take based on that information. + +Finally, your visual hierarchy can be important for conveying other components, like a navigation bar or a footer. + +This makes it easier for your users to find the essential information that they may be looking for. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baab2a0c3df66ad987b94.md b/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baab2a0c3df66ad987b94.md index 4aa66228a4..740be31be1 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baab2a0c3df66ad987b94.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baab2a0c3df66ad987b94.md @@ -10,6 +10,28 @@ dashedName: how-does-scale-work-in-design Watch the lecture video and answer the questions below. +# --transcript-- + +How does scale work in design? + +The "scale" of something refers to its size. + +When you're looking at scaling in your web design, you're looking at the size relationships between different elements, and how these elements might adapt to different screen sizes. + +Using the correct scale for your elements plays an important role in visual hierarchy. Larger elements will draw more attention, which can guide your users through the content in the way that you want. + +For example, the visual separation between a heading and a paragraph draws your reader’s attention, but the scale should be appropriate to get an eye-catching text that pulls your reader to that section. + +Scale doesn't apply just to text, though. It's also important for images. And while the scale of a banner image might make sense for a desktop layout, it might be too large on a mobile layout. + +By scaling an image down to a more appropriate ratio, you can keep the visual impact while ensuring the information on the site is visible. + +Scale is also important for interactivity, and the ability to actually use your website. If the text in a navigation bar is not at an appropriate scale, mobile phone users will have a hard time tapping on the links. + +And if you scale it appropriately, you end up with links that are not only easier to read, but easier to click on for your mobile users. + +There are many ways that scale is important in your designs. We've covered the basics, so you should now have a fundamental understanding of its importance. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baabf16290b66e6b79a39.md b/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baabf16290b66e6b79a39.md index 0a966fe5ac..0bbe32cf6f 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baabf16290b66e6b79a39.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baabf16290b66e6b79a39.md @@ -10,6 +10,44 @@ dashedName: how-does-alignment-work-in-design Watch the lecture video and answer the questions below. +# --transcript-- + +How does alignment work in design? + +When you are designing web pages, it is important to create cohesive and visually appealing designs. One way to achieve this is through the use of alignment. + +Alignment is the process of arranging text and images in a way that creates a visual connection between elements. + +It helps to create a sense of order and organization on the page, making it easier for users to navigate and understand the content. + +There are several types of alignment you can use, but the basic ones are: + +- left alignment +- center alignment +- right alignment +- justified alignment +- vertical alignment + +Left, right, and center alignments are all subtypes of horizontal alignment, while vertical alignment is used to align elements along a vertical axis. + +Let's take a closer look at each type of alignment and how you can use them in your designs. + +Left alignment is commonly used with text where each element is aligned to the left margin. Aligning all of the headings and paragraphs on a web page to the left margin makes it easier for the user to read and follow the content. + +The opposite of left alignment is right alignment, where each element is aligned to the right margin. This is often used on websites to display additional content like promotional banners or advertisements. + +For example, an ad that is aligned to the right margin makes it stand out from the rest of the content on the page but doesn't distract the user from the main content. + +Center alignment is where elements are centered on the page. This is often used for headings, logos, and other important elements that you want to draw attention to. + +Justified alignment is when text is aligned to both the left and right margins. This is typically used for descriptive passages or articles, and creates a clean and professional look. + +The last type of alignment is vertical alignment, which is used to align elements along a vertical axis. + +Vertical alignment can be used, for example, for a contact form on a website. Aligning all of the form inputs like the name, email, and message fields along a vertical axis makes it easier for the user to fill out the form. + +By using different types of alignment, you can create a sense of order and organization on the page that makes it easier for users to navigate and understand the content. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baacb7f2f446728e77efe.md b/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baacb7f2f446728e77efe.md index 86b23b4ca3..0eefe09390 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baacb7f2f446728e77efe.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baacb7f2f446728e77efe.md @@ -10,6 +10,34 @@ dashedName: what-is-the-importance-of-whitespace-in-design Watch the lecture video and answer the questions below. +# --transcript-- + +What is the important of whitespace in design? + +White space refers to any type of space around elements like images, text, and buttons. White space is important in design because it helps to create a balance between the elements on the page. + +Let's take a look at some examples of how white space can be used effectively in design. + +For example, let's consider a call-to-action (CTA) button. CTAs are used to encourage users to take a specific action like signing up for a newsletter or making a purchase. + +By using white space effectively, we can help to make a CTA button more prominent and encourage users to click on it. + +Now let's take a closer look at the different types of white space. + +This first example uses both macro and active white space. Macro white space is the space between larger elements like images, text blocks, and buttons. + +Active white space is the space that is intentionally created to help guide the user's eye and draw attention to certain elements on the page. + +In contrast to active white space, there is also passive white space. Passive white space is the space that is left over after all the elements on a page have been placed. + +Another type of whitespace would be micro white space. This is the space between individual characters in a line of text. + +Micro white space is important because it helps to improve readability and legibility, making it easier for users to scan and understand the content. + +When designing your web pages, you always want to be mindful of the law of proximity. This law states that elements that are close together are perceived as being related, while elements that are far apart are perceived as being unrelated. + +You can use white space to help group related elements together and help navigate users through the content on your page. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md b/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md index 6e3678f0a1..9c4ea2e5b5 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md @@ -10,6 +10,34 @@ dashedName: what-are-best-practices-for-working-with-images-in-your-designs Watch the lecture video and answer the questions below. +# --transcript-- + +What are best practices for working with images in your designs? + +Adding images to your websites is a great way to engage your users and increase the visual appeal of your site. But there are a few things to consider when working with images in your designs. + +The first thing to consider is creating responsive images. Responsive images are images that scale to fit the size of the screen they are being viewed on. This is important because it ensures that your images look good on all devices, from desktops to mobile phones. + +Another thing to consider is the resolution for images. Higher quality images with better resolution have more pixels per inch. Pixels are small squares that make up an image. + +Pixels per inch, or PPI, is the number of pixels in one inch of an image. The higher the PPI, the better the image quality. + +You want to make sure that your images are high quality and look good on all devices. This means that you should use high resolution images that are optimized for the web. + +Another thing to consider is the size of your images and how they fit within the spaces in the layout. You want to make sure that your images are the right size and are not too large or too small. + +Using large images that are meant to fit in smaller spaces in the design can slow down your website and make it harder for users to load your site. You want to make sure that your images are the right size and are optimized for the web. + +When it comes to image placement, you want to think about balance, hierarchy, and alignment to help ensure your images are optimized for the web. + +Balance is the distribution of visual weight in a design. You want to make sure there is a good balance between text and images on the site so it creates a harmonious design. + +Hierarchy is the order in which elements are viewed on a page. You want to make sure that images that align with important content are placed higher than images that are less important. + +Alignment is the placement of elements in relation to each other. You want to make sure that your images are aligned with the text and other elements on your site so that it creates a cohesive design. + +The last thing to consider is accessibility for images. You want to make sure that your images are accessible to all users, including those with visual impairments. This means that you should use alt text for your images so that screen readers can read the text to users who are visually impaired. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baae11d06c867a16f64e1.md b/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baae11d06c867a16f64e1.md index 868b9face5..0237f75b0a 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baae11d06c867a16f64e1.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-user-interface-design-fundamentals/672baae11d06c867a16f64e1.md @@ -10,6 +10,33 @@ dashedName: what-is-progressive-enhancement Watch the lecture video and answer the questions below. +# --transcript-- + +What is progressive enhancement? + +Progressive enhancement is a design approach that ensures all users, regardless of browser or device, can access the essential content and functionality of an application. + +It focuses on delivering a core experience that works for everyone, while offering extra features and improvements to users with more advanced browsers or better internet connections. + +The progressive enhancement approach lives by these core principles: + +- All core content and basic functionality should be accessible on all browsers +- All advanced layouts should be provided through external CSS stylesheets +- All advanced functionality should be provided through external JavaScript files +- A user's browser preferences should be respected + +Using a progressive enhancement approach makes your applications more accessible because all core content and functionality should not be blocked in unsupported environments. + +In terms of speed, a progressive enhancement approach can also help improve the performance of your applications. + +Those users that are working with slower internet connection speeds will still be able to access the content because the browser will download the necessary resources first. + +When it comes to SEO, progressive enhancement can also help improve the visibility of your applications. + +Search engines will be able to crawl the content of your applications because the core content is available in the initial HTML response. + +While some have criticized this approach deeming that it is not always realistic for applications that rely heavily on JavaScript for their functionality, it is still a good practice to follow when building applications. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672aa58c389eb9565978495d.md b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672aa58c389eb9565978495d.md index 5e118ee608..ccbb2240dc 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672aa58c389eb9565978495d.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672aa58c389eb9565978495d.md @@ -10,6 +10,32 @@ dashedName: how-can-you-use-file-management-applications-on-your-computer Watch the video lecture and answer the questions below. +# --transcript-- + +How to use file management applications? + +A file management application is a way to easily store, organize, and edit your files on your computer. Whether you use a Mac or Windows computer, there are built-in applications you can use to organize your files. + +If you have a Windows computer, the default file manager is the File Explorer. This is used to browse, search, and manage files and folders, as well as perform file operations like copying, moving, and deleting. + +To find the File Explorer, you can go to the Start menu or press the Windows logo key on your keyboard. + +To pin a folder, you can right click with your mouse and select "Pin". To move a file or folder, you first need to select it, then select "Cut" and then navigate to the new location to paste it. + +If you have a Mac computer, the default file manager is the Finder. This provides access to local and remote files, supports file previews, and offers a variety of organizational features like tags and Smart Folders. + +To access the Finder on your Mac, go to the Dock at the bottom and click on the Finder icon. + +You will notice a sidebar on the left-hand side where your favorite folders are located. + +One way to organize your files, is to use tags. To tag a file or folder, you can select the item in the Finder and then right click with your mouse. You will see the "Tags..." option in the dropdown and you can apply a custom colored tag. + +To search for tagged items, you can scroll to the bottom of the sidebar and click on the corresponding colored tag, or you can search for the tag by color name in the search field. + +Another way to organize your files is to use smart folders. Smart folders are collections of files that are automatically organized based on criteria you set, such as file type, date, or keywords. + +Whether you're using File Explorer on Windows or Finder on Mac, these applications provide flexibility to manage your files with features like tags, search, and Smart Folders. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672ac37104dc2530a769e6a4.md b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672ac37104dc2530a769e6a4.md index 683f59ec45..eff43a863d 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672ac37104dc2530a769e6a4.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672ac37104dc2530a769e6a4.md @@ -10,6 +10,58 @@ dashedName: what-are-best-practices-for-naming-files-for-web-applications Watch the lecture video and answer the questions below. +# --transcript-- + +What are best practices for naming files for web applications? + +As you start to build out your own web applications, you will need to be mindful of what you name your files. + +You will want to name your files in a way that is easy to understand and maintain. + +Let's take a look at some examples of good and bad file names for HTML files. Note that the `.html` extension in these examples tells us that this is an HTML file. + +Here is an example of a bad file name: + +```md +index1234.html +``` + +By the name alone, it is not clear what the file is about. This file could be for a products page, blog page, or any other type of page but we don't know that from the file name. + +Here is an example of a better file name for an HTML file: + +```md +about-us.html +``` + +By using a more descriptive name like `about-us.html`, it is clear what the file is about. + +You will also notice in this file name that there are no spaces. Instead, you use a hyphen, `-`, to separate the words. + +Sometimes you might see a file name called `index.html`. This is a special file name that is used to represent the main page of a website. When you visit a website, the `index.html` file is the first file that is loaded. + +Another important consideration when naming files is the use of special characters. + +Using a mixture of special characters, numbers, and letters can make it difficult to understand what the file is about. + +Here is an example of a bad file name: + +```md +file-1!@.html +``` + +This name looks unnecessarily complicated and does not give us any information about what the file is about. + +So it is best to stick with only using letters and dashes in your file names. + +As you start to learn more languages, you will see that there are common conventions for naming files in those languages as well. + +In these situations, it is always best to consult with official documentation or other resources to understand the best practices for naming files in that language. + +Also you will be in situations where you are working on a team and you will need to follow the conventions that the team has established for naming files. + +Always consult with the team's style guide to make sure your file names are consistent with the rest of the team. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672ac39a22b0cc30eb8fd65e.md b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672ac39a22b0cc30eb8fd65e.md index 9f46d28c0f..d918513227 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672ac39a22b0cc30eb8fd65e.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672ac39a22b0cc30eb8fd65e.md @@ -10,6 +10,54 @@ dashedName: what-are-best-practices-for-file-folder-organization-in-web-applicat Watch the lecture video and answer the questions below. +# --transcript-- + +What are best practices for file and folder organization in web applications? + +When building out web applications, it is important to think about the organization of your files and folders. This will help keep your code organized and easier to maintain. + +Let's take a look at an example folder structure for an HTML and CSS project: + +```bash +. +├── /assets +│ ├── /images +│ │ ├── logo.png +│ │ ├── banner.jpg +│ │ └── icons.svg +│ ├── /fonts +│ │ ├── custom-font.woff +│ │ └── custom-font.woff2 +├── /css +│ ├── main.css +│ ├── about.css +│ └── contact.css +├── index.html +├── about.html +├── contact.html +└── README.md +``` + +At the top of the example, there is a single dot, which represents the root directory. + +The root directory is the top-level directory in a file system, serving as the starting point for all file paths and containing all other directories and files. A directory is another name for a folder. + +Inside the root directory, the first directory shown is the `assets` directory. The term `assets` refers to any files that are used in the project, such as images, fonts, or other resources. + +In this example, there are two directories inside the `assets` directory called `images` and `fonts`. + +The next directory would be the `css` directory. Sometimes this is also referred to as a stylesheets directory. This is where you would store all of your CSS files. + +Below the `css` directory are the HTML files. The `index.html` file represents the homepage, while `about.html` and `contact.html` represent the About and Contact pages, respectively. + +Lastly, there is a `README.md` file. `README` files are commonly used to provide useful information about the project, such as what it does, how to use it, and any other relevant details. + +The `.md` extension stands for Markdown, which is a lightweight markup language that is often used to write documentation. + +By organizing your project into assets, CSS, and HTML files, it makes it easy to find what you are looking for. This also makes it easy for other developers to contribute to your project. + +It is important to note that this is just one example of how you can organize your files and folders. There are many different ways to structure a project. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672ac3c5d0e9fd31835ff772.md b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672ac3c5d0e9fd31835ff772.md index a06c421fc9..881b1f0662 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672ac3c5d0e9fd31835ff772.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672ac3c5d0e9fd31835ff772.md @@ -10,6 +10,74 @@ dashedName: how-to-create-move-and-delete-files-and-folders-using-explorer-finde Watch the lecture video and answer the questions below. +# --transcript-- + +How to create, move, and delete files and folders using the Explorer or Finder? + +To create a file on Windows using the Explorer, you can click on the "New" option at the top right. This will show you a list of the different types of files that you can create. + +You can also create files in their corresponding applications. Let's create a text file to show you the process. + +When you click on "New" and select the file type, you will see a new text file in your current folder with a default name. You can rename it if you'd like. + +The process of creating folders is exactly the same. Click the "New" button at the top right and then select the "Folder" option or right-click on an empty spot and go to "New." Then, select the "Folder" option. You'll see a new empty folder in your current location. + +You can rename files and folders by selecting them and clicking on the "Rename" option at the top. When current name of the file is highlighted, you can start writing the new name of the file. Press Enter to confirm the changes. + +Alternatively, you can right-click on the file or folder and select the "Rename" option or use the F2 keyboard shortcut. Write the new name and press Enter to confirm the changes. + +You can move a file or folder to another folder by dragging and dropping it into the destination folder, if you have it opened it as a tab. + +You can also select the file or folder and select the "Cut" option at the top. + +Then, go to the destination folder and paste it by clicking the "Paste" button at the top. If you copied or cut the file previously, this button will be enabled. + +You can also do this by right-clicking on an empty spot and then clicking on the paste icon. This will remove the file or folder from its original location. + +To delete a file or folder, click on it and then click on the Trash icon at the top. You will also find a "Delete" option if you right-click on it. + +Great. Now let's see how you can do this on macOS using Finder. + +Finder is the default file manager on macOS. + +To create a file on macOS, you need to open an application that lets you create the type of document that you need to create. Currently, there isn't a built-in way to create a file directly on Finder. + +For example, to create a simple plain text file, you can open TextEdit and save your file. The process works exactly the same for any type of file. + +There are many ways to open TextEdit. One of them is to go to Launchpad. Then, search for an app where you can create the type of file that you're interested in. In this case, that would be "TextEdit." Click on the icon to open the app. + +Once you are inside the app, you should see an option to save your file in the App menu. This menu is located at the top-right, next to the Apple menu icon. + +In one of the App menu options, you should see a command to save the file. This is usually under the File menu. + +Next to it, you will see the keyboard shortcut for saving your file. This is usually `Command + S` on macOS. + +When you are saving the file for the first time, you should see a dialog window, where you can write the name of the file and choose a location. + +Usually, the file extension is added by the application automatically but you can change it before saving the file. + +After saving the file, you can open Finder by clicking on the Finder icon in the Dock. You should see your new file in the folder where you saved it. + +To create a new folder, you should go to the location where you want to create that new folder and rick-click on an empty spot. You will see a list of options. The first option is "New Folder." + +If you click on it, you can assign a name to your new folder. Write the name and press Enter to confirm. + +There are multiple ways to move files and folders in Finder. If you need to move them to a folder listed in your Finder "Favorites" section, you can just drag and drop it. + +If you need to move it to a different folder, you have two options. + +You can either open the destination folder as a tab and drag and drop the file or folder into the tab. + +Or you can use keyboard shortcuts. First, copy the file with `Command + C`, go to the new folder, and then use `Command + Option + V` to paste the file or folder in that location. This will also remove it from the original folder. + +To delete a file or folder, you can right-click on it and select "Move to trash." + +You can also drag and drop them into the trash icon on the Dock. This is equivalent. + +When the file or folder is in the trash can, you can right-click on it to delete it immediately or you can empty the trash to remove all the deleted files and folders permanently. + +Knowing how to create, move, and delete files and folders on Windows and macOS is very important. By mastering these skills, you can organize your files, locate them quickly, and free up storage on your computer by deleting unnecessary files. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672ac3f129efbf327742eb33.md b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672ac3f129efbf327742eb33.md index edb1dbb4b7..effaff66d2 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672ac3f129efbf327742eb33.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672ac3f129efbf327742eb33.md @@ -10,6 +10,42 @@ dashedName: how-to-search-for-files-and-folders-on-your-computer Watch the lecture video and answer the questions below. +# --transcript-- + +How to search for files and folder on your computer? + +Let's learn how to search for files and folders on Windows and macOS. + +We'll start with Windows. You can search from the Taskbar or from the File Explorer. + +To search from the Taskbar, write the name of the file or folder that you are looking for. You can also search for keywords. You'll see results from across your PC and OneDrive. + +If you only want to see documents, you can click on the "Documents" tab. You also have tabs for apps and web results. + +Another alternative is to use the Search File Explorer. You will find it at the top right of the Explorer window, where you can see "Search Documents." + +You have three options to define the scope of the search: + +- You can search from Home to find files from your PC and from the cloud quickly. + +- You can search from a folder to find files stored inside it. + +- You can search from This PC for a slow but in-depth search. + +This is how you can search for files and folders on Windows. Now let's see how you can do this on macOS. + +First, you can use Spotlight, a tool that helps you find files on your Mac. To open Spotlight, go to your menu bar at the top right and find the magnifying glass icon. If you don't see this icon on the menu bar, you can add it in the Control Center settings. + +Go to your settings, filter by "Control Center", click on this option and then scroll down until you find the "Spotlight" option. You can also use a keyboard shortcut to open Spotlight: `Command + Spacebar`. + +When you open Spotlight, you'll see the Spotlight Search, where you can search for any file or folder by typing its name. When you start typing, you'll see the results grouped by category, including suggestions, folders, presentations, photos, documents, and related searches. + +You can also expand a specific category by clicking on "Show More." + +Another way to search for files that you have recently opened is to open Finder by click on the Finder icon in the Dock. Then, go to "Recents" in the Finder sidebar. And there, you'll find all the files that you've recently viewed. + +This is how you can search for files and folders on macOS. With these search tools, you can optimize your workflow and find the files and folders you need very quickly. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672ac403a9ba7732b31c6480.md b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672ac403a9ba7732b31c6480.md index 025f69cab1..f35d416a40 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672ac403a9ba7732b31c6480.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-file-systems/672ac403a9ba7732b31c6480.md @@ -10,6 +10,62 @@ dashedName: what-are-some-common-file-types-you-will-work-with-in-web-applicatio Watch the lecture video and answer the questions below. +# --transcript-- + +What are some common file types used in web applications? + +Files are classified based on their content and structure. The file type determines how a file is opened and processed by computer programs. + +We identify file types based on their extensions. A file extension is a three or four letter suffix at the end of the file name. The three main file types that you will find in web applications are HTML, CSS, and JavaScript. + +HTML files contain the structure and content of the web application. They have a `.html` file extension. + +CSS files define the styles. They have a `.css` file extension. + +And JavaScript files add more advanced functionality and interactivity. They have a `.js` file extension. + +As you develop web applications, you will also need to include images. These are some of the most widely used image file types. + +JPEG, which stands for "Joint Photographic Experts Group," is known for its efficient compression. It's great for photographs and images. However, the compression is lossy, which means that some image quality is lost to reduce the file size. + +PNG, which stands for "Portable Network Graphics," preserves image quality, even after compression. This results in larger files. PNG supports transparency and it's great for images with sharp edges, like logos and icons. + +The GIF image format supports both animation and transparency but has a limited color palette. GIF stands for "Graphics Interchange Format." + +And finally, we have SVG, which stands for "Scalable Vector Graphics." It's a vector image format. These images can be scaled as much as needed without losing quality. + +Great. Now that you know about image formats, let's see some video and audio formats. + +MP3 is an audio format known for its efficient compression. It's a lossy format, so some audio data is lost during the compression to make these files smaller. + +MP4 is one of the most common video formats. It offers good compression and supports multiple audio and video codecs, subtitles, and metadata. + +MOV, the QuickTime multimedia file format developed by Apple, is primarily associated with QuickTime Player. + +Other popular audio and video file types are WAV, a lossless audio format that keeps the original quality of the audio, and WebM, a high-quality open-source video format. + +If you ever need to customize the fonts of your web application, you will also work with font formats. These are three of the most widely used ones. + +TTF, which stands for "TrueType Font", is a font format compatible with different operating systems. + +WOFF is a modern font format, specifically designed for web development purposes. It stands for "Web Open Font Format". These files are smaller because they have better compression. They can also store metadata, including licensing information. + +And WOFF2 is the successor of WOFF with even more efficient compression and performance. + +You can also create archive files if you need to group multiple folders and files. The most widely used archive format is ZIP. ZIP offers lossless compression, so no data is lost during the process. It's widely supported across operating systems and software applications. + +And finally, let's talk about documentation. In web applications, you will usually find a file called `README` that contains information about the application, like how to use it, how to install it, its license, and how to contribute. + +They are usually written in a file format called Markdown. With Markdown, you can create structured documents with headings, subheadings, links, images, lists, and more. Markdown files have a `.md` or `.markdown` extension. + +Here you can find the `README` file of freeCodeCamp's GitHub repository: https://github.com/freeCodeCamp/freeCodeCamp/blob/main/README.md + +You can create this detailed structure and format using Markdown. + +You will definitely read and write many `README` files throughout your career. Learning about these common file types is essential for web development. + +From the core building blocks of HTML, CSS, and JavaScript to image, video, and audio formats, every file type has an important role in creating interactive web applications. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md index c31ea105ce..9ab6444d61 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md @@ -10,6 +10,57 @@ dashedName: how-do-forms-labels-and-inputs-work-in-html Watch the video lecture and answer the questions below. +# --transcript-- + +How do forms, labels, and inputs work in HTML? + +The `form` element in HTML is used to gather user information, such as names and email addresses. Here is an example of a `form` element: + +```html +
+ +
+``` + +The `action` attribute specifies where the form data will be sent upon submission. To collect specific information, like names and email addresses, you would use the `input` element. Here is an example of using an `input` element: + +```html +
+ +
+``` + +`input` elements are void elements and do not have closing tags. The `type` attribute defines the data type expected from the user. In this case, the data would be plaintext. To add a label for the input, you would use a `label` element. Here is an example of using a `label` element with the text of `Full Name:`: + +```html +
+ +
+``` + +By nesting an `input` inside a `label` element, you create an implicit association between the `label` and the `input` field. The term "implicit" refers to something that is understood or inferred without needing to be explicitly stated or defined with additional attributes or elements. To explicitly associate a `label` with an `input`, you can use the `for` attribute. Here is an example of using the `for` attribute for an email address label: + +```html +
+ + +
+``` + +When using an explicit association, the values for the `for` attribute and `id` need to be the same. In this case, the values are both set to `email`. The `email` type in the input provides basic validation for correctly formatted email addresses. If you want to show additional hints to the users about the expected input, you can use the `placeholder` attribute. Here is an example using the `placeholder` attribute inside the email input: + +```html +
+ + +
+``` + +For the placeholder text, you want to provide helpful short text to show the format and type of data you expect from your users. In this case, the placeholder text, `Ex. example@email.com`, shows the user that they must enter a correctly formatted email address. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-forms/672a4cd3d59756726657efb8.md b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-forms/672a4cd3d59756726657efb8.md index adf808a360..c7bf45ba5e 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-forms/672a4cd3d59756726657efb8.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-forms/672a4cd3d59756726657efb8.md @@ -10,6 +10,53 @@ dashedName: what-are-the-different-types-of-buttons Watch the lecture video and answer the questions below. +# --transcript-- + +What are the different types of buttons, and when should you use them? + +The `button` element is used to perform a particular action when it is activated. Here is an example of a `button` element with the button text of `Start Game`. + +```html + +``` + +Other examples of using the `button` element include submitting a form, showing a modal, or toggling a side menu open and closed. The `button` element has a `type` attribute which controls the behavior of the button when it is activated. The first possible value for the `type` attribute would be the `button` type. Here is an example of using the `button` element with the `button` type and a text of `Show Alert`: + +```html + +``` + +By default, the button will not do anything when activated. However, you can add some JavaScript code to make the button interactive, such as showing an alert in this case. Another possible value for the `type` attribute is the `submit` value. Here is an example of using a `button` element with the `submit` type: + +```html +
+ + + +
+``` + +Inside this `form` element, there is a `label` and `input` element for the user's email address. When the user clicks on the submit button, their data will be sent to the server and will be processed. The third possible value for the `type` attribute is the `reset` value. Here is an example of a `form` element with reset and submit buttons: + +```html +
+ + + + +
+``` + +In this modified example, a `label` and `input` element are used to collect the user's email address. When the user clicks on the reset button, then it will clear out all of their input data. It is important to note that reset buttons are usually not the best idea because they could lead to users accidentally resetting their data. Also, multiple buttons in your form could clutter up the user interface. + +Another way to create buttons in HTML is to use the `input` element. The `input` element also has a `type` attribute with the possible values of `submit`, `reset`, and `button`. Here is an example of using the `input` element with the `type` set to `button`: + +```html + +``` + +The `value` attribute is used to show the button text. So, what is the difference between using the `input` and `button` elements? `input` elements are void elements, which means they cannot have child nodes, such as text, and can only have a start tag. On the other hand, the `button` element offers more flexibility because you can nest text, images, and icons inside it. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-forms/672a4ce6dab9eb735828b48b.md b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-forms/672a4ce6dab9eb735828b48b.md index 6c59cb5c9d..920b07c8a2 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-forms/672a4ce6dab9eb735828b48b.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-forms/672a4ce6dab9eb735828b48b.md @@ -10,6 +10,50 @@ dashedName: what-is-client-side-form-validation-in-html-forms Watch the lecture video and answer the questions below. +# --transcript-- + +What is client-side form validation in HTML forms, and what are some examples? + +When a user fills out a form on your website, it is important that they fill out all of the necessary information in the correct format. HTML form controls, like inputs, have a lot of built-in validation that you can use to check for invalid data. This will help ensure that the user fixes these mistakes before the information is submitted and processed by the server. + +The term "client-side" refers to everything that happens on the user's computer or device, like the part of a website or app you interact with directly. This includes the layout, design, and any interactive features. + +The term "server-side" refers to everything that happens on the server, the computer, or system, that hosts the website or app. This includes processing data, running applications, and handling requests that come from the user's device. + +While client-side validation is important, you also need server-side validation for added security. Malicious users can bypass client-side checks, so robust server-side measures are essential. You'll learn more about this in a later module. For now, let's take a look at some examples of client-side form validation. + +One common example of built-in form validation is to use the `required` attribute in inputs. The `required` attribute specifies that the user needs to fill out that portion of the form before it gets submitted. Here is an example of using the `required` attribute in an email input: + +```html +
+ + + +
+``` + +When the user clicks on the `Submit Form` button without supplying an email address, they will be alerted that the field is required and the form will not be submitted. Each browser will have its own set of styles for showing this alert message. Another advantage of using the email input, is that email inputs have some basic validation to ensure correctly formatted email addresses. It is important to note that browsers only check for basic validation for standard email addresses. It is up to you to add additional layers of validation, which you will learn about in later modules. + +Other forms of validation for email inputs are to use the `size`, `minlength` and `maxlength` attributes. Here is an example using the extra validation: + +```html +
+ + + +
+``` + +The `size` attribute is used to set the physical size for the input container. The `minlength` and `maxlength` attributes are used to set the minimum and maximum length in characters for the email input. If you don't include the minimum length or exceed the max length of characters, the browser will show an alert message. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-forms/672a4cf959443073a6774908.md b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-forms/672a4cf959443073a6774908.md index c1559514cf..8e75a4db2f 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-forms/672a4cf959443073a6774908.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-forms/672a4cf959443073a6774908.md @@ -10,6 +10,42 @@ dashedName: what-are-the-different-form-states Watch the lecture video and answer the questions below. +# --transcript-- + +What are the different form states, and why are they important? + +In HTML, form controls, like inputs, can be in different stages or conditions like a `focused` state, `readonly` state, or `disabled` state. + +The first state would be considered the `default` state. The default state of an email address input is a blank input. That is what the email input looks like when it is first rendered on the page. At this point, the user has not input any information. + +When the user clicks on a form control or selects it with the keyboard's tab key, then that means it is in the `focused` state. When an input is in the `focused` state, most browsers will show a blue highlighted border around the input. But you can choose to add additional styles in CSS. + +Another form state is the `disabled` state. This state shows users that an input cannot be focused or activated. To disable an input, you can add the `disabled` boolean attribute to the element like this: + +```html + +``` + +If the user tries to click on the input, then the focus will not be enabled. Similar to the `focused` state, you can choose to add additional styles for the `disabled` state using CSS. + +Another type of form state is the `readonly` state. This is when a form control, like an input, is not editable by the user. Here is an example of setting an email input to read only: + +```html + +``` + +The `value` attribute is used to set the value shown inside the input field. If you tried to click on the input, you would not be able to edit the existing value. + +A key difference between the `disabled` state and `readonly` state is that `readonly` can be focused while the `disabled` state cannot. + +Understanding the different form states is important because they ensure a smooth user experience by providing clear feedback and guidance while handling errors. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-html-tools/672a4fa7d335bc7cfb63a392.md b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-html-tools/672a4fa7d335bc7cfb63a392.md index 02f33dec43..a9a4a0fed8 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-html-tools/672a4fa7d335bc7cfb63a392.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-html-tools/672a4fa7d335bc7cfb63a392.md @@ -10,6 +10,58 @@ dashedName: what-is-an-html-validator Watch the video lecture and answer the questions below. +# --transcript-- + +What is an HTML validator, and how can it help you debug your code? + +HTML is a very forgiving language – elements still render even when you make mistakes, like forgetting to include a closing tag. + +Let's say you have an `h2` element without a closing tag: + +```html +

Article Topic

+

Subheading 1

+

Subheading 2

+ + +

Subheading 3 +``` + +The `h2` without a closing tag will still render fine. This happens because browsers use a parsing algorithm that handles common errors and tries to render HTML as closely as possible to the author's intention. + +But this could backfire sometimes. Let's add a few paragraphs under the existing heading 2 tags in the code: + +```html +

Article Topic

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, nisi.

+ +

Subheading 1

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. At, doloremque.

+ +

Subheading 2

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde, placeat.

+ + +

Subheading 3 +

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore, illum.

+``` + +As a result, the paragraph element under the `h2` without a closing `h2` tag renders as heading 2. This is why you need an HTML validator. + +An HTML validator is a tool that checks the validity of your HTML code against the standard HTML specifications. It helps you identify errors and warnings in your HTML code, ensuring your web pages are correctly structured and compliant with web standards. + +Using an HTML validator benefits not only you and your future code reviews, but also anybody else going through your code, such as your teammates and open-source contributors. + +There are several HTML validators out there you can use. The most widely accepted one is the `w3.org` markup validation service. + +When you visit the site [`validator.w3.org`](https://validator.w3.org/), you can click on the `Validate by Direct Input` button and paste in your HTML code. + +When you click on the `Check` button, then a list of results will display with the errors that need to be fixed. + +Another HTML validator that you can use is [`jsonformatter.org`](https://jsonformatter.org/). + +You can copy and paste your HTML code inside the first editor, and when you click on the `Validate` button, it will show you any errors you have in your code. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-html-tools/672a511bb408ec81c592eb68.md b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-html-tools/672a511bb408ec81c592eb68.md index 26fd6a6fc4..b411783126 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-html-tools/672a511bb408ec81c592eb68.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-html-tools/672a511bb408ec81c592eb68.md @@ -10,6 +10,52 @@ dashedName: how-to-use-the-dom-inspector-and-devtools Watch the lecture video and answer the questions below. +# --transcript-- + +How do you use the DOM inspector and devtools to debug and build your projects? + +When you are building out your projects, you will frequently run into issues where your programs are not working as expected. + +Programmers often refer to issues as bugs. The process of finding and fixing these bugs is known as debugging. + +To debug your code, you will need to use some tools provided by your browser. + +Two important tools to use would be the DOM inspector and developer tools. + +The DOM inspector allows you to inspect the HTML structure of the page you are on. + +The DOM stands for Document Object Model. It is a tree-like structure that represents the elements on a page. You will learn more about the DOM in later modules. + +The developer tools allow you to inspect the HTML, CSS, and JavaScript of the page you are on. + +Let's take a look at an HTML example that contains a small bug in the anchor element: + +```html +freeCodeCamp curriculum +``` + +When you click on the link, it will lead to a 404 page. A 404 page is an error page that appears when a user tries to access a webpage that doesn't exist on the server. + +The intent is for the link to lead to the freeCodeCamp curriculum. + +To see what the issue might be, you can use the developer tools. + +To open the developer tools in your browser, you can right-click on the page and select `Inspect`. + +You can also use `Control Shift I` on your PC keyboard or `Command Option I` on your Mac. + +When you open developer tools in Google Chrome, you'll see a number of tabs. The first tab is called the `Elements` tab. This tab shows you the HTML structure of the page you are on. + +The second tab is called the `Console` tab. This tab shows you any errors that might be occurring on the page. + +In the situation where you have a broken link, you can check the console to see the error messages for that broken link. The common message that continues to display for the broken link is the 404 error. The 404 error indicates that the page is not found. + +This lets us know that the issue is with the URL in the anchor element. When you inspect the `href` value you will see there is a typo. + +Right now the console message shows `/larn` against a 404, but the correct URL should be `/learn`. When the link is corrected, then it will work as expected. + +You will learn more about working with the developer tools throughout the certification, but this is just a short example on how it can help you debug your code. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-links/6716744f7245947a3dd60009.md b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-links/6716744f7245947a3dd60009.md index 950d3b1275..914d95482a 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-links/6716744f7245947a3dd60009.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-links/6716744f7245947a3dd60009.md @@ -10,6 +10,30 @@ dashedName: what-are-the-different-target-attribute-types Watch the video and answer the questions below. +# --transcript-- + +What are the different `target` attribute types, and how do they work? + +You may have seen the `target` attribute on anchor elements, or links. This important attribute tells the browser where to open the URL for the anchor element: + +```html +Visit freeCodeCamp +``` + +There are four important possible values for this attribute. Note that each value is preceded by an underscore. + +The first value is `_self`, which is the default value. This opens the link in the current browsing context. In most cases, this will be the current tab or window. + +The second value is `_blank`, which opens the link in a new browsing context. Typically, this will open in a new tab. But some users might configure their browsers to open a new window instead. + +The third value is `_parent`, which opens the link in the parent of the current context. For example, if your website has an `iframe`, a `_parent` value in that `iframe` would open in your website's tab/window, not in the embedded frame. + +The fourth value is `_top`, which opens the link in the top-most browsing context - think "the parent of the parent". This is similar to `_parent`, but the link will always open in the full browser tab/window, even for nested embedded frames. + +There is a fifth value, called `_unfencedTop`, which is currently used for the experimental FencedFrame API. At the time of this video, you probably won't have a reason to use this one yet. + +Selecting the right `target` value to control where your users end up is an important consideration when creating a website. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-links/671682dd88e461a8e2620f38.md b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-links/671682dd88e461a8e2620f38.md index 7bc6e9ff7d..e663d54571 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-links/671682dd88e461a8e2620f38.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-links/671682dd88e461a8e2620f38.md @@ -10,6 +10,69 @@ dashedName: what-is-the-difference-between-absolute-and-relative-paths Watch the video and answer the questions below. +# --transcript-- + +What is the different between absolute and relative paths? + +A path is a string that specifies the location of a file or directory in a file system. In web development, paths let developers link to resources like images, stylesheets, scripts, and other web pages. There are absolute and relative paths - both are essential when specifying file locations within a file system. Let's look at the two so you can decide which one of them to use and when. + +An absolute path is a complete link to a resource. It starts from the root directory, includes every other directory, and finally the filename and extension. The "root directory" refers to the top-level directory or folder in a hierarchy. + +An absolute path also includes the protocol - which could be `http`, `https`, and `file` and the domain name if the resource is on the web. Here's an example of an absolute path that links to the freeCodeCamp logo: + +```html + + View fCC Logo + +``` + +In this example, the protocol is `https`, the domain name is `design-style-guide.freecodecamp.org`, and the filename is `fcc_secondary_small.svg`. + +Now, what if the resource you want to link to using an absolute path is on your local machine? Here's how to link to the `about.html` file with an absolute path: + +```html +

+ Read more on the + About Page +

+``` + +It looks like this because we are going into a folder called `Users`, then into a folder called `user`, then into a folder called `Desktop`, then into a folder called `fCC`, then into a folder called `script-code`, then into a folder called `absolute-vs-relative-paths`, then into a folder called `pages` to finally get the `about.html` file. + +Here's what the absolute URL looks like in the browser address bar: + +```sh +file:///Users/user/Desktop/fCC/script-code/absolute-vs-relative-paths/pages/about.html +``` + +The URL includes the protocol, `file://`. It also include the path, which looks like this: `/Users/user/Desktop/fCC/script-code/absolute-vs-relative-paths/pages/`, and represents the series of folders that lead to the file. And finally, it also includes the `about.html`, which is the filename and the extension. + +Now, lets look at the relative path. A relative path specifies the location of a file relative to the directory of the current file. It does not include the protocol or the domain name, making it shorter and more flexible for internal links within the same website. Here's an example of linking to the `about.html` page from the `contact.html` page, both of which are in the same folder: + +```html +

+ Read more on the + About Page +

+``` + +So imagine you are on the `contact.html` page, and because the `about.html` page is in the same place, you simply get the filename. This is an example of using a relative file path. + +So, which should you use and when; an absolute path or a relative path? Here are the rules you should follow: + +- Use absolute paths when linking to a resource hosted on an external website. + +- Use absolute paths when you need the link to a page or resource to work consistently regardless of the document location within the site. + +- Use relative paths when linking to resources within the same website. + +- Use relative paths if you want to keep your code cleaner and easier to maintain during development. + +- Use relative paths during local testing to ensure links work without an internet connection. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md index 9327a2725c..ff8d9357a9 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md @@ -1,6 +1,6 @@ --- id: 6716830dbaf95da9564f2e3b -videoId: GTgzy4wPXcM +videoId: 5EfMkiLB9BA title: What Is the Difference Between Slashes, a Single Dot, and Double Dot in Path Syntax? challengeType: 11 dashedName: what-is-the-difference-between-slashes-a-single-dot-and-double-dot-in-path-syntax @@ -10,6 +10,30 @@ dashedName: what-is-the-difference-between-slashes-a-single-dot-and-double-dot-i Watch the video and answer the questions below. +# --transcript-- + +You may have seen links like `/public/logo.png`, `./script.js`, or `../styles.css` before. But what do these special types of links mean? These are called file paths. There are three key syntaxes to know. First is the slash, which can be a backslash (`\`) or forward slash (`/`) depending on your operating system. The second is the single dot (`.`). And finally, we have the double dot (`..`). + +The slash is known as the "path separator". It is used to indicate a break in the text between folder or file names. This is how your computer knows that `naomis-files/` points to a directory of that same name, while `naomis/files/` points to a `files` directory in the `naomis` directory. + +A single dot points to the current directory, and two dots point to the parent directory. You will typically see a single dot used to ensure that the path is recognized as a relative path. Remember that you learned in a previous lecture about relative versus absolute paths before. + +Double dots, however, are much more common to access files outside of the current working directory. + +For example, given this file tree: + +```sh +my-app/ +├─ public/ +│ ├─ favicon.ico +│ ├─ index.html +├─ src/ +│ ├─ index.css +│ ├─ index.js +``` + +If your `public/index.html` file needed to load the `favicon.ico` file, you would use a relative path with a single dot to access the current directory: `./favicon.ico`. If your `public/index.html` file needed to load the `index.css` file, you would use a relative path with double dots to navigate to the parent `my-app` directory first, then to the `src` directory, and finally to your file: `../src/index.css`. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md index c2d2741e7a..68d8c1f1d3 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md @@ -10,6 +10,26 @@ dashedName: what-are-the-different-link-states Watch the video and answer the questions below. +# --transcript-- + +What are the different link states, and why are they important? + +You may have seen a link on a web page become purple after you click it. This is because the state of the link has changed, so different styling gets applied. There are five different states a link can be in. + +The first is the default state, which is `:link`. This state represents a link which the user has not visited, clicked, or interacted with yet. You can think of this state as providing the base styles for all links on your page. The other states build on top of it. + +The second state is `:visited`, which applies when a user has already visited the page being linked to. By default, this turns the link purple - but you can leverage CSS to provide a different visual indication to the user. This is helpful to let someone know they have already read a portion of your documentation. Or, that the site is one they can trust because they have used it before. + +The third state is `:hover`. This state applies when a user is hovering their cursor over a link. This state is helpful for providing extra attention to a link, to ensure a user actually intends to click it. + +Then we have `:focus`. This state applies when we focus on a link. + +And finally, we have `:active`. This state applies to links that are being activated by the user. This typically means clicking on the link with the primary mouse button by left clicking, in most cases. This state can be helpful for showing a user that the element they clicked on is interactive. + +When you use these states to style your links, there is a specific order you need to write your CSS in: `link`, `visited`, `hover`, `focus`, then `active`. + +You should now know how to give links in your page your own personal flair, while still providing the important information a user needs about the state of each link. + # --questions-- ## --text-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md index 9999634949..4aa306a97c 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md +++ b/curriculum/challenges/swahili/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md @@ -2,7 +2,7 @@ id: 673263e80dd43da7df3ae565 title: How Can You Find the Position of a Substring in a String? challengeType: 11 -videoId: k2QaBPHl_00 +videoId: tTm8t9inci8 dashedName: how-can-you-find-the-position-of-a-substring-in-a-string --- diff --git a/curriculum/challenges/swahili/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md b/curriculum/challenges/swahili/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md index e59a69ece4..76e1f146f4 100644 --- a/curriculum/challenges/swahili/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md +++ b/curriculum/challenges/swahili/25-front-end-development/quiz-computer-basics/66ed8fb9f45ce3ece4053eac.md @@ -39,23 +39,23 @@ Motherboard #### --text-- -Which is not a conventional way to connect a keyboard to the computer? +What are browser developer tools? #### --distractors-- -USB Receiver +Tools for editing browser settings and managing user profiles. --- -Bluetooth +Utilities for blocking ads and improving web page performance. --- -USB Cable +Software for managing browser extensions and plug-ins. #### --answer-- -Ethernet Cable +Built-in features in browsers that help developers debug and inspect websites. ### --question-- @@ -87,25 +87,25 @@ Which of the following is NOT a safe practice when signing in? #### --distractors-- -Using a fingerprint or face scanner +Using a fingerprint or face scanner. --- -Making a long and complex password like `@ppl3_+B@nana34823` +Making a long and complex password like `@ppl3_+B@nana34823`. --- -Utilizing a physical USB security key +Setting up two-factor authentication (2FA). #### --answer-- -Saving passwords in the browser on a public computer +Using passwords based on personal information like your birthday. ### --question-- #### --text-- -Which of the following is not a Web Browser? +Which of the following is NOT a Web Browser? #### --distractors-- @@ -113,11 +113,11 @@ Safari --- -Opera GX +Opera --- -DuckDuckGo +Microsoft Edge #### --answer-- @@ -149,7 +149,7 @@ Visual Studio Code #### --text-- -Which of the following stores and accesses files on the hard drive? +Which of the following is used primarily for managing files stored on a local hard drive? #### --distractors-- @@ -171,45 +171,45 @@ Windows File Explorer #### --text-- -What is not a good practice when naming files for later use? +What is NOT a good practice when naming files? #### --distractors-- -Putting an underscore or hyphen between words +Putting an underscore or hyphen between words. --- -Use a casing style such as camelCase and sticking with it +Use a casing style such as camelCase and sticking with it. --- -Putting a version number at the end of a document like `summaryReport_v2.docx` +Putting a version number at the end of a document like `summaryReport_v2.docx`. #### --answer-- -Being lazy and pounding your keyboard like `asdfloweiueld` to get it over with +Using non-descriptive names like `file1.txt`. ### --question-- #### --text-- -Which of the following is a way to move files? +What does the term "domain name" refer to? #### --distractors-- -Using `Ctrl + X` and `Ctrl + V` (or `Command + X` and `Command + V` on Mac) +A type of software that manages website files and databases. --- -Dragging the file and dropping it at the destination +The physical location of a web server in a data center. --- -Using a terminal command such as `move` (`mv` on Mac) +None of the other choices. #### --answer-- -All of the other choices +The address used to identify websites on the internet. ### --question-- @@ -219,47 +219,47 @@ Which of the following is a way to send a file to the Recycle Bin/Trash? #### --distractors-- -All of the other choices +All of the other choices. --- -Pressing the `Backspace` key on the keyboard +Pressing the `Backspace` key on the keyboard. --- -Moving it to an Archived folder +Moving it to an Archived folder. #### --answer-- -Pressing the `Delete` key on the keyboard (`Command + Delete` on Mac) +Right-click on it and select the Delete/Move to trash option. ### --question-- #### --text-- -Which of the following is not a feature when searching for files locally? +What is a RAM? #### --distractors-- -Using boolean operators like `AND`, `OR`, and `NOT` +A network protocol used for transferring files between devices. --- -Using filters like `*.jpg` +A permanent storage device used for saving files and applications. --- -Using Cortana on Windows or Spotlight Search on Mac +A component in a computer responsible for generating graphics and rendering images. #### --answer-- -Typing the name of the file into your Web Browser and hitting `Enter` +A temporary memory for fast data access by the processor. ### --question-- #### --text-- -What file type will be best suited for writing documentation? +What file type will be best suited for writing a `README` file? #### --distractors-- @@ -281,29 +281,29 @@ What file type will be best suited for writing documentation? #### --text-- -Which of the following is not a configuration file? +What is an Integrated Development Environment (IDE)? #### --distractors-- -`.env` +A platform designed for deploying and hosting web applications. --- -`.build` +A type of hardware device used for testing and debugging electronic circuits. --- -`.yaml` or `.yml` +A version control system that helps developers track changes in source code during software development. #### --answer-- -`.log` +A program that integrates tools for writing, debugging, and running code. ### --question-- #### --text-- -A piece of software that allows you to look at online content is called a: +What is a piece of software that allows you to look at online content called? #### --distractors-- @@ -325,7 +325,7 @@ Web Browser #### --text-- -A piece of software that lists web pages related to a user's query is a called a: +What is a piece of software that lists web pages related to a user's query called? #### --distractors-- @@ -347,7 +347,7 @@ Search Engine #### --text-- -A set of one or more web pages under one domain name is called a: +What is a set of one or more web pages under one domain name called? #### --distractors-- @@ -369,15 +369,15 @@ Website #### --text-- -To search for an exact phrase, you should use what character? +To search for an exact phrase, what should you enclose your search query with? #### --distractors-- -Backtick +Backticks --- -Parenthesis +Parentheses --- @@ -391,65 +391,65 @@ Quotation marks #### --text-- -Which is not a way to install a Web Browser? +Which is NOT a way to install a Web Browser? #### --distractors-- -Using a Package Manager +Using a Package Manager. --- -Directly downloading from the website +Directly downloading from the website. --- -Using an App Store like Microsoft Store +Using an App Store like Microsoft Store. #### --answer-- -Pressing the Network/Internet button in Settings +Pressing the Network/Internet button in Settings. ### --question-- #### --text-- -Which of these peripherals is an input device? +Which of the following formats does NOT preserve image quality after compression? #### --distractors-- -Projector +All of the other choices. --- -Speakers +PNG --- -Monitor +SVG #### --answer-- -Microphone +JPEG ### --question-- #### --text-- -Which of the following lists of parts can all be found in the circuit board? +Which of the following parts can be found in the circuit board? #### --distractors-- -Printer, Router, USB Ports +Printer and Router. --- -Mouse, Keyboard, Monitor +Mouse and Keyboard. --- -Motherboard, Hard Drive, GPU +Hard Drive and GPU. #### --answer-- -BIOS/UEFI Chip, CPU, RAM +CPU and RAM. diff --git a/curriculum/challenges/swahili/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md b/curriculum/challenges/swahili/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md index 449e3fe6e7..f8f31ec1f5 100644 --- a/curriculum/challenges/swahili/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md +++ b/curriculum/challenges/swahili/25-front-end-development/quiz-css-colors/66ed8fe1f45ce3ece4053eb1.md @@ -413,91 +413,59 @@ Which color model includes the `hue` component? #### --text-- -Which of the following is the correct syntax to create a CSS variable with a fallback value? +Which color function also allows you to set the opacity of the color? #### --distractors-- ```css -.element { - color: var(--main-color; red); -} +hsl(0, 20%, 30%, 50%) ``` --- ```css -.element { - color: var(--main-color); -} +rgb(20, 30, 80, 0.5) ``` --- ```css -.element { - color: var(--main-color: red); -} +rgba(20, 30, 80) ``` #### --answer-- ```css -.element { - color: var(--main-color, red); -} +hsla(0, 20%, 30%, 50%) ``` ### --question-- #### --text-- -How can you use CSS variables to dynamically change the color of multiple elements? +Which of the following is the correct way to give an element a top-to-bottom red-to-blue gradient background? #### --distractors-- ```css -:root { - primary-color: blue; -} - -.element1, .element2 { - color: --primary-color; -} +background: radial-gradient(red, blue) ``` --- ```css -body { - --color: blue; -} - -.element1, .element2 { - color: var(color); -} +background: radial-gradient(blue, red) ``` --- ```css -:root { - primary: blue; -} - -.element1, .element2 { - color: var(--primary); -} +background: linear-gradient(blue, red) ``` #### --answer-- ```css -:root { - --primary-color: blue; -} - -.element1, .element2 { - color: var(--primary-color); -} +background: linear-gradient(red, blue) ``` diff --git a/curriculum/challenges/swahili/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md b/curriculum/challenges/swahili/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md index 73d4b048ea..c5957d5c06 100644 --- a/curriculum/challenges/swahili/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md +++ b/curriculum/challenges/swahili/25-front-end-development/quiz-dom-manipulation-and-click-event-with-javascript/66edd07682767adff3a6231e.md @@ -276,7 +276,7 @@ Which of these does not set the element text color to `red`. #### --text-- -In the case of a click event, which `Event` property returns the clicked sub-element that triggerred the parent's callback? +In the case of a click event, which `Event` property returns the clicked sub-element that triggered the parent's callback? #### --distractors-- @@ -427,7 +427,7 @@ The first parameter is the function callback and the second is the delay duratio --- -`setTimeout` calls a function once after a delay and `setInterval` call a function continously after an interval delay. +`setTimeout` calls a function once after a delay and `setInterval` call a function continuously after an interval delay. --- diff --git a/curriculum/challenges/swahili/25-front-end-development/quiz-javascript-objects/66edcd0ecb4b25dc64a34804.md b/curriculum/challenges/swahili/25-front-end-development/quiz-javascript-objects/66edcd0ecb4b25dc64a34804.md index 04ccf94347..ed8a322ec7 100644 --- a/curriculum/challenges/swahili/25-front-end-development/quiz-javascript-objects/66edcd0ecb4b25dc64a34804.md +++ b/curriculum/challenges/swahili/25-front-end-development/quiz-javascript-objects/66edcd0ecb4b25dc64a34804.md @@ -17,7 +17,7 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -Which of the following does not describe an object in Javascript? +Which of the following does not describe an object in JavaScript? #### --distractors-- @@ -29,11 +29,11 @@ A container for properties and methods --- -One of Javascript's data types +One of JavaScript's data types #### --answer-- -One of Javascript's primitives +One of JavaScript's primitives ### --question-- diff --git a/curriculum/challenges/swahili/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md b/curriculum/challenges/swahili/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md index c84a01b0e9..20d4ffa285 100644 --- a/curriculum/challenges/swahili/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md +++ b/curriculum/challenges/swahili/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md @@ -17,7 +17,7 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo #### --text-- -What is JavaScript? +Which of the following best describes JavaScript? #### --distractors-- @@ -33,7 +33,7 @@ A database management system. #### --answer-- -A programming language primarily used for web development. +A programming language used for web development. ### --question-- @@ -43,19 +43,19 @@ Which of the following is NOT a JavaScript data type? #### --distractors-- -`null` +`Number` --- -`undefined` +`Undefined` --- -`bigInt` +`Object` #### --answer-- -`double` +`Double` ### --question-- @@ -77,29 +77,29 @@ Which of the following is NOT a valid JavaScript variable declaration? #### --answer-- -`public final Long x;` +`public Int x;` ### --question-- #### --text-- -Which of the following is a conventional variable name in JavaScript? +Which of the following is a common naming convention for variables in JavaScript? #### --distractors-- -`my_var` +JavaScript case --- -`my-var` +Lightning case --- -`MyVar` +Giraffe case #### --answer-- -`myVar` +Camel case ### --question-- @@ -127,28 +127,23 @@ What is the difference between `let` and `const` variable declarations in JavaSc #### --text-- -What would be the outcome of the following code? - -```js -let name = "Andy"; -name[0] = "M"; -``` +Why are strings considered immutable in JavaScript? #### --distractors-- -The value of `name` would be `"MAndy"`. +You cannot create strings using variables. --- -The value of `name` would be `"Mndy"`. +Strings can only be created using literals. --- -The value of `name` would still be `"Andy"`. +You can change strings, but only through global variables. #### --answer-- -It would throw an error. +Once a string is created, you cannot change its characters directly. ### --question-- @@ -186,7 +181,7 @@ console.log(hello); #### --distractors-- -Reassigns `world` to the variable `hello`, and prints it out in the console. +Reassigns `" world"` to the variable `hello`, and prints it out in the console. --- @@ -194,33 +189,33 @@ Prints out the number of characters in `Hello world` in the console. --- -Adds the string `world` to the variable `hello`, and prints it out in the console. +Combines `"Hello"` and `" world"` into a new string and prints it, but the value of `hello` remains `"Hello"`. #### --answer-- -Creates a new string that is made of the values of `hello` and `" world"` combined together, and assigns this new string back to `hello` and then prints it out in the console. +Combines the current value of `hello` with the string `" world"`, reassigns it to `hello`, and prints it to the console. ### --question-- #### --text-- -Are semicolons required in JavaScript? +Which JavaScript character is used to mark the end of a statement? #### --distractors-- -Yes. The code won't work without semicolons. +`:` --- -Semicolons are sometimes required in JavaScript. +`,` --- -No. It's recommended not to use semicolons in JavaScript. +`.` #### --answer-- -No, but it is generally recommended to use semicolons consistently to avoid potential issues in code. +`;` ### --question-- @@ -264,7 +259,7 @@ JavaScript performs type checking before execution, meaning type related errors #### --answer-- -You don't need to declare the data type of a variable before using it. JavaScript infers the type based on the value assigned to the variable. +JavaScript infers the type based on the value assigned to the variable. ### --question-- @@ -410,7 +405,7 @@ Which of the following is NOT a valid string concatenation method in JavaScript? --- -``console.log(`${string1} ${string2}`);`` +`console.log("string1 " + string2);` --- @@ -424,7 +419,7 @@ Which of the following is NOT a valid string concatenation method in JavaScript? #### --text-- -Which of the following variable names uses camelCase correctly? +Which of the following variable names uses camel case correctly? #### --distractors-- @@ -446,23 +441,23 @@ Which of the following variable names uses camelCase correctly? #### --text-- -Which character JavaScript uses to mark the end of a statement? +Why is it beneficial to use semicolons explicitly even though JavaScript has Automatic Semicolon Insertion? #### --distractors-- -`:` +To increase the execution speed of the code. --- -`,` +To maintain consistency with other programming languages. --- -`.` +To allow for better debugging and error tracing. #### --answer-- -`;` +To improve code readability and reliability. ### --question-- @@ -485,4 +480,3 @@ Which of the following is NOT a JavaScript data type? #### --answer-- `Float` - diff --git a/curriculum/challenges/swahili/25-front-end-development/quiz-semantic-html/66ed903cf45ce3ece4053ebe.md b/curriculum/challenges/swahili/25-front-end-development/quiz-semantic-html/66ed903cf45ce3ece4053ebe.md index 9ea0ef0e53..79a4bd220d 100644 --- a/curriculum/challenges/swahili/25-front-end-development/quiz-semantic-html/66ed903cf45ce3ece4053ebe.md +++ b/curriculum/challenges/swahili/25-front-end-development/quiz-semantic-html/66ed903cf45ce3ece4053ebe.md @@ -391,7 +391,7 @@ Which of the following elements represents a description term inside a descripti #### --text-- -What is the role of the idiomatic text element? +What is the role of the `i` element? #### --distractors-- diff --git a/curriculum/challenges/swahili/25-front-end-development/review-form-validation-with-javascript/6723ce555ff2dfc0cc04b69a.md b/curriculum/challenges/swahili/25-front-end-development/review-form-validation-with-javascript/6723ce555ff2dfc0cc04b69a.md index 9c220360ea..e8b56c6cae 100644 --- a/curriculum/challenges/swahili/25-front-end-development/review-form-validation-with-javascript/6723ce555ff2dfc0cc04b69a.md +++ b/curriculum/challenges/swahili/25-front-end-development/review-form-validation-with-javascript/6723ce555ff2dfc0cc04b69a.md @@ -91,7 +91,7 @@ button.addEventListener('click',(event) => { ``` -- **`enctype` Attribute**: The `form` element accepts an `enctype` attribute, which represents the encoding type to use for the data. This attribute only accepts three values: `application/x-www-form-urlencoded` (which is the default, sending the data as a URL-encoded form body), `text/plain` (which sends the data in plaintext form, in `name=value` pairs separated by new lines), or `mulitpart/form-data`, which is specifically for handling forms with a file upload. +- **`enctype` Attribute**: The `form` element accepts an `enctype` attribute, which represents the encoding type to use for the data. This attribute only accepts three values: `application/x-www-form-urlencoded` (which is the default, sending the data as a URL-encoded form body), `text/plain` (which sends the data in plaintext form, in `name=value` pairs separated by new lines), or `multipart/form-data`, which is specifically for handling forms with a file upload. # --assignment-- diff --git a/curriculum/challenges/swahili/25-front-end-development/review-javascript-comparisons-and-conditionals/6723c554025f449f4f39c3f5.md b/curriculum/challenges/swahili/25-front-end-development/review-javascript-comparisons-and-conditionals/6723c554025f449f4f39c3f5.md index 5ebdbeb3cc..94e4249f6d 100644 --- a/curriculum/challenges/swahili/25-front-end-development/review-javascript-comparisons-and-conditionals/6723c554025f449f4f39c3f5.md +++ b/curriculum/challenges/swahili/25-front-end-development/review-javascript-comparisons-and-conditionals/6723c554025f449f4f39c3f5.md @@ -28,7 +28,7 @@ console.log(null === undefined); // false ## `switch` Statements -- **Definition**: A `switch` statement evaluates an expression and matches its value against a series of `case` clauses. When a match is found, the code block associated with that case is executed. +- **Definition**: A `switch` statement evaluates an expression and matches its value against a series of `case` clauses. When a match is found, the code block associated with that case is executed. A `break` statement should be placed at the end of each case, to terminate its execution and continue with the next. The `default` case is an optional case and only executes if none of the other cases match. The `default` case is placed at the end of a `switch` statement. ```js const dayOfWeek = 3; diff --git a/curriculum/challenges/swahili/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md b/curriculum/challenges/swahili/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md index 8579e569a2..3d41c6a64e 100644 --- a/curriculum/challenges/swahili/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md +++ b/curriculum/challenges/swahili/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md @@ -2126,7 +2126,7 @@ button.addEventListener('click',(event) => { ``` -- **`enctype` Attribute**: The `form` element accepts an `enctype` attribute, which represents the encoding type to use for the data. This attribute only accepts three values: `application/x-www-form-urlencoded` (which is the default, sending the data as a URL-encoded form body), `text/plain` (which sends the data in plaintext form, in `name=value` pairs separated by new lines), or `mulitpart/form-data`, which is specifically for handling forms with a file upload. +- **`enctype` Attribute**: The `form` element accepts an `enctype` attribute, which represents the encoding type to use for the data. This attribute only accepts three values: `application/x-www-form-urlencoded` (which is the default, sending the data as a URL-encoded form body), `text/plain` (which sends the data in plaintext form, in `name=value` pairs separated by new lines), or `multipart/form-data`, which is specifically for handling forms with a file upload. ## The `date()` Object and Common Methods diff --git a/curriculum/challenges/swahili/25-front-end-development/review-semantic-html/671a83934b61f64cefe87a61.md b/curriculum/challenges/swahili/25-front-end-development/review-semantic-html/671a83934b61f64cefe87a61.md index 22f275bcb5..9649027bef 100644 --- a/curriculum/challenges/swahili/25-front-end-development/review-semantic-html/671a83934b61f64cefe87a61.md +++ b/curriculum/challenges/swahili/25-front-end-development/review-semantic-html/671a83934b61f64cefe87a61.md @@ -33,7 +33,7 @@ Review the concepts below to prepare for the upcoming quiz. - **Abbreviation (`abbr`) element**: used to represent an abbreviation or acronym. - **Contact Address (`address`) element**: used to represent the contact information. - **(Date) Time (`time`) element**: used to represent a date and/or time. The `datetime` attribute is used to translate dates and times into a machine-readable format. -- **ISO 8601 Date (`datetime`) attribute**: used to represent dates and times in a machine-readable format. The standard format is `YYYY-MM-DDThh:mm:ss`. +- **ISO 8601 Date (`datetime`) attribute**: used to represent dates and times in a machine-readable format. The standard format is `YYYY-MM-DDThh:mm:ss`, with the capital `T` being a separator between the date and time. - **Superscript (`sup`) element**: used to represent superscript text. - **Subscript (`sub`) element**: used to represent subscript text. - **Inline Code (`code`) element**: used to represent a fragment of computer code. diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-cat-photo-app/5ef9b03c81a63668521804d2.md b/curriculum/challenges/swahili/25-front-end-development/workshop-cat-photo-app/5ef9b03c81a63668521804d2.md index 8841cff630..d414bd8b0e 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-cat-photo-app/5ef9b03c81a63668521804d2.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-cat-photo-app/5ef9b03c81a63668521804d2.md @@ -9,7 +9,7 @@ dashedName: step-29 The code for an ordered list (`ol`) is similar to an unordered list, but list items in an ordered list are numbered when displayed. -After the second `section` element's last `h3` element, add an ordered list with these three list items: +Below the `h3` element, add an ordered list with these three list items: `flea treatment` `thunder` `other cats` diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a8290a27c2c625e2355042.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a8290a27c2c625e2355042.md index f0cf12ecf2..c1b2c605f2 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a8290a27c2c625e2355042.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a8290a27c2c625e2355042.md @@ -8,7 +8,7 @@ demoType: onLoad # --description-- -In this workshop, you will learn how to work with HTML forms by building a Hotel Feedback Form. +In this workshop, you will practice working with HTML forms by building a Hotel Feedback Form. Start by adding the `` followed by an `html` element with a `lang` attribute of `en`. diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a83601cd819e37f0dccd14.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a83601cd819e37f0dccd14.md index 1e09282fb9..3c2e0dc8f7 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a83601cd819e37f0dccd14.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a83601cd819e37f0dccd14.md @@ -45,14 +45,14 @@ Your `h1` element should have the text `Hotel Feedback Form`. ```js const h1 = document.querySelector('h1'); -assert.strictEqual(h1.innerText, 'Hotel Feedback Form'); +assert.strictEqual(h1?.innerText, 'Hotel Feedback Form'); ``` Your `h1` element should be inside the `header` element. ```js const h1 = document.querySelector('h1'); -assert.strictEqual(h1.parentElement.tagName, 'HEADER'); +assert.strictEqual(h1?.parentElement.tagName, 'HEADER'); ``` You should have an opening `p` tag. @@ -71,14 +71,21 @@ Your paragraph element should have the text `Thank you for staying with us. Plea ```js const pElement = document.querySelector('header p'); -assert.strictEqual(pElement.innerText, 'Thank you for staying with us. Please provide feedback on your recent stay.'); +assert.strictEqual(pElement?.innerText, 'Thank you for staying with us. Please provide feedback on your recent stay.'); ``` Your paragraph element should be inside your `header`. ```js const pElement = document.querySelector('p'); -assert.strictEqual(pElement.parentElement.tagName, 'HEADER'); +assert.strictEqual(pElement?.parentElement.tagName, 'HEADER'); +``` + +Your paragraph element should come after your `h1`. + +```js +const pElement = document.querySelector('p'); +assert.strictEqual(pElement?.previousElementSibling.tagName, 'H1'); ``` @@ -94,9 +101,9 @@ assert.strictEqual(pElement.parentElement.tagName, 'HEADER'); Hotel Feedback Form - --fcc-editable-region-- +--fcc-editable-region-- - --fcc-editable-region-- +--fcc-editable-region-- ``` diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a83bdcf425e7446900b7c4.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a83bdcf425e7446900b7c4.md index c09dc6997b..bdc2fba7ec 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a83bdcf425e7446900b7c4.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a83bdcf425e7446900b7c4.md @@ -41,14 +41,14 @@ Your `form` element should have an `action` attribute set to `"https://hotel-fee ```js const formElement = document.querySelector('form'); -assert.strictEqual(formElement.getAttribute('action'), 'https://hotel-feedback.freecodecamp.org'); +assert.strictEqual(formElement?.getAttribute('action'), 'https://hotel-feedback.freecodecamp.org'); ``` Your `form` element should have a `method` attribute set to `"POST"`. ```js const formElement = document.querySelector('form'); -assert.strictEqual(formElement.getAttribute('method'), 'POST'); +assert.strictEqual(formElement?.getAttribute('method'), 'POST'); ``` # --seed-- diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a83e5e491625454b6f62c3.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a83e5e491625454b6f62c3.md index 28684b162d..33d5acbad6 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a83e5e491625454b6f62c3.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a83e5e491625454b6f62c3.md @@ -7,7 +7,7 @@ dashedName: step-7 # --description-- -Forms consist of `inputs` where users can input their data. You can group related inputs together using the fieldset element. +Forms consist of `inputs` where users can input their data. You can group related inputs together using the `fieldset` element. Here is an example of using a `fieldset` element: diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a83fec026a7a4631e084d2.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a83fec026a7a4631e084d2.md index 73b775f532..4521ce9b08 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a83fec026a7a4631e084d2.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a83fec026a7a4631e084d2.md @@ -7,7 +7,7 @@ dashedName: step-8 # --description-- -When working with `fieldset` elements, it is common to use a caption to describe the group of inputs. You can use the legend element for this. +When working with `fieldset` elements, it is common to use a caption to describe the group of inputs. You can use the `legend` element for this. Here is an example of using a `legend` element: @@ -46,7 +46,7 @@ Your `legend` element should contain the text `Personal Information`. ```js const legend = document.querySelector('fieldset legend'); -assert.strictEqual(legend.innerText, 'Personal Information'); +assert.strictEqual(legend?.innerText, 'Personal Information'); ``` # --seed-- diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a84111965a0c46df6bbd0a.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a84111965a0c46df6bbd0a.md index 814a500559..f31e805a48 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a84111965a0c46df6bbd0a.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a84111965a0c46df6bbd0a.md @@ -16,7 +16,7 @@ In the previous lecture videos, you learned how to associate a `label` element w The `for` attribute on the `label` element should match the `id` attribute on the `input` element. This is known as an explicit association. -Below your `legend` element, add a `label` element with the text of `Name (required):`. For the `for` attribute, set it to the value of `"full-name"`. +Below your `legend` element, add a `label` element with the text of `Name (required):`. Set its `for` attribute to the value of `"full-name"`. Then below your `label` element, add an `input` element with no attributes. In the next steps, you will add the necessary attributes. @@ -34,30 +34,30 @@ You should have a closing `label` tag. assert.match(code, /<\/label>/); ``` -Your `label` element should be inside the `fieldset` element. +Your `label` element should be placed below your `legend` inside the `fieldset` element. ```js -assert.isNotNull(document.querySelector('fieldset label')); +assert.isNotNull(document.querySelector('fieldset legend + label')); ``` Your `label` element should have a `for` attribute with the value of `"full-name"`. ```js -const label = document.querySelector('fieldset label'); -assert.strictEqual(label.getAttribute('for'), 'full-name'); +const label = document.querySelector('fieldset legend + label'); +assert.strictEqual(label?.getAttribute('for'), 'full-name'); ``` Your `label` element should have the text of `Name (required):`. ```js -const label = document.querySelector('fieldset label'); -assert.strictEqual(label.innerText, 'Name (required):'); +const label = document.querySelector('fieldset legend + label'); +assert.strictEqual(label?.innerText, 'Name (required):'); ``` -You should have an `input` element. +You should have an `input` element below your `label` element. ```js -assert.isNotNull(document.querySelector('fieldset input')); +assert.isNotNull(document.querySelector('fieldset label + input')); ``` # --seed-- diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a930b20f589b6664c51cb0.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a930b20f589b6664c51cb0.md index 90a2005f89..1cbcfb47d4 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a930b20f589b6664c51cb0.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a930b20f589b6664c51cb0.md @@ -37,14 +37,14 @@ Your `input` element should have a `type` attribute with the value of `"text"`. ```js const input = document.querySelector('fieldset input'); -assert.strictEqual(input.getAttribute('type'), 'text'); +assert.strictEqual(input?.getAttribute('type'), 'text'); ``` Your `input` element should have an `id` attribute with the value of `"full-name"`. ```js const input = document.querySelector('fieldset input'); -assert.strictEqual(input.getAttribute('id'), 'full-name'); +assert.strictEqual(input?.getAttribute('id'), 'full-name'); ``` # --seed-- diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a93730719e1f68410cce54.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a93730719e1f68410cce54.md index 18f06cf3fa..4b1fd523b8 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a93730719e1f68410cce54.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a93730719e1f68410cce54.md @@ -35,7 +35,7 @@ Your `input` element should have a `name` attribute with the value of `"name"`. ```js const input = document.querySelector('fieldset input'); -assert.strictEqual(input.getAttribute('name'), 'name'); +assert.strictEqual(input?.getAttribute('name'), 'name'); ``` # --seed-- diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a937e74920ba68ebe5e86d.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a937e74920ba68ebe5e86d.md index b56ada8b67..289e74fd3a 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a937e74920ba68ebe5e86d.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a937e74920ba68ebe5e86d.md @@ -28,7 +28,7 @@ assert.isNotNull(document.querySelector('fieldset input')); Your `input` should have a `placeholder` attribute with the value of `"Ex. John Doe"`. ```js -assert.strictEqual(document.querySelector('fieldset input').getAttribute('placeholder'), 'Ex. John Doe'); +assert.strictEqual(document.querySelector('fieldset input')?.getAttribute('placeholder'), 'Ex. John Doe'); ``` Your `input` should have a `required` attribute. diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a93bbe65a26169dbf3bc39.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a93bbe65a26169dbf3bc39.md index ed20054707..bbc8436bdf 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a93bbe65a26169dbf3bc39.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a93bbe65a26169dbf3bc39.md @@ -22,13 +22,13 @@ assert.strictEqual(document.querySelectorAll('fieldset label').length, 2); Your `label` element should have the text `Email address (required):`. ```js -assert.strictEqual(document.querySelector('fieldset label:nth-of-type(2)').innerText, 'Email address (required):'); +assert.strictEqual(document.querySelector('fieldset label:nth-of-type(2)')?.innerText, 'Email address (required):'); ``` Your `label` element should have a `for` attribute set to the value of `"email"`. ```js -assert.strictEqual(document.querySelector('fieldset label[for="email"]').getAttribute('for'), 'email'); +assert.strictEqual(document.querySelector('fieldset label[for="email"]')?.getAttribute('for'), 'email'); ``` # --seed-- @@ -56,9 +56,9 @@ assert.strictEqual(document.querySelector('fieldset label[for="email"]').getAttr Personal Information - --fcc-editable-region-- +--fcc-editable-region-- - --fcc-editable-region-- +--fcc-editable-region-- diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a93c95bc58e26a8fe95818.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a93c95bc58e26a8fe95818.md index d122f46cef..5e9cb356cb 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a93c95bc58e26a8fe95818.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a93c95bc58e26a8fe95818.md @@ -7,7 +7,7 @@ dashedName: step-14 # --description-- -Next, add an `input` with the type of `"email"` to the form. This `input` should have an `id` attribute set to the value of `"email"`. Also, set the `name` attribute to the value of `"email"`. +Next, add an `input` with the type of `"email"` below your email `label`. This `input` should have an `id` attribute set to the value of `"email"`. Also, set the `name` attribute to the value of `"email"`. This `input` is also required, so make sure to add the `required` attribute. @@ -15,10 +15,10 @@ Finally, add a `placeholder` attribute set to `"example@email.com"`. # --hints-- -You should have an `input` element. +You should have an `input` element below your email `label`. ```js -assert.strictEqual(document.querySelectorAll('input').length, 2); +assert.isNotNull(document.querySelector('label[for="email"] + input')); ``` Your `input` element should have a `type` of `"email"`. @@ -42,13 +42,13 @@ assert.isNotNull(document.querySelector('input[name="email"]')); Your `input` element should have a `required` attribute. ```js -assert.strictEqual(document.querySelector('input#email').getAttribute('required'), ""); +assert.strictEqual(document.querySelector('input#email')?.getAttribute('required'), ""); ``` Your `input` element should have a `placeholder` attribute set to `"example@email.com"`. ```js -assert.strictEqual(document.querySelector('input#email').getAttribute('placeholder'), "example@email.com"); +assert.strictEqual(document.querySelector('input#email')?.getAttribute('placeholder'), "example@email.com"); ``` # --seed-- diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9401c9d660d6bb15993e2.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9401c9d660d6bb15993e2.md index 55d86baeaf..c2be185bf2 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9401c9d660d6bb15993e2.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9401c9d660d6bb15993e2.md @@ -30,7 +30,7 @@ assert.isNotNull(document.querySelector('label[for="age"]')); Your `label` element should have the text `Age (optional):`. ```js -assert.strictEqual(document.querySelector('label[for="age"]').textContent, "Age (optional):"); +assert.strictEqual(document.querySelector('label[for="age"]')?.textContent, "Age (optional):"); ``` # --seed-- @@ -67,9 +67,9 @@ assert.strictEqual(document.querySelector('label[for="age"]').textContent, "Age type="email" name="email" /> - --fcc-editable-region-- +--fcc-editable-region-- - --fcc-editable-region-- +--fcc-editable-region-- diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9419e2d18476c645ce693.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9419e2d18476c645ce693.md index 67816a92f2..cb2ad9a5cc 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9419e2d18476c645ce693.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9419e2d18476c645ce693.md @@ -23,34 +23,34 @@ The `name` attribute should be set to `"age"`, the `min` attribute should be set # --hints-- -You should have a number `input`. +You should have a number `input` below your `label` element. ```js -assert.isNotNull(document.querySelector('input[type="number"]')); +assert.isNotNull(document.querySelector('label + input[type="number"]')); ``` Your number `input` should have an `id` of `age`. ```js -assert.isNotNull(document.querySelector('input#age')); +assert.isNotNull(document.querySelector('label + input#age')); ``` Your number `input` should have a `name` attribute set to `age`. ```js -assert.isNotNull(document.querySelector('input[name="age"]')); +assert.isNotNull(document.querySelector('label + input[name="age"]')); ``` Your number `input` should have a `min` attribute set to `"3"`. ```js -assert.isNotNull(document.querySelector('input[min="3"]')); +assert.isNotNull(document.querySelector('label + input[min="3"]')); ``` Your number `input` should have a `max` attribute set to `"100"`. ```js -assert.isNotNull(document.querySelector('input[max="100"]')); +assert.isNotNull(document.querySelector('label + input[max="100"]')); ``` # --seed-- diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a94ea5df66236ebed260e8.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a94ea5df66236ebed260e8.md index c77341470d..516d5dcefb 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a94ea5df66236ebed260e8.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a94ea5df66236ebed260e8.md @@ -24,13 +24,13 @@ assert.strictEqual(document.querySelectorAll('fieldset').length, 2); You should have a `legend` element inside of your `fieldset` element. ```js -assert.strictEqual(document.querySelectorAll('legend').length, 2); +assert.strictEqual(document.querySelectorAll('fieldset legend').length, 2); ``` Your `legend` element should have the text of `Was this your first time at our hotel?`. ```js -assert.strictEqual(document.querySelectorAll('legend')[1].textContent, 'Was this your first time at our hotel?'); +assert.strictEqual(document.querySelectorAll('fieldset legend')[1]?.textContent, 'Was this your first time at our hotel?'); ``` # --seed-- diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9521bc70162712caf118d.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9521bc70162712caf118d.md index 6e0dd0ea94..be03921785 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9521bc70162712caf118d.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9521bc70162712caf118d.md @@ -26,40 +26,40 @@ Below your `label` element, add a `radio` button with the `id` set to `"yes-opti # --hints-- -You should have a `label` element inside your `fieldset` element. +You should have a `label` element below your `legend` element. ```js -assert(document.querySelector('fieldset:nth-of-type(2) label')); +assert(document.querySelector('fieldset:nth-of-type(2) legend + label')); ``` Your `label` element should have a `for` attribute set to `"yes-option"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label').htmlFor, 'yes-option'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) legend + label')?.htmlFor, 'yes-option'); ``` Your `label` element should have the text `Yes`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label').innerText, 'Yes'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) legend + label')?.innerText, 'Yes'); ``` -You should have a `radio` button inside your `fieldset` element. +You should have a `radio` button below your `label` element. ```js -assert(document.querySelector('fieldset:nth-of-type(2) input[type="radio"]')); +assert(document.querySelector('fieldset:nth-of-type(2) label + input[type="radio"]')); ``` Your `radio` button should have an `id` attribute set to `"yes-option"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input[type="radio"]').id, 'yes-option'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input[type="radio"]')?.id, 'yes-option'); ``` Your `radio` button should have a `name` attribute set to `"hotel-stay"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input[type="radio"]').name, 'hotel-stay'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input[type="radio"]')?.name, 'hotel-stay'); ``` # --seed-- diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a954b2bcddba72076c1857.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a954b2bcddba72076c1857.md index 9a7249775f..15aeceb858 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a954b2bcddba72076c1857.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a954b2bcddba72076c1857.md @@ -15,46 +15,46 @@ When you are finished, you can now try out the radio buttons by selecting one op # --hints-- -You should have a `label` element inside your `fieldset` element. +You should have a `label` element below your first radio button. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(2) label').length, 2); +assert.isNotNull(document.querySelector('fieldset:nth-of-type(2) input[type="radio"] + label')); ``` Your `label` should have a `for` attribute set to `"no-option"`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(2) label[for="no-option"]').length, 1); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input[type="radio"] + label')?.htmlFor, "no-option"); ``` Your `label` should have the text of `No`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label[for="no-option"]').textContent, 'No'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input[type="radio"] + label[for="no-option"]')?.textContent, 'No'); ``` -You should have a second `input` inside your `fieldset` element. +You should have a second `input` below your second `label` element. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(2) input').length, 2); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(2) label + input').length, 2); ``` Your `input` should have a `type` of `radio`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input:nth-of-type(2)').getAttribute('type'), 'radio'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input:nth-of-type(2)')?.getAttribute('type'), 'radio'); ``` Your `input` should have an `id` of `"no-option"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input:nth-of-type(2)').id, 'no-option'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input:nth-of-type(2)')?.id, 'no-option'); ``` Your `input` should have a `name` of `"hotel-stay"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input:nth-of-type(2)').name, 'hotel-stay'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) label + input:nth-of-type(2)')?.name, 'hotel-stay'); ``` # --seed-- diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9577022877d72d8f43b4f.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9577022877d72d8f43b4f.md index 36ed5a484b..a99326453e 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9577022877d72d8f43b4f.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9577022877d72d8f43b4f.md @@ -30,7 +30,7 @@ assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) legend').l Your `legend` element should have the text of `Why did you choose to stay at our hotel? (Check all that apply)`. Double check for spelling errors and spacing issues. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) legend').innerText, 'Why did you choose to stay at our hotel? (Check all that apply)'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) legend')?.innerText, 'Why did you choose to stay at our hotel? (Check all that apply)'); ``` # --seed-- diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a95d0eff8168747805f1f3.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a95d0eff8168747805f1f3.md index f4f732b9ca..48aebd3f85 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a95d0eff8168747805f1f3.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a95d0eff8168747805f1f3.md @@ -29,47 +29,47 @@ Below your `label` element, add a checkbox input with the `id`, `name` and `valu # --hints-- -You should have a `label` element inside your `fieldset`. +You should have a `label` element below your `legend`. ```js -assert(document.querySelector("fieldset:nth-of-type(3) label")); +assert(document.querySelector("fieldset:nth-of-type(3) legend + label")); ``` Your `label` element should have the text of `Social Media Ads`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label").textContent, "Social Media Ads"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) legend + label")?.textContent, "Social Media Ads"); ``` Your `label` element should have a `for` attribute set to `"ads"`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label").getAttribute("for"), "ads"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) legend + label")?.getAttribute("for"), "ads"); ``` -You should have a checkbox `input` inside your `fieldset`. +You should have a checkbox `input` below your `label`. ```js -const inputElement = document.querySelector("fieldset:nth-of-type(3) input[type='checkbox']"); -assert.strictEqual(inputElement.parentElement.tagName, "FIELDSET"); +const inputElement = document.querySelector("fieldset:nth-of-type(3) label + input[type='checkbox']"); +assert.strictEqual(inputElement?.parentElement.tagName, "FIELDSET"); ``` Your checkbox should have an `id` attribute set to `"ads"`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input[type='checkbox']").id, "ads"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input[type='checkbox']")?.id, "ads"); ``` Your checkbox should have a `name` attribute set to `"ads"`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input[type='checkbox']").name, "ads"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input[type='checkbox']")?.name, "ads"); ``` Your checkbox should have a `value` attribute set to `"ads"`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input[type='checkbox']").value, "ads"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input[type='checkbox']")?.value, "ads"); ``` # --seed-- diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a96127422411756204bc1b.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a96127422411756204bc1b.md index 4012e9bb8e..53b29257fb 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a96127422411756204bc1b.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a96127422411756204bc1b.md @@ -13,46 +13,46 @@ Below the `label` element, add another checkbox `input` with the `id`, `name` an # --hints-- -You should have a `label` element. +You should have a `label` element below your checkbox. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label").length, 2); +assert.isNotNull(document.querySelector('fieldset:nth-of-type(3) input[type="checkbox"] + label')); ``` Your `label` element should have the text of `Personal Recommendation`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label")[1].textContent, "Personal Recommendation"); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[type="checkbox"] + label')?.textContent, "Personal Recommendation"); ``` Your `label` element should have a `for` attribute set to `"recommendation"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label")[1].getAttribute("for"), "recommendation"); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[type="checkbox"] + label')?.getAttribute("for"), "recommendation"); ``` -You should have a checkbox `input`. +You should have a checkbox `input` below your `label`. ```js -assert(document.querySelector("fieldset:nth-of-type(3) input:nth-of-type(2)[type='checkbox']")); +assert(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(2)[type='checkbox']")); ``` Your checkbox should have an `id` set to `"recommendation"`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input:nth-of-type(2)[type='checkbox']").id, "recommendation"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(2)[type='checkbox']")?.id, "recommendation"); ``` Your checkbox should have a `name` attribute set to `"recommendation"`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input:nth-of-type(2)[type='checkbox']").name, "recommendation"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(2)[type='checkbox']")?.name, "recommendation"); ``` Your checkbox should have a `value` attribute set to `"recommendation"`. ```js -assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) input:nth-of-type(2)[type='checkbox']").value, "recommendation"); +assert.strictEqual(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(2)[type='checkbox']")?.value, "recommendation"); ``` # --seed-- diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a962954f4e0d76223b37ed.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a962954f4e0d76223b37ed.md index 9bfa016532..02634469d8 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a962954f4e0d76223b37ed.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a962954f4e0d76223b37ed.md @@ -20,73 +20,73 @@ For the checkbox `input`, both the `id`, `name` and `value` attributes should be You should have a `label` element with the text of `Location`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[2].textContent, 'Location'); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[2]?.textContent, 'Location'); ``` Your `label` should have the `for` attribute set to `"location"`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[2].getAttribute('for'), 'location'); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[2]?.getAttribute('for'), 'location'); ``` -You should have a third checkbox `input`. +You should have a third checkbox `input` after your `label`. ```js -assert(document.querySelector("fieldset:nth-of-type(3) input:nth-of-type(3)[type='checkbox']")); +assert(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(3)[type='checkbox']")); ``` Your third checkbox input should have an `id` set to `"location"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[2].getAttribute('id'), 'location'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[2]?.getAttribute('id'), 'location'); ``` Your third checkbox should have a `name` of `"location"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[2].getAttribute('name'), 'location'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[2]?.getAttribute('name'), 'location'); ``` Your third checkbox should have a `value` of `"location"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[2].getAttribute('value'), 'location'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[2]?.getAttribute('value'), 'location'); ``` -You should have a `label` element with the text of `Reputation`. +You should have a `label` element with the text of `Reputation` below the location checkbox. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[3].textContent, 'Reputation'); +assert.isNotNull(document.querySelectorAll('fieldset:nth-of-type(3) input[value="location"] + label')?.textContent, 'Reputation'); ``` Your `label` should have the `for` attribute set to `"reputation"`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[3].getAttribute('for'), 'reputation'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[value="location"] + label')?.getAttribute('for'), 'reputation'); ``` -You should have a fourth checkbox `input`. +You should have a fourth checkbox `input` below your `label`. ```js -assert(document.querySelector("fieldset:nth-of-type(3) input:nth-of-type(4)[type='checkbox']")); +assert(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(4)[type='checkbox']")); ``` You should have a fourth checkbox `input` with an `id` of `"reputation"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[3].getAttribute('id'), 'reputation'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[3]?.getAttribute('id'), 'reputation'); ``` Your fourth checkbox should have a `name` of `"reputation"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[3].getAttribute('name'), 'reputation'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[3]?.getAttribute('name'), 'reputation'); ``` Your fourth checkbox should have a `value` of `"reputation"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[3].getAttribute('value'), 'reputation'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[3]?.getAttribute('value'), 'reputation'); ``` # --seed-- diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9689b1bf24b7750898a1b.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9689b1bf24b7750898a1b.md index 3980ac9cd6..4154de259a 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9689b1bf24b7750898a1b.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9689b1bf24b7750898a1b.md @@ -18,37 +18,37 @@ Now you can test out your `form` by selecting the various checkboxes. You should have a `label` element with the text of `Price`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[4].textContent, 'Price'); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[4]?.textContent, 'Price'); ``` Your `label` should have the `for` attribute set to `"price"`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[4].getAttribute('for'), 'price'); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[4]?.getAttribute('for'), 'price'); ``` -You should have a fifth checkbox `input`. +You should have a fifth checkbox `input` below your `label`. ```js -assert(document.querySelector("fieldset:nth-of-type(3) input:nth-of-type(5)[type='checkbox']")); +assert(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(5)[type='checkbox']")); ``` You should have a checkbox input with an `id` of `"price"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[4].getAttribute('id'), 'price'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[4]?.getAttribute('id'), 'price'); ``` You should have a checkbox input with a `name` of `"price"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[4].getAttribute('name'), 'price'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[4]?.getAttribute('name'), 'price'); ``` Your checkbox input should have a `value` of `"price"`. ```js -assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[4].getAttribute('value'), 'price'); +assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) label + input[type='checkbox']")[4]?.getAttribute('value'), 'price'); ``` # --seed-- diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a969951120be7818d8ee49.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a969951120be7818d8ee49.md index 750610a912..42f4cfc04f 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a969951120be7818d8ee49.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a969951120be7818d8ee49.md @@ -30,25 +30,25 @@ assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend').l Your legend should have the text `Ratings`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend')[0].textContent, 'Ratings'); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend')[0]?.textContent, 'Ratings'); ``` -Your `fieldset` should have a `label` element. +Your `fieldset` should have a `label` element below the `legend`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) label').length, 1); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend + label').length, 1); ``` Your `label` should have the text `How was the service?`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) label')[0].textContent, 'How was the service?'); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend + label')[0]?.textContent, 'How was the service?'); ``` Your `label` should have the `for` attribute set to `"service"`. ```js -assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) label')[0].getAttribute('for'), 'service'); +assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend + label')[0]?.getAttribute('for'), 'service'); ``` # --seed-- diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a96b01f33ef178dfca9e42.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a96b01f33ef178dfca9e42.md index 9592eff8c3..b812eb173f 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a96b01f33ef178dfca9e42.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a96b01f33ef178dfca9e42.md @@ -7,7 +7,7 @@ dashedName: step-27 # --description-- -When you want users to make selections from a dropdown menu, you can use the select and option elements. +When you want users to make selections from a dropdown menu, you can use the `select` and `option` elements. Here is an example of using the `select` and `option` elements to create a dropdown for different cities: diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a972137acd1179fa3fe8a0.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a972137acd1179fa3fe8a0.md index 7a5ddd5244..4f23e2a291 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a972137acd1179fa3fe8a0.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a972137acd1179fa3fe8a0.md @@ -36,7 +36,7 @@ assert(document.querySelector('option[value="poor"]')); Your `option` element with the `value` of `"poor"` should have the text `Poor`. ```js -assert.strictEqual(document.querySelector('option[value="poor"]').textContent, 'Poor'); +assert.strictEqual(document.querySelector('option[value="poor"]')?.textContent, 'Poor'); ``` You should have an `option` element with the `value` set to `"satisfactory"`. @@ -48,7 +48,7 @@ assert(document.querySelector('option[value="satisfactory"]')); Your `option` element with the `value` of `"satisfactory"` should have the text `Satisfactory`. ```js -assert.strictEqual(document.querySelector('option[value="satisfactory"]').textContent, 'Satisfactory'); +assert.strictEqual(document.querySelector('option[value="satisfactory"]')?.textContent, 'Satisfactory'); ``` You should have an `option` element with the `value` set to `"good"`. @@ -61,7 +61,7 @@ Your `option` element with the `value` of `"good"` should have the text `Good`. ```js -assert.strictEqual(document.querySelector('option[value="good"]').textContent, 'Good'); +assert.strictEqual(document.querySelector('option[value="good"]')?.textContent, 'Good'); ``` You should have an `option` element with the value set to `"very-good"`. @@ -73,7 +73,7 @@ assert(document.querySelector('option[value="very-good"]')); Your `option` element with the `value` of `"very-good"` should have the text `Very Good`. ```js -assert.strictEqual(document.querySelector('option[value="very-good"]').textContent, 'Very Good'); +assert.strictEqual(document.querySelector('option[value="very-good"]')?.textContent, 'Very Good'); ``` You should have an `option` element with the value set to `"excellent"`. @@ -86,7 +86,7 @@ Your `option` element with the `value` of `"excellent"` should have the text `Ex ```js -assert.strictEqual(document.querySelector('option[value="excellent"]').textContent, 'Excellent'); +assert.strictEqual(document.querySelector('option[value="excellent"]')?.textContent, 'Excellent'); ``` # --seed-- diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a975c259525b7bc2d5c776.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a975c259525b7bc2d5c776.md index eea5aeddc9..ace80b2a3e 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a975c259525b7bc2d5c776.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a975c259525b7bc2d5c776.md @@ -24,19 +24,19 @@ assert(document.querySelector('label[for="food"]')); Your `label` should have the text `How was the food?`. ```js -assert.strictEqual(document.querySelector('label[for="food"]').textContent, 'How was the food?'); +assert.strictEqual(document.querySelector('label[for="food"]')?.textContent, 'How was the food?'); ``` -You should have a `select` element with the `id` set to `"food"`. +You should have a `select` element with the `id` set to `"food"` below your `label`. ```js -assert(document.querySelector('select#food')); +assert(document.querySelector('label + select#food')); ``` Your `select` element should have the `name` attribute set to `"food"`. ```js -assert(document.querySelector('select[name="food"]')); +assert(document.querySelector('label + select[name="food"]')); ``` # --seed-- diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a97ca8c4cbae7d0bb6e0ad.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a97ca8c4cbae7d0bb6e0ad.md index f58e429c8e..208e3405bd 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a97ca8c4cbae7d0bb6e0ad.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a97ca8c4cbae7d0bb6e0ad.md @@ -39,7 +39,7 @@ assert(document.querySelector('fieldset:nth-of-type(4) select#food option[value= Your `option` with the `value` of `"poor"` should have the text `"Poor"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="poor"]').textContent, 'Poor'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="poor"]')?.textContent, 'Poor'); ``` You should have an `option` element with the `value` set to `"satisfactory"`. @@ -51,7 +51,7 @@ assert(document.querySelector('fieldset:nth-of-type(4) select#food option[value= Your `option` with the `value` of `"satisfactory"` should have the text `"Satisfactory"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="satisfactory"]').textContent, 'Satisfactory'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="satisfactory"]')?.textContent, 'Satisfactory'); ``` You should have an `option` element with the `value` set to `"good"`. @@ -64,7 +64,7 @@ Your `option` with the `value` of `"good"` should have the text `"Good"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="good"]').textContent, 'Good'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="good"]')?.textContent, 'Good'); ``` You should have an `option` element with the value set to `"very-good"`. @@ -76,7 +76,7 @@ assert(document.querySelector('fieldset:nth-of-type(4) select#food option[value= Your `option` with the `value` of `"very-good"` should have the text `"Very Good"`. ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="very-good"]').textContent, 'Very Good'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="very-good"]')?.textContent, 'Very Good'); ``` You should have an `option` element with the value set to `"excellent"`. @@ -89,7 +89,7 @@ Your `option` with the `value` of `"excellent"` should have the text `"Excellent ```js -assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="excellent"]').textContent, 'Excellent'); +assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food option[value="excellent"]')?.textContent, 'Excellent'); ``` You should have an `option` element with the `selected` attribute set to `"excellent"`. diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a97f40ddd40d7deb0618b7.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a97f40ddd40d7deb0618b7.md index bc246cd3a6..44b08193fc 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a97f40ddd40d7deb0618b7.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a97f40ddd40d7deb0618b7.md @@ -22,7 +22,7 @@ assert(document.querySelector('label[for="comments"]')); Your `label` should have the text `Other Comments?`. ```js -assert.strictEqual(document.querySelector('label[for="comments"]').textContent, 'Other Comments?'); +assert.strictEqual(document.querySelector('label[for="comments"]')?.textContent, 'Other Comments?'); ``` # --seed-- diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9824ac5d9f77ec304969f.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9824ac5d9f77ec304969f.md index e7542bddf4..5616967174 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9824ac5d9f77ec304969f.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9824ac5d9f77ec304969f.md @@ -7,7 +7,7 @@ dashedName: step-33 # --description-- -If you want users to have more space to write their comments, you can use a textarea element. +If you want users to have more space to write their comments, you can use a `textarea` element. The `textarea` element is a multi-line text input control that allows users to enter text that is longer than a single line. It can be used to create a comment box, a message input, or other text input that requires multiple lines. @@ -23,10 +23,10 @@ Below your `label` element, add a `textarea` element. In the next step, you will # --hints-- -You should have a `textarea` element inside your form. +You should have a `textarea` element below your label. ```js -assert(document.querySelector('form textarea')); +assert(document.querySelector('label + textarea')); ``` # --seed-- @@ -131,9 +131,8 @@ assert(document.querySelector('form textarea')); - - --fcc-editable-region-- + --fcc-editable-region-- diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9843525e9fa8046d709b7.md b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9843525e9fa8046d709b7.md index c8f1f3e6b6..977f216ffb 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9843525e9fa8046d709b7.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-hotel-feedback-form/66a9843525e9fa8046d709b7.md @@ -32,7 +32,7 @@ assert(document.querySelector('button[type="submit"]')); Your button should have the text content of `Submit`. ```js -assert.strictEqual(document.querySelector('button').textContent, 'Submit'); +assert.strictEqual(document.querySelector('button')?.textContent, 'Submit'); ``` # --seed-- diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md index 233026de48..ac61da05b2 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md @@ -9,7 +9,7 @@ dashedName: step-18 To finish the project, you'll need to run the `updateResultsList` function when the recipe form is submitted. -Use an event listener to do so, and remember that you'll need to prevent the default behaviour (or the page will refresh). +Use an event listener to do so, and remember that you'll need to prevent the default behavior (or the page will refresh). Once that's done, take some time to experiment with different values in the form before moving on to the next module. diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md index 408895d618..77e052536f 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md @@ -9,7 +9,7 @@ dashedName: step-6 A third `recipe3` object has been filled in for you. It has the same properties as `recipe1` and `recipe2`. -You should now push the three objects into the `recipes` array. To do thus, you can use the `push()` method. +You should now push the three objects into the `recipes` array. To do this, you can use the `push()` method. Use the `push()` method to push all the recipe objects into the `recipes` array. Make sure to push `recipe1`, `recipe2`, and `recipe3` in that order. diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-reusable-mega-navbar/6740495ba48aa94e5667b436.md b/curriculum/challenges/swahili/25-front-end-development/workshop-reusable-mega-navbar/6740495ba48aa94e5667b436.md index 2e0e0fd742..1b7a8867a4 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-reusable-mega-navbar/6740495ba48aa94e5667b436.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-reusable-mega-navbar/6740495ba48aa94e5667b436.md @@ -8,7 +8,7 @@ demoType: onLoad # --description-- -In this workshop, you will practice working with React functional components by building a resuable navbar. +In this workshop, you will practice working with React functional components by building a reusable navbar. All the CSS have been provided for you so you can focus on creating the navbar. diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-shopping-cart/63effe558c87a70e7072e447.md b/curriculum/challenges/swahili/25-front-end-development/workshop-shopping-cart/63effe558c87a70e7072e447.md index bff342d205..c355e87360 100644 --- a/curriculum/challenges/swahili/25-front-end-development/workshop-shopping-cart/63effe558c87a70e7072e447.md +++ b/curriculum/challenges/swahili/25-front-end-development/workshop-shopping-cart/63effe558c87a70e7072e447.md @@ -7,7 +7,7 @@ dashedName: step-27 # --description-- -The behaviour of the `addItem` method needs to change if the product is already in the cart or not. Create a ternary that checks if the current product is already in the cart. Use `undefined` for both the truthy and falsy expressions to avoid a syntax error. +The behavior of the `addItem` method needs to change if the product is already in the cart or not. Create a ternary that checks if the current product is already in the cart. Use `undefined` for both the truthy and falsy expressions to avoid a syntax error. # --hints--