Merge branch 'main' into stop-{color,opacity}

.github/workflows/pr-check-lint_content.yml

@@ -101,6 +101,12 @@ jobs:
           echo "FM_LINT_FAILED=${FM_LINT_FAILED}" >> $GITHUB_ENV
 
           echo "Running Prettier"
+          PRETTIER_FAILED=false
+          PRETTIER_LOG=$(yarn prettier --check ${files_to_lint} 2>&1) || PRETTIER_FAILED=true
+          echo "PRETTIER_LOG<<${EOF}" >> $GITHUB_ENV
+          echo "${PRETTIER_LOG}" >> $GITHUB_ENV
+          echo "${EOF}" >> $GITHUB_ENV
+          echo "PRETTIER_FAILED=${PRETTIER_FAILED}" >> $GITHUB_ENV
           yarn prettier -w ${files_to_lint}
 
           if [[ -n $(git diff) ]]; then
@@ -110,16 +116,17 @@ jobs:
           # info for troubleshooting
           echo MD_LINT_FAILED=${MD_LINT_FAILED}
           echo FM_LINT_FAILED=${FM_LINT_FAILED}
+          echo PRETTIER_FAILED=${PRETTIER_FAILED}
           git diff
 
       - name: Setup reviewdog
-        if: env.FILES_MODIFIED == 'true' || env.MD_LINT_FAILED == 'true'
+        if: ${{ env.FILES_MODIFIED == 'true' || env.MD_LINT_FAILED == 'true' }}
         uses: reviewdog/action-setup@v1
         with:
           reviewdog_version: latest
 
       - name: Suggest changes using diff
-        if: env.FILES_MODIFIED == 'true'
+        if: ${{ env.FILES_MODIFIED == 'true' }}
         env:
           REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
@@ -134,7 +141,7 @@ jobs:
             -reporter=github-pr-review < "${TMPFILE}"
 
       - name: Add reviews for markdownlint errors
-        if: env.MD_LINT_FAILED == 'true'
+        if: ${{ env.MD_LINT_FAILED == 'true' }}
         env:
           REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
@@ -147,11 +154,31 @@ jobs:
             -reporter="github-pr-review"
 
       - name: Fail if any issues pending
-        if: env.FILES_MODIFIED == 'true' || env.MD_LINT_FAILED == 'true' || env.FM_LINT_FAILED == 'true'
+        if: ${{ env.FILES_MODIFIED == 'true' || env.MD_LINT_FAILED == 'true' || env.FM_LINT_FAILED == 'true' }}
+        env:
+          MD_LINT_FAILED: ${{ env.MD_LINT_FAILED }}
+          FM_LINT_FAILED: ${{ env.FM_LINT_FAILED }}
+          PRETTIER_FAILED: ${{ env.PRETTIER_FAILED }}
+          MD_LINT_LOG: ${{ env.MD_LINT_LOG }}
+          FM_LINT_LOG: ${{ env.FM_LINT_LOG }}
+          PRETTIER_LOG: ${{ env.PRETTIER_LOG }}
         run: |
-          echo -e "\nLogs from markdownlint:"
-          echo "${MD_LINT_LOG}"
-          echo -e "\nLogs from front-matter linter:"
-          echo "${FM_LINT_LOG}"
-          echo -e "\nPlease fix all the linting issues mentioned in above logs and in the review comments."
+          echo -e "\nPlease fix all the linting issues mentioned in the following logs and in the PR review comments."
+
+          if [[ ${MD_LINT_FAILED} == 'true' ]]; then
+            echo -e "\n\n🪵 Logs from markdownlint:"
+            echo "${MD_LINT_LOG}"
+          fi
+
+          if [[ ${FM_LINT_FAILED} == 'true' ]]; then
+            echo -e "\n\n🪵 Logs from front-matter linter:"
+            echo "${FM_LINT_LOG}"
+          fi
+
+          if [[ ${PRETTIER_FAILED} == 'true' ]]; then
+            echo -e "\n\n🪵 Logs from Prettier formatter:"
+            echo "${PRETTIER_LOG}"
+            echo -e "\nYou can use Prettier playground to format the files online (configuration pre-filled): https://prettier.io/playground/#N4Igxg9gdgLgprEAuEBiABABwIYGd7owAWc6CMAlgE6kBmFANqSTSADQgSaXS7KjYqVCAHcACoIR8U2BiOwBPPhwBGVbGADWcGAGVsAWzgAZClDjIYVAK5xV6rTt04wZgOaWbdkLjgGKnrYccAAemHBUFEawsgAqEVCCFHDStLK+HLjuTACK1hDwyGkMGSAAVrghutlweQUWSMWlAI758GLCmNIgeAC05nAAJkPsIFbYjO4AwhAGBtjIPQwMo1lQbkwAgjBWFCrW7RGm5kXp3kQwBgwA6kQU8LgucLpS9xQAbvcKi2C4yiDvWwASSgw1gujAkW4m1BuhgCiYpxK3kwwl813UmEWqJSEXeFg4Zl8VBgHWwbnmSNKOCoxMW8yomkGoigo1RZhg1wog2IyAAHAAGDg0VrUOBkikLRpnDgwbAqLk8ojIABMHGsvli8tSMpAfhUQ2Gg2M2HW1nJcAAYhAqPMdu5FtgDhAQABfV1AA \n"
+          fi
+
           exit 1

.vscode/dictionaries/ignore-list.txt

@@ -5,6 +5,7 @@ aaba
 aabaac
 aabbcc
 aabbccdd
+AACA
 aacbbbcac
 abaac
 abbbbbc
@@ -110,6 +111,7 @@ DSWbdfnrstvw
 dubby
 Duden
 dXNlcm5hbWU6cGFzc3dvcmQ
+EACC
 eirmod
 elitr
 ERHGDFy
@@ -144,6 +146,7 @@ futurelibrary.no
 gaesamplesite
 gims
 globalprivacycontrol.org
+glossarysidebar.yaml
 GNF576746573fhdg4737dh4
 gogerychwyrndrobwllllantysiliogogogoch
 Graece
@@ -182,6 +185,7 @@ kitchensink
 lambdatest
 Latine
 latinmodern-math
+learntocodewith.me
 leopardskin
 letmein
 libpkcs11testmodule
@@ -198,6 +202,7 @@ magis
 Mand
 manis
 Markmarkimark
+mdnsidebar.yaml
 megastore
 meinheld
 montecarlo

.vscode/dictionaries/non-english.txt

@@ -71,6 +71,7 @@ setembro
 shān
 studiorum
 tiene
+Tipos
 traducido
 trimestre
 tslí

.vscode/dictionaries/proper-names.txt

@@ -3,6 +3,7 @@ a11ysupport
 Academind
 Acrosync
 Addy
+Adham
 Adilah
 Akhgari
 alastairc
@@ -14,6 +15,7 @@ Amorim
 AMPPS
 Amstelvar
 Anand
+ANDI
 Andreessen
 Andrzej
 Anek
@@ -56,6 +58,7 @@ Bloggs
 Bocoup
 Boonie
 bottosson
+Boulton
 Brians
 Browserleaks
 Browsershots
@@ -65,6 +68,7 @@ BugZilla
 Bundlesize
 Bunyakovsky
 Burson
+Butterick
 Buzzcocks
 Bynens
 Bézier
@@ -81,6 +85,7 @@ Caterina
 Chadha
 Chakra
 Chamakh
+Chimero
 Chloé
 chrisdavidmills
 chrismills
@@ -101,6 +106,7 @@ Colomb
 ColorZilla
 Conde
 Condei
+COPPA
 Corber
 Cortana
 Coursera
@@ -116,6 +122,7 @@ Célestes
 Dahlkemper
 Dailymotion
 Danilo
+Dannaway
 Darmok
 Datumizer
 davbrito
@@ -172,6 +179,7 @@ Esben
 ethertank
 Exljbris
 Fairchild
+FDCP
 ffconf
 FileZilla
 Firefogg
@@ -220,6 +228,7 @@ Hidde
 Highrise
 Hildy
 hmatrjp
+Hobday
 Hobson
 hochan
 Hochberg
@@ -471,6 +480,7 @@ Rekapi
 Remy
 Resig
 Rhiana
+Riazhskikh
 Rigby
 Rocher
 Rohini

.vscode/dictionaries/terms-abbreviations.txt

@@ -21,6 +21,7 @@ ANMF
 anonymization
 antialiasing
 antitracking
+apideck
 APNG
 appcontent
 arcosh
@@ -529,6 +530,7 @@ quickmenu
 qvalues
 QWERTZ
 randomizer
+rari
 rasterizes
 RDBMS
 RDBMSes
@@ -562,6 +564,7 @@ retarget
 retargeted
 retargeting
 retargetings
+reviewdog
 RFCOMM
 RGTC
 roadmaps
@@ -879,6 +882,7 @@ xrayed
 Xrays
 XRCPU
 XSSI
+yari
 yearless
 Zalgo
 zoomable

files/en-us/learn_web_development/core/accessibility/index.md

@@ -21,7 +21,7 @@ You should be familiar with [HTML](/en-US/docs/Learn_web_development/Core/Struct
 
 - [What is accessibility?](/en-US/docs/Learn_web_development/Core/Accessibility/What_is_accessibility)
   - : This article starts off the module with a good look at what accessibility is — this includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.
-- [Accessibility tooling and assitive technology](/en-US/docs/Learn_web_development/Core/Accessibility/Tooling)
+- [Accessibility tooling and assistive technology](/en-US/docs/Learn_web_development/Core/Accessibility/Tooling)
   - : Next we turn our attention to accessibility tooling, providing information on the kinds of tools you can use to help solve accessibility issues, and the assistive technologies used by people with disabilities as they browse the web. You'll be using these tools throughout subsequent articles.
 - [HTML: A good basis for accessibility](/en-US/docs/Learn_web_development/Core/Accessibility/HTML)
   - : A great deal of web content can be made accessible just by making sure the correct HTML elements are always used for the correct purpose. This article looks in detail at how HTML can be used to ensure maximum accessibility.

files/en-us/learn_web_development/core/accessibility/mobile/index.md

@@ -20,9 +20,9 @@ With web access on mobile devices being so popular and renowned platforms such a
       <th scope="row">Learning outcomes:</th>
       <td>
         <ul>
-          <li>Familiarity with screenreaders on iOS and Android.</li>
+          <li>Familiarity with screen readers on iOS and Android.</li>
           <li>Familiarity with accessibility issues behind some types of events.</li>
-          <li>Specific techniques for more usable user input machanisms on mobile.</li>
+          <li>Specific techniques for more usable user input mechanisms on mobile.</li>
           <li>Know that mobile browsers provide specific usability advantages for specific <code>&lt;input&gt;</code> types such as <code>number</code> or <code>tel</code>.</li>
         </ul>
       </td>

files/en-us/learn_web_development/core/accessibility/tooling/index.md

@@ -35,7 +35,7 @@ Next we turn our attention to accessibility tooling, providing information on th
 
 ## Accessibility tools
 
-Let's have a look at the tools can make use of when implementing accessibile websites and fixing accessibility issues.
+Let's have a look at the tools can make use of when implementing accessible websites and fixing accessibility issues.
 
 ### Testing source order
 

files/en-us/learn_web_development/core/css_layout/grid_skills/index.md

@@ -359,4 +359,4 @@ You may try to use flexbox on the container and restrict the cards with percenta
 
 ## See also
 
-- [CSS stlying basics](/en-US/docs/Learn_web_development/Core/Styling_basics)
+- [CSS styling basics](/en-US/docs/Learn_web_development/Core/Styling_basics)

files/en-us/learn_web_development/core/css_layout/responsive_design/index.md

@@ -309,6 +309,7 @@ On mobile the heading is smaller, but on desktop, we see the larger heading size
 ```html live-sample___type-rwd
 <div class="wrapper">
   <div class="col1">
+    <h1>Watch my size!</h1>
     <p>
       This layout is responsive. See what happens if you make the browser window
       wider or narrow.
@@ -480,7 +481,7 @@ Responsive design refers to a site or application design that responds to the en
 
 It has also become much easier to achieve responsive designs with the help of the layout methods you have learned in these lessons. If you are new to web development today you have many more tools at your disposal than in the early days of responsive design. It is therefore worth checking the age of any materials you are using. While the historical articles are still useful, modern use of CSS and HTML makes it far easier to create elegant and useful designs, no matter what device your visitor views the site with.
 
-Next, we will studey media queries in more detail and show how to use them to solve some common problems.
+Next, we will study media queries in more detail and show how to use them to solve some common problems.
 
 ## See also
 

files/en-us/learn_web_development/core/index.md

@@ -10,7 +10,7 @@ Our **Core modules** cover topics that we feel every web developer should have a
 
 ## Prerequisites
 
-While there is no prequisite knowledge for starting this set of modules, we would recommend that you familiarize yourself with your computer, make sure you've got a basic set of required applications installed (such as web browsers and a code editor), and do some background reading on the web and web technologies, if you have no already done so. All these topics are covered in our [Getting started modules](/en-US/docs/Learn_web_development/Getting_started).
+While there is no prerequisite knowledge for starting this set of modules, we would recommend that you familiarize yourself with your computer, make sure you've got a basic set of required applications installed (such as web browsers and a code editor), and do some background reading on the web and web technologies, if you have no already done so. All these topics are covered in our [Getting started modules](/en-US/docs/Learn_web_development/Getting_started).
 
 In particular, if you've never done any coding before, we'd recommend the [Your first website](/en-US/docs/Learn_web_development/Getting_started/Your_first_website) module, which introduces you web technologies very gently and takes you through the process of building a simple website.
 

files/en-us/learn_web_development/core/structuring_content/creating_links/index.md

@@ -36,7 +36,7 @@ This article shows the syntax required to make a link, and discusses link best p
           <li>Path syntax in detail — slashes, single dot, and double dot.</li>
           <li>Link states and why they are important — <code>:hover</code>, <code>:focus</code>, <code>:visited</code>, and <code>:active</code>.</li>
           <li>Inline and block-level links.</li>
-          <li>Understanding the benefits of writing good link text, such as better accessibility for screenreader users, and potential positive SEO effects.</li>
+          <li>Understanding the benefits of writing good link text, such as better accessibility for screen reader users, and potential positive SEO effects.</li>
         </ul>
       </td>
     </tr>

files/en-us/learn_web_development/core/structuring_content/lists/index.md

@@ -769,7 +769,7 @@ textarea.onkeyup = () => {
 
 ## Test your skills!
 
-You've reached the end of this set of three articles about basic HTML semantic elementss, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: HTML text basics](/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills:_HTML_text_basics).
+You've reached the end of this set of three articles about basic HTML semantic elements, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: HTML text basics](/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills:_HTML_text_basics).
 
 ## Summary
 

files/en-us/learn_web_development/core/structuring_content/table_accessibility/index.md

@@ -25,8 +25,8 @@ In the previous article, we looked at one of the most important features for mak
       <th scope="row">Learning outcomes:</th>
       <td>
         <ul>
-          <li>An understanding of the accessibility issues associated with tables.<li>
-          <li>Adding captions to tables.<li>
+          <li>An understanding of the accessibility issues associated with tables.</li>
+          <li>Adding captions to tables.</li>
           <li>Better table structuring with head, body, and footer.</li>
           <li>Creating further association between headers and cells with the <code>scope</code>, <code>id</code>, and <code>headers</code> attributes.</li>
         </ul>

files/en-us/learn_web_development/core/styling_basics/box_model_tasks/index.md

@@ -51,13 +51,12 @@ body {
 <details>
 <summary>Click here to show the solution</summary>
 
-You will need to increase the height and width of the second block, to add the size of the padding and border:
+You will need to increase the width of the second block, to add the size of the padding and border:
 
 ```css
 .alternate {
   box-sizing: border-box;
   width: 390px;
-  height: 240px;
 }
 ```
 

files/en-us/learn_web_development/core/styling_basics/cascade_tasks/index.md

@@ -68,7 +68,9 @@ Then you need to remember there are special keyword values for all properties. I
 
 ## Task 2
 
-In this task, we want you to make your changes by leveraging the [order of cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts#order_of_cascade_layers) section. Edit an existing declaration, without touching the lightgreen declaration, using the cascade layer order to make the links rebeccapurple.
+In this task, we want you to manipulate the cascade layer order to color the links `rebeccapurple`. No editing the `lightgreen` declaration!
+
+This task is a stretch goal — it requires knowledge of cascade layers, which we didn't cover in the [Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) article. You can find the information you need to attempt this task at [Cascade layers > Determining the precedence based on the order of layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#determining_the_precedence_based_on_the_order_of_layers).
 
 Your final result should look like the image below:
 

files/en-us/learn_web_development/core/styling_basics/combinators/index.md

@@ -243,7 +243,7 @@ It is often better to create a simple class and apply that to the element in que
 
 ## Test your skills!
 
-You've reached the end of our set of lassons about selectors, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: Selectors](/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors/Selectors_Tasks).
+You've reached the end of our set of lessons about selectors, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: Selectors](/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors/Selectors_Tasks).
 
 ## Summary
 

files/en-us/learn_web_development/core/styling_basics/debugging_css/index.md

@@ -183,7 +183,7 @@ That's it for all the lessons in this module. To finish it off, we'll test your
 
 ## See also
 
-- [Firefox > Examing and edit CSS](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html), Firefox Source Docs
+- [Firefox > Examine and edit CSS](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html), Firefox Source Docs
 - [Chrome > View and change CSS](https://developer.chrome.com/docs/devtools/css/), developer.chrome.com
 
 {{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Tables", "Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension", "Learn_web_development/Core/Styling_basics")}}