CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-06-22 21:08:12 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat(curriculum): Add interactive examples to replaced elements lesson (#62654)

Browse Source 
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
Giftea ☕ 2025-10-10 00:03:57 +01:00 committed by GitHub
parent 63ef93a1db
commit 613f55e3ea
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
curriculum/challenges/english/blocks/lecture-working-with-media/6716743531fc9a797351c21e.md
View File

@ -5,7 +5,7 @@ challengeType: 19
dashedName: what-are-replaced-elements
---
# --description--
# --interactive--
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.
@ -15,13 +15,38 @@ With replaced elements, you can control the position, or layout of an element. B
<img src="example-img-url" alt="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:
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.
Here is an example of using the `iframe` element for a popular YouTube video on the freeCodeCamp channel. If you want to see different videos in the preview window, change the value of the `src` attribute to a video of your choosing.
**NOTE**: Don't worry about the extra attributes mentioned in the interactive example like `referrerpolicy` and `allowfullscreen`. You will learn more about working with `iframe` elements in a future workshop.
:::interactive_editor
```html
<iframe src="https://www.example.com" title="Example Site"></iframe>
<iframe width="400" height="200" src="https://www.youtube.com/embed/u43gJJrVa1I?si=BoDW_puFsy8OEr_Z" title="Professional Cloud Architect Certification Course – Pass the Exam! (YouTube video)" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
```
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.
:::
Other common examples of using the `iframe` element would be to embed maps onto the page. Here is an example of an embedded map.
Try playing around with the map itself by zooming in/out.
:::interactive_editor
```html
<iframe
title="Map of the Royal Observatory, Greenwich, London"
width="300"
height="200"
src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&amp;layer=mapnik">
</iframe>
```
:::
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`: