diff --git a/files/en-us/learn_web_development/core/scripting/build_your_own_function/index.md b/files/en-us/learn_web_development/core/scripting/build_your_own_function/index.md
index 701c53c6b6fa54b..2c17a770051889e 100644
--- a/files/en-us/learn_web_development/core/scripting/build_your_own_function/index.md
+++ b/files/en-us/learn_web_development/core/scripting/build_your_own_function/index.md
@@ -28,7 +28,7 @@ With most of the essential theory dealt with in the previous article, this artic
   </tbody>
 </table>
 
-## Active learning: Let's build a function
+## Let's build a function
 
 The custom function we are going to build will be called `displayMessage()`. It will display a custom message box on a web page and will act as a customized replacement for a browser's built-in [`alert()`](/en-US/docs/Web/API/Window/alert) function. We've seen this before, but let's just refresh our memories. Type the following in your browser's JavaScript console, on any page you like:
 
@@ -148,18 +148,19 @@ You've now got your function definition written into your `<script>` element jus
 
 2. Now open your browser developer tools on the example page, go to the JavaScript console and type the line again there, you'll see it appear again! So this is fun — we now have a reusable function that we can call any time we like.
 
-   But we probably want it to appear in response to user and system actions. In a real application, such a message box would probably be called in response to new data being available, or an error having occurred, or the user trying to delete their profile ("are you sure about this?"), or the user adding a new contact and the operation completing successfully, etc.
+However, we probably want the message box to appear in response to user and system actions. In a real application, such a message box would probably be called in response to new data being available, or an error having occurred, or the user trying to delete their profile ("are you sure about this?"), or the user adding a new contact and the operation completing successfully, etc.
 
-   In this demo, we'll get the message box to appear when the user clicks the button.
+In this demo, we'll get the message box to appear when the user clicks the button.
+Here's the steps you should follow to get this working:
 
-3. Delete the previous line you added.
-4. Next, we'll select the button and store a reference to it in a constant. Add the following line to your code, above the function definition:
+1. Delete the previous line you added (`displayMessage();`).
+2. Select the `<button>` element and store a reference to it in a constant. Add the following line to your code, above the function definition:
 
    ```js
    const btn = document.querySelector("button");
    ```
 
-5. Finally, add the following line below the previous one:
+3. Create an event listener for button clicks that calls our function. Add the following line after the `const btn =` one:
 
    ```js
    btn.addEventListener("click", displayMessage);
@@ -167,7 +168,7 @@ You've now got your function definition written into your `<script>` element jus
 
    In a similar way to our closeBtn's click event handler, here we are calling some code in response to a button being clicked. But in this case, instead of calling an anonymous function containing some code, we are calling our `displayMessage()` function by name.
 
-6. Try saving and refreshing the page — now you should see the message box appear when you click the button.
+4. Finally, try saving and refreshing the page — now you should see the message box appear when you click the button.
 
 You might be wondering why we haven't included the parentheses after the function name. This is because we don't want to call the function immediately — only after the button has been clicked. If you try changing the line to
 
@@ -270,7 +271,7 @@ On to the next parameter. This one is going to involve slightly more work — we
    }
    ```
 
-   Here, if the `msgType` parameter is set as `'warning'`, the warning icon is displayed and the panel's background color is set to red. If it is set to `'chat'`, the chat icon is displayed and the panel's background color is set to aqua blue. If the `msgType` parameter is not set at all (or to something different), then the `else { }` part of the code comes into play, and the paragraph is given default padding and no icon, with no background panel color set either. This provides a default state if no `msgType` parameter is provided, meaning that it is an optional parameter!
+   Here, if the `msgType` parameter is set as `"warning"`, the warning icon is displayed and the panel's background color is set to red. If it is set to `"chat"`, the chat icon is displayed and the panel's background color is set to aqua blue. If the `msgType` parameter is not set at all (or to something different), then the `else { }` part of the code comes into play, and the paragraph is given default padding and no icon, with no background panel color set either. This provides a default state if no `msgType` parameter is provided, meaning that it is an optional parameter!
 
 5. Let's test out our updated function, try updating the `displayMessage()` call from this:
 
@@ -290,10 +291,6 @@ On to the next parameter. This one is going to involve slightly more work — we
 > [!NOTE]
 > If you have trouble getting the example to work, feel free to check your code against the [finished version on GitHub](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/functions/function-stage-4.html) ([see it running live](https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html) also), or ask us for help.
 
-## Test your skills!
-
-You've reached the end of this article, 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: Functions](/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Functions). These tests require skills that are covered in the next article, so you might want to read that first before trying the test.
-
 ## Summary
 
 Congratulations on reaching the end! This article took you through the entire process of building up a practical custom function, which with a bit more work could be transplanted into a real project. In the next article, we'll wrap up functions by explaining another essential related concept — return values.
diff --git a/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md b/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md
index c7787075349c656..132f2ef410bf5dc 100644
--- a/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md
+++ b/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md
@@ -39,9 +39,9 @@ Despite the limitations, Web APIs still give us access to a lot of functionality
 
 ![Important parts of web browser; the document is the web page. The window includes the entire document and also the tab. The navigator is the browser, which includes the window (which includes the document) and all other windows.](document-window-navigator.png)
 
