mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-02-27 11:04:01 -05:00
chore(curriculum): remove remaining lecture video references (#61640)
Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>
This commit is contained in:
Huyen Nguyen
@@ -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--
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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:
|
||||
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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--
|
||||
|
||||
|
||||
@@ -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--
|
||||
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
|
||||
@@ -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--
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
|
||||
@@ -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--
|
||||
|
||||
@@ -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--
|
||||
|
||||
@@ -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--
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
|
||||
@@ -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?
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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<string>`. 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:
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
@@ -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--
|
||||
|
||||
|
||||
@@ -121,7 +121,7 @@ Active Recall
|
||||
|
||||
---
|
||||
|
||||
Watching Tutorials Only
|
||||
Reading Lectures Only
|
||||
|
||||
### --feedback--
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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--
|
||||
|
||||
|
||||
@@ -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--
|
||||
|
||||
|
||||
@@ -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`:
|
||||
|
||||
|
||||
@@ -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
|
||||
<p tabindex="-1">Sorry, there was an error with your submission.</p>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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:
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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:
|
||||
|
||||
|
||||
@@ -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:
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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--
|
||||
|
||||
|
||||
@@ -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 <dfn>logical NOT</dfn> operator (`!`) to check if the value itself is falsy. For example:
|
||||
|
||||
|
||||
@@ -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`.
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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:
|
||||
|
||||
|
||||
@@ -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:
|
||||
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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
|
||||
<form method="value-goes-here" action="url-goes-here">
|
||||
|
||||
@@ -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
|
||||
<label for="name">Name:</label>
|
||||
|
||||
@@ -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
|
||||
<input type="text">
|
||||
|
||||
@@ -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
|
||||
<input type="text" placeholder="Ex. John Doe" required>
|
||||
|
||||
@@ -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`.
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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`.
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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:
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 <dfn>Web Audio API</dfn> 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 <dfn>Web Audio API</dfn> 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.
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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 { }
|
||||
|
||||
@@ -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--
|
||||
|
||||
|
||||
@@ -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:
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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'];
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -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:
|
||||
|
||||
|
||||
@@ -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:
|
||||
|
||||
|
||||
@@ -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:
|
||||
|
||||
|
||||
@@ -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:
|
||||
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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.";
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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 }) {
|
||||
|
||||
@@ -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:
|
||||
|
||||
|
||||
Reference in New Issue
Block a user