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 `