-- The window is the browser tab that a web page is loaded into; this is represented in JavaScript by the {{domxref("Window")}} object. Using methods available on this object you can do things like return the window's size (see {{domxref("Window.innerWidth")}} and {{domxref("Window.innerHeight")}}), manipulate the document loaded into that window, store data specific to that document on the client-side (for example using a local database or other storage mechanism), attach an [event handler](/en-US/docs/Learn_web_development/Core/Scripting/Events) to the current window, and more.
-- The navigator represents the state and identity of the browser (i.e., the user-agent) as it exists on the web. In JavaScript, this is represented by the {{domxref("Navigator")}} object. You can use this object to retrieve things like the user's preferred language, a media stream from the user's webcam, etc.
-- The document (represented by the DOM in browsers) is the actual page loaded into the window, and is represented in JavaScript by the {{domxref("Document")}} object. You can use this object to return and manipulate information on the HTML and CSS that comprises the document, for example get a reference to an element in the DOM, change its text content, apply new styles to it, create new elements and add them to the current element as children, or even delete it altogether.
+- The **window** represents the browser tab that a web page is loaded into; this is represented in JavaScript by the {{domxref("Window")}} object. Using methods available on this object you can do things like return the window's size (see {{domxref("Window.innerWidth")}} and {{domxref("Window.innerHeight")}}), manipulate the document loaded into that window, store data specific to that document on the client-side (for example using a local database or other storage mechanism), attach an [event handler](/en-US/docs/Learn_web_development/Core/Scripting/Events) to the current window, and more.
+- The **navigator** represents the state and identity of the browser as it exists on the web. In JavaScript, this is represented by the {{domxref("Navigator")}} object. You can use this object to retrieve things like the user's preferred language, a media stream from the user's webcam, etc.
+- The **document** (represented by the DOM in browsers) is the actual page loaded into the window, and is represented in JavaScript by the {{domxref("Document")}} object. You can use this object to return and manipulate information on the HTML and CSS that comprises the document, for example get a reference to an element in the DOM, change its text content, apply new styles to it, create new elements and add them to the current element as children, or even delete it altogether.
 
 In this article we'll focus mostly on manipulating the document, but we'll show a few other useful bits besides.
 
