diff --git a/curriculum/challenges/english/25-front-end-development/lab-book-organizer/67172b43f84bcd2dec238a3d.md b/curriculum/challenges/english/25-front-end-development/lab-book-organizer/67172b43f84bcd2dec238a3d.md index c6f22881044..cea12910412 100644 --- a/curriculum/challenges/english/25-front-end-development/lab-book-organizer/67172b43f84bcd2dec238a3d.md +++ b/curriculum/challenges/english/25-front-end-development/lab-book-organizer/67172b43f84bcd2dec238a3d.md @@ -25,7 +25,7 @@ dashedName: build-a-book-organizer 7. You should filter out books written after a certain year such as 1950 from the `books` array and save the filtered array in a new array named `filteredBooks`. -8. You should sort the books in the `filteredBooks` array according to their `releaseYear` in ascending order. You learned in a prior lecture video that the `sort()` method will sort the array in place. This means the `filteredBooks` array will be mutated. +8. You should sort the books in the `filteredBooks` array according to their `releaseYear` in ascending order. You learned in a prior lecture that the `sort()` method will sort the array in place. This means the `filteredBooks` array will be mutated. # --hints-- diff --git a/curriculum/challenges/english/25-front-end-development/lab-multimedia-player/67fccc2463253b213a000142.md b/curriculum/challenges/english/25-front-end-development/lab-multimedia-player/67fccc2463253b213a000142.md index 4256900084a..17201fb7ca5 100644 --- a/curriculum/challenges/english/25-front-end-development/lab-multimedia-player/67fccc2463253b213a000142.md +++ b/curriculum/challenges/english/25-front-end-development/lab-multimedia-player/67fccc2463253b213a000142.md @@ -8,7 +8,7 @@ demoType: onClick # --description-- -In the prior lecture videos, you were introduced to working with `audio` and `video` elements. In this lab, you will build out a multimedia player that will display an `audio` track and `video` with a transcript. +In the prior lectures, you were introduced to working with `audio` and `video` elements. In this lab, you will build out a multimedia player that will display an `audio` track and `video` with a transcript. For the `audio` element, you will need to include a `source` element which is used to specify the media being used. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672aa82768e00d600305afc0.md b/curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672aa82768e00d600305afc0.md index b8910c99e61..11bc8bad90b 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672aa82768e00d600305afc0.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672aa82768e00d600305afc0.md @@ -1,19 +1,12 @@ --- id: 672aa82768e00d600305afc0 title: What Are Some Tools to Check for Good Color Contrast on Sites? -challengeType: 11 -videoId: 2qj6LcJ4wSk +challengeType: 19 dashedName: what-are-some-tools-to-check-for-good-color-contrast-on-sites --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What are some tools to check for good color contrast on sites? - When designing websites, ensuring good color contrast is crucial for accessibility and readability. Several tools are available to help developers and designers check and maintain appropriate color contrast ratios on their sites. One popular tool is 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. It's user-friendly and provides immediate feedback on whether your color choices pass or fail the contrast requirements. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672c35a79fa53e00de9f2a49.md b/curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672c35a79fa53e00de9f2a49.md index 030a145a1af..084459d5d7d 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672c35a79fa53e00de9f2a49.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672c35a79fa53e00de9f2a49.md @@ -1,19 +1,12 @@ --- id: 672c35a79fa53e00de9f2a49 title: What Are Best Practices for Hiding Content So It Doesn't Become Inaccessible? -challengeType: 11 -videoId: ycYVairxSdQ +challengeType: 19 dashedName: what-are-best-practices-for-hiding-content-so-it-doesnt-become-inaccessible --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What are best practices for hiding content so it doesn't become inaccessible? - Hiding content on a webpage is a common practice in web development, but it's crucial to do it in a way that doesn't compromise accessibility. Different hiding techniques can have varying impacts on how assistive technologies interpret and present the content to users. Let's explore some best practices for hiding content while maintaining accessibility. One common method to hide content is using `display: none`. Here's an example: ```css @@ -52,7 +45,7 @@ For content that should be hidden visually but remain accessible to screen reade } ``` -In this example, we are using properties like `position`, `clip`, and `white-space`, which you will learn about in future lecture videos. For now, just know that this CSS rule effectively hides the content visually while keeping it accessible to screen readers. It's useful for providing additional context to screen reader users without affecting the visual layout. +In this example, we are using properties like `position`, `clip`, and `white-space`, which you will learn about in future lectures. For now, just know that this CSS rule effectively hides the content visually while keeping it accessible to screen readers. It's useful for providing additional context to screen reader users without affecting the visual layout. For toggling content visibility, consider using the `hidden` attribute: diff --git a/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8ea434ceac23cc90f337.md b/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8ea434ceac23cc90f337.md index e0918847345..c996a9af077 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8ea434ceac23cc90f337.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8ea434ceac23cc90f337.md @@ -1,9 +1,7 @@ --- id: 672b8ea434ceac23cc90f337 title: What Is the Specificity for ID Selectors? -# change back to 11 when video is updated challengeType: 19 -# videoId: new-id-goes-here-when-ready dashedName: what-is-the-specificity-for-id-selectors --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e86f590727c5e7e9ec5e.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e86f590727c5e7e9ec5e.md index f1e714afb7e..17f1a490251 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e86f590727c5e7e9ec5e.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e86f590727c5e7e9ec5e.md @@ -13,11 +13,11 @@ A fundamental concept in React is the creation of reusable UI components. These One of the key advantages of React is that these custom components can update and render independently as data changes. -Unlike traditional JavaScript, which requires direct manipulation of the DOM (Document Object Model), React uses a virtual DOM, which improves performance and efficiency. You’ll learn more about the virtual DOM and how it works in upcoming lecture videos. +Unlike traditional JavaScript, which requires direct manipulation of the DOM (Document Object Model), React uses a virtual DOM, which improves performance and efficiency. You’ll learn more about the virtual DOM and how it works in upcoming lectures. In addition to reusable components, React also provides a powerful way to manage the state of your application. State refers to the data that determines how a component renders and behaves. -With React, you can easily track and update the state of components, ensuring that the UI reflects the most current data. You will learn more about working with state in future lecture videos. +With React, you can easily track and update the state of components, ensuring that the UI reflects the most current data. You will learn more about working with state in future lectures. While there are many libraries within the JavaScript ecosystem, freeCodeCamp will mainly be focused on teaching React because of its widespread use and demand in the industry. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e879c78ee6c61db25b90.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e879c78ee6c61db25b90.md index 36bd5391a75..8b7ef834506 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e879c78ee6c61db25b90.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e879c78ee6c61db25b90.md @@ -106,7 +106,7 @@ function Greeting() { } ``` -In future lecture videos, we will continue to learn more about how to work with components and JSX. But for now, you've gained a solid introduction to building user interfaces with components, setting a strong foundation for what's to come. +In future lectures, we will continue to learn more about how to work with components and JSX. But for now, you've gained a solid introduction to building user interfaces with components, setting a strong foundation for what's to come. # --questions-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md index 20fa5bc4a26..fe10ae9dcd6 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md @@ -7,7 +7,7 @@ dashedName: how-can-you-import-and-export-components-in-react # --description-- -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 earlier lectures, 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. @@ -73,7 +73,7 @@ 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. +This file is usually located in the `src` directory of your project. You’ll learn more about common project layouts in a future lecture. To use the `Cat` component inside the root `App` component, you will need to import it like this: @@ -233,7 +233,7 @@ It automatically styles the `App` component. ### --feedback-- -Remember that you learned how to work with imports in earlier lecture videos. +Remember that you learned how to work with imports in earlier lectures. --- @@ -245,7 +245,7 @@ It sets the default state for the `App` component. ### --feedback-- -Remember that you learned how to work with imports in earlier lecture videos. +Remember that you learned how to work with imports in earlier lectures. --- @@ -253,7 +253,7 @@ It allows the `App` to run faster. ### --feedback-- -Remember that you learned how to work with imports in earlier lecture videos. +Remember that you learned how to work with imports in earlier lectures. ## --video-solution-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe81c9c6fd3714343a45ad.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe81c9c6fd3714343a45ad.md index 9699ee3040c..6439048d8b6 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe81c9c6fd3714343a45ad.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe81c9c6fd3714343a45ad.md @@ -1,9 +1,7 @@ --- id: 67fe81c9c6fd3714343a45ad title: What Is Python and What Are Some Common Uses in the Industry? -# change back to 11 when video is updated challengeType: 19 -# videoId: new-id-goes-here-when-ready dashedName: what-is-python-and-what-are-some-common-uses-in-the-industry --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe8567f141d632afaeb71b.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe8567f141d632afaeb71b.md index e5d32e53331..1b934e7dceb 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe8567f141d632afaeb71b.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe8567f141d632afaeb71b.md @@ -1,9 +1,7 @@ --- id: 67fe8567f141d632afaeb71b title: How Do You Install, Configure and Use Python in Your Local Environment? -# change back to 11 when video is updated challengeType: 19 -# videoId: new-id-goes-here-when-ready dashedName: how-do-you-install-configure-and-use-python-in-your-local-environment --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe8597975ea634042cad8f.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe8597975ea634042cad8f.md index 25b0faccb5e..3f18e4313ea 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe8597975ea634042cad8f.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe8597975ea634042cad8f.md @@ -1,11 +1,8 @@ --- id: 67fe8597975ea634042cad8f title: How Do You Declare Variables and What Are Naming Conventions to Name Variables? -# change back to 11 when video is updated challengeType: 19 -# videoId: new-id-goes-here-when-ready dashedName: how-do-you-declare-variables-and-what-are-naming-conventions-to-name-variables - --- # --description-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe8599c83979345ff9a91a.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe8599c83979345ff9a91a.md index 029be84bbb2..3c8db30d473 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe8599c83979345ff9a91a.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe8599c83979345ff9a91a.md @@ -1,9 +1,7 @@ --- id: 67fe8599c83979345ff9a91a title: How Does the Print Function Work? -# change back to 11 when video is updated challengeType: 19 -# videoId: new-id-goes-here-when-ready dashedName: how-does-the-print-function-work --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe859a00971c34a23abd43.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe859a00971c34a23abd43.md index ed7958781da..82c3ff3a268 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe859a00971c34a23abd43.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe859a00971c34a23abd43.md @@ -1,11 +1,8 @@ --- id: 67fe859a00971c34a23abd43 title: What Are Common Data Types in Python and How Do You Get the Type of a Variable? -# change back to 11 when video is updated challengeType: 19 -# videoId: new-id-goes-here-when-ready dashedName: what-are-common-data-types-in-python-and-how-do-you-get-the-type-of-a-variable - --- # --description-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe859c1ab68734d7c666cb.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe859c1ab68734d7c666cb.md index 41c5a51bb00..9341c712f11 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe859c1ab68734d7c666cb.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe859c1ab68734d7c666cb.md @@ -1,11 +1,8 @@ --- id: 67fe859c1ab68734d7c666cb title: How Do You Work With Strings? -# change back to 11 when video is updated challengeType: 19 -# videoId: new-id-goes-here-when-ready dashedName: how-do-you-work-with-strings - --- # --description-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe859e9d3b3635197781c8.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe859e9d3b3635197781c8.md index 9c833d23b09..175c0b69f63 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe859e9d3b3635197781c8.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe859e9d3b3635197781c8.md @@ -1,11 +1,8 @@ --- id: 67fe859e9d3b3635197781c8 title: How Do You Work With Integers and Floating Point Numbers? -# change back to 11 when video is updated challengeType: 19 -# videoId: new-id-goes-here-when-ready dashedName: how-do-you-work-with-integers-and-floating-point-numbers - --- # --description-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe859f55cd33356e322fd3.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe859f55cd33356e322fd3.md index 0d07f0cd9bc..6b059825359 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe859f55cd33356e322fd3.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe859f55cd33356e322fd3.md @@ -1,9 +1,7 @@ --- id: 67fe859f55cd33356e322fd3 title: How Do Functions Work in Python? -# change back to 11 when video is updated challengeType: 19 -# videoId: new-id-goes-here-when-ready dashedName: how-do-functions-work-in-python --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe85a1b634a335b18ae09a.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe85a1b634a335b18ae09a.md index e8cade16eca..36394fc338a 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe85a1b634a335b18ae09a.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe85a1b634a335b18ae09a.md @@ -1,9 +1,7 @@ --- id: 67fe85a1b634a335b18ae09a title: What Is Scope in Python and How Does It Work? -# change back to 11 when video is updated challengeType: 19 -# videoId: new-id-goes-here-when-ready dashedName: what-is-scope-in-python-and-how-does-it-work --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe85a3db9bad35f2b6a2bd.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe85a3db9bad35f2b6a2bd.md index 60796f4c692..95b6a257f1f 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe85a3db9bad35f2b6a2bd.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/67fe85a3db9bad35f2b6a2bd.md @@ -1,9 +1,7 @@ --- id: 67fe85a3db9bad35f2b6a2bd title: How Do Conditional Statements and Logical Operators Work? -# change back to 11 when video is updated challengeType: 19 -# videoId: new-id-goes-here-when-ready dashedName: how-do-conditional-statements-and-logical-operators-work --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/6839b2ddd01ef657b6bf3b76.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/6839b2ddd01ef657b6bf3b76.md index 136c69bad10..12ff1aab91e 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/6839b2ddd01ef657b6bf3b76.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/6839b2ddd01ef657b6bf3b76.md @@ -1,9 +1,7 @@ --- id: 6839b2ddd01ef657b6bf3b76 title: What Are Some Common String Methods? -# change back to 11 when video is updated challengeType: 19 -# videoId: new-id-goes-here-when-ready dashedName: what-are-some-common-string-methods --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/6839b3295323f563efc68f5c.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/6839b3295323f563efc68f5c.md index 17880516357..d29edd16a74 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/6839b3295323f563efc68f5c.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/6839b3295323f563efc68f5c.md @@ -1,9 +1,7 @@ --- id: 6839b3295323f563efc68f5c title: How Do Augmented Assignments Work? -# change back to 11 when video is updated challengeType: 19 -# videoId: new-id-goes-here-when-ready dashedName: how-do-augmented-assignments-work --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/68480f431e8568b2056b140b.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/68480f431e8568b2056b140b.md index daf5c4fbb50..8874d7cf56c 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/68480f431e8568b2056b140b.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-python/68480f431e8568b2056b140b.md @@ -1,9 +1,7 @@ --- id: 68480f431e8568b2056b140b title: What Are Truthy and Falsy Values, and How Do Boolean Operators and Short-Circuiting Work? -# change back to 11 when video is updated challengeType: 19 -# videoId: new-id-goes-here-when-ready dashedName: what-are-truthy-and-falsy-values-and-how-do-boolean-operators-and-short-circuiting-work --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-typescript/67d1d96532bc095aee051657.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-typescript/67d1d96532bc095aee051657.md index 5bbd1dfb3b8..aee606d4026 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-typescript/67d1d96532bc095aee051657.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-typescript/67d1d96532bc095aee051657.md @@ -1,21 +1,12 @@ --- id: 67d1d96532bc095aee051657 title: What Is TypeScript, and Why Is It Used in the Industry? -challengeType: 11 -videoId: Dce5dZUL2iI +challengeType: 19 dashedName: what-is-typescript-and-why-is-it-used-in-the-industry --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What is TypeScript, and why is it used in the industry? - -Let's learn about TypeScript and why it is used. - JavaScript is considered a dynamically-typed language. This means that variables can receive any values at run time - declaring a variable as a number does not prevent you from assigning it a string value later, and function parameters can be passed any value. The challenge of a dynamically-typed language is that the lack of type safety can introduce errors if you are not careful. TypeScript extends the JavaScript language to include static typing, which helps catch those errors before you even deploy your code. But how does it work? diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-typescript/67d3018062fe6ba92b7d8299.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-typescript/67d3018062fe6ba92b7d8299.md index 7e777da1cf0..4af14af3d65 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-typescript/67d3018062fe6ba92b7d8299.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-typescript/67d3018062fe6ba92b7d8299.md @@ -1,21 +1,12 @@ --- id: 67d3018062fe6ba92b7d8299 title: How Do the Different Types Work in TypeScript? -challengeType: 11 -videoId: UxmvUfPRqfg +challengeType: 19 dashedName: how-do-the-different-types-work-in-typescript --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -How do the different types work in TypeScript? - -Let's learn about the different types in TypeScript. - You've already seen one in the previous lecture: `string[]`, which represents an array of strings. But how does that actually work? For the primitive data types `string`, `null`, `undefined`, `number`, `boolean`, and `bigint`, TypeScript offers corresponding type keywords. In our example, we are using these types to annotate our variables: diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-typescript/67d30191adb999a9909109ef.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-typescript/67d30191adb999a9909109ef.md index ca66a946b80..ec467615943 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-typescript/67d30191adb999a9909109ef.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-typescript/67d30191adb999a9909109ef.md @@ -1,21 +1,12 @@ --- id: 67d30191adb999a9909109ef title: What Are Generics, and How Do They Work? -challengeType: 11 -videoId: dBUOmjcR3N4 +challengeType: 19 dashedName: what-are-generics-and-how-do-they-work --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What are generics, and how do they work? - -Let's learn about generic types in TypeScript. - You have actually seen a generic type in a previous lecture: `Array`. But you'll usually use generic types in functions. In fact, they can be thought of as a special parameter you provide to a function to control the behavior of the function's type definition. Let's go back to our previous example of a function to get a random value from an array: diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-typescript/67d301a5f536d1a9e5df1a8c.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-typescript/67d301a5f536d1a9e5df1a8c.md index 6ffaabf9fc6..3a8c41d5f5b 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-typescript/67d301a5f536d1a9e5df1a8c.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-typescript/67d301a5f536d1a9e5df1a8c.md @@ -1,21 +1,12 @@ --- id: 67d301a5f536d1a9e5df1a8c title: What Is Type Narrowing, and How Does It Work? -challengeType: 11 -videoId: hTY1_Mco_WA +challengeType: 19 dashedName: what-is-type-narrowing-and-how-does-it-work --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What is type narrowing, and how does it work? - -Let's learn about type narrowing in TypeScript. - There are going to be times where you have a value with a broad type and you need to narrow it down to a more specific type. For example, maybe you need to ensure an object matches an interface you defined. Or a string is within a specific list of values. There are quite a few ways to achieve this. The first is narrowing by truthiness. Consider our example from the last lecture: diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-typescript/67d301cc87b84eaa42bdcdbe.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-typescript/67d301cc87b84eaa42bdcdbe.md index 1563e4ec296..3bb00264ccb 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-typescript/67d301cc87b84eaa42bdcdbe.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-typescript/67d301cc87b84eaa42bdcdbe.md @@ -1,21 +1,12 @@ --- id: 67d301cc87b84eaa42bdcdbe title: What Is a tsconfig File, and Why Is It Important to Include in Your TypeScript Projects? -challengeType: 11 -videoId: H-n6N7zmNCg +challengeType: 19 dashedName: what-is-a-tsconfig-file-and-why-is-it-important-to-include-in-your-typescript-projects --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What is a tsconfig file, and why is it important to include in your TypeScript projects? - -Let's learn about the tsconfig file! - TypeScript's compiler settings can be configured to meet your project's needs. That configuration lives in a `tsconfig.json` file in the root directory of your project. In fact, without it, the compiler will not run unless you pass it command flags directly. But what exactly does this file do? Well, let's take a look at an example file: ```json diff --git a/curriculum/challenges/english/25-front-end-development/lecture-searching-and-sorting-algorithms/68420c70e4bfe26d52b780dc.md b/curriculum/challenges/english/25-front-end-development/lecture-searching-and-sorting-algorithms/68420c70e4bfe26d52b780dc.md index 4295d05ce6b..ebee107766c 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-searching-and-sorting-algorithms/68420c70e4bfe26d52b780dc.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-searching-and-sorting-algorithms/68420c70e4bfe26d52b780dc.md @@ -2,9 +2,7 @@ id: 68420c70e4bfe26d52b780dc # title needs to be updated to correct title when lectures are finalized title: Searching and Sorting Algorithms -# change back to 11 when video is added challengeType: 19 -# videoId: new-id-goes-here-when-ready # dashedName needs to be updated to correct title when lectures are finalized dashedName: lecture-searching-and-sorting-algorithms --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-abstraction/68420c1dfb941767044c5a31.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-abstraction/68420c1dfb941767044c5a31.md index 5325bfce1a3..488bc5523eb 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-abstraction/68420c1dfb941767044c5a31.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-abstraction/68420c1dfb941767044c5a31.md @@ -2,9 +2,7 @@ id: 68420c1dfb941767044c5a31 # title needs to be updated to correct title when lectures are finalized title: Understanding Abstraction -# change back to 11 when video is added challengeType: 19 -# videoId: new-id-goes-here-when-ready # dashedName needs to be updated to correct title when lectures are finalized dashedName: lecture-understanding-abstraction --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-dynamic-programming/68420c7fb5b9e36eefb9e98f.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-dynamic-programming/68420c7fb5b9e36eefb9e98f.md index 8b53fd81112..e3fee8e02dd 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-dynamic-programming/68420c7fb5b9e36eefb9e98f.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-dynamic-programming/68420c7fb5b9e36eefb9e98f.md @@ -2,9 +2,7 @@ id: 68420c7fb5b9e36eefb9e98f # title needs to be updated to correct title when lectures are finalized title: Understanding Dynamic Programming -# change back to 11 when video is added challengeType: 19 -# videoId: new-id-goes-here-when-ready # dashedName needs to be updated to correct title when lectures are finalized dashedName: lecture-understanding-dynamic-programming --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-error-handling/68420bacf395f15cd73f8118.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-error-handling/68420bacf395f15cd73f8118.md index 369aaec2672..6a6ae04446d 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-error-handling/68420bacf395f15cd73f8118.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-error-handling/68420bacf395f15cd73f8118.md @@ -2,9 +2,7 @@ id: 68420bacf395f15cd73f8118 # title needs to be updated to correct title when lectures are finalized title: Understanding Error Handling -# change back to 11 when video is added challengeType: 19 -# videoId: new-id-goes-here-when-ready # dashedName needs to be updated to correct title when lectures are finalized dashedName: lecture-understanding-error-handling --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-graphs-and-trees/68420c5ac17cf26ab2a4ca3c.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-graphs-and-trees/68420c5ac17cf26ab2a4ca3c.md index 369fd73e6b0..9d01a4b9e58 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-graphs-and-trees/68420c5ac17cf26ab2a4ca3c.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-graphs-and-trees/68420c5ac17cf26ab2a4ca3c.md @@ -2,9 +2,7 @@ id: 68420c5ac17cf26ab2a4ca3c # title needs to be updated to correct title when lectures are finalized title: Understanding Graphs and Trees -# change back to 11 when video is added challengeType: 19 -# videoId: new-id-goes-here-when-ready # dashedName needs to be updated to correct title when lectures are finalized dashedName: lecture-understanding-graphs-and-trees --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-inheritance-and-polymorphism/68420c0610b61d64fe2cfd12.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-inheritance-and-polymorphism/68420c0610b61d64fe2cfd12.md index 058e4b65b53..b64aae3a6e5 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-inheritance-and-polymorphism/68420c0610b61d64fe2cfd12.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-inheritance-and-polymorphism/68420c0610b61d64fe2cfd12.md @@ -2,9 +2,7 @@ id: 68420c0610b61d64fe2cfd12 # title needs to be updated to correct title when lectures are finalized title: Understanding Inheritance and Polymorphism -# change back to 11 when video is added challengeType: 19 -# videoId: new-id-goes-here-when-ready # dashedName needs to be updated to correct title when lectures are finalized dashedName: lecture-understanding-inheritance-and-polymorphism --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-object-oriented-programming-and-encapsulation/68420be9af9d89620af7944a.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-object-oriented-programming-and-encapsulation/68420be9af9d89620af7944a.md index 7f01a42dfa8..bb8cc4f7df3 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-object-oriented-programming-and-encapsulation/68420be9af9d89620af7944a.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-object-oriented-programming-and-encapsulation/68420be9af9d89620af7944a.md @@ -2,9 +2,7 @@ id: 68420be9af9d89620af7944a # title needs to be updated to correct title when lectures are finalized title: Understanding Object Oriented Programming and Encapsulation -# change back to 11 when video is added challengeType: 19 -# videoId: new-id-goes-here-when-ready # dashedName needs to be updated to correct title when lectures are finalized dashedName: lecture-understanding-object-oriented-programming-and-encapsulation --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2c5780912abd874e79c.md b/curriculum/challenges/english/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2c5780912abd874e79c.md index cd84ad71ca1..706c743fa98 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2c5780912abd874e79c.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2c5780912abd874e79c.md @@ -63,7 +63,7 @@ Refer back to the first part of this lecture for the answer. --- -Watching short lectures, coding interactive workshops, and building projects. +Reading short lectures, coding interactive workshops, and building projects. ## --video-solution-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-welcome-to-freecodecamp/6763500bd5a85d5898cc21a9.md b/curriculum/challenges/english/25-front-end-development/lecture-welcome-to-freecodecamp/6763500bd5a85d5898cc21a9.md index 8f397dd3907..d2d936d924d 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-welcome-to-freecodecamp/6763500bd5a85d5898cc21a9.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-welcome-to-freecodecamp/6763500bd5a85d5898cc21a9.md @@ -121,7 +121,7 @@ Active Recall --- -Watching Tutorials Only +Reading Lectures Only ### --feedback-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-common-array-methods/6732b284901f8c1539e20bcb.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-common-array-methods/6732b284901f8c1539e20bcb.md index aa748a39128..ef93445f734 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-common-array-methods/6732b284901f8c1539e20bcb.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-common-array-methods/6732b284901f8c1539e20bcb.md @@ -56,7 +56,7 @@ console.log(original); // [1, 2, 3, 4, 5] console.log(copy); // [1, 2, 6, 4, 5] ``` -In this example, to create a copy of the `original` array without modifying it, we use the spread operator (`...`). The spread operator will create a shallow copy of the elements of the `original` array into a new array. You will learn more about this in future lecture videos. +In this example, to create a copy of the `original` array without modifying it, we use the spread operator (`...`). The spread operator will create a shallow copy of the elements of the `original` array into a new array. You will learn more about this in future lectures. When we use `copy.splice(2, 1, 6)`, it modifies the copy array by removing the element at index `2` (which is `3`) and inserting the new element `6` at that position. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-common-data-structures/68420c314cdf5c6863ca8330.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-common-data-structures/68420c314cdf5c6863ca8330.md index 238f27f4fe3..6313662e84b 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-common-data-structures/68420c314cdf5c6863ca8330.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-common-data-structures/68420c314cdf5c6863ca8330.md @@ -2,9 +2,7 @@ id: 68420c314cdf5c6863ca8330 # title needs to be updated to correct title when lectures are finalized title: Working with Common Data Structures -# change back to 11 when video is added challengeType: 19 -# videoId: new-id-goes-here-when-ready # dashedName needs to be updated to correct title when lectures are finalized dashedName: lecture-working-with-common-data-structures --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-libraries-and-frameworks/67d1d74780981f521b8ac090.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-libraries-and-frameworks/67d1d74780981f521b8ac090.md index 747252967ec..5b16deda614 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-libraries-and-frameworks/67d1d74780981f521b8ac090.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-libraries-and-frameworks/67d1d74780981f521b8ac090.md @@ -1,21 +1,12 @@ --- id: 67d1d74780981f521b8ac090 title: What Is a CSS Framework, and What Are Some Advantages and Disadvantages of Using It? -challengeType: 11 -videoId: A-z2RMOP9dE +challengeType: 19 dashedName: what-is-a-css-framework-and-what-are-some-advantages-and-disadvantages-of-using-it --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What is a CSS framework, and what are some advantages and disadvantages to using it? - -Let's learn about CSS frameworks and why you should use them. - As you work CSS, you may experience certain challenges, such as keeping the styles consistent and compatible across browsers, avoiding repetition, and handling the growing complexity and number of CSS files across your project. CSS frameworks are very helpful to prevent these issues from the start. A CSS framework consists of pre-written CSS code that you can use to style your HTML elements. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-libraries-and-frameworks/67d2fe63c8b0049ad7481021.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-libraries-and-frameworks/67d2fe63c8b0049ad7481021.md index 31082964211..97bd6a6c4e4 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-libraries-and-frameworks/67d2fe63c8b0049ad7481021.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-libraries-and-frameworks/67d2fe63c8b0049ad7481021.md @@ -1,21 +1,12 @@ --- id: 67d2fe63c8b0049ad7481021 title: What Is the Value of Using a CSS Preprocessor, and What Are Some Disadvantages? -challengeType: 11 -videoId: qCedKYGOYg4 +challengeType: 19 dashedName: what-is-the-value-of-using-a-css-preprocessor-and-what-are-some-disadvantages --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What is the value of using a CSS preprocessor, and what are some disadvantages? - -Let's learn about CSS preprocessors. - A CSS preprocessor is a tool that extends standard CSS with powerful features like variables, mixins, nesting, and selector inheritance. Some of these features, like variables and nesting, are now supported or are getting more support in native CSS, and this trend is very likely to continue. However, earlier versions of native CSS did not support these features. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/6734e3ceee2da4b0301719b7.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/6734e3ceee2da4b0301719b7.md index a5cb6b576df..10b54f52a33 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/6734e3ceee2da4b0301719b7.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/6734e3ceee2da4b0301719b7.md @@ -115,9 +115,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 arrays in future lecture videos. +You will learn more about how to render lists in arrays 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. +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. # --questions-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-loops-and-sequences/6839e41fe8dac60f11f583db.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-loops-and-sequences/6839e41fe8dac60f11f583db.md index 4e6df6aa7c7..bc51cd1752f 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-loops-and-sequences/6839e41fe8dac60f11f583db.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-loops-and-sequences/6839e41fe8dac60f11f583db.md @@ -84,7 +84,7 @@ To generate a list of lists. ### --feedback-- -Review the beginning of the video for the answer. +Review the beginning of the lecture for the answer. --- @@ -92,7 +92,7 @@ To generate list of strings. ### --feedback-- -Review the beginning of the video for the answer. +Review the beginning of the lecture for the answer. --- @@ -104,7 +104,7 @@ To generate a list of characters. ### --feedback-- -Review the beginning of the video for the answer. +Review the beginning of the lecture for the answer. ## --video-solution-- @@ -124,7 +124,7 @@ Which of the following is the only required argument needed for the `range()` fu ### --feedback-- -Review the beginning of the video for the answer. +Review the beginning of the lecture for the answer. --- @@ -132,7 +132,7 @@ Review the beginning of the video for the answer. ### --feedback-- -Review the beginning of the video for the answer. +Review the beginning of the lecture for the answer. --- @@ -140,7 +140,7 @@ Review the beginning of the video for the answer. ### --feedback-- -Review the beginning of the video for the answer. +Review the beginning of the lecture for the answer. ## --video-solution-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md index 5e1ba3a3eb0..7785f032336 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md @@ -18,7 +18,7 @@ If the substring is found, `indexOf()` returns the index (or position) of the fi The `indexOf()` method takes two arguments: the first is the substring you want to find within the larger string, and the second is an option starting position for the search. If you don’t provide a starting position, the search will begin at the start of the string. -In this context, an **argument** is a value you give to a function or method when you call it, enabling that function or method to perform its task using the specific information you provide. You will learn more about arguments in future lecture videos. +In this context, an **argument** is a value you give to a function or method when you call it, enabling that function or method to perform its task using the specific information you provide. You will learn more about arguments in future lectures. Here is an example of using the `indexOf()` method to find the position for the string `awesome`: diff --git a/curriculum/challenges/english/25-front-end-development/review-html-accessibility/671a87a39b88245a579c2271.md b/curriculum/challenges/english/25-front-end-development/review-html-accessibility/671a87a39b88245a579c2271.md index f25a1fdf894..d9d273bfe89 100644 --- a/curriculum/challenges/english/25-front-end-development/review-html-accessibility/671a87a39b88245a579c2271.md +++ b/curriculum/challenges/english/25-front-end-development/review-html-accessibility/671a87a39b88245a579c2271.md @@ -31,7 +31,7 @@ dashedName: review-html-accessibility - **Importance of good `alt` text**: You should use the `alt` attribute to provide a text alternative for images. This helps people using assistive technologies understand the content of the image. - **Importance of good link text**: You should use descriptive link text to help users understand the purpose of the link. This helps people using assistive technologies understand the purpose of the link. - **Best practices for making audio and video content accessible**: You should provide captions and transcripts for audio and video content to make it accessible to people with hearing impairments. You should also provide audio descriptions for video content to make it accessible to people with visual impairments. -- **`tabindex` attribute**: Used to make elements focusable and define the relative order in which they should be navigated using the keyboard. It is important to never use the `tabindex` attribute with a value greater than 0. Instead, you should either use a value of 0 or -1. For more information, review the prior lecture video on keyboard accessibility. +- **`tabindex` attribute**: Used to make elements focusable and define the relative order in which they should be navigated using the keyboard. It is important to never use the `tabindex` attribute with a value greater than 0. Instead, you should either use a value of 0 or -1. ```html

