mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
fix(curriculum): remove videos from audio-video, image-svg, and iframe lectures (#61528)
This commit is contained in:
Alex Goldsmith
+1
-8
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 67168278ac6df6a799555db5
|
||||
videoId: AYp1sMo4TyQ
|
||||
title: What Are the Roles of the HTML Audio and Video Elements, and How Do They Work?
|
||||
challengeType: 11
|
||||
challengeType: 19
|
||||
dashedName: what-are-the-roles-of-the-html-audio-and-video-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What are the roles of the HTML `audio` and `video` element, and how do they work?
|
||||
|
||||
The `audio` and `video` elements allow you to add sound and video content to your HTML documents. The `audio` element supports popular audio formats like mp3, wav, and ogg.
|
||||
The `video` element supports mp4, ogg, and webm formats.
|
||||
|
||||
|
||||
+4
-11
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 67167835def3588873f339c6
|
||||
videoId: _KzjV5RScSE
|
||||
title: What Are Common Ways to Optimize Media Assets?
|
||||
challengeType: 11
|
||||
challengeType: 19
|
||||
dashedName: what-are-common-ways-to-optimize-media-assets
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What are common ways to optimize media assets?
|
||||
|
||||
There are three tools to consider when using media, such as images, on your web pages: the size, the format, and the compression.
|
||||
|
||||
Let's talk about the size of your images first. When you are building a website, you'll often style images to display in a specific size. For example, you might have an image display at a 640x480 resolution. 640 represents the width while 480 represents the height in pixels. When preparing your image you want to scale it to a 640x480 size to match that styling. If you serve an image that is 1920x1080 but you are styling it to be much smaller, you're requiring your users to download unnecessary data. A smaller resolution results in a smaller file size.
|
||||
@@ -74,7 +67,7 @@ PNG
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the video starting at the 53 second mark to see which of these options was not mentioned.
|
||||
Review the middle of the lecture to see which of these options was not mentioned.
|
||||
|
||||
---
|
||||
|
||||
@@ -82,7 +75,7 @@ JPG
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the video starting at the 53 second mark to see which of these options was not mentioned.
|
||||
Review the middle of the lecture to see which of these options was not mentioned.
|
||||
|
||||
---
|
||||
|
||||
@@ -90,7 +83,7 @@ WEBP
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the video starting at the 53 second mark to see which of these options was not mentioned.
|
||||
Review the middle of the lecture to see which of these options was not mentioned.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
|
||||
+7
-14
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 6716823876aa22a68ba3e2ec
|
||||
videoId: grui-CD6Uck
|
||||
title: What Are the Different Types of Image Licenses, and How Do They Work?
|
||||
challengeType: 11
|
||||
challengeType: 19
|
||||
dashedName: what-are-the-different-types-of-image-licenses
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What are different types of image licenses, and how do they work?
|
||||
|
||||
Images are considered intellectual property, this means that they are protected by copyright regulations, most often belonging to the creator. By default, images are released as all rights reserved. The creator, or publisher sometimes, holds all copyright for the image.
|
||||
|
||||
This means that you cannot use them in your web page unless you do one of three things: obtain written permission from the copyright holder, purchase a license from the copyright holder, or incorporate the image in a way that falls under fair use.
|
||||
@@ -42,7 +35,7 @@ Permissive license
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the video starting at the 12 second mark where the answer was discussed.
|
||||
Review the beginning of the lecture to obtain the answer.
|
||||
|
||||
---
|
||||
|
||||
@@ -50,7 +43,7 @@ Public Domain
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the video starting at the 12 second mark where the answer was discussed.
|
||||
Review the beginning of the lecture to obtain the answer.
|
||||
|
||||
---
|
||||
|
||||
@@ -58,7 +51,7 @@ Creative Commons
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the video starting at the 12 second mark where the answer was discussed.
|
||||
Review the beginning of the lecture to obtain the answer.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
@@ -110,7 +103,7 @@ Search for images on Google and use them freely.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the end of the video where this was discussed.
|
||||
Review the end of the lecture to obtain the answer.
|
||||
|
||||
---
|
||||
|
||||
@@ -122,7 +115,7 @@ Use any image from social media as long as you give credit.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the end of the video where this was discussed.
|
||||
Review the end of the lecture to obtain the answer.
|
||||
|
||||
---
|
||||
|
||||
@@ -130,7 +123,7 @@ You can use any image as long as it's not watermarked.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the end of the video where this was discussed.
|
||||
Review the end of the lecture to obtain the answer.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
|
||||
+10
-17
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 6716825aff3434a71fdc3e99
|
||||
videoId: mWa1_S3bHVA
|
||||
title: What Are SVGs, and When Should You Use Them?
|
||||
challengeType: 11
|
||||
challengeType: 19
|
||||
dashedName: what-are-svgs
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
So what are SVGs, and when should you use them?
|
||||
|
||||
First, you need to understand how images work. Common image formats like PNG and JPG are classified as raster formats. This essentially means that they are pixel-based, with the data tracking the color value in each pixel.
|
||||
|
||||
A large downside of raster based images is that they do not upscale well. If you've ever tried to make a PNG larger, you may have seen that it becomes pixelated, or blurry.
|
||||
@@ -36,7 +29,7 @@ An image which stores paths, lines, points, and curves.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the video starting at the 14 second mark.
|
||||
Review the beginning of the lecture to obtain the answer.
|
||||
|
||||
---
|
||||
|
||||
@@ -48,7 +41,7 @@ All images are raster images.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the video starting at the 14 second mark.
|
||||
Review the beginning of the lecture to obtain the answer.
|
||||
|
||||
---
|
||||
|
||||
@@ -56,7 +49,7 @@ An image which is easily scalable.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the video starting at the 14 second mark.
|
||||
Review the beginning of the lecture to obtain the answer.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
@@ -76,7 +69,7 @@ An image which stores color data for each pixel.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the video starting at the 38 second mark.
|
||||
Review the middle of the lecture to obtain the answer.
|
||||
|
||||
---
|
||||
|
||||
@@ -84,7 +77,7 @@ All images are vector images.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the video starting at the 38 second mark.
|
||||
Review the middle of the lecture to obtain the answer.
|
||||
|
||||
---
|
||||
|
||||
@@ -92,7 +85,7 @@ An image which is not easily scalable.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the video starting at the 38 second mark.
|
||||
Review the middle of the lecture to obtain the answer.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
@@ -108,7 +101,7 @@ As pixels.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the video starting at the 53 second mark.
|
||||
Review the middle of the lecture to obtain the answer.
|
||||
|
||||
---
|
||||
|
||||
@@ -116,7 +109,7 @@ As binary.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the video starting at the 53 second mark.
|
||||
Review the middle of the lecture to obtain the answer.
|
||||
|
||||
---
|
||||
|
||||
@@ -124,7 +117,7 @@ As hexadecimal.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the video starting at the 53 second mark.
|
||||
Review the middle of the lecture to obtain the answer.
|
||||
|
||||
---
|
||||
|
||||
|
||||
+4
-11
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 6716743531fc9a797351c21e
|
||||
videoId: E652pcln6EQ
|
||||
title: What Are Replaced Elements, and What Are Some Examples?
|
||||
challengeType: 11
|
||||
challengeType: 19
|
||||
dashedName: what-are-replaced-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What are replaced elements, and what are some examples?
|
||||
|
||||
A replaced element is an element whose content is determined by an external resource rather than by CSS itself. CSS, or cascading stylesheets, is used to add styles to a web page. Common examples of replaced elements include the image, iframe, and video elements.
|
||||
|
||||
With replaced elements, you can control the position, or layout of an element. But your CSS cannot directly modify the content of that element. This might be easier to explain with some examples. Consider the image element, which embeds an image on your web page:
|
||||
@@ -122,7 +115,7 @@ Which of these is a replaced element?
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the first minute of the video where examples of replaced elements were discussed.
|
||||
Review the section where examples of replaced elements were discussed.
|
||||
|
||||
---
|
||||
|
||||
@@ -130,7 +123,7 @@ Review the first minute of the video where examples of replaced elements were di
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the first minute of the video where examples of replaced elements were discussed.
|
||||
Review the section where examples of replaced elements were discussed.
|
||||
|
||||
---
|
||||
|
||||
@@ -142,7 +135,7 @@ Review the first minute of the video where examples of replaced elements were di
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the first minute of the video where examples of replaced elements were discussed.
|
||||
Review the section where examples of replaced elements were discussed.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
|
||||
+4
-11
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 671682b3983489a819507553
|
||||
videoId: I0_951_MPE0
|
||||
title: How Do You Embed Videos onto Your Page Using the iframe Element?
|
||||
challengeType: 11
|
||||
challengeType: 19
|
||||
dashedName: how-do-you-embed-videos-onto-your-page-using-the-iframe-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
How do you embed videos onto your page using the `iframe` element?
|
||||
|
||||
First, what exactly is the `iframe` element? `iframe` stands for inline frame. It's an inline element used to embed other HTML content directly within the HTML page. That HTML content could be a video, map, another HTML element, or even other web pages. Here's what the syntax of the `iframe` element looks like:
|
||||
|
||||
```html
|
||||
@@ -103,7 +96,7 @@ International frame.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the first 15 seconds of the video where this was discussed.
|
||||
Review the beginning of the lecture to obtain the answer.
|
||||
|
||||
---
|
||||
|
||||
@@ -111,7 +104,7 @@ Inline form.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the first 15 seconds of the video where this was discussed.
|
||||
Review the beginning of the lecture to obtain the answer.
|
||||
|
||||
---
|
||||
|
||||
@@ -123,7 +116,7 @@ Inline form element.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the first 15 seconds of the video where this was discussed.
|
||||
Review the beginning of the lecture to obtain the answer.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user