Merge branch 'main' into chore/add-dom-and-event-resources

.github/PULL_REQUEST_TEMPLATE.md

@@ -15,6 +15,8 @@ If this PR closes an open issue in this repo, replace the XXXXX below with the i
 If this PR closes an open issue in another TOP repo, replace the #XXXXX with the URL of the issue, e.g. Closes https://github.com/TheOdinProject/curriculum/issues/XXXXX
 
 If this PR does not close, but is related to another issue or PR, you can link it as above without the 'Closes' keyword, e.g. 'Related to #2013'.
+
+_Note:_ any pull request created for an issue that already has someone else assigned **will be closed without review**.
 -->
 Closes #XXXXX
 

.github/workflows/stale.yml

@@ -16,7 +16,7 @@ jobs:
       issues: write
       pull-requests: write
     steps:
-      - uses: actions/stale@v5
+      - uses: actions/stale@v8
         with:
           stale-issue-label: "Status: Stale"
           days-before-issue-stale: 30

.github/workflows/testing.yml

@@ -8,7 +8,7 @@ jobs:
         name: Check for spelling errors
         runs-on: ubuntu-latest
         steps:
-        - uses: actions/checkout@v3
+        - uses: actions/checkout@v4
         - uses: codespell-project/actions-codespell@master
           with:
             check_filenames: true

databases/databases/databases_and_sql.md

