Update links in Get Started page

Author: Qianqianye

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

@@ -33,7 +33,7 @@ Welcome to p5.js! New to p5.js and want to learn some basics for creating an int
 
 ## Prerequisites
 
-- [Setting Up Your Environment](setting-up-your-environment)
+- [Setting Up Your Environment](../setting-up-your-environment)
 
 Before you begin you should be able to:
 
@@ -43,7 +43,7 @@ Before you begin you should be able to:
 
 - Create and save a new p5.js project in [VS Code](https://code.visualstudio.com/) (or another code editor)
 
-For a step-by-step guide to creating and saving projects in the [p5.js Web Editor](https://editor.p5js.org/) or [VS Code](https://code.visualstudio.com/), visit [Setting Up Your Environment](setting-up-your-environment).
+For a step-by-step guide to creating and saving projects in the [p5.js Web Editor](https://editor.p5js.org/) or [VS Code](https://code.visualstudio.com/), visit [Setting Up Your Environment](../setting-up-your-environment).
 
 
 ## Step 1: Name and save a new p5.js project
@@ -222,7 +222,7 @@ As an object on the canvas moves to the right of this point, its horizontal loca
 
 The maximum values for the horizontal and vertical position of the canvas are set by the [`createCanvas()`](/reference/p5/createCanvas) function. The first number in [`createCanvas()`](/reference/p5/createCanvas) is the x-coordinate of the right edge, and the second number is the y-coordinate of the bottom edge. 
 
-Learn more about the HTML canvas coordinate system and shapes on [this p5.js reference page](https://p5js.org/learn/coordinate-system-and-shapes.html). 
+Learn more about the HTML canvas coordinate system and shapes on [this p5.js reference page](/reference). 
 
 
 ## Step 6: Color shapes and outlines on the canvas
@@ -258,7 +258,7 @@ function draw() {
 }
 `} />
 
-The [`fill()`](/reference/p5/fill) function sets the color for any shape on the canvas, and the [`stroke()`](/reference/p5/stroke) function sets the color for lines and outlines. They both use the same arguments that [`background()`](/reference/p5/background) uses. The code above uses an [HTML color name](https://www.w3schools.com/tags/ref_colornames.asp) as the *arguments* for [`fill()`](/reference/p5/fill) and [`stroke()`](/reference/p5/stroke); we can also use [RGB and HEX color codes](https://p5js.org/learn/color.html). The [`strokeWeight()`](/reference/p5/strokeWeight) function uses a number to set the thickness for lines, outlines, and points that are below it; the default [`strokeWeight()`](/reference/p5/strokeWeight) is 1 pixel. In the code above, [`strokeWeight(20)`](/reference/p5/strokeWeight) sets the circle’s outline to 20 pixels.
+The [`fill()`](/reference/p5/fill) function sets the color for any shape on the canvas, and the [`stroke()`](/reference/p5/stroke) function sets the color for lines and outlines. They both use the same arguments that [`background()`](/reference/p5/background) uses. The code above uses an [HTML color name](https://www.w3schools.com/tags/ref_colornames.asp) as the *arguments* for [`fill()`](/reference/p5/fill) and [`stroke()`](/reference/p5/stroke); we can also use [RGB and HEX color codes](https://htmlcolorcodes.com/). The [`strokeWeight()`](/reference/p5/strokeWeight) function uses a number to set the thickness for lines, outlines, and points that are below it; the default [`strokeWeight()`](/reference/p5/strokeWeight) is 1 pixel. In the code above, [`strokeWeight(20)`](/reference/p5/strokeWeight) sets the circle’s outline to 20 pixels.
 
 
 <Callout title="Tip">
@@ -335,7 +335,7 @@ function draw() {
 
 ![A diagram of a rectangle with a horizontal length labeled “width”, vertical length labeled “height”, and a point  in the top left corner labeled “(x,y)”. The syntax for using the rect() function is displayed above the diagram as: “rect(x, y, width, height);” ](../images/introduction/rect-diagram.png)
 
-Visit the p5.js reference pages for [`rect()`](/reference/p5/rect), [simple shapes](https://p5js.org/examples/hello-p5-simple-shapes.html), and [color](https://p5js.org/learn/color.html) to learn more.
+Visit the p5.js reference pages for [`rect()`](/reference/p5/rect), [simple shapes](/reference/#Shape), and [color](/reference/#Color) to learn more.
 
 
 ## Step 8: Add emojis
@@ -410,7 +410,7 @@ function draw() {
 
 Since [`draw()`](/reference/p5/draw) executes the code within the brackets over and over again, shapes are drawn on the canvas like layers. Code that appears first will be drawn first, and code that appears further down in [`draw()`](/reference/p5/draw) will be drawn after. This is why we must set [`fill()`](/reference/p5/fill), [`stroke()`](/reference/p5/stroke), and [`textSize()`](/reference/p5/textSize) before we add shapes or text to the canvas. p5.js needs to know the color or size of shapes and text ***before*** they are drawn. This also allows for overlapping shapes and can sometimes hide shapes behind others! Be sure to check the x- and y-coordinates of your shapes to see if they are behind other shapes.  
 
-See these sketches for examples of layering: [overlapping shapes (hidden)](https://editor.p5js.org/Msqcoding/sketches/A4qkDd729)|[overlapping shapes](https://editor.p5js.org/Msqcoding/sketches/s822PY5T8)
+See these sketches for examples of layering: [overlapping shapes (hidden)](https://editor.p5js.org/Msqcoding/sketches/A4qkDd729) and [overlapping shapes](https://editor.p5js.org/Msqcoding/sketches/s822PY5T8)
 
 Visit the reference pages for [`text()`](/reference/p5/text),` `[`textSize()`](/reference/p5/textSize), and [`draw()`](/reference/p5/draw) to learn more.
 
@@ -424,11 +424,11 @@ Some functions in p5.js need *arguments* that are *string* data types, while oth
 
 For example:
 
-- [`circle()`](/reference/p5/circle) uses 3 [numbers](https://p5js.org/examples/data-numbers.html): a [number](https://p5js.org/examples/data-numbers.html) that represents its x-coordinate, a [number](https://p5js.org/examples/data-numbers.html) that represents its y-coordinate, and a [number](https://p5js.org/examples/data-numbers.html) that represents its size in pixels. 
-- [`text()`](/reference/p5/text)` `uses a [string](/reference/p5/string) that represents the text displayed, and 2 [numbers](/reference/p5/number): a [number](/reference/p5/number) that represents its x-coordinate and a [number](/reference/p5/number) that represents its y-coordinate. 
-- [`fill()`](/reference/p5/fill),` `[`stroke()`](/reference/p5/stroke),` `and` `[`background()`](/reference/p5/background) use both [numbers](/reference/p5/number) and [strings](/reference/p5/string):
-  - 1 [number](https://p5js.org/examples/data-numbers.html) for gray-scale color
-  - 3 [numbers](https://p5js.org/examples/data-numbers.html) separated by commas for [RGB colors](https://p5js.org/learn/color.html)
+- [`circle()`](/reference/p5/circle) uses 3 [numbers](/reference/p5/number): a number that represents its x-coordinate, a number that represents its y-coordinate, and a number that represents its size in pixels. 
+- [`text()`](/reference/p5/text) uses a [string](/reference/p5/string) that represents the text displayed, and 2 [numbers](/reference/p5/number): a number that represents its x-coordinate and a number that represents its y-coordinate. 
+- [`fill()`](/reference/p5/fill), [`stroke()`](/reference/p5/stroke), and [`background()`](/reference/p5/background) use both [numbers](/reference/p5/number) and [strings](/reference/p5/string):
+  - 1 number for gray-scale color
+  - 3 numbers separated by commas for [RGB colors](https://www.w3schools.com/html/html_colors_rgb.asp)
   - a [string](/reference/p5/string) with an [HTML color name](https://www.w3schools.com/tags/ref_colornames.asp) or [HEX color values](https://www.w3schools.com/html/html_colors_hex.asp)
 
 
@@ -474,7 +474,7 @@ See some of these examples of how you can use [`mouseX`](/reference/p5/mouseX) a
 - [mouseX and mouseY changes color](https://editor.p5js.org/Msqcoding/sketches/VbLtYOfLc)
 - [mouseX and mouseY changes size](https://editor.p5js.org/Msqcoding/sketches/gJ27u_HEZ)
 
-Visit the p5.js reference pages for [`mouseX`](/reference/p5/mouseX) and [`mouseY`](/reference/p5/mouseY) to learn more! Be sure to review the p5.js coordinate system by visiting the p5.js reference page for the [canvas coordinate system and shapes.](https://p5js.org/learn/coordinate-system-and-shapes.html) Explore other system [variables](https://p5js.org/examples/data-variables.html) included in the [p5.js reference](https://p5js.org/reference/):
+Visit the p5.js reference pages for [`mouseX`](/reference/p5/mouseX) and [`mouseY`](/reference/p5/mouseY) to learn more! Be sure to review the p5.js coordinate system by visiting the p5.js reference page for the canvas coordinate system and shapes. Explore other system variables included in the [p5.js reference](https://p5js.org/reference/):
 
 - [`width`](/reference/p5/width)`:` The width of the canvas
 - [`height`](/reference/p5/height)`:` The height of the canvas
@@ -491,7 +491,7 @@ For more information, watch [this video](https://www.youtube.com/watch?v=LuGsp5K
 
 ## Next steps
 
-- Next Tutorial: [Variables and Change Tutorial](variables-and-change)
+- Next Tutorial: [Variables and Change Tutorial](../variables-and-change)
 - Begin your next sketch: 
   - You can duplicate [this template](https://editor.p5js.org/Msqcoding/sketches/nHyx0xDG6) to help you place shapes and text on the canvas!
     - Click on the [template link](https://editor.p5js.org/Msqcoding/sketches/nHyx0xDG6), click *File*, then *Duplicate*.
@@ -500,7 +500,7 @@ For more information, watch [this video](https://www.youtube.com/watch?v=LuGsp5K
 
 ## Previous step
 
-- [How-to: Setting Up Your Environment](setting-up-your-environment)
+- [How-to: Setting Up Your Environment](../setting-up-your-environment)
 
 
 ## Resources