@@ -65,7 +65,9 @@ We have created an example page at [dom-example.html](https://github.com/mdn/lea
     <section>
       <img
         src="dinosaur.png"
-        alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." />
+        alt="A red Tyrannosaurus Rex: A two legged dinosaur
+        standing upright like a human, with small arms, and a
+        large head with lots of sharp teeth." />
       <p>
         Here we will add a link to the
         <a href="https://www.mozilla.org/">Mozilla homepage</a>
@@ -92,9 +94,9 @@ Nodes are also referred to by their position in the tree relative to other nodes
 - **Parent node**: A node which has another node inside it. For example, `BODY` is the parent node of `SECTION` in the above example.
 - **Sibling nodes**: Nodes that sit on the same level under the same parent node in the DOM tree. For example, `IMG` and `P` are siblings in the above example.
 
-It is useful to familiarize yourself with this terminology before working with the DOM, as a number of the code terms you'll come across make use of them. You'll also come across them in CSS (e.g., descendant selector, child selector).
+It is useful to familiarize yourself with this terminology before working with the DOM, as a number of the code terms you'll come across make use of them. You'll also come across them in CSS (for example, descendant selector, child selector).
 
-## Active learning: Basic DOM manipulation
+## Doing some basic DOM manipulation
 
 To start learning about DOM manipulation, let's begin with a practical example.
 
@@ -263,17 +265,67 @@ In the next section we will look at a more practical use of DOM APIs.
 > [!NOTE]
 > You can find our [finished version of the dom-example.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/dom-example-manipulated.html) demo on GitHub ([see it live also](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html)).
 
-## Active learning: A dynamic shopping list
+## Creating a dynamic shopping list
 
-In this challenge we want to make a simple shopping list example that allows you to dynamically add items to the list using a form input and button. When you add an item to the input and press the button:
+In this exercise we want you to build a dynamic shopping list that allows you to add items using a form input and button. When you add enter an item and press the button:
 
 - The item should appear in the list.
 - Each item should be given a button that can be pressed to delete that item off the list.
-- The input should be emptied and focused ready for you to enter another item.
+- The input should be emptied and focused, ready for you to enter another item.
 
-The finished demo will look something like this:
+The finished demo will look something like the following — try it out before you build it!
 
-![Demo layout of a shopping list. A 'my shopping list' header followed by 'Enter a new item' with an input field and 'add item' button. The list of already added items is below, each with a corresponding delete button. ](shopping-list.png)
+```html hidden live-sample___dynamic-shopping-list
+<h1>My shopping list</h1>
+
+<div>
+  <label for="item">Enter a new item:</label>
+  <input type="text" name="item" id="item" />
+  <button>Add item</button>
+</div>
+
+<ul></ul>
+```
+
+```css hidden live-sample___dynamic-shopping-list
+li {
+  margin-bottom: 10px;
+}
+
+li button {
+  font-size: 12px;
+  margin-left: 20px;
+}
+```
+
+```js hidden live-sample___dynamic-shopping-list
+const list = document.querySelector("ul");
+const input = document.querySelector("input");
+const button = document.querySelector("button");
+
+button.addEventListener("click", () => {
+  const myItem = input.value;
+  input.value = "";
+
+  const listItem = document.createElement("li");
+  const listText = document.createElement("span");
+  const listBtn = document.createElement("button");
+
+  listItem.appendChild(listText);
+  listText.textContent = myItem;
+  listItem.appendChild(listBtn);
+  listBtn.textContent = "Delete";
+  list.appendChild(listItem);
+
+  listBtn.addEventListener("click", () => {
+    list.removeChild(listItem);
+  });
+
+  input.focus();
+});
+```
+
+{{EmbedLiveSample("dynamic-shopping-list", "100%", 300)}}
 
 To complete the exercise, follow the steps below, and make sure that the list behaves as described above.
 
@@ -281,7 +333,7 @@ To complete the exercise, follow the steps below, and make sure that the list be
 2. Create three variables that hold references to the list ({{htmlelement("ul")}}), {{htmlelement("input")}}, and {{htmlelement("button")}} elements.
 3. Create a [function](/en-US/docs/Learn_web_development/Core/Scripting/Functions) that will run in response to the button being clicked.
 4. Inside the function body, start off by storing the current [value](/en-US/docs/Web/API/HTMLInputElement/value) of the input element in a variable.
-5. Next, empty the input element by setting its value to an empty string — `''`.
+5. Next, empty the input element by setting its value to an empty string — `""`.
 6. Create three new elements — a list item ({{htmlelement('li')}}), {{htmlelement('span')}}, and {{htmlelement('button')}}, and store them in variables.
 7. Append the span and the button as children of the list item.
 8. Set the text content of the span to the input element value you saved earlier, and the text content of the button to 'Delete'.
@@ -289,9 +341,6 @@ To complete the exercise, follow the steps below, and make sure that the list be
 10. Attach an event handler to the delete button so that, when clicked, it will delete the entire list item (`<li>...</li>`).
 11. Finally, use the [`focus()`](/en-US/docs/Web/API/HTMLElement/focus) method to focus the input element ready for entering the next shopping list item.
 
-> [!NOTE]
-> If you get really stuck, have a look at our [finished shopping list](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/shopping-list-finished.html) ([see it running live also](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html)).
-
 ## Summary
 
 We have reached the end of our study of document and DOM manipulation. At this point you should understand what the important parts of a web browser are with respect to controlling documents and other aspects of the user's web experience. Most importantly, you should understand what the Document Object Model is, and how to manipulate it to create useful functionality.
diff --git a/files/en-us/learn_web_development/core/scripting/dom_scripting/shopping-list.png b/files/en-us/learn_web_development/core/scripting/dom_scripting/shopping-list.png
deleted file mode 100644
index 36c4151941cd43e..000000000000000
Binary files a/files/en-us/learn_web_development/core/scripting/dom_scripting/shopping-list.png and /dev/null differ
diff --git a/files/en-us/learn_web_development/core/scripting/events/index.md b/files/en-us/learn_web_development/core/scripting/events/index.md
index fa2eaee9f70c302..1a9c9e6b1873ea9 100644
--- a/files/en-us/learn_web_development/core/scripting/events/index.md
+++ b/files/en-us/learn_web_development/core/scripting/events/index.md
@@ -50,13 +50,7 @@ For example:
 
 You can gather from this (and from glancing at the MDN [event reference](/en-US/docs/Web/Events)) that there are **a lot** of events that can be fired.
 
-To react to an event, you attach an **event handler** to it. This is a block of code (usually a JavaScript function that you as a programmer create) that runs when the event fires.
-When such a block of code is defined to run in response to an event, we say we are **registering an event handler**.
-Note: Event handlers are sometimes called **event listeners** — they are pretty much interchangeable for our purposes, although strictly speaking, they work together.
-The listener listens out for the event happening, and the handler is the code that runs in response to it happening.
-
-> [!NOTE]
-> Web events are not part of the core JavaScript language — they are defined as part of the APIs built into the browser.
+To react to an event, you attach an **event listener** to it. This is a code feature that listens out for the event firing. When the event fires, an **event handler** function (referenced by, or contained inside the event listener) is called to respond to the event firing. When such a block of code is set up to run in response to an event, we say we are **registering an event handler**.
 
 ### An example: handling a click event
 
@@ -72,7 +66,7 @@ button {
 }
 ```
 
-Then we have some JavaScript. We'll look at this in more detail in the next section, but for now we can just say: it adds an event handler to the button's `"click"` event, and the handler reacts to the event by setting the page background to a random color:
+Then we have some JavaScript. We'll look at this in more detail in the next section, but for now we can just say: it adds an event listener to the button's `"click"` event, and the contained handler function reacts to the event by setting the page background to a random color:
 
 ```js
 const btn = document.querySelector("button");
@@ -93,7 +87,7 @@ The example output is as follows. Try clicking the button:
 
 ## Using addEventListener()
 
-As we saw in the last example, objects that can fire events have an {{domxref("EventTarget/addEventListener", "addEventListener()")}} method, and this is the recommended mechanism for adding event handlers.
+As we saw in the last example, objects that can fire events have an {{domxref("EventTarget/addEventListener", "addEventListener()")}} method, and this is the recommended mechanism for adding event listeners.
 
 Let's take a closer look at the code from the last example:
 
@@ -110,12 +104,12 @@ btn.addEventListener("click", () => {
 });
 ```
 
-The HTML {{HTMLElement("button")}} element will fire an event when the user clicks the button. So it defines an `addEventListener()` function, which we are calling here. We're passing in two parameters:
+The HTML {{HTMLElement("button")}} element will fire a `click` event when the user clicks it. We call the `addEventListener()` method on it to add an event listener; this takes two parameters:
 
-- the string `"click"`, to indicate that we want to listen to the click event. Buttons can fire lots of other events, such as [`"mouseover"`](/en-US/docs/Web/API/Element/mouseover_event) when the user moves their mouse over the button, or [`"keydown"`](/en-US/docs/Web/API/Element/keydown_event) when the user presses a key and the button is focused.
-- a function to call when the event happens. In our case, the function generates a random RGB color and sets the [`background-color`](/en-US/docs/Web/CSS/background-color) of the page [`<body>`](/en-US/docs/Web/HTML/Reference/Elements/body) to that color.
+- the string `"click"`, to indicate that we want to listen to the `click` event. Buttons can fire lots of other events, such as [`"mouseover"`](/en-US/docs/Web/API/Element/mouseover_event) when the user moves their mouse over the button, or [`"keydown"`](/en-US/docs/Web/API/Element/keydown_event) when the user presses a key and the button is focused.
+- a function to call when the event happens. In our case, the defined anonymous function generates a random RGB color and sets the [`background-color`](/en-US/docs/Web/CSS/background-color) of the page [`<body>`](/en-US/docs/Web/HTML/Reference/Elements/body) to that color.
 
-It is fine to make the handler function a separate named function, like this:
+You could also create a separate named function, and reference that in the second parameter of `addEventListener()`, like this:
 
 ```js
 const btn = document.querySelector("button");
@@ -144,43 +138,22 @@ It's just a copy of the simple random color example we've played with already. N
 - [`dblclick`](/en-US/docs/Web/API/Element/dblclick_event) — The color changes only when the button is double-clicked.
 - [`mouseover`](/en-US/docs/Web/API/Element/mouseover_event) and [`mouseout`](/en-US/docs/Web/API/Element/mouseout_event) — The color changes when the mouse pointer hovers over the button, or when the pointer moves off the button, respectively.
 
-Some events, such as `click`, are available on nearly any element. Others are more specific and only useful in certain situations: for example, the [`play`](/en-US/docs/Web/API/HTMLMediaElement/play_event) event is only available on some elements, such as {{htmlelement("video")}}.
+Some events, such as `click`, are available on nearly any element. Others are more specific and only useful in certain situations: for example, the [`play`](/en-US/docs/Web/API/HTMLMediaElement/play_event) event is only available on elements that have play functionality, such as {{htmlelement("video")}}.
 
 ### Removing listeners
 
-If you've added an event handler using `addEventListener()`, you can remove it again using the [`removeEventListener()`](/en-US/docs/Web/API/EventTarget/removeEventListener) method. For example, this would remove the `changeBackground()` event handler:
+If you've added an event listener using `addEventListener()`, you can remove it again if desired. The most common way to do this is by using the [`removeEventListener()`](/en-US/docs/Web/API/EventTarget/removeEventListener) method. For example, the following line would remove the `click` event handler we saw previously:
 
 ```js
 btn.removeEventListener("click", changeBackground);
 ```
 
-Event handlers can also be removed by passing an {{domxref("AbortSignal")}} to {{domxref("EventTarget/addEventListener()", "addEventListener()")}} and then later calling {{domxref("AbortController/abort()", "abort()")}} on the controller owning the `AbortSignal`.
-For example, to add an event handler that we can remove with an `AbortSignal`:
-
-```js-nolint
-const controller = new AbortController();
-
-btn.addEventListener("click",
-  () => {
-    const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`;
-    document.body.style.backgroundColor = rndCol;
-  },
-  { signal: controller.signal } // pass an AbortSignal to this handler
-);
-```
-
-Then the event handler created by the code above can be removed like this:
-
-```js
-controller.abort(); // removes any/all event handlers associated with this controller
-```
-
 For simple, small programs, cleaning up old, unused event handlers isn't necessary, but for larger, more complex programs, it can improve efficiency.
 Also, the ability to remove event handlers allows you to have the same button performing different actions in different circumstances: all you have to do is add or remove handlers.
 
 ### Adding multiple listeners for a single event
 
-By making more than one call to {{domxref("EventTarget/addEventListener()", "addEventListener()")}}, providing different handlers, you can have multiple handlers for a single event:
+By making more than one call to {{domxref("EventTarget/addEventListener()", "addEventListener()")}}, providing different handlers, you can have multiple handler functions running in response to a single event:
 
 ```js
 myElement.addEventListener("click", functionA);
