diff --git a/.vscode/dictionaries/code-entities.txt b/.vscode/dictionaries/code-entities.txt index 97b0b8ac5cf2c59..caf63adfe416145 100644 --- a/.vscode/dictionaries/code-entities.txt +++ b/.vscode/dictionaries/code-entities.txt @@ -716,6 +716,7 @@ strncpy SUBDOCUMENT sund sunu +superellipse superspeed SVGMPathElement svgref diff --git a/.vscode/dictionaries/proper-names.txt b/.vscode/dictionaries/proper-names.txt index d53126e7c5f64a1..e6a15c68c13a64a 100644 --- a/.vscode/dictionaries/proper-names.txt +++ b/.vscode/dictionaries/proper-names.txt @@ -58,6 +58,7 @@ Blackman Blackmoon Blankers Bloggs +Bobtown Bodmin Boonie bottosson @@ -205,6 +206,7 @@ Frida Galinski Gandi Gayatri +Gaye Gebrselassie geckodriver Gedit @@ -334,6 +336,7 @@ Lighttpd Lindenberg Lindesay Liskov +Lorc Loycom Luxon Léonie @@ -398,6 +401,7 @@ Musicr Mustafa myshov Müller +Nabors Naeher Nakamura Nakano diff --git a/.vscode/dictionaries/terms-abbreviations.txt b/.vscode/dictionaries/terms-abbreviations.txt index b7aa32dae2b09fd..c50c2a66d65779c 100644 --- a/.vscode/dictionaries/terms-abbreviations.txt +++ b/.vscode/dictionaries/terms-abbreviations.txt @@ -582,6 +582,7 @@ resends resizability respecified restartless +Resveratrol retarget retargeted retargetings diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 079ad24da1964a0..dd07f706cb77417 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -5469,7 +5469,7 @@ /en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web /en-US/docs/Learn_web_development/Core/Structuring_content/Including_vector_graphics_in_HTML /en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML /en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images /en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/Test_your_skills:_HTML_images /en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Images -/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page /en-US/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page +/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page /en-US/docs/Learn_web_development/Core/Structuring_content/Splash_page /en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies /en-US/docs/Learn_web_development/Core/Structuring_content/General_embedding_technologies /en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images /en-US/docs/Web/HTML/Guides/Responsive_images /en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content /en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio @@ -5786,6 +5786,7 @@ /en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images/Test_your_skills:_HTML_images /en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Images /en-US/docs/Learn_web_development/Core/Structuring_content/HTML_text_fundamentals /en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs /en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio/Test_your_skills:_Multimedia_and_embedding /en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video +/en-US/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page /en-US/docs/Learn_web_development/Core/Structuring_content/Splash_page /en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Multimedia_and_embedding /en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video /en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills:_Advanced_HTML_text /en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text /en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills:_HTML_text_basics /en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index b280d90f7346e17..605380fee821265 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -7407,24 +7407,24 @@ "mishkadoma" ] }, - "Learn_web_development/Core/Structuring_content/Mozilla_splash_page": { - "modified": "2020-07-16T22:25:05.240Z", + "Learn_web_development/Core/Structuring_content/Planet_data_table": { + "modified": "2020-07-16T22:25:28.525Z", "contributors": [ "chrisdavidmills", - "FoxDie12x", - "MNizam0802", + "tayyabalishan", "jswisher", - "goto.prototype", - "richardzacur" + "Sebastianz" ] }, - "Learn_web_development/Core/Structuring_content/Planet_data_table": { - "modified": "2020-07-16T22:25:28.525Z", + "Learn_web_development/Core/Structuring_content/Splash_page": { + "modified": "2020-07-16T22:25:05.240Z", "contributors": [ "chrisdavidmills", - "tayyabalishan", + "FoxDie12x", + "MNizam0802", "jswisher", - "Sebastianz" + "goto.prototype", + "richardzacur" ] }, "Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content": { diff --git a/files/en-us/glossary/extrinsic_size/index.md b/files/en-us/glossary/extrinsic_size/index.md new file mode 100644 index 000000000000000..44f596ae3a3c07c --- /dev/null +++ b/files/en-us/glossary/extrinsic_size/index.md @@ -0,0 +1,23 @@ +--- +title: Extrinsic size +slug: Glossary/Extrinsic_size +page-type: glossary-definition +sidebar: glossarysidebar +--- + +In CSS, the **extrinsic size** of an element is determined by its layout context, that is, by constraints imposed from outside the element, without regard for its contents. This is the opposite of an element's {{glossary("intrinsic size")}}, which is based on its content. + +Extrinsic sizing occurs when you explicitly set or constrain the size of an element using [CSS box model](/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model) properties such as {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("block-size")}}, {{cssxref("inline-size")}}, {{cssxref("max-width")}}, and {{cssxref("min-height")}}. +For example, when you set `width: 200px`, you're specifying an extrinsic size. + +Percentage values are also extrinsic; they're calculated relative to the element's [containing block](/en-US/docs/Web/CSS/Containing_block). +For example, `width: 50%` means the width of the element will be `50%` of the width of its containing block, regardless of the content inside the element. + +Block-level elements are sized extrinsically. When a width isn't specified, the block element's default width is `auto`, which resolves to `100%` width of its containing block. + +## See also + +- Related glossary terms: + - {{glossary("Intrinsic size")}} +- [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module +- [CSS Box Sizing Module Level 3](https://drafts.csswg.org/css-sizing-3/#extrinsic) specification diff --git a/files/en-us/glossary/intrinsic_size/index.md b/files/en-us/glossary/intrinsic_size/index.md index 64240f159070ce6..75e25ce4eaea7dc 100644 --- a/files/en-us/glossary/intrinsic_size/index.md +++ b/files/en-us/glossary/intrinsic_size/index.md @@ -5,19 +5,19 @@ page-type: glossary-definition sidebar: glossarysidebar --- -In CSS, the _intrinsic size_ of an element is the size it would be based purely on its content without taking into account the effects of the context it appears in. For example, the sizing applied by CSS [box model](/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model) properties. An element's intrinsic sizes are represented by its {{cssxref("min-content")}} and {{cssxref("max-content")}} sizes. +In CSS, the **intrinsic size** of an element is the size it would have based purely on its content, without taking into account the effects of the layout context it appears in. This is the opposite of an element's {{glossary("extrinsic size")}}, which is determined by external constraints such as container size. An element's intrinsic sizes are represented by its {{cssxref("min-content")}} and {{cssxref("max-content")}} sizes. -Inline elements are sized intrinsically: [sizing](/en-US/docs/Web/CSS/CSS_box_sizing) and [box](/en-US/docs/Web/CSS/CSS_box_model) properties including {{cssxref("height")}}, {{cssxref("width")}}, {{cssxref("block-size")}}, {{cssxref("inline-size")}}, and {{cssxref("padding-block")}} and {{cssxref("margin-block")}} have no impact on them ( though {{cssxref("margin-inline")}} and {{cssxref("padding-inline")}} do). +Inline elements are sized intrinsically. CSS [box model](/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model) properties such as {{cssxref("height")}}, {{cssxref("width")}}, {{cssxref("block-size")}}, {{cssxref("inline-size")}}, {{cssxref("padding-block")}}, and {{cssxref("margin-block")}} have no impact on their layout (though {{cssxref("margin-inline")}} and {{cssxref("padding-inline")}} do affect spacing within a line). -For example, the minimum intrinsic size of the inline {{htmlelement("span")}} element is the minimum size it would have if it was floated (with no other CSS box properties applied), inside a container with an inline-size of `0px`. The maximum intrinsic size is the opposite. It is the size the same `` would have if its container's inline size were infinite. +For example, the minimum intrinsic size of the inline {{htmlelement("span")}} element is the smallest size it would have if it were floated (with no other CSS box properties applied) in a container with `inline-size: 0`. The maximum intrinsic size is the opposite; it's the size the same `` would have when placed in a container with an infinite `inline-size`. Intrinsic size has the same meaning for images as for text — the size at which the images are displayed if no CSS is applied to change the rendering. -Pixel density and resolution affect intrinsic size. By default, images are assumed to have a "1x" pixel density (1 device pixel = 1 CSS pixel), in which case the intrinsic size is simply the pixel height and width. An image's intrinsic size and resolution can be explicitly specified in its {{Glossary("EXIF")}} data. Image pixel density may also be set for images using the [`srcset`](/en-US/docs/Web/HTML/Reference/Elements/img#srcset) attribute. Note that, if both mechanisms are used, the `srcset` value is applied "over" the EXIF value. +Pixel density and resolution affect intrinsic size. By default, images are assumed to have a "1x" pixel density (1 device pixel = 1 CSS pixel), in which case the intrinsic size is simply the pixel height and width. An image's intrinsic size and resolution can be explicitly specified in its {{Glossary("EXIF")}} data. Image pixel density may also be set for images using the [`srcset`](/en-US/docs/Web/HTML/Reference/Elements/img#srcset) attribute. Note that if both mechanisms are used, the `srcset` value is applied "over" the EXIF value. -Intrinsic sizes and how they are calculated are defined in the [CSS sizing module](/en-US/docs/Web/CSS/CSS_box_sizing). +Intrinsic sizes and how they are calculated are defined in the [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module. -#### minimum intrinsic size +## Minimum intrinsic size To set an element according to its minimum intrinsic size, set the {{cssxref("inline-size")}} (or {{cssxref("width")}} in horizontal writing modes, like English and Hebrew) to {{cssxref("min-content")}}. This sets the element to the size it would be if the text was wrapped as small as possible in the inline direction without causing an overflow, with as much soft-wrapping as possible. For a box containing a string of text, the minimum intrinsic size would be defined by the longest word. @@ -32,11 +32,11 @@ p { } ``` -{{ EmbedLiveSample('minimum intrinsic size', '100%', '220') }} +{{EmbedLiveSample('minimum intrinsic size', '100%', '220')}} -#### maximum intrinsic size +## Maximum intrinsic size -The maximum intrinsic size is the opposite. It is the element's size if the container's inline size were infinite. Text content would display as wide as possible, with no soft-wrapping, even if it overflowed its container. The keyword value {{cssxref("max-content")}} sets this behavior. +The maximum intrinsic size is the opposite. It is the element's size if the container's inline size were infinite. Text content would display as wide as possible, with no soft-wrapping, even if it overflows its container. The keyword value {{cssxref("max-content")}} sets this behavior. ```html hidden

Element grows as text doesn't wrap.

@@ -54,15 +54,13 @@ p { } ``` -{{ EmbedLiveSample('maximum intrinsic size', '100%', '200') }} - -## Extrinsic sizing - -The opposite of _intrinsic size_ is **_extrinsic size_**, which is based on the context of an element, without regard for its contents. Extrinsic sizing is determined by box model property values. With extrinsic sizing, percentages specify the size of a box with respect to the box's containing block. +{{EmbedLiveSample('maximum intrinsic size', '100%', '200')}} ## See also -- CSS {{cssxref("min-content")}}, {{cssxref("max-content")}}, and {{cssxref("fit-content")}} property values. +- Related glossary terms: + - {{glossary("Extrinsic size")}} +- CSS {{cssxref("min-content")}}, {{cssxref("max-content")}}, and {{cssxref("fit-content")}} sizing keywords - {{cssxref("interpolate-size")}} - {{cssxref("aspect-ratio")}} - {{cssxref("calc-size()")}} diff --git a/files/en-us/learn_web_development/core/structuring_content/html_table_basics/index.md b/files/en-us/learn_web_development/core/structuring_content/html_table_basics/index.md index a6ba84fcded6ad5..91bf7b88c17057c 100644 --- a/files/en-us/learn_web_development/core/structuring_content/html_table_basics/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/html_table_basics/index.md @@ -6,7 +6,7 @@ page-type: learn-module-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Mozilla_splash_page", "Learn_web_development/Core/Structuring_content/Table_accessibility", "Learn_web_development/Core/Structuring_content")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Splash_page", "Learn_web_development/Core/Structuring_content/Table_accessibility", "Learn_web_development/Core/Structuring_content")}} This article gets you started with HTML tables, covering the very basics such as rows, cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes. @@ -529,4 +529,4 @@ You can also find this code on GitHub at [animals-table-fixed.html](https://gith That wraps up the basics of HTML tables. In the next article, we'll look at some further features that can be used to make HTML tables more accessible to visually impaired people. -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Mozilla_splash_page", "Learn_web_development/Core/Structuring_content/Table_accessibility", "Learn_web_development/Core/Structuring_content")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Splash_page", "Learn_web_development/Core/Structuring_content/Table_accessibility", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/en-us/learn_web_development/core/structuring_content/index.md b/files/en-us/learn_web_development/core/structuring_content/index.md index 43ee420e2a66c12..603e38e513d1bb1 100644 --- a/files/en-us/learn_web_development/core/structuring_content/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/index.md @@ -47,8 +47,8 @@ Before starting this module, you don't need any previous HTML knowledge, but you - : In the beginning, the web was just text, and it was really quite boring. Fortunately, it wasn't too long before the ability to embed images (and other more interesting types of content) inside web pages was added. In this article we'll look at how to use the {{htmlelement("img")}} element in depth, including the basics, annotating it with captions using {{htmlelement("figure")}}, and detailing how it relates to {{glossary("CSS")}} background images. - [HTML video and audio](/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio) - : Now that we are comfortable with adding simple images to a webpage, the next step is to start adding video and audio players to your HTML documents! In this article we'll look at doing just that with the {{htmlelement("video")}} and {{htmlelement("audio")}} elements; we'll then finish off by looking at how to add captions/subtitles to your videos. -- [Mozilla splash page](/en-US/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page) Challenge - - : In this challenge, we'll test your knowledge of some of the techniques discussed in the last couple of lessons, getting you to add some images and video to a funky splash page all about Mozilla! +- [Creepy-crawly splash page](/en-US/docs/Learn_web_development/Core/Structuring_content/Splash_page) Challenge + - : In this challenge, we'll test your knowledge of some of the techniques discussed in the last couple of lessons, getting you to add some images and video to a splash page all about bugs and other creepy crawlies. - [HTML table basics](/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics) - : This article gets you started with HTML tables, covering the very basics such as rows, cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes. - [HTML table accessibility](/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility) diff --git a/files/en-us/learn_web_development/core/structuring_content/marking_up_a_letter/index.md b/files/en-us/learn_web_development/core/structuring_content/marking_up_a_letter/index.md index ad6cc0b2fd4df2f..40f444da38b8a9b 100644 --- a/files/en-us/learn_web_development/core/structuring_content/marking_up_a_letter/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/marking_up_a_letter/index.md @@ -63,7 +63,7 @@ priority: Turning H2O into wine, and the health benefits of Resveratrol (C14H12O3.) -Measuring the effect on performance of funk bassplayers at temperatures +Measuring the effect on performance of funk bass players at temperatures exceeding 30°C (86°F), when the audience size exponentially increases (effect of 3 × 103 increasing to 3 × 104.) HTML, Hypertext Markup Language, and CSS, @@ -77,7 +77,7 @@ Exotic dance moves Yes, you are right! As part of my post-doctorate work, I did study exotic tribal dances. To answer your question, my -favourite dances are as follows, with definitions: +favorite dances are as follows, with definitions: Polynesian chicken dance A little known but very influential dance dating back as far as @@ -268,7 +268,7 @@ Your finished HTML should look like this: (C14H12O3.)
  • - Measuring the effect on performance of funk bassplayers at temperatures + Measuring the effect on performance of funk bass players at temperatures exceeding 30°C (86°F), when the audience size exponentially increases (effect of 3 × 103 increasing to 3 × 104.)
    • @@ -289,7 +289,7 @@ Your finished HTML should look like this:

    Yes, you are right! As part of my post-doctorate work, I did study exotic tribal dances. To answer your question, my - favourite dances are as follows, with definitions: + favorite dances are as follows, with definitions:

    @@ -311,7 +311,7 @@ Your finished HTML should look like this:
    Arctic robot dance
    An interesting example of historic misinformation, English explorers in - the 1960s believed to have discovered a new dance style characterised by + the 1960s believed to have discovered a new dance style characterized by "robotic", stilted movements, being practiced by inhabitants of Northern Alaska and Canada. Later on however it was discovered that they were just moving like this because they were really cold. diff --git a/files/en-us/learn_web_development/core/structuring_content/mozilla_splash_page/index.md b/files/en-us/learn_web_development/core/structuring_content/mozilla_splash_page/index.md deleted file mode 100644 index 5d39dd89a8be71c..000000000000000 --- a/files/en-us/learn_web_development/core/structuring_content/mozilla_splash_page/index.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: "Challenge: Mozilla splash page" -slug: Learn_web_development/Core/Structuring_content/Mozilla_splash_page -page-type: learn-module-assessment -sidebar: learnsidebar ---- - -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video", "Learn_web_development/Core/Structuring_content/HTML_table_basics", "Learn_web_development/Core/Structuring_content")}} - -In this challenge, we'll test your knowledge of some of the techniques discussed in the last couple of lessons, getting you to add some images and video to a funky splash page all about Mozilla! - -## Starting point - -To start off this assessment, you need to grab the HTML and all the images available in the [mdn-splash-page-start](https://github.com/mdn/learning-area/tree/main/html/multimedia-and-embedding/mdn-splash-page-start) directory on GitHub. Save the contents of [index.html](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/mdn-splash-page-start/index.html) in a file called `index.html` on your local drive, in a new directory. Then save [pattern.png](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png) in the same directory (right click on the image to get an option to save it.) - -Access the different images in the [originals](https://github.com/mdn/learning-area/tree/main/html/multimedia-and-embedding/mdn-splash-page-start/originals) directory and save them in the same way; you'll want to save them in a different directory for now, as you'll need to manipulate (some of) them using a graphics editor before they're ready to be used. - -Alternatively, you could use an online editor such as [CodePen](https://codepen.io/) or [JSFiddle](https://jsfiddle.net/). - -> [!NOTE] -> The example HTML file contains quite a lot of CSS, to style the page. You don't need to touch the CSS, just the HTML inside the {{htmlelement("body")}} element — as long as you insert the correct markup, the styling will make it look correct. -> -> If you get stuck, you can reach out to us in one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels). - -## Project brief - -In this assessment we are presenting you with a mostly-finished Mozilla splash page, which aims to say something nice and interesting about what Mozilla stands for, and provide some links to further resources. Unfortunately, no images or video have been added yet — this is your job! You need to add some media to make the page look nice and make more sense. The following subsections detail what you need to do: - -### Preparing images - -Using your favorite image editor, create 400px wide versions of: - -- `firefox_logo-only_RGB.png` -- `firefox-addons.jpg` -- `mozilla-dinosaur-head.png` - -Along with `mdn.svg`, these images will be your icons to link to further resources, inside the `further-info` area. You'll also link to the Firefox logo in the site header. Save copies of all these inside the same directory as `index.html`. - -Next, create a 1200px wide landscape version of `red-panda.jpg`, Call it something sensible so you can easily identify it. Save a copy inside the same directory as `index.html`. - -> [!NOTE] -> You should optimize your JPG and PNG images to make them as small as possible, while still looking OK. [tinypng.com](https://tinypng.com/) is a great service for doing this easily. - -### Adding a logo to the header - -Inside the {{htmlelement("header")}} element, add an {{htmlelement("img")}} element that will embed the small version of the Firefox logo in the header. - -### Adding a video to the main article content - -Just inside the {{htmlelement("article")}} element (right below the opening tag), embed the YouTube video found at , using the appropriate YouTube tools to generate the code. The video should be 400px wide. - -> [!NOTE] -> This is a bit of a stretch goal, as we haven't discussed the code required to embed YouTube videos in our course. Try looking up how to embed a YouTube video online. - -### Adding images to the further info links - -Inside the {{htmlelement("div")}} with the class of `further-info` you will find four {{htmlelement("a")}} elements — each one linking to an interesting Mozilla-related page. To complete this section you'll need to insert an {{htmlelement("img")}} element inside each one to embed the appropriate image. - -Make sure you match the correct images with the correct links! - -### Adding the red panda - -Inside the {{htmlelement("div")}} with the class of `red-panda`, we want to insert an {{htmlelement("img")}} element that displays the red panda image. - -## Hints and tips - -- You can use the [W3C Nu HTML Checker](https://validator.w3.org/nu/) to catch mistakes in your HTML. -- You don't need to know any CSS to do this assessment; you just need the provided HTML file. The CSS part is already done for you. -- The provided HTML (including the CSS styling) already does most of the work for you, so you can just focus on the media embedding. - -## Example - -The following screenshots show what the splash page should look like. - -![A wide shot of our example splash page](wide-shot.png) - -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video", "Learn_web_development/Core/Structuring_content/HTML_table_basics", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/en-us/learn_web_development/core/structuring_content/mozilla_splash_page/wide-shot.png b/files/en-us/learn_web_development/core/structuring_content/mozilla_splash_page/wide-shot.png deleted file mode 100644 index 0ce76477ea1f5f0..000000000000000 Binary files a/files/en-us/learn_web_development/core/structuring_content/mozilla_splash_page/wide-shot.png and /dev/null differ diff --git a/files/en-us/learn_web_development/core/structuring_content/splash_page/finished-splash-example.png b/files/en-us/learn_web_development/core/structuring_content/splash_page/finished-splash-example.png new file mode 100644 index 000000000000000..16d08cc1f576f74 Binary files /dev/null and b/files/en-us/learn_web_development/core/structuring_content/splash_page/finished-splash-example.png differ diff --git a/files/en-us/learn_web_development/core/structuring_content/splash_page/index.md b/files/en-us/learn_web_development/core/structuring_content/splash_page/index.md new file mode 100644 index 000000000000000..0548711e34c8dd4 --- /dev/null +++ b/files/en-us/learn_web_development/core/structuring_content/splash_page/index.md @@ -0,0 +1,685 @@ +--- +title: "Challenge: Creepy-crawly splash page" +short-title: "Challenge: Splash page" +slug: Learn_web_development/Core/Structuring_content/Splash_page +page-type: learn-module-assessment +sidebar: learnsidebar +--- + +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video", "Learn_web_development/Core/Structuring_content/HTML_table_basics", "Learn_web_development/Core/Structuring_content")}} + +In this challenge, we'll test your knowledge of some of the techniques discussed in the last couple of lessons, getting you to add some images and a video to a splash page all about bugs and other creepy crawlies. + +## Starting point + +To solve this challenge we are expecting you to create a simple website project, either inside a folder on your computer's harddrive, or using an online editor such as [CodePen](https://codepen.io/) or [JSFiddle](https://jsfiddle.net/). Much of the code you need is already provided. + +1. Create a new folder in an appropriate location on your computer called `splash-page-challenge` (or open an online editor and take the required steps to create a new project). +2. Save the following HTML listing inside a file inside your folder called `index.html` (or paste it into your online editor's HTML pane). + + ```html + + + + + Creepy crawlies! + + + +
    + +
    +

    Creepy-crawlies splash page!

    + +

    + In casual language, people use “bugs” to mean all sorts of small + creepy-crawlies: insects, spiders, etc. However, “Bugs” (true bugs) + are actually just one order of insects (Hemiptera). This page + provides a summary of the main classes or groups of + creepy-crawlies. +

    +
    +
    +
    +
    +

    Beetles (Coleoptera)

    + +

    + Beetles make up the largest order of insects, with more than + 350,000 known species. They are recognized by their hardened + forewings (elytra) that cover and protect the delicate hindwings + and abdomen. This feature gives them a tough, armored look and + helps them survive in many environments, from forests to deserts. + Beetles can vary greatly in size, color, and habits, ranging from + tiny grain beetles to massive stag beetles with impressive jaws. +

    +

    + Many beetles play important ecological roles. Some, like ladybugs, + are beneficial predators that feed on crop pests such as aphids. + Others, such as dung beetles, recycle nutrients by breaking down + animal waste. However, certain species like the Colorado potato + beetle or Japanese beetle are major agricultural pests. Their + diversity and adaptability make beetles one of the most successful + groups of insects on Earth. +

    + +

    + Image by URSchmidt - Own work, CC BY-SA 4.0, + https://commons.wikimedia.org/w/index.php?curid=70137401. +

    +
    +
    +

    True Bugs (Hemiptera)

    + +

    + True bugs include a wide range of insects such as stink bugs, + cicadas, aphids, and water striders. Unlike beetles, their + forewings are partly hardened and partly membranous, and they + possess distinctive piercing-sucking mouthparts. These mouthparts + are adapted for feeding on plant sap, blood, or other insects. Many + true bugs have scent glands that produce strong odors as a defense + mechanism, which is why some are called “stink bugs.” +

    + +

    + True bugs are found worldwide and occupy a variety of habitats, + including plants, soil, and water. While some species are harmless + or even beneficial predators, others are destructive agricultural + pests that weaken plants by draining their sap. Certain bugs, like + bed bugs and kissing bugs, can also affect humans directly by + biting or transmitting diseases. +

    + +

    + Image created by user B. Schoenmakers at Waarneming.nl, a source of + nature observations in the Netherlands. - This image is uploaded as + image number 29046158 at Waarneming.nl, a source of nature + observations in the Netherlands.This tag does not indicate the + copyright status of the attached work. A normal copyright tag is + still required. See Commons:Licensing for more information., This + site now requires authentication, however, the same image and + copyright information is also available via + https://world.observation.org/foto/view/29046158 + since it uses the same data, CC BY 3.0, + https://commons.wikimedia.org/w/index.php?curid=92410673. +

    +
    +
    +

    Butterflies & Moths (Lepidoptera)

    + +

    + Butterflies and moths are some of the most recognizable insects + thanks to their large, often colorful wings covered in tiny scales. + These scales give their wings shimmering, patterned appearances and + are one of the defining traits of this group. Butterflies are + usually active by day, while moths are mostly nocturnal, though + there are exceptions. Both undergo complete metamorphosis, with a + dramatic transformation from caterpillar to winged adult. +

    + +

    + As caterpillars, they primarily feed on leaves, sometimes causing + damage to crops and plants. As adults, butterflies and many moths + are important pollinators, transferring pollen as they sip nectar + from flowers. They are also ecologically vital as food sources for + birds, bats, and other animals. Their beauty and ecological + importance make them a favorite group for nature enthusiasts and + scientists alike. +

    + +

    + Image by Didier Descouens - Own work, CC BY-SA 4.0, + https://commons.wikimedia.org/w/index.php?curid=19303857. +

    +
    +
    +

    Flies & Mosquitoes (Diptera)

    + +

    + Flies and mosquitoes belong to the order Diptera, meaning “two + wings.” Unlike most other insects, they have only one functional + pair of wings; the hind pair has evolved into tiny balancing organs + called halteres. This adaptation gives them incredible agility in + flight. Their mouthparts vary widely: some species have sponging + mouthparts (like houseflies), while others have piercing-sucking + ones (like mosquitoes). +

    + +

    + These insects are among the most ecologically and medically + significant. Many flies are decomposers, helping break down waste + and recycle nutrients. Mosquitoes, however, are infamous as disease + vectors, spreading malaria, dengue, and other illnesses. Despite + their negative reputation, flies and mosquitoes are essential in + ecosystems, serving as pollinators and as a major food source for + many animals. +

    + +

    + Image created by user Dick Belgers at Waarneming.nl, a source of + nature observations in the Netherlands. - This image is uploaded as + image number 5105758 at Waarneming.nl, a source of nature + observations in the Netherlands.This tag does not indicate the + copyright status of the attached work. A normal copyright tag is + still required. See Commons:Licensing for more information., CC BY + 3.0, + https://commons.wikimedia.org/w/index.php?curid=27659589. +

    +
    +
    +

    Bees, Wasps, Ants (Hymenoptera)

    + +

    + Bees, wasps, and ants are a diverse group known for their complex + behaviors and social structures. Many species live in colonies with + distinct roles for workers, queens, and males. Bees are especially + famous for pollination, producing honey, and communicating with + each other through dances. Wasps are often predators or + parasitoids, while ants are skilled builders and cooperative + foragers. +

    + +

    + This group has a huge ecological impact. Bees and wasps contribute + to pollination, supporting food crops and wild plants. Some wasps + help control pest populations by preying on or parasitizing other + insects. Ants are critical soil engineers, aerating the ground and + recycling nutrients. While stings and aggressive behaviors make + some species feared, they are vital players in natural and + agricultural systems. +

    + +

    + Image by Trounce - Own work, CC BY-SA 2.5, + https://commons.wikimedia.org/w/index.php?curid=1997709. +

    +
    +
    +

    Spiders (Araneae)

    + +

    + Spiders are arachnids, not insects, and are easily distinguished by + their eight legs and lack of antennae. Almost all spiders are + predators, using venom and silk to capture prey. Many build + intricate webs to trap insects, while others are active hunters + that chase or ambush their food. Their silk is an incredibly strong + and versatile material, used for webs, egg sacs, or safety lines. +

    + +

    + Spiders are found in nearly every habitat on Earth, from deserts to + caves to homes. While some people fear them, very few species pose + a danger to humans. In fact, spiders are highly beneficial because + they help control insect populations, including pests. They play a + crucial role in balancing ecosystems, making them one of the most + important non-insect “bugs” people commonly encounter. +

    + +

    + Image by AJC ajcann.wordpress.com from UK, CC BY-SA 2.0 + https://creativecommons.org/licenses/by-sa/2.0, via Wikimedia Commons. +

    +
    +
    + + + ``` + +3. Save the following CSS listing inside a file inside your folder called `style.css` (or paste it into your online editor's CSS pane). + + ```css + /* type */ + + body { + font: 1.2em / 1.5 system-ui; + margin: 0 auto; + width: 90%; + min-width: 800px; + max-width: 1200px; + } + + h1 { + text-align: center; + } + + .copyright { + font-size: 0.8em; + } + + /* nav menu */ + + ul { + padding: 0; + list-style-type: none; + text-align: center; + display: flex; + flex-flow: row wrap; + justify-content: center; + align-items: center; + } + + li { + flex: auto; + } + + nav a { + font-size: 1.2em; + padding: 0 20px; + } + + /* General link styles */ + + a { + text-decoration: none; + color: red; + } + + a:hover, + a:focus { + text-decoration: underline; + } + + /* header section layout */ + + header section { + display: grid; + grid-template-areas: + "heading heading" + "text video" + "text video"; + grid-template-columns: 1fr 2fr; + gap: 20px; + } + + h1 { + grid-area: heading; + } + + header p { + grid-area: text; + margin: 0; + } + + video { + grid-area: video; + width: 100%; + border: 1px solid black; + } + + /* image floats */ + + figure { + float: right; + margin-left: 20px; + padding: 20px; + background: orange; + border: 1px solid black; + } + + figcaption { + font-size: 0.6em; + } + ``` + +Later on, you will need to include the following URLs in your page. + +- `bee.jpg`: [Image for the "Bees, Wasps, Ants (Hymenoptera)" section](https://mdn.github.io/shared-assets/images/examples/learn/crawlies/bee.jpg). +- `beetle.png`: [Image for the "Beetles (Coleoptera)" section](https://mdn.github.io/shared-assets/images/examples/learn/crawlies/beetle.png). +- `butterfly.jpg`: [Image for the "Butterflies & Moths (Lepidoptera)" section](https://mdn.github.io/shared-assets/images/examples/learn/crawlies/butterfly.jpg). +- `mosquito.jpg`: [Image for the "Flies & Mosquitoes (Diptera)" section](https://mdn.github.io/shared-assets/images/examples/learn/crawlies/mosquito.jpg). +- `spider.jpg`: [Image for the "Spiders (Araneae)" section](https://mdn.github.io/shared-assets/images/examples/learn/crawlies/spider.jpg). +- `true_bug.jpg`: [Image for the "True Bugs (Hemiptera)" section](https://mdn.github.io/shared-assets/images/examples/learn/crawlies/true_bug.jpg). +- `bug_video_640.mp4`: [header video](https://mdn.github.io/shared-assets/videos/learn/bug_video_640.mp4). + +## Project brief + +In this assessment we are presenting you with a mostly-finished splash page about different creepy-crawlies. Unfortunately, no images or video have been added yet — this is your job! You need to add some media to make the page look more interesting. The following subsections detail what you need to do. + +### Adding a video to the header + +Just below the `

    `, add a `