From 018ed31008c084b6864bbd0f928999cd59feacf1 Mon Sep 17 00:00:00 2001 From: freeCodeCamp's Camper Bot Date: Mon, 20 Jan 2025 19:36:38 +0530 Subject: [PATCH] chore(i18n,learn): processed translations (#121) --- .../algorithms/implement-bubble-sort.md | 11 +- .../algorithms/implement-insertion-sort.md | 11 +- .../algorithms/implement-merge-sort.md | 32 ++++-- .../algorithms/implement-quick-sort.md | 11 +- .../algorithms/implement-selection-sort.md | 11 +- .../65573d0abe4d38cd6fa13f44.md | 2 +- .../problem-165-intersections.md | 2 +- .../last-letter-first-letter.md | 2 +- .../rosetta-code-challenges/word-wrap.md | 14 +-- .../671775877ee558061e6eebf8.md | 2 +- .../671f46b8a64a336294268cf6.md | 2 +- .../66a207974c806a19d6607073.md | 57 +++++++++- .../lab-event-hub/66ebd4ae2812430bb883c787.md | 2 +- .../66c07238b01053abaf812065.md | 2 +- .../66c06d618d075c7f7f1b890a.md | 4 +- .../66d6a7a3e1aa411e94bf2346.md | 4 +- .../66db57ad34c7089b9b41bfd6.md | 30 ++++- .../66f2836c459cfb16ae76f24f.md | 2 +- .../670803abcb3e980233da4768.md | 32 ++++++ .../6708382cf088b216580a9ff1.md | 52 +++++++++ .../67083868d5fdcb17bf8c14bd.md | 40 ++++++- .../670838977810401844af6fe0.md | 51 +++++++++ .../670838b10ee87a18e5faff62.md | 24 ++++ .../670838e914096b194b0c51aa.md | 79 +++++++++++++ .../670839051794aa19fcef6dc8.md | 29 +++++ .../67083952f800051a8a21fcfd.md | 31 ++++++ .../6708396caa00e11b597b3365.md | 45 ++++++++ .../6734e3a9cc78faaf4248d335.md | 14 ++- .../6734e867bbf41cc5b11648c4.md | 14 ++- .../6734e86f590727c5e7e9ec5e.md | 10 +- .../6734e879c78ee6c61db25b90.md | 43 +++---- .../6734e88cc46e6dc679420040.md | 26 +++-- .../674ba6876f7ada867135bb95.md | 24 ++-- .../672b951b1bf78038b1a2a0e7.md | 2 +- .../672bb009952c7a7904a750cb.md | 2 +- .../6734e2dcb965e5ac0ea38e0f.md | 2 +- .../6733d8606fb893099e3d0df3.md | 6 +- .../672b98be592cfb451f651451.md | 2 +- .../6734e3ceee2da4b0301719b7.md | 42 +++---- .../673500abfe36cd015b67b1b7.md | 26 +++-- .../673500b41af8500191febedc.md | 22 ++-- .../673500bfe1f41601c1ddb1a2.md | 20 ++-- .../6716743531fc9a797351c21e.md | 28 +++++ .../67167835def3588873f339c6.md | 12 ++ .../6716823876aa22a68ba3e2ec.md | 18 ++- .../6716825aff3434a71fdc3e99.md | 14 +++ .../67168278ac6df6a799555db5.md | 81 ++++++++++++++ .../671682b3983489a819507553.md | 81 ++++++++++++++ .../673271b4213033d9b661c70e.md | 6 +- .../6733c5ba834ded4bb067e67c.md | 10 +- .../672a4e04a24858778f57ebfe.md | 105 ++++++++++++++++++ .../66ed8fa2f45ce3ece4053eab.md | 2 +- .../66df3b712c41c499e9d31e5b.md | 16 +-- .../66ed8fe7f45ce3ece4053eb2.md | 2 +- .../66ed8ff4f45ce3ece4053eb4.md | 20 ++-- .../66edd3711bb9f7efa73aef91.md | 2 +- .../66edc25ae5ea80bf6f785552.md | 2 +- .../66f1adcf97e3e4c1bd89ebf5.md | 2 +- .../6723d35bb07d1bd220d0f28d.md | 2 +- .../671a887a7e62c75e9ab1ee4a.md | 4 +- .../671a87e6dcef5b5bd765e5ed.md | 2 +- .../671a955b74ab5588735800d1.md | 2 +- .../671a88d636cebc5fbd407b78.md | 2 +- .../671a90c1cf517678b130419e.md | 4 +- .../671a940c69cdee833d4cc312.md | 2 +- .../671a99394bedfb9a5bc687c4.md | 2 +- .../671a967424a00e8c6561b182.md | 8 +- .../671a907bad4538752765f2ff.md | 4 +- .../review-css/671a9a0a140c2b9d6a75629f.md | 10 +- .../671a892927fdba60db05edfe.md | 2 +- .../6723cc7a8e7aa3b9befd4bac.md | 8 +- .../6723c66f623701a3cdf72130.md | 2 +- .../6723cf27c6e9a0c3f3041385.md | 2 +- .../6723c5b8601a40a100bb59c9.md | 4 +- .../6723ca166fe90eb0a3146848.md | 4 +- .../6723c837cd3276aa73e6da25.md | 4 +- .../6723c463e51a2d9b747d7529.md | 10 +- .../6723c77d1a44b8a7599277dd.md | 2 +- .../6723c1946e4cd7909a836bb4.md | 2 +- .../6723be264695fb7e619fe1fa.md | 10 +- .../6723d3cfdd0717d3f1bf27e3.md | 64 +++++------ .../6723d0ac516099c902394e8b.md | 2 +- .../67487e141bb6a7140a352e12.md | 2 +- .../6723d1f0568292cd394d6fb6.md | 4 +- .../671a915858de057ad84c5dbd.md | 2 +- .../614796cb8086be482d60e0ac.md | 6 +- .../6148e161ecec9511941f8833.md | 10 +- .../5f07be6ef7412fbad0c5626b.md | 4 +- .../672110bda073669bcc2302e6.md | 2 +- .../67213641373a23696b74424b.md | 2 +- .../675309b2795c2a9ae03b8812.md | 4 +- .../67353950c86fe2dfd84bc2f3.md | 2 +- .../66e2df8c5676fe51cead8ec8.md | 2 +- .../66e2e5d890ac8a54c9d703bd.md | 2 +- .../66e2e99caa0cb3570f4822b4.md | 2 +- .../66e2eab8a5638f57b637b7cc.md | 2 +- .../66e2edb23013ca596f8d9568.md | 4 +- .../66e2f376df6f315ee81de81a.md | 4 +- .../671fa47e415d88263d349a10.md | 2 +- .../data-cleaning-and-visualizations.md | 2 +- .../65573d0abe4d38cd6fa13f44.md | 2 +- .../problem-165-intersections.md | 2 +- .../last-letter-first-letter.md | 2 +- .../rosetta-code-challenges/word-wrap.md | 14 +-- .../671775877ee558061e6eebf8.md | 2 +- .../671f46b8a64a336294268cf6.md | 2 +- .../66a207974c806a19d6607073.md | 57 +++++++++- .../66c07238b01053abaf812065.md | 2 +- .../66c06d618d075c7f7f1b890a.md | 4 +- .../66d6a7a3e1aa411e94bf2346.md | 2 +- .../66db57ad34c7089b9b41bfd6.md | 30 ++++- .../670803abcb3e980233da4768.md | 32 ++++++ .../6708382cf088b216580a9ff1.md | 52 +++++++++ .../67083868d5fdcb17bf8c14bd.md | 40 ++++++- .../670838977810401844af6fe0.md | 51 +++++++++ .../670838b10ee87a18e5faff62.md | 24 ++++ .../670838e914096b194b0c51aa.md | 79 +++++++++++++ .../670839051794aa19fcef6dc8.md | 29 +++++ .../67083952f800051a8a21fcfd.md | 31 ++++++ .../6708396caa00e11b597b3365.md | 45 ++++++++ .../6734e3a9cc78faaf4248d335.md | 14 ++- .../6734e867bbf41cc5b11648c4.md | 14 ++- .../6734e86f590727c5e7e9ec5e.md | 10 +- .../6734e879c78ee6c61db25b90.md | 43 +++---- .../6734e88cc46e6dc679420040.md | 26 +++-- .../674ba6876f7ada867135bb95.md | 24 ++-- .../672b951b1bf78038b1a2a0e7.md | 2 +- .../672bb009952c7a7904a750cb.md | 2 +- .../6734e2dcb965e5ac0ea38e0f.md | 2 +- .../6733d8606fb893099e3d0df3.md | 6 +- .../672b98be592cfb451f651451.md | 2 +- .../6734e3ceee2da4b0301719b7.md | 42 +++---- .../673500abfe36cd015b67b1b7.md | 26 +++-- .../673500b41af8500191febedc.md | 22 ++-- .../673500bfe1f41601c1ddb1a2.md | 20 ++-- .../6716743531fc9a797351c21e.md | 28 +++++ .../67167835def3588873f339c6.md | 12 ++ .../6716823876aa22a68ba3e2ec.md | 18 ++- .../6716825aff3434a71fdc3e99.md | 14 +++ .../67168278ac6df6a799555db5.md | 81 ++++++++++++++ .../671682b3983489a819507553.md | 81 ++++++++++++++ .../673271b4213033d9b661c70e.md | 6 +- .../672a4e04a24858778f57ebfe.md | 105 ++++++++++++++++++ .../66ed8fa2f45ce3ece4053eab.md | 2 +- .../66df3b712c41c499e9d31e5b.md | 16 +-- .../66ed8fe7f45ce3ece4053eb2.md | 2 +- .../66ed8ff4f45ce3ece4053eb4.md | 2 +- .../66edc25ae5ea80bf6f785552.md | 2 +- .../66f1adcf97e3e4c1bd89ebf5.md | 2 +- .../6723be264695fb7e619fe1fa.md | 6 +- .../6723d3cfdd0717d3f1bf27e3.md | 6 +- .../614796cb8086be482d60e0ac.md | 6 +- .../6148e161ecec9511941f8833.md | 10 +- .../5f07be6ef7412fbad0c5626b.md | 4 +- .../672110bda073669bcc2302e6.md | 2 +- .../67213641373a23696b74424b.md | 2 +- .../675309b2795c2a9ae03b8812.md | 4 +- .../67353950c86fe2dfd84bc2f3.md | 2 +- .../66e2df8c5676fe51cead8ec8.md | 2 +- .../66e2e5d890ac8a54c9d703bd.md | 2 +- .../66e2e99caa0cb3570f4822b4.md | 2 +- .../66e2eab8a5638f57b637b7cc.md | 2 +- .../66e2edb23013ca596f8d9568.md | 4 +- .../66e2f376df6f315ee81de81a.md | 4 +- .../671fa47e415d88263d349a10.md | 2 +- .../algorithms/implement-bubble-sort.md | 11 +- .../algorithms/implement-insertion-sort.md | 11 +- .../algorithms/implement-merge-sort.md | 32 ++++-- .../algorithms/implement-quick-sort.md | 11 +- .../algorithms/implement-selection-sort.md | 11 +- .../613e275749ebd008e74bb62e.md | 4 +- .../614202874ca576084fca625f.md | 28 ++--- .../614396f7ae83f20ea6f9f4b3.md | 22 ++-- .../6145e8b5080a5f06bb0223d0.md | 38 +++---- .../6145f02240ff8f09f7ec913c.md | 8 +- .../614796cb8086be482d60e0ac.md | 2 +- .../614878f7a412310647873015.md | 6 +- .../614883b6fa720e09fb167de9.md | 10 +- .../6148da157cc0bd0d06df5c0a.md | 8 +- .../6148dfab9b54c110577de165.md | 14 +-- .../614ccc21ea91ef1736b9b578.md | 4 +- .../6140cbeec34e970dfe75e710.md | 8 +- .../617ace7d831f9c16a569b38a.md | 4 +- .../616d47bc9eedc4bc7f621bec.md | 8 +- .../61764f7e5240eb7ccc7f6a0a.md | 4 +- .../617b65579ce424bf5f02ca73.md | 8 +- .../617b8b38f32bf2080a140675.md | 8 +- .../617b8e0d93a8d10d9a90e720.md | 12 +- .../617b954d9f4f6217a749380e.md | 6 +- .../617bb5624a75e86463b7e638.md | 4 +- .../618a16873520a8d088ffdf44.md | 2 +- .../619b7424f43ec9215e538afe.md | 6 +- .../619b761916dac02643940022.md | 6 +- .../61a489b8579e87364b2d2cdb.md | 8 +- .../61a5ca57f50ded36d33eef96.md | 4 +- .../61b092eb9e7fc020b43b1bb2.md | 4 +- .../61b093219e7fc020b43b1bb4.md | 4 +- .../61b09f739aa6572d2064f9b8.md | 4 +- .../61b0a1b2af494934b7ec1a72.md | 10 +- .../61b3183655ec10efd8c0bb07.md | 6 +- .../61537d86bdc3dd343688fceb.md | 20 ++-- .../6153893900438b4643590367.md | 18 +-- .../6153938dce8b294ff8f5a4e9.md | 4 +- .../6143a778bffc206ac6b1dbe3.md | 4 +- .../6143b9e1f5035c6e5f2a8231.md | 24 ++-- .../6143c2a363865c715f1a3f72.md | 12 +- .../6144de308591ec10e27d5383.md | 4 +- .../6148b185ef37522f688316b0.md | 6 +- .../6148c5036ddad94692a66230.md | 4 +- .../6148d94fdf6a5d6899f8ff15.md | 2 +- .../614e0e588f0e8a772a8a81a6.md | 4 +- .../6196928658b6010f28c39484.md | 2 +- .../6199429802b7c10dc79ff871.md | 8 +- .../619be73b3c806006ccc00bb0.md | 6 +- .../619c155df0063a0a3fec0e32.md | 14 +-- .../619d05c54dabca0b10058235.md | 8 +- .../619d1e7a8e81a61c5a819dc4.md | 2 +- .../619d237a107c10221ed743fa.md | 14 +-- .../619d2b7a84e78b246f2d17a2.md | 12 +- .../5d822fd413a79914d39e98ca.md | 10 +- .../5d822fd413a79914d39e98d7.md | 6 +- .../5d822fd413a79914d39e98dc.md | 6 +- .../5d822fd413a79914d39e98ee.md | 2 +- .../5d822fd413a79914d39e98f5.md | 2 +- .../65573d0abe4d38cd6fa13f44.md | 2 +- .../problem-165-intersections.md | 2 +- .../last-letter-first-letter.md | 2 +- .../rosetta-code-challenges/word-wrap.md | 14 +-- .../671775877ee558061e6eebf8.md | 2 +- .../671f46b8a64a336294268cf6.md | 2 +- .../66a207974c806a19d6607073.md | 57 +++++++++- .../lab-event-hub/66ebd4ae2812430bb883c787.md | 2 +- .../66c07238b01053abaf812065.md | 2 +- .../66c06d618d075c7f7f1b890a.md | 4 +- .../66d6a7a3e1aa411e94bf2346.md | 4 +- .../66db57ad34c7089b9b41bfd6.md | 30 ++++- .../66f2836c459cfb16ae76f24f.md | 2 +- .../670803abcb3e980233da4768.md | 32 ++++++ .../6708382cf088b216580a9ff1.md | 52 +++++++++ .../67083868d5fdcb17bf8c14bd.md | 40 ++++++- .../670838977810401844af6fe0.md | 51 +++++++++ .../670838b10ee87a18e5faff62.md | 24 ++++ .../670838e914096b194b0c51aa.md | 79 +++++++++++++ .../670839051794aa19fcef6dc8.md | 29 +++++ .../67083952f800051a8a21fcfd.md | 31 ++++++ .../6708396caa00e11b597b3365.md | 45 ++++++++ .../6734e3a9cc78faaf4248d335.md | 14 ++- .../6734e867bbf41cc5b11648c4.md | 14 ++- .../6734e86f590727c5e7e9ec5e.md | 10 +- .../6734e879c78ee6c61db25b90.md | 43 +++---- .../6734e88cc46e6dc679420040.md | 26 +++-- .../674ba6876f7ada867135bb95.md | 24 ++-- .../672b951b1bf78038b1a2a0e7.md | 2 +- .../672bb009952c7a7904a750cb.md | 2 +- .../6734e2dcb965e5ac0ea38e0f.md | 2 +- .../6733d8606fb893099e3d0df3.md | 6 +- .../672b98be592cfb451f651451.md | 2 +- .../6734e3ceee2da4b0301719b7.md | 42 +++---- .../673500abfe36cd015b67b1b7.md | 26 +++-- .../673500b41af8500191febedc.md | 22 ++-- .../673500bfe1f41601c1ddb1a2.md | 20 ++-- .../6716743531fc9a797351c21e.md | 28 +++++ .../67167835def3588873f339c6.md | 12 ++ .../6716823876aa22a68ba3e2ec.md | 18 ++- .../6716825aff3434a71fdc3e99.md | 14 +++ .../67168278ac6df6a799555db5.md | 81 ++++++++++++++ .../671682b3983489a819507553.md | 81 ++++++++++++++ .../673271b4213033d9b661c70e.md | 6 +- .../6733c5ba834ded4bb067e67c.md | 10 +- .../672a4e04a24858778f57ebfe.md | 105 ++++++++++++++++++ .../66ed8fa2f45ce3ece4053eab.md | 2 +- .../66df3b712c41c499e9d31e5b.md | 16 +-- .../66ed8fe7f45ce3ece4053eb2.md | 2 +- .../66ed8ff4f45ce3ece4053eb4.md | 20 ++-- .../66edd3711bb9f7efa73aef91.md | 2 +- .../66edc25ae5ea80bf6f785552.md | 2 +- .../66f1adcf97e3e4c1bd89ebf5.md | 2 +- .../6723d35bb07d1bd220d0f28d.md | 2 +- .../671a887a7e62c75e9ab1ee4a.md | 4 +- .../671a87e6dcef5b5bd765e5ed.md | 2 +- .../671a955b74ab5588735800d1.md | 2 +- .../671a88d636cebc5fbd407b78.md | 2 +- .../671a90c1cf517678b130419e.md | 4 +- .../671a940c69cdee833d4cc312.md | 2 +- .../671a99394bedfb9a5bc687c4.md | 2 +- .../671a967424a00e8c6561b182.md | 8 +- .../671a907bad4538752765f2ff.md | 4 +- .../review-css/671a9a0a140c2b9d6a75629f.md | 10 +- .../671a892927fdba60db05edfe.md | 2 +- .../6723cc7a8e7aa3b9befd4bac.md | 8 +- .../6723c66f623701a3cdf72130.md | 2 +- .../6723cf27c6e9a0c3f3041385.md | 2 +- .../6723c5b8601a40a100bb59c9.md | 4 +- .../6723ca166fe90eb0a3146848.md | 4 +- .../6723c837cd3276aa73e6da25.md | 4 +- .../6723c463e51a2d9b747d7529.md | 10 +- .../6723c77d1a44b8a7599277dd.md | 2 +- .../6723c1946e4cd7909a836bb4.md | 2 +- .../6723be264695fb7e619fe1fa.md | 10 +- .../6723d3cfdd0717d3f1bf27e3.md | 64 +++++------ .../6723d0ac516099c902394e8b.md | 2 +- .../67487e141bb6a7140a352e12.md | 2 +- .../6723d1f0568292cd394d6fb6.md | 4 +- .../671a915858de057ad84c5dbd.md | 2 +- .../614796cb8086be482d60e0ac.md | 6 +- .../6148e161ecec9511941f8833.md | 10 +- .../5f07be6ef7412fbad0c5626b.md | 4 +- .../672110bda073669bcc2302e6.md | 2 +- .../67213641373a23696b74424b.md | 2 +- .../675309b2795c2a9ae03b8812.md | 4 +- .../67353950c86fe2dfd84bc2f3.md | 2 +- .../66e2df8c5676fe51cead8ec8.md | 2 +- .../66e2e5d890ac8a54c9d703bd.md | 2 +- .../66e2e99caa0cb3570f4822b4.md | 2 +- .../66e2eab8a5638f57b637b7cc.md | 2 +- .../66e2edb23013ca596f8d9568.md | 4 +- .../66e2f376df6f315ee81de81a.md | 4 +- .../671fa47e415d88263d349a10.md | 2 +- .../algorithms/implement-bubble-sort.md | 11 +- .../algorithms/implement-insertion-sort.md | 11 +- .../algorithms/implement-merge-sort.md | 32 ++++-- .../algorithms/implement-quick-sort.md | 11 +- .../algorithms/implement-selection-sort.md | 11 +- .../65573d0abe4d38cd6fa13f44.md | 2 +- .../problem-165-intersections.md | 2 +- .../last-letter-first-letter.md | 2 +- .../rosetta-code-challenges/word-wrap.md | 14 +-- .../671775877ee558061e6eebf8.md | 2 +- .../671f46b8a64a336294268cf6.md | 2 +- .../66a207974c806a19d6607073.md | 57 +++++++++- .../lab-event-hub/66ebd4ae2812430bb883c787.md | 2 +- .../66c07238b01053abaf812065.md | 2 +- .../66c06d618d075c7f7f1b890a.md | 4 +- .../66d6a7a3e1aa411e94bf2346.md | 4 +- .../66db57ad34c7089b9b41bfd6.md | 30 ++++- .../66f2836c459cfb16ae76f24f.md | 2 +- .../670803abcb3e980233da4768.md | 32 ++++++ .../6708382cf088b216580a9ff1.md | 52 +++++++++ .../67083868d5fdcb17bf8c14bd.md | 40 ++++++- .../670838977810401844af6fe0.md | 51 +++++++++ .../670838b10ee87a18e5faff62.md | 24 ++++ .../670838e914096b194b0c51aa.md | 79 +++++++++++++ .../670839051794aa19fcef6dc8.md | 29 +++++ .../67083952f800051a8a21fcfd.md | 31 ++++++ .../6708396caa00e11b597b3365.md | 45 ++++++++ .../6734e3a9cc78faaf4248d335.md | 14 ++- .../6734e867bbf41cc5b11648c4.md | 14 ++- .../6734e86f590727c5e7e9ec5e.md | 10 +- .../6734e879c78ee6c61db25b90.md | 43 +++---- .../6734e88cc46e6dc679420040.md | 26 +++-- .../674ba6876f7ada867135bb95.md | 24 ++-- .../672b951b1bf78038b1a2a0e7.md | 2 +- .../672bb009952c7a7904a750cb.md | 2 +- .../6734e2dcb965e5ac0ea38e0f.md | 2 +- .../6733d8606fb893099e3d0df3.md | 6 +- .../672b98be592cfb451f651451.md | 2 +- .../6734e3ceee2da4b0301719b7.md | 42 +++---- .../673500abfe36cd015b67b1b7.md | 26 +++-- .../673500b41af8500191febedc.md | 22 ++-- .../673500bfe1f41601c1ddb1a2.md | 20 ++-- .../6716743531fc9a797351c21e.md | 28 +++++ .../67167835def3588873f339c6.md | 12 ++ .../6716823876aa22a68ba3e2ec.md | 18 ++- .../6716825aff3434a71fdc3e99.md | 14 +++ .../67168278ac6df6a799555db5.md | 81 ++++++++++++++ .../671682b3983489a819507553.md | 81 ++++++++++++++ .../673271b4213033d9b661c70e.md | 6 +- .../6733c5ba834ded4bb067e67c.md | 10 +- .../672a4e04a24858778f57ebfe.md | 105 ++++++++++++++++++ .../66ed8fa2f45ce3ece4053eab.md | 2 +- .../66df3b712c41c499e9d31e5b.md | 16 +-- .../66ed8fe7f45ce3ece4053eb2.md | 2 +- .../66ed8ff4f45ce3ece4053eb4.md | 20 ++-- .../66edd3711bb9f7efa73aef91.md | 2 +- .../66edc25ae5ea80bf6f785552.md | 2 +- .../66f1adcf97e3e4c1bd89ebf5.md | 2 +- .../6723d35bb07d1bd220d0f28d.md | 2 +- .../671a887a7e62c75e9ab1ee4a.md | 4 +- .../671a87e6dcef5b5bd765e5ed.md | 2 +- .../671a955b74ab5588735800d1.md | 2 +- .../671a88d636cebc5fbd407b78.md | 2 +- .../671a90c1cf517678b130419e.md | 4 +- .../671a940c69cdee833d4cc312.md | 2 +- .../671a99394bedfb9a5bc687c4.md | 2 +- .../671a967424a00e8c6561b182.md | 8 +- .../671a907bad4538752765f2ff.md | 4 +- .../review-css/671a9a0a140c2b9d6a75629f.md | 10 +- .../671a892927fdba60db05edfe.md | 2 +- .../6723cc7a8e7aa3b9befd4bac.md | 8 +- .../6723c66f623701a3cdf72130.md | 2 +- .../6723cf27c6e9a0c3f3041385.md | 2 +- .../6723c5b8601a40a100bb59c9.md | 4 +- .../6723ca166fe90eb0a3146848.md | 4 +- .../6723c837cd3276aa73e6da25.md | 4 +- .../6723c463e51a2d9b747d7529.md | 10 +- .../6723c77d1a44b8a7599277dd.md | 2 +- .../6723c1946e4cd7909a836bb4.md | 2 +- .../6723be264695fb7e619fe1fa.md | 10 +- .../6723d3cfdd0717d3f1bf27e3.md | 64 +++++------ .../6723d0ac516099c902394e8b.md | 2 +- .../67487e141bb6a7140a352e12.md | 2 +- .../6723d1f0568292cd394d6fb6.md | 4 +- .../671a915858de057ad84c5dbd.md | 2 +- .../614796cb8086be482d60e0ac.md | 6 +- .../6148e161ecec9511941f8833.md | 10 +- .../5f07be6ef7412fbad0c5626b.md | 4 +- .../672110bda073669bcc2302e6.md | 2 +- .../67213641373a23696b74424b.md | 2 +- .../675309b2795c2a9ae03b8812.md | 4 +- .../67353950c86fe2dfd84bc2f3.md | 2 +- .../66e2df8c5676fe51cead8ec8.md | 2 +- .../66e2e5d890ac8a54c9d703bd.md | 2 +- .../66e2e99caa0cb3570f4822b4.md | 2 +- .../66e2eab8a5638f57b637b7cc.md | 2 +- .../66e2edb23013ca596f8d9568.md | 4 +- .../66e2f376df6f315ee81de81a.md | 4 +- .../671fa47e415d88263d349a10.md | 2 +- .../algorithms/implement-bubble-sort.md | 11 +- .../algorithms/implement-insertion-sort.md | 11 +- .../algorithms/implement-merge-sort.md | 32 ++++-- .../algorithms/implement-quick-sort.md | 11 +- .../algorithms/implement-selection-sort.md | 11 +- .../65573d0abe4d38cd6fa13f44.md | 2 +- .../problem-165-intersections.md | 2 +- .../last-letter-first-letter.md | 2 +- .../rosetta-code-challenges/word-wrap.md | 14 +-- .../671775877ee558061e6eebf8.md | 2 +- .../671f46b8a64a336294268cf6.md | 2 +- .../66a207974c806a19d6607073.md | 57 +++++++++- .../lab-event-hub/66ebd4ae2812430bb883c787.md | 2 +- .../66c07238b01053abaf812065.md | 2 +- .../66c06d618d075c7f7f1b890a.md | 4 +- .../66d6a7a3e1aa411e94bf2346.md | 4 +- .../66db57ad34c7089b9b41bfd6.md | 30 ++++- .../66f2836c459cfb16ae76f24f.md | 2 +- .../670803abcb3e980233da4768.md | 32 ++++++ .../6708382cf088b216580a9ff1.md | 52 +++++++++ .../67083868d5fdcb17bf8c14bd.md | 40 ++++++- .../670838977810401844af6fe0.md | 51 +++++++++ .../670838b10ee87a18e5faff62.md | 24 ++++ .../670838e914096b194b0c51aa.md | 79 +++++++++++++ .../670839051794aa19fcef6dc8.md | 29 +++++ .../67083952f800051a8a21fcfd.md | 31 ++++++ .../6708396caa00e11b597b3365.md | 45 ++++++++ .../6734e3a9cc78faaf4248d335.md | 14 ++- .../6734e867bbf41cc5b11648c4.md | 14 ++- .../6734e86f590727c5e7e9ec5e.md | 10 +- .../6734e879c78ee6c61db25b90.md | 43 +++---- .../6734e88cc46e6dc679420040.md | 26 +++-- .../674ba6876f7ada867135bb95.md | 24 ++-- .../672b951b1bf78038b1a2a0e7.md | 2 +- .../672bb009952c7a7904a750cb.md | 2 +- .../6734e2dcb965e5ac0ea38e0f.md | 2 +- .../6733d8606fb893099e3d0df3.md | 6 +- .../672b98be592cfb451f651451.md | 2 +- .../6734e3ceee2da4b0301719b7.md | 42 +++---- .../673500abfe36cd015b67b1b7.md | 26 +++-- .../673500b41af8500191febedc.md | 22 ++-- .../673500bfe1f41601c1ddb1a2.md | 20 ++-- .../6716743531fc9a797351c21e.md | 28 +++++ .../67167835def3588873f339c6.md | 12 ++ .../6716823876aa22a68ba3e2ec.md | 18 ++- .../6716825aff3434a71fdc3e99.md | 14 +++ .../67168278ac6df6a799555db5.md | 81 ++++++++++++++ .../671682b3983489a819507553.md | 81 ++++++++++++++ .../673271b4213033d9b661c70e.md | 6 +- .../6733c5ba834ded4bb067e67c.md | 10 +- .../672a4e04a24858778f57ebfe.md | 105 ++++++++++++++++++ .../66ed8fa2f45ce3ece4053eab.md | 2 +- .../66df3b712c41c499e9d31e5b.md | 16 +-- .../66ed8fe7f45ce3ece4053eb2.md | 2 +- .../66ed8ff4f45ce3ece4053eb4.md | 20 ++-- .../66edd3711bb9f7efa73aef91.md | 2 +- .../66edc25ae5ea80bf6f785552.md | 2 +- .../66f1adcf97e3e4c1bd89ebf5.md | 2 +- .../6723d35bb07d1bd220d0f28d.md | 2 +- .../671a887a7e62c75e9ab1ee4a.md | 4 +- .../671a87e6dcef5b5bd765e5ed.md | 2 +- .../671a955b74ab5588735800d1.md | 2 +- .../671a88d636cebc5fbd407b78.md | 2 +- .../671a90c1cf517678b130419e.md | 4 +- .../671a940c69cdee833d4cc312.md | 2 +- .../671a99394bedfb9a5bc687c4.md | 2 +- .../671a967424a00e8c6561b182.md | 8 +- .../671a907bad4538752765f2ff.md | 4 +- .../review-css/671a9a0a140c2b9d6a75629f.md | 10 +- .../671a892927fdba60db05edfe.md | 2 +- .../6723cc7a8e7aa3b9befd4bac.md | 8 +- .../6723c66f623701a3cdf72130.md | 2 +- .../6723cf27c6e9a0c3f3041385.md | 2 +- .../6723c5b8601a40a100bb59c9.md | 4 +- .../6723ca166fe90eb0a3146848.md | 4 +- .../6723c837cd3276aa73e6da25.md | 4 +- .../6723c463e51a2d9b747d7529.md | 10 +- .../6723c77d1a44b8a7599277dd.md | 2 +- .../6723c1946e4cd7909a836bb4.md | 2 +- .../6723be264695fb7e619fe1fa.md | 10 +- .../6723d3cfdd0717d3f1bf27e3.md | 64 +++++------ .../6723d0ac516099c902394e8b.md | 2 +- .../67487e141bb6a7140a352e12.md | 2 +- .../6723d1f0568292cd394d6fb6.md | 4 +- .../671a915858de057ad84c5dbd.md | 2 +- .../614796cb8086be482d60e0ac.md | 6 +- .../6148e161ecec9511941f8833.md | 10 +- .../5f07be6ef7412fbad0c5626b.md | 4 +- .../672110bda073669bcc2302e6.md | 2 +- .../67213641373a23696b74424b.md | 2 +- .../675309b2795c2a9ae03b8812.md | 4 +- .../67353950c86fe2dfd84bc2f3.md | 2 +- .../66e2df8c5676fe51cead8ec8.md | 2 +- .../66e2e5d890ac8a54c9d703bd.md | 2 +- .../66e2e99caa0cb3570f4822b4.md | 2 +- .../66e2eab8a5638f57b637b7cc.md | 2 +- .../66e2edb23013ca596f8d9568.md | 4 +- .../66e2f376df6f315ee81de81a.md | 4 +- .../671fa47e415d88263d349a10.md | 2 +- .../algorithms/implement-bubble-sort.md | 11 +- .../algorithms/implement-insertion-sort.md | 11 +- .../algorithms/implement-merge-sort.md | 32 ++++-- .../algorithms/implement-quick-sort.md | 11 +- .../algorithms/implement-selection-sort.md | 11 +- .../65573d0abe4d38cd6fa13f44.md | 2 +- .../problem-165-intersections.md | 2 +- .../last-letter-first-letter.md | 2 +- .../rosetta-code-challenges/word-wrap.md | 14 +-- .../671775877ee558061e6eebf8.md | 2 +- .../671f46b8a64a336294268cf6.md | 2 +- .../66a207974c806a19d6607073.md | 57 +++++++++- .../lab-event-hub/66ebd4ae2812430bb883c787.md | 2 +- .../66c07238b01053abaf812065.md | 2 +- .../66c06d618d075c7f7f1b890a.md | 4 +- .../66d6a7a3e1aa411e94bf2346.md | 4 +- .../66db57ad34c7089b9b41bfd6.md | 30 ++++- .../66f2836c459cfb16ae76f24f.md | 2 +- .../670803abcb3e980233da4768.md | 32 ++++++ .../6708382cf088b216580a9ff1.md | 52 +++++++++ .../67083868d5fdcb17bf8c14bd.md | 40 ++++++- .../670838977810401844af6fe0.md | 51 +++++++++ .../670838b10ee87a18e5faff62.md | 24 ++++ .../670838e914096b194b0c51aa.md | 79 +++++++++++++ .../670839051794aa19fcef6dc8.md | 29 +++++ .../67083952f800051a8a21fcfd.md | 31 ++++++ .../6708396caa00e11b597b3365.md | 45 ++++++++ .../6734e3a9cc78faaf4248d335.md | 14 ++- .../6734e867bbf41cc5b11648c4.md | 14 ++- .../6734e86f590727c5e7e9ec5e.md | 10 +- .../6734e879c78ee6c61db25b90.md | 43 +++---- .../6734e88cc46e6dc679420040.md | 26 +++-- .../674ba6876f7ada867135bb95.md | 24 ++-- .../672b951b1bf78038b1a2a0e7.md | 2 +- .../672bb009952c7a7904a750cb.md | 2 +- .../6734e2dcb965e5ac0ea38e0f.md | 2 +- .../6733d8606fb893099e3d0df3.md | 6 +- .../672b98be592cfb451f651451.md | 2 +- .../6734e3ceee2da4b0301719b7.md | 42 +++---- .../673500abfe36cd015b67b1b7.md | 26 +++-- .../673500b41af8500191febedc.md | 22 ++-- .../673500bfe1f41601c1ddb1a2.md | 20 ++-- .../6716743531fc9a797351c21e.md | 28 +++++ .../67167835def3588873f339c6.md | 12 ++ .../6716823876aa22a68ba3e2ec.md | 18 ++- .../6716825aff3434a71fdc3e99.md | 14 +++ .../67168278ac6df6a799555db5.md | 81 ++++++++++++++ .../671682b3983489a819507553.md | 81 ++++++++++++++ .../673271b4213033d9b661c70e.md | 6 +- .../6733c5ba834ded4bb067e67c.md | 10 +- .../672a4e04a24858778f57ebfe.md | 105 ++++++++++++++++++ .../66ed8fa2f45ce3ece4053eab.md | 2 +- .../66df3b712c41c499e9d31e5b.md | 16 +-- .../66ed8fe7f45ce3ece4053eb2.md | 2 +- .../66ed8ff4f45ce3ece4053eb4.md | 20 ++-- .../66edd3711bb9f7efa73aef91.md | 2 +- .../66edc25ae5ea80bf6f785552.md | 2 +- .../66f1adcf97e3e4c1bd89ebf5.md | 2 +- .../6723d35bb07d1bd220d0f28d.md | 2 +- .../671a887a7e62c75e9ab1ee4a.md | 4 +- .../671a87e6dcef5b5bd765e5ed.md | 2 +- .../671a955b74ab5588735800d1.md | 2 +- .../671a88d636cebc5fbd407b78.md | 2 +- .../671a90c1cf517678b130419e.md | 4 +- .../671a940c69cdee833d4cc312.md | 2 +- .../671a99394bedfb9a5bc687c4.md | 2 +- .../671a967424a00e8c6561b182.md | 8 +- .../671a907bad4538752765f2ff.md | 4 +- .../review-css/671a9a0a140c2b9d6a75629f.md | 10 +- .../671a892927fdba60db05edfe.md | 2 +- .../6723cc7a8e7aa3b9befd4bac.md | 8 +- .../6723c66f623701a3cdf72130.md | 2 +- .../6723cf27c6e9a0c3f3041385.md | 2 +- .../6723c5b8601a40a100bb59c9.md | 4 +- .../6723ca166fe90eb0a3146848.md | 4 +- .../6723c837cd3276aa73e6da25.md | 4 +- .../6723c463e51a2d9b747d7529.md | 10 +- .../6723c77d1a44b8a7599277dd.md | 2 +- .../6723c1946e4cd7909a836bb4.md | 2 +- .../6723be264695fb7e619fe1fa.md | 10 +- .../6723d3cfdd0717d3f1bf27e3.md | 64 +++++------ .../6723d0ac516099c902394e8b.md | 2 +- .../67487e141bb6a7140a352e12.md | 2 +- .../6723d1f0568292cd394d6fb6.md | 4 +- .../671a915858de057ad84c5dbd.md | 2 +- .../614796cb8086be482d60e0ac.md | 6 +- .../6148e161ecec9511941f8833.md | 10 +- .../5f07be6ef7412fbad0c5626b.md | 4 +- .../672110bda073669bcc2302e6.md | 2 +- .../67213641373a23696b74424b.md | 2 +- .../675309b2795c2a9ae03b8812.md | 4 +- .../67353950c86fe2dfd84bc2f3.md | 2 +- .../66e2df8c5676fe51cead8ec8.md | 2 +- .../66e2e5d890ac8a54c9d703bd.md | 2 +- .../66e2e99caa0cb3570f4822b4.md | 2 +- .../66e2eab8a5638f57b637b7cc.md | 2 +- .../66e2edb23013ca596f8d9568.md | 4 +- .../66e2f376df6f315ee81de81a.md | 4 +- .../671fa47e415d88263d349a10.md | 2 +- .../algorithms/implement-bubble-sort.md | 11 +- .../algorithms/implement-insertion-sort.md | 11 +- .../algorithms/implement-merge-sort.md | 32 ++++-- .../algorithms/implement-quick-sort.md | 11 +- .../algorithms/implement-selection-sort.md | 11 +- .../65573d0abe4d38cd6fa13f44.md | 2 +- .../problem-165-intersections.md | 2 +- .../last-letter-first-letter.md | 2 +- .../rosetta-code-challenges/word-wrap.md | 14 +-- .../671775877ee558061e6eebf8.md | 2 +- .../671f46b8a64a336294268cf6.md | 2 +- .../66a207974c806a19d6607073.md | 57 +++++++++- .../lab-event-hub/66ebd4ae2812430bb883c787.md | 2 +- .../66c07238b01053abaf812065.md | 2 +- .../66c06d618d075c7f7f1b890a.md | 4 +- .../66d6a7a3e1aa411e94bf2346.md | 4 +- .../66db57ad34c7089b9b41bfd6.md | 30 ++++- .../66f2836c459cfb16ae76f24f.md | 2 +- .../670803abcb3e980233da4768.md | 32 ++++++ .../6708382cf088b216580a9ff1.md | 52 +++++++++ .../67083868d5fdcb17bf8c14bd.md | 40 ++++++- .../670838977810401844af6fe0.md | 51 +++++++++ .../670838b10ee87a18e5faff62.md | 24 ++++ .../670838e914096b194b0c51aa.md | 79 +++++++++++++ .../670839051794aa19fcef6dc8.md | 29 +++++ .../67083952f800051a8a21fcfd.md | 31 ++++++ .../6708396caa00e11b597b3365.md | 45 ++++++++ .../6734e3a9cc78faaf4248d335.md | 14 ++- .../6734e867bbf41cc5b11648c4.md | 14 ++- .../6734e86f590727c5e7e9ec5e.md | 10 +- .../6734e879c78ee6c61db25b90.md | 43 +++---- .../6734e88cc46e6dc679420040.md | 26 +++-- .../674ba6876f7ada867135bb95.md | 24 ++-- .../672b951b1bf78038b1a2a0e7.md | 2 +- .../672bb009952c7a7904a750cb.md | 2 +- .../6734e2dcb965e5ac0ea38e0f.md | 2 +- .../6733d8606fb893099e3d0df3.md | 6 +- .../672b98be592cfb451f651451.md | 2 +- .../6734e3ceee2da4b0301719b7.md | 42 +++---- .../673500abfe36cd015b67b1b7.md | 26 +++-- .../673500b41af8500191febedc.md | 22 ++-- .../673500bfe1f41601c1ddb1a2.md | 20 ++-- .../6716743531fc9a797351c21e.md | 28 +++++ .../67167835def3588873f339c6.md | 12 ++ .../6716823876aa22a68ba3e2ec.md | 18 ++- .../6716825aff3434a71fdc3e99.md | 14 +++ .../67168278ac6df6a799555db5.md | 81 ++++++++++++++ .../671682b3983489a819507553.md | 81 ++++++++++++++ .../673271b4213033d9b661c70e.md | 6 +- .../6733c5ba834ded4bb067e67c.md | 10 +- .../672a4e04a24858778f57ebfe.md | 105 ++++++++++++++++++ .../66ed8fa2f45ce3ece4053eab.md | 2 +- .../66df3b712c41c499e9d31e5b.md | 16 +-- .../66ed8fe7f45ce3ece4053eb2.md | 2 +- .../66ed8ff4f45ce3ece4053eb4.md | 20 ++-- .../66edd3711bb9f7efa73aef91.md | 2 +- .../66edc25ae5ea80bf6f785552.md | 2 +- .../66f1adcf97e3e4c1bd89ebf5.md | 2 +- .../6723d35bb07d1bd220d0f28d.md | 2 +- .../671a887a7e62c75e9ab1ee4a.md | 4 +- .../671a87e6dcef5b5bd765e5ed.md | 2 +- .../671a955b74ab5588735800d1.md | 2 +- .../671a88d636cebc5fbd407b78.md | 2 +- .../671a90c1cf517678b130419e.md | 4 +- .../671a940c69cdee833d4cc312.md | 2 +- .../671a99394bedfb9a5bc687c4.md | 2 +- .../671a967424a00e8c6561b182.md | 8 +- .../671a907bad4538752765f2ff.md | 4 +- .../review-css/671a9a0a140c2b9d6a75629f.md | 10 +- .../671a892927fdba60db05edfe.md | 2 +- .../6723cc7a8e7aa3b9befd4bac.md | 8 +- .../6723c66f623701a3cdf72130.md | 2 +- .../6723cf27c6e9a0c3f3041385.md | 2 +- .../6723c5b8601a40a100bb59c9.md | 4 +- .../6723ca166fe90eb0a3146848.md | 4 +- .../6723c837cd3276aa73e6da25.md | 4 +- .../6723c463e51a2d9b747d7529.md | 10 +- .../6723c77d1a44b8a7599277dd.md | 2 +- .../6723c1946e4cd7909a836bb4.md | 2 +- .../6723be264695fb7e619fe1fa.md | 10 +- .../6723d3cfdd0717d3f1bf27e3.md | 64 +++++------ .../6723d0ac516099c902394e8b.md | 2 +- .../67487e141bb6a7140a352e12.md | 2 +- .../6723d1f0568292cd394d6fb6.md | 4 +- .../671a915858de057ad84c5dbd.md | 2 +- .../614796cb8086be482d60e0ac.md | 6 +- .../6148e161ecec9511941f8833.md | 10 +- .../5f07be6ef7412fbad0c5626b.md | 4 +- .../672110bda073669bcc2302e6.md | 2 +- .../67213641373a23696b74424b.md | 2 +- .../675309b2795c2a9ae03b8812.md | 4 +- .../67353950c86fe2dfd84bc2f3.md | 2 +- .../66e2df8c5676fe51cead8ec8.md | 2 +- .../66e2e5d890ac8a54c9d703bd.md | 2 +- .../66e2e99caa0cb3570f4822b4.md | 2 +- .../66e2eab8a5638f57b637b7cc.md | 2 +- .../66e2edb23013ca596f8d9568.md | 4 +- .../66e2f376df6f315ee81de81a.md | 4 +- .../671fa47e415d88263d349a10.md | 2 +- 714 files changed, 8109 insertions(+), 2259 deletions(-) diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/algorithms/implement-bubble-sort.md b/curriculum/challenges/espanol/10-coding-interview-prep/algorithms/implement-bubble-sort.md index 68f8467643..cb5b58b8ca 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/algorithms/implement-bubble-sort.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/algorithms/implement-bubble-sort.md @@ -82,7 +82,7 @@ assert.sameMembers( `bubbleSort` No debería usar el método incorporado `.sort()`. ```js -assert(isBuiltInSortUsed()); +assert.isFalse(isBuiltInSortUsed()); ``` # --seed-- @@ -99,9 +99,14 @@ function isSorted(a){ function isBuiltInSortUsed(){ let sortUsed = false; + const temp = Array.prototype.sort; Array.prototype.sort = () => sortUsed = true; - bubbleSort([0, 1]); - return !sortUsed; + try { + bubbleSort([0, 1]); + } finally { + Array.prototype.sort = temp; + } + return sortUsed; } ``` diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/algorithms/implement-insertion-sort.md b/curriculum/challenges/espanol/10-coding-interview-prep/algorithms/implement-insertion-sort.md index 427e016a33..4fe0131de7 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/algorithms/implement-insertion-sort.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/algorithms/implement-insertion-sort.md @@ -84,7 +84,7 @@ assert.deepEqual(insertionSort([5, 4, 33, 2, 8]), [2, 4, 5, 8, 33]) `insertionSort` no debe utilizar el método "buil-in" `.sort()`. ```js -assert(isBuiltInSortUsed()); +assert.isFalse(isBuiltInSortUsed()); ``` # --seed-- @@ -101,9 +101,14 @@ function isSorted(a){ function isBuiltInSortUsed(){ let sortUsed = false; + const temp = Array.prototype.sort; Array.prototype.sort = () => sortUsed = true; - insertionSort([0, 1]); - return !sortUsed; + try { + insertionSort([0, 1]); + } finally { + Array.prototype.sort = temp; + } + return sortUsed; } ``` diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/algorithms/implement-merge-sort.md b/curriculum/challenges/espanol/10-coding-interview-prep/algorithms/implement-merge-sort.md index 488b2bb0c2..f5ce2b0669 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/algorithms/implement-merge-sort.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/algorithms/implement-merge-sort.md @@ -31,13 +31,6 @@ assert.isFunction(mergeSort); `mergeSort` Debería retornar un arreglo ordenado (menor a mayor). ```js -function isSorted(a){ - for(let i = 0; i < a.length - 1; i++) - if(a[i] > a[i + 1]) - return false; - return true; -} - assert.isTrue( isSorted( mergeSort([ @@ -93,17 +86,34 @@ assert.sameMembers( `mergeSort`no debe de usar el método incorporada (built-in)`.sort()`. ```js +assert.isFalse(isBuiltInSortUsed()); +``` + +# --seed-- + +## --after-user-code-- + +```js +function isSorted(a){ + for(let i = 0; i < a.length - 1; i++) + if(a[i] > a[i + 1]) + return false; + return true; +} + function isBuiltInSortUsed(){ let sortUsed = false; + const temp = Array.prototype.sort; Array.prototype.sort = () => sortUsed = true; - mergeSort([0, 1]); + try { + mergeSort([0, 1]); + } finally { + Array.prototype.sort = temp; + } return sortUsed; } -assert.isFalse(isBuiltInSortUsed()); ``` -# --seed-- - ## --seed-contents-- ```js diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/algorithms/implement-quick-sort.md b/curriculum/challenges/espanol/10-coding-interview-prep/algorithms/implement-quick-sort.md index 77d9b58b77..25b76ea503 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/algorithms/implement-quick-sort.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/algorithms/implement-quick-sort.md @@ -80,7 +80,7 @@ assert.sameMembers( `quickSort` no debe que utilizar el método incorporado `.sort()`. ```js -assert(isBuiltInSortUsed()); +assert.isFalse(isBuiltInSortUsed()); ``` # --seed-- @@ -97,9 +97,14 @@ function isSorted(a){ function isBuiltInSortUsed(){ let sortUsed = false; + const temp = Array.prototype.sort; Array.prototype.sort = () => sortUsed = true; - quickSort([0, 1]); - return !sortUsed; + try { + quickSort([0, 1]); + } finally { + Array.prototype.sort = temp; + } + return sortUsed; } ``` diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/algorithms/implement-selection-sort.md b/curriculum/challenges/espanol/10-coding-interview-prep/algorithms/implement-selection-sort.md index c251802d3c..6769ad9300 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/algorithms/implement-selection-sort.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/algorithms/implement-selection-sort.md @@ -78,7 +78,7 @@ assert.sameMembers( `selectionSort` no debe utilizar el método incorporado `.sort()`. ```js -assert(isBuiltInSortUsed()); +assert.isFalse(isBuiltInSortUsed()); ``` # --seed-- @@ -95,9 +95,14 @@ function isSorted(a){ function isBuiltInSortUsed(){ let sortUsed = false; + const temp = Array.prototype.sort; Array.prototype.sort = () => sortUsed = true; - selectionSort([0, 1]); - return !sortUsed; + try { + selectionSort([0, 1]); + } finally { + Array.prototype.sort = temp; + } + return sortUsed; } ``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573d0abe4d38cd6fa13f44.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573d0abe4d38cd6fa13f44.md index b073062953..c07adc0620 100644 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573d0abe4d38cd6fa13f44.md +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573d0abe4d38cd6fa13f44.md @@ -21,7 +21,7 @@ You should chain the `addEventListener()` method to your `audio` variable. assert.match(code, /audio\.addEventListener\(/) ``` -The event listener you used on on your `audio` variable should listen for an `"ended"` event. +The event listener you used on your `audio` variable should listen for an `"ended"` event. ```js assert.match(code, /audio\.addEventListener\(\s*('|")ended\1/) diff --git a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-165-intersections.md b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-165-intersections.md index 04fef3d3e5..f2f3e2da4d 100644 --- a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-165-intersections.md +++ b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-101-to-200/problem-165-intersections.md @@ -10,7 +10,7 @@ dashedName: problem-165-intersections A segment is uniquely defined by its two endpoints. By considering two line segments in plane geometry there are three possibilities: the segments have zero points, one point, or infinitely many points in common. -Moreover when two segments have exactly one point in common it might be the case that that common point is an endpoint of either one of the segments or of both. If a common point of two segments is not an endpoint of either of the segments it is an interior point of both segments. +Moreover when two segments have exactly one point in common it might be the case that common point is an endpoint of either one of the segments or of both. If a common point of two segments is not an endpoint of either of the segments it is an interior point of both segments. We will call a common point $T$ of two segments $L_1$ and $L_2$ a true intersection point of $L_1$ and $L_2$ if $T$ is the only common point of $L_1$ and $L_2$ and $T$ is an interior point of both segments. diff --git a/curriculum/challenges/espanol/22-rosetta-code/rosetta-code-challenges/last-letter-first-letter.md b/curriculum/challenges/espanol/22-rosetta-code/rosetta-code-challenges/last-letter-first-letter.md index f6bb3eafe5..98b7f31a3d 100644 --- a/curriculum/challenges/espanol/22-rosetta-code/rosetta-code-challenges/last-letter-first-letter.md +++ b/curriculum/challenges/espanol/22-rosetta-code/rosetta-code-challenges/last-letter-first-letter.md @@ -21,7 +21,7 @@ Child 2: snake # --instructions-- -Write a function that takes an input array of words. The function should return an array of words where the first letter of each word is the same as the last letter of the previous word. Only use the words in the input array, and once a word is used it cannot be repeated. The words in the return array should be selected and sequenced so that that its length is maximized. +Write a function that takes an input array of words. The function should return an array of words where the first letter of each word is the same as the last letter of the previous word. Only use the words in the input array, and once a word is used it cannot be repeated. The words in the return array should be selected and sequenced so that its length is maximized. # --hints-- diff --git a/curriculum/challenges/espanol/22-rosetta-code/rosetta-code-challenges/word-wrap.md b/curriculum/challenges/espanol/22-rosetta-code/rosetta-code-challenges/word-wrap.md index 5ea8d8161d..c2b3939196 100644 --- a/curriculum/challenges/espanol/22-rosetta-code/rosetta-code-challenges/word-wrap.md +++ b/curriculum/challenges/espanol/22-rosetta-code/rosetta-code-challenges/word-wrap.md @@ -12,7 +12,7 @@ Even today, with proportional fonts and complex layouts, there are still cases w # --instructions-- -Write a function that can wrap this text to any number of characters. As an example, the text wrapped to 80 characters should look like the following: +Write a function that can wrap this text to any number of characters. Note that the input text already contains line breaks, which your function should handle appropriately. As an example, the text wrapped to 80 characters should look like the following:
 Wrap text using a more sophisticated algorithm such as the Knuth and Plass TeX