@@ -195,10 +168,10 @@ We recommend that you use `addEventListener()` to register event handlers. It's
 
 ### Event handler properties
 
-Objects (such as buttons) that can fire events also usually have properties whose name is `on` followed by the name of the event. For example, elements have a property `onclick`.
-This is called an _event handler property_. To listen for the event, you can assign the handler function to the property.
+Objects (such as buttons) that can fire events also usually have properties whose name is `on` followed by the name of an event. For example, elements have a property `onclick`.
+This is called an **event handler property**. To listen for the event, you can assign the handler function to the property.
 
-For example, we could rewrite the random-color example like this:
+For example, we could rewrite the random color example like this:
 
 ```js
 const btn = document.querySelector("button");
@@ -230,14 +203,7 @@ function bgChange() {
 btn.onclick = bgChange;
 ```
 
-With event handler properties, you can't add more than one handler for a single event. For example, you can call `addEventListener('click', handler)` on an element multiple times, with different functions specified in the second argument:
-
-```js
-element.addEventListener("click", function1);
-element.addEventListener("click", function2);
-```
-
-This is impossible with event handler properties because any subsequent attempts to set the property will overwrite earlier ones:
+Event handler properties have disadvantages compared to `addEventListener()`. One of the most significant is that you can't [add more than one listener for a single event](#adding_multiple_listeners_for_a_single_event). The following pattern doesn't work, because any subsequent attempts to set the property value will overwrite earlier ones:
 
 ```js
 element.onclick = function1;
@@ -248,7 +214,7 @@ element.onclick = function2;
 
 You might also see a pattern like this in your code:
 
-```html
+```html example-bad
 <button onclick="bgChange()">Press me</button>
 ```
 
