Merge pull request #890 from coseeian/issue#872

resolve #872 on tutorial page only; other pages pending fixes

Author: perminder-17

src/content/tutorials/en/animating-with-media-objects.mdx

@@ -83,7 +83,7 @@ For more information on these concepts see these tutorials: [Get Started](/tutor
 ![A user clicks the arrow button, + button and selecting the Upload File option on the p5.js Web Editor.](../images/introduction/upload-editor-files.gif)
 
 
-#### Image files
+### Image files
 
 Image files store the grid of colored pixels that make up an image. There are a number of different image file types that p5.js can process.. The most common image types are JPEGs, PNGs, or GIFs. You can identify them by the extension found at the end of their filenames: `.jpg`, `.png`, `.gif`.
 
@@ -1230,14 +1230,14 @@ function keyPressed() {
 ```
 
 
-### Conclusion
+## Conclusion
 
 Congratulations on completing this tutorial! You have now created and [modified a GIF animation](https://editor.p5js.org/joanneamarisa/sketches/PFmWqy0qB) using p5.js. Visit the p5.js Reference pages below to explore other ways to display and manipulate images, pixels, and animated GIFs in p5.js.
 
 Here is [the complete code from this tutorial](https://editor.p5js.org/joanneamarisa/sketches/PFmWqy0qB) for reference.
 
 
-### Resources & References
+## Resources & References
 
 - [Media Cheat Sheet](https://www.codecademy.com/learn/learn-p5js/modules/p5js-media/cheatsheet)
 - [Wikimedia Commons](https://commons.wikimedia.org/wiki/Main_Page)

src/content/tutorials/en/get-started.mdx

@@ -66,7 +66,7 @@ Using the [p5.js Web Editor](https://editor.p5js.org/):
 
 ![A user on the p5.js Web Editor finds their project "Interactive Landscape" in their gallery of saved sketches.](../images/introduction/p5_editor_interactive_landscape_3.png)
 
-#### Default Code
+### Default Code
 
 All p5.js projects include the p5.js library and three files: [`index.html`](https://www.classes.cs.uchicago.edu/archive/2021/spring/11111-1/happycoding/p5js/web-dev.html#:~:text=The%20index.,the%20page%20using%20HTML%20tags!), [style.css](https://happycoding.io/tutorials/p5js/web-dev), and `sketch.js`. Make changes on the canvas by adding code to the sketch.js file. New p5.js projects begin with the following code in the sketch.js file:
 

src/content/tutorials/en/organizing-code-with-functions.mdx

@@ -812,17 +812,17 @@ Declare a `butterfly()` function to display a butterfly `🦋`emoji that appears
 
 Here is an [example](https://editor.p5js.org/[email protected]/sketches/yGn00cD2Q).
 
-##### Or Try This Spicy Challenge!
+### Or Try This Spicy Challenge!
 
 Create an entirely new sketch and animate a different landscape. Use functions to plan and organize this exciting project. 
 </Callout>
 
-# Next Steps
+## Next Steps
 
 - [Repeating with Loops](/tutorials/repeating-with-loops) 
 
 
-# References
+## References
 
 - [Expressions and operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#arithmetic_operators)
 - [String Interpolation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#string_interpolation)

src/content/tutorials/en/repeating-with-loops.mdx

@@ -261,7 +261,7 @@ function draw() {
 `} />
 
 
-### [For loops](/reference/p5/for)
+#### [For loops](/reference/p5/for)
 
 A for loop can execute a section (or block) of code multiple times. For loops can be written like this:
 

src/content/tutorials/en/variables-and-change.mdx

@@ -113,7 +113,7 @@ To keep this text shown, make sure this code appears on the last lines in [`draw
 Visit this [reference](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide/JavaScript#comments) or watch [this video](https://www.youtube.com/watch?v=xJcrPJuem5Q) to learn more about comments.
 
 
-##### Variables
+### Variables
 
 Variables store values in them that we can use in our sketch. **Variables are very helpful when adding elements to your sketch that will change over time.** They can be used in calculations, messages, as function arguments, and so much more!
 
@@ -122,7 +122,7 @@ Variables store values in them that we can use in our sketch. **Variables are ve
 In the template above, you use [`mouseX`](/reference/p5/mouseX) and [`mouseY`](/reference/p5/mouseY) to print the x- and y-coordinates of the mouse on the canvas using the [`text()`](/reference/p5/text) function. Variables can be displayed on the canvas alongside text using the [`text()`](/reference/p5/text) function and [string interpolation](https://www.geeksforgeeks.org/string-interpolation-in-javascript/) (example 2).
 
 
-##### String Interpolation
+### String Interpolation
 
 In [Get Started,](/tutorials/get-started) you learned that strings are [data types](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures) that are always surrounded by quotation marks (`""`). To use variables and strings together, we can use [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) to help us! Template literals begin and end with backticks (`\`\``) instead of quotation marks (`""`). You can type any character in between the backticks to generate a string like in [this example](https://editor.p5js.org/Msqcoding/sketches/pfSJLvxOB). You can include a variable in the string using the `${}` placeholder, and by placing the name of the variable inside the curly brackets like in [this example](https://editor.p5js.org/Msqcoding/sketches/8sM-h5Hd9).
 
@@ -272,7 +272,7 @@ function draw() {
 In the code above, the cloud is drawn using [`ellipse()`](/reference/p5/ellipse) with `cloudOneX` (which stores the number 50) as its x-coordinate, 50 as a y-coordinate, a width of 80 pixels, and a height of 40 pixels.
 
 
-##### Custom Variables
+### Custom Variables
 
 Custom variables store values, like [numbers](/reference/p5/number) or [strings](/reference/p5/String), that can change later. Since custom variables store values that can change, we can use them to change the x- or y-coordinates and size of shapes on the canvas. When the x- or y-coordinate of a shape changes, it appears to be moving. In this step:
 
@@ -289,7 +289,7 @@ Custom variables store values, like [numbers](/reference/p5/number) or [strings]
 Finally, you can use the variable name `cloudOneX` as the argument for the x-coordinate in [`ellipse()`](/reference/p5/ellipse). Since the variable `cloudOneX` has the number 50 stored in it, we can use `cloudOneX` as an argument in any function that requires a number. Here, you used it as the x-coordinate of the white cloud by replacing the number 50 with the variable name `cloudOneX`: `ellipse(cloudOneX, 50, 80, 40);`.
 
 
-##### Variable Scope
+### Variable Scope
 
 A *variable’s scope* describes where the variable can be used in a program. It is often useful to declare custom variables outside of [`setup()`](/reference/p5/setup) and [`draw()`](/reference/p5/draw) because it allows the variables to have a *global scope*. A variable with a *global scope* can be used anywhere in the program. Global variables are often declared on the very first lines of code. This helps programmers get an understanding of what is changing, makes the code easier to maintain, and avoids confusion further down in code. Built-in variables such as [`mouseX`](/reference/p5/mouseX), [`mouseY`](/reference/p5/mouseY), [`width`](/reference/p5/width), and [`height`](/reference/p5/height) do not have to be declared because they are built into the p5.js library, and you can use them anywhere in your code because they have global scope! 
 
@@ -298,7 +298,7 @@ Variables declared inside of other functions (like [`draw()`](/reference/p5/draw
 Visit these p5.js reference pages to learn more about declaring, initializing, and using custom variables: [`let`](/reference/p5/let), [numbers](/reference/p5/number), & [strings](/reference/p5/String).
 
 
-##### Using Variables for Animation
+### Using Variables for Animation
 
 A shape on the canvas appears to be moving when its x- or y-coordinates change. We can use variables in place for the x- or y-coordinates of anything that appears on the canvas. In the example:
 
@@ -530,7 +530,7 @@ When the program runs:
 See [this example](https://editor.p5js.org/p5Master718/sketches/wpAhQK9WN), which displays values for [`frameCount`](/reference/p5/frameCount) and `frameCount % width` as shapes move across the canvas. Visit the [Remainder reference on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder) to learn more!
 
 
-##### Animation and draw()
+### Animation and draw()
 
 The [`draw()`](/reference/p5/draw) function runs code repeatedly and behaves much like a flipbook when animating a series of still drawings. 
 
@@ -547,7 +547,7 @@ Each time [`draw()`](/reference/p5/draw) reads the lines of code for the backgro
 Visit the p5.js reference for [`draw()`](/reference/p5/draw) for more information.
 
 
-##### `frameRate()`, `frameCount` and `console.log()`
+### `frameRate()`, `frameCount` and `console.log()`
 
 The number of times [`draw()`](/reference/p5/draw) runs is stored in the variable [`frameCount`](/reference/p5/frameCount), and the number of times [`draw()`](/reference/p5/draw) runs in 1 second is known as the *frame rate*. By default, the frame rate is set by your computer, which is about 60 for most computers. This indicates that the code appearing in [`draw()`](/reference/p5/draw) will run about 60 times in a second.  
 
@@ -897,7 +897,7 @@ When [`draw()`](/reference/p5/draw) runs:
 When [`draw()`](/reference/p5/draw) runs again, the same process occurs, and the shooting star is placed at a new random location within the top half of the canvas. This continues until [`draw()`](/reference/p5/draw) is stopped.
 
 
-##### Error Messages
+### Error Messages
 
 p5.js uses the console to communicate with programmers about lines of code that it does not understand. These are called [error messages.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors) Programmers use this to locate and fix “*bugs*” in their code. Read the [Field Guide to Debugging](/tutorials/field-guide-to-debugging) or watch [this video](https://www.youtube.com/watch?v=LuGsp5KeJMM\&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA\&index=6) to learn more!
 

src/layouts/TutorialLayout.astro

@@ -61,7 +61,7 @@ const relatedExamples =
   topic="tutorials"
   className="tutorials"
 >
-  {entry.data.authors && <h6>By {entry.data.authors.join(", ")}</h6>}
+  {entry.data.authors && <section role="group" aria-label="authors">By {entry.data.authors.join(", ")}</section>}
   {entry.data.authorsNote && <h7>{entry.data.authorsNote}</h7>}
   <div class="rendered-markdown">
     <Content