diff --git a/snippets/border-with-top-triangle.md b/snippets/border-with-top-triangle.md index 42121c05a..e2207c9e6 100644 --- a/snippets/border-with-top-triangle.md +++ b/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
Border with top triangle
diff --git a/snippets/mouse-cursor-gradient-tracking.md b/snippets/mouse-cursor-gradient-tracking.md index a093d4b69..31149e7c9 100644 --- a/snippets/mouse-cursor-gradient-tracking.md +++ b/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. diff --git a/snippets/triangle.md b/snippets/triangle.md index aa2d8a902..23d865d54 100644 --- a/snippets/triangle.md +++ b/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`). diff --git a/snippets/truncate-text-multiline.md b/snippets/truncate-text-multiline.md index 90c18f450..866dad5d1 100644 --- a/snippets/truncate-text-multiline.md +++ b/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`.