@@ -259,10 +225,10 @@ function bgChange() {
 }
 ```
 
-The earliest method of registering event handlers found on the Web involved [_event handler HTML attributes_](/en-US/docs/Web/HTML/Reference/Attributes#event_handler_attributes) (or _inline event handlers_) like the one shown above — the attribute value is literally the JavaScript code you want to run when the event occurs.
+The earliest method of registering event handlers found on the Web involved [_event handler HTML attributes_](/en-US/docs/Web/HTML/Reference/Attributes#event_handler_attributes) (or _inline event handlers_) like the one shown above — the attribute value contains the JavaScript code you want to run when the event occurs.
 The above example invokes a function defined inside a {{htmlelement("script")}} element on the same page, but you could also insert JavaScript directly inside the attribute, for example:
 
-```html
+```html example-bad
 <button onclick="alert('Hello, this is my old-fashioned event handler!');">
   Press me
 </button>
@@ -293,7 +259,7 @@ Finally, many common server configurations will disallow inline JavaScript, as a
 
 Sometimes, inside an event handler function, you'll see a parameter specified with a name such as `event`, `evt`, or `e`.
 This is called the **event object**, and it is automatically passed to event handlers to provide extra features and information.
-For example, let's rewrite our random color example again slightly:
+For example, let's rewrite our random color example to include an event object:
 
 ```js
 const btn = document.querySelector("button");
@@ -319,8 +285,8 @@ The `target` property of the event object is always a reference to the element t
 So, in this example, we are setting a random background color on the button, not the page.
 
 > [!NOTE]
-> You can use any name you like for the event object — you just need to choose a name that you can then use to reference it inside the event handler function.
-> `e`/`evt`/`event` is most commonly used by developers because they are short and easy to remember.
+> You can use any name you like for the event object — you just need to choose a name that you can reference inside the event handler function.
+> `e`, `evt`, and `event` are commonly used by developers because they are short and easy to remember.
 > It's always good to be consistent — with yourself, and with others if possible.
 
 ### Extra properties of event objects
@@ -365,7 +331,7 @@ Let's look at an example.
 First, a simple HTML form that requires you to enter your first and last name:
 
 ```html
-<form>
+<form action="#">
   <div>
     <label for="fname">First name: </label>
     <input id="fname" type="text" />
@@ -387,7 +353,7 @@ div {
 }
 ```
 
-Now some JavaScript — here we implement a very simple check inside a handler for the [`submit`](/en-US/docs/Web/API/HTMLFormElement/submit_event) event (the submit event is fired on a form when it is submitted) that tests whether the text fields are empty.
+Now some JavaScript — here we implement a basic check inside a handler for the [`submit`](/en-US/docs/Web/API/HTMLFormElement/submit_event) event (the submit event is fired on a form when it is submitted) that tests whether the text fields are empty.
 If they are, we call the [`preventDefault()`](/en-US/docs/Web/API/Event/preventDefault) function on the event object — which stops the form submission — and then display an error message in the paragraph below our form to tell the user what's wrong:
 
 ```js
@@ -405,12 +371,8 @@ form.addEventListener("submit", (e) => {
 ```
 
 Obviously, this is pretty weak form validation — it wouldn't stop the user from validating the form with spaces or numbers entered into the fields, for example — but it is OK for example purposes.
-The output is as follows:
 