Sorry, there was an error with your submission.

diff --git a/curriculum/challenges/english/25-front-end-development/review-html/671a883163d5ab5d47145880.md b/curriculum/challenges/english/25-front-end-development/review-html/671a883163d5ab5d47145880.md index 2c46c21fcfe..0b23d8ce373 100644 --- a/curriculum/challenges/english/25-front-end-development/review-html/671a883163d5ab5d47145880.md +++ b/curriculum/challenges/english/25-front-end-development/review-html/671a883163d5ab5d47145880.md @@ -295,7 +295,7 @@ Review the concepts below to prepare for the upcoming prep exam. - **Importance of good `alt` text**: You should use the `alt` attribute to provide a text alternative for images. This helps assistive technologies understand the content of the image. - **Importance of good link text**: You should use descriptive link text to help users understand the purpose of the link. This helps assistive technologies understand the purpose of the link. - **Best practices for making audio and video content accessible**: You should provide captions and transcripts for audio and video content to make it accessible to people with hearing impairments. You should also provide audio descriptions for video content to make it accessible to people with visual impairments. -- **`tabindex` attribute**: Used to make elements focusable and define the relative order in which they should be navigated using the keyboard. It is important to never use the `tabindex` attribute with a value greater than 0. Instead, you should either use a value of 0 or -1. For more information, review the prior lecture video on keyboard accessibility. +- **`tabindex` attribute**: Used to make elements focusable and define the relative order in which they should be navigated using the keyboard. It is important to never use the `tabindex` attribute with a value greater than 0. Instead, you should either use a value of 0 or -1. - **`accesskey` attribute**: Used to define a keyboard shortcut for an element. This can help users with mobility impairments navigate the website more easily. ## WAI-ARIA, Roles, and Attributes diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f344f9c805cd193c33d829c.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f344f9c805cd193c33d829c.md index 73c8551cf0a..873090ce8f8 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f344f9c805cd193c33d829c.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f344f9c805cd193c33d829c.md @@ -7,7 +7,7 @@ dashedName: step-11 # --description-- -In previous lecture videos, you learned how to add `CSS` properties and values like this: +In previous lectures, you learned how to add `CSS` properties and values like this: ```css element { diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477cbcb6ba47918c1da92.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477cbcb6ba47918c1da92.md index a98ebbd6427..2cd6024231b 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477cbcb6ba47918c1da92.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3477cbcb6ba47918c1da92.md @@ -9,7 +9,7 @@ dashedName: step-17 For the styling of the page to look similar on mobile as it does on a desktop or laptop, you need to add a `meta` element with a special `content` attribute. -You learned about the viewport `meta` element in the previous lecture videos. +You learned about the viewport `meta` element in the previous lectures. Here is an example: diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed6199b0cdef1d2be8f.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed6199b0cdef1d2be8f.md index 4022bdd4c22..99213f4827d 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed6199b0cdef1d2be8f.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed6199b0cdef1d2be8f.md @@ -9,7 +9,7 @@ dashedName: step-26 So far you have been using type and id selectors to style elements. However, it is more common to use a different selector to style your elements. -You learned how to work with `class` selectors in the previous lecture videos like this: +You learned how to work with `class` selectors in the previous lectures like this: ```css .class-name { diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed63c7807a4f1e6d054.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed63c7807a4f1e6d054.md index 5e8a28f1653..ccafd0e742e 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed63c7807a4f1e6d054.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f356ed63c7807a4f1e6d054.md @@ -11,7 +11,7 @@ The goal now is to make the `div` not take up the entire width of the page. The You can use the `id` selector to target a specific element with an `id` attribute. -You learned how to work with the `id` selector in the previous lecture videos like this: +You learned how to work with the `id` selector in the previous lectures like this: ```css #cat { diff --git a/curriculum/challenges/english/25-front-end-development/workshop-calculator/66cc06012e46aa6bc9b8c001.md b/curriculum/challenges/english/25-front-end-development/workshop-calculator/66cc06012e46aa6bc9b8c001.md index 7c22304cb60..c8489a2c944 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-calculator/66cc06012e46aa6bc9b8c001.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-calculator/66cc06012e46aa6bc9b8c001.md @@ -9,7 +9,7 @@ dashedName: step-1 In this workshop, you will review how to work with functions by building a calculator app. -In the previous lecture videos, you learned how to declare functions like this: +In the previous lectures, you learned how to declare functions like this: ```js // regular function diff --git a/curriculum/challenges/english/25-front-end-development/workshop-calculator/66cc095dfe1682753d2ab030.md b/curriculum/challenges/english/25-front-end-development/workshop-calculator/66cc095dfe1682753d2ab030.md index f09c820b520..8bda0ca3699 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-calculator/66cc095dfe1682753d2ab030.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-calculator/66cc095dfe1682753d2ab030.md @@ -7,7 +7,7 @@ dashedName: step-2 # --description-- -One of concepts you learned in the previous lecture videos was how to return values from a function. +One of concepts you learned in the previous lectures was how to return values from a function. Here is a reminder of how to return a value from a function: diff --git a/curriculum/challenges/english/25-front-end-development/workshop-calculator/66cc0a9e06e00b75d6782be9.md b/curriculum/challenges/english/25-front-end-development/workshop-calculator/66cc0a9e06e00b75d6782be9.md index 1422a880cea..ef5cd92d5be 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-calculator/66cc0a9e06e00b75d6782be9.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-calculator/66cc0a9e06e00b75d6782be9.md @@ -7,7 +7,7 @@ dashedName: step-3 # --description-- -In the previous lecture videos, you learned how to call (invoke) a function. Calling a function means to execute the code inside the function. +In the previous lectures, you learned how to call (invoke) a function. Calling a function means to execute the code inside the function. Here is a reminder of how to call a function: diff --git a/curriculum/challenges/english/25-front-end-development/workshop-calculator/66cc0f1ae40802781b2ea972.md b/curriculum/challenges/english/25-front-end-development/workshop-calculator/66cc0f1ae40802781b2ea972.md index 28d72d6e6c9..2ebe4eeff56 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-calculator/66cc0f1ae40802781b2ea972.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-calculator/66cc0f1ae40802781b2ea972.md @@ -7,7 +7,7 @@ dashedName: step-6 # --description-- -In the previous lecture videos, you learned how to work with function parameters. +In the previous lectures, you learned how to work with function parameters. A function parameter is a variable that is defined in the function's declaration and acts as a placeholder. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md index 606789bbf27..86a45c51b8a 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md @@ -7,7 +7,7 @@ dashedName: step-11 # --description-- -Now you have something that is resembling a building. You are ready to create your first variable. In the previous lecture videos you learned that variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the rule for the `bb1` class, create a variable named `--building-color1` and give it a value of `#999`. +Now you have something that is resembling a building. You are ready to create your first variable. In the previous lectures you learned that variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the rule for the `bb1` class, create a variable named `--building-color1` and give it a value of `#999`. # --hints-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-decimal-to-binary-converter/64005eb6d2d06a15d9f7611f.md b/curriculum/challenges/english/25-front-end-development/workshop-decimal-to-binary-converter/64005eb6d2d06a15d9f7611f.md index 707e3f31a3a..7ad776cf81f 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-decimal-to-binary-converter/64005eb6d2d06a15d9f7611f.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-decimal-to-binary-converter/64005eb6d2d06a15d9f7611f.md @@ -7,7 +7,7 @@ dashedName: step-10 # --description-- -In an earlier lecture video you learned about truthy and falsy values, which are values that evaluate to `true` or `false`. In JavaScript, some common falsy values you'll see are `null`, `undefined`, the number `0`, and empty strings. +In an earlier lecture you learned about truthy and falsy values, which are values that evaluate to `true` or `false`. In JavaScript, some common falsy values you'll see are `null`, `undefined`, the number `0`, and empty strings. Rather than check if a value is equal to a falsy value, you can use the logical NOT operator (`!`) to check if the value itself is falsy. For example: diff --git a/curriculum/challenges/english/25-front-end-development/workshop-fruit-search-app/67ec2f7924ade2450c06bcd8.md b/curriculum/challenges/english/25-front-end-development/workshop-fruit-search-app/67ec2f7924ade2450c06bcd8.md index 3b1b90f0f4c..c02f8e45bc7 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-fruit-search-app/67ec2f7924ade2450c06bcd8.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-fruit-search-app/67ec2f7924ade2450c06bcd8.md @@ -8,7 +8,7 @@ demoType: onLoad # --description-- -In the previous lecture videos, you learned about handling side effects, like data fetching, with the `useEffect` Hook. In this workshop, you'll build an application that fetches fruit data from an API based on user input and displays the results dynamically. +In the previous lectures, you learned about handling side effects, like data fetching, with the `useEffect` Hook. In this workshop, you'll build an application that fetches fruit data from an API based on user input and displays the results dynamically. First, make your `FruitsSearch` component return a `div` element with an `id` of `search-container`. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-fruit-search-app/67ed044dc76cf4a441618f2c.md b/curriculum/challenges/english/25-front-end-development/workshop-fruit-search-app/67ed044dc76cf4a441618f2c.md index c28d1b7dadb..9a1e5a295e6 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-fruit-search-app/67ed044dc76cf4a441618f2c.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-fruit-search-app/67ed044dc76cf4a441618f2c.md @@ -7,7 +7,7 @@ dashedName: step-5 # --description-- -In previous lecture videos, you learned about controlled inputs, where form elements are tied directly to state variables in React. +In previous lectures, you learned about controlled inputs, where form elements are tied directly to state variables in React. To track what the user types into the search input field, create a state variable named `query` with an initial value of an empty string (`''`). Also define its corresponding setter function, `setQuery`, using the `useState` Hook. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-greeting-bot/66ad8294a0ad902f1b31b612.md b/curriculum/challenges/english/25-front-end-development/workshop-greeting-bot/66ad8294a0ad902f1b31b612.md index 8af83e3ac1b..4612b2c37e6 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-greeting-bot/66ad8294a0ad902f1b31b612.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-greeting-bot/66ad8294a0ad902f1b31b612.md @@ -11,7 +11,7 @@ In this workshop you will learn how to work with JavaScript fundamentals by buil In this first step, you will want to output a message to the console from the greeting bot. -Remember that you learned about `console.log()` and strings in the previous lecture videos. +Remember that you learned about `console.log()` and strings in the previous lectures. Here is a reminder of how to use `console.log()` with strings: diff --git a/curriculum/challenges/english/25-front-end-development/workshop-greeting-bot/66ad8d150264db3926eccfeb.md b/curriculum/challenges/english/25-front-end-development/workshop-greeting-bot/66ad8d150264db3926eccfeb.md index bd2fb97aa7c..362bcced3cf 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-greeting-bot/66ad8d150264db3926eccfeb.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-greeting-bot/66ad8d150264db3926eccfeb.md @@ -7,7 +7,7 @@ dashedName: step-3 # --description-- -In the previous lecture videos, you learned about the `let` keyword and how to declare variables in JavaScript. +In the previous lectures, you learned about the `let` keyword and how to declare variables in JavaScript. Here is a reminder of how to declare a variable using the `let` keyword: diff --git a/curriculum/challenges/english/25-front-end-development/workshop-greeting-bot/66ad998285df023b23dacdd3.md b/curriculum/challenges/english/25-front-end-development/workshop-greeting-bot/66ad998285df023b23dacdd3.md index 63a69fad407..8fd99996030 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-greeting-bot/66ad998285df023b23dacdd3.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-greeting-bot/66ad998285df023b23dacdd3.md @@ -9,7 +9,7 @@ dashedName: step-5 Now, it is time to assign some values to your `bot` and `botLocation` variables. -In the previous lecture videos, you learned how to assign values to variables like this: +In the previous lectures, you learned how to assign values to variables like this: ```js variableName = "Here is the value"; diff --git a/curriculum/challenges/english/25-front-end-development/workshop-greeting-bot/66ada3f46945763dd97f43f8.md b/curriculum/challenges/english/25-front-end-development/workshop-greeting-bot/66ada3f46945763dd97f43f8.md index 021e3fc4094..63dcecdb4bd 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-greeting-bot/66ada3f46945763dd97f43f8.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-greeting-bot/66ada3f46945763dd97f43f8.md @@ -9,7 +9,7 @@ dashedName: step-7 Earlier, you created the `bot` and `botLocation` variables. Now, you will use them to output new messages to the console. -In the lecture videos, you learned how to work with string concatenation using the `+` operator to concatenate strings together like this: +In the lectures, you learned how to work with string concatenation using the `+` operator to concatenate strings together like this: ```js let firstName = "John"; diff --git a/curriculum/challenges/english/25-front-end-development/workshop-greeting-bot/66adbc8a9793d64250f7e609.md b/curriculum/challenges/english/25-front-end-development/workshop-greeting-bot/66adbc8a9793d64250f7e609.md index 6f56ffaf069..29860ae1870 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-greeting-bot/66adbc8a9793d64250f7e609.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-greeting-bot/66adbc8a9793d64250f7e609.md @@ -7,7 +7,7 @@ dashedName: step-9 # --description-- -In the previous lecture videos, you learned how to reassign values to variables like this: +In the previous lectures, you learned how to reassign values to variables like this: ```js let name = "John"; diff --git a/curriculum/challenges/english/25-front-end-development/workshop-hotel-feedback-form/66a83bdcf425e7446900b7c4.md b/curriculum/challenges/english/25-front-end-development/workshop-hotel-feedback-form/66a83bdcf425e7446900b7c4.md index ed8e8362f32..a6667fa66b9 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-hotel-feedback-form/66a83bdcf425e7446900b7c4.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-hotel-feedback-form/66a83bdcf425e7446900b7c4.md @@ -7,7 +7,7 @@ dashedName: step-6 # --description-- -In the previous lecture videos, you learned how to work with the `form` element like this: +In the previous lectures, you learned how to work with the `form` element like this: ```html
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-hotel-feedback-form/66a84111965a0c46df6bbd0a.md b/curriculum/challenges/english/25-front-end-development/workshop-hotel-feedback-form/66a84111965a0c46df6bbd0a.md index ec95b39c8eb..9080ddc82e2 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-hotel-feedback-form/66a84111965a0c46df6bbd0a.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-hotel-feedback-form/66a84111965a0c46df6bbd0a.md @@ -7,7 +7,7 @@ dashedName: step-9 # --description-- -In the previous lecture videos, you learned how to associate a `label` element with an `input` like this: +In the previous lectures, you learned how to associate a `label` element with an `input` like this: ```html diff --git a/curriculum/challenges/english/25-front-end-development/workshop-hotel-feedback-form/66a930b20f589b6664c51cb0.md b/curriculum/challenges/english/25-front-end-development/workshop-hotel-feedback-form/66a930b20f589b6664c51cb0.md index 9e0a81d3cd6..f3fccbeb54a 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-hotel-feedback-form/66a930b20f589b6664c51cb0.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-hotel-feedback-form/66a930b20f589b6664c51cb0.md @@ -9,7 +9,7 @@ dashedName: step-10 When a user provides their full name, the `input` will accept plaintext. -In the previous lecture videos, you learned how to work with the `type` attribute like this: +In the previous lectures, you learned how to work with the `type` attribute like this: ```html diff --git a/curriculum/challenges/english/25-front-end-development/workshop-hotel-feedback-form/66a937e74920ba68ebe5e86d.md b/curriculum/challenges/english/25-front-end-development/workshop-hotel-feedback-form/66a937e74920ba68ebe5e86d.md index d548ff99504..412d48c617c 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-hotel-feedback-form/66a937e74920ba68ebe5e86d.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-hotel-feedback-form/66a937e74920ba68ebe5e86d.md @@ -7,7 +7,7 @@ dashedName: step-12 # --description-- -In the previous lecture videos, you learned how to work with the `placeholder` and `required` attributes like this: +In the previous lectures, you learned how to work with the `placeholder` and `required` attributes like this: ```html diff --git a/curriculum/challenges/english/25-front-end-development/workshop-hotel-feedback-form/66a9843525e9fa8046d709b7.md b/curriculum/challenges/english/25-front-end-development/workshop-hotel-feedback-form/66a9843525e9fa8046d709b7.md index 49dc87cbfb1..2a00e890a98 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-hotel-feedback-form/66a9843525e9fa8046d709b7.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-hotel-feedback-form/66a9843525e9fa8046d709b7.md @@ -9,7 +9,7 @@ dashedName: step-36 For the last step in the hotel feedback form workshop, you will need to add a submit button to the form. -Remember that you learned how to work submit buttons in the previous lecture videos. +Remember that you learned how to work submit buttons in the previous lectures. Add a `button` element with the `type` attribute set to `"submit"` and the text content set to `Submit`. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-library-manager/67116c175a77cb64c5c10d49.md b/curriculum/challenges/english/25-front-end-development/workshop-library-manager/67116c175a77cb64c5c10d49.md index 4168001c5b5..74820fd09d5 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-library-manager/67116c175a77cb64c5c10d49.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-library-manager/67116c175a77cb64c5c10d49.md @@ -7,7 +7,7 @@ dashedName: step-1 # --description-- -In the previous lecture videos, you learned how to work with higher order functions like `map`, `filter` and `reduce`. +In the previous lectures, you learned how to work with higher order functions like `map`, `filter` and `reduce`. In this workshop, you will build a library manager app that will give you an opportunity to practice working with different higher order functions. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-magazine/6144ee790af79815ad15a832.md b/curriculum/challenges/english/25-front-end-development/workshop-magazine/6144ee790af79815ad15a832.md index b8564a3e0ab..4528ba4cfa2 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-magazine/6144ee790af79815ad15a832.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-magazine/6144ee790af79815ad15a832.md @@ -7,7 +7,7 @@ dashedName: step-31 # --description-- -Now you are ready to start putting together the grid layout. In the previous lecture videos you learned that CSS Grid offers a two-dimensional grid-based layout, allowing you to center items horizontally and vertically while still retaining control to do things like overlap elements. +Now you are ready to start putting together the grid layout. In the previous lectures you learned that CSS Grid offers a two-dimensional grid-based layout, allowing you to center items horizontally and vertically while still retaining control to do things like overlap elements. Begin by creating a `main` selector and giving it a `display` property set to `grid`. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-mathbot/66eb3ec3b07dfe8f898646c0.md b/curriculum/challenges/english/25-front-end-development/workshop-mathbot/66eb3ec3b07dfe8f898646c0.md index d9cb1dc8e5b..2663abec53b 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-mathbot/66eb3ec3b07dfe8f898646c0.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-mathbot/66eb3ec3b07dfe8f898646c0.md @@ -7,7 +7,7 @@ dashedName: step-7 # --description-- -As you learned in the previous lecture videos, the `Math.floor()` method rounds the value down to the nearest whole integer. +As you learned in the previous lectures, the `Math.floor()` method rounds the value down to the nearest whole integer. ```js const price = 10.99; diff --git a/curriculum/challenges/english/25-front-end-development/workshop-mathbot/66eb488c0129e192542f0865.md b/curriculum/challenges/english/25-front-end-development/workshop-mathbot/66eb488c0129e192542f0865.md index 4092057fbe6..53d3a711242 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-mathbot/66eb488c0129e192542f0865.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-mathbot/66eb488c0129e192542f0865.md @@ -7,7 +7,7 @@ dashedName: step-9 # --description-- -In the previous lecture videos, you learned how to work with the `Math.ceil()` method like this: +In the previous lectures, you learned how to work with the `Math.ceil()` method like this: ```js const price = 10.01; diff --git a/curriculum/challenges/english/25-front-end-development/workshop-mathbot/66ecdcf7c8d9a6f49094ffde.md b/curriculum/challenges/english/25-front-end-development/workshop-mathbot/66ecdcf7c8d9a6f49094ffde.md index bc778f96e01..a97ff05c5c7 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-mathbot/66ecdcf7c8d9a6f49094ffde.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-mathbot/66ecdcf7c8d9a6f49094ffde.md @@ -7,7 +7,7 @@ dashedName: step-11 # --description-- -In the lecture videos, you learned that the `Math.round()` method rounds the value to the nearest whole integer. +In the lectures, you learned that the `Math.round()` method rounds the value to the nearest whole integer. Here are some examples: diff --git a/curriculum/challenges/english/25-front-end-development/workshop-mathbot/66ece147323c91f654bf8dd9.md b/curriculum/challenges/english/25-front-end-development/workshop-mathbot/66ece147323c91f654bf8dd9.md index 83aa40bb7d2..4e26986b8c6 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-mathbot/66ece147323c91f654bf8dd9.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-mathbot/66ece147323c91f654bf8dd9.md @@ -7,7 +7,7 @@ dashedName: step-13 # --description-- -In the previous lecture videos, you learned how to get the maximum and minimum values from a range of numbers like this: +In the previous lectures, you learned how to get the maximum and minimum values from a range of numbers like this: ```js Math.max(1, 2, 3, 4, 5); // 5 diff --git a/curriculum/challenges/english/25-front-end-development/workshop-music-player/6747299cbed5107c6a00d64c.md b/curriculum/challenges/english/25-front-end-development/workshop-music-player/6747299cbed5107c6a00d64c.md index d2ac453312d..351c7c2539b 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-music-player/6747299cbed5107c6a00d64c.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-music-player/6747299cbed5107c6a00d64c.md @@ -9,7 +9,7 @@ dashedName: step-7 The rest of the songs has been added to the `allSongs` array for you. -In the previous lecture video, you learned about the Web Audio API and how to use it to play songs. All modern browsers support the Web Audio API, which lets you generate and process audio in web applications. +In the previous lecture, you learned about the Web Audio API and how to use it to play songs. All modern browsers support the Web Audio API, which lets you generate and process audio in web applications. Create a variable named `audio` and set it equal to `new Audio()`. This will create a new HTML5 `audio` element. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60f1922fcbd2410527b3bd89.md b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60f1922fcbd2410527b3bd89.md index b3f4bcb0c06..05e29b2efaf 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60f1922fcbd2410527b3bd89.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60f1922fcbd2410527b3bd89.md @@ -7,7 +7,7 @@ dashedName: step-3 # --description-- -In the previous lecture videos, you learned how to work with viewport units. +In the previous lectures, you learned how to work with viewport units. Remember that the `vh` unit stands for viewport height, and is equal to 1% of the `height` of the viewport. This makes it relative to the viewport height. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60f803d5241e6a0433a523a1.md b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60f803d5241e6a0433a523a1.md index f6de61ab09e..263558810a7 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60f803d5241e6a0433a523a1.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60f803d5241e6a0433a523a1.md @@ -7,7 +7,7 @@ dashedName: step-11 # --description-- -In the previous lecture videos, you learned how to work with `rem` units. Remember that `rem` unit stands for root `em`, and is relative to the font size of the `html` element. +In the previous lectures, you learned how to work with `rem` units. Remember that `rem` unit stands for root `em`, and is relative to the font size of the `html` element. As `label` elements are inline by default, they are all displayed side by side on the same line, making their text hard to read. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/62b30924c5e4ef0daba23b5e.md b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/62b30924c5e4ef0daba23b5e.md index 3c1b50860a8..727c5edbd53 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/62b30924c5e4ef0daba23b5e.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/62b30924c5e4ef0daba23b5e.md @@ -9,7 +9,7 @@ dashedName: step-43 The border of the last `fieldset` element looks a little out of place. -In the previous lecture videos, you learned how to work with the `last-of-type` CSS pseudo-class like this: +In the previous lectures, you learned how to work with the `last-of-type` CSS pseudo-class like this: ```css p:last-of-type { } diff --git a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/63541ef4f96cd82e8e6c788a.md b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/63541ef4f96cd82e8e6c788a.md index a4686762b87..f41c55c7d98 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/63541ef4f96cd82e8e6c788a.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/63541ef4f96cd82e8e6c788a.md @@ -11,7 +11,7 @@ The `method` attribute specifies how to send form-data to the URL specified in t Set the `method` attribute to send your form data via a `POST` request. -**NOTE**: You will learn more about the `GET` and `POST` methods in the upcoming lecture videos and workshops. +**NOTE**: You will learn more about the `GET` and `POST` methods in the upcoming lectures and workshops. # --hints-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-reusable-mega-navbar/67457ff2dc531fbed928a0f0.md b/curriculum/challenges/english/25-front-end-development/workshop-reusable-mega-navbar/67457ff2dc531fbed928a0f0.md index f8bb25605bf..036d11a3bb4 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-reusable-mega-navbar/67457ff2dc531fbed928a0f0.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-reusable-mega-navbar/67457ff2dc531fbed928a0f0.md @@ -9,7 +9,7 @@ dashedName: step-2 Now it is time to build out the `Navbar` component using JSX. -You learned in the previous lecture videos that JSX is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript, making it easier to create and manage React components. +You learned in the previous lectures that JSX is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript, making it easier to create and manage React components. Here is a remainder of what JSX looks like: diff --git a/curriculum/challenges/english/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md b/curriculum/challenges/english/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md index ba703699099..734bc5e8c39 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md @@ -7,7 +7,7 @@ dashedName: step-2 # --description-- -In the previous lecture videos about the CSS box model, you learned that every HTML element is treated as a box with four areas. +In the previous lectures about the CSS box model, you learned that every HTML element is treated as a box with four areas. Imagine you receive a box from your favorite online retailer — the content is the item in the box, or in your case, a header, paragraph, or image element. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c64095f61166ede6e39a84.md b/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c64095f61166ede6e39a84.md index 7d15095567a..3b554808157 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c64095f61166ede6e39a84.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c64095f61166ede6e39a84.md @@ -9,7 +9,7 @@ dashedName: step-2 For this shopping list, you will use an array to represent the items you need to buy. -In the previous lecture videos, you learned how to create arrays like this: +In the previous lectures, you learned how to create arrays like this: ```js const fruits = ['apple', 'banana', 'orange']; diff --git a/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c644c08ebcd2ef90c750bd.md b/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c644c08ebcd2ef90c750bd.md index 244b293d4fe..05d07d2fd0a 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c644c08ebcd2ef90c750bd.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c644c08ebcd2ef90c750bd.md @@ -7,7 +7,7 @@ dashedName: step-4 # --description-- -In the previous lecture videos, you learned how to add items to the end of an array using the `push` method like this: +In the previous lectures, you learned how to add items to the end of an array using the `push` method like this: ```js fruits.push('pear'); diff --git a/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c726c34ecf1e238aa9d7d5.md b/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c726c34ecf1e238aa9d7d5.md index f3d4903dd5f..dee6347e00f 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c726c34ecf1e238aa9d7d5.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c726c34ecf1e238aa9d7d5.md @@ -7,7 +7,7 @@ dashedName: step-9 # --description-- -In the lecture videos, you learned how to add elements to the beginning of an array using the `unshift()` method. +In the lectures, you learned how to add elements to the beginning of an array using the `unshift()` method. Here is a reminder of how to use the `unshift()` method: diff --git a/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c730ee6ae076281721d0b9.md b/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c730ee6ae076281721d0b9.md index a3a2c2ff83a..c84b3920f77 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c730ee6ae076281721d0b9.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c730ee6ae076281721d0b9.md @@ -7,7 +7,7 @@ dashedName: step-14 # --description-- -In the previous lecture videos, you learned how to remove items from the end of an array using the `pop` method. +In the previous lectures, you learned how to remove items from the end of an array using the `pop` method. Here is reminder of how to use the `pop` method: diff --git a/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c74079c30b1c2d166cb9a4.md b/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c74079c30b1c2d166cb9a4.md index 75ad89b739b..46fb9a7e5b9 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c74079c30b1c2d166cb9a4.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c74079c30b1c2d166cb9a4.md @@ -7,7 +7,7 @@ dashedName: step-18 # --description-- -In the lecture videos, you learned how to remove an item from the beginning of the array using the `shift` method. +In the lectures, you learned how to remove an item from the beginning of the array using the `shift` method. Here is a reminder of how to use the `shift` method: diff --git a/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c742d045c9fc2e09fa64b1.md b/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c742d045c9fc2e09fa64b1.md index e5923f64844..c15c5e09348 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c742d045c9fc2e09fa64b1.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c742d045c9fc2e09fa64b1.md @@ -9,7 +9,7 @@ dashedName: step-19 The last change to make to the grocery list is to update the first item in the list. -In the previous lecture videos, you learned how to update an item using bracket notation and the index of the item you want to update. +In the previous lectures, you learned how to update an item using bracket notation and the index of the item you want to update. Here is a reminder of how to update an item in an array: diff --git a/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/680900675ae3d54ee19590cb.md b/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/680900675ae3d54ee19590cb.md index e29fadf283c..4acbe024435 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/680900675ae3d54ee19590cb.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/680900675ae3d54ee19590cb.md @@ -7,7 +7,7 @@ dashedName: step-11 # --description-- -In a prior lecture video, you learned how to render a list of options using the `map()` method like this: +In a prior lecture, you learned how to render a list of options using the `map()` method like this: ```jsx function FruitList() { diff --git a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b59829dba144ff1351220f.md b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b59829dba144ff1351220f.md index dcc8d4a31e2..27850347209 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b59829dba144ff1351220f.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b59829dba144ff1351220f.md @@ -9,7 +9,7 @@ dashedName: step-3 Now it is time to create a greeting using the `botName` variable. -In the previous lecture videos, you learned how to concatenate strings using template literals like this: +In the previous lectures, you learned how to concatenate strings using template literals like this: ```js const name = "John"; diff --git a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b59be6ab830800c4df9146.md b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b59be6ab830800c4df9146.md index 7e09d9eba71..010b1c229ac 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b59be6ab830800c4df9146.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b59be6ab830800c4df9146.md @@ -9,7 +9,7 @@ dashedName: step-5 Now, it's time to use the variables you created in the previous step. -In the lecture videos, you learned how to work with template literals like this: +In the lectures, you learned how to work with template literals like this: ```js const name = "John"; diff --git a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6efddeca35833cd6f0b03.md b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6efddeca35833cd6f0b03.md index 9993a6ca9b2..d00dec352d2 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6efddeca35833cd6f0b03.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6efddeca35833cd6f0b03.md @@ -7,7 +7,7 @@ dashedName: step-10 # --description-- -In the previous lecture videos, you learned how to access characters in a string like this: +In the previous lectures, you learned how to access characters in a string like this: ```js const firstName = "Jessica"; diff --git a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6fdb76441c738719039fa.md b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6fdb76441c738719039fa.md index aa2a1d690df..39e2fa00077 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6fdb76441c738719039fa.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6fdb76441c738719039fa.md @@ -7,7 +7,7 @@ dashedName: step-13 # --description-- -In the lecture videos, you learned how to access the last character in a string like this: +In the lectures, you learned how to access the last character in a string like this: ```js const firstName = "Jessica"; diff --git a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b70b8a611cbf3bcc5c6c5f.md b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b70b8a611cbf3bcc5c6c5f.md index 02624391eb2..5786b94b3d1 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b70b8a611cbf3bcc5c6c5f.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b70b8a611cbf3bcc5c6c5f.md @@ -7,7 +7,7 @@ dashedName: step-16 # --description-- -In the previous lecture videos, you learned how to work with the `indexOf` method like this: +In the previous lectures, you learned how to work with the `indexOf` method like this: ```js const sentence = "I love to learn."; diff --git a/curriculum/challenges/english/25-front-end-development/workshop-toggle-text-app/67cd33334277c108f5e0cb21.md b/curriculum/challenges/english/25-front-end-development/workshop-toggle-text-app/67cd33334277c108f5e0cb21.md index be9c21d15c4..e80ca2f5600 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-toggle-text-app/67cd33334277c108f5e0cb21.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-toggle-text-app/67cd33334277c108f5e0cb21.md @@ -8,7 +8,7 @@ demoType: onLoad # --description-- -In the previous lecture videos, you learned about state and how to work with the `useState` hook. For this workshop, you will create an app that will hide/show a piece of text on the screen when a user clicks on a button. +In the previous lectures, you learned about state and how to work with the `useState` hook. For this workshop, you will create an app that will hide/show a piece of text on the screen when a user clicks on a button. All of the boilerplate code, including the CSS, has been provided for you. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-toggle-text-app/67cd4cf8b5fe391b324ad11f.md b/curriculum/challenges/english/25-front-end-development/workshop-toggle-text-app/67cd4cf8b5fe391b324ad11f.md index 794f84e06f9..6b06d25ac62 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-toggle-text-app/67cd4cf8b5fe391b324ad11f.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-toggle-text-app/67cd4cf8b5fe391b324ad11f.md @@ -9,7 +9,7 @@ dashedName: step-5 Now that you have created the `isVisible` state variable, it is time to start using it. -In prior lecture videos, you learned about inline conditional rendering which allows you to show different content based on a certain condition. It is a common pattern to use the logical AND (`&&`) operator to conditionally render a piece of text like this: +In prior lectures, you learned about inline conditional rendering which allows you to show different content based on a certain condition. It is a common pattern to use the logical AND (`&&`) operator to conditionally render a piece of text like this: ```jsx function Notification({ message }) { diff --git a/curriculum/challenges/english/25-front-end-development/workshop-toggle-text-app/67cd5bace629fa219a70aa6d.md b/curriculum/challenges/english/25-front-end-development/workshop-toggle-text-app/67cd5bace629fa219a70aa6d.md index 82605904e56..dbb97a08d1d 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-toggle-text-app/67cd5bace629fa219a70aa6d.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-toggle-text-app/67cd5bace629fa219a70aa6d.md @@ -9,7 +9,7 @@ dashedName: step-12 Now it is time to use your `handleToggleVisibility` function. -In prior lecture videos, you learned about React's Synthetic Event System and how to work with attributes like `onClick` and `onSubmit`. +In prior lectures, you learned about React's Synthetic Event System and how to work with attributes like `onClick` and `onSubmit`. Remember that you can pass a function reference to an `onClick` attribute like this: