diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index be93a0a00f75b1e..1db0142861611c8 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 afd42d076f6b9e0..ab3b50a521c5c5f 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/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/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. +

+ + +
+
+

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. +

+ + +
+
+

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. +

+ + +
+
+

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. +

+ + +
+
+

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. +

+ + +
+
+

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. +

+ + +
+
+ + + ``` + +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 `