-{{ EmbedLiveSample('Preventing_default_behavior', '100%', 180, "", "") }}
-
-> [!NOTE]
-> For the full source code, see [preventdefault-validation.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/preventdefault-validation.html) (also see it [running live](https://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html) here).
+You can see the full example [running live](https://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html) — try it out there. For the full source code, see [preventdefault-validation.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/preventdefault-validation.html).
 
 ## It's not just web pages
 
@@ -419,10 +381,10 @@ In fact, the event model in JavaScript for web pages differs from the event mode
 
 For example, [Node.js](/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs) is a very popular JavaScript runtime that enables developers to use JavaScript to build network and server-side applications.
 The [Node.js event model](https://nodejs.org/api/events.html) relies on listeners to listen for events and emitters to emit events periodically — it doesn't sound that different, but the code is quite different, making use of functions like `on()` to register an event listener, and `once()` to register an event listener that unregisters after it has run once.
-The [HTTP connect event docs](https://nodejs.org/api/http.html#event-connect) provide a good example.
+The Node.js [HTTP connect event docs](https://nodejs.org/api/http.html#event-connect) provide a good example.
 
 You can also use JavaScript to build cross-browser add-ons — browser functionality enhancements — using a technology called [WebExtensions](/en-US/docs/Mozilla/Add-ons/WebExtensions).
-The event model is similar to the web events model, but a bit different — event listeners' properties are written in {{Glossary("camel_case", "camel case")}} (such as `onMessage` rather than `onmessage`), and need to be combined with the `addListener` function.
+The event model is similar to the web events model, but a bit different — event listener properties are written in {{Glossary("camel_case", "camel case")}} (such as `onMessage` rather than `onmessage`), and need to be combined with the `addListener` function.
 See the [`runtime.onMessage`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage#examples) page for an example.
 
 You don't need to understand anything about other such environments at this stage in your learning; we just wanted to make it clear that events can differ in different programming environments.
diff --git a/files/en-us/learn_web_development/core/scripting/functions/index.md b/files/en-us/learn_web_development/core/scripting/functions/index.md
index 83e19d6de2e5aee..fb8201ff96f4d21 100644
--- a/files/en-us/learn_web_development/core/scripting/functions/index.md
+++ b/files/en-us/learn_web_development/core/scripting/functions/index.md
@@ -327,12 +327,12 @@ Let's talk a bit about {{glossary("scope")}} — a very important concept when d
 
 The top-level outside all your functions is called the **global scope**. Values defined in the global scope are accessible from everywhere in the code.
 
-JavaScript is set up like this for various reasons — but mainly because of security and organization. Sometimes you don't want variables to be accessible from everywhere in the code — external scripts that you call in from elsewhere could start to mess with your code and cause problems because they happen to be using the same variable names as other parts of the code, causing conflicts. This might be done maliciously, or just by accident.
+JavaScript is set up like this for various reasons — but mainly because of security and organization. Sometimes you don't want variables to be accessible from everywhere in the code. External scripts that you call in from elsewhere could start to mess with your code and cause problems because they happen to be using the same variable names as other parts of the code, causing conflicts. This might be done maliciously, or just by accident.
 
-For example, say you have an HTML file that is calling in two external JavaScript files, and both of them have a variable and a function defined that use the same name:
+For example, say you have an HTML file referencing two external JavaScript files, and both of them have a variable and a function defined that use the same name:
 
 ```html
-<!-- Excerpt from my HTML -->
+<!-- Excerpt from the HTML -->
 <script src="first.js"></script>
 <script src="second.js"></script>
 <script>
@@ -356,22 +356,23 @@ function greeting() {
 }
 ```
 
-You will see that the second script does not load and run at all, and an error is printed in the console: `Uncaught SyntaxError: Identifier 'name' has already been declared`. This is because the `name` constant is already declared in `first.js`, and you can't declare the same constant twice in the same scope. Because the second script did not load, the `greeting()` function from `second.js` is not available to be called. Therefore, you will see an alert box displaying `Hello Chris: welcome to our company.`.
+You can see this example [running live on GitHub](https://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html) (see also the [source code](https://github.com/mdn/learning-area/tree/main/javascript/building-blocks/functions)). Load it in a separate browser tab before reading the explanation below.
 
-Try removing the second `const name = "Zaptec";` line from `second.js` and reloading the page. Now both scripts execute, and the alert box says `Our company is called Chris.`. Functions are allowed to be redeclared, and the last declaration gets used. The previous declarations are effectively overwritten.
+- When the example renders in a browser, you will first see an alert box displaying `Hello Chris: welcome to our company.`, meaning that the `greeting()` function defined inside the first script file has been called by the `greeting()` call inside the internal script.
 
-> [!NOTE]
-> You can see this example [running live on GitHub](https://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html) (see also the [source code](https://github.com/mdn/learning-area/tree/main/javascript/building-blocks/functions)).
+- The second script, however, does not load and run at all, and an error is printed in the console: `Uncaught SyntaxError: Identifier 'name' has already been declared`. This is because the `name` constant is already declared in `first.js`, and you can't declare the same constant twice in the same scope. Because the second script did not load, the `greeting()` function from `second.js` is not available to be called.
+
+- If we were to remove the `const name = "Zaptec";` line from `second.js` and reload the page, both scripts would execute. The alert box would now say `Our company is called Chris.` Functions _can_ be redeclared, and the last declaration in the source order is used. The previous declarations are effectively overwritten.
 
-Keeping parts of your code locked away in functions avoids such problems, and is considered the best practice.
+Keeping parts of your code locked away in functions avoids such problems, and is considered a best practice.
 
-It is a bit like a zoo. The lions, zebras, tigers, and penguins are kept in their own enclosures and only have access to the things inside their enclosures — in the same manner as the function scopes. If they were able to get into other enclosures, problems would occur. At best, different animals would feel really uncomfortable inside unfamiliar habitats — a lion or tiger would feel terrible inside the penguins' watery, icy domain. At worst, the lions and tigers might try to eat the penguins!
+It is a bit like a zoo. The lions, zebras, tigers, and penguins are kept in their own enclosures and only have access to the things inside — in the same manner as the function scopes. If they were able to get into other enclosures, problems would occur. At best, different animals would feel really uncomfortable inside unfamiliar habitats — a lion or tiger would feel terrible inside the penguins' watery, icy domain. At worst, the lions and tigers might try to eat the penguins!
 
 ![Four different animals enclosed in their respective habitat in a Zoo](mdn-mozilla-zoo.png)
 
 The zoo keeper is like the global scope — they have the keys to access every enclosure, restock food, tend to sick animals, etc.
 
-### Active learning: Playing with scope
+### Playing with scope
 
 Let's look at a real example to demonstrate scoping.
 
@@ -392,7 +393,7 @@ Let's look at a real example to demonstrate scoping.
    output(z);
    ```
 
-   Both of these should throw an error into the console along the lines of "[ReferenceError: y is not defined](/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined)". Why is that? Because of function scope, `y` and `z` are locked inside the `a()` and `b()` functions, so `output()` can't access them when called from the global scope.
+   Both of these should throw an error into the console along the lines of "[ReferenceError: y is not defined](/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined)". Why is that? Because of function scope: `y` and `z` are locked inside the `a()` and `b()` functions, so `output()` can't access them when called from the global scope.
 
 5. However, what about when it's called from inside another function? Try editing `a()` and `b()` so they look like this:
 
@@ -415,7 +416,7 @@ Let's look at a real example to demonstrate scoping.
    b();
    ```
 
-   You should see the `y` and `z` values printed in the browser viewport. This works fine, as the `output()` function is being called inside the other functions — in the same scope as the variables it is printing are defined in, in each case. `output()` itself is available from anywhere, as it is defined in the global scope.
+   You should see the `y` and `z` values printed in the browser viewport. This works fine, as the `output()` function is being called inside the other functions, in the same scope as the variables it is printing are defined in. `output()` itself is available from anywhere, as it is defined in the global scope.
 
 6. Now try updating your code like this:
 
@@ -469,10 +470,6 @@ Let's look at a real example to demonstrate scoping.
 > [!NOTE]
 > The [ReferenceError: "x" is not defined](/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined) error is one of the most common you'll encounter. If you get this error and you are sure that you have defined the variable in question, check what scope it is in.
 
-## Test your skills!
-
-You've reached the end of this article, 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: Functions](/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Functions). These tests require skills that are covered in the next two articles, so you might want to read those first before trying them.
-
 ## Summary
 
 This article has explored the fundamental concepts behind functions, paving the way for the next one in which we get practical and take you through the steps to building up your own custom function.
diff --git a/files/en-us/learn_web_development/core/scripting/json/index.md b/files/en-us/learn_web_development/core/scripting/json/index.md
index fddebc181bd6cf5..5a1a5753b489858 100644
--- a/files/en-us/learn_web_development/core/scripting/json/index.md
+++ b/files/en-us/learn_web_development/core/scripting/json/index.md
@@ -47,7 +47,7 @@ A JSON string can be stored in its own file, which is basically just a text file
 
 As described above, JSON is a string whose format very much resembles JavaScript object literal format.
 The following is a valid JSON string representing an object.
-Note how it is also a valid JavaScript object literal — just with some more [syntax restrictions](#json_syntax_restrictions).
+Note that it is also a valid JavaScript object literal — just with some more [syntax restrictions](#json_syntax_restrictions).
 
 ```json
 {
@@ -157,9 +157,9 @@ You should be careful to validate any data you are attempting to use (although c
 You can validate JSON using an application like [JSONLint](https://jsonlint.com/) or [JSON-validate](https://www.json-validate.com/)
 
 > [!NOTE]
-> Now you've read through this section, you might also want to supplement your learning with Scrimba's [JSON review](https://scrimba.com/frontend-path-c0j/~0lt?via=mdn) <sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup> interactive tutorial, which provide some useful guidance around basic JSON syntax and how to view JSON request data inside your browser's devtools.
+> Now you've read through this section, you might also want to supplement your learning with Scrimba's [JSON review](https://scrimba.com/frontend-path-c0j/~0lt?via=mdn) <sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup> interactive tutorial, which provides some useful guidance around basic JSON syntax and how to view JSON request data inside your browser's devtools.
 
-## Active learning: Working through a JSON example
+## Working through a JSON example
 
 So, let's work through an example to show how we could make use of some JSON formatted data on a website.
 
@@ -282,7 +282,7 @@ function populateHeroes(obj) {
 
 To start with, we store the `members` property of the JavaScript object in a new variable. This array contains multiple objects that contain the information for each hero.
 
-Next, we use a [for...of loop](/en-US/docs/Learn_web_development/Core/Scripting/Loops#the_for...of_loop) to loop through each object in the array. For each one, we:
+Next, we use a [`for...of` loop](/en-US/docs/Learn_web_development/Core/Scripting/Loops#the_for...of_loop) to iterate through each object in the array. For each one, we:
 
 1. Create several new elements: an `<article>`, an `<h2>`, three `<p>`s, and a `<ul>`.
 2. Set the `<h2>` to contain the current hero's `name`.
diff --git a/files/en-us/learn_web_development/core/scripting/return_values/index.md b/files/en-us/learn_web_development/core/scripting/return_values/index.md
index 36ca7edaea59c43..3e2cf1f660b70ef 100644
--- a/files/en-us/learn_web_development/core/scripting/return_values/index.md
+++ b/files/en-us/learn_web_development/core/scripting/return_values/index.md
@@ -56,7 +56,7 @@ Some functions don't return any value. (In these cases, our reference pages list
 
 Generally, a return value is used where the function is an intermediate step in a calculation of some kind. You want to get to a final result, which involves some values that need to be calculated by a function. After the function calculates the value, it can return the result so it can be stored in a variable; and you can use this variable in the next stage of the calculation.
 
-## Using return values in your own functions
+## How to return a value
 
 To return a value from a custom function, you need to use the [`return`](/en-US/docs/Web/JavaScript/Reference/Statements/return) keyword. We saw this in action recently in our [random-canvas-circles.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/random-canvas-circles.html) example. Our `draw()` function draws 100 random circles somewhere on an HTML {{htmlelement("canvas")}}:
 
@@ -72,7 +72,7 @@ function draw() {
 }
 ```
 
-Inside each loop iteration, three calls are made to the `random()` function, to generate a random value for the current circle's _x-coordinate_, _y-coordinate_, and _radius_, respectively. The `random()` function takes one parameter — a whole number — and returns a whole random number between `0` and that number. It looks like this:
+Inside each loop iteration, three calls are made to the `random()` function, to generate a random value for the current circle's _x-coordinate_, _y-coordinate_, and _radius_, respectively. The `random()` function takes one parameter — a whole number — and returns a random whole number between `0` and that number. It looks like this:
 
 ```js
 function random(number) {
@@ -99,7 +99,7 @@ So when you execute the following:
 ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
 ```
 
-If the three `random()` calls return the values `500`, `200`, and `35`, respectively, the line would actually be run as if it were this:
+If the three `random()` calls returned the values `500`, `200`, and `35`, respectively, the line would actually be run as if it were this:
 
 ```js
 ctx.arc(500, 200, 35, 0, 2 * Math.PI);
@@ -107,7 +107,7 @@ ctx.arc(500, 200, 35, 0, 2 * Math.PI);
 
 The function calls on the line are run first, and their return values are substituted for the function calls, before the line itself is then executed.
 
-## Active learning: A return value function
+## Implementing function return values
 
 Let's have a go at writing some functions featuring return values.
 
@@ -155,16 +155,16 @@ Let's have a go at writing some functions featuring return values.
 
 4. Save your code, load it in a browser, and try it out.
 
-Here are some explanations for the `addEventListener` function in step 3 above:
+Here are some explanations for the `addEventListener()` function in step 3 above:
 
-- By adding a listener to the `change` event, this function runs whenever the `change` event fires on the text input — that is when a new value is entered into the text `input`, and submitted (e.g., enter a value, then un-focus the input by pressing <kbd>Tab</kbd> or <kbd>Return</kbd>). When this anonymous function runs, the value in the `input` is stored in the `num` constant.
-- The if statement prints an error message if the entered value is not a number. The condition checks if the expression `isNaN(num)` returns `true`. The [`isNaN()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN) function tests whether the `num` value is not a number — if so, it returns `true`, and if not, it returns `false`.
+- By adding a `change` event listener, this function runs whenever the `change` event fires on the text input — that is when a new value is entered into the text `input`, and submitted (enter a value, then un-focus the input by pressing <kbd>Tab</kbd> or <kbd>Return</kbd>). When this anonymous function runs, the value in the `input` is stored in the `num` constant.
+- The `if` statement prints an error message if the entered value is not a number. The condition checks if the expression `isNaN(num)` returns `true`. The [`isNaN()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN) function tests whether the `num` value is not a number — if so, it returns `true`, and if not, it returns `false`.
 - If the condition returns `false`, the `num` value is a number and the function prints out a sentence inside the paragraph element that states the square, cube, and factorial values of the number. The sentence calls the `squared()`, `cubed()`, and `factorial()` functions to calculate the required values.
 
 > [!NOTE]
-> If you have trouble getting the example to work, check your code against the [finished version on GitHub](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/functions/function-library-finished.html) ([see it running live](https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html) also), or ask us for help.
+> If you have trouble getting the example to work, check your code against the [finished version on GitHub](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/functions/function-library-finished.html) ([see it running live](https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html) also).
 
-## Now it's your turn!
+### Add some functions of your own!
 
 At this point, we'd like you to have a go at writing out a couple of functions of your own and adding them to the library. How about the square or cube root of the number? Or the circumference of a circle with a given radius?
 
@@ -175,7 +175,7 @@ Some extra function-related tips:
 
 ## Test your skills!
 
-You've reached the end of this article, 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: Functions](/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Functions).
+You've reached the end of our set of functions articles, 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: Functions](/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Functions).
 
 ## Conclusion
 
@@ -183,6 +183,8 @@ So there we have it — functions are fun, very useful, and although there's a l
 
 If there is anything you didn't understand, feel free to read through the article again, or [contact us](/en-US/docs/MDN/Community/Communication_channels) to ask for help.
 
+Next, we'll move on to look at events in more detail.
+
 ## See also
 
 - [Functions in-depth](/en-US/docs/Web/JavaScript/Reference/Functions) — a detailed guide covering more advanced functions-related information.
diff --git a/files/en-us/learn_web_development/howto/solve_javascript_problems/index.md b/files/en-us/learn_web_development/howto/solve_javascript_problems/index.md
index 87e9feb2c2c4cfc..63e72e3afd595a6 100644
--- a/files/en-us/learn_web_development/howto/solve_javascript_problems/index.md
+++ b/files/en-us/learn_web_development/howto/solve_javascript_problems/index.md
@@ -206,4 +206,4 @@ For more information on JavaScript debugging, see [JavaScript debugging and erro
 
 ### Web APIs
 
-- [How do you manipulate the DOM (e.g., adding or removing elements) using JavaScript?](/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting#active_learning_basic_dom_manipulation)
+- [How do you manipulate the DOM (e.g., adding or removing elements) using JavaScript?](/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting#doing_some_basic_dom_manipulation)