Fix typos

snippets/border-with-top-triangle.md

@@ -8,7 +8,7 @@ Creates a content container with a triangle at the top.
 - Use the `:before` and `:after` pseudo-elements to create two triangles.
 - The colors of the two triangles should be the same as the container's `border-color` and the container's `background-color` respectively.
 - The `border-width` of the one triangle (`:before`) should be `1px` wider than the other one (`:after`), in order to act as the border.
-- The smalle triangle (`:after`) should be `1px` to the right of the larger triangle (`:before`) to allow for its left border to be shown.
+- The smaller triangle (`:after`) should be `1px` to the right of the larger triangle (`:before`) to allow for its left border to be shown.
 
 ```html
 <div class="container">Border with top triangle</div>

snippets/mouse-cursor-gradient-tracking.md

@@ -7,7 +7,7 @@ A hover effect where the gradient follows the mouse cursor.
 
 - Declare two CSS variables, `--x` and `--y`, used to track the position of the mouse on the button.
 - Declare a CSS variable, `--size`, used to modify the gradient's dimensions.
-- Use `background: radial-gradient(circle closest-side, pink, transparent);` to create the gradient at the correct postion.
+- Use `background: radial-gradient(circle closest-side, pink, transparent);` to create the gradient at the correct position.
 - Use `Document.querySelector()` and `EventTarget.addEventListener()` to register a handler for the `'mousemove'` event.
 - Use `Element.getBoundingClientRect()` and `CSSStyleDeclaration.setProperty()` to update the values of the `--x` and `--y` CSS variables.
 

snippets/triangle.md

@@ -3,7 +3,7 @@ title: Triangle
 tags: visual,beginner
 ---
 
-Creates a trinagular shape with pure CSS.
+Creates a triangular shape with pure CSS.
 
 - Use three borders to create a triangle shape.
 - All borders should have the same `border-width` (`20px`).

snippets/truncate-text-multiline.md

@@ -7,7 +7,7 @@ Truncates text that is longer than one line.
 
 - Use `overflow: hidden` to prevent the text from overflowing its dimensions.
 - Set a fixed `width` to ensure the element has at least one constant dimension.
-- Set `height: 109.2px` as calculated from the `font-size`, using the formule `font-size * line-height * numberOfLines` (in this case `26 * 1.4 * 3 = 109.2`).
+- Set `height: 109.2px` as calculated from the `font-size`, using the formula `font-size * line-height * numberOfLines` (in this case `26 * 1.4 * 3 = 109.2`).
 - Set `height: 36.4px` as calculated for the gradient container, based on the formula `font-size * line-height` (in this case `26 * 1.4 = 36.4`).
 - Use `background` with `linear-gradient()` to create a gradient from `transparent` to the `background-color`.