Merge branch 'main' of github.com:TheOdinProject/curriculum into why_objects

Author: takinabradley

LAYOUT_STYLE_GUIDE.md

@@ -454,6 +454,32 @@ See the [lesson template](./templates/lesson-template.md) for a more easily copy
 Or, check out the [project template](./templates/project-template.md) for a more easily copyable project file.
 ~~~
 
+Typically you want to ensure the link text describes the purpose of the link or where the link will redirect a user, and can often be the title of a blog article or video. You should also do your best to avoid including "this" and "here" in the link text to avoid our linter from flagging it as an error, even if the link text is descriptive. Often times "this" or "here" aren't necessary as part of the link text, and may cause some confusion despite a descriptive text ("Where's here??").
+
+```markdown
+// Sufficient, but could be tweaked further
+Check out [this video on flex-grow from CoolYoutuber](...url)
+Go look at our [installations guide here](...url)
+
+// After a slight change
+Check out this [video on flex-grow from CoolYoutuber](...url)
+Go look at our [installations guide](...url)
+```
+
+Additionally, if there are multiple links in a lesson that redirect to the same `href`, the link text for each link must be the same. For example:
+
+```markdown
+// Not great :(
+Go to [Google](www.google.com)
+Try [searching on Google](www.google.com)
+First go to the [Google homepage](www.google.com)
+
+// Better! :)
+Go to [Google](www.google.com)
+Try searching on [Google](www.google.com)
+First go to the [Google](www.google.com) homepage
+```
+
 ### Don't scatter links throughout lessons
 
 Links to required reading should not be scattered throughout a lesson, and should instead be placed in either the `### Assignment` or `### Additional resources` section. Links that refer a user to a previous lesson as a refresher, or a link to a Wikipedia page that offers a definition/explanation of a term are fine to place outside of these two sections.

advanced_html_css/accessibility/semantic_html.md

@@ -76,6 +76,10 @@ Headings are the `<h1>` through `<h6>` elements, and like the name implies, thes
 - `<nav>`
 - `<section>`
 