@@ -23,37 +23,37 @@ than a simple minimum length algorithm.
 
 # --hints--
 
-wrap should be a function.
+`wrap` should be a function.
 
 ```js
 assert.equal(typeof wrap, 'function');
 ```
 
-wrap should return a string.
+`wrap` should return a string.
 
 ```js
 assert.equal(typeof wrap('abc', 10), 'string');
 ```
 
-wrap(80) should return 4 lines.
+`wrap(text,80)` should return 4 lines.
 
 ```js
 assert(wrapped80.split('\n').length === 4);
 ```
 
-Your `wrap` function should return our expected text.
+Your `wrap` function should return the expected text.
 
 ```js
 assert.equal(wrapped80.split('\n')[0], firstRow80);
 ```
 
-wrap(42) should return 7 lines.
+`wrap(text,42)` should return 7 lines.
 
 ```js
 assert(wrapped42.split('\n').length === 7);
 ```
 
-Your `wrap` function should return our expected text.
+Your `wrap` function should return the expected text.
 
 ```js
 assert.equal(wrapped42.split('\n')[0], firstRow42);
diff --git a/curriculum/challenges/espanol/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775877ee558061e6eebf8.md b/curriculum/challenges/espanol/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775877ee558061e6eebf8.md
index 206292eda3..292b1cfd93 100644
--- a/curriculum/challenges/espanol/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775877ee558061e6eebf8.md
+++ b/curriculum/challenges/espanol/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775877ee558061e6eebf8.md
@@ -37,7 +37,7 @@ This word refers to the ongoing or current moment in which events happen.
 
 The phrase `in real time` refers to something happening immediately as events occur, without delay. It is often used in the context of monitoring, communication, or data processing. For example:
 
-`The system updates the dashboard in real time, so you can see changes instantly.` - Meaning the dashboard changes immediately after the updates after the updates are applied.
+`The system updates the dashboard in real time, so you can see changes instantly.` - Meaning the dashboard changes immediately after the updates are applied.
 
 In Jake's sentence, he means that while he checked for security vulnerabilities, it wasn't always done immediately as the updates happened.
 
diff --git a/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f46b8a64a336294268cf6.md b/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f46b8a64a336294268cf6.md
index 9de6d7ee88..c482e30c53 100644
--- a/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f46b8a64a336294268cf6.md
+++ b/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f46b8a64a336294268cf6.md
@@ -49,4 +49,4 @@ This sentence is in the `Present Simple` tense, not the `Present Perfect continu
 
 # --explanation--
 
