Fix typos (#20311)

files/en-us/learn/common_questions/what_is_a_url/index.md

@@ -174,7 +174,7 @@ To better understand the following examples, let's assume that the URLs are call
         <pre>Skills/Infrastructure/Understanding_URLs</pre>
         <p>
           Because that URL does not start with <code>/</code>, the browser will
-          attempt to find the document in a sub-directory of the one containing
+          attempt to find the document in a subdirectory of the one containing
           the current resource. So in this example, we really want to reach
           this URL:
           https://developer.mozilla.org/en-US/docs/Learn/Skills/Infrastructure/Understanding_URLs.

files/en-us/learn/css/styling_text/web_fonts/index.md

@@ -174,7 +174,7 @@ You should end up with a demo page with some nice fonts implemented on them. Bec
 
 Online font services generally store and serve fonts for you so you don't have to worry about writing the `@font-face` code. Instead, you generally just need to insert a simple line or two of code into your site to make everything work. Examples include [Adobe Fonts](https://fonts.adobe.com/) and [Cloud.typography](https://www.typography.com/webfonts). Most of these services are subscription-based, with the notable exception of [Google Fonts](https://fonts.google.com/), a useful free service, especially for rapid testing work and writing demos.
 
-Most of these services are easy to use, so we won't cover them in great detail. Let's have a quick look at Google fonts so you can get the idea. Again, use copies of `web-font-start.html` and `web-font-start.css` as your starting point.
+Most of these services are easy to use, so we won't cover them in great detail. Let's have a quick look at Google Fonts so you can get the idea. Again, use copies of `web-font-start.html` and `web-font-start.css` as your starting point.
 
 1. Go to [Google Fonts](https://fonts.google.com/).
 2. Search for your favorite fonts or use the filters at the top of the page to display the kinds of fonts you want to choose and select a couple of fonts that you like.

files/en-us/learn/forms/advanced_form_styling/index.md

@@ -428,7 +428,7 @@ input[type="range"] {
 }
 ```
 
-However, it is very difficult to customize the style of the range control's drag handle — to get full control over range styling you'll need to use a whole bunch of complex CSS code, including multiple non-standard, browser-specific pseudo-elements. Check out [Styling Cross-Browser Compatible Range Inputs with CSS](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/) on CSS tricks for a detailed write up of what's needed.
+However, it is very difficult to customize the style of the range control's drag handle — to get full control over range styling you'll need to use a whole bunch of complex CSS code, including multiple non-standard, browser-specific pseudo-elements. Check out [Styling Cross-Browser Compatible Range Inputs with CSS](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/) on CSS tricks for a detailed write-up of what's needed.
 
 ### Color input types
 

files/en-us/learn/tools_and_testing/understanding_client-side_tools/package_management/index.md

@@ -361,7 +361,7 @@ npm install date-fns
 yarn add date-fns
 ```
 
-We also saw `install` in action above. This would directly add the `date-fns` package to the working directory in a sub-directory called `node_modules`, along with `date-fns`'s own dependencies.
+We also saw `install` in action above. This would directly add the `date-fns` package to the working directory in a subdirectory called `node_modules`, along with `date-fns`'s own dependencies.
 
 By default, this command will install the latest version of `date-fns`, but you can control this too. You can ask for `date-fns@1`, which gives you the latest 1.x version (which is 1.30.1). Or you could try `date-fns@^2.3.0`, which means the latest version after or including 2.3.0 (2.8.1 at the time of writing).
 

files/en-us/web/api/webgl_api/matrix_math_for_the_web/index.md

@@ -313,7 +313,7 @@ The real power of matrices comes from **matrix composition**. When matrices of a
 
 The order that matrices are multiplied in matters. When multiplying numbers, a \* b = c, and b \* a = c are both true. For example 3 \* 4 = 12, and 4 \* 3 = 12. In math these numbers would be described as **commutative**. Matrices are _not_ guaranteed to be the same if the order is switched, so matrices are **non-commutative**.
 
-Another mind-bender is that matrix multiplication in WebGL and CSS needs to happen in the reverse order that the operations intuitively happen. For instance, to scale something down by 80%, move it down 200 pixels, and then rotate about the origin 90 degrees would look something like the following in pseudo-code.
+Another mind-bender is that matrix multiplication in WebGL and CSS needs to happen in the reverse order that the operations intuitively happen. For instance, to scale something down by 80%, move it down 200 pixels, and then rotate about the origin 90 degrees would look something like the following in pseudocode.
 
 ```plain
   transformation = rotate * translate * scale

files/en-us/web/api/websockets_api/writing_websocket_servers/index.md

@@ -130,7 +130,7 @@ To read the payload data, you must know when to stop reading. That's why the pay
 
 ### Reading and unmasking the data
 
-If the MASK bit was set (and it should be, for client-to-server messages), read the next 4 octets (32 bits); this is the masking key. Once the payload length and masking key is decoded, you can read that number of bytes from the socket. Let's call the data `ENCODED`, and the key `MASK`. To get `DECODED`, loop through the octets (bytes a.k.a. characters for text data) of `ENCODED` and XOR the octet with the (i modulo 4)th octet of `MASK`. In pseudo-code (that happens to be valid JavaScript):
+If the MASK bit was set (and it should be, for client-to-server messages), read the next 4 octets (32 bits); this is the masking key. Once the payload length and masking key is decoded, you can read that number of bytes from the socket. Let's call the data `ENCODED`, and the key `MASK`. To get `DECODED`, loop through the octets (bytes a.k.a. characters for text data) of `ENCODED` and XOR the octet with the (i modulo 4)th octet of `MASK`. In pseudocode (that happens to be valid JavaScript):
 
 ```js
 const MASK = [1, 2, 3, 4]; // 4-byte mask

files/en-us/web/javascript/reference/operators/logical_and/index.md

@@ -55,7 +55,7 @@ To explicitly convert its return value (or any expression in general) to the cor
 The logical AND expression is a short-circuit operator.
 As each operand is converted to a boolean, if the result of one conversion is found to be `false`, the AND operator stops and returns the original value of that falsy operand; it does **not** evaluate any of the remaining operands.
 
-Consider the pseudo code below.
+Consider the pseudocode below.
 
 ```
 (some falsy expression) && expr