Put notes in contextual locations, not all at bottom of modules

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)

curriculum/2-core/1-web-standards-and-html/1-2-the-html-css-and-javascript-triangle.md

@@ -4,48 +4,52 @@ 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
 >
 >   - 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)

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)

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)
 
 ---
 

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)

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)

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)

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)

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)