+As an example, consider the following image which shows how this lesson in particular uses semantic HTML for the different areas in the page. If you want to examine the page in more detail, feel free to use the developer tools to do so.
+
+![How a typical Odin lesson uses semantic HTML by including the nav, header, main, section, aside, and footer elements](https://cdn.statically.io/gh/TheOdinProject/curriculum/b71f39e8c0934cc6cc80daaae9ed375f00753b09/advanced_html_css/accessibility/semantic_html/imgs/semantic_html_example.png)
+
 By properly using landmarks and headings, you provide users of assistive technologies a more operable and understandable page: not only can screen reader users navigate a page via landmarks and headings by using navigation keyboard commands (or opening a menu in their screen reader), but these elements also have their roles announced to provide additional context.
 
 If you were to use only `<div>` elements to act as these landmarks and headings, maybe adding in some CSS to visually style them, then a screen reader user would have to go through the entire page just to get to a specific section, and they may not be able to actually tell what is a heading or a landmark on the page.
@@ -89,17 +93,17 @@ If you were to use only `<div>` elements to act as these landmarks and headings,
 
 ### Knowledge check
 
-This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.
+The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
 
 - [Why is semantic HTML important for accessibility?](#the-importance-of-semantics)
 - [What are the seven HTML elements that define landmarks on a page?](#headings-and-landmarks)
 
 ### Additional resources
 
-This section contains helpful links to other content. It isn’t required, so consider it supplemental.
+This section contains helpful links to related content. It isn't required, so consider it supplemental.
 
 - [NVAccess](https://www.nvaccess.org/download/) provides a download of the NVDA screen reader, one of the more popular (and free!) screen readers available, though it's only available for the Windows OS. If you're using a macOS device, you should have the VoiceOver screen reader available to you by default. While the lessons in this section will provide you with what a screen reader will generally announce, it can be invaluable to start using a screen reader yourself to test out your projects and see how they might be perceived.
 - [Screen Reader Basics: VoiceOver](https://www.youtube.com/watch?v=5R-6WvAihms&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&index=8) and [Screen Reader Basics: NVDA](https://www.youtube.com/watch?v=Jao3s_CwdRU&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&index=9) go over some basics for getting started with both brands of screen readers. Both videos are worth watching regardless of which screen reader you choose/is available to you, as they contain some universal information as well.
 - [Screen reader basics: Orca](https://www.youtube.com/watch?v=UI76P-KPZec) is a good video to get you started using Orca, the Linux GUI screen reader.
 - [Screen reader basics: ChromeVox](https://www.youtube.com/watch?v=fpbIsN31hLM) is a starting place for learning to use ChromeVox, the screen reader on ChromeBooks.
-- [ARIA Landmarks Example](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/HTML5.html) lists the native HTML elements that define landmark regions as well as what their role is. If you check this resource out, be sure to enable the button toggles at the top of the page to see how the page is sectioned by landmarks and how it uses headings.
+- [ARIA Landmarks Example](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/HTML5.html) lists the native HTML elements that define landmark regions as well as what their role is. If you check this resource out, be sure to enable the button toggles at the top of the page to see how the page is sectioned by landmarks and how it uses headings.

advanced_html_css/accessibility/semantic_html/imgs/semantic_html_example.png

@@ -250,7 +250,7 @@ Another benefit of `transform` is that it can be hardware-accelerated via a devi
 1. To learn about how `rotate3d` works, check out this great [demonstration on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d()) and this [Quackit article](https://www.quackit.com/css/functions/css_rotate3d_function.cfm).
 1. For more details on how `perspective` works in regards to 3D transforms, check out this [CSS Tricks article](https://css-tricks.com/how-css-perspective-works/).
 1. For a great demonstration on `translate3d` checkout the [MDN cube again](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d())!
-1. Skim [this article](https://www.quackit.com/css/functions/css_matrix_function.cfm) to get the gist of `matrix`.
+1. Go through [The World of CSS Transforms](https://www.joshwcomeau.com/css/transforms/) by Josh Comeau.
 </div>
 
 ### Knowledge check
@@ -266,6 +266,6 @@ The following questions are an opportunity to reflect on key topics in this less
 
 This section contains helpful links to related content. It isn't required, so consider it supplemental.
 
-- Here's a good resource that summarizes [most common transform functions with some additional insight](https://www.joshwcomeau.com/css/transforms/) to how you may use them.
+- Learn more about `matrix` by checking Quackit's article on the [matrix function](https://www.quackit.com/css/functions/css_matrix_function.cfm).
 - For a full reference, there's always [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function).
 - For more on the 3D transform functions, [W3Schools](https://www.w3schools.com/css/css3_3dtransforms.asp) has a good article demonstrating how they work.

advanced_html_css/animation/transforms.md

@@ -369,6 +369,11 @@ Choose your Operating System:
 wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
 ```
 
+<div class="lesson-note" markdown="1">
+### Copy and paste keyboard shortcuts
+You have probably noticed that the common keyboard shortcut: <kbd>Ctrl</kbd> + <kbd>V</kbd> to paste something doesn't work in the terminal. In order to paste your text input into your terminal you can use: <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd> keyboard shortcut combination, instead. It is also  very handy to know that the: <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd>  keyboard combination will copy any highlighted text from your terminal, which can then be pasted later.
+</div>
+
 #### Step 2: Install Google Chrome
 
 - Enter the following command in your terminal to install **Google Chrome** `.deb` package

foundations/installations/installations.md

@@ -119,7 +119,7 @@ Note that if you're accessing a kebab-cased CSS rule from JS, you'll either need
 div.style.background-color // doesn't work - attempts to subtract color from div.style.background
 div.style.backgroundColor // accesses the div's background-color style
 div.style['background-color'] // also works
-div.style.cssText = "background-color: white;" // sets the div's background-color by assigning a CSS string
+div.style['backgroundColor'] // also works - both camel and kebab case work when using a string with bracket notation
 ```
 
 #### Editing attributes