mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-23 22:00:38 -04:00
chore(curriculum): fill in some of remaining missing lecture questions (#57334)
This commit is contained in:
Tom
@@ -14,20 +14,108 @@ Watch the lecture video and answer the questions below.
|
||||
|
||||
## --text--
|
||||
|
||||
What Are Components in React, and How Do They Work? question?
|
||||
What is the primary purpose of components in React?
|
||||
|
||||
## --answers--
|
||||
|
||||
Answer 1
|
||||
To handle server-side logic.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how components help in structuring a React application.
|
||||
|
||||
---
|
||||
|
||||
Answer 2
|
||||
To manage database connections.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how components help in structuring a React application.
|
||||
|
||||
---
|
||||
|
||||
Answer 3
|
||||
To create reusable UI elements.
|
||||
|
||||
---
|
||||
|
||||
To optimize JavaScript performance.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how components help in structuring a React application.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
3
|
||||
|
||||
## --text--
|
||||
|
||||
In the context of React components, what is JSX?
|
||||
|
||||
## --answers--
|
||||
|
||||
A new programming language.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how JSX allows you to write UI code in React components.
|
||||
|
||||
---
|
||||
|
||||
A database query language.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how JSX allows you to write UI code in React components.
|
||||
|
||||
---
|
||||
|
||||
A syntax extension for JavaScript that looks similar to HTML.
|
||||
|
||||
---
|
||||
|
||||
A CSS framework.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how JSX allows you to write UI code in React components.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
## --text--
|
||||
|
||||
How would you render a `Message` component in React?
|
||||
|
||||
## --answers--
|
||||
|
||||
`</ Message>`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the part of the video where it explains how components are rendered.
|
||||
|
||||
---
|
||||
|
||||
`<Message></Message>`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the part of the video where it explains how components are rendered.
|
||||
|
||||
---
|
||||
|
||||
`Message`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the part of the video where it explains how components are rendered.
|
||||
|
||||
---
|
||||
|
||||
`<Message />`
|
||||
|
||||
## --video-solution--
|
||||
|
||||
4
|
||||
|
||||
@@ -14,20 +14,108 @@ Watch the lecture video and answer the questions below.
|
||||
|
||||
## --text--
|
||||
|
||||
What Are Meta Frameworks, and Why Are They Commonly Used in the Industry? question?
|
||||
What is a key feature of meta frameworks like Next.js?
|
||||
|
||||
## --answers--
|
||||
|
||||
Answer 1
|
||||
They replace the need for JavaScript libraries like React.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the main benefits that meta frameworks offer over using a library like React on its own.
|
||||
|
||||
---
|
||||
|
||||
Answer 2
|
||||
They provide server-side rendering capabilities.
|
||||
|
||||
---
|
||||
|
||||
Answer 3
|
||||
They only work with NoSQL databases.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the main benefits that meta frameworks offer over using a library like React on its own.
|
||||
|
||||
---
|
||||
|
||||
They are primarily used for mobile app development.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the main benefits that meta frameworks offer over using a library like React on its own.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
In Next.js, what is the purpose of the `getServerSideProps` function?
|
||||
|
||||
## --answers--
|
||||
|
||||
To define client-side routing.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how Next.js handles data fetching for server-side rendering.
|
||||
|
||||
---
|
||||
|
||||
To fetch data on the server before rendering a page.
|
||||
|
||||
---
|
||||
|
||||
To create a new React component.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how Next.js handles data fetching for server-side rendering.
|
||||
|
||||
---
|
||||
|
||||
To configure the project's build settings.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how Next.js handles data fetching for server-side rendering.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
Why are meta frameworks commonly used in the industry?
|
||||
|
||||
## --answers--
|
||||
|
||||
They are easier to learn than basic HTML and CSS
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the benefits that meta frameworks offer to development teams and businesses.
|
||||
|
||||
---
|
||||
|
||||
They only work with specific databases
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the benefits that meta frameworks offer to development teams and businesses.
|
||||
|
||||
---
|
||||
|
||||
They provide standardized project structures and built-in optimizations
|
||||
|
||||
---
|
||||
|
||||
They are required for all modern web applications
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the benefits that meta frameworks offer to development teams and businesses.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
@@ -14,20 +14,108 @@ Watch the lecture video and answer the questions below.
|
||||
|
||||
## --text--
|
||||
|
||||
What Are Some Tools to Use to Set Up Projects Using a Library or Framework? question?
|
||||
Which of the following is NOT a primary purpose of project setup tools like Vite or Create React App?
|
||||
|
||||
## --answers--
|
||||
|
||||
Answer 1
|
||||
Automating the creation of initial project structure.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what these tools do automatically versus what the developer typically needs to do themselves.
|
||||
|
||||
---
|
||||
|
||||
Answer 2
|
||||
Setting up necessary configurations.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what these tools do automatically versus what the developer typically needs to do themselves.
|
||||
|
||||
---
|
||||
|
||||
Answer 3
|
||||
Writing the main application logic.
|
||||
|
||||
---
|
||||
|
||||
Installing required dependencies.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what these tools do automatically versus what the developer typically needs to do themselves.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
3
|
||||
|
||||
## --text--
|
||||
|
||||
What command would you use to create a new React project using Vite?
|
||||
|
||||
## --answers--
|
||||
|
||||
`npm init vite my-react-app`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Recall the specific command mentioned in the lecture for creating a React project with Vite.
|
||||
|
||||
---
|
||||
|
||||
`npm create vite@latest my-react-app -- --template react`
|
||||
|
||||
---
|
||||
|
||||
`npx create-react-app my-react-app`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Recall the specific command mentioned in the lecture for creating a React project with Vite.
|
||||
|
||||
---
|
||||
|
||||
`vite new my-react-app --react`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Recall the specific command mentioned in the lecture for creating a React project with Vite.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
Which tool provides an interactive project scaffolding experience for Vue.js projects?
|
||||
|
||||
## --answers--
|
||||
|
||||
Create React App
|
||||
|
||||
### --feedback--
|
||||
|
||||
Remember which tool was mentioned specifically for Vue.js projects that asks questions about your project setup.
|
||||
|
||||
---
|
||||
|
||||
Angular CLI
|
||||
|
||||
### --feedback--
|
||||
|
||||
Remember which tool was mentioned specifically for Vue.js projects that asks questions about your project setup.
|
||||
|
||||
---
|
||||
|
||||
Vue CLI
|
||||
|
||||
---
|
||||
|
||||
Yeoman
|
||||
|
||||
### --feedback--
|
||||
|
||||
Remember which tool was mentioned specifically for Vue.js projects that asks questions about your project setup.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
@@ -14,20 +14,108 @@ Watch the lecture video and answer the questions below.
|
||||
|
||||
## --text--
|
||||
|
||||
What Is Dependency Management, and How Does It Work with Libraries Like React? question?
|
||||
What is the primary purpose of the `package.json` file in a React project?
|
||||
|
||||
## --answers--
|
||||
|
||||
Answer 1
|
||||
To store the project's source code.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what information the package manager needs to install the correct packages for your project.
|
||||
|
||||
---
|
||||
|
||||
Answer 2
|
||||
To list the project's dependencies and their versions.
|
||||
|
||||
---
|
||||
|
||||
Answer 3
|
||||
To configure the React framework.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what information the package manager needs to install the correct packages for your project.
|
||||
|
||||
---
|
||||
|
||||
To store the compiled JavaScript code.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what information the package manager needs to install the correct packages for your project.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
Which command would you use to add a new dependency to a React project using npm?
|
||||
|
||||
## --answers--
|
||||
|
||||
`npm add react-router-dom`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider the most common npm command used to add new packages to a project.
|
||||
|
||||
---
|
||||
|
||||
`npm install react-router-dom`
|
||||
|
||||
---
|
||||
|
||||
`npm update react-router-dom`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider the most common npm command used to add new packages to a project.
|
||||
|
||||
---
|
||||
|
||||
`npm new react-router-dom`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider the most common npm command used to add new packages to a project.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
What is the purpose of the caret (`^`) symbol in a dependency version in `package.json`?
|
||||
|
||||
## --answers--
|
||||
|
||||
It allows only patch updates.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how semantic versioning works and how package managers use it to manage updates.
|
||||
|
||||
---
|
||||
|
||||
It allows minor and patch updates, but not major version changes.
|
||||
|
||||
---
|
||||
|
||||
It always installs the latest version, regardless of compatibility.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how semantic versioning works and how package managers use it to manage updates.
|
||||
|
||||
---
|
||||
|
||||
It prevents any updates to the package.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how semantic versioning works and how package managers use it to manage updates.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
@@ -14,20 +14,108 @@ Watch the lecture video and answer the questions below.
|
||||
|
||||
## --text--
|
||||
|
||||
What Is Async/Await, and How Does It Work? question?
|
||||
What is the primary purpose of the `async` keyword in JavaScript?
|
||||
|
||||
## --answers--
|
||||
|
||||
Answer 1
|
||||
To make a function run faster.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what `async` does to the function's return value.
|
||||
|
||||
---
|
||||
|
||||
Answer 2
|
||||
To indicate that a function will always return a Promise.
|
||||
|
||||
---
|
||||
|
||||
Answer 3
|
||||
To create a new thread for the function to run on.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what `async` does to the function's return value.
|
||||
|
||||
---
|
||||
|
||||
To prevent a function from being called asynchronously.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what `async` does to the function's return value.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
Where can the `await` keyword be used in JavaScript?
|
||||
|
||||
## --answers--
|
||||
|
||||
Anywhere in the code.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider the restrictions on where `await` can be placed.
|
||||
|
||||
---
|
||||
|
||||
Only at the top level of a module.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider the restrictions on where `await` can be placed.
|
||||
|
||||
---
|
||||
|
||||
Only inside `async` functions.
|
||||
|
||||
---
|
||||
|
||||
Only in `try...catch` blocks.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider the restrictions on where `await` can be placed.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
## --text--
|
||||
|
||||
What happens when an error occurs in an awaited Promise?
|
||||
|
||||
## --answers--
|
||||
|
||||
The program crashes.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how error handling works with `async`/`await`.
|
||||
|
||||
---
|
||||
|
||||
The error is automatically logged to the console.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how error handling works with `async`/`await`.
|
||||
|
||||
---
|
||||
|
||||
Nothing, errors in Promises are ignored.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how error handling works with `async`/`await`.
|
||||
|
||||
---
|
||||
|
||||
The error can be caught using a `try...catch` block.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
4
|
||||
|
||||
@@ -14,20 +14,108 @@ Watch the lecture video and answer the questions below.
|
||||
|
||||
## --text--
|
||||
|
||||
How Does the JavaScript Engine Work, and What Is a JavaScript Runtime? question?
|
||||
What is the primary function of a JavaScript engine?
|
||||
|
||||
## --answers--
|
||||
|
||||
Answer 1
|
||||
To provide a user interface for writing code.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what needs to happen to your code for it to actually run.
|
||||
|
||||
---
|
||||
|
||||
Answer 2
|
||||
To connect to the internet.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what needs to happen to your code for it to actually run.
|
||||
|
||||
---
|
||||
|
||||
Answer 3
|
||||
To read, interpret, and execute JavaScript code.
|
||||
|
||||
---
|
||||
|
||||
To store data in a database.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what needs to happen to your code for it to actually run.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
3
|
||||
|
||||
## --text--
|
||||
|
||||
Which of the following is NOT typically considered part of the JavaScript runtime?
|
||||
|
||||
## --answers--
|
||||
|
||||
The JavaScript engine.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider what you provide versus what the environment provides.
|
||||
|
||||
---
|
||||
|
||||
Web APIs (in a browser environment).
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider what you provide versus what the environment provides.
|
||||
|
||||
---
|
||||
|
||||
The event loop.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider what you provide versus what the environment provides.
|
||||
|
||||
---
|
||||
|
||||
The JavaScript code you write.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
4
|
||||
|
||||
## --text--
|
||||
|
||||
What is the purpose of the event loop in JavaScript?
|
||||
|
||||
## --answers--
|
||||
|
||||
To create visual loops in web animations.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how JavaScript handles tasks that might take some time to complete.
|
||||
|
||||
---
|
||||
|
||||
To repeatedly execute a block of code.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how JavaScript handles tasks that might take some time to complete.
|
||||
|
||||
---
|
||||
|
||||
To manage asynchronous operations and keep the program responsive.
|
||||
|
||||
---
|
||||
|
||||
To loop through arrays efficiently.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how JavaScript handles tasks that might take some time to complete.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
@@ -14,20 +14,108 @@ Watch the lecture video and answer the questions below.
|
||||
|
||||
## --text--
|
||||
|
||||
What Is the Geolocation API, and How Does the getCurrentPosition Work? question?
|
||||
What is the primary purpose of the Geolocation API's `getCurrentPosition` method?
|
||||
|
||||
## --answers--
|
||||
|
||||
Answer 1
|
||||
To set the user's current location.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what information this method provides to the web application.
|
||||
|
||||
---
|
||||
|
||||
Answer 2
|
||||
To retrieve the user's current geographic location.
|
||||
|
||||
---
|
||||
|
||||
Answer 3
|
||||
To calculate the distance between two points.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what information this method provides to the web application.
|
||||
|
||||
---
|
||||
|
||||
To display a map on the webpage.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what information this method provides to the web application.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
What object is used to access the Geolocation API in JavaScript?
|
||||
|
||||
## --answers--
|
||||
|
||||
`window.location`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about which global object provides access to browser-specific information.
|
||||
|
||||
---
|
||||
|
||||
`document.geolocation`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about which global object provides access to browser-specific information.
|
||||
|
||||
---
|
||||
|
||||
`navigator.geolocation`
|
||||
|
||||
---
|
||||
|
||||
`browser.location`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about which global object provides access to browser-specific information.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
## --text--
|
||||
|
||||
What is a key privacy consideration when using the Geolocation API?
|
||||
|
||||
## --answers--
|
||||
|
||||
Encrypting the location data.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what steps should be taken to respect user privacy.
|
||||
|
||||
---
|
||||
|
||||
Storing location data indefinitely.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what steps should be taken to respect user privacy.
|
||||
|
||||
---
|
||||
|
||||
Automatically accessing user location.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what steps should be taken to respect user privacy.
|
||||
|
||||
---
|
||||
|
||||
Obtaining user permission before accessing location.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
4
|
||||
|
||||
@@ -14,20 +14,108 @@ Watch the lecture video and answer the questions below.
|
||||
|
||||
## --text--
|
||||
|
||||
What Are the Different Types of Internet Service Providers? question?
|
||||
Which of the following is NOT a tier of Internet Service Provider (ISP)?
|
||||
|
||||
## --answers--
|
||||
|
||||
Answer 1
|
||||
Giant conglomerate companies with independent infrastructure.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Oversight organisations may regulate ISPs, but are rarely ISPs themselves.
|
||||
|
||||
---
|
||||
|
||||
Answer 2
|
||||
Country-wide providers that may rent access to larger networks.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Oversight organisations may regulate ISPs, but are rarely ISPs themselves.
|
||||
|
||||
---
|
||||
|
||||
Answer 3
|
||||
Small companies focusing on local markets.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Oversight organisations may regulate ISPs, but are rarely ISPs themselves.
|
||||
|
||||
---
|
||||
|
||||
International organisations overseeing global internet access.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
4
|
||||
|
||||
## --text--
|
||||
|
||||
Which type of internet connection uses glass or plastic fibres to transmit data via light?
|
||||
|
||||
## --answers--
|
||||
|
||||
Cable connection.
|
||||
|
||||
### --feedback--
|
||||
|
||||
This connection type is known for its very high speeds due to its unique transmission method.
|
||||
|
||||
---
|
||||
|
||||
DSL connection.
|
||||
|
||||
### --feedback--
|
||||
|
||||
This connection type is known for its very high speeds due to its unique transmission method.
|
||||
|
||||
---
|
||||
|
||||
Fibre optic connection.
|
||||
|
||||
---
|
||||
|
||||
Satellite connection.
|
||||
|
||||
### --feedback--
|
||||
|
||||
This connection type is known for its very high speeds due to its unique transmission method.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
## --text--
|
||||
|
||||
What is a characteristic of dial-up internet connections?
|
||||
|
||||
## --answers--
|
||||
|
||||
They use the same infrastructure as cable television.
|
||||
|
||||
### --feedback--
|
||||
|
||||
The video mentions that this older technology disables the use of the phone line for other purposes when connected to the internet.
|
||||
|
||||
---
|
||||
|
||||
They require exclusive use of the phone line when connected.
|
||||
|
||||
---
|
||||
|
||||
They use an array of satellites orbiting the earth.
|
||||
|
||||
### --feedback--
|
||||
|
||||
The video mentions that this older technology disables the use of the phone line for other purposes when connected to the internet.
|
||||
|
||||
---
|
||||
|
||||
They are the fastest type of internet connection available.
|
||||
|
||||
### --feedback--
|
||||
|
||||
The video mentions that this older technology disables the use of the phone line for other purposes when connected to the internet.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
@@ -14,35 +14,35 @@ Watch the lecture video and answer the questions below.
|
||||
|
||||
## --text--
|
||||
|
||||
What is the main purpose of the Cache API?
|
||||
What is the main purpose of the Cache API in web applications?
|
||||
|
||||
## --answers--
|
||||
|
||||
To store large files locally on a user's machine.
|
||||
To handle user authentication and sessions.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how you can access data when the network is unavailable.
|
||||
Think about what the Cache API does in terms of web performance, offline functionality, and caching network requests.
|
||||
|
||||
---
|
||||
|
||||
To store network requests and responses for offline access.
|
||||
To store and manage network requests and responses for offline access.
|
||||
|
||||
---
|
||||
|
||||
To encrypt sensitive user data.
|
||||
To enable push notifications and background sync.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how you can access data when the network is unavailable.
|
||||
Think about what the Cache API does in terms of web performance, offline functionality, and caching network requests.
|
||||
|
||||
---
|
||||
|
||||
To manage user authentication tokens.
|
||||
To create and manage service workers.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how you can access data when the network is unavailable.
|
||||
Think about what the Cache API does in terms of web performance, offline functionality, and caching network requests.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
@@ -50,72 +50,72 @@ Think about how you can access data when the network is unavailable.
|
||||
|
||||
## --text--
|
||||
|
||||
How can you retrieve a cached resource using the Cache API?
|
||||
Which of the following best describes the role of a service worker in a web application?
|
||||
|
||||
## --answers--
|
||||
|
||||
`caches.match()`
|
||||
|
||||
---
|
||||
|
||||
`document.cookie`
|
||||
A background script that handles UI rendering.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Which method checks if a cached response already exists?
|
||||
Consider what service workers do to intercept network requests and enable offline behavior in web apps.
|
||||
|
||||
---
|
||||
|
||||
`localStorage.getItem()`
|
||||
A tool for managing user authentication and sessions.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Which method checks if a cached response already exists?
|
||||
Consider what service workers do to intercept network requests and enable offline behavior in web apps.
|
||||
|
||||
---
|
||||
|
||||
`fetch()`
|
||||
A special JavaScript file that runs in the background, managing network requests and caching resources.
|
||||
|
||||
---
|
||||
|
||||
A library for enabling offline data synchronization with a server.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Which method checks if a cached response already exists?
|
||||
Consider what service workers do to intercept network requests and enable offline behavior in web apps.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
3
|
||||
|
||||
## --text--
|
||||
|
||||
Which of the following is not a method available in the Cache API?
|
||||
What is a network request in the context of a web application?
|
||||
|
||||
## --answers--
|
||||
|
||||
`cache.add()`
|
||||
A request made by a web browser to retrieve files from a local storage database.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about which of these functions doesn't fit the concept of working with cached assets.
|
||||
Think about what happens when a user visits a website and how resources like images, scripts, and data are loaded into the browser.
|
||||
|
||||
---
|
||||
|
||||
`cache.delete()`
|
||||
A request made by a web browser or application to a server to retrieve data or resources over the internet.
|
||||
|
||||
---
|
||||
|
||||
A request made by a web server to push updates to a user's device.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about which of these functions doesn't fit the concept of working with cached assets.
|
||||
Think about what happens when a user visits a website and how resources like images, scripts, and data are loaded into the browser.
|
||||
|
||||
---
|
||||
|
||||
`cache.match()`
|
||||
A request made by the server to verify the authentication of a user.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about which of these functions doesn't fit the concept of working with cached assets.
|
||||
|
||||
---
|
||||
|
||||
`cache.push()`
|
||||
Think about what happens when a user visits a website and how resources like images, scripts, and data are loaded into the browser.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
4
|
||||
2
|
||||
|
||||
@@ -14,20 +14,108 @@ Watch the lecture video and answer the questions below.
|
||||
|
||||
## --text--
|
||||
|
||||
What Are Some Negative Patterns Associated with Client-Side Storage? question?
|
||||
What is a potential negative use of cookies in web development?
|
||||
|
||||
## --answers--
|
||||
|
||||
Answer 1
|
||||
Remembering user login information.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about which option might raise privacy concerns.
|
||||
|
||||
---
|
||||
|
||||
Answer 2
|
||||
Tracking user behavior across multiple websites.
|
||||
|
||||
---
|
||||
|
||||
Answer 3
|
||||
Storing user preferences.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about which option might raise privacy concerns.
|
||||
|
||||
---
|
||||
|
||||
Improving website load times.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about which option might raise privacy concerns.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
What is browser fingerprinting?
|
||||
|
||||
## --answers--
|
||||
|
||||
A technique to improve browser security.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider which option relates to identifying individual users.
|
||||
|
||||
---
|
||||
|
||||
A method to create unique browser themes.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider which option relates to identifying individual users.
|
||||
|
||||
---
|
||||
|
||||
A way to identify users based on browser and system characteristics.
|
||||
|
||||
---
|
||||
|
||||
A process to optimize website performance for different browsers.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider which option relates to identifying individual users.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
## --text--
|
||||
|
||||
Why is storing sensitive information like passwords in Local Storage a security risk?
|
||||
|
||||
## --answers--
|
||||
|
||||
Local Storage has limited capacity.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the security features (or lack thereof) in Local Storage.
|
||||
|
||||
---
|
||||
|
||||
Data in Local Storage is not encrypted.
|
||||
|
||||
---
|
||||
|
||||
Local Storage is slower than cookies.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the security features (or lack thereof) in Local Storage.
|
||||
|
||||
---
|
||||
|
||||
Local Storage doesn't work in all browsers.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the security features (or lack thereof) in Local Storage.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
@@ -14,19 +14,107 @@ Watch the lecture video and answer the questions below.
|
||||
|
||||
## --text--
|
||||
|
||||
How Can You Use Cookies to Store Arbitrary Data, Normally Controlled by HTTP Headers? question?
|
||||
What is the purpose of the 'expires' parameter when setting a cookie?
|
||||
|
||||
## --answers--
|
||||
|
||||
Answer 1
|
||||
It specifies which pages can access the cookie.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what happens to a cookie after a certain time has passed.
|
||||
|
||||
---
|
||||
|
||||
Answer 2
|
||||
It sets the maximum size of the cookie.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what happens to a cookie after a certain time has passed.
|
||||
|
||||
---
|
||||
|
||||
Answer 3
|
||||
It tells the browser when to delete the cookie.
|
||||
|
||||
---
|
||||
|
||||
It encrypts the cookie data.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what happens to a cookie after a certain time has passed.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
## --text--
|
||||
|
||||
How can you store a complex data structure like an object in a cookie?
|
||||
|
||||
## --answers--
|
||||
|
||||
Objects can be directly stored in cookies.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider what format might be used to represent an object as a string.
|
||||
|
||||
---
|
||||
|
||||
By converting the object to a JSON string.
|
||||
|
||||
---
|
||||
|
||||
By using multiple cookies for each object property.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider what format might be used to represent an object as a string.
|
||||
|
||||
---
|
||||
|
||||
Complex data structures cannot be stored in cookies.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider what format might be used to represent an object as a string.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
What is a potential drawback of storing large amounts of data in cookies?
|
||||
|
||||
## --answers--
|
||||
|
||||
It can slow down your web application.
|
||||
|
||||
---
|
||||
|
||||
Cookies have unlimited storage capacity.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what happens when cookies are sent with every HTTP request.
|
||||
|
||||
---
|
||||
|
||||
It makes the website more secure.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what happens when cookies are sent with every HTTP request.
|
||||
|
||||
---
|
||||
|
||||
It improves server performance.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what happens when cookies are sent with every HTTP request.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
|
||||
@@ -14,20 +14,108 @@ Watch the lecture video and answer the questions below.
|
||||
|
||||
## --text--
|
||||
|
||||
What Is IndexedDB, and How Does It Work? question?
|
||||
What is a key characteristic of IndexedDB operations?
|
||||
|
||||
## --answers--
|
||||
|
||||
Answer 1
|
||||
They are always synchronous.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how IndexedDB operations interact with the main thread of a web application.
|
||||
|
||||
---
|
||||
|
||||
Answer 2
|
||||
They are always asynchronous.
|
||||
|
||||
---
|
||||
|
||||
Answer 3
|
||||
They only work with string data.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how IndexedDB operations interact with the main thread of a web application.
|
||||
|
||||
---
|
||||
|
||||
They require a constant internet connection.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how IndexedDB operations interact with the main thread of a web application.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
What is the primary advantage of using IndexedDB over localStorage?
|
||||
|
||||
## --answers--
|
||||
|
||||
IndexedDB is easier to use.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider the types of data each storage method can handle and how this affects their use cases.
|
||||
|
||||
---
|
||||
|
||||
IndexedDB supports storing complex JavaScript objects directly.
|
||||
|
||||
---
|
||||
|
||||
IndexedDB is synchronous.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider the types of data each storage method can handle and how this affects their use cases.
|
||||
|
||||
---
|
||||
|
||||
IndexedDB is supported in older browsers.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider the types of data each storage method can handle and how this affects their use cases.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
In IndexedDB, what is an object store most similar to in traditional relational databases?
|
||||
|
||||
## --answers--
|
||||
|
||||
A database.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how data is organized in IndexedDB compared to a traditional SQL database.
|
||||
|
||||
---
|
||||
|
||||
A table.
|
||||
|
||||
---
|
||||
|
||||
A row.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how data is organized in IndexedDB compared to a traditional SQL database.
|
||||
|
||||
---
|
||||
|
||||
A column.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how data is organized in IndexedDB compared to a traditional SQL database.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
@@ -14,20 +14,108 @@ Watch the lecture video and answer the questions below.
|
||||
|
||||
## --text--
|
||||
|
||||
What Are Cache and Service Workers, and How Do They Work? question?
|
||||
What is the primary purpose of a Service Worker in a Progressive Web App?
|
||||
|
||||
## --answers--
|
||||
|
||||
Answer 1
|
||||
To style web pages.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what allows PWAs to work offline.
|
||||
|
||||
---
|
||||
|
||||
Answer 2
|
||||
To handle server-side logic.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what allows PWAs to work offline.
|
||||
|
||||
---
|
||||
|
||||
Answer 3
|
||||
To intercept network requests and manage caching.
|
||||
|
||||
---
|
||||
|
||||
To create user interfaces.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what allows PWAs to work offline.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
3
|
||||
|
||||
## --text--
|
||||
|
||||
In the context of PWAs, what does caching primarily help with?
|
||||
|
||||
## --answers--
|
||||
|
||||
Increasing server capacity.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how caching affects the loading of web resources.
|
||||
|
||||
---
|
||||
|
||||
Improving application security.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how caching affects the loading of web resources.
|
||||
|
||||
---
|
||||
|
||||
Enhancing offline functionality and speed.
|
||||
|
||||
---
|
||||
|
||||
Creating backups of user data.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how caching affects the loading of web resources.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
## --text--
|
||||
|
||||
What is a key characteristic of Progressive Web Apps (PWAs)?
|
||||
|
||||
## --answers--
|
||||
|
||||
They can only be accessed through app stores.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how PWAs blend features of web and native apps.
|
||||
|
||||
---
|
||||
|
||||
They require constant internet connection.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how PWAs blend features of web and native apps.
|
||||
|
||||
---
|
||||
|
||||
They can work offline and be installed on home screens.
|
||||
|
||||
---
|
||||
|
||||
They are only available on mobile devices.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how PWAs blend features of web and native apps.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
@@ -14,20 +14,108 @@ Watch the lecture video and answer the questions below.
|
||||
|
||||
## --text--
|
||||
|
||||
What Is the minmax() Function and How Does It Work? question?
|
||||
Which function can you use to define the range for the size of a grid track?
|
||||
|
||||
## --answers--
|
||||
|
||||
Answer 1
|
||||
`clamp()`
|
||||
|
||||
### --feedback--
|
||||
|
||||
This function is for clamping a value between a minimum and maximum but doesn't define grid track ranges.
|
||||
|
||||
---
|
||||
|
||||
Answer 2
|
||||
`minmax()`
|
||||
|
||||
---
|
||||
|
||||
Answer 3
|
||||
`max-width()`
|
||||
|
||||
### --feedback--
|
||||
|
||||
This property sets the maximum width of an element, not a grid track range.
|
||||
|
||||
---
|
||||
|
||||
`calc()`
|
||||
|
||||
### --feedback--
|
||||
|
||||
This function performs calculations but doesn't define grid track ranges.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
Which of the following best describes how the grid track size behaves when using the `minmax()` function?
|
||||
|
||||
## --answers--
|
||||
|
||||
The grid track size is fixed between the minimum and maximum values.
|
||||
|
||||
### --feedback--
|
||||
|
||||
The grid track size adjusts dynamically, not fixed, between the given min and max values.
|
||||
|
||||
---
|
||||
|
||||
The grid track size adjusts dynamically between the min and max values based on content and container size.
|
||||
|
||||
---
|
||||
|
||||
The grid track size will always be set to the maximum value, regardless of content.
|
||||
|
||||
### --feedback--
|
||||
|
||||
The grid track size adjusts based on both the min and max values, not just the maximum.
|
||||
|
||||
---
|
||||
|
||||
The grid track size only responds to content, not container size.
|
||||
|
||||
### --feedback--
|
||||
|
||||
The size adjusts dynamically based on both content and container size.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
What does the min and max value in the `minmax()` function control?
|
||||
|
||||
## --answers--
|
||||
|
||||
The min value allows shrinking, and the max value sets a fixed size.
|
||||
|
||||
### --feedback--
|
||||
|
||||
The min value prevents shrinking below the specified size, and the max value limits growth.
|
||||
|
||||
---
|
||||
|
||||
The min value ensures the grid track won't shrink below a set size, and the max value limits how large it can grow.
|
||||
|
||||
---
|
||||
|
||||
The min value limits growth, and the max value determines the smallest size.
|
||||
|
||||
### --feedback--
|
||||
|
||||
The max value limits growth, and the min value ensures a minimum size, not the other way around.
|
||||
|
||||
---
|
||||
|
||||
Both values set fixed sizes for the grid track.
|
||||
|
||||
### --feedback--
|
||||
|
||||
The min and max values define a range, not fixed sizes.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
@@ -14,20 +14,108 @@ Watch the video lecture and answer the questions below.
|
||||
|
||||
## --text--
|
||||
|
||||
How Do You Render Lists in React? question?
|
||||
In React, how do you pass a prop named `message` with the string `Hello` to a child component?
|
||||
|
||||
## --answers--
|
||||
|
||||
Answer 1
|
||||
`<ChildComponent message="Hello" />`
|
||||
|
||||
---
|
||||
|
||||
Answer 2
|
||||
`<ChildComponent props.message="Hello" />`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how attributes are added to JSX elements.
|
||||
|
||||
---
|
||||
|
||||
Answer 3
|
||||
`<ChildComponent>message="Hello"</ChildComponent>`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how attributes are added to JSX elements.
|
||||
|
||||
---
|
||||
|
||||
`<ChildComponent {message: "Hello"} />`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how attributes are added to JSX elements.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
|
||||
## --text--
|
||||
|
||||
How would you access a prop named `userName` inside a functional child component?
|
||||
|
||||
## --answers--
|
||||
|
||||
`this.props.userName`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how props are passed to functional components in React.
|
||||
|
||||
---
|
||||
|
||||
`props.userName`
|
||||
|
||||
---
|
||||
|
||||
`this.userName`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how props are passed to functional components in React.
|
||||
|
||||
---
|
||||
|
||||
`userName`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how props are passed to functional components in React.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
What is the correct way to pass all properties of an object as individual props to a child component?
|
||||
|
||||
## --answers--
|
||||
|
||||
`<ChildComponent props={objectName} />`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Remember the special syntax used to spread object properties as individual props.
|
||||
|
||||
---
|
||||
|
||||
`<ChildComponent {...objectName} />`
|
||||
|
||||
---
|
||||
|
||||
`<ChildComponent objectName />`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Remember the special syntax used to spread object properties as individual props.
|
||||
|
||||
---
|
||||
|
||||
`<ChildComponent>{objectName}</ChildComponent>`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Remember the special syntax used to spread object properties as individual props.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
@@ -14,20 +14,124 @@ Watch the lecture video and answer the questions below.
|
||||
|
||||
## --text--
|
||||
|
||||
How Does Conditional Rendering Work in React Components? question?
|
||||
Which of the following is NOT a common method for conditional rendering in React?
|
||||
|
||||
## --answers--
|
||||
|
||||
Answer 1
|
||||
Using `if` statements.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the methods discussed in the lecture for handling conditional rendering in React.
|
||||
|
||||
---
|
||||
|
||||
Answer 2
|
||||
Using the ternary operator.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the methods discussed in the lecture for handling conditional rendering in React.
|
||||
|
||||
---
|
||||
|
||||
Answer 3
|
||||
Using the logical AND (`&&`) operator
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the methods discussed in the lecture for handling conditional rendering in React.
|
||||
|
||||
---
|
||||
|
||||
Using the `switch` statement.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
4
|
||||
|
||||
## --text--
|
||||
|
||||
What will be rendered by the following code if `message` is an empty string?
|
||||
|
||||
```js
|
||||
function Alert({ message }) {
|
||||
return (
|
||||
<div>
|
||||
{message && <p>{message}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
`<div><p></p></div>`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how the logical AND (`&&`) operator works with falsy values in JSX.
|
||||
|
||||
---
|
||||
|
||||
`<div></div>`
|
||||
|
||||
---
|
||||
|
||||
`<div>false</div>`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how the logical AND (`&&`) operator works with falsy values in JSX.
|
||||
|
||||
---
|
||||
|
||||
This will throw an error.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how the logical AND (`&&`) operator works with falsy values in JSX.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
In the following code, what type of conditional rendering is being used?
|
||||
|
||||
```js
|
||||
function Greeting({ name }) {
|
||||
return <h1>{name ? `Hello, ${name}!` : 'Hello, Guest!'}</h1>;
|
||||
}
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
`if` statement.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Look at the syntax used within the JSX to conditionally render different content.
|
||||
|
||||
---
|
||||
|
||||
`switch` statement.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Look at the syntax used within the JSX to conditionally render different content.
|
||||
|
||||
---
|
||||
|
||||
Ternary operator.
|
||||
|
||||
---
|
||||
|
||||
Logical AND (`&&`) operator.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Look at the syntax used within the JSX to conditionally render different content.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
Reference in New Issue
Block a user