From 70f6ebc4a473bd1e334db77acfb1e7b01cd0ea65 Mon Sep 17 00:00:00 2001
From: Chris Mills <chrisdavidmills@gmail.com>
Date: Fri, 3 Nov 2023 10:25:32 +0000
Subject: [PATCH] Put notes in contextual locations, not all at bottom of
 modules

---
 .../1-1-how-the-web-works.md                  | 10 ++--
 ...-2-the-html-css-and-javascript-triangle.md | 52 +++++++++--------
 .../1-3-web-standards.md                      | 12 ++--
 .../1-4-how-browsers-load-webpages.md         | 58 ++++++++++---------
 .../2-2-good-document-structure.md            | 13 +++--
 .../1-web-standards-and-html/2-3-lists.md     | 12 ++--
 .../2-4-advanced-text-techniques.md           |  8 +--
 .../1-web-standards-and-html/2-6-media.md     |  4 --
 .../2-7-other-interactive-elements.md         | 20 ++++---
 .../2-styling/3-09-styling-form-elements.md   |  8 +--
 .../2-styling/4-1-text-and-font-styling.md    |  8 +--
 curriculum/2-core/3-scripting/6-06-loops.md   |  8 +--
 .../7-4-assistive-technology-and-testing.md   | 10 ++--
 ...version-control-fundamentals-git-github.md | 10 ++--
 curriculum/3-extensions/3-web-apis.md         | 25 ++++----
 .../3-extensions/5-security-and-privacy.md    | 18 +++---
 ...-understanding-of-javascript-frameworks.md | 14 ++---
 curriculum/3-extensions/8-css-tooling.md      | 18 +++---
 .../3-extensions/9-other-tooling-types.md     |  8 +--
 19 files changed, 165 insertions(+), 151 deletions(-)

diff --git a/curriculum/2-core/1-web-standards-and-html/1-1-how-the-web-works.md b/curriculum/2-core/1-web-standards-and-html/1-1-how-the-web-works.md
index b8e40e1..b253983 100644
--- a/curriculum/2-core/1-web-standards-and-html/1-1-how-the-web-works.md
+++ b/curriculum/2-core/1-web-standards-and-html/1-1-how-the-web-works.md
@@ -18,6 +18,11 @@ Learning outcomes:
 
 - Hosting, how to purchase it, and how to put a website online
 
