diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md index 524dde21925..d45e6292b72 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md @@ -10,6 +10,34 @@ dashedName: what-are-replaced-elements Watch the video and answer the questions below. +# --transcript-- + +What are replaced elements, and what are some examples? + +A replaced element is an element whose content is determined by an external resource rather than by CSS itself. CSS, or cascading stylesheets, is used to add styles to a web page. Common examples of replaced elements include the image, iframe, and video elements. + +With replaced elements, you can control the position, or layout of an element. But your CSS cannot directly modify the content of that element. This might be easier to explain with some examples. Consider the image element, which embeds an image on your web page: + +```html +Descriptive text goes here +``` + +The element itself is replaced with the external object: the image. Your CSS can control things like the positioning of the image, or apply a filter to it, but you cannot actually modify the image itself. A more robust example might be the `iframe` element, which embeds an external site on your web page: + +```html + +``` + +Common examples for using the `iframe` element would be to embed Maps or YouTube videos onto the page. The element itself is replaced with the external object: the site. Your CSS can change the positioning of the embedded site, but you cannot modify the site's contents. To dive a bit further, if the embedded site has an `h1` element, your CSS would not be able to style that `h1` element. You cannot change the size, font color, and so on. + +There are some other replaced elements, such as `video`, and `embed`. And some elements behave as replaced elements under specific circumstances. Here's an example of an `input` element with the `type` attribute set to `image`: + +```html + +``` + +This type of `input` is considered to be a replaced element, but other `input` types like `text`, or `email` are not replaced elements. + # --questions-- ## --text-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md index 86d44f1b1d8..def70eab591 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md @@ -10,6 +10,18 @@ dashedName: what-are-common-ways-to-optimize-media-assets Watch the video and answer the questions below. +# --transcript-- + +What are common ways to optimize media assets? + +There are three tools to consider when using media, such as images, on your web pages: the size, the format, and the compression. + +Let's talk about the size of your images first. When you are building a website, you'll often style images to display in a specific size. For example, you might have an image display at a 640x480 resolution. 640 represents the width while 480 represents the height in pixels. When preparing your image you want to scale it to a 640x480 size to match that styling. If you serve an image that is 1920x1080 but you are styling it to be much smaller, you're requiring your users to download unnecessary data. A smaller resolution results in a smaller file size. + +The next thing to consider is your file format. Two of the most common file formats are PNG and JPG, but these are no longer the most ideal formats for serving images. Unless you need support for older browsers, you should consider using a more optimized format, like WEBP or AVIF. + +Finally, you can run compression algorithms on your images. A compression algorithm is used to reduce the size for files or data. There are options like pngcrush to compress your images locally, or you can use online compression tools. However, it's worth noting that specific file formats, such as JPG, are not lossless. Lossless means that the original data can be perfectly reconstructed from the compressed data. If you try to compress a JPG image, it will result in a degraded quality. You should keep all these things in mind when selecting images for your web pages. + # --questions-- ## --text-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md index d48dd4257bb..c2c9fc2ca87 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md @@ -10,6 +10,22 @@ dashedName: what-are-the-different-types-of-image-licenses Watch the video and answer the questions below. +# --transcript-- + +What are different types of image licenses, and how do they work? + +Images are considered intellectual property, this means that they are protected by copyright regulations, most often belonging to the creator. By default, images are released as all rights reserved. The creator, or publisher sometimes, holds all copyright for the image. + +This means that you cannot use them in your web page unless you do one of three things: obtain written permission from the copyright holder, purchase a license from the copyright holder, or incorporate the image in a way that falls under fair use. + +That third point is a bit tricky. Fair use requires that your use of the image is both limited and transformative. Some examples of fair use would be to comment on or review the art or create a parody of the image. + +Some images might be released under a permissive license, like a Creative Commons license, or the BSD license that freeCodeCamp uses. These images are available for use in your website, but you'll need to read the license to understand the rules you need to follow when using these images. For example, you might be required to make your website open source, or you may not be permitted to modify the image in any way. + +Finally, some images may be released to the public domain. An image under the public domain has no copyright attached to it and is free to be used without any restrictions. Images licensed specifically under the Creative Commons 0 license are considered public domain. + +Most search engines will allow you to filter image results by a license. There are also sites like Pixabay and Unsplash, which offer free-to-use images. Always be mindful of the copyright and licensing when you use an image in your website. + # --questions-- ## --text-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md index 116fb99d961..3082bff23d7 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md @@ -10,6 +10,20 @@ dashedName: what-are-svgs Watch the video and answer the questions below. +# --transcript-- + +So what are SVGs, and when should you use them? + +First, you need to understand how images work. Common image formats like PNG and JPG are classified as raster formats. This essentially means that they are pixel-based, with the data tracking the color value in each pixel. + +A large downside of raster based images is that they do not upscale well. If you've ever tried to make a PNG larger, you may have seen that it becomes pixelated, or blurry. + +An SVG is a different kind of image. SVG stands for a scalable vector graphic. A vector graphic tracks data based on paths and equations to plot points, lines, and curves. What this really means is that a vector graphic, like an SVG, can be scaled to any size without impacting the quality. + +SVGs specifically have the added benefit of storing data in XML. This means you can use them directly in your code as raw HTML with the `svg` element. It also means you can programmatically change the color of the image. + +So when would you want to use an SVG? A great use case is for icons. If you want to create custom bullet points, or add icons to your links to represent social media platforms, using SVGs is the best approach. One of the most popular icon libraries, Font Awesome, uses SVG images for their icons. SVGs are also great for webpage logos, because they scale perfectly. They allow you to adapt your layout to any responsive design you need. Next time you have an SVG locally, try opening it with a text editor and playing with the code. + # --questions-- ## --text-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md index 678424a3aa3..09f3435927a 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md @@ -10,6 +10,88 @@ dashedName: what-are-the-roles-of-the-html-audio-and-video-elements Watch the video and answer the questions below. +# --transcript-- + +What are the roles of the HTML `audio` and `video` element, and how do they work? + +The `audio` and `video` elements allow you to add sound and video content to your HTML documents. The `audio` element supports popular audio formats like mp3, wav, and ogg. +The `video` element supports mp4, ogg, and webm formats. + +To include audio content on your web page, you can use the `audio` element with the `src` attribute pointing to the location of your audio file: + +```html + +``` + +If you try to run this example, you'll see that nothing shows up on the page. However, if you inspect the page with the developer tools, you'll see the `audio` element is indeed on the page. If you want to see the audio player on the page, then you can add the `audio` element with the `controls` attribute: + +```html + +``` + +The `controls` attribute enables users to manage audio playback, including adjusting volume, and pausing, or resuming playback. The `controls` attribute is a boolean attribute that can be added to an element to enable built-in playback controls. If omitted, no controls will be shown. + +Apart from the `src` and `controls` attributes, there are several other attributes that enhance the functionality of the `audio` element. The `loop` attribute is a boolean attribute that makes the audio replay continuously. Here's an example of using the `loop` attribute to play one of Quincy Larson's songs titled "Can't stay down": + +```html + +``` + +When the song reaches the end, it will loop back around and play it again from the beginning. Another attribute you can use is the `muted` attribute. When present in the `audio` element, this boolean attribute will start the audio in a muted state. Here's an example of using the `muted` attribute: + +```html + +``` + +When you start the song in the browser, you'll not hear anything. To hear the music you will need to click on the volume icon. + +When it comes to audio file types, there are differences in which browsers support which type. To accommodate this, you can use `source` elements inside the `audio` element and the browser will select the first source that it understands. Here's an example of using multiple `source` elements for an `audio` element: + +```html + +``` + +The browser will first start with the ogg type, and if it can't play the audio, then it'll move down to the next type in the list. + +All the attributes we have learned so far are also supported in the `video` element. Here's an example of using a `video` element with the `loop`, `controls`, and `muted` attributes: + +```html + +``` + +For the `src`, or source attribute, we are using a video called "Big Buck Bunny" from archive.org. If you wanted to display an image while the video is downloading, you can use the `poster` attribute. This attribute is not available for `audio` elements and is unique to the `video` element. Here's an example of using the `poster` attribute with content provided by peach.blender.org: + +```html + +``` + +This example is also using the `width` attribute to set the width to 620 pixels so the video fits better on the screen. + # --questions-- ## --text-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md index 54e81da5484..8ffb8dd0ce6 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md @@ -10,6 +10,87 @@ dashedName: how-do-you-embed-videos-onto-your-page-using-the-iframe-element Watch the video and answer the questions below. +# --transcript-- + +How do you embed videos onto your page using the `iframe` element? + +First, what exactly is the `iframe` element? `iframe` stands for inline frame. It's an inline element used to embed other HTML content directly within the HTML page. That HTML content could be a video, map, another HTML element, or even other web pages. Here's what the syntax of the `iframe` element looks like: + +```html + +``` + +The `src` attribute specifies the URL of the page you want to embed. The `width` attribute specifies the width of the `iframe`. The `height` attribute specifies the height of the `iframe`. The `allowfullscreen` attribute allows the user to display the `iframe` in full screen mode. It's also a good practice to specify a `title` attribute for the `iframe`, as it's important for accessibility. + +To embed a video within an `iframe` you can copy it directly from popular video services like YouTube and Vimeo, or define it yourself with the `src` attribute pointing to the URL of that video. Here's an example of embedding a popular freeCodeCamp course from YouTube: + +```html +

A freeCodeCamp YouTube Video Embedded with the iframe Element

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

A Video from Pixabay Embedded with the iframe Element

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

A Map from Openstreetmap.org Embedded with the iframe Element

+ + +
+ + + View Larger Map + + +``` + +If you want to embed direct HTML within the `iframe` element you have to use the `srcdoc` attribute instead of `src`. + # --questions-- ## --text--