-The negative form of the `Present Perfect continuous` tense tense is created with `hasn't/haven't + been + present participle`. It describes an ongoing action that started in the past and continues or remains relevant but hasn't occurred as expected. 
+The negative form of the `Present Perfect continuous` tense is created with `hasn't/haven't + been + present participle`. It describes an ongoing action that started in the past and continues or remains relevant but hasn't occurred as expected. 
diff --git a/curriculum/challenges/espanol/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md b/curriculum/challenges/espanol/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md
index 354ba863b4..dd4cbb7f82 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md
@@ -372,7 +372,13 @@ const selectors = [
   'span[class~="one"] :first-of-type',
   'span[class~="one"] span:first-child',
   'span[class~="one"] span:nth-child(1)',
-  'span[class~="one"] span:first-of-type'
+  'span[class~="one"] span:first-of-type',
+  'span[class~="one"] > :first-child',
+  'span[class~="one"] > :nth-child(1)',
+  'span[class~="one"] > :first-of-type',
+  'span[class~="one"] > span:first-child',
+  'span[class~="one"] > span:nth-child(1)',
+  'span[class~="one"] > span:first-of-type'
 ]
 assert.isNotNull(new __helpers.CSSHelp(document).getStyleAny(selectors));
 ```
@@ -386,7 +392,13 @@ const selectors = [
   'span[class~="one"] :first-of-type',
   'span[class~="one"] span:first-child',
   'span[class~="one"] span:nth-child(1)',
-  'span[class~="one"] span:first-of-type'
+  'span[class~="one"] span:first-of-type',
+  'span[class~="one"] > :first-child',
+  'span[class~="one"] > :nth-child(1)',
+  'span[class~="one"] > :first-of-type',
+  'span[class~="one"] > span:first-child',
+  'span[class~="one"] > span:nth-child(1)',
+  'span[class~="one"] > span:first-of-type'
 ]
 assert.isTrue(new __helpers.CSSHelp(document).getStyleAny(selectors)?.getPropVal('background-image').includes('linear-gradient('));
 ```