+> **Notes:**
+>
+> - One of the key goals of this section is a high-level understanding of how the web functions behind the code that students write.
+> - Students should also gain a vocabulary to start talking about how the web functions precisely.
+
 Resources:
 
 - [How the web works](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
@@ -26,11 +31,6 @@ Resources:
 
 - [What is a URL?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL)
 
-> **Notes:**
->
-> - One of the key goals of this section is a high-level understanding of how the web functions behind the code that students write.
-> - Students should also gain a vocabulary to start talking about how the web functions precisely.
-
 ---
 
 [Previous: 1 The web standards model](/curriculum/2-core/1-web-standards-and-html/1-0-the-web-standards-model.md) | [Next: 1.2 The HTML, CSS, and JavaScript triangle](/curriculum/2-core/1-web-standards-and-html/1-2-the-html-css-and-javascript-triangle.md) | [Table of contents](/TOC.md)
diff --git a/curriculum/2-core/1-web-standards-and-html/1-2-the-html-css-and-javascript-triangle.md b/curriculum/2-core/1-web-standards-and-html/1-2-the-html-css-and-javascript-triangle.md
index 43e4cc0..64f6f02 100644
--- a/curriculum/2-core/1-web-standards-and-html/1-2-the-html-css-and-javascript-triangle.md
+++ b/curriculum/2-core/1-web-standards-and-html/1-2-the-html-css-and-javascript-triangle.md
@@ -4,22 +4,6 @@ Learning outcomes:
 
 - The purpose of HTML, CSS, and JavaScript
 
-- Their place in the larger ecosystem, and the fact that they are not the only web technologies
-
-- Why separating the layers is a good idea
-
-  - The fact that in reality, the separation is not always clear
-
-- The nature of this separation as an ideal to aim for where possible, rather than an absolute
-
-- The concept of progressive enhancement
-
-Resources:
-
-- [The web and web standards](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards)
-
-- [What is Progressive Enhancement, and why it matters](https://www.freecodecamp.org/news/what-is-progressive-enhancement-and-why-it-matters-e80c7aaf834a/)
-
 > **Notes:**
 >
 > - Purposes of the main web authoring technologies
@@ -27,25 +11,45 @@ Resources:
 >   - HTML is for structure and semantics (meaning)
 >   - CSS is for styling and layout
 >   - JavaScript is for controlling dynamic behavior
+
+- Their place in the larger ecosystem, and the fact that they are not the only web technologies
+
+- Why separating the layers is a good idea
+
+> **Notes:**
 >
 > - Separation is a good idea for
 >
 >   - Code management and comprehension
 >   - Teamwork/separation of roles
 >   - Performance
->
-> - Thoughts on separation not always being a reality
->
->   - A prime example is the case of using JavaScript to dynamically update CSS styling on-the-fly in response to app state changes, user choices, etc.
->
->     - Often this is done by modifying the `Element.style.x` properties, which results in inline CSS being injected into HTML. A better strategy is to add/change classes on elements to avoid inline CSS.
->
->   - Much more severe is the case of JavaScript frameworks that use various HTML-in-JavaScript or CSS-in-JavaScript custom syntax, which results in a lot of mixing of syntax types.
+
+  - The fact that in reality, the separation is not always clear
+
+  > **Notes:**
+  >
+  > - A prime example is the case of using JavaScript to dynamically update CSS styling on-the-fly in response to app state changes, user choices, etc.
+  >
+  >   - Often this is done by modifying the `Element.style.x` properties, which results in inline CSS being injected into HTML. A better strategy is to add/change classes on elements to avoid inline CSS.
+  >
+  > - Much more severe is the case of JavaScript frameworks that use various HTML-in-JavaScript or CSS-in-JavaScript custom syntax, which results in a lot of mixing of syntax types.
+
+- The nature of this separation as an ideal to aim for where possible, rather than an absolute
+
+- The concept of progressive enhancement
+
+> **Notes:**
 >
 > - Progressive enhancement is often seen as unimportant, because browsers tend to support new features more consistently these days, and more people tend to have faster internet connections. However, you should think about relevant examples to relate to in the modern day, for example cutting down on bling to make a mobile experience smoother and saving on data, or providing a simpler, lower bandwidth experience for users in developing countries who might still pay for home internet by the megabyte.
 >
 >   - This bleeds over into responsive design, which is covered later on in more depth.
 
+Resources:
+
+- [The web and web standards](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards)
+
+- [What is Progressive Enhancement, and why it matters](https://www.freecodecamp.org/news/what-is-progressive-enhancement-and-why-it-matters-e80c7aaf834a/)
+
 ---
 
 [Previous: 1.1 How the web works](/curriculum/2-core/1-web-standards-and-html/1-1-how-the-web-works.md) | [Next: 1.3 Web standards](/curriculum/2-core/1-web-standards-and-html/1-3-web-standards.md) | [Table of contents](/TOC.md)
diff --git a/curriculum/2-core/1-web-standards-and-html/1-3-web-standards.md b/curriculum/2-core/1-web-standards-and-html/1-3-web-standards.md
index 9d7de72..c708784 100644
--- a/curriculum/2-core/1-web-standards-and-html/1-3-web-standards.md
+++ b/curriculum/2-core/1-web-standards-and-html/1-3-web-standards.md
@@ -6,6 +6,12 @@ Learning outcomes:
 
 - The process of standards creation
 
+> **Notes:**
+>
+> - The basic principles of the web — interoperable, accessible, collaborative, and not owned by a single corporation.
+> - This basis means that the web is a unique and exciting industry to get involved in.
+> - The full W3C standards process is deep and academic. For now, you should understand how different individuals and companies get involved in the standards process, and how the different maturity stages are designed to weed out issues (e.g. interoperability issues, patent issues).
+
 - The lifecycle of web standards features
 
   - Experimental (usually only available in one browser engine as it is developed, sometimes not in a specification yet. Too early to use in production.)
@@ -36,12 +42,6 @@ Resources:
 
 - [https://www.w3.org/TR/design-principles/](https://www.w3.org/TR/design-principles/)
 
-> **Notes:**
->
-> - The basic principles of the web — interoperable, accessible, collaborative, and not owned by a single corporation.
-> - This basis means that the web is a unique and exciting industry to get involved in.
-> - The full W3C standards process is deep and academic. For now, you should understand how different individuals and companies get involved in the standards process, and how the different maturity stages are designed to weed out issues (e.g. interoperability issues, patent issues).
-
 ---
 
 [Previous: 1.2 The HTML, CSS, and JavaScript triangle](/curriculum/2-core/1-web-standards-and-html/1-2-the-html-css-and-javascript-triangle.md) | [Next: 1.4 How browsers load webpages](/curriculum/2-core/1-web-standards-and-html/1-4-how-browsers-load-webpages.md) | [Table of contents](/TOC.md)
diff --git a/curriculum/2-core/1-web-standards-and-html/1-4-how-browsers-load-webpages.md b/curriculum/2-core/1-web-standards-and-html/1-4-how-browsers-load-webpages.md
index 9b675a4..8e92555 100644
--- a/curriculum/2-core/1-web-standards-and-html/1-4-how-browsers-load-webpages.md
+++ b/curriculum/2-core/1-web-standards-and-html/1-4-how-browsers-load-webpages.md
@@ -6,32 +6,6 @@ Learning outcomes:
 
 - The different kinds of assets that are returned in an HTTP response.
 
-- How these are assembled to create a web document that is then displayed by the browser.
-
-- Why the browser is sometimes seen as a hostile programming environment.
-
-  - Unlike other programming environments, it is much harder to make guarantees about the environment your code will run on.
-
-  - You cannot guarantee a user's OS, browser, language, location, network connection, CPU, GPU, memory, etc.
-
-  - You need to embrace uncertainty and learn to program defensively. This feeds back into and expands upon the concepts looked at around progressive enhancement in [1.2 The HTML, CSS, and JavaScript triangle](./1-2-the-html-css-and-javascript-triangle.md). This would also be a good place to look at related concepts such as error handling, feature detection, and responsive design.
-
-- The flipside — why the web is an awesome programming environment
-
-  - Its basic state is accessible and linkable. Some of these basics are harder to achieve in other environments.
-
-  - App delivery across the web is simple and powerful.
-
-  - Updates are easy — in many cases, you can just reload the browser tab. You don't need to worry about constantly downloading and installing large packages.
-
-  - The community is vibrant and helpful, and there are lots of great resources available to learn.
-
-Resources:
-
-- [Populating the page: how browsers work](https://developer.mozilla.org/docs/Web/Performance/How_browsers_work)
-
-- [Dealing with files](https://developer.mozilla.org/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
-
 > **Notes:**
 >
 > - The different kinds of downloaded resources to understand are:
@@ -51,6 +25,12 @@ Resources:
 >
 >     - Word documents
 >     - PowerPoint slide decks
+
+- Static versus dynamic files: Some downloaded code files will be static (they exist on the server in the same form as they are downloaded), and some will be dynamic (generated by the server based on varying data).
+
+- How these are assembled to create a web document that is then displayed by the browser.
+
+> **Notes:**
 >
 > - The different stages of rendering a web page
 >
@@ -64,8 +44,30 @@ Resources:
 >   - The render tree is created from the DOM and CSSOM, to identify visual styles applied to each DOM node.
 >   - Page layout is calculated.
 >   - The styled, laid-out nodes are painted to the screen in the right order, via painting and compositing.
->
-> - Static versus dynamic files: Some downloaded code files will be static (they exist on the server in the same form as they are downloaded), and some will be dynamic (generated by the server based on varying data).
+
+- Why the browser is sometimes seen as a hostile programming environment.
+
+  - Unlike other programming environments, it is much harder to make guarantees about the environment your code will run on.
+
+  - You cannot guarantee a user's OS, browser, language, location, network connection, CPU, GPU, memory, etc.
+
+  - You need to embrace uncertainty and learn to program defensively. This feeds back into and expands upon the concepts looked at around progressive enhancement in [1.2 The HTML, CSS, and JavaScript triangle](./1-2-the-html-css-and-javascript-triangle.md). This would also be a good place to look at related concepts such as error handling, feature detection, and responsive design.
+
+- The flipside — why the web is an awesome programming environment
+
+  - Its basic state is accessible and linkable. Some of these basics are harder to achieve in other environments.
+
+  - App delivery across the web is simple and powerful.
+
+  - Updates are easy — in many cases, you can just reload the browser tab. You don't need to worry about constantly downloading and installing large packages.
+
+  - The community is vibrant and helpful, and there are lots of great resources available to learn.
+
+Resources:
+
+- [Populating the page: how browsers work](https://developer.mozilla.org/docs/Web/Performance/How_browsers_work)
+
+- [Dealing with files](https://developer.mozilla.org/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
 
 ---
 
diff --git a/curriculum/2-core/1-web-standards-and-html/2-2-good-document-structure.md b/curriculum/2-core/1-web-standards-and-html/2-2-good-document-structure.md
index fa157f8..108b0d2 100644
--- a/curriculum/2-core/1-web-standards-and-html/2-2-good-document-structure.md
+++ b/curriculum/2-core/1-web-standards-and-html/2-2-good-document-structure.md
@@ -12,10 +12,18 @@ Learning outcomes:
 
   - It is tempting to just use `<div>` elements wherever a block-level container is required, but you should be aware of the other available structural elements and their benefits (such as improved accessibility). Examples include `<main>`, `<section>`, `<article>`, `<header>`, `<nav>`, and `<footer>`.
 
+  > **Notes:**
+  >
+  > - One key point to understand here is the difference between semantic and presentational markup, what these terms mean, and why semantic markup is important to SEO and accessibility.
+
 - The need for heading levels to be used logically, i.e. no skipping levels or using them arbitrarily because you want to achieve a certain font size (that's a job for CSS).
 
 - SEO benefits: for example, keywords are boosted in headings.
 
+> **Notes:**
+>
+> - This conformance criterium doesn't require that you go too deep into strategies for writing SEO-friendly content, although you should understand what this means.
+
 - Accessibility benefits: Assistive Technology (AT) such as screen readers use headings and landmarks as signposts to navigate content. HTML documents are very difficult for Assistive Technology users to use without headings.
 
 - That HTML needs to be correctly nested. If not, the browser has to guess what you meant your structure to be, and it might not be what you wanted.
@@ -30,11 +38,6 @@ Resources:
 
 - [What is accessibility?](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility)
 
-> **Notes:**
->
-> - One key point to understand here is the difference between semantic and presentational markup, what these terms mean, and why semantic markup is important to SEO and accessibility.
-> - This set of conformance criteria doesn't require that you go too deep into strategies for writing SEO-friendly content, although you should understand what this means.
-
 ---
 
 [Previous: 2.1 Basic HTML syntax and structure](/curriculum/2-core/1-web-standards-and-html/2-1-basic-html-syntax-and-structure.md) | [Next: 2.3 Lists](/curriculum/2-core/1-web-standards-and-html/2-3-lists.md) | [Table of contents](/TOC.md)
diff --git a/curriculum/2-core/1-web-standards-and-html/2-3-lists.md b/curriculum/2-core/1-web-standards-and-html/2-3-lists.md
index 4fe07ba..15bf0ab 100644
--- a/curriculum/2-core/1-web-standards-and-html/2-3-lists.md
+++ b/curriculum/2-core/1-web-standards-and-html/2-3-lists.md
@@ -8,6 +8,12 @@ Learning outcomes:
 
 - The correct usage for each list type
 
+> **Notes:**
+>
+> - Unordered lists are for marking up a list of items where the order doesn't matter, such as a shopping list.
+> - Ordered lists are for marking up a list of items where the order does matter, such as a set of directions.
+> - Description lists are for associating a list of terms with descriptions of those terms, for example, product names and descriptions in a shopping cart.
+
 - The broader use cases of lists, such as navigation menus
 
 Resources:
@@ -16,12 +22,6 @@ Resources:
 
 - [Advanced text formatting > Description lists](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#description_lists)
 
-> **Notes:**
->
-> - Unordered lists are for marking up a list of items where the order doesn't matter, such as a shopping list.
-> - Ordered lists are for marking up a list of items where the order does matter, such as a set of directions.
-> - Description lists are for associating a list of terms with descriptions of those terms, for example, product names and descriptions in a shopping cart.
-
 ---
 
 [Previous: 2.2 Good document structure](/curriculum/2-core/1-web-standards-and-html/2-2-good-document-structure.md) | [Next: 2.4 Advanced text techniques](/curriculum/2-core/1-web-standards-and-html/2-4-advanced-text-techniques.md) | [Table of contents](/TOC.md)
diff --git a/curriculum/2-core/1-web-standards-and-html/2-4-advanced-text-techniques.md b/curriculum/2-core/1-web-standards-and-html/2-4-advanced-text-techniques.md
index e17e227..48168d7 100644
--- a/curriculum/2-core/1-web-standards-and-html/2-4-advanced-text-techniques.md
+++ b/curriculum/2-core/1-web-standards-and-html/2-4-advanced-text-techniques.md
@@ -22,6 +22,10 @@ Learning outcomes:
 
   - Other text markup features such as `<u>`, `<s>`, and `<ruby>`
 
+> **Notes:**
+>
+> - It is not necessary to have an exhaustive understanding of all the semantic elements HTML offers at this stage, but you should understand that they exist, and how to look them up using MDN if you need them.
+
 Resources:
 
 - [HTML text fundamentals > Emphasis and importance](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#emphasis_and_importance)
@@ -30,10 +34,6 @@ Resources:
 
 - [A delightful reference for HTML Symbols, Entities and ASCII Character Codes](https://www.toptal.com/designers/htmlarrows/)
 
-> **Notes:**
->
-> - It is not necessary to have an exhaustive understanding of all the semantic elements HTML offers at this stage, but you should understand that they exist, and how to look them up using MDN if you need them.
-
 ---
 
 [Previous: 2.3 Lists](/curriculum/2-core/1-web-standards-and-html/2-3-lists.md) | [Next: 2.5 Links](/curriculum/2-core/1-web-standards-and-html/2-5-links.md) | [Table of contents](/TOC.md)
diff --git a/curriculum/2-core/1-web-standards-and-html/2-6-media.md b/curriculum/2-core/1-web-standards-and-html/2-6-media.md
index 9e06ba8..b7f8d81 100644
--- a/curriculum/2-core/1-web-standards-and-html/2-6-media.md
+++ b/curriculum/2-core/1-web-standards-and-html/2-6-media.md
@@ -34,10 +34,6 @@ Resources:
 
 - [Multimedia and embedding](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding)
 
-> **Notes:**
->
-> - It is not necessary to understand how to script a `<canvas>` element at this stage. That requires JavaScript APIs, and is covered in [Extension 3.2 Graphics/animation APIs](../../3-extensions/3-web-apis.md#32-graphicsanimation-apis).
-
 ---
 
 [Previous: 2.5 Links](/curriculum/2-core/1-web-standards-and-html/2-5-links.md) | [Next: 2.7 Other interactive elements](/curriculum/2-core/1-web-standards-and-html/2-7-other-interactive-elements.md) | [Table of contents](/TOC.md)
diff --git a/curriculum/2-core/1-web-standards-and-html/2-7-other-interactive-elements.md b/curriculum/2-core/1-web-standards-and-html/2-7-other-interactive-elements.md
index 480ff77..9c5ebf9 100644
--- a/curriculum/2-core/1-web-standards-and-html/2-7-other-interactive-elements.md
+++ b/curriculum/2-core/1-web-standards-and-html/2-7-other-interactive-elements.md
@@ -4,6 +4,10 @@ Learning outcomes:
 
 - Aside from links, `<button>` and form elements are the main way to build controls for users to interact with your sites.
 
+> **Notes:**
+>
+> - There are a lot of input types and form features not explicitly mentioned here; the purpose is to get a good general introduction to buttons and form elements, and learn the most common cases. The advanced/specialized cases can be studied on a need-to-know basis, as part of a web developer's constant learning throughout their career.
+
 - `<button>`
 
   - Button types — `button`, `submit`, `reset`
@@ -16,7 +20,15 @@ Learning outcomes:
 
 - Client-side validation basics — `required`, `min`, `max`, `minlength`, `maxlength`, `pattern`.
 
-- Making forms accessible — `<label>` and the `for` attribute.
+> **Notes:**
+>
+> - Make sure to understand that client-side form validation is really a usability enhancement, to be used alongside server-side form validation. It is not a substitute for it.
+
+- Making forms accessible — Correct semantics, `<label>`, and the `for` attribute.
+
+> **Notes:**
+>
+> - Going back to the argument for semantic HTML (see also [2.2 Good document structure](./2-2-good-document-structure.md)), you should understand why it is important to use the right element for the right job — e.g. use a `<button>` to submit your form, and not a `<div>` programmed to behave like a `<button>`. Understand the features programmed into these elements by the browser, by default, and how important they are.
 
 - Form states and why they are important — `:focus`, `:readonly`, `:disabled`, etc.
 
@@ -34,12 +46,6 @@ Resources:
 
 - [Web forms — Working with user data](https://developer.mozilla.org/en-US/docs/Learn/Forms)
 
-> **Notes:**
->
-> - Make sure to understand that client-side form validation is really a usability enhancement, to be used alongside server-side form validation. It is not a substitute for it.
-> - Going back to the argument for semantic HTML (see also [2.2 Good document structure](./2-2-good-document-structure.md)), you should understand why it is important to use the right element for the right job — e.g. use a `<button>`, and not a `<div>` programmed to behave like a `<button>`. Understand the features programmed into these elements by the browser, by default, and how important they are.
-> - There are a lot of input types and form features not explicitly mentioned here; the purpose is to get a good general introduction to buttons and form elements, and learn the most common cases. The advanced/specialized cases can be studied on a need-to-know basis, as part of a web developer's constant learning throughout their career.
-
 ---
 
 [Previous: 2.6 Media](/curriculum/2-core/1-web-standards-and-html/2-6-media.md) | [Next: 2.8 HTML tables](/curriculum/2-core/1-web-standards-and-html/2-8-html-tables.md) | [Table of contents](/TOC.md)
diff --git a/curriculum/2-core/2-styling/3-09-styling-form-elements.md b/curriculum/2-core/2-styling/3-09-styling-form-elements.md
index eeb032e..5bc52ca 100644
--- a/curriculum/2-core/2-styling/3-09-styling-form-elements.md
+++ b/curriculum/2-core/2-styling/3-09-styling-form-elements.md
@@ -16,6 +16,10 @@ Learning outcomes:
 
 - Mitigating issues with difficult-to-style types such as `datetime-local`, `color`, etc.
 
+> **Notes:**
+>
+> - Conforming to this curriculum module doesn't require having foolproof, conclusive answers to every possible form styling problem. Some form elements are difficult to style, as the resources make clear. However, students should at least be able to handle a wide range of form styling needs and understand the issues around some of the more difficult styling issues.
+
 Resources:
 
 - [Images, media, and form elements](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
@@ -24,10 +28,6 @@ Resources:
 
 - [Advanced form styling](https://developer.mozilla.org/docs/Learn/Forms/Advanced_form_styling)
 
-> **Notes:**
->
-> - Conforming to this curriculum module doesn't require having foolproof, conclusive answers to every possible form styling problem. Some form elements are difficult to style, as the resources make clear. However, students should at least be able to handle a wide range of form styling needs and understand the issues around some of the more difficult styling needs.
-
 ---
 
 [Previous: 3.8 Overflow](/curriculum/2-core/2-styling/3-08-overflow.md) | [Next: 3.10 Debugging CSS](/curriculum/2-core/2-styling/3-10-debugging-css.md) | [Table of contents](/TOC.md)
diff --git a/curriculum/2-core/2-styling/4-1-text-and-font-styling.md b/curriculum/2-core/2-styling/4-1-text-and-font-styling.md
index f11345a..6912ff6 100644
--- a/curriculum/2-core/2-styling/4-1-text-and-font-styling.md
+++ b/curriculum/2-core/2-styling/4-1-text-and-font-styling.md
@@ -14,14 +14,14 @@ Learning outcomes:
 
 - `line-height`
 
-Resources:
-
-- [Fundamental text and font styling](https://developer.mozilla.org/docs/Learn/CSS/Styling_text/Fundamentals)
-
 > **Notes:**
 >
 > - There are a large number of other font and text styling properties, and students should be encouraged to explore more of them as part of their constant learning.
 
+Resources:
+
+- [Fundamental text and font styling](https://developer.mozilla.org/docs/Learn/CSS/Styling_text/Fundamentals)
+
 ---
 
 [Previous: 4 CSS text styling](/curriculum/2-core/2-styling/4-0-css-text-styling.md) | [Next: 4.2 Styling lists and links](/curriculum/2-core/2-styling/4-2-styling-lists-and-links.md) | [Table of contents](/TOC.md)
diff --git a/curriculum/2-core/3-scripting/6-06-loops.md b/curriculum/2-core/3-scripting/6-06-loops.md
index b7cf585..c74d35a 100644
--- a/curriculum/2-core/3-scripting/6-06-loops.md
+++ b/curriculum/2-core/3-scripting/6-06-loops.md
@@ -8,16 +8,16 @@ Learning outcomes:
 
 - Looping through collections with `for ... of`.
 
+> **Notes:**
+>
+> - There are many other types of loop in JavaScript that we haven't listed here. It is not necessary (or useful) to understand all of them at this stage. For now, students need to understand the purpose of loops, and the most common types.
+
 - `break` and `continue`.
 
 Resources:
 
 - [Looping code](https://developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Looping_code)
 
-> **Notes:**
->
-> - There are many other types of loop in JavaScript that we haven't listed here. It is not necessary (or useful) to understand all of them at this stage. For now, students just need to understand the purpose of loops, and the most common types.
-
 ---
 
 [Previous: 6.5 Conditionals](/curriculum/2-core/3-scripting/6-05-conditionals.md) | [Next: 6.7 Functions](/curriculum/2-core/3-scripting/6-07-functions.md) | [Table of contents](/TOC.md)
diff --git a/curriculum/2-core/4-best-practices-and-essential-tooling/7-4-assistive-technology-and-testing.md b/curriculum/2-core/4-best-practices-and-essential-tooling/7-4-assistive-technology-and-testing.md
index f5453fe..3335c27 100644
--- a/curriculum/2-core/4-best-practices-and-essential-tooling/7-4-assistive-technology-and-testing.md
+++ b/curriculum/2-core/4-best-practices-and-essential-tooling/7-4-assistive-technology-and-testing.md
@@ -6,6 +6,11 @@ Learning outcomes:
 
   - What they are used for, and who uses them
 
+  > **Notes:**
+  >
+  > - The aim here is not to master the usage of all assistive technology types (there are many that we have not listed above), but to be aware of their existence and types of people who use them, and also to appreciate how and why accessibility best practices work.
+  > - It is also a really good idea for web developers to have a go at using screen readers or other types of assistive technology, to give an idea of what the web experience is like for users of those technologies.
+
   - The importance of source order
 
   - The accessibility layer in browsers, and how assistive technologies hook into it
@@ -36,11 +41,6 @@ Resources:
 
 - [WebAIM accessibility tooling articles](https://webaim.org/articles/#evaluation)
 
-> **Notes:**
->
-> - The aim here is not to master the usage of all assistive technology types (there are many that we have not listed above), but to be aware of their existence and types of people who use them, and also to appreciate how and why accessibility best practices work.
-> - It is also a really good idea for web developers to have a go at using screen readers or other types of assistive technology, to give an idea of what the web experience is like for users of those technologies.
-
 ---
 
 [Previous: 7.3 Accessible JavaScript](/curriculum/2-core/4-best-practices-and-essential-tooling/7-3-accessible-javascript.md) | [Next: 7.5 WAI-ARIA](/curriculum/2-core/4-best-practices-and-essential-tooling/7-5-wai-aria.md) | [Table of contents](/TOC.md)
diff --git a/curriculum/2-core/4-best-practices-and-essential-tooling/8-0-version-control-fundamentals-git-github.md b/curriculum/2-core/4-best-practices-and-essential-tooling/8-0-version-control-fundamentals-git-github.md
index b1acc1f..d1d692f 100644
--- a/curriculum/2-core/4-best-practices-and-essential-tooling/8-0-version-control-fundamentals-git-github.md
+++ b/curriculum/2-core/4-best-practices-and-essential-tooling/8-0-version-control-fundamentals-git-github.md
@@ -6,6 +6,11 @@ Learning outcomes:
 
 - Understand why version control systems are necessary
 
+> **Notes:**
+>
+> - Git and associated social coding sites like GitHub have a lot of functionality, and can be intimidating and unfriendly to begin with. This set of conformance criteria does not expect mastery of all aspects of these tools, but rather an understanding of the basics, and why it is necessary to have some experience here before entering the industry.
+> - Git is the web industry standard for version control, and has been for some time.
+
 - Understand that sites such as GitHub, GitLab, etc. enable teamwork and collaboration that wasn't so easy in the past
 
 - Understand the difference between Git, and websites like GitHub or GitLab
@@ -44,11 +49,6 @@ Resources:
 
 - [Git and GitHub](https://developer.mozilla.org/docs/Learn/Tools_and_testing/GitHub)
 
-> **Notes:**
->
-> - Git and associated social coding sites like GitHub have a lot of functionality, and can be intimidating and unfriendly to begin with. This set of conformance criteria does not expect mastery of all aspects of these tools, but rather an understanding of the basics, and why it is necessary to have some experience here before entering the industry.
-> - Git is the web industry standard for version control, and has been for some time.
-
 ---
 
 [Previous: 7.5 WAI-ARIA](/curriculum/2-core/4-best-practices-and-essential-tooling/7-5-wai-aria.md) | [Next: 9 Design theory for developers](/curriculum/2-core/4-best-practices-and-essential-tooling/9-0-design-theory-for-developers.md) | [Table of contents](/TOC.md)
diff --git a/curriculum/3-extensions/3-web-apis.md b/curriculum/3-extensions/3-web-apis.md
index 96c4de0..21e24f2 100644
--- a/curriculum/3-extensions/3-web-apis.md
+++ b/curriculum/3-extensions/3-web-apis.md
@@ -20,6 +20,12 @@ Learning outcomes:
 
   - Understand key functionality associated with audio and video — play, pause, stop, seeking backwards and forwards, duration, current time
 
+  > **Notes:**
+  >
+  > - This set of conformance criteria does not expect a successful student to understand all of the web platform's video and audio-related APIs in detail. There is a lot of functionality in this category, and learning it all upfront would not be practical or particularly useful: some of the functionality is for very niche use cases, and students are encouraged to learn more as part of their constant learning, or when the need arises.
+  >
+  >   - For now, students would be expected to understand the concepts behind video and audio on the web, the basic core API functionality, and the purpose of some of the more advanced APIs.
+
 - Using the HTMLMediaElement API to build a basic custom media player
 
   - Understand why you'd do this — your target audience might have specific needs not addressed by the browser defaults.
@@ -50,12 +56,6 @@ Resources:
 
 - [​​Media type and format guide: image, audio, and video content](https://developer.mozilla.org/docs/Web/Media/Formats)
 
-> **Notes:**
->
-> - This set of conformance criteria does not expect a successful student to understand all of the web platform's video and audio-related APIs in detail. There is a lot of functionality in this category, and learning it all upfront would not be practical or particularly useful: some of the functionality is for very niche use cases, and students are encouraged to learn more as part of their constant learning, or when the need arises.
->
->   - For now, students would be expected to understand the concepts behind video and audio on the web, the basic core API functionality, and the purpose of some of the more advanced APIs.
-
 ## 3.2 Graphics/animation APIs
 
 Learning outcomes:
@@ -98,6 +98,10 @@ Resources:
 
 ## 3.3 Storage APIs
 
+> **Notes:**
+>
+> - The main items of importance to understand in this set of conformance criteria are the general concepts, using Web Storage for most simple client-side storage tasks, and how cookies are used in positive and negative ways.
+
 Learning outcomes:
 
 - Understand the concepts of client-side storage
@@ -116,6 +120,10 @@ Learning outcomes:
 
 - Other related APIs
 
+> **Notes:**
+>
+> - IndexedDB and Service Workers are complex, and constitute huge topics. It is not expected that students would exhaustively understand them at this stage, although we would suggest that students gain an understanding of the basics behind how they work.
+
   - IndexedDB
 
     - Complete client-side transactional database system.
@@ -134,11 +142,6 @@ Resources:
 
 - [What is a progressive web app?](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Guides/What_is_a_progressive_web_app)
 
-> **Notes:**
->
-> - The main items of importance to understand in this set of conformance criteria are the general concepts, using Web Storage for most simple client-side storage tasks, and how cookies are used in positive and negative ways.
-> - IndexedDB and Service Workers are complex, and constitute huge topics. It is not expected that students would exhaustively understand them at this stage, although we would suggest that students gain an understanding of the basics behind how they work.
-
 ---
 
 [Previous: Extension 2 Creating your own JavaScript objects](/curriculum/3-extensions/2-creating-your-own-javascript-objects.md) | [Next: Extension 4 Performance](/curriculum/3-extensions/4-performance.md) | [Table of contents](/TOC.md)
diff --git a/curriculum/3-extensions/5-security-and-privacy.md b/curriculum/3-extensions/5-security-and-privacy.md
index 7cfd6d2..b8215e1 100644
--- a/curriculum/3-extensions/5-security-and-privacy.md
+++ b/curriculum/3-extensions/5-security-and-privacy.md
@@ -4,6 +4,11 @@ It is vital to have an understanding of how you can and should protect your data
 
 ## 5.1 Security and privacy basics
 
+> **Notes:**
+>
+> - Conforming to all of the criteria in this module is not going to result in a student being a qualified security engineer, but equally it is very important for any web developer to understand the basics of web security and privacy.
+> - It is also important for students to understand that a lot of security issues are caused by problems with server-side code, or a combination of client-side and server-side code. A lot of code should present very few security risks, provided the browser is doing its job properly.
+
 Learning outcomes:
 
 - Understand the difference between security and privacy
@@ -56,11 +61,6 @@ Resources:
 
 - [Privacy on the web](https://developer.mozilla.org/docs/Web/Privacy)
 
-> **Notes:**
->
-> - Conforming to all of the above criteria is not going to result in a student being a qualified security engineer, but equally it is very important for any web developer to understand the basics of web security and privacy.
-> - It is also important for students to understand that a lot of security issues are caused by problems with server-side code, or a combination of client-side and server-side code. A lot of code should present very few security risks, provided the browser is doing its job properly.
-
 ## 5.2 Understanding relevant data protection laws
 
 Learning outcomes:
@@ -87,14 +87,14 @@ Learning outcomes:
 
 - Understand what compliance with such laws looks like in terms of practical implementation
 
-Resources:
-
-- [Complete guide to GDPR compliance](https://gdpr.eu/)
-
 > **Notes:**
 >
 > - Conforming to the above criteria does not require students to become legal experts in privacy laws, but they should understand the implications of these laws, and how that affects their work.
 
+Resources:
+
+- [Complete guide to GDPR compliance](https://gdpr.eu/)
+
 ---
 
 [Previous: Extension 4 Performance](/curriculum/3-extensions/4-performance.md) | [Next: Extension 6 Testing](/curriculum/3-extensions/6-testing.md) | [Table of contents](/TOC.md)
diff --git a/curriculum/3-extensions/7-a-practical-understanding-of-javascript-frameworks.md b/curriculum/3-extensions/7-a-practical-understanding-of-javascript-frameworks.md
index f28c86e..6ca6e68 100644
--- a/curriculum/3-extensions/7-a-practical-understanding-of-javascript-frameworks.md
+++ b/curriculum/3-extensions/7-a-practical-understanding-of-javascript-frameworks.md
@@ -2,6 +2,13 @@
 
 JavaScript frameworks are commonly used to build web applications, so it is beneficial to learn about common frameworks and use cases (as listed below) for employment prospects.
 
+> **Notes:**
+>
+> - Conforming to this set of criteria does not involve becoming a master of a particular framework and learning everything it has to offer. To do so can be limiting — one framework might be the most popular choice now, but in five years everything could change.
+> - Instead, we want to encourage students to get a solid understanding of the JavaScript fundamentals frameworks are built on top of (see [6 JavaScript fundamentals](../2-core/3-scripting/6-0-javascript-fundamentals.md)), and learn the common features and patterns that frameworks use. This approach is much more flexible and future proof.
+> - Students are strongly encouraged to start building apps with 2-3 popular frameworks to get a practical understanding of how they do things and idea of the differences between them.
+> - Advanced and/or framework-specific features can be learned as part of the student's constant learning.
+
 Learning outcomes:
 
 - Understand how to start using frameworks:
@@ -72,13 +79,6 @@ Resources:
 
 - [Getting started with Angular](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started)
 
-> **Notes:**
->
-> - Conforming to this set of criteria does not involve becoming a master of a particular framework and learning everything it has to offer. To do so can be limiting — one framework might be the most popular choice now, but in five years everything could change.
-> - Instead, we want to encourage students to get a solid understanding of the JavaScript fundamentals frameworks are built on top of (see [6 JavaScript fundamentals](../2-core/3-scripting/6-0-javascript-fundamentals.md)), and learn the common features and patterns that frameworks use. This approach is much more flexible and future proof.
-> - Students are strongly encouraged to start building apps with 2-3 popular frameworks to get a practical understanding of how they do things and idea of the differences between them.
-> - Advanced and/or framework-specific features can be learned as part of the student's constant learning.
-
 ---
 
 [Previous: Extension 6 Testing](/curriculum/3-extensions/6-testing.md) | [Next: Extension 8 CSS tooling](/curriculum/3-extensions/8-css-tooling.md) | [Table of contents](/TOC.md)
diff --git a/curriculum/3-extensions/8-css-tooling.md b/curriculum/3-extensions/8-css-tooling.md
index 94373c1..6fc595c 100644
--- a/curriculum/3-extensions/8-css-tooling.md
+++ b/curriculum/3-extensions/8-css-tooling.md
@@ -4,6 +4,11 @@ Tooling is not just confined to JavaScript frameworks. There are also common CSS
 
 ## 8.1 CSS frameworks
 
+> **Notes:**
+>
+> - Whatever framework your course or learning includes, the tool's site should include information on the basics of using it.
+> - The aim here is not to have an exhaustive understanding of any one framework, but rather to understand the pros and cons, what a CSS framework can do, and what general usage looks like.
+
 Learning outcomes:
 
 - Understand the value that CSS frameworks bring — consistency, organization, ready-made components and style guidelines, best practices built in.
@@ -16,12 +21,12 @@ Learning outcomes:
 
 - Understand how to weigh up the burden of adopting a CSS framework (e.g. handling integration, initial learning curve) versus the advantages (how much they can speed up development once you are familiar with them).
 
+## 8.2 CSS preprocessors
+
 > **Notes:**
 >
-> - Whatever framework your course or learning includes, the tool's site should include information on the basics of using it.
-> - The aim here is not to have an exhaustive understanding of any one framework, but rather to understand the pros and cons, what a CSS framework can do, and what general usage looks like.
-
-## 8.2 CSS preprocessors
+> - Whatever preprocessor your course or learning includes, the tool's site should include information on the basics of using it.
+> - The aim here is not to have an exhaustive understanding of any one preprocessor, but rather to understand the pros and cons, what a CSS preprocessor can do, and what general usage looks like.
 
 Learning outcomes:
 
@@ -35,11 +40,6 @@ Learning outcomes:
 
 - Understand how to weigh up the burden of adopting a CSS preprocessor (e.g. handling integration, initial learning curve) versus the advantages (how much they can speed up writing your CSS once you are familiar with them).
 
-> **Notes:**
->
-> - Whatever preprocessor your course or learning includes, the tool's site should include information on the basics of using it.
-> - The aim here is not to have an exhaustive understanding of any one preprocessor, but rather to understand the pros and cons, what a CSS preprocessor can do, and what general usage looks like.
-
 ---
 
 [Previous: Extension 7 A practical understanding of JavaScript frameworks](/curriculum/3-extensions/7-a-practical-understanding-of-javascript-frameworks.md) | [Next: Extension 9 Other tooling types](/curriculum/3-extensions/9-other-tooling-types.md) | [Table of contents](/TOC.md)
diff --git a/curriculum/3-extensions/9-other-tooling-types.md b/curriculum/3-extensions/9-other-tooling-types.md
index 0a1ff00..760bb1b 100644
--- a/curriculum/3-extensions/9-other-tooling-types.md
+++ b/curriculum/3-extensions/9-other-tooling-types.md
@@ -1,5 +1,9 @@
 # Extension 9 Other tooling types
 
+> **Notes:**
+>
+> - Understanding this set of criteria doesn't require having an in-depth knowledge of the tools listed below; instead, students are encouraged to learn the basic concepts of why and how they are used (and where in a web app project), test them out, and play with usage examples.
+
 Learning outcomes — understand the purpose and basic usage of other common tooling types you may be required to use in a web project:
 
 - Linters/formatters, for example [ESLint](https://eslint.org/), [Prettier](https://prettier.io/).
@@ -34,10 +38,6 @@ Learning outcomes — understand the purpose and basic usage of other common too
 
   - Integrations with popular frameworks and app platforms.
 
-> **Notes:**
->
-> - Passing this set of criteria doesn't require having an in-depth knowledge of the tools listed above; instead, students are encouraged to learn the basic concepts of why and how they are used (and where in a web app project), test them out, and play with usage examples.
-
 ---
 
 [Previous: Extension 8 CSS tooling](/curriculum/3-extensions/8-css-tooling.md) | [Table of contents](/TOC.md)