Fix typos and pseudo-typos 1

files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/editor/index.md

@@ -77,7 +77,7 @@ Now click on the play arrow in the top right corner of the scene to launch and r
 
 This looks great! Let's add more shapes to the scene to make it look more interesting.
 
-![PlayCanvas Editor - Boxrender](playcanvas-editor-boxrender.png)
+![PlayCanvas Editor - Box render](playcanvas-editor-boxrender.png)
 
 ## Adding more shapes
 
@@ -97,7 +97,7 @@ Now follow the same steps as we did before when coloring the cube:
 
 ![PlayCanvas Editor - Cylinder material](playcanvas-editor-cylindermaterial.png)
 
-Follow the same approach again to add a cone to the scene, giving it a grayish color (we used EAEFF2.) You should now have three shapes on your scene, something like the below screenshot.
+Follow the same approach again to add a cone to the scene, giving it a grayish color (we used `#EAEFF2`.) You should now have three shapes on your scene, something like the below screenshot.
 
 ![PlayCanvas Editor - Cone](playcanvas-editor-cone.png)
 

files/en-us/games/techniques/audio_for_web_games/index.md

@@ -143,7 +143,7 @@ The advantage is that we can prime one piece of audio and have our sprites ready
 
 ```js
 const myAudio = document.createElement("audio");
-myAudio.src = "mysprite.mp3";
+myAudio.src = "my-sprite.mp3";
 myAudio.play();
 myAudio.pause();
 ```

files/en-us/games/techniques/control_mechanisms/desktop_with_gamepad/index.md

@@ -346,7 +346,7 @@ if (gamepadAPI.buttonPressed("B")) {
 }
 ```
 
-## The paused and gameover states
+## The paused and game-over states
 
 We already learned how to control the whole lifecycle of the game: pausing the gameplay, restarting it, or getting back to the main menu. It works smooth on mobile and desktop, and adding gamepad controls is just as straightforward — in the `update()` function, we check to see if the current state status is `paused` — if so, the relevant actions are enabled:
 
@@ -360,7 +360,7 @@ if (GamepadAPI.buttons.pressed("Back")) {
 }
 ```
 
-Similarly, when the `gameover` state status is active, then we can allow the user to restart the game instead of continuing it:
+Similarly, when the "game-over" state status is active, then we can allow the user to restart the game instead of continuing it:
 
 ```js
 if (GamepadAPI.buttons.pressed("Start")) {

files/en-us/games/techniques/control_mechanisms/other/index.md

@@ -72,7 +72,7 @@ You can see it in action by watching [this video](https://www.youtube.com/watch?
 
 Have you ever thought about controlling a game only with your hands? It's possible with [Leap Motion](https://www.ultraleap.com/), an immersive controller for games and apps.
 
-Leapmotion is becoming more and more popular due to very good integration with VR headsets — demoing [Rainbow Membrane](https://mozilla.github.io/rainbow/) on an Oculus Rift with Leap Motion attached to it was voted one of the best WebVR experiences by JavaScript developers visiting demo booths at conferences around the world.
+Leap Motion is becoming more and more popular due to very good integration with VR headsets — demoing [Rainbow Membrane](https://mozilla.github.io/rainbow/) on an Oculus Rift with Leap Motion attached to it was voted one of the best WebVR experiences by JavaScript developers visiting demo booths at conferences around the world.
 
 As well as being great for virtual interfaces, it can also be used for a casual 2D gaming experiences. It would be very difficult to do everything with only your hands, but it's totally doable for the simple Captain Roger's gameplay — steering the ship and shooting the bullets.
 
@@ -158,15 +158,15 @@ The `diff` would be the difference between the initial position of the hand and
 
 This approach won't give us the full flexibility of using a Gamepad, or even Leap Motion, but it's definitely an interesting, unconventional alternative. You can use it to scroll a page hands-free, or play theremin, but it should also be enough to move the ship up and down the screen if implemented correctly.
 
-## MaKey MaKey
+## Makey Makey
 
-If you want to go completely bananas you can use [MaKey MaKey](https://makeymakey.com/), a board that can turn anything into a controller — it's all about connecting real-world, conductive objects to a computer and using them as touch interfaces.
+If you want to go completely bananas you can use [Makey Makey](https://makeymakey.com/), a board that can turn anything into a controller — it's all about connecting real-world, conductive objects to a computer and using them as touch interfaces.
 
 ![Controlling a banana piano using Makey Makey.](controls-banana.png)
 
 Check out the [banana piano video](https://www.youtube.com/watch?v=_DWQ6ce2Ags), and be sure to visit the [quick start guide](https://learn.sparkfun.com/tutorials/makey-makey-quickstart-guide) for all the needed info.
 
-There's even a [Cylon.js-supported Makey Button functionality](https://cylonjs.com/documentation/drivers/makey-button/) inspired by the MaKey MaKey board, so you can use the popular Cylon robotics framework for your experiments with Arduino or Raspberry Pi. Connecting the boards and using them may look like this:
+There's even a [Cylon.js-supported Makey Button functionality](https://cylonjs.com/documentation/drivers/makey-button/) inspired by the Makey Makey board, so you can use the popular Cylon robotics framework for your experiments with Arduino or Raspberry Pi. Connecting the boards and using them may look like this:
 
 ```js
 const Cylon = require("cylon");

files/en-us/games/techniques/tilemaps/index.md

@@ -133,4 +133,4 @@ In fast games that might still not be enough. An alternative method would be to
 
   - [Demos and source code](https://mozdevs.github.io/gamedev-js-tiles/)
   - [Grid parts and relationships](https://www.redblobgames.com/grids/parts/) by Amit Patel (May 2021)
-  - [Isometric graphics in videogames](https://en.wikipedia.org/wiki/Isometric_graphics_in_video_games_and_pixel_art) (Wikipedia)
+  - [Isometric graphics in video games](https://en.wikipedia.org/wiki/Isometric_graphics_in_video_games_and_pixel_art) (Wikipedia)

files/en-us/games/tutorials/2d_breakout_game_phaser/index.md

@@ -28,7 +28,7 @@ All the lessons — and the different versions of the [MDN Breakout game](https:
 6. [Bounce off the walls](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Bounce_off_the_walls)
 7. [Player paddle and controls](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Player_paddle_and_controls)
 8. [Game over](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Game_over)
-9. [Build the brickfield](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Build_the_brick_field)
+9. [Build the brick field](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Build_the_brick_field)
 10. [Collision detection](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Collision_detection)
 11. [The score](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/The_score)
 12. [Win the game](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Win_the_game)

files/en-us/glossary/accessible_name/index.md

@@ -18,7 +18,7 @@ Other elements get their accessible name from the content of associated elements
 
 For some elements, the accessible name comes from the element's attributes; for example, the `alt` attribute in the case of {{HTMLElement("img")}}. Given `<img src="grape.jpg" alt="banana"/>`, the image's accessible name is "banana."
 
-To create an association between visible content and an element or multiple text nodes and an element, the [`aria-labeledby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) attribute can be used. If there is no visible text to associate with a UI element needing an accessible name, the [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute can be used. Names should not be added to elements marking up inline text, like {{HTMLElement("code")}}, {{HTMLElement("del")}}, and {{HTMLElement("mark")}}.
+To create an association between visible content and an element or multiple text nodes and an element, the [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) attribute can be used. If there is no visible text to associate with a UI element needing an accessible name, the [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute can be used. Names should not be added to elements marking up inline text, like {{HTMLElement("code")}}, {{HTMLElement("del")}}, and {{HTMLElement("mark")}}.
 
 Many elements, such as sections of textual content, don't need an accessible name. All controls should have an accessible name. All images that convey information and aren't purely presentational do too.
 

files/en-us/glossary/entity_header/index.md

@@ -14,7 +14,7 @@ An entity header is an {{glossary("HTTP_header", "HTTP header")}} that describes
 In the following example, {{HTTPHeader("Content-Length")}} is an entity header, while {{HTTPHeader("Host")}} and {{HTTPHeader("User-Agent")}} are requests headers:
 
 ```http
-POST /myform.html HTTP/1.1
+POST /my-form.html HTTP/1.1
 Host: developer.mozilla.org
 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
 Content-Length: 128

files/en-us/glossary/falsy/index.md

@@ -6,6 +6,8 @@ page-type: glossary-definition
 
 {{GlossarySidebar}}
 
+<!-- cSpell:ignore falsey -->
+
 A **falsy** (sometimes written **falsey**) value is a value that is considered false when encountered in a {{Glossary("Boolean")}} context.
 
 {{Glossary("JavaScript")}} uses {{Glossary("Type_Conversion", "type conversion")}} to coerce any value to a Boolean in contexts that require it, such as {{Glossary("Conditional", "conditionals")}} and {{Glossary("Loop", "loops")}}.

files/en-us/glossary/fetch_metadata_request_header/index.md

@@ -8,7 +8,7 @@ page-type: glossary-definition
 
 A **fetch metadata request header** is an {{Glossary("Request header", "HTTP request header")}} that provides additional information about the context from which the request originated. This allows the server to make decisions about whether a request should be allowed based on where the request came from and how the resource will be used.
 
-With this information a server can implement a resource isolation policy, allowing external sites to request only those resources that are intended for sharing, and that are used appropriately. This approach can help mitigate common cross-site web vulnerabilities such as {{Glossary("CSRF")}}, Cross-site Script Inclusion('XSSI'), timing attacks, and cross-origin information leaks.
+With this information a server can implement a resource isolation policy, allowing external sites to request only those resources that are intended for sharing, and that are used appropriately. This approach can help mitigate common cross-site web vulnerabilities such as {{Glossary("CSRF")}}, Cross-site Script Inclusion (XSSI), timing attacks, and cross-origin information leaks.
 
 These headers are prefixed with `Sec-`, and hence have {{Glossary("Forbidden header name", "forbidden header names")}}. As such, they cannot be modified from JavaScript.
 

files/en-us/glossary/page_load_time/index.md

@@ -11,7 +11,7 @@ page-type: glossary-definition
 ```js
 let time = performance.timing;
 
-let pageloadtime = time.loadEventStart - time.navigationStart;
+let pageloadTime = time.loadEventStart - time.navigationStart;
 ```
 
 While page load time 'sounds' like the perfect web performance metric, it isn't. Load times can vary greatly between users depending on device capabilities, network conditions, and, to a lesser extent, distance from the server. The development environment, where page load time is measured, is likely an optimal experience, not reflective of your users' reality. In addition, web performance isn't just about when the load event happens. It's also about {{Glossary("perceived performance")}}, responsiveness, {{Glossary("jank")}} and jitter.

files/en-us/glossary/php/index.md

@@ -33,15 +33,15 @@ PHP (a recursive initialism for PHP: Hypertext Preprocessor) is an open-source s
 ```php
 <?php
   // variables
-  $nome='Danilo';
-  $sobrenome='Santos';
-  $pais='Brasil';
+  $name='Danilo';
+  $surname='Santos';
+  $country='Brasil';
   $email='[email protected]';
 
   // printing the variables
-  echo $nome;
-  echo $sobrenome;
-  echo $pais;
+  echo $name;
+  echo $surname;
+  echo $country;
   echo $email;
 ?>
 ```

files/en-us/glossary/response_header/index.md

@@ -23,7 +23,7 @@ Etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a"
 Keep-Alive: timeout=5, max=997
 Last-Modified: Mon, 18 Jul 2016 02:36:04 GMT
 Server: Apache
-Set-Cookie: mykey=myvalue; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure
+Set-Cookie: my-key=my value; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure
 Transfer-Encoding: chunked
 Vary: Cookie, Accept-Encoding
 X-Backend-Server: developer2.webapp.scl3.mozilla.com

files/en-us/learn/accessibility/multimedia/index.md

@@ -118,7 +118,7 @@ First of all, let's look at the HTML for the video player, in the HTML:
   </video>
 
   <div class="controls">
-    <button class="playpause">Play</button>
+    <button class="play-pause">Play</button>
     <button class="stop">Stop</button>
     <button class="rwd">Rwd</button>
     <button class="fwd">Fwd</button>
@@ -134,7 +134,7 @@ We've inserted some simple control buttons below our video. These controls of co
 We will first need to store references to each of the controls — add the following to the top of your JavaScript file:
 
 ```js
-const playPauseBtn = document.querySelector(".playpause");
+const playPauseBtn = document.querySelector(".play-pause");
 const stopBtn = document.querySelector(".stop");
 const rwdBtn = document.querySelector(".rwd");
 const fwdBtn = document.querySelector(".fwd");
@@ -250,7 +250,7 @@ It is not OK to publish an audio resource but promise to publish the transcript
 
 If you use an automated service, then you'll probably have to use the user interface that the tool provides. For example, take a look at our [Wait, ARIA Roles Have Categories?](https://www.youtube.com/watch?v=mwF-PpJOjMs) video and choose the three-dot menu (. . .) _> Show Transcript_. You'll see the transcript come up in a separate panel.
 
-If you are creating your own user interface to present your audio and associated transcript, you can do it however you like, but it might make sense to include it in a showable/hideable panel; see our [audio-transcript-ui](https://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/) example (also see the [source code](https://github.com/mdn/learning-area/tree/main/accessibility/multimedia/audio-transcript-ui)).
+If you are creating your own user interface to present your audio and associated transcript, you can do it however you like, but it might make sense to include it in a showable/hidable panel; see our [audio-transcript-ui](https://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/) example (also see the [source code](https://github.com/mdn/learning-area/tree/main/accessibility/multimedia/audio-transcript-ui)).
 
 ### Audio descriptions
 

files/en-us/learn/accessibility/wai-aria_basics/index.md

@@ -343,18 +343,18 @@ which is hidden from view using absolute positioning. When this is checked/unche
 
 ```js
 function toggleMusician(bool) {
-  const instruItem = formItems[formItems.length - 1];
+  const instrument = formItems[formItems.length - 1];
   if (bool) {
-    instruItem.input.disabled = false;
-    instruItem.label.style.color = "#000";
-    instruItem.input.setAttribute("aria-disabled", "false");
+    instrument.input.disabled = false;
+    instrument.label.style.color = "#000";
+    instrument.input.setAttribute("aria-disabled", "false");
     hiddenAlert.textContent =
       "Instruments played field now enabled; use it to tell us what you play.";
   } else {
-    instruItem.input.disabled = true;
-    instruItem.label.style.color = "#999";
-    instruItem.input.setAttribute("aria-disabled", "true");
-    instruItem.input.removeAttribute("aria-label");
+    instrument.input.disabled = true;
+    instrument.label.style.color = "#999";
+    instrument.input.setAttribute("aria-disabled", "true");
+    instrument.input.removeAttribute("aria-label");
     hiddenAlert.textContent = "Instruments played field now disabled.";
   }
 }

files/en-us/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md

@@ -54,7 +54,7 @@ There are several SFTP clients out there. Our demo covers [FileZilla](https://fi
 
 Open the FileZilla application; you should see something like this:
 
-![Screenshot of the user interface of Filezilla FTP application. Host input has focus.](filezilla-ui.png)
+![Screenshot of the user interface of FileZilla FTP application. Host input has focus.](filezilla-ui.png)
 
 ### Logging in
 

files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md

@@ -260,7 +260,7 @@ The individual properties include the {{cssxref("border-width")}}, {{cssxref("bo
 }
 ```
 
-There are longhand properities for width, style, and color for each of the four sides:
+There are longhand properties for width, style, and color for each of the four sides:
 
 ```css
 .box {

files/en-us/learn/css/building_blocks/cascade_layers/index.md

@@ -285,12 +285,12 @@ Let's look at the following example:
 
 ```css
 @import url("components-lib.css") layer(components);
-@import url("narrowtheme.css") layer(components.narrow);
+@import url("narrow-theme.css") layer(components.narrow);
 ```
 
 In the first line, we import `components-lib.css` into the `components` layer. If that file contains any layers, named or not, those layers become nested layers within the `components` layer.
 
-The second line imports `narrowtheme.css` into the `narrow` layer, which is a sub-layer of `components`. The nested `components.narrow` gets created as the last layer within the `components` layer, unless `components-lib.css` already contains a `narrow` layer, in which case, the contents of `narrowtheme.css` would be appended to the `components.narrow` nested layer. Additional nested named layers can be added to the `components` layer using the pattern `components.<layerName>`. As mentioned before, unnamed layers can be created but they cannot be accessed subsequently.
+The second line imports `narrow-theme.css` into the `narrow` layer, which is a sub-layer of `components`. The nested `components.narrow` gets created as the last layer within the `components` layer, unless `components-lib.css` already contains a `narrow` layer, in which case, the contents of `narrow-theme.css` would be appended to the `components.narrow` nested layer. Additional nested named layers can be added to the `components` layer using the pattern `components.<layerName>`. As mentioned before, unnamed layers can be created but they cannot be accessed subsequently.
 
 Let's look at another example, where we [import `layers1.css` into a named layer](#the_layer_block_at-rule_for_named_and_anonymous_layers) using the following statement:
 

files/en-us/learn/css/building_blocks/images_tasks/index.md

@@ -33,7 +33,7 @@ Try updating the live code below to recreate the finished example:
 
 In this task, you have a simple form. Your task is to make the following changes:
 
-- Use attribute selectors to target the search field and button inside `.myform`.
+- Use attribute selectors to target the search field and button inside `.my-form`.
 - Make the form field and button use the same text size as the rest of the form.
 - Give the form field and button 10 px of padding.
 - Give the button a background of `rebeccapurple`, white foreground, no border and rounded corners of 5px.

files/en-us/learn/css/building_blocks/organizing/index.md

@@ -157,7 +157,7 @@ After this section, we could define a few utility classes, for example, a class
 ```css
 /* || UTILITIES */
 
-.nobullets {
+.no-bullets {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -169,7 +169,7 @@ After this section, we could define a few utility classes, for example, a class
 Then we can add everything that is used sitewide. That might be things like the basic page layout, the header, navigation styling, and so on.
 
 ```css
-/* || SITEWIDE */
+/* SITEWIDE */
 
 .main-nav {
   /* … */

files/en-us/learn/css/first_steps/how_css_is_structured/index.md

@@ -184,8 +184,8 @@ Each CSS rule starts with a selector — or a list of selectors — in order to
 ```css
 h1
 a:link
-.manythings
-#onething
+.many-things
+#one-thing
 *
 .box p
 .box p:first-child