diff --git a/.github/issue-regex-labeler.yml b/.github/issue-regex-labeler.yml index d317cab1c5b3f5f..35d31ebd9ac8088 100644 --- a/.github/issue-regex-labeler.yml +++ b/.github/issue-regex-labeler.yml @@ -10,6 +10,8 @@ Content:Games: - '\/docs\/Games' Content:Glossary: - '\/docs\/Glossary' +Content:Guide: + - '\/docs\/Web/Guide' Content:HTML: - '\/docs\/Web\/HTML' Content:HTTP: diff --git a/.github/labeler.yml b/.github/labeler.yml index e7152e720bb314d..0627f70b2cfc4f0 100644 --- a/.github/labeler.yml +++ b/.github/labeler.yml @@ -38,6 +38,10 @@ Content:Glossary: - changed-files: - any-glob-to-any-file: - files/en-us/glossary/** +Content:Guide: + - changed-files: + - any-glob-to-any-file: + - files/en-us/web/guide/** Content:HTML: - changed-files: - any-glob-to-any-file: diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index d42fab4b2e0e1f7..8aec61bf7ca7605 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -501,6 +501,7 @@ /en-US/docs/CSS/Getting_Started /en-US/docs/Learn/CSS/First_steps /en-US/docs/CSS/Getting_Started/Boxes /en-US/docs/Learn/CSS/Building_blocks /en-US/docs/CSS/Getting_Started/Cascading_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance +/en-US/docs/CSS/Getting_Started/Challenge_solutions /en-US/docs/Web/Guide/CSS/Getting_started/Challenge_solutions /en-US/docs/CSS/Getting_Started/Content /en-US/docs/Learn/CSS/Howto/Generated_content /en-US/docs/CSS/Getting_Started/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works /en-US/docs/CSS/Getting_Started/JavaScript /en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents @@ -12003,7 +12004,6 @@ /en-US/docs/Web/Events/webkitmouseforceup /en-US/docs/Web/API/Element/webkitmouseforceup_event /en-US/docs/Web/Events/webkitmouseforcewillbegin /en-US/docs/Web/API/Element/webkitmouseforcewillbegin_event /en-US/docs/Web/Events/wheel /en-US/docs/Web/API/Element/wheel_event -/en-US/docs/Web/Guide /en-US/docs/Web /en-US/docs/Web/Guide/AJAX /en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data /en-US/docs/Web/Guide/AJAX/Community /en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data /en-US/docs/Web/Guide/AJAX/Getting_Started /en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data @@ -12052,7 +12052,6 @@ /en-US/docs/Web/Guide/CSS /en-US/docs/Learn/CSS /en-US/docs/Web/Guide/CSS/Block_formatting_context /en-US/docs/Web/CSS/CSS_display/Block_formatting_context /en-US/docs/Web/Guide/CSS/CSS_Image_Sprites /en-US/docs/Web/CSS/CSS_images/Implementing_image_sprites_in_CSS -/en-US/docs/Web/Guide/CSS/CSS_Layout /en-US/docs/Web/CSS/CSS_Layout /en-US/docs/Web/Guide/CSS/Consistent_list_indentation /en-US/docs/Web/CSS/CSS_lists/Consistent_list_indentation /en-US/docs/Web/Guide/CSS/Counters /en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters /en-US/docs/Web/Guide/CSS/Flexible_boxes /en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox @@ -12183,7 +12182,7 @@ /en-US/docs/Web/Guide/HTML/Using_data_attributes /en-US/docs/Learn/HTML/Howto/Use_data_attributes /en-US/docs/Web/Guide/HTML/XHTML /en-US/docs/Glossary/XHTML /en-US/docs/Web/Guide/Houdini /en-US/docs/Web/API/Houdini_APIs -/en-US/docs/Web/Guide/Index /en-US/docs/Web +/en-US/docs/Web/Guide/Index /en-US/docs/Web/Guide /en-US/docs/Web/Guide/Introduction_to_Web_development /en-US/docs/Learn /en-US/docs/Web/Guide/Mobile /en-US/docs/Learn/CSS/CSS_layout/Responsive_Design /en-US/docs/Web/Guide/Mobile/A_hybrid_approach /en-US/docs/Learn/CSS/CSS_layout/Responsive_Design @@ -12197,7 +12196,7 @@ /en-US/docs/Web/Guide/Printing /en-US/docs/Web/CSS/CSS_media_queries/Printing /en-US/docs/Web/Guide/Responsive_design /en-US/docs/Web/Progressive_web_apps /en-US/docs/Web/Guide/Responsive_design/Responsive_design_references /en-US/docs/Web/Progressive_web_apps -/en-US/docs/Web/Guide/SVG-in-OpenType /en-US/docs/Web +/en-US/docs/Web/Guide/SVG-in-OpenType /en-US/docs/Web/Guide /en-US/docs/Web/Guide/Terminology /en-US/docs/Glossary /en-US/docs/Web/Guide/Touch_events /en-US/docs/Web/API/Touch_events /en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API /en-US/docs/Web/API/Page_Visibility_API @@ -13028,7 +13027,6 @@ /en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content /en-US/docs/Web/Security/Mixed_content#developer_console /en-US/docs/Web/Security/Public_Key_Pinning /en-US/docs/Web/Security/Certificate_Transparency /en-US/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types /en-US/docs/Learn/Server-side/Configuring_server_MIME_types -/en-US/docs/Web/Tutorials /en-US/docs/Learn /en-US/docs/Web/WebGL /en-US/docs/Web/API/WebGL_API /en-US/docs/Web/WebGL/Adding_2D_content_to_a_WebGL_context /en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context /en-US/docs/Web/WebGL/Animating_objects_with_WebGL /en-US/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL @@ -13217,7 +13215,7 @@ /en-US/docs/Web_Audio_API /en-US/docs/Web/API/Web_Audio_API /en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext /en-US/docs/Web/API/Web_Audio_API /en-US/docs/Web_Audio_API/Using_Web_Audio_API /en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API -/en-US/docs/Web_Development /en-US/docs/Web +/en-US/docs/Web_Development /en-US/docs/Web/Guide /en-US/docs/Web_Development/HTTP_cookies /en-US/docs/Web/HTTP/Cookies /en-US/docs/Web_Development/Introduction_to_Web_development /en-US/docs/Learn /en-US/docs/Web_Development/Mobile /en-US/docs/Learn/CSS/CSS_layout/Responsive_Design diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 3c47b4f68166731..270c6dadf7f32a0 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -91754,6 +91754,114 @@ "Bzbarsky" ] }, + "Web/Guide": { + "modified": "2020-12-10T17:35:22.294Z", + "contributors": [ + "chrisdavidmills", + "drjasmin667", + "jsx", + "Mojtaba-79", + "mfuji09", + "kammasreenew", + "roshan0708", + "toomt1414", + "Sheppy", + "jswisher", + "oyenirat", + "AdrianSkar", + "SphinxKnight", + "digimon1740", + "buoyantair", + "MrPj2u", + "wish1994", + "teoli", + "pgbowers", + "rukja", + "umacrawl", + "Tantek", + "qazwsx", + "Tigt", + "robfoster", + "wyrewolwerowany", + "AdamC", + "SpencerG", + "apoorva", + "keyitem", + "mahesh.syscraft", + "uleming", + "Onsteroids", + "yash_bedi", + "www_test", + "nicci.izzy", + "ethertank" + ] + }, + "Web/Guide/CSS/Getting_started/Challenge_solutions": { + "modified": "2019-08-29T20:48:33.765Z", + "contributors": [ + "Sebastianz", + "strael1", + "teoli", + "Jeremie", + "Sheppy", + "illourr", + "jswisher" + ] + }, + "Web/Guide/Parsing_and_serializing_XML": { + "modified": "2020-09-09T05:19:22.895Z", + "contributors": [ + "lionel-rowe", + "tjallingt", + "jabcreations", + "Sheppy", + "sideshowbarker", + "mikerissi", + "tonyfinn", + "Mkmelin", + "RomainLanz", + "rolfedh", + "southpolesteve", + "teoli", + "kscarfone", + "Tim_Morgan", + "gal007", + "ethertank", + "fusionchess", + "ziyunfei", + "Hsivonen", + "pincopalla", + "akorchev", + "kmaglione", + "Reno Greenleaf", + "lgreco", + "Brettz9", + "Kirschkern", + "ericjung", + "Mgjbot", + "Nickolay", + "IsNull", + "FST777", + "Nightstrike" + ] + }, + "Web/Guide/Performance": { + "modified": "2019-03-23T23:30:00.833Z", + "contributors": ["estelle", "chrisdavidmills", "shahzad11", "Sheppy"] + }, + "Web/Guide/User_input_methods": { + "modified": "2020-07-22T12:38:46.565Z", + "contributors": [ + "mfuji09", + "ericcastro", + "chrisdavidmills", + "KadirTopal", + "sprodrigues", + "MashKao", + "teoli", + "franciov" + ] + }, "Web/HTML": { "modified": "2020-12-14T11:30:14.748Z", "contributors": [ @@ -126997,6 +127105,88 @@ "mgoodwin" ] }, + "Web/Tutorials": { + "modified": "2020-10-06T14:08:41.328Z", + "contributors": [ + "chrisdavidmills", + "vasantha.h2kinfosys", + "jsx", + "belghoultechno", + "shehrozblogger", + "adambraimbridge", + "calin", + "partlybakedideas", + "AmateureCoder", + "devinea2", + "oyenirat", + "christopherwilson1", + "mfuji09", + "treyhuffine", + "jenlouie", + "webrating", + "Quantzilla", + "isabeljason", + "jsonmdn", + "Anonymous", + "stevea1", + "marvenwilsons", + "jstndwn", + "TornadoIDS", + "pgosk", + "jortoller", + "kdex", + "torazaburo", + "MoTTs", + "saidkocdemir", + "MusiqueGraeme", + "teoli", + "tusharcm", + "hosttor", + "wbamberg", + "TheKinkeroony", + "fscholz", + "Marijn", + "austinharper", + "Prabhakar_u", + "growssbill", + "Wisdom-Fifi", + "CrazyAlvaro", + "slippyten", + "LoTD", + "Minat", + "Penny", + "jensen", + "morello", + "jscape", + "shneeple", + "AdamC", + "SpencerG", + "mit7one", + "didinka20", + "jswisher", + "Nikaloz", + "rejithantony7@gmail.com", + "waylon531", + "anushbmx", + "carloshlira", + "jonsger", + "Oliver_Propst", + "arkapravamajumder", + "codepo8", + "Aleksej", + "ChaseWagoner", + "caglardursun", + "kunal_dhir", + "Domecraft", + "kscarfone", + "instanceofme", + "case", + "w3b_m4ster", + "taatzone", + "Sheppy", + "alispivak" + ] + }, "Web/WebDriver": { "modified": "2020-10-15T22:03:17.889Z", "contributors": [ diff --git a/files/en-us/web/accessibility/index.md b/files/en-us/web/accessibility/index.md index 4a8c18d22c04a76..a6448ffa71a7fd3 100644 --- a/files/en-us/web/accessibility/index.md +++ b/files/en-us/web/accessibility/index.md @@ -49,3 +49,4 @@ The MDN [Accessibility Learning Area](/en-US/docs/Learn/Accessibility) contains ## See also - [WAI Interest Group](https://www.w3.org/WAI/about/groups/waiig/) +- [Developer guides](/en-US/docs/Web/Guide) diff --git a/files/en-us/web/css/css_layout/index.md b/files/en-us/web/guide/css/css_layout/index.md similarity index 99% rename from files/en-us/web/css/css_layout/index.md rename to files/en-us/web/guide/css/css_layout/index.md index e00903dfe0d208f..151ae7f2b050cfa 100644 --- a/files/en-us/web/css/css_layout/index.md +++ b/files/en-us/web/guide/css/css_layout/index.md @@ -1,6 +1,6 @@ --- title: CSS Layout -slug: Web/CSS/CSS_Layout +slug: Web/Guide/CSS/CSS_Layout page-type: guide --- diff --git a/files/en-us/web/guide/css/getting_started/challenge_solutions/index.md b/files/en-us/web/guide/css/getting_started/challenge_solutions/index.md new file mode 100644 index 000000000000000..245590ca200110f --- /dev/null +++ b/files/en-us/web/guide/css/getting_started/challenge_solutions/index.md @@ -0,0 +1,352 @@ +--- +title: Challenge solutions +slug: Web/Guide/CSS/Getting_started/Challenge_solutions +page-type: guide +--- + +This page provides solutions to the challenges posed in the [CSS Getting Started](/en-US/docs/Learn/CSS/First_steps) tutorial. These are not the only possible solutions. The sections below correspond to the titles of the tutorial sections. + +## Why use CSS + +The challenges on page [Why use CSS](/en-US/docs/Learn/CSS/First_steps/How_CSS_works) are: + +### Colors + +- Challenge + - : Without looking up a reference, find five more color names that work in your stylesheet. +- Solution + - : CSS supports common color names like `orange`, `yellow`, `blue`, `green`, or `black`. It also supports some more exotic color names like `chartreuse`, `fuschia`, or `burlywood`. See [CSS Color value](/en-US/docs/Web/CSS/color_value) for a complete list as well as other ways of specifying colors. + +## How CSS works + +The challenges on page [How CSS works](/en-US/docs/Learn/CSS/First_steps/How_CSS_works) are: + +### DOM inspector + +- Challenge + - : In DOMi, click on a STRONG node. Use DOMi's right-hand pane to find out where the node's color is set to red, and where its appearance is made bolder than normal text. +- Solution + - : In the menu above the right-hand pane, choose **CSS Rules**. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the **font-weight** property as `bolder`; your stylesheet defines the **color** property as `red`. + +## Cascading and inheritance + +The challenges on page [Cascading and inheritance](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) are: + +### Inherited styles + +- Challenge + - : Change your stylesheet so that only the red letters are underlined. +- Solution + + - : Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this: + + ```css + p { + color: blue; + } + strong { + color: orange; + text-decoration: underline; + } + ``` + +Later sections of this tutorial describe style rules and declarations in greater detail. + +## Selectors + +The challenges on page [Selectors](/en-US/docs/Learn/CSS/Building_blocks/Selectors) are: + +### Second paragraph blue + +- Challenge + - : Without changing your HTML file, add a single rule to your CSS file that keeps all the initial letters the same color as they are now, but makes all the other text in the second paragraph blue. +- Solution + + - : Add a rule with an ID selector of `#second` and a declaration `color: blue;`, as shown below: + + ```css + #second { + color: blue; + } + ``` + + A more specific selector, `p#second` also works. + +### Both paragraphs blue + +- Challenge + - : Now change the rule you have just added (without changing anything else), to make the first paragraph blue too. +- Solution + + - : Change the selector of the new rule to be a tag selector using `p`: + + ```css + p { + color: blue; + } + ``` + +The rules for the other colors all have more specific selectors, so they override the blue of the paragraph. + +## Readable CSS + +### Commenting out a rule + +- Challenge + - : Comment out part of your stylesheet, without changing anything else, to make the very first letter of your document red. +- Solution + + - : One way to do this is to put comment delimiters around the rule for `.carrot`: + + ```css + /* + .carrot { + color: orange; + } + */ + ``` + +## Text styles + +### Big initial letters + +- Challenge + - : Without changing anything else, make all six initial letters twice the size in the browser's default serif font. +- Solution + + - : Add the following style declaration to the `strong` rule: + + ```css + font: 200% serif; + ``` + + If you use separate declarations for `font-size` and `font-family`, then the `font-style` setting on the first paragraph is _not_ overridden. + +## Color + +### Three-digit color codes + +- Challenge + - : In your CSS file, change all the color names to 3-digit color codes without affecting the result. +- Solution + + - : The following values are reasonable approximations of the named colors: + + ```css + strong { + color: #f00; /* red */ + background-color: #ddf; /* pale blue */ + font: 200% serif; + } + + .carrot { + color: #fa0; /* orange */ + } + + .spinach { + color: #080; /* dark green */ + } + + p { + color: #00f; /* blue */ + } + ``` + +## Content + +The challenges on page are: + +### Add an image + +- Challenge + - : Add a one rule to your stylesheet so that it displays the image at the start of each line. +- Solution + + - : Add this rule to your stylesheet: + + ```css + p::before { + content: url("yellow-pin.png"); + } + ``` + +## Lists + +The challenges on page [Lists](/en-US/docs/Learn/CSS/Styling_text/Styling_lists) are: + +### Lower Roman numerals + +- Challenge + - : Add a rule to your stylesheet, to number the oceans using Roman numerals from i to v. +- Solution + + - : Define a rule for list items to use the `lower-roman` list style: + + ```css + li { + list-style: lower-roman; + } + ``` + +### Capital letters + +- Challenge + - : Change your stylesheet to identify the headings with capital letters in parentheses. +- Solution + + - : Add a rule to the body element (parent of the headings) to reset a new counter, and one to display and increment the counter on the headings: + + ```css + /* numbered headings */ + body { + counter-reset: headnum; + } + h3::before { + content: "(" counter(headnum, upper-latin) ") "; + counter-increment: headnum; + } + ``` + +## Boxes + +The challenges on page [Boxes](/en-US/docs/Learn/CSS/Building_blocks) are: + +### Ocean border + +- Challenge + - : Add one rule to your stylesheet, making a wide border all around the oceans in a color that reminds you of the sea. +- Solution + + - : The following rule achieves this effect: + + ```css + ul { + border: 10px solid lightblue; + width: 100px; + } + ``` + +## Layout + +The challenges on page [Layout](/en-US/docs/Learn/CSS/CSS_layout) are: + +### Default image position + +### Fixed image position + +- Challenge + - : Change your sample document, `doc2.html`, adding this tag to it near the end, just before ``: `Yellow map pin` Predict where the image will appear in your document. Then refresh your browser to see if you were correct. +- Solution + - : The image appears to the right of the second list. + ![A list of five placeholder texts is titled Numbered Paragraphs. A yellow pin is placed to the right of a blue box containing the list.](pin_placement.png) +- Challenge + - : Add a rule to your stylesheet that places the image in the top right of your document. +- Solution + + - : The following rule achieves the desired result: + + ```css + #fixed-pin { + position: fixed; + top: 3px; + right: 3px; + } + ``` + +## Tables + +The challenges on page [Tables](/en-US/docs/Learn/CSS/Building_blocks/Styling_tables) are: + +### Borders on data cells only + +- Challenge + - : Change the stylesheet to make the table have a green border around only the data cells. +- Solution + + - : The following rule puts borders around only {{ HTMLElement("td") }} elements that are inside the {{ HTMLElement("tbody") }} element of the table with `id=demo-table`: + + ```css + #demo-table tbody td { + border: 1px solid #7a7; + } + ``` + +## Media + +The challenges on page [Media](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) are: + +### Separate print style file + +- Challenge + - : Move the print-specific style rules to a separate CSS file and import them into your `style4.css` stylesheet. +- Solution + + - : Cut and paste the lines between `/* print only */` and `/* end print only */` into a file named `style4_print.css`. In style4.css, add the following line at the beginning of the file: + + ```css + @import url("style4_print.css") print; + ``` + +### Heading hover color + +- Challenge + - : Make the headings turn blue when the mouse pointer is over them. +- Solution + + - : The following rule achieves the desired result: + + ```css + h1:hover { + color: blue; + } + ``` + +## JavaScript + +### Move box to the right + +- Challenge + - : Change the script so that the square jumps to the right by 20 em when its color changes, and jumps back afterwards. +- Solution + + - : Add lines to modify the `margin-left` property. Be sure to specify it as `marginLeft` in JavaScript. The following script achieves the desired result: + + ```js + // JavaScript demonstration + function doDemo(button) { + const square = document.getElementById("square"); + square.style.backgroundColor = "#fa4"; + square.style.marginLeft = "20em"; + button.setAttribute("disabled", "true"); + setTimeout(clearDemo, 2000, button); + } + + function clearDemo(button) { + const square = document.getElementById("square"); + square.style.backgroundColor = "transparent"; + square.style.marginLeft = "0em"; + button.removeAttribute("disabled"); + } + ``` + +## SVG and CSS + +### Change color of inner petals + +- Challenge + - : Change the stylesheet so that the inner petals all turn pink when the mouse pointer is over any one of them, without changing the way the outer petals work. +- Solution + + - : Move the position of the :hover pseudo-class from a specific petal, to all petals + + ```css + #inner-petals { + --segment-fill-fill-hover: pink; + } + + /* Non-standard way for some older browsers */ + #inner-petals:hover .segment-fill { + fill: pink; + stroke: none; + } + ``` diff --git a/files/en-us/web/guide/css/getting_started/challenge_solutions/pin_placement.png b/files/en-us/web/guide/css/getting_started/challenge_solutions/pin_placement.png new file mode 100644 index 000000000000000..ae6a23d79b8deae Binary files /dev/null and b/files/en-us/web/guide/css/getting_started/challenge_solutions/pin_placement.png differ diff --git a/files/en-us/web/guide/index.md b/files/en-us/web/guide/index.md new file mode 100644 index 000000000000000..9352e22cfc3b8eb --- /dev/null +++ b/files/en-us/web/guide/index.md @@ -0,0 +1,70 @@ +--- +title: Developer guides +slug: Web/Guide +page-type: landing-page +--- + + + +There are a number of guides within MDN docs. These articles aim to add additional usage examples, or teach you how to use an API or feature. This page links to some of the most popular material. + +## HTML + +- [Structuring the web with HTML](/en-US/docs/Learn/HTML) + - : The HTML learning area offers tutorials to help you learn HTML from the ground up. +- [HTML basics](/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics) + - : This article will give you a basic understanding of HTML. After following this guide, you can further explore the material in the HTML Learning Area. + +## CSS + +- [Learn to style HTML using CSS](/en-US/docs/Learn/CSS) + - : Our complete CSS tutorial, taking you from first steps through styling text, creating layouts, and more. +- [CSS Layout Guides](/en-US/docs/Web/Guide/CSS/CSS_Layout) + - : There are a large number of guides to CSS Layout across MDN, this page collects them all together. +- [Using CSS animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) + - : CSS animations make it possible to animate transitions from one CSS style configuration to another. This guide will help you get started with the animation properties. + +## JavaScript + +- [JavaScript learning area](/en-US/docs/Learn/JavaScript) + - : Whether you are a complete beginner, or hoping to refresh your skills, this is the place to start. + +## Media + +- [Audio and video delivery](/en-US/docs/Web/Media/Audio_and_video_delivery) + - : We can deliver audio and video on the web in several ways, ranging from 'static' media files to adaptive live streams. This article is intended as a starting point for exploring the various delivery mechanisms of web-based media and compatibility with popular browsers. +- [Audio and video manipulation](/en-US/docs/Web/Media/Audio_and_video_manipulation) + - : The beauty of the web is that you can combine technologies to create new forms. Having native audio and video in the browser means we can use these data streams with technologies such as {{htmlelement("canvas")}}, [WebGL](/en-US/docs/Web/API/WebGL_API) or [Web Audio API](/en-US/docs/Web/API/Web_Audio_API) to modify audio and video directly, for example adding reverb/compression effects to audio, or grayscale/sepia filters to video. This article provides a reference to explain what you need to do. + +## APIs + +- [Using FormData objects](/en-US/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects) + - : The [`FormData`](/en-US/docs/Web/API/FormData) object lets you compile a set of key/value pairs to send using {{domxref("fetch()")}}. It's primarily intended for sending form data, but can be used independently of forms to transmit keyed data. The transmission is in the same format that the form's `submit()` method would use to send the data if the form's encoding type were set to "multipart/form-data". +- [Progressive web apps](/en-US/docs/Web/Progressive_web_apps#core_pwa_guides) + - : Progressive web apps (PWAs) use modern web APIs along with traditional progressive enhancement strategy to create cross-platform web applications. These apps work everywhere and provide several features that give them the same user experience advantages as native apps. This set of guides tells you all you need to know about PWAs. +- [Parsing and serializing XML](/en-US/docs/Web/XML/Parsing_and_serializing_XML) + - : The web platform provides different methods of parsing and serializing XML, each with its pros and cons. + +## Performance + +- [Optimization and performance](/en-US/docs/Web/Performance) + - : When building modern web apps and sites, it's important to make your content work quickly and efficiently. This lets it perform effectively for both powerful desktop systems and weaker handheld devices. + +## Mobile web development + +- [Mobile web development](/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) + - : This article provides an overview of some main techniques needed to design websites that work well on mobile devices. + +## Fonts + +- [Variable fonts guide](/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) + - : Find out how to use variable fonts in your designs. +- [The Web Open Font Format (WOFF)](/en-US/docs/Web/CSS/CSS_fonts/WOFF) + - : WOFF (Web Open Font Format) is a font file format that is free for anyone to use on the web. + +## User interface development + +- [User input methods and controls](/en-US/docs/Learn/Forms/User_input_methods) + - : User input goes beyond just a mouse and keyboard: think of touchscreens for example. This article provides recommendations for managing user input and implementing controls in open web apps, along with FAQs, real-world examples, and links to further information for anyone needing more detailed information on the underlying technologies. diff --git a/files/en-us/web/index.md b/files/en-us/web/index.md index 077899379f5246b..48b7655a81a15f8 100644 --- a/files/en-us/web/index.md +++ b/files/en-us/web/index.md @@ -12,6 +12,10 @@ The open Web presents incredible opportunities for developers. To take full adva ## Documentation for Web developers +- [Web Developer Guide](/en-US/docs/Web/Guide) + - : The Web Developer Guide provides useful how-to content to help you actually use Web technologies to do what you want or need to do. +- [Tutorials for Web developers](/en-US/docs/Web/Tutorials) + - : Tutorials to take you step-by-step through learning HTML, CSS, JavaScript, and Web APIs. - [Accessibility](/en-US/docs/Web/Accessibility) - : Enabling as many people as possible to use websites, even when those people's abilities are limited in some way. - [Performance](/en-US/docs/Web/Performance) diff --git a/files/en-us/web/svg/tutorial/svg_and_css/index.md b/files/en-us/web/svg/tutorial/svg_and_css/index.md index f05562bc3374e06..b4da99f51af3e29 100644 --- a/files/en-us/web/svg/tutorial/svg_and_css/index.md +++ b/files/en-us/web/svg/tutorial/svg_and_css/index.md @@ -408,6 +408,12 @@ Notes about this demonstration: - SVG has its own CSS properties and values. Some of them are similar to CSS properties for HTML. +### Challenge + +Change the stylesheet so that the inner petals all turn pink when the mouse pointer is over any one of them, without changing the way the outer petals work. + +[See a solution to this challenge.](/en-US/docs/Web/Guide/CSS/Getting_started/Challenge_solutions#svg_and_css) + ## Simplified structure The SVG structure shown above could be written much more concise by referencing the individual parts of the flower via {{SVGElement("use")}} elements. This [behavior is standardized](https://www.w3.org/TR/SVG2/struct.html#UseStyleInheritance), though only a few browsers support the {{cssxref(":hover")}} pseudo-class and other more complex CSS selectors on elements referenced via `` elements, at the moment. There is [some discussion about what rules apply to such referenced elements](https://github.com/w3c/svgwg/issues/504). diff --git a/files/en-us/web/tutorials/index.md b/files/en-us/web/tutorials/index.md new file mode 100644 index 000000000000000..d921d4726476a79 --- /dev/null +++ b/files/en-us/web/tutorials/index.md @@ -0,0 +1,144 @@ +--- +title: Tutorials +slug: Web/Tutorials +page-type: landing-page +--- + +The links on this page lead to a variety of tutorials and training materials. Whether you are just starting, learning the basics, or are an old hand at web development, you can find helpful resources here for best practices. + +These resources are created by forward-thinking companies and web developers who have embraced open standards and best practices for web development and that provide or allow translations, through an open content license such as Creative Commons. + +## For complete beginners to the Web + +- [Getting started with the Web](/en-US/docs/Learn/Getting_started_with_the_web) + - : _Getting started with the Web_ is a concise series introducing you to the practicalities of web development. You'll set up the tools you need to construct a simple webpage and publish your own simple code. + +## HTML Tutorials + +### Introductory level + +- [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML) + - : This module sets the stage, getting you used to important concepts and syntax, looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a webpage. +- [MDN HTML element reference](/en-US/docs/Web/HTML/Element) + - : A comprehensive reference for HTML elements, and how the different browsers support them. +- [Creating a Simple Web Page with HTML](https://www.theblogstarter.com/html-for-beginners/) + - : An HTML guide for beginners that includes explanations of common tags, including HTML tags. Also includes a step-by-step guide to creating a basic web page with code examples. +- [HTML Challenges](https://wikiversity.org/wiki/Web_Design/HTML_Challenges) + - : Use these challenges to hone your HTML skills (for example, "Should I use an \

element or a \ element?"), focusing on meaningful markup. + +### Intermediate level + +- [Multimedia and embedding](/en-US/docs/Learn/HTML/Multimedia_and_embedding) + - : This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages. +- [HTML tables](/en-US/docs/Learn/HTML/Tables) + - : Representing tabular data on a webpage in an understandable, {{glossary("Accessibility", "accessible")}} way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries. + +### Advanced level + +- [HTML forms](/en-US/docs/Learn/Forms) + - : Forms are a very important part of the Web — these provide much of the functionality you need for interacting with websites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side parts of forms. +- [Tips for authoring fast-loading HTML pages](/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages) + - : Optimize web pages to provide a more responsive site for visitors and reduce the load on your web server and Internet connection. + +## CSS Tutorials + +### Introductory level + +- [CSS basics](/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics) + - : CSS (Cascading Style Sheets) is the code you use to style your webpage. _CSS Basics_ takes you through what you need to get started. We'll answer questions like: How do I make my text black or red? How do I make my content show up in such-and-such a place on the screen? How do I decorate my webpage with background images and colors? +- [CSS first steps](/en-US/docs/Learn/CSS/First_steps) + - : CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path toward CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML. +- [CSS building blocks](/en-US/docs/Learn/CSS/Building_blocks) + + - : This module carries on where [CSS first steps](/en-US/docs/Learn/CSS/First_steps) left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, it's time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more. + + The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like [text styling](/en-US/docs/Learn/CSS/Styling_text) and [CSS layout](/en-US/docs/Learn/CSS/CSS_layout). + +- [Selectors](/en-US/docs/Learn/CSS/Building_blocks/Selectors) + + - : Target HTML elements, including based on element state, with CSS. + +- [Specificity](/en-US/docs/Web/CSS/Specificity) + + - : Understanding the browser algorithm to determine which CSS declarations get applied to an element when there are competing declarations, with a [specificity quiz](https://estelle.github.io/CSS/selectors/exercises/specificity.html) + +- [Cascade & Inheritance](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) + + - : The cascade, specificity, and inheritance control how CSS is applied to HTML and how conflicts between style declarations are resolved. + +- [Styling text](/en-US/docs/Learn/CSS/Styling_text) + - : Here we look at text styling fundamentals, including setting font, boldness, and italics, line and letter spacing, and drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links. +- [Common CSS Questions](/en-US/docs/Learn/CSS/Howto/CSS_FAQ) + - : Common questions and answers for beginners. + +### Intermediate level + +- [CSS layout](/en-US/docs/Learn/CSS/CSS_layout) + - : At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and new fangled layout tools like flexbox. +- [CSS reference](/en-US/docs/Web/CSS/Reference) + - : Complete reference to CSS, with details on support by Firefox and other browsers. +- [Fluid Grids](https://alistapart.com/article/fluidgrids/) + - : Design layouts that fluidly resize with the browser window, while still using a typographic grid. +- [CSS Challenges](https://en.wikiversity.org/wiki/Web_Design/CSS_challenges) + - : Flex your CSS skills, and see where you need more practice. + +### Advanced level + +- [Using CSS transforms](/en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms) + - : Apply rotation, skewing, scaling, and translation using CSS. +- [CSS transitions](/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) + - : CSS transitions provide a way to animate changes to CSS properties, instead of having the changes take effect instantly. +- [Canvas tutorial](/en-US/docs/Web/API/Canvas_API/Tutorial) + - : Learn how to draw graphics using scripting using the canvas element. + +## JavaScript Tutorials + +### Introductory level + +- [JavaScript first steps](/en-US/docs/Learn/JavaScript/First_steps) + - : In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key JavaScript features in detail, such as variables, strings, numbers and arrays. +- [JavaScript building blocks](/en-US/docs/Learn/JavaScript/Building_blocks) + - : In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code blocks such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly. +- [Getting started with JavaScript](/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics) + - : What is JavaScript and how can it help you? +- [Codecademy](https://www.codecademy.com/) + - : Codecademy is an easy way to learn how to code JavaScript. It's interactive and you can do it with your friends. +- [freeCodeCamp](https://www.freecodecamp.org/learn) + - : freeCodeCamp teaches a variety of languages and frameworks for web development. It also has a [forum](https://forum.freecodecamp.org/), an [internet radio station](https://coderadio.freecodecamp.org), and a [blog](https://www.freecodecamp.org/news). + +### Intermediate level + +- [Introducing JavaScript objects](/en-US/docs/Learn/JavaScript/Objects) + - : In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages. The object-oriented nature of JavaScript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. Here we teach object theory and syntax in detail, look at how to create your own objects, and explain what JSON data is and how to work with it. +- [Client-side web APIs](/en-US/docs/Learn/JavaScript/Client-side_web_APIs) + - : When writing client-side JavaScript for websites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other websites or services. In this module, we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work. +- [Eloquent JavaScript](https://eloquentjavascript.net/) + - : A comprehensive guide to intermediate and advanced JavaScript methodologies. +- [Speaking JavaScript](https://exploringjs.com/es5/) + - : For programmers who want to learn JavaScript quickly and properly, and for JavaScript programmers who want to deepen their skills and/or look up specific topics. +- [Essential JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/) + - : An introduction to essential JavaScript design patterns. +- [JavaScript.info - The Modern JavaScript Tutorial](https://javascript.info/) + - : Part 1: The Language. Part 2: Working with Browsers. + +### Advanced level + +- [JavaScript Guide](/en-US/docs/Web/JavaScript/Guide) + - : A comprehensive, regularly updated guide to JavaScript for all levels of learning from beginner to advanced. +- [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS) + - : A series of books diving deep into the core mechanisms of the JavaScript language. +- [JavaScript Garden](https://github.com/BonsaiDen/JavaScript-Garden) + - : Documentation of the most quirky parts of JavaScript. +- [Exploring ES6](https://exploringjs.com/es6/) + - : Reliable and in-depth information on ECMAScript 2015. +- [JavaScript Patterns](https://github.com/chuanxshi/javascript-patterns) + - : A JavaScript pattern and anti-pattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM. +- [How browsers work](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/) + - : A detailed research article describing different modern browsers, their engines, page rendering etc. +- [JavaScript Videos](https://github.com/bolshchikov/js-must-watch) + - : A collection of JavaScript videos to watch. + +### Extension Development + +- [WebExtensions](/en-US/docs/Mozilla/Add-ons/WebExtensions) + - : WebExtensions is a cross-browser system for developing browser add-ons. To a large extent, the system is compatible with the [extension API](https://developer.chrome.com/docs/extensions/reference/) supported by Google Chrome and Opera. Extensions written for these browsers will in most cases run in Firefox or [Microsoft Edge](https://docs.microsoft.com/archive/microsoft-edge/legacy/developer/) with [just a few changes](https://extensionworkshop.com/documentation/develop/porting-a-google-chrome-extension/). The API is also fully compatible with [multiprocess Firefox](https://wiki.mozilla.org/Firefox/multiprocess).