@@ -394,6 +406,7 @@ assert.isTrue(new __helpers.CSSHelp(document).getStyleAny(selectors)?.getPropVal
 You should have an attribute selector to target the first two descendants of `span` elements that have the word `two` as a part of their `class` value.
 
 ```js
+
 const selectors = [
   'span[class~="two"] :nth-child(1), span[class~="two"] :nth-child(2)',
   'span[class~="two"] :nth-child(2), span[class~="two"] :nth-child(1)',
@@ -406,7 +419,19 @@ const selectors = [
   'span[class~="two"] span:first-child, span[class~="two"] span:nth-child(2)',
   'span[class~="two"] span:nth-child(2), span[class~="two"] span:first-child',
   'span[class~="two"] span:nth-of-type(-n+2)',
-  'span[class~="two"] span:nth-child(-n+2)'
+  'span[class~="two"] span:nth-child(-n+2)',
+  'span[class~="two"] > :nth-child(1), span[class~="two"] > :nth-child(2)',
+  'span[class~="two"] > :nth-child(2), span[class~="two"] > :nth-child(1)',
+  'span[class~="two"] > :first-child, span[class~="two"] > :nth-child(2)',
+  'span[class~="two"] > :nth-child(2), span[class~="two"] > :first-child',
+  'span[class~="two"] > :nth-of-type(-n+2)',
+  'span[class~="two"] > :nth-child(-n+2)',
+  'span[class~="two"] > span:nth-child(1), span[class~="two"] > span:nth-child(2)',
+  'span[class~="two"] > span:nth-child(2), span[class~="two"] > span:nth-child(1)',
+  'span[class~="two"] > span:first-child, span[class~="two"] > span:nth-child(2)',
+  'span[class~="two"] > span:nth-child(2), span[class~="two"] > span:first-child',
+  'span[class~="two"] > span:nth-of-type(-n+2)',
+  'span[class~="two"] > span:nth-child(-n+2)'
   ]
 assert.isNotNull(new __helpers.CSSHelp(document).getStyleAny(selectors));
 ```
@@ -426,7 +451,19 @@ const selectors = [
   'span[class~="two"] span:first-child, span[class~="two"] span:nth-child(2)',
   'span[class~="two"] span:nth-child(2), span[class~="two"] span:first-child',
   'span[class~="two"] span:nth-of-type(-n+2)',
-  'span[class~="two"] span:nth-child(-n+2)'
+  'span[class~="two"] span:nth-child(-n+2)',
+  'span[class~="two"] > :nth-child(1), span[class~="two"] > :nth-child(2)',
+  'span[class~="two"] > :nth-child(2), span[class~="two"] > :nth-child(1)',
+  'span[class~="two"] > :first-child, span[class~="two"] > :nth-child(2)',
+  'span[class~="two"] > :nth-child(2), span[class~="two"] > :first-child',
+  'span[class~="two"] > :nth-of-type(-n+2)',
+  'span[class~="two"] > :nth-child(-n+2)',
+  'span[class~="two"] > span:nth-child(1), span[class~="two"] > span:nth-child(2)',
+  'span[class~="two"] > span:nth-child(2), span[class~="two"] > span:nth-child(1)',
+  'span[class~="two"] > span:first-child, span[class~="two"] > span:nth-child(2)',
+  'span[class~="two"] > span:nth-child(2), span[class~="two"] > span:first-child',
+  'span[class~="two"] > span:nth-of-type(-n+2)',
+  'span[class~="two"] > span:nth-child(-n+2)'
   ]
 
 assert.isTrue(new __helpers.CSSHelp(document).getStyleAny(selectors)?.backgroundImage.includes('linear-gradient(')) 
@@ -435,13 +472,21 @@ assert.isTrue(new __helpers.CSSHelp(document).getStyleAny(selectors)?.background
 You should have an attribute selector to target the `span` elements that are descendants of `span` elements that have the word `three` as a part of their `class` value.
 
 ```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('span[class~="three"] span'));
+const selectors = [
+  'span[class~="three"] span',
+  'span[class~="three"] > span'
+]
+assert.exists(new __helpers.CSSHelp(document).getStyleAny(selectors));
 ```
 
 You should use an attribute selector to target the `span` elements that are descendants of `span` elements that have the word `three` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`.
 
 ```js
-assert.include(new __helpers.CSSHelp(document).getStyle('span[class~="three"] span')?.getPropVal('background-image'), 'linear-gradient(');
+const selectors = [
+  'span[class~="three"] span',
+  'span[class~="three"] > span'
+]
+assert.include(new __helpers.CSSHelp(document).getStyleAny(selectors)?.getPropVal('background-image'), 'linear-gradient(');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/espanol/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md b/curriculum/challenges/espanol/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md
index 86b83b4b8d..724b7f09a7 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md
@@ -245,7 +245,7 @@ assert.isNotEmpty(eventTitles);
 eventTitles.forEach((eventTitle => assert.isNotEmpty(eventTitle.innerText)));
 ```
 
-Each `p` element shoud have the event description.
+Each `p` element should have the event description.
 
 ```js
 const eventDescriptions = document.querySelectorAll('p');
diff --git a/curriculum/challenges/espanol/25-front-end-development/lab-factorial-calculator/66c07238b01053abaf812065.md b/curriculum/challenges/espanol/25-front-end-development/lab-factorial-calculator/66c07238b01053abaf812065.md
index 54a72106fc..df87bf86a3 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lab-factorial-calculator/66c07238b01053abaf812065.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lab-factorial-calculator/66c07238b01053abaf812065.md
@@ -16,7 +16,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 1. You should declare a variable `num` and assign it a number of your choice. The assigned number should be between `1` and `20` inclusive.
 1. Create a function named `factorialCalculator` that takes a number as an argument and returns the factorial of that number.
 1. Inside the function, declare a `result` variable and assign it the value of `1`. Using a loop, loop through all numbers from `1` to the input number(inclusive) and for each number, multiply the `result` variable by the current number and assign the result to the `result` variable. You can choose to use  either a `for` loop, `while` loop or `do...while` loop here.
-1. You should call the `factorialCalculator` function with with `num` as the argument and assign the result to the variable `factorial`.
+1. You should call the `factorialCalculator` function with `num` as the argument and assign the result to the variable `factorial`.
 1. You should store the final output in the format `Factorial of [num] is [factorial]` and assign it to the variable `resultMsg`.
 1. You should output the value of `resultMsg` to the console.
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/lab-fortune-teller/66c06d618d075c7f7f1b890a.md b/curriculum/challenges/espanol/25-front-end-development/lab-fortune-teller/66c06d618d075c7f7f1b890a.md
index 7272ba11ea..4194aada43 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lab-fortune-teller/66c06d618d075c7f7f1b890a.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lab-fortune-teller/66c06d618d075c7f7f1b890a.md
@@ -19,7 +19,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
    - `"The weather will be nice tomorrow."`
    - `"Be cautious of your new neighbours."`
    - `"You will find a new hobby soon."`
-   - `"It would be wise to avoid the colour red today."`
+   - `"It would be wise to avoid the color red today."`
 
 2. You should select a random number between 1 and 5, inclusive, and assign it to the variable `randomNumber`.
 
@@ -122,7 +122,7 @@ const fortune1 = "Your cat will look very cuddly today.";
 const fortune2 = "The weather will be nice tomorrow.";
 const fortune3 = "Be cautious of your new neighbours.";
 const fortune4 = "You will find a new hobby soon.";
-const fortune5 = "It would be wise to avoid the colour red today.";
+const fortune5 = "It would be wise to avoid the color red today.";
 
 let randomNumber = Math.floor(Math.random() * 5) + 1;
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md b/curriculum/challenges/espanol/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md
index dc272f1669..b7531dae51 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md
@@ -20,7 +20,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 1. Your `#house` should have a background color and a border set.
 1. You should have a `#chimney`, `#roof`, `#window-1`, `#window-2`, and `#door` `div`s within the `#house`.
 1. All of the immediate children of the `#house` should have a `position` of `absolute`.
-1. All of the immediate children of the `#house` should have a width, height, border, and background color set.
+1. `#roof`, `#chimney`, `window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set.
 1. Your `#roof` should have a top value of `0`.
 1. Your `#door` should be placed at the bottom of your house.
 1. Your windows should be placed below your `#roof` and at least higher than one third of your `#door`'s height.
@@ -292,7 +292,7 @@ Your `#chimney` should have a `top` value that puts it at the top of your `#hous
 
 ```js
 const chimney = getComputedStyle(document.querySelector("#chimney"));
-assert.equal(Number(chimney?.getPropertyValue("top").replace("px", "")), - Number(chimney?.getPropertyValue("height").replace("px", "")));
+assert.approximately(parseFloat(chimney?.getPropertyValue("top")), - parseFloat(chimney?.getPropertyValue("height")), 2);
 ```
 
 Your `#chimney` should have a `z-index` that puts it behind the house.
diff --git a/curriculum/challenges/espanol/25-front-end-development/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md b/curriculum/challenges/espanol/25-front-end-development/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md
index 057dbbee53..eee0432712 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md
@@ -151,7 +151,7 @@ Your `.lightbox` element should be hidden initially.
 assert.equal(new __helpers.CSSHelp(document).getStyle('.lightbox')?.display, 'none');
 ```
 
-When you click one of your `.gallery-item` elements, the `.lightbox` element's `display` property should be set to `flex` to make to make `.lightbox` and the two elements within it visible.
+When you click one of your `.gallery-item` elements, the `.lightbox` element's `display` property should be set to `flex` to make `.lightbox` and the two elements within it visible.
 
 ```js
 // Get the lightbox element
@@ -209,7 +209,7 @@ galleryItems.forEach((item) => {
 
 ```
 
-When your `.lightbox` element is visible and you click anywhere outside the image, the `.lightbox` elements `display` should be set back to `none`.
+When your `.lightbox` element is visible and you click the `#close` button, the `.lightbox` elements `display` should be set back to `none`.
 
 ```js
 // Get the lightbox and a background element (or the document) for simulating clicks outside
@@ -222,7 +222,7 @@ function getComputedDisplay(element) {
 }
 
 // Make sure the lightbox is visible initially
-assert.strictEqual(getComputedDisplay(lightbox), 'flex');
+lightbox.style.display = "flex";
 
 // Simulate a click outside the lightbox
 background.dispatchEvent(new Event('click'));
@@ -234,6 +234,30 @@ background.dispatchEvent(new Event('click'));
 assert.strictEqual(getComputedDisplay(lightbox), 'none');
 ```
 
+When your `.lightbox` element is visible and you click the `.lightbox` element, the `.lightbox` elements `display` should be set back to `none`.
+
+```js
+// Get the lightbox element for simulating clicks outside
+const lightbox = document.querySelector(".lightbox");
+
+// Function to get the computed display property
+function getComputedDisplay(element) {
+  return window.getComputedStyle(element).display;
+}
+
+// Make sure the lightbox is visible initially
+lightbox.style.display = "flex";
+
+// Simulate a click inside the lightbox
+lightbox.dispatchEvent(new Event('click'));
+
+// Wait for any async operations if needed
+// await new Promise(resolve => setTimeout(resolve, 100)); // Adjust timeout as needed
+
+// Assert that the lightbox is hidden after clicking outside
+assert.strictEqual(getComputedDisplay(lightbox), 'none');
+```
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/espanol/25-front-end-development/lab-pyramid-generator/66f2836c459cfb16ae76f24f.md b/curriculum/challenges/espanol/25-front-end-development/lab-pyramid-generator/66f2836c459cfb16ae76f24f.md
index cafb2262e0..bf00dd6582 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lab-pyramid-generator/66f2836c459cfb16ae76f24f.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lab-pyramid-generator/66f2836c459cfb16ae76f24f.md
@@ -52,7 +52,7 @@ assert.lengthOf(pyramid, 3);
 assert.equal(pyramid("o", 4, false), "\n   o\n  ooo\n ooooo\nooooooo\n")
 ```
 
-`pyramid("p", 5, true)` should return `"\nppppppppp\p ppppppp\n  ppppp\n   ppp\n    p\n"`.
+`pyramid("p", 5, true)` should return `"\nppppppppp\n ppppppp\n  ppppp\n   ppp\n    p\n"`.
 
 ```js
 assert.equal(pyramid("p", 5, true), "\nppppppppp\n ppppppp\n  ppppp\n   ppp\n    p\n")
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
index ac62d4f199..b9aff29d0f 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
@@ -10,6 +10,38 @@ dashedName: what-are-div-elements
 
 Watch the video and answer the questions below.
 
+# --transcript--
+
+Now that we understand what HTML is, let's move onto the fun stuff! I am going to look at the Content Division Element - or in other words, the *div*:
+
+```html
+
+``` + +I like to think of the `div` as a beautiful being that can be anything you want it to be. We can give a `div` a `height`, we can give it a `width`, and we can give it a background color using CSS - or in other words styling, which we will cover in lectures coming up. + +We can also use it in a very basic form without styling, to hold other elements together. So for example, we can create a `div` and put a heading in it, and put a paragraph in it, and now these two elements will be grouped together: + +```html +
+

I am a heading

+

I am a paragraph

+
+``` + +Just be aware that there might be better elements to use when grouping these together. You might choose a `section` element, for example: + +```html +
+

I am a heading

+

I am a paragraph

+
+``` + +This is because the `section` element has semantic meaning. Semantics are the meaning of words or phrases in a language. In HTML, which is a language, elements have their own semantic meaning too. So, this means if you use a `section` element, the browser will pick up its semantic meaning and understand to treat this as a section - on desktops, mobiles, you name it.  + +We will dive into this topic further later on. For now, just know that the `div`, does not have this. It's like a mysterious ghost. Let's see what else we can do to a `div`, in the next lecture. + # --questions-- ## --text-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md index 2d33343871..6abee68df2 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md @@ -10,6 +10,58 @@ dashedName: what-are-ids-and-classes Watch the video and answer the questions below. +# --transcript-- + +Let's learn about ID's and classes, and when you should use them. + +The `id` attribute adds a unique identifier to an HTML element. In this example, there is an `h1` element with an `id` of `title`: + +```html +

Movie Review Page

+``` + +You can reference the `id` name of `title` within your JavaScript or CSS. Here's a CSS example referencing the `id` of `title` to change the text `color` to `red`: + +```css +#title { + color: red; +} +``` + +The hash symbol (`#`) in front of `title`, tells the computer you want to target an `id` with that value. `id` names should not be used more than once, and they should always be unique. Another thing to note about `id` values, is that they cannot have spaces in them. Here is an example of applying the words `main` and `heading` to an `id` attribute value: + +```html +

Main heading

+``` + +Browsers will see this space as part of the `id` which will lead to unwanted issues when it comes to styling and scripting. `id` attribute values should only contain letters, digits, underscores, and dashes. + +In contrast to the `id` attribute, the `class` attribute value does not need to be unique and can contain spaces. Here is an example of applying a class called `box` to a `div` element: + +```html +
+``` + +If you wanted to add multiple class names to an element, you can do so by separating the names by a space. Here is an updated example applying multiple classes to a `div` element: + +```html +
+``` + +To apply a set of styles to that `box` class, you can reference that class inside your CSS. Here is an example of setting `width`, `height`, and `border` properties to the element with the `class` name of `box`: + +```css +.box { + width: 200px; + height: 200px; + border: 2px solid black; +} +``` + +The dot symbol (`.`) in front of `box`, tells the computer you want to target a `class` with that value. When the code runs, it will search through all of your HTML document to find all elements with that class name and apply those styles. + +So, to recap, when should you use an `id` versus a `class`? Classes are best used when you want to apply a set of styles to many elements. If you want to target a specific element, it is best to use `id` because those values need to be unique. + # --questions-- ## --text-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md index 95b16c7bd7..bfb9153f7c 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md @@ -2,7 +2,7 @@ id: 67083868d5fdcb17bf8c14bd title: What Are HTML Entities, and What Are Some Common Examples? challengeType: 11 -videoId: mVdIq0H_B4E +videoId: brTVRzirTGM dashedName: what-are-html-entities --- @@ -10,6 +10,44 @@ dashedName: what-are-html-entities Watch the video and answer the questions below. +# --transcript-- + +Let's learn about HTML entities. + +An HTML entity, or character reference, is a set of characters used to represent a reserved character in HTML. In this example, there is a paragraph element with an image element nested inside: + +```html +

This is an element

+``` + +The text on the screen should say `This is an element`. However, the text currently says `This is an element.` This is happening because when the HTML parser sees the less than (`<`) symbol followed by an HTML tag name, it interprets that as an HTML element. + +To fix this issue, you can use HTML entities. Here is an updated example using the correct HTML entities for the less than and greater than (`>`) symbols. + +```html +

This is an <img /> element

+``` + +These types of character references are known as named character references. Named references start with an ampersand sign (`&`) and end with a semicolon (`;`). By using a named character reference, the HTML parser will not confuse this with an actual HTML element. Here is what the updated paragraph element looks like on the page: `This is an element`. Now, users will be able to see the entire image element syntax as you intended it. + +Another type of character reference would be the decimal numeric reference. Here is an example of using the decimal numeric reference for the less than symbol: + +```html +< +``` + +This character reference starts with an ampersand sign and hash symbol (`#`), followed by one or more decimal digits, followed by a semicolon. + +The last type of character reference would be the hexadecimal numeric reference. Here is an example of using the hexadecimal numeric reference for the less than symbol: + +```html +< +``` + +This character reference starts with an ampersand sign, hash symbol, and the letter `x`. Then it is followed by one or more ASCII hex digits and ends with a semicolon. + +So what are some other examples of using HTML entities? Well, you often see them used for symbols like the copyright symbol (`©`), quotes (`"`), trademark symbol (`™`), and the ampersand sign. + # --questions-- ## --text-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md index 7ce09ce185..f13b1d632b 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md @@ -10,6 +10,57 @@ dashedName: what-is-the-role-of-the-link-element-in-html Watch the video and answer the questions below. +# --transcript-- + + +Let's learn about the `link` element, and how to use it to link to external stylesheets. + +The `link` element is used to link to external resources like stylesheets and site icons. Here is the basic syntax for using the `link` element for an external CSS file: + +```html + +``` + +The `rel` attribute is used to specify the relationship between the linked resource and the HTML document. In this situation, we need to specify that this linked resource is a `stylesheet`. + +It is considered best practice to separate your HTML and CSS in different files. Developers will use the `link` element for their external CSS file instead of writing everything in the HTML document. + +The `href` attribute is used to specify the location of the URL for the external resource. + +The `dot` followed by a forward slash in the example tells the computer to look in the current folder, or directory, for the `styles.css` file. + +The `link` element should be placed inside the `head` element as seen in the following example: + +```html + + + + Examples of the link element + + +``` + +Often times you will see multiple `link` elements inside a professional codebase that link to different stylesheets, fonts, and icons. Here is an example of using the `link` element to link to an external Google Font called *Playwright Cuba*: + +```html + + + +``` + +Google Fonts are a set of free and open source custom fonts that you can use inside any project. You can choose which fonts you would like to use and Google will provide you with the necessary HTML and CSS code. In this example, the `preconnect` value for the `rel` attribute tells the browser to create an early connection to the value specified in the `href` attribute. This is done to speed up loading times for these external resources. + +Another common use case for the `link` element is to link to icons. Here is an example of linking to a favicon: + +```html + +``` + +A favicon, which is short for favorite icon, is a small icon typically displayed in the browser tab next the site title. A lot of websites will use a favicon to display their brand icon. + # --questions-- ## --text-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md index 02192951fb..ece8707dee 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md @@ -10,6 +10,30 @@ dashedName: what-is-the-role-of-the-script-element-in-html Watch the video and answer the questions below. +# --transcript-- + +Let's learn about the `script` element, and how to use it to link to external JavaScript files. + +The `script` element is used to embed executable code. Most developers will use this to execute JavaScript code. JavaScript is used to add interactivity to your web pages. Common examples of using JavaScript include interactive games, image sliders, and dynamic forms that validate user input in real-time. Here is an example of using the `script` element in an HTML document: + +```html + + + +``` + +In this example, we have an `alert` to display the message `Welcome to freeCodeCamp.` When the page first loads, the alert will pop up. Then the user can click on the OK button to dismiss the message. + +While you can technically write all of your JavaScript code inside the `script` tags, it is considered best practice to link to an external JavaScript file instead. Here is an example of using the `script` element to link to an external JavaScript file: + +```html + +``` + +The `src` attribute is used here to specify the location for that external JavaScript file. `src` stands for "source". The reason why it is not encouraged to place all of your JavaScript inside the HTML document is because of separation of concerns. Separation of concerns is a design principle where you separate your programs into distinct sections and have each section address a separate concern. In this case, we want to separate our JavaScript code from our HTML code. + # --questions-- ## --text-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md index e114141bd0..15395888d5 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md @@ -10,6 +10,85 @@ dashedName: what-is-an-html-boilerplate Watch the video and answer the questions below. +# --transcript-- + +Let's learn about the HTML boilerplate. + +What is the HTML boilerplate, you ask? It's like a ready-made template for your webpages. Think of it as the foundations of a house. A boilerplate includes the basic structure and essential elements every HTML document needs. It saves you time and helps ensure your pages are set up properly. Here is an example: + +```html + + + + + + freeCodeCamp + + + + + +``` + +Let's break down the key parts of this boilerplate. First, there is the `DOCTYPE` declaration: + +```html + +``` + +It tells browsers which version of HTML you're using. Next, comes the `html` tag: + +```html + + + + +``` + +This wraps around all your content, and can specify the language of your page. Inside the `html` tag, you'll find two main sections - a `head`, and a `body`: + +```html + + + + + + + + + +``` + +The `head` section contains important behind-the-scenes information: + +```html + + + + Document Title Goes Here + + +``` + +Your site's metadata, contained in `meta` elements, has details about things like character encoding, and how websites like Twitter should preview your page's link. Your site's title, found in the `title` element, determines the text that appears in the browser tab or window. Finally, you'll typically link your page's external stylesheets in the `head` section using `link` elements. + +The `body` section is where all your content goes: + +```html + +

I am a main title

+

Example paragraph text

+ +``` + +This is what visitors actually see on your web page. + +Now, why is a boilerplate important? It ensures your pages are structured correctly and work well across different browsers. Using a boilerplate helps you avoid common mistakes and follow best practices. It's a great starting point for any web project. Remember, you can customize your own boilerplate to fit your needs. As you gain experience, you might add your own preferred elements or `meta` tags. As you continue to improve your personal boilerplate, you'll find that it saves you time when starting new projects. + +Next time you start a new HTML file, consider using a boilerplate. It will definitely give you a solid foundation to build on. + # --questions-- ## --text-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md index 102a2cbe50..0f2789a3a1 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md @@ -10,9 +10,38 @@ dashedName: what-is-utf-8-character-encoding Watch the video and answer the questions below. +# --transcript-- + +What is UTF-8 character encoding, and why is it needed? + +UTF-8, or UCS Transformation Format 8, is a standardized character encoding widely used on the web. Character encoding is the method computers use to store characters as data. Essentially, all text on a web page is a sequence of characters stored as one or more bytes. In computing, a byte is a unit of data consisting of 8 bits, or binary digits. UTF-8 supports every character in the Unicode character set - and this includes characters and symbols from all writing systems, languages, and technical symbols. Here is an example of using the `meta` element with the `charset` attribute to set the character encoding to `UTF-8`: + +```html + +``` + +By setting the character encoding to UTF-8, it will ensure that the accented `"e"` character (`é`) is displayed correctly on the page. Here is an extended code example of using the UTF-8 character encoding: + +```html + + + + + + Examples of the UTF-8 encoding + + +

Café

+ + +``` + +For each new project you create, you should include this `meta` element with the `charset` attribute set to `UTF-8`. + # --questions-- ## --text-- + Which attribute is used to set the UTF-8 character encoding for HTML documents? ## --answers-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md index fe94f2bb13..2617906016 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md @@ -10,6 +10,37 @@ dashedName: what-is-the-role-of-the-meta-description Watch the video and answer the questions below. +# --transcript-- + +What is the role of the `meta` description element, and how does it affect SEO? + +SEO, or Search Engine Optimization, is a practice that optimizes web pages so they become more visible and rank higher on search engines. One way to improve your site's SEO, is to provide a short description for the web page using the `meta` element. Here is an example of using the meta element to set a page description for a gardening site: + +```html + +``` + +By setting the `name` attribute to `description`, it ensures that browsers, search engines, and other web tools correctly interpret this metadata. The `content` attribute is where you will place your description. It is recommended that you keep your descriptions short and concise. This is because search engines will often truncate the description based on the results page layout. + +Similar to other types of `meta` elements, the `meta` description will not be visible on the web page itself. One place where the page description can be found is in the search engine results page snippet. Here are some examples of page result snippets for freeCodeCamp's subreddit and GitHub repositories: + +```sh +r\FreeCodeCamp: This is the official subreddit for the freeCodeCamp.org community. Learn to +code for free together with millions of other people... +``` + +```sh +Our full-stack web development and machine learning curriculum is completely free and self- +paced. We have thousands of interactive coding challenges to help you... +``` + +In the examples, each of the page descriptions are located just beneath the site links. Within a couple of seconds, users can get a general sense of what the page is about and decide to click on the links for more information. + +Even though `meta` descriptions won't directly affect a site's ranking on search engine, having a strong description could result in more traffic to your website. + # --questions-- ## --text-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md index 73a3bc175d..37a474eeaf 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md @@ -10,6 +10,51 @@ dashedName: what-is-the-role-of-open-graph-tags Watch the video and answer the questions below. +# --transcript-- + +What is the role of the open graph tag, and how does it affect SEO? + +The open graph protocol enables you to control how your website's content appears across various social media platforms, such as Facebook, LinkedIn, and many more. By setting these open graph properties, you can entice users to want to click and engage with your content. You can set these properties through a collection of `meta` elements inside your HTML `head` section. + +The first important OG property to include would be the `title`. Here is an example of setting the OG `title` for the freeCodeCamp homepage: + +```html + +``` + +For the `name` attribute, you will need to specify that it is `og:title`. The `content` attribute is where you will write the title you want displayed for social media sites. + +The next important OG property would be the `type`. Here is an example of using the OG `type` for the freeCodeCamp homepage: + +```html + +``` + +The `type` property is used to represent the type of content being shared on social media. Examples of this content include articles, websites, videos, or music. + +The third important OG property would be the `image`. Here is an example of setting the OG `image` for the freeCodeCamp homepage: + +```html + +``` + +In this example, the open graph image is pointing to the freeCodeCamp logo. All of these images should be high quality with good dimensions and ratios. Most social media platforms will include criteria for image requirements to help you ensure that your content displays well on their site. For example, the developers.facebook.com documentation page states: + +"use images that are at least 1200 by 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 by 315 pixels to display link page posts with larger images." + +The fourth important OG property would be the `url`. Here is an example of setting the OG `url` for the freeCodeCamp homepage: + +```html + +``` + +There are many more OG properties that you can set, like `description`, `audio`, `video` and `locale`. However, the open graph `url`, `image`, `type`, and `title` are the most important ones to include. + +So how do these open graph properties affect Search Engine Optimization? When your content is shared on social media, well-crafted OG properties can enhance the appearance for your content in users' feeds. This can lead to higher click-through rates which could signal to search engines that your content is relevant and engaging. + # --questions-- ## --text-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e3a9cc78faaf4248d335.md b/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e3a9cc78faaf4248d335.md index 87f6104018..5066ee3d0a 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e3a9cc78faaf4248d335.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e3a9cc78faaf4248d335.md @@ -2,13 +2,17 @@ id: 6734e3a9cc78faaf4248d335 title: What Is the Role of JS Libraries and Frameworks, and Why Are They Used in the Industry? challengeType: 19 -#videoId: nVAaxZ34khk +videoId: AJMjp3NxnEA dashedName: what-is-the-role-of-js-libraries-and-frameworks-and-why-are-they-used-in-the-industry --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: +Watch the video and answer the questions below. + +# --transcript-- + +What is the role of JS libraries and frameworks, and why are they used in the industry? JavaScript libraries and frameworks provide pre-built code that streamlines the development process. While both libraries and frameworks serve to improve productivity and standardize coding practices, they differ in their approach and level of control they provide to developers. @@ -16,7 +20,7 @@ Libraries are generally more focused on providing solutions to specific tasks, s An example of a JavaScript library is jQuery. -jQuery became very popular in the early 2010s and was widely used to simplify DOM manipulation, event handling, animations, effects, and more. This library also offered a rich ecosystem of plugins, which made it easy to build common web components like datepickers, sliders, and modal dialogs. +jQuery became very popular in the early 2010s and was widely used to simplify DOM manipulation, event handling, animations, effects, and more. This library also offered a rich ecosystem of plugins, which made it easy to build common web components like date pickers, sliders, and modal dialogs. Although jQuery is no longer as widely used as it once was, it significantly helped developers by making tasks that were complex in vanilla JavaScript much easier to implement. @@ -28,11 +32,11 @@ Other examples of frameworks include Remix and NextJS. In contrast, React, a UI library, is more flexible and doesn't enforce any particular architectural pattern. React focuses primarily on the view layer and leaves a lot of the choices on application design up to the developers. -Although libraries and frameworks are used across projects of all sizes, The choice between using them often depends on the project's requirements. Libraries offer flexibility for specific functionalities, while frameworks provide a structured approach towards complex applications. +Although libraries and frameworks are used across projects of all sizes, the choice between using them often depends on the project's requirements. Libraries offer flexibility for specific functionalities, while frameworks provide a structured approach towards complex applications. In the industry, libraries and frameworks are widely used for several reasons. They significantly speed up development by providing quick solutions for common problems. -One common problem in JavaScript is working with dates and timezones. But there are libraries out there with built in solutions to help you with date manipulation, timezones, parsing and formatting of dates. +One common problem in JavaScript is working with dates and timezones. But there are libraries out there with built-in solutions to help you with date manipulation, time zones, parsing and formatting of dates. A lot of popular libraries and frameworks are well-tested and maintained by large communities. This means they're often more practical than building the same thing from scratch. diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e867bbf41cc5b11648c4.md b/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e867bbf41cc5b11648c4.md index 6384efbdf9..dcad2a98bc 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e867bbf41cc5b11648c4.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e867bbf41cc5b11648c4.md @@ -2,13 +2,17 @@ id: 6734e867bbf41cc5b11648c4 title: What Are Single Page Applications, and What Are Some Issues Surrounding Them? challengeType: 19 -#videoId: nVAaxZ34khk +videoId: pqTVIg2JTJc dashedName: what-are-single-page-applications-and-what-are-some-issues-surrounding-them --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: +Watch the video and answer the questions below. + +# --transcript-- + +What are single page applications, and what are some issues surrounding them? Unlike traditional multi-page websites, single page applications (SPAs) load only one HTML page and dynamically update the content as the user interacts with the app, without reloading the entire page. This approach can lead to faster, more responsive applications, but it also comes a set of challenges and considerations. @@ -18,11 +22,9 @@ SPAs have some common issues. One significant issue is that screen readers may s Another challenge with SPAs is with navigation and browser history. Users expect the back and forward buttons to work as they do on traditional websites. This might not work properly in SPAs because technically, the URL of the web app doesn’t change. Since, the URL of the web app doesn’t change, they can’t bookmark any specific page. Refreshing the page might reset the application to its initial state, rather than maintaining the current view. -SPAs can pose challenges for SEO optimization. - -Search engines like Google can have difficulty indexing dynamically loaded content because they may not execute JavaScript properly or may miss content that isn’t included in the initial HTML page. This can lead to pages not being indexed correctly. +SPAs can pose challenges for SEO optimization. Search engines like Google can have difficulty indexing dynamically loaded content because they may not execute JavaScript properly or may miss content that isn’t included in the initial HTML page. This can lead to pages not being indexed correctly. -However, modern search engines have improved their ability to crawl SPAs, and there are techniques such as server-side rendering (SSR), pre rendering, and the use of SEO-friendly URLs that can help mitigate these issues and improve SEO for SPAs. +However, modern search engines have improved their ability to crawl SPAs, and there are techniques such as server-side rendering (SSR), pre-rendering, and the use of SEO-friendly URLs that can help mitigate these issues and improve SEO for SPAs. Performance is another consideration. SPAs load the entire application in one go, which means that if the loading time increases, users will be seeing a blank screen for a longer period of time. Now consider the scenario of users with slower internet speeds. Overall, the user experience will not be very pleasant. diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e86f590727c5e7e9ec5e.md b/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e86f590727c5e7e9ec5e.md index 5c3163ec9d..6dddffbcb4 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e86f590727c5e7e9ec5e.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e86f590727c5e7e9ec5e.md @@ -2,13 +2,17 @@ id: 6734e86f590727c5e7e9ec5e title: What Is React, and What Is It Commonly Used For? challengeType: 19 -#videoId: nVAaxZ34khk +videoId: 1FGlfBVLSOA dashedName: what-is-react-and-what-is-it-commonly-used-for --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: +Watch the video and answer the questions below. + +# --transcript-- + +What is React, and what is it commonly used for? React is one of the most popular JavaScript libraries for building user interfaces and web applications. Originally developed and maintained by Facebook, React has gained huge popularity in web development due to its efficiency, flexibility, and features. @@ -24,7 +28,7 @@ With React, you can easily track and update the state of components, ensuring th While there are many libraries within the JavaScript ecosystem, freeCodeCamp will mainly be focused on teaching React because of its wide spread use and demand in the industry. -Over the next few lectures, we will dive deeper into building custom components, managing state, and more. +Our next few lectures will dive deeper into building custom components, managing state, and more. # --questions-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e879c78ee6c61db25b90.md b/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e879c78ee6c61db25b90.md index c0d9ac8920..32c49509eb 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e879c78ee6c61db25b90.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e879c78ee6c61db25b90.md @@ -2,13 +2,17 @@ id: 6734e879c78ee6c61db25b90 title: What Are Components in React, and How Do They Work? challengeType: 19 -#videoId: nVAaxZ34khk +videoId: 0X9IvIhopZQ dashedName: what-are-components-in-react-and-how-do-they-work --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: +Watch the video and complete the assignment below. + +# --transcript-- + +What are components in React, and how do they work? Components are the building blocks of React applications that allow developers to break down complex user interfaces into smaller, manageable pieces, making it easier to develop and maintain large-scale applications. @@ -28,15 +32,15 @@ function Greeting() { } ``` -In this example, we've defined a component called Greeting. The curly braces `{}` inside the `h1` tags enable us to embed JavaScript expressions, allowing us to access the name variable within the h1 element. +In this example, we've defined a component called `Greeting`. The curly braces `{}` inside the `h1` tags enable us to embed JavaScript expressions, allowing us to access the `name` variable within the `h1` element. -We are also applying a `className` called title to the `h1` element. +We are also applying a `className` called `title` to the `h1` element. -But why are we using `className` instead of class like with regular HTML elements? +But why are we using `className` instead of `class` like with regular HTML elements? -Well this is because in JavaScript, `class` is a reserved name. So, we need to use `className` instead. +Well, this is because in JavaScript, `class` is a reserved name. So, we need to use `className` instead. -We are also using a comment in JSX showing what the result will be. It is important to note that you can use regular comment syntax like this but it needs to be wrapped in curly braces in order for it to work. +We are also using a comment in JSX showing what the result will be. It is important to note that you can use regular comment syntax like this but it needs to be wrapped in curly braces in order for it to work: ```js {/* Block Comments */} @@ -46,7 +50,7 @@ Another thing you might have noticed is that we are using a capital letter at th This is because React treats components with a capital letter as custom components, while elements with lowercase letters are considered built-in HTML elements. -When React encounters a lowercase tag (like `
` or ``), it assumes it's a standard HTML element. However, if the component name starts with a capital letter, React will treat it as a user-defined component and render it accordingly. This distinction helps React differentiate between native HTML tags and components that you create. +When React encounters a lowercase tag, like `
` or ``, it assumes it's a standard HTML element. However, if the component name starts with a capital letter, React will treat it as a user-defined component and render it accordingly. This distinction helps React differentiate between native HTML tags and components that you create. To use this `Greeting` component in our application, we would write something like this: @@ -54,16 +58,15 @@ To use this `Greeting` component in our application, we would write something li ``` -This would render an `

` element with the text `"Hello, John"` to the page. But take a closer look at the syntax here. When we use the component, it ends with a forward slash and then the greater than symbol. +This would render an `h1` element with the text `Hello, John` to the page. But take a closer look at the syntax here. When we use the component, it ends with a forward slash and then the greater than symbol. -When working with JSX, all tags and uses of components need to be explicitly closed. So if the component or tag does not have any children, then you need to explicitly close it like shown here +When working with JSX, all tags and uses of components need to be explicitly closed. So if the component or tag does not have any children, then you need to explicitly close it like shown here: ```js - - + {/* /> is required */} ``` -So far we have only been looking at how to render a single h1 element. But you can actually render multiple elements. +So far we have only been looking at how to render a single `h1` element. But you can actually render multiple elements. Let’s take a look at the following example code here: @@ -76,15 +79,13 @@ function Greeting() { } ``` -We are trying to add another sentence of `"Nice to meet you"` but it is not rendering on the page correctly. +We are trying to add another sentence of `Nice to meet you` but it is not rendering on the page correctly. -There seems to be an error message instead. The error message says `"Adjacent JSX elements must be wrapped in an enclosing tag."` +There seems to be an error message instead. The error message says `Adjacent JSX elements must be wrapped in an enclosing tag.` -The reason why you are getting that error message is because multiple sibling elements need to be wrapped in a parent element. While you could wrap the h1 and p elements in a single div, there is another way to silence the error. +The reason why you are getting that error message is because multiple sibling elements need to be wrapped in a parent element. While you could wrap the `h1` and `p` elements in a simple `div`, there is another way to silence the error. -React ``s are used to group elements together. - -Here is what the revised example will look like: +React fragments are used to group elements together. Here is what the revised example will look like: ```js function Greeting() { @@ -98,10 +99,10 @@ function Greeting() { } ``` -You can also choose to use empty JSX tags which can serve as shorthand for Fragments. +You can also choose to use empty JSX tags which can serve as shorthand for fragments: ```js - function Greeting() { +function Greeting() { const name = "John"; return ( <> diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e88cc46e6dc679420040.md b/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e88cc46e6dc679420040.md index cfd23df155..ad5e9a212f 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e88cc46e6dc679420040.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e88cc46e6dc679420040.md @@ -1,16 +1,20 @@ --- id: 6734e88cc46e6dc679420040 -title: What is Vite and How Can It Be Used to Setup a New React Project? +title: What is Vite, and How Can It Be Used to Set Up a New React Project? challengeType: 19 -#videoId: nVAaxZ34khk -dashedName: what-is-vite-and-how-can-it-be-used-to-setup-a-new-react-project +videoId: lzU9WdGBjlw +dashedName: what-is-vite-and-how-can-it-be-used-to-set-up-a-new-react-project --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: +Watch the video and answer the questions below. -Unlike working with smaller vanilla HTML, CSS, and JavaScript projects, starting a new React project includes a few more steps to ensure that everything runs correctly. Instead of trying to setup of all of the necessary configurations by yourself, there are tools that will do that for you. +# --transcript-- + +What is Vite, and how can it be used to set up a new React project? + +Unlike working with smaller vanilla HTML, CSS, and JavaScript projects, starting a new React project includes a few more steps to ensure that everything runs correctly. Instead of trying to set up of all of the necessary configurations by yourself, there are tools that will do that for you. One of the most popular tools for setting up projects is Vite. Vite, which means "fast" in French, is a build tool that aims to provide a faster development experience for modern web projects. Vite can be used with React, as well as with other libraries and frameworks like Vue or Svelte. You can even use it with vanilla JavaScript projects. @@ -26,13 +30,15 @@ This command creates a new React project named `my-react-app` using Vite's React You can then open up the new project and see the React boilerplate code that Vite has provided for you. +[Image showing the boilerplate Vite files and folders in a code editor, including the `public` and `src` folders, and the `.gitignore`, `eslint.config.js`, `index.html`, `package.json`, `README.md`, and `vite.config.js` files.] + The great thing about Vite is that it will only provide the files that are absolutely necessary to get started with your React project. -To actually run the project as is, you will need to install the dependencies using the following commands in the command line: +To actually run the project as-is, you will need to install the dependencies using the following commands in the command line: ```bash - cd my-react-app - npm install +cd my-react-app +npm install ``` The `cd my-react-app` command ensures that you change to the correct directory where your project is located. @@ -45,7 +51,7 @@ The `package.json` file is a key configuration file in projects that contains me Once the dependencies are installed, you should notice a new folder in your project called `node_modules`. -The `node_modules` folder is where all the packages and libraries required by your project are stored. This folder contains the actual code for the dependencies listed in your package.json file, including both your project's direct dependencies and any dependencies of those dependencies. +The `node_modules` folder is where all the packages and libraries required by your project are stored. This folder contains the actual code for the dependencies listed in your `package.json` file, including both your project's direct dependencies and any dependencies of those dependencies. To run your project, run the `npm run dev` command and open up a new browser tab at `http://localhost:5173/`. @@ -53,7 +59,7 @@ You should see the starter template that Vite has provided for you. If you need to stop the local server, press `CTRL + C` in the command line. -To actually see the code for this starter template, you can go into your project inside the src folder and you should see the `App.jsx` file. +To actually see the code for this starter template, you can go into your project inside the `src` folder and you should see the `App.jsx` file. From there you can start to modify the file, save your changes and see the new changes display in the browser. diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md b/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md index bbc991edf0..d0771ed33b 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md @@ -2,17 +2,23 @@ id: 674ba6876f7ada867135bb95 title: How Can You Import and Export Components in React? challengeType: 19 -#videoId: nVAaxZ34khk +videoId: XWvb9g1IjR4 dashedName: how-can-you-import-and-export-components-in-react --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: +Watch the video and answer the questions below. -In this lecture, we will take a look at how to import and export components in React. +# --transcript-- -In this example, we have a `Cat` component that belongs in a file called `Cat.jsx`. For the file extension, we are using the jsx file extension because this file is mainly working with JSX. +How can you import and export components in React? + +In earlier lecture videos, you learned how to work with imports and exports in JavaScript. In this lecture, we will take a look at how to import and export components in React. + +In this example, we have a `Cat` component that belongs in a file called `Cat.jsx`. For the file extension, we are using the `.jsx` file extension because this file is mainly working with JSX. + +This `Cat` component returns a JSX markup with a title and image for a cat called Mr. Whiskers: ```js function Cat() { @@ -28,8 +34,6 @@ function Cat() { } ``` -This `Cat` component returns a JSX markup with a title and image for a cat called Mr.Whiskers. - If we want to use our `Cat` component in another file, we need to first export it like this: ```js @@ -48,7 +52,7 @@ function Cat() { export default Cat; ``` -We are using the default keyword because this will be the default export from the module. You can also choose to export the component on the same line as the component definition like this: +We are using the `default` keyword because this will be the default export from the module. You can also choose to export the component on the same line as the component definition like this: ```js export default function Cat() { @@ -64,9 +68,9 @@ export default function Cat() { } ``` -You can choose to import child components in other parent component files. Or import them in the root component file. For this example, we will import the Cat component inside the root component file. +You can choose to import child components in other parent component files, or import them in the root component file. For this example, we will import the `Cat` component inside the root component file. -Every React project will have a top-level component, typically called `App.jsx`. This file is usually located in the src directory of your project. You’ll learn more about common project layouts in a future lecture video. +Every React project will have a top-level component, typically called `App.jsx`: ```js export default function App() { @@ -76,6 +80,8 @@ export default function App() { } ``` +This file is usually located in the `src` directory of your project. You’ll learn more about common project layouts in a future lecture video. + To use the `Cat` component inside the root `App` component, you will need to import it like this: ```js diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-styling-lists-and-links/672b951b1bf78038b1a2a0e7.md b/curriculum/challenges/espanol/25-front-end-development/lecture-styling-lists-and-links/672b951b1bf78038b1a2a0e7.md index acaa655a6e..dd784615ec 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-styling-lists-and-links/672b951b1bf78038b1a2a0e7.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-styling-lists-and-links/672b951b1bf78038b1a2a0e7.md @@ -2,7 +2,7 @@ id: 672b951b1bf78038b1a2a0e7 title: How Do the Different list-style Properties Work? challengeType: 11 -videoId: 6ZC__eE23AM +videoId: 5SeLNCLRx6g dashedName: how-do-the-different-list-style-properties-work --- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-user-centered-design/672bb009952c7a7904a750cb.md b/curriculum/challenges/espanol/25-front-end-development/lecture-user-centered-design/672bb009952c7a7904a750cb.md index b3cc62f425..601d0df06c 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-user-centered-design/672bb009952c7a7904a750cb.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-user-centered-design/672bb009952c7a7904a750cb.md @@ -90,7 +90,7 @@ Why is it important to keep the footer accessible while using an infinite scroll ## --answers-- -It helps make the make the colors stand out more on the page. +It helps make the colors stand out more on the page. ### --feedback-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2dcb965e5ac0ea38e0f.md b/curriculum/challenges/espanol/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2dcb965e5ac0ea38e0f.md index 39354620d9..7f38f13136 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2dcb965e5ac0ea38e0f.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2dcb965e5ac0ea38e0f.md @@ -24,7 +24,7 @@ This is easier said than done. Most people who start this curriculum will at som Tip number 2: routine is your friend. If you make a habit of waking up 30 minutes earlier every day, you can get in a coding session before you go to work. After a few weeks of doing this, it just becomes part of your routine. You don't really have to think too much about it, or expend any additional willpower. It's just something that you do. -Now, I understand that you're probably busy. I wish I could tell you that there was just some magic book that you could buy, and that that would be enough. The reason buying a book feels so good is that it feels like you're also buying the time to read it. But there's no magic involved in learning to code. You've got to put in the time. You've got to put in the reps at the keyboard. +Now, I understand that you're probably busy. I wish I could tell you that there was just some magic book that you could buy, and that would be enough. The reason buying a book feels so good is that it feels like you're also buying the time to read it. But there's no magic involved in learning to code. You've got to put in the time. You've got to put in the reps at the keyboard. I'll tell you this: if you can code for even 30 minutes a day, you're going to make serious gains over the course of a year. diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-audio-and-video/6733d8606fb893099e3d0df3.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-audio-and-video/6733d8606fb893099e3d0df3.md index 33008c9aa9..de68a3bf3a 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-audio-and-video/6733d8606fb893099e3d0df3.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-audio-and-video/6733d8606fb893099e3d0df3.md @@ -106,7 +106,7 @@ Screen Capture API. ### --feedback-- -This core API extends the behaviour of media sources. +This core API extends the behavior of media sources. --- @@ -114,7 +114,7 @@ MediaStream Recording API. ### --feedback-- -This core API extends the behaviour of media sources. +This core API extends the behavior of media sources. --- @@ -126,7 +126,7 @@ Web Audio API. ### --feedback-- -This core API extends the behaviour of media sources. +This core API extends the behavior of media sources. ## --video-solution-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98be592cfb451f651451.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98be592cfb451f651451.md index 0080dd6da9..7613deb4f8 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98be592cfb451f651451.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98be592cfb451f651451.md @@ -2,7 +2,7 @@ id: 672b98be592cfb451f651451 title: What Is a Background Gradient, and How Does It Work? challengeType: 11 -videoId: bKlXmSl7ywE +videoId: cweW0jpMA4g dashedName: what-is-a-background-gradient --- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-data-in-react/6734e3ceee2da4b0301719b7.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-data-in-react/6734e3ceee2da4b0301719b7.md index d9706a50d9..04ff4e5adf 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-data-in-react/6734e3ceee2da4b0301719b7.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-data-in-react/6734e3ceee2da4b0301719b7.md @@ -1,14 +1,18 @@ --- id: 6734e3ceee2da4b0301719b7 -title: How Do You Pass Props from Parent to Child Component in React? +title: How Do You Pass Props from a Parent Component to a Child Component in React? challengeType: 19 -#videoId: nVAaxZ34khk -dashedName: how-do-you-pass-props-from-parent-to-child-component-in-react +videoId: kUJ6yGagVtE +dashedName: how-do-you-pass-props-from-a-parent-component-to-a-child-component-in-react --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: +Watch the video and answer the questions below. + +# --transcript-- + +How do you pass props from a parent component to a child component in react? In the previous lectures, we learned how to build small components in React like this: @@ -32,17 +36,11 @@ function Greeting() { } ``` -While this code will run fine and display the result of Hi Jessica! on the screen, it is not that flexible of a component. - -What if we wanted to display a different name like Naomi, Tom, or Oliver? - -This is where React props comes in. +While this code will run fine and display the result of `Hi Jessica!` on the screen, it is not that flexible of a component. -Props, which is short for properties, is the way for Parent components to pass data down to the child component. +What if we wanted to display a different name like Naomi, Tom, or Oliver? This is where React props comes in. Props, which is short for properties, is the way for parent components to pass data down to the child component. Props can be of any type: strings, numbers, booleans, objects, or arrays. -Props can be of any type: strings, numbers, booleans, objects, or arrays. - -Let’s update our example from earlier to now accept a `name` prop: +Let's update our example from earlier to now accept a `name` prop: ```js function App() { @@ -57,13 +55,11 @@ function Greeting(props) { } ``` -For the child component called `Greeting` we are now using `props.name` instead of hardcoding the name `"Jessica"`. We are also logging props to the console which is showing as an object. - -Then inside of the parent App component, we are passing the value to the name prop so it can be passed down to the child. +For the child component called `Greeting` we are now using `props.name` instead of hardcoding the name `"Jessica"`. We are also logging `props` to the console which is showing as an object. -The result will be the same on the screen like earlier, but now we have created a more flexible component. +Then, inside of the parent `App` component, we are passing the value to the `name` prop so it can be passed down to the child. The result will be the same on the screen like earlier, but now we have created a more flexible component. -Now we have the ability to reuse the child component several times and pass in different names each time. +Now we have the ability to reuse the child component several times and pass in different names each time: ```js function App() { @@ -78,9 +74,7 @@ function App() { } ``` -You can also choose to use object destructuring in the props to make it more readable. - -Here's how you could rewrite the `Greeting` component: +You can also choose to use object destructuring in the props to make it more readable. Here's how you could rewrite the `Greeting` component: ```js function Greeting({ name }) { @@ -108,7 +102,7 @@ function DeveloperCard({ name, age, country }) { This `DeveloperCard` component accepts three props: `name`, `age`, and `country`. -In the parent `App` component, we can use the spread syntax to pass all the properties from an object as individual props to the child component. +In the parent `App` component, we can use the spread syntax to pass all the properties from an object as individual props to the child component: ```js function App() { @@ -128,9 +122,9 @@ function App() { This is particularly useful when working with arrays of objects and passing multiple sets of properties to child components. For example, you might have a list of developers where each object in the array has the same structure but represents a different person. -You will learn more about how to render lists in React in future lectures. +You will learn more about how to render lists in arrays in future lecture videos. -Using props in React makes your components more flexible and reusable, allowing you to build more complex UIs. However, it's important to note that props are immutable, meaning they cannot be changed once passed to a component. If you need to handle user input and modify data, you should use state instead. You'll learn more about managing state in future lectures. +Using props in React makes your components more flexible and reusable, allowing you to build more complex UIs. However, it's important to note that props are immutable, meaning they cannot be changed once passed to a component. If you need to handle user input and modify data, you should use state instead. You'll learn more about managing state in future lecture videos. # --questions-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-data-in-react/673500abfe36cd015b67b1b7.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-data-in-react/673500abfe36cd015b67b1b7.md index 25b6b6c3bf..aa47a05b42 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-data-in-react/673500abfe36cd015b67b1b7.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-data-in-react/673500abfe36cd015b67b1b7.md @@ -2,21 +2,23 @@ id: 673500abfe36cd015b67b1b7 title: How Does Conditional Rendering Work in React Components? challengeType: 19 -#videoId: nVAaxZ34khk +videoId: jSwg6t4FOBc dashedName: how-does-conditional-rendering-work-in-react-components --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: +Watch the video and answer the questions below. -Conditional rendering in React allows you to create dynamic user interfaces. It is used to show different content based on certain conditions or states within your application. +# --transcript-- + +How does conditional rendering work in react components? -The most common approaches of using Conditional rendering includes using if statements, the ternary operator, and `logical AND (&&)` operator. +Conditional rendering in React allows you to create dynamic user interfaces. It is used to show different content based on certain conditions or states within your application. -The simplest form of conditional rendering uses an if statement. +The most common approaches of using conditional rendering includes using `if` statements, the ternary (`?:`) operator, and logical AND (`&&`) operator. -Here's an example: +The simplest form of conditional rendering uses an `if` statement. Here's an example: ```js function Greeting({ isLoggedIn }) { @@ -27,9 +29,9 @@ function Greeting({ isLoggedIn }) { } ``` -In this example, the `Greeting` component checks the `isLoggedIn` prop. If it's true, it returns a welcome message, otherwise, it prompts the user to sign in. +In this example, the `Greeting` component checks the `isLoggedIn` prop. If it's `true`, it returns a welcome message, otherwise, it prompts the user to sign in. -Here is an example using the Greeting component inside of the parent App component. +Here is an example using the `Greeting` component inside of the parent `App` component: ```js function App() { @@ -41,7 +43,7 @@ function App() { } ``` -For simpler conditions, the ternary operator (?) is often used directly within JSX. It allows for inline conditional rendering, which can make your code more concise: +For simpler conditions, the ternary operator (`?:`) is often used directly within JSX. It allows for inline conditional rendering, which can make your code more concise: ```js function Greeting({ isLoggedIn }) { @@ -49,9 +51,9 @@ function Greeting({ isLoggedIn }) { } ``` -This code achieves the same result as the previous example but in a more compact form. The ternary operator checks isLoggedIn and renders the appropriate message. +This code achieves the same result as the previous example but in a more compact form. The ternary operator checks `isLoggedIn` and renders the appropriate message. -Another common pattern for conditional rendering is using the `logical AND (&&)` operator. This is particularly useful when you want to render something or nothing based on a condition: +Another common pattern for conditional rendering is using the logical AND (`&&`) operator. This is particularly useful when you want to render something, or nothing, based on a condition: ```js function Notification({ message }) { @@ -63,7 +65,7 @@ function Notification({ message }) { } ``` -In this example, the paragraph element with the message is only rendered if the `message` prop is truthy. If `message` is falsy (meaning it is an empty string, `null`, or `undefined`), nothing is rendered to the screen. +In this example, the paragraph element with the message is only rendered if the `message` prop is truthy. If `message` is falsy - meaning it is an empty string, `null`, or `undefined`, nothing is rendered to the screen. By mastering these techniques of conditional rendering, you can build more interactive and user-friendly applications that adapt to changing data and user interactions. diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md index 70b09a5246..c5badd5d4d 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md @@ -2,15 +2,19 @@ id: 673500b41af8500191febedc title: How Do You Render Lists in React? challengeType: 19 -#videoId: nVAaxZ34khk +videoId: EXuI5_x3tEM dashedName: how-do-you-render-lists-in-react --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: +Watch the video and answer the questions below. -Rendering lists is a fundamental task in React web apps, and is used for displaying data to users. In React, the `map()` method is used to transform an array of data into an array of JSX elements that can be rendered in the UI. +# --transcript-- + +How do you render lists in React? + +Rendering lists is a fundamental task in React web apps, and is used for displaying data to users. In React, the `map` method is used to transform an array of data into an array of JSX elements that can be rendered in the UI. Here is an example of a component called `FruitList` that displays a list of fruits: @@ -25,9 +29,9 @@ function FruitList() { } ``` -In this example, the `map()` function iterates over each item in the `fruits` array. For each fruit, it creates a new `
  • ` element containing the fruit's name. The newly created array of `
  • ` elements is then displayed inside the `
      ` parent tags. +In this example, the `map` function iterates over each item in the `fruits` array. For each fruit, it creates a new `li` element containing the fruit's name. The newly created array of `li` elements is then displayed inside the `ul` parent tags. -However, when rendering lists in React, it is important not to forget the `key` prop to each element in the list. The key must always be unique and it helps React identify which items have changed, been added, or been removed, which is essential for efficient rendering and updating the list. +However, when rendering lists in React, it is important not to forget the `key` prop for each element in the list. The key must always be unique and it helps React identify which items have changed, been added, or been removed, which is essential for efficient rendering and updating the list. Let's modify our example to include keys: @@ -68,13 +72,9 @@ function UserList() { } ``` -In this example, we're creating a more complex JSX structure for each user, displaying both their name and email. We're using the user's `id` as the key, which is a good practice. - -In conclusion, rendering lists in React involves converting arrays of data into JSX elements, typically using the `map()` function. - -Always remember to provide a unique key for each list item to help React manage the updating and rendering roles. +In this example, we're creating a more complex JSX structure for each user, displaying both their name and email address. We're using the user's `id` as the `key`, which is a good practice. -With these techniques, you can create flexible, efficient, and dynamic lists in your React applications. +In conclusion, rendering lists in React involves converting arrays of data into JSX elements, typically using the `map` function. # --questions-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md index ac21642908..e65b6ce288 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md @@ -2,17 +2,21 @@ id: 673500bfe1f41601c1ddb1a2 title: How Do Inline Styles Work in React? challengeType: 19 -#videoId: nVAaxZ34khk +videoId: SMnrYMHFvbA dashedName: how-do-inline-styles-work-in-react --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: +Watch the video and answer the questions below. + +# --transcript-- + +How do inline styles work in react? In React, inline styles are used to apply CSS styles directly to React elements within your JSX code instead of defining them in separate CSS files. -React's approach to inline styles involves using JavaScript objects to define styles, rather than traditional CSS strings. This means that instead of writing styles as you would in a CSS file, you create a JavaScript object where the keys are camelCased versions of CSS property names, and the values are the strings of CSS values. +React's approach to inline styles involves using JavaScript objects to define styles, rather than traditional CSS strings. This means that instead of writing styles as you would in a CSS file, you create a JavaScript object where the keys are camel cased versions of CSS property names, and the values are the strings of CSS values. Here is an example of how you can use inline styles for a `Button` component: @@ -34,9 +38,9 @@ function Button({ buttonText }) { } ``` -In this example, we define a style object called defaultStyles. We then apply these styles to a button element using the style attribute. React takes care of applying these styles to the element when it renders. +In this example, we define a style object called `defaultStyles`. We then apply these styles to a button element using the `style` attribute. React takes care of applying these styles to the element when it renders. -You can also choose to pass in an object directly to the style attribute. Here is what a revised example would look like: +You can also choose to pass in an object directly to the `style` attribute. Here is what a revised example would look like: ```js function Button({ buttonText }) { @@ -55,7 +59,7 @@ function Button({ buttonText }) { Sometimes you might want to pass in an object directly if there are only a few properties like shown here. Otherwise, passing in a name to an object would be better like in the first example. -It's important to note that while CSS property names are typically written in kebab-case (like font-size), in React's inline styles, we use camelCase (like fontSize). This is because the style object is a JavaScript object, and kebab-case names are not valid as object keys in JavaScript without using quotes. +It's important to note that while CSS property names are typically written in kebab case, like `font-size`, in React's inline styles, we use camel case, like `fontSize`. This is because the style object is a JavaScript object, and kebab case names are not valid as object keys in JavaScript without using quotes. A great advantage of inline styles in React is that they support dynamic styling based on a component state or props. For example: @@ -73,9 +77,9 @@ function DynamicButton({ isActive }) { } ``` -In this example, the button's background color changes based on the isActive prop. This kind of dynamic styling can be powerful for creating interactive and responsive user interfaces. +In this example, the button's background color changes based on the `isActive` prop. This kind of dynamic styling can be powerful for creating interactive and responsive user interfaces. -In summary, inline styles in React provide a powerful way to apply and manipulate styles directly within your components. They use JavaScript objects instead of CSS strings, require camelCased property names, and can easily incorporate dynamic values. They're an essential tool in a React developer's toolkit, especially for creating highly customized and interactive user interfaces. +In summary, inline styles in React provide a powerful way to apply and manipulate styles directly within your components. They use JavaScript objects instead of CSS strings, require camel cased property names, and can easily incorporate dynamic values. They're an essential tool in a React developer's toolkit, especially for creating highly customized and interactive user interfaces. # --questions-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md index 9589f178f9..b4c7c4223c 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md @@ -10,6 +10,34 @@ dashedName: what-are-replaced-elements Watch the video and answer the questions below. +# --transcript-- + +What are replaced elements, and what are some examples? + +A replaced element is an element whose content is determined by an external resource rather than by CSS itself. CSS, or cascading stylesheets, is used to add styles to a web page. Common examples of replaced elements include the image, iframe, and video elements. + +With replaced elements, you can control the position, or layout of an element. But your CSS cannot directly modify the content of that element. This might be easier to explain with some examples. Consider the image element, which embeds an image on your web page: + +```html +Descriptive text goes here +``` + +The element itself is replaced with the external object: the image. Your CSS can control things like the positioning of the image, or apply a filter to it, but you cannot actually modify the image itself. A more robust example might be the `iframe` element, which embeds an external site on your web page: + +```html + +``` + +Common examples for using the `iframe` element would be to embed Maps or YouTube videos onto the page. The element itself is replaced with the external object: the site. Your CSS can change the positioning of the embedded site, but you cannot modify the site's contents. To dive a bit further, if the embedded site has an `h1` element, your CSS would not be able to style that `h1` element. You cannot change the size, font color, and so on. + +There are some other replaced elements, such as `video`, and `embed`. And some elements behave as replaced elements under specific circumstances. Here's an example of an `input` element with the `type` attribute set to `image`: + +```html + +``` + +This type of `input` is considered to be a replaced element, but other `input` types like `text`, or `email` are not replaced elements. + # --questions-- ## --text-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md index 86d44f1b1d..def70eab59 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md @@ -10,6 +10,18 @@ dashedName: what-are-common-ways-to-optimize-media-assets Watch the video and answer the questions below. +# --transcript-- + +What are common ways to optimize media assets? + +There are three tools to consider when using media, such as images, on your web pages: the size, the format, and the compression. + +Let's talk about the size of your images first. When you are building a website, you'll often style images to display in a specific size. For example, you might have an image display at a 640x480 resolution. 640 represents the width while 480 represents the height in pixels. When preparing your image you want to scale it to a 640x480 size to match that styling. If you serve an image that is 1920x1080 but you are styling it to be much smaller, you're requiring your users to download unnecessary data. A smaller resolution results in a smaller file size. + +The next thing to consider is your file format. Two of the most common file formats are PNG and JPG, but these are no longer the most ideal formats for serving images. Unless you need support for older browsers, you should consider using a more optimized format, like WEBP or AVIF. + +Finally, you can run compression algorithms on your images. A compression algorithm is used to reduce the size for files or data. There are options like pngcrush to compress your images locally, or you can use online compression tools. However, it's worth noting that specific file formats, such as JPG, are not lossless. Lossless means that the original data can be perfectly reconstructed from the compressed data. If you try to compress a JPG image, it will result in a degraded quality. You should keep all these things in mind when selecting images for your web pages. + # --questions-- ## --text-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md index 1e02cee3fe..f38947cf6d 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md @@ -10,6 +10,22 @@ dashedName: what-are-the-different-types-of-image-licenses Watch the video and answer the questions below. +# --transcript-- + +What are different types of image licenses, and how do they work? + +Images are considered intellectual property, this means that they are protected by copyright regulations, most often belonging to the creator. By default, images are released as all rights reserved. The creator, or publisher sometimes, holds all copyright for the image. + +This means that you cannot use them in your web page unless you do one of three things: obtain written permission from the copyright holder, purchase a license from the copyright holder, or incorporate the image in a way that falls under fair use. + +That third point is a bit tricky. Fair use requires that your use of the image is both limited and transformative. Some examples of fair use would be to comment on or review the art or create a parody of the image. + +Some images might be released under a permissive license, like a Creative Commons license, or the BSD license that freeCodeCamp uses. These images are available for use in your website, but you'll need to read the license to understand the rules you need to follow when using these images. For example, you might be required to make your website open source, or you may not be permitted to modify the image in any way. + +Finally, some images may be released to the public domain. An image under the public domain has no copyright attached to it and is free to be used without any restrictions. Images licensed specifically under the Creative Commons 0 license are considered public domain. + +Most search engines will allow you to filter image results by a license. There are also sites like Pixabay and Unsplash, which offer free-to-use images. Always be mindful of the copyright and licensing when you use an image in your website. + # --questions-- ## --text-- @@ -78,7 +94,7 @@ It's a specific Creative Commons license. --- -CC0 +Creative Commons 0 ## --video-solution-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md index 116fb99d96..3082bff23d 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md @@ -10,6 +10,20 @@ dashedName: what-are-svgs Watch the video and answer the questions below. +# --transcript-- + +So what are SVGs, and when should you use them? + +First, you need to understand how images work. Common image formats like PNG and JPG are classified as raster formats. This essentially means that they are pixel-based, with the data tracking the color value in each pixel. + +A large downside of raster based images is that they do not upscale well. If you've ever tried to make a PNG larger, you may have seen that it becomes pixelated, or blurry. + +An SVG is a different kind of image. SVG stands for a scalable vector graphic. A vector graphic tracks data based on paths and equations to plot points, lines, and curves. What this really means is that a vector graphic, like an SVG, can be scaled to any size without impacting the quality. + +SVGs specifically have the added benefit of storing data in XML. This means you can use them directly in your code as raw HTML with the `svg` element. It also means you can programmatically change the color of the image. + +So when would you want to use an SVG? A great use case is for icons. If you want to create custom bullet points, or add icons to your links to represent social media platforms, using SVGs is the best approach. One of the most popular icon libraries, Font Awesome, uses SVG images for their icons. SVGs are also great for webpage logos, because they scale perfectly. They allow you to adapt your layout to any responsive design you need. Next time you have an SVG locally, try opening it with a text editor and playing with the code. + # --questions-- ## --text-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md index 678424a3aa..108fbff982 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md @@ -10,6 +10,87 @@ dashedName: what-are-the-roles-of-the-html-audio-and-video-elements Watch the video and answer the questions below. +# --transcript-- + +What are the roles of the HTML `audio` and `video` element, and how do they work? + +The `audio` and `video` elements allow you to add sound and video content to your HTML documents. The `audio` element supports popular audio formats like mp3, wav, and ogg. The `video` element supports mp4, ogg, and webm formats. + +To include audio content on your web page, you can use the `audio` element with the `src` attribute pointing to the location of your audio file: + +```html + +``` + +If you try to run this example, you'll see that nothing shows up on the page. However, if you inspect the page with the developer tools, you'll see the `audio` element is indeed on the page. If you want to see the audio player on the page, then you can add the `audio` element with the `controls` attribute: + +```html + +``` + +The `controls` attribute enables users to manage audio playback, including adjusting volume, and pausing, or resuming playback. The `controls` attribute is a boolean attribute that can be added to an element to enable built-in playback controls. If omitted, no controls will be shown. + +Apart from the `src` and `controls` attributes, there are several other attributes that enhance the functionality of the `audio` element. The `loop` attribute is a boolean attribute that makes the audio replay continuously. Here's an example of using the `loop` attribute to play one of Quincy Larson's songs titled "Can't stay down": + +```html + +``` + +When the song reaches the end, it will loop back around and play it again from the beginning. Another attribute you can use is the `muted` attribute. When present in the `audio` element, this boolean attribute will start the audio in a muted state. Here's an example of using the `muted` attribute: + +```html + +``` + +When you start the song in the browser, you'll not hear anything. To hear the music you will need to click on the volume icon. + +When it comes to audio file types, there are differences in which browsers support which type. To accommodate this, you can use `source` elements inside the `audio` element and the browser will select the first source that it understands. Here's an example of using multiple `source` elements for an `audio` element: + +```html + +``` + +The browser will first start with the ogg type, and if it can't play the audio, then it'll move down to the next type in the list. + +All the attributes we have learned so far are also supported in the `video` element. Here's an example of using a `video` element with the `loop`, `controls`, and `muted` attributes: + +```html + +``` + +For the `src`, or source attribute, we are using a video called "Big Buck Bunny" from archive.org. If you wanted to display an image while the video is downloading, you can use the `poster` attribute. This attribute is not available for `audio` elements and is unique to the `video` element. Here's an example of using the `poster` attribute with content provided by peach.blender.org: + +```html + +``` + +This example is also using the `width` attribute to set the width to 620 pixels so the video fits better on the screen. + # --questions-- ## --text-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md index 9f0bae8c4c..d6972ba4f4 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md @@ -10,6 +10,87 @@ dashedName: how-do-you-embed-videos-onto-your-page-using-the-iframe-element Watch the video and answer the questions below. +# --transcript-- + +How do you embed videos onto your page using the `iframe` element? + +First, what exactly is the `iframe` element? `iframe` stands for inline frame. It's an inline element used to embed other HTML content directly within the HTML page. That HTML content could be a video, map, another HTML element, or even other web pages. Here's what the syntax of the `iframe` element looks like: + +```html + +``` + +The `src` attribute specifies the URL of the page you want to embed. The `width` attribute specifies the width of the `iframe`. The `height` attribute specifies the height of the `iframe`. The `allowfullscreen` attribute allows the user to display the `iframe` in full screen mode. It's also a good practice to specify a `title` attribute for the `iframe`, as it's important for accessibility. + +To embed a video within an `iframe` you can copy it directly from popular video services like YouTube and Vimeo, or define it yourself with the `src` attribute pointing to the URL of that video. Here's an example of embedding a popular freeCodeCamp course from YouTube: + +```html +

      A freeCodeCamp YouTube Video Embedded with the iframe Element

      + + +``` + +You can then customize the `iframe` to your needs or even define your own by copying the link to the YouTube video and pasting it in as the URL value. The caveat is that you must replace https://youtu.be with https://youtube.com/embed/. + +youtu.be is the domain when you copy the share link and youtube.com/embed/ is the domain required for embedding videos with the `iframe` element. Here's an example of that: + +```html + +``` + +Note that the video can come from anywhere. It doesn't have to come from video services like YouTube and Vimeo. Here's a video from Pixabay embedded with the `iframe` element: + +```html +

      A Video from Pixabay Embedded with the iframe Element

      + + +``` + +Don't forget you can also embed a map, another web page, or direct HTML within the `iframe` element. Here's a map I was able to embed with the `iframe` element: + +```html +

      A Map from Openstreetmap.org Embedded with the iframe Element

      + + +
      + + + View Larger Map + + +``` + +If you want to embed direct HTML within the `iframe` element you have to use the `srcdoc` attribute instead of `src`. + # --questions-- ## --text-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271b4213033d9b661c70e.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271b4213033d9b661c70e.md index c80280ece1..24073d903a 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271b4213033d9b661c70e.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271b4213033d9b661c70e.md @@ -22,7 +22,7 @@ Perform a mathematical operation without changing the variable's value. ### --feedback-- -Think about how to combine mathemathical operations and reassignment. +Think about how to combine mathematical operations and reassignment. --- @@ -34,7 +34,7 @@ Perform two different operations at once. ### --feedback-- -Think about how to combine mathemathical operations and reassignment. +Think about how to combine mathematical operations and reassignment. --- @@ -42,7 +42,7 @@ Only perform addition and subtraction in one line of code. ### --feedback-- -Think about how to combine mathemathical operations and reassignment. +Think about how to combine mathematical operations and reassignment. ## --video-solution-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-regular-expressions/6733c5ba834ded4bb067e67c.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-regular-expressions/6733c5ba834ded4bb067e67c.md index 78c2a2ef8c..05d18d4856 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-regular-expressions/6733c5ba834ded4bb067e67c.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-regular-expressions/6733c5ba834ded4bb067e67c.md @@ -43,10 +43,6 @@ false true ``` -### --feedback-- - -The `i` flag makes the regex case-insensitive, so `freeCodeCamp` matches regardless of case, as long as the letters are the same. - --- ```js @@ -55,6 +51,10 @@ true false ``` +### --feedback-- + +The `i` flag makes the regex case-insensitive, so `freeCodeCamp` matches regardless of case, as long as the letters are the same. + --- ```js @@ -69,7 +69,7 @@ The `i` flag makes the regex case-insensitive, so `freeCodeCamp` matches regardl ## --video-solution-- -3 +2 ## --text-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-tables/672a4e04a24858778f57ebfe.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-tables/672a4e04a24858778f57ebfe.md index 00823ca5e9..7a91f301f9 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-tables/672a4e04a24858778f57ebfe.md +++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-tables/672a4e04a24858778f57ebfe.md @@ -10,6 +10,111 @@ dashedName: what-are-html-tables-used-for Watch the video lecture and answer the questions below. +# --transcript-- + +What are HTML tables used for, and what should they not be used for? + +HTML tables aren't used as much these days as they used to be. But, as a frontend developer, you should still be familiar with them. Tables are one of the earliest ways devs had for displaying data in a browser way back in the 1990s. + +Here's an example of code used to generate a table from the U.S. Bureau of Labor Statistics: + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Quick Facts: Software Developers, Quality Assurance Analysts, and Testers
      2023 Median Pay + $130,160 per year +
      $62.58 per hour +
      Typical Entry-Level EducationBachelor's degree
      Work Experience in a Related OccupationNone
      On-the-job TrainingNone
      Number of Jobs, 20221,795,300
      Job Outlook, 2022-3225% (Much faster than average)
      Employment Change, 2022-32451,200
      If this table had a footer it would be here.
      +``` + +As you can see, there's a main `table` element with an `id` set to `quickfacts`. Inside it, the table has a table head element, `thead`, table body element, `tbody`, and a table foot element, `tfoot`. + +The table head, body, and foot elements can each contain some number of table rows, `tr`. And each table row can contain a table header `th` which labels the data in that row. It can also contain some number of individual data cells, called table data, `td`. + +Now, that's a lot of HTML elements. But don't be intimidated – these follow a simple hierarchy. + +Here's the simplest table we can create that includes all of these elements: + +```html + + + + + + + + + + + + + + + + + + + + + +
      The title of this table
      First Row + First Data Cell +
      Second Row + Second Data Cell +
      The footer of this table, which might contain date of publication, author credits, or other meta information.
      +``` + +So as you can see, the data itself is always within a `tr` – and within that `tr` element is a `th` element with a header, and a `td` element with data. + +Some websites will choose to use `div`s to build their own tables instead of using the more appropriate `table` element. + +While it is possible to display tabular data using generic `div` elements, it is still better to use the `table` element instead. + +Many years ago, developers might have used a `table` to position non-data elements on a webpage. This was never considered a best practice. But you may encounter some codebases where tables are still used like this. + +Nowadays, developers use CSS flexbox and grid to layout their designs. freeCodeCamp will cover these tools in depth later. + +For now, just use HTML tables for their original intended purpose: displaying tabular data. + # --questions-- ## --text-- diff --git a/curriculum/challenges/espanol/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md b/curriculum/challenges/espanol/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md index cbfc5b19cc..288e6b89dd 100644 --- a/curriculum/challenges/espanol/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md +++ b/curriculum/challenges/espanol/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md @@ -381,7 +381,7 @@ Gives animations to the page. --- -Improves Search Emgine Optimization (SEO). +Improves Search Engine Optimization (SEO). #### --answer-- diff --git a/curriculum/challenges/espanol/25-front-end-development/quiz-basic-html/66df3b712c41c499e9d31e5b.md b/curriculum/challenges/espanol/25-front-end-development/quiz-basic-html/66df3b712c41c499e9d31e5b.md index 6102eaa31d..c136b3183d 100644 --- a/curriculum/challenges/espanol/25-front-end-development/quiz-basic-html/66df3b712c41c499e9d31e5b.md +++ b/curriculum/challenges/espanol/25-front-end-development/quiz-basic-html/66df3b712c41c499e9d31e5b.md @@ -55,7 +55,7 @@ An element used for embedding sound in to the document. #### --answer-- -An element without child nodes or an end tag. +An element without any content or an end tag. ### --question-- @@ -73,7 +73,7 @@ Which of the following is a correct value for the `id` attribute? --- -`id="123content"` +`id="main~content"` #### --answer-- @@ -121,7 +121,7 @@ Boolean attributes must always have a value assigned to them, while regular attr #### --answer-- -A boolean attribute can be present or absent, indicating `true` or `false`, while a regular attribute always has a specified value. +A boolean attribute can be present or absent, while a regular attribute always has a specified value. ### --question-- @@ -275,7 +275,7 @@ It determines the font size of the anchor text inside the `link` element. #### --answer-- -It is used to specify where the linked document will be displayed when the user clicks on the link. +It is used to specify where the linked document will be opened when the user clicks on the link. ### --question-- @@ -297,7 +297,7 @@ A path that includes wildcard characters. #### --answer-- -A path used to specify the exact location of a file or directory from the root directory of the file system. +A complete path to a resource, starting from the root directory. ### --question-- @@ -541,7 +541,7 @@ BSD #### --answer-- -CC0 +Creative Commons 0 ### --question-- @@ -819,11 +819,11 @@ Which of the following is NOT a valid value for working with open graph properti --- -`property="og:type"` +`"og:type"` --- -`property="og:image"` +`"og:image"` #### --answer-- diff --git a/curriculum/challenges/espanol/25-front-end-development/quiz-css-flexbox/66ed8fe7f45ce3ece4053eb2.md b/curriculum/challenges/espanol/25-front-end-development/quiz-css-flexbox/66ed8fe7f45ce3ece4053eb2.md index a99e036db9..64800f658e 100644 --- a/curriculum/challenges/espanol/25-front-end-development/quiz-css-flexbox/66ed8fe7f45ce3ece4053eb2.md +++ b/curriculum/challenges/espanol/25-front-end-development/quiz-css-flexbox/66ed8fe7f45ce3ece4053eb2.md @@ -342,7 +342,7 @@ Auto-size items to be equally large to fill the container. #### --text-- -Which value for `justify-content` will evenly distribute items along the main axis, have the same spacing between each pair of adjacent items, and have items whose sides are flush againt the main axis edge? +Which value for `justify-content` will evenly distribute items along the main axis, have the same spacing between each pair of adjacent items, and have items whose sides are flush against the main axis edge? #### --distractors-- diff --git a/curriculum/challenges/espanol/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md b/curriculum/challenges/espanol/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md index 288d4d3d35..96fa9703af 100644 --- a/curriculum/challenges/espanol/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md +++ b/curriculum/challenges/espanol/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md @@ -171,23 +171,23 @@ It sets the transform origin to the center of the element's bounding box, allowi #### --text-- -What is the purpose of the `transform-origin` property in CSS? +What is the purpose of CSS's `overflow-x` and `overflow-y` properties? #### --distractors-- -It controls the animation speed of transformed elements +They adjust the padding and margin of an element. --- -It defines the display type of transformed elements +They set the background color and font style of an element. --- -It sets the background of transformed elements +They define the visibility and display properties of an element. #### --answer-- -It specifies the point around which a transformation is applied to an element +They control the horizontal and vertical overflow of an element's content. ### --question-- @@ -303,23 +303,23 @@ Normalize.css, Eric Meyer's Reset, and HTML5 Reset #### --text-- -What does the `scale3d()` property value do in CSS? +Which CSS property is used to apply transformations such as rotation, scaling, and translation to elements? #### --distractors-- -It rotates an element in 3D space +`box-shadow` --- -It skews an element on the x, y, and z axes +`opacity` --- -It translates an element in 3D space +`z-index` #### --answer-- -It scales an element along the x, y, and z axes +`transform` ### --question-- diff --git a/curriculum/challenges/espanol/25-front-end-development/quiz-javascript-dates/66edd3711bb9f7efa73aef91.md b/curriculum/challenges/espanol/25-front-end-development/quiz-javascript-dates/66edd3711bb9f7efa73aef91.md index 0eda37067c..13af765c56 100644 --- a/curriculum/challenges/espanol/25-front-end-development/quiz-javascript-dates/66edd3711bb9f7efa73aef91.md +++ b/curriculum/challenges/espanol/25-front-end-development/quiz-javascript-dates/66edd3711bb9f7efa73aef91.md @@ -297,7 +297,7 @@ How would you format a date to a locale-specific string or a more readable forma --- -`.toLocaleTimetring()` +`.toLocaleTimeString()` #### --answer-- diff --git a/curriculum/challenges/espanol/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md b/curriculum/challenges/espanol/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md index ebcb5d9c3c..c84a01b0e9 100644 --- a/curriculum/challenges/espanol/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md +++ b/curriculum/challenges/espanol/25-front-end-development/quiz-javascript-variables-and-data-types/66edc25ae5ea80bf6f785552.md @@ -446,7 +446,7 @@ Which of the following variable names uses camelCase correctly? #### --text-- -Which chatacter JavaScript uses to mark the end of a statement? +Which character JavaScript uses to mark the end of a statement? #### --distractors-- diff --git a/curriculum/challenges/espanol/25-front-end-development/quiz-web-performance/66f1adcf97e3e4c1bd89ebf5.md b/curriculum/challenges/espanol/25-front-end-development/quiz-web-performance/66f1adcf97e3e4c1bd89ebf5.md index 677bfc0ada..20779836c1 100644 --- a/curriculum/challenges/espanol/25-front-end-development/quiz-web-performance/66f1adcf97e3e4c1bd89ebf5.md +++ b/curriculum/challenges/espanol/25-front-end-development/quiz-web-performance/66f1adcf97e3e4c1bd89ebf5.md @@ -285,7 +285,7 @@ Which Web API is effective for measuring performance in JavaScript? #### --distractors-- -`window.getPerformaceStatistics()` +`window.getPerformanceStatistics()` --- diff --git a/curriculum/challenges/espanol/25-front-end-development/review-asynchronous-javascript/6723d35bb07d1bd220d0f28d.md b/curriculum/challenges/espanol/25-front-end-development/review-asynchronous-javascript/6723d35bb07d1bd220d0f28d.md index 6ac24dbc00..22f1518c73 100644 --- a/curriculum/challenges/espanol/25-front-end-development/review-asynchronous-javascript/6723d35bb07d1bd220d0f28d.md +++ b/curriculum/challenges/espanol/25-front-end-development/review-asynchronous-javascript/6723d35bb07d1bd220d0f28d.md @@ -138,7 +138,7 @@ fetch('https://api.example.com/data') In the above example, we first fetch data from one URL, then fetch data from another URL based on the first response, and finally log the second data received. -The `catch` method would handle any errors that occur during the process. This means you don't need to add error handling to each individual step, which can greatly simplify your code. +The `catch` method would handle any errors that occur during the process. This means you don't need to add error handling to each step, which can greatly simplify your code. ## Using `async/await` to handle promises diff --git a/curriculum/challenges/espanol/25-front-end-development/review-basic-css/671a887a7e62c75e9ab1ee4a.md b/curriculum/challenges/espanol/25-front-end-development/review-basic-css/671a887a7e62c75e9ab1ee4a.md index e9e7d19999..4e21b97659 100644 --- a/curriculum/challenges/espanol/25-front-end-development/review-basic-css/671a887a7e62c75e9ab1ee4a.md +++ b/curriculum/challenges/espanol/25-front-end-development/review-basic-css/671a887a7e62c75e9ab1ee4a.md @@ -12,7 +12,7 @@ Review the concepts below to prepare for the upcoming quiz. ## CSS Basics - **What is CSS?**: Cascading Style Sheets (CSS) is a markup language used to apply styles to HTML elements. CSS is used for colors, background images, layouts and more. -- **Basic Anatomy of a CSS Rule**: A CSS rule is made up of two main parts: a selector and a declaration block. A selector is a pattern used in CSS to identify and target specific HTML elements for styling. A declaration block applies a set of styles for a given selector, or selectors. +- **Basic Anatomy of a CSS Rule**: A CSS rule is made up of two main parts: a selector and a declaration block. A selector is a pattern used in CSS to identify and target specific HTML elements for styling. A declaration block applies a set of styles for a given selector or selectors. Here is the general syntax of a CSS rule: @@ -98,7 +98,7 @@ h2 + p { } ``` -- **Subsequent-sibling Combinator (`~`)**: This combinator selects all siblings of a specified element that come after it. The following example will style only the second paragraph element because it is the only one that is a sibling of the `ul` element and share the same parent. +- **Subsequent-sibling Combinator (`~`)**: This combinator selects all siblings of a specified element that come after it. The following example will style only the second paragraph element because it is the only one that is a sibling of the `ul` element and shares the same parent. ```html
      diff --git a/curriculum/challenges/espanol/25-front-end-development/review-computer-basics/671a87e6dcef5b5bd765e5ed.md b/curriculum/challenges/espanol/25-front-end-development/review-computer-basics/671a87e6dcef5b5bd765e5ed.md index 48259c8be0..9bf84d25ce 100644 --- a/curriculum/challenges/espanol/25-front-end-development/review-computer-basics/671a87e6dcef5b5bd765e5ed.md +++ b/curriculum/challenges/espanol/25-front-end-development/review-computer-basics/671a87e6dcef5b5bd765e5ed.md @@ -15,7 +15,7 @@ Review the concepts below to prepare for the upcoming quiz. - **Central Processing Unit(CPU)**: a processor that is responsible for executing instructions and performing calculations. - **Random Access Memory(RAM)**: a temporary storage location for the computer's CPU. - **Hard Disk Drive(HDD)**: a permanent storage location that is used to store data even when the computer is turned off. -- **Solid State Drive(SSD)**: non volatile flash memory and can be used in place of a hard drive. +- **Solid State Drive(SSD)**: non-volatile flash memory and can be used in place of a hard drive. - **Power Supply Unit(PSU)**: responsible for converting the electricity from the wall outlet into a form that the computer can use. - **Graphics Processing Unit(GPU)**: responsible for rendering visuals on the computer screen. - **Different Types of Internet Service Providers**: An Internet Service Provider (ISP) is a company that provides access to the internet. There are different types of ISPs, including dial-up, DSL, cable, fiber-optic, and satellite. diff --git a/curriculum/challenges/espanol/25-front-end-development/review-css-accessibility/671a955b74ab5588735800d1.md b/curriculum/challenges/espanol/25-front-end-development/review-css-accessibility/671a955b74ab5588735800d1.md index 6c425c284b..65fb547403 100644 --- a/curriculum/challenges/espanol/25-front-end-development/review-css-accessibility/671a955b74ab5588735800d1.md +++ b/curriculum/challenges/espanol/25-front-end-development/review-css-accessibility/671a955b74ab5588735800d1.md @@ -12,7 +12,7 @@ Review the concepts below to prepare for the upcoming quiz. ## Color Contrast Tools - **WebAIM's Color Contrast Checker**: This online tool allows you to input the foreground and background colors of your design and instantly see if they meet the Web Content Accessibility Guidelines (WCAG) standards. -- **TPGi Colour Contrast Analyzer**: This is a free color contrast checker that allows you to check if your websites and apps meet the Web Content Accessibility Guidelines (WCAG) standards. This tools also comes with a Color Blindness Simulator feature which allows you to see what your website or app looks like for people with color vision issues. +- **TPGi Colour Contrast Analyzer**: This is a free color contrast checker that allows you to check if your websites and apps meet the Web Content Accessibility Guidelines (WCAG) standards. This tool also comes with a Color Blindness Simulator feature which allows you to see what your website or app looks like for people with color vision issues. ## Best Practices With CSS and Accessibility diff --git a/curriculum/challenges/espanol/25-front-end-development/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md b/curriculum/challenges/espanol/25-front-end-development/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md index 24c85a1f04..f0d49f7760 100644 --- a/curriculum/challenges/espanol/25-front-end-development/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md +++ b/curriculum/challenges/espanol/25-front-end-development/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md @@ -29,7 +29,7 @@ Review the concepts below to prepare for the upcoming quiz. - **`:visited pseudo-class`**: This pseudo-class is used to style links where a user has already visited. - **`:hover pseudo-class`**: This pseudo-class is used to style an elements where a user is actively hovering over them. - **`:focus pseudo-class`**: This pseudo-class is used to style an element when it receives focus. Examples would include `input` or `select` elements where the clicks or tabs on the element to focus it. -- **`:active pseudo-class`**: This pseudo-class is used to style an element that was activated by the user. Common example would be when the user clicks on a button. +- **`:active pseudo-class`**: This pseudo-class is used to style an element that was activated by the user. A common example would be when the user clicks on a button. ## Working with Backgrounds and Borders diff --git a/curriculum/challenges/espanol/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md b/curriculum/challenges/espanol/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md index 9e1a3d3e81..6738912f28 100644 --- a/curriculum/challenges/espanol/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md +++ b/curriculum/challenges/espanol/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md @@ -14,13 +14,13 @@ Review the concepts below to prepare for the upcoming quiz. - **Color Theory Definition**: This is the study of how colors interact with each other and how they affect our perception. It covers color relationships, color harmony, and the psychological impact of color. - **Primary Colors**: These colors which are yellow, blue, and red, are the fundamental hues from which all other colors are derived. - **Secondary Colors**: These colors result from mixing equal amounts of two primary colors. Green, orange, and purple are examples of secondary colors. -- **Tertiary Colors**: These colors result from combining a primary color with a neighboring secondary color. Yellow-Green, Blue-Green, and Blue-Violet, are examples of tertiary colors. +- **Tertiary Colors**: These colors result from combining a primary color with a neighboring secondary color. Yellow-Green, Blue-Green, and Blue-Violet are examples of tertiary colors. - **Warm Colors**: These colors which include reds, oranges, and yellows, evoke feelings of comfort, warmth, and coziness. - **Cool Colors**: These colors which include blues, green, and purples, evoke feelings of calmness, serenity, and professionalism. - **Color Wheel**: The color wheel is a circular diagram that shows how colors relate to each other. It's an essential tool for designers because it helps them to select color combinations. - **Analogous Color Schemes**: These color schemes create cohesive and soothing experiences. They have analogous colors, which are adjacent to each other in the color wheel. - **Complementary Color Schemes**: These color schemes create high contrast and visual impact. Their colors are located on the opposite ends of the color wheel, relative to each other. -- **Triadic Color Scheme**: This color scheme has vibrant colors. They are made from colors that are approximately equidistant from each other. If they are connected, they form an equilateral triangle on the color wheel, like you can see in this example. +- **Triadic Color Scheme**: This color scheme has vibrant colors. They are made from colors that are approximately equidistant from each other. If they are connected, they form an equilateral triangle on the color wheel, as you can see in this example. - **Monochromatic Color Scheme**: For this color scheme, all the colors are derived from the same base color by adjusting its lightness, darkness, and saturation. This evokes a feeling of unity and harmony while still creating contrast. ## Different Ways to Work with Colors in CSS diff --git a/curriculum/challenges/espanol/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md b/curriculum/challenges/espanol/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md index a14acbae2c..5642d58c09 100644 --- a/curriculum/challenges/espanol/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md +++ b/curriculum/challenges/espanol/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md @@ -41,7 +41,7 @@ flex-flow: column wrap-reverse; - **`justify-content: center;`**: This centers the flex items along the main axis. - **`justify-content: space-between;`**: This will distribute the elements evenly along the main axis. - **`justify-content: space-around;`**: This will distribute flex items evenly within the main axis, adding a space before the first item and after the last item. -- **`justify-content: space-evenly;`**: This will distributes the items evenly along the main axis. +- **`justify-content: space-evenly;`**: This will distribute the items evenly along the main axis. ## The `align-items` Property diff --git a/curriculum/challenges/espanol/25-front-end-development/review-css-grid/671a99394bedfb9a5bc687c4.md b/curriculum/challenges/espanol/25-front-end-development/review-css-grid/671a99394bedfb9a5bc687c4.md index a65816af89..6167303c75 100644 --- a/curriculum/challenges/espanol/25-front-end-development/review-css-grid/671a99394bedfb9a5bc687c4.md +++ b/curriculum/challenges/espanol/25-front-end-development/review-css-grid/671a99394bedfb9a5bc687c4.md @@ -11,7 +11,7 @@ Review the concepts below to prepare for the upcoming quiz. ## CSS Grid Basics -- **Definition**: CSS Grid is a two dimensional layout system used to create complex layouts in web pages. Grids will have rows and columns with gaps between them. To define a grid layout, you would set the `display` property to `grid`. +- **Definition**: CSS Grid is a two-dimensional layout system used to create complex layouts in web pages. Grids will have rows and columns with gaps between them. To define a grid layout, you would set the `display` property to `grid`. ```css .container { diff --git a/curriculum/challenges/espanol/25-front-end-development/review-css-positioning/671a967424a00e8c6561b182.md b/curriculum/challenges/espanol/25-front-end-development/review-css-positioning/671a967424a00e8c6561b182.md index 126586a5fd..e117c96f8c 100644 --- a/curriculum/challenges/espanol/25-front-end-development/review-css-positioning/671a967424a00e8c6561b182.md +++ b/curriculum/challenges/espanol/25-front-end-development/review-css-positioning/671a967424a00e8c6561b182.md @@ -11,7 +11,7 @@ Review the concepts below to prepare for the upcoming quiz. ## Working With Floats -- **Definition**: Floats are used to remove an element from its normal flow on the page and position it either on the left or right side of its container. When this happens, text will wrap around that floated content. +- **Definition**: Floats are used to remove an element from its normal flow on the page and position it either on the left or right side of its container. When this happens, the text will wrap around that floated content. ```css float: left; @@ -30,8 +30,8 @@ float: right; ## Static, Relative and Absolute Positioning -- **Static Positioning**: This is the normal flow for the document. Elements are positioned from top to bottom, and left to right one after another. -- **Relative Positioning**: This allows you to use the `top`, `left`, `right` and `bottom` properties to position the element withing the normal document flow. You can also use relative positioning to make elements overlap with other elements on the page. +- **Static Positioning**: This is the normal flow for the document. Elements are positioned from top to bottom and left to right one after another. +- **Relative Positioning**: This allows you to use the `top`, `left`, `right` and `bottom` properties to position the element within the normal document flow. You can also use relative positioning to make elements overlap with other elements on the page. ```css .relative { @@ -64,7 +64,7 @@ float: right; } ``` -- **Sticky Positioning**: This type of positioning will act as an relative positioned element as you scroll down the page. If you specify a `top`, `left`, `right` or `bottom` property, then the element will stop acting like a relatively positioned element and start behaving like a fixed position element. +- **Sticky Positioning**: This type of positioning will act as a relative positioned element as you scroll down the page. If you specify a `top`, `left`, `right` or `bottom` property, then the element will stop acting like a relatively positioned element and start behaving like a fixed position element. ```css .positioned { diff --git a/curriculum/challenges/espanol/25-front-end-development/review-css-pseudo-classes/671a907bad4538752765f2ff.md b/curriculum/challenges/espanol/25-front-end-development/review-css-pseudo-classes/671a907bad4538752765f2ff.md index 5fb9d6edf0..5ed85226d5 100644 --- a/curriculum/challenges/espanol/25-front-end-development/review-css-pseudo-classes/671a907bad4538752765f2ff.md +++ b/curriculum/challenges/espanol/25-front-end-development/review-css-pseudo-classes/671a907bad4538752765f2ff.md @@ -26,7 +26,7 @@ Review the concepts below to prepare for the upcoming quiz. - **`:checked` Pseudo-class**: This pseudo-class is used to indicate to the user that it is checked. - **`:valid` Pseudo-class**: This pseudo-class targets the input fields that meet the validation criteria. - **`:invalid` Pseudo-class**: This pseudo-class targets the input fields that do not meet the validation criteria. -- **`:in-range` and `:out-of-range` Pseudo-classes**: These pseudo-classes applies styles to elements based on whether their values are within or outside specified range constraints. +- **`:in-range` and `:out-of-range` Pseudo-classes**: These pseudo-classes apply styles to elements based on whether their values are within or outside specified range constraints. - **`:required` Pseudo-class**: This pseudo-class targets `input` elements that have the `required` attribute. It signals to the user that they must fill out the field to submit the form. - **`:optional` Pseudo-class**: This pseudo-class applies styles input elements that are not required and can be left empty. - **`:autofill` Pseudo-class**: This pseudo-class applies styles to input fields that the browser automatically fills with saved data. @@ -83,7 +83,7 @@ p:is(.example, .this-works-too) { } ``` -- **`:has()` Pseudo-class**: This pseudo-class is often dubbed the `"parent"` selector because it allows you to style elements who contain child elements specified in the selector list. +- **`:has()` Pseudo-class**: This pseudo-class is often dubbed the `"parent"` selector because it allows you to style elements that contain child elements specified in the selector list. ```css article:has(h2) { diff --git a/curriculum/challenges/espanol/25-front-end-development/review-css/671a9a0a140c2b9d6a75629f.md b/curriculum/challenges/espanol/25-front-end-development/review-css/671a9a0a140c2b9d6a75629f.md index 2db3b7d80c..31eb9ac186 100644 --- a/curriculum/challenges/espanol/25-front-end-development/review-css/671a9a0a140c2b9d6a75629f.md +++ b/curriculum/challenges/espanol/25-front-end-development/review-css/671a9a0a140c2b9d6a75629f.md @@ -19,7 +19,7 @@ Review the concepts below to prepare for the upcoming exam. ## Inline, Internal, and External CSS - **Inline CSS**: These styles are written directly within an HTML element using the `style` attribute. Most of the time you will not be using inline CSS due to separation of concerns. -- **Internal CSS**: These styles are written within the `