@@ -151,7 +151,7 @@ This section contains questions for you to check your understanding of this less
 - [In which situation would you use the `HAVING` function?](#having-function)
 - [Why can't I just use Ruby to process my database data?](#sql-is-faster-than-ruby)
 
- ### Additional Resources
+### Additional resources
 This section contains helpful links to related content. It isn’t required, so consider it supplemental.
 
 -   Odinite Hunter D made his excellent notes into a [Git Book on SQL](https://hunter-ducharme.gitbook.io/sql-basics) which you should totally check out if you want a decent resource.

foundations/html_css/css-foundations/the-cascade.md

@@ -6,9 +6,9 @@ In the previous lesson, we covered basic CSS syntax and selectors. Now, it's tim
 
 This section contains a general overview of topics that you will learn in this lesson.
 
-*   What the cascade does.
-*   Specificity and combining CSS selectors.
-*   How inheritance affects certain properties.
+- What the cascade does.
+- Specificity and combining CSS selectors.
+- How inheritance affects certain properties.
 
 ### The cascade of CSS
 
@@ -18,7 +18,6 @@ So if you end up with some unexpected behavior like this it's either because of
 
 The cascade is what determines which rules actually get applied to our HTML. There are different factors that the cascade uses to determine this. We will examine three of these factors, which will hopefully help you avoid those frustrating "I hate CSS" moments.
 
-
 #### Specificity
 
 A CSS declaration that is more specific will take precedence over less specific ones. Inline styles, which we went over in the previous lesson, have the highest specificity compared to selectors, while each type of selector has its own specificity level that contributes to how specific a declaration is. Other selectors contribute to specificity, but we're focusing only on the ones we've gone over so far:
@@ -36,7 +35,7 @@ Consider the following HTML and CSS code:
 <!-- index.html -->
 
 <div class="main">
-  <div class="list subsection"></div>
+  <div class="list subsection">Red text</div>
 </div>
 ~~~
 
@@ -60,7 +59,7 @@ Now, let's change things a little bit:
 <!-- index.html -->
 
 <div class="main">
-  <div class="list" id="subsection"></div>
+  <div class="list" id="subsection">Blue text</div>
 </div>
 ~~~
 ~~~css
@@ -77,6 +76,16 @@ Now, let's change things a little bit:
 
 In the example above, despite rule 2 having more class selectors than ID selectors, rule 1 is more specific because ID beats class. In this case, the `color: blue;` declaration would take precedence.
 
+And a bit more complex:
+
+~~~html
+<!-- index.html -->
+
+<div class="main">
+  <div class="list" id="subsection">Red text on yellow background</div>
+</div>
+~~~
+
 ~~~css
 /* rule 1 */
 #subsection {
@@ -192,30 +201,30 @@ For an element that has both the `alert` and `warning` classes, the cascade woul
 
 <div class="lesson-content__panel" markdown="1">
 
-1.  Go back to our [CSS exercises repository](https://github.com/TheOdinProject/css-exercises) and navigate to the `foundations` directory. Review the README and complete the final exercise:
-    - `06-cascade-fix`
+1. Go back to our [CSS exercises repository](https://github.com/TheOdinProject/css-exercises) and navigate to the `foundations` directory. Review the README and complete the final exercise:
+   - `06-cascade-fix`
 
     Note: Solutions for these exercises can be found in the `solution` folder of each exercise.
 
-2.  Remember the Recipe page you created as practice from the HTML Foundations section? Well, it's rather *plain* looking, isn't it? Let's fix that by adding some CSS to it!
-    - How you actually style it is completely open, but you should use the external CSS method (for this practice and moving forward). You should also try to use several of the properties mentioned in the previous lesson (color, background color, typography properties, etc). Take some time to play around with the various properties to get a feel for what they do. For now, don't worry at all about making it look *good*. This is just to practice and get used to writing CSS, not to make something to show off on your resume.
-    - We haven't covered how to use a custom font for the `font-family` property yet, so for now take a look at [CSS Fonts](https://www.w3schools.com/Css/css_font.asp) for a list of generic font families to use, and [CSS Web Safe Fonts](https://www.w3schools.com/cssref/css_websafe_fonts.asp) for a list of fonts that are web safe. Web safe means that these are fonts that are installed on basically every computer or device (but be sure to still include a generic font family as a fallback).
+2. Remember the Recipe page you created as practice from the HTML Foundations section? Well, it's rather *plain* looking, isn't it? Let's fix that by adding some CSS to it!
+   - How you actually style it is completely open, but you should use the external CSS method (for this practice and moving forward). You should also try to use several of the properties mentioned in the previous lesson (color, background color, typography properties, etc). Take some time to play around with the various properties to get a feel for what they do. For now, don't worry at all about making it look *good*. This is just to practice and get used to writing CSS, not to make something to show off on your resume.
+   - We haven't covered how to use a custom font for the `font-family` property yet, so for now take a look at [CSS Fonts](https://www.w3schools.com/Css/css_font.asp) for a list of generic font families to use, and [CSS Web Safe Fonts](https://www.w3schools.com/cssref/css_websafe_fonts.asp) for a list of fonts that are web safe. Web safe means that these are fonts that are installed on basically every computer or device (but be sure to still include a generic font family as a fallback).
 
 </div>
 
 ### Knowledge check
 
 This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.
 
-*   <a class="knowledge-check-link" href="#high-specificity-class-type">Between a rule that uses one class selector and a rule that uses three type selectors, which rule has the higher specificity?</a>
+- <a class="knowledge-check-link" href="#high-specificity-class-type">Between a rule that uses one class selector and a rule that uses three type selectors, which rule has the higher specificity?</a>
 
 ### Additional resources
 
 This section contains helpful links to related content. It isn’t required, so consider it supplemental.
 
-*   [The CSS Cascade](https://wattenberger.com/blog/css-cascade) is a great, interactive read that goes a little more in detail about other factors that affect what CSS rules actually end up being applied.
-*   [Changing the Font Family](https://www.digitalocean.com/community/tutorials/how-to-load-and-use-custom-fonts-with-css#finding-and-loading-a-font-file-from-a-hosted-service) describes a few different approaches to using custom fonts.
-*   [CSS Specificity Explained](https://www.youtube.com/watch?v=c0kfcP_nD9E) from Kevin Powell goes through various specificity examples and gives some advice on avoiding wrestling with specificity.
-*   [CSS Specificity Calculator](https://specificity.keegan.st/) allows you to fill in your own selectors and have their specificity calculated and visualized.
-*   [Mozilla CSS Properties Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference) can be used to learn if a particular CSS property is inherited or not; simply look for the **Inherited** field inside the **Formal Definition** section. [Here's an example](https://developer.mozilla.org/en-US/docs/Web/CSS/color#formal_definition) for the CSS `color` property.
-*   [Interactive Scrim on the CSS Cascade.](https://scrimba.com/scrim/c9gwmnAR)
+- [The CSS Cascade](https://wattenberger.com/blog/css-cascade) is a great, interactive read that goes a little more in detail about other factors that affect what CSS rules actually end up being applied.
+- [Changing the Font Family](https://www.digitalocean.com/community/tutorials/how-to-load-and-use-custom-fonts-with-css#finding-and-loading-a-font-file-from-a-hosted-service) describes a few different approaches to using custom fonts.
+- [CSS Specificity Explained](https://www.youtube.com/watch?v=c0kfcP_nD9E) from Kevin Powell goes through various specificity examples and gives some advice on avoiding wrestling with specificity.
+- [CSS Specificity Calculator](https://specificity.keegan.st/) allows you to fill in your own selectors and have their specificity calculated and visualized.
+- [Mozilla CSS Properties Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference) can be used to learn if a particular CSS property is inherited or not; simply look for the **Inherited** field inside the **Formal Definition** section. [Here's an example](https://developer.mozilla.org/en-US/docs/Web/CSS/color#formal_definition) for the CSS `color` property.
+- [Interactive Scrim on the CSS Cascade.](https://scrimba.com/scrim/c9gwmnAR)

foundations/html_css/html-foundations/html-boilerplate.md

@@ -49,6 +49,8 @@ Back in the `index.html` file, let's add the `<html>` element by typing out its
 </html>
 ~~~
 
+Noticed the word `lang` here? It represents an HTML attribute which is associated with the given HTML tag i.e. `<html>` in this case.These attributes provide additional information about HTML elements.(More about `HTML attributes` in the following lesson)
+
 #### What is the lang attribute? 
 
 `lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation.

foundations/html_css/html-foundations/links-and-images.md

@@ -8,19 +8,19 @@ In this lesson, we will learn how to create links and add some visual flair to o
 
 This section contains a general overview of topics that you will learn in this lesson.
 
-*   How to create links to pages on other websites on the internet
-*   How to create links to other pages on your own websites
-*   The difference between absolute and relative links
-*   How to display an image on a webpage using HTML
+- How to create links to pages on other websites on the internet
+- How to create links to other pages on your own websites
+- The difference between absolute and relative links
+- How to display an image on a webpage using HTML
 
 ### Preparation
 
 To get some practice using links and images throughout this lesson we need an HTML project to work with.
 
-1.  Create a new directory named `odin-links-and-images`.
-2.  Within that directory, create a new file named `index.html`.
-3.  Open the file in VS Code and fill in the usual HTML boilerplate.
-4.  Finally, add the following h1 to the body:
+1. Create a new directory named `odin-links-and-images`.
+2. Within that directory, create a new file named `index.html`.
+3. Open the file in VS Code and fill in the usual HTML boilerplate.
+4. Finally, add the following h1 to the body:
 
 ~~~html
 <h1>Homepage</h1>
@@ -72,8 +72,8 @@ Note that you may be fine if you forget to add `rel="noopener noreferrer"` since
 
 Generally, there are two kinds of links we will create:
 
-1.  Links to pages on other websites on the internet
-2.  Links to pages located on our own websites
+1. Links to pages on other websites on the internet
+2. Links to pages located on our own websites
 
 #### Absolute links
 
@@ -172,11 +172,11 @@ For example, using an absolute path we can display an image located on The Odin
 
 To use images that we have on our own websites, we can use a relative path.
 
-1.  Create a new directory named `images` within the `odin-links-and-images` project.
+1. Create a new directory named `images` within the `odin-links-and-images` project.
 
-2.  Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory we just created.
+2. Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory we just created.
 
-3.  Rename the image to `dog.jpg`.
+3. Rename the image to `dog.jpg`.
 
 Finally add the image to the `index.html` file:
 
@@ -204,9 +204,9 @@ What if we want to use the dog image in the about page? We would first have to g
 
 To break this down:
 
-1.  First, we are going to the parent directory of the pages directory which is `odin-links-and-images`.
-2.  Then, from the parent directory, we can go into the `images` directory.
-3.  Finally, we can access the `dog.jpg` file.
+1. First, we are going to the parent directory of the pages directory which is `odin-links-and-images`.
+2. Then, from the parent directory, we can go into the `images` directory.
+3. Finally, we can access the `dog.jpg` file.
 
 Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
 
@@ -227,36 +227,54 @@ This is how the The Odin Project logo example we used earlier looks with an alt
 
 As a bit of practice, add an alt attribute to the dog image we added to the `odin-links-and-images` project.
 
+### Image size attributes
+
+While not strictly required, specifying height and width
+attributes in image tags helps the browser layout the page without causing the page to jump and flash. 
+
+It is a good habit to always specify these attributes on every image, even when the image is the correct size or you are using CSS to modify it.
+
+Here is our Odin Project logo example with height and width tags included:
+
+<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="PoXJKvy" data-user="FabulousPBB" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
+  <span>See the Pen <a href="https://codepen.io/FabulousPBB/pen/PoXJKvy">
+  Image Height and Width Attributes</a> by Brian Lister (<a href="https://codepen.io/FabulousPBB">@FabulousPBB</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
+
+Go ahead and update the `odin-links-and-images` project with width and height tags on the dog image.
+
 ### Assignment
 
 <div class="lesson-content__panel" markdown="1">
 
-1.  [Watch Kevin Powell's HTML Links Video](https://www.youtube.com/watch?v=tsEQgGjSmkM&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-&index=5).
-2.  [Watch Kevin Powell's HTML Images Video](https://www.youtube.com/watch?v=0xoztJCHpbQ&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-&index=6).
-3.  [Watch Kevin Powell's File Structure Video](https://www.youtube.com/watch?v=ta3Oxx7Yqbo&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-&index=7).
-4.  [Read about the four main image formats that can be used on the web](https://internetingishard.netlify.app/html-and-css/links-and-images/#image-formats).
+1. [Watch Kevin Powell's HTML Links Video](https://www.youtube.com/watch?v=tsEQgGjSmkM&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-&index=5).
+2. [Watch Kevin Powell's HTML Images Video](https://www.youtube.com/watch?v=0xoztJCHpbQ&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-&index=6).
+3. [Watch Kevin Powell's File Structure Video](https://www.youtube.com/watch?v=ta3Oxx7Yqbo&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-&index=7).
+4. [Read about the four main image formats that can be used on the web](https://internetingishard.netlify.app/html-and-css/links-and-images/#image-formats).
 
 </div>
 
 ### Knowledge check
 
 This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.
 
-*   [What element is used to create a link?](#anchor-elements)
-*   [What is an attribute?](#attribute)
-*   [What attribute tells links where to go to?](#where-to-go)
-*   [What security considerations must be taken if you wish to use the target attribute to open links in a new tab/window?](#target-security)
-*   [What is the difference between an absolute and relative link?](#absolute-and-relative-links)
-*   [Which element is used to display an image?](#images)
-*   [What two attributes do images always need to have?](#two-attributes)
-*   [How do you access a parent directory in a filepath?](#parent-filepath)
-*   [What are the four main image formats that you can use for images on the web?](https://internetingishard.netlify.app/html-and-css/links-and-images/#image-formats)
+- [What element is used to create a link?](#anchor-elements)
+- [What is an attribute?](#attribute)
+- [What attribute tells links where to go to?](#where-to-go)
+- [What security considerations must be taken if you wish to use the target attribute to open links in a new tab/window?](#target-security)
+- [What is the difference between an absolute and relative link?](#absolute-and-relative-links)
+- [Which element is used to display an image?](#images)
+- [What two attributes do images always need to have?](#two-attributes)
+- [How do you access a parent directory in a filepath?](#parent-filepath)
+- [What are the four main image formats that you can use for images on the web?](https://internetingishard.netlify.app/html-and-css/links-and-images/#image-formats)
 
 ### Additional resources
 
 This section contains helpful links to related content. It isn’t required, so consider it supplemental.
 
--   [Interneting is hard's treatment on HTML links and images](https://internetingishard.netlify.app/html-and-css/links-and-images)
--   [What happened the day Google decided links including (`/`) were malware](https://www.itpro.co.uk/609724/google-apologises-after-blacklisting-entire-internet)
--   [Chris Coyier's When to use target="_blank" on CSS-Tricks](https://css-tricks.com/use-target_blank/)
+- [Interneting is hard's treatment on HTML links and images](https://internetingishard.netlify.app/html-and-css/links-and-images)
+- [What happened the day Google decided links including (`/`) were malware](https://www.itpro.co.uk/609724/google-apologises-after-blacklisting-entire-internet)
+- [Chris Coyier's When to use target="_blank" on CSS-Tricks](https://css-tricks.com/use-target_blank/)