diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-bubble-sort.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-bubble-sort.md index 5688b3b0ce..51c9e6be7b 100644 --- a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-bubble-sort.md +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-bubble-sort.md @@ -82,7 +82,7 @@ assert.sameMembers( `bubbleSort` 不應使用內置的 `.sort()` 方法。 ```js -assert(isBuiltInSortUsed()); +assert.isFalse(isBuiltInSortUsed()); ``` # --seed-- @@ -99,9 +99,14 @@ function isSorted(a){ function isBuiltInSortUsed(){ let sortUsed = false; + const temp = Array.prototype.sort; Array.prototype.sort = () => sortUsed = true; - bubbleSort([0, 1]); - return !sortUsed; + try { + bubbleSort([0, 1]); + } finally { + Array.prototype.sort = temp; + } + return sortUsed; } ``` diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-insertion-sort.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-insertion-sort.md index 5551109e7d..796f9e910e 100644 --- a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-insertion-sort.md +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-insertion-sort.md @@ -84,7 +84,7 @@ assert.deepEqual(insertionSort([5, 4, 33, 2, 8]), [2, 4, 5, 8, 33]) `insertionSort` 不應使用內置的 `.sort()` 方法。 ```js -assert(isBuiltInSortUsed()); +assert.isFalse(isBuiltInSortUsed()); ``` # --seed-- @@ -101,9 +101,14 @@ function isSorted(a){ function isBuiltInSortUsed(){ let sortUsed = false; + const temp = Array.prototype.sort; Array.prototype.sort = () => sortUsed = true; - insertionSort([0, 1]); - return !sortUsed; + try { + insertionSort([0, 1]); + } finally { + Array.prototype.sort = temp; + } + return sortUsed; } ``` diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-merge-sort.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-merge-sort.md index 01b2cb5df1..2cc705404a 100644 --- a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-merge-sort.md +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-merge-sort.md @@ -31,13 +31,6 @@ assert.isFunction(mergeSort); `mergeSort` 應該返回一個已排序的數組（從小到大）。 ```js -function isSorted(a){ - for(let i = 0; i < a.length - 1; i++) - if(a[i] > a[i + 1]) - return false; - return true; -} - assert.isTrue( isSorted( mergeSort([ @@ -93,17 +86,34 @@ assert.sameMembers( `mergeSort` 不應使用內置的 `.sort()` 方法。 ```js +assert.isFalse(isBuiltInSortUsed()); +``` + +# --seed-- + +## --after-user-code-- + +```js +function isSorted(a){ + for(let i = 0; i < a.length - 1; i++) + if(a[i] > a[i + 1]) + return false; + return true; +} + function isBuiltInSortUsed(){ let sortUsed = false; + const temp = Array.prototype.sort; Array.prototype.sort = () => sortUsed = true; - mergeSort([0, 1]); + try { + mergeSort([0, 1]); + } finally { + Array.prototype.sort = temp; + } return sortUsed; } -assert.isFalse(isBuiltInSortUsed()); ``` -# --seed-- - ## --seed-contents-- ```js diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-quick-sort.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-quick-sort.md index ff05130871..72961fd347 100644 --- a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-quick-sort.md +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-quick-sort.md @@ -80,7 +80,7 @@ assert.sameMembers( `quickSort` 不應使用內置的 `.sort()` 方法。 ```js -assert(isBuiltInSortUsed()); +assert.isFalse(isBuiltInSortUsed()); ``` # --seed-- @@ -97,9 +97,14 @@ function isSorted(a){ function isBuiltInSortUsed(){ let sortUsed = false; + const temp = Array.prototype.sort; Array.prototype.sort = () => sortUsed = true; - quickSort([0, 1]); - return !sortUsed; + try { + quickSort([0, 1]); + } finally { + Array.prototype.sort = temp; + } + return sortUsed; } ``` diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-selection-sort.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-selection-sort.md index a9228c6aaa..ce81e4d239 100644 --- a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-selection-sort.md +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-selection-sort.md @@ -78,7 +78,7 @@ assert.sameMembers( `selectionSort` 不應使用內置的 `.sort()` 方法。 ```js -assert(isBuiltInSortUsed()); +assert.isFalse(isBuiltInSortUsed()); ``` # --seed-- @@ -95,9 +95,14 @@ function isSorted(a){ function isBuiltInSortUsed(){ let sortUsed = false; + const temp = Array.prototype.sort; Array.prototype.sort = () => sortUsed = true; - selectionSort([0, 1]); - return !sortUsed; + try { + selectionSort([0, 1]); + } finally { + Array.prototype.sort = temp; + } + return sortUsed; } ``` diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md index 2684593f1a..6734d21d5e 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md @@ -245,7 +245,7 @@ assert.isNotEmpty(eventTitles); eventTitles.forEach((eventTitle => assert.isNotEmpty(eventTitle.innerText))); ``` -Each `p` element shoud have the event description. +Each `p` element should have the event description. ```js const eventDescriptions = document.querySelectorAll('p'); diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md index fc1aa3db47..869ed9f8b7 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md @@ -292,7 +292,7 @@ Your `#chimney` should have a `top` value that puts it at the top of your `#hous ```js const chimney = getComputedStyle(document.querySelector("#chimney")); -assert.equal(Number(chimney?.getPropertyValue("top").replace("px", "")), - Number(chimney?.getPropertyValue("height").replace("px", ""))); +assert.approximately(parseFloat(chimney?.getPropertyValue("top")), - parseFloat(chimney?.getPropertyValue("height")), 2); ``` Your `#chimney` should have a `z-index` that puts it behind the house. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-pyramid-generator/66f2836c459cfb16ae76f24f.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-pyramid-generator/66f2836c459cfb16ae76f24f.md index 9988956c63..7a8d551cb3 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-pyramid-generator/66f2836c459cfb16ae76f24f.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-pyramid-generator/66f2836c459cfb16ae76f24f.md @@ -52,7 +52,7 @@ assert.lengthOf(pyramid, 3); assert.equal(pyramid("o", 4, false), "\n o\n ooo\n ooooo\nooooooo\n") ``` -`pyramid("p", 5, true)` should return `"\nppppppppp\p ppppppp\n ppppp\n ppp\n p\n"`. +`pyramid("p", 5, true)` should return `"\nppppppppp\n ppppppp\n ppppp\n ppp\n p\n"`. ```js assert.equal(pyramid("p", 5, true), "\nppppppppp\n ppppppp\n ppppp\n ppp\n p\n") diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5ba834ded4bb067e67c.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5ba834ded4bb067e67c.md index 78c2a2ef8c..05d18d4856 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5ba834ded4bb067e67c.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5ba834ded4bb067e67c.md @@ -43,10 +43,6 @@ false true ``` -### --feedback-- - -The `i` flag makes the regex case-insensitive, so `freeCodeCamp` matches regardless of case, as long as the letters are the same. - --- ```js @@ -55,6 +51,10 @@ true false ``` +### --feedback-- + +The `i` flag makes the regex case-insensitive, so `freeCodeCamp` matches regardless of case, as long as the letters are the same. + --- ```js @@ -69,7 +69,7 @@ The `i` flag makes the regex case-insensitive, so `freeCodeCamp` matches regardl ## --video-solution-- -3 +2 ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md index 288d4d3d35..41fedafc46 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md @@ -171,23 +171,23 @@ It sets the transform origin to the center of the element's bounding box, allowi #### --text-- -What is the purpose of the `transform-origin` property in CSS? +What is the purpose of CSS's `overflow-x` and `overflow-y` properties? #### --distractors-- -It controls the animation speed of transformed elements +They adjust the padding and margin of an element. --- -It defines the display type of transformed elements +They set the background colour and font style of an element. --- -It sets the background of transformed elements +They define the visibility and display properties of an element. #### --answer-- -It specifies the point around which a transformation is applied to an element +They control the horizontal and vertical overflow of an element's content. ### --question-- @@ -303,23 +303,23 @@ Normalize.css, Eric Meyer's Reset, and HTML5 Reset #### --text-- -What does the `scale3d()` property value do in CSS? +Which CSS property is used to apply transformations such as rotation, scaling, and translation to elements? #### --distractors-- -It rotates an element in 3D space +`box-shadow` --- -It skews an element on the x, y, and z axes +`opacity` --- -It translates an element in 3D space +`z-index` #### --answer-- -It scales an element along the x, y, and z axes +`transform` ### --question-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-dates/66edd3711bb9f7efa73aef91.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-dates/66edd3711bb9f7efa73aef91.md index 0eda37067c..13af765c56 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-dates/66edd3711bb9f7efa73aef91.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-dates/66edd3711bb9f7efa73aef91.md @@ -297,7 +297,7 @@ How would you format a date to a locale-specific string or a more readable forma --- -`.toLocaleTimetring()` +`.toLocaleTimeString()` #### --answer-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-asynchronous-javascript/6723d35bb07d1bd220d0f28d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-asynchronous-javascript/6723d35bb07d1bd220d0f28d.md index 6ac24dbc00..22f1518c73 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-asynchronous-javascript/6723d35bb07d1bd220d0f28d.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-asynchronous-javascript/6723d35bb07d1bd220d0f28d.md @@ -138,7 +138,7 @@ fetch('https://api.example.com/data') In the above example, we first fetch data from one URL, then fetch data from another URL based on the first response, and finally log the second data received. -The `catch` method would handle any errors that occur during the process. This means you don't need to add error handling to each individual step, which can greatly simplify your code. +The `catch` method would handle any errors that occur during the process. This means you don't need to add error handling to each step, which can greatly simplify your code. ## Using `async/await` to handle promises diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-basic-css/671a887a7e62c75e9ab1ee4a.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-basic-css/671a887a7e62c75e9ab1ee4a.md index e9e7d19999..4e21b97659 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-basic-css/671a887a7e62c75e9ab1ee4a.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-basic-css/671a887a7e62c75e9ab1ee4a.md @@ -12,7 +12,7 @@ Review the concepts below to prepare for the upcoming quiz. ## CSS Basics - **What is CSS?**: Cascading Style Sheets (CSS) is a markup language used to apply styles to HTML elements. CSS is used for colors, background images, layouts and more. -- **Basic Anatomy of a CSS Rule**: A CSS rule is made up of two main parts: a selector and a declaration block. A selector is a pattern used in CSS to identify and target specific HTML elements for styling. A declaration block applies a set of styles for a given selector, or selectors. +- **Basic Anatomy of a CSS Rule**: A CSS rule is made up of two main parts: a selector and a declaration block. A selector is a pattern used in CSS to identify and target specific HTML elements for styling. A declaration block applies a set of styles for a given selector or selectors. Here is the general syntax of a CSS rule: @@ -98,7 +98,7 @@ h2 + p { } ``` -- **Subsequent-sibling Combinator (`~`)**: This combinator selects all siblings of a specified element that come after it. The following example will style only the second paragraph element because it is the only one that is a sibling of the `ul` element and share the same parent. +- **Subsequent-sibling Combinator (`~`)**: This combinator selects all siblings of a specified element that come after it. The following example will style only the second paragraph element because it is the only one that is a sibling of the `ul` element and shares the same parent. ```html
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-computer-basics/671a87e6dcef5b5bd765e5ed.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-computer-basics/671a87e6dcef5b5bd765e5ed.md index 48259c8be0..9bf84d25ce 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-computer-basics/671a87e6dcef5b5bd765e5ed.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-computer-basics/671a87e6dcef5b5bd765e5ed.md @@ -15,7 +15,7 @@ Review the concepts below to prepare for the upcoming quiz. - **Central Processing Unit(CPU)**: a processor that is responsible for executing instructions and performing calculations. - **Random Access Memory(RAM)**: a temporary storage location for the computer's CPU. - **Hard Disk Drive(HDD)**: a permanent storage location that is used to store data even when the computer is turned off. -- **Solid State Drive(SSD)**: non volatile flash memory and can be used in place of a hard drive. +- **Solid State Drive(SSD)**: non-volatile flash memory and can be used in place of a hard drive. - **Power Supply Unit(PSU)**: responsible for converting the electricity from the wall outlet into a form that the computer can use. - **Graphics Processing Unit(GPU)**: responsible for rendering visuals on the computer screen. - **Different Types of Internet Service Providers**: An Internet Service Provider (ISP) is a company that provides access to the internet. There are different types of ISPs, including dial-up, DSL, cable, fiber-optic, and satellite. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-accessibility/671a955b74ab5588735800d1.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-accessibility/671a955b74ab5588735800d1.md index 6c425c284b..65fb547403 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-accessibility/671a955b74ab5588735800d1.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-accessibility/671a955b74ab5588735800d1.md @@ -12,7 +12,7 @@ Review the concepts below to prepare for the upcoming quiz. ## Color Contrast Tools - **WebAIM's Color Contrast Checker**: This online tool allows you to input the foreground and background colors of your design and instantly see if they meet the Web Content Accessibility Guidelines (WCAG) standards. -- **TPGi Colour Contrast Analyzer**: This is a free color contrast checker that allows you to check if your websites and apps meet the Web Content Accessibility Guidelines (WCAG) standards. This tools also comes with a Color Blindness Simulator feature which allows you to see what your website or app looks like for people with color vision issues. +- **TPGi Colour Contrast Analyzer**: This is a free color contrast checker that allows you to check if your websites and apps meet the Web Content Accessibility Guidelines (WCAG) standards. This tool also comes with a Color Blindness Simulator feature which allows you to see what your website or app looks like for people with color vision issues. ## Best Practices With CSS and Accessibility diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md index 24c85a1f04..f0d49f7760 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md @@ -29,7 +29,7 @@ Review the concepts below to prepare for the upcoming quiz. - **`:visited pseudo-class`**: This pseudo-class is used to style links where a user has already visited. - **`:hover pseudo-class`**: This pseudo-class is used to style an elements where a user is actively hovering over them. - **`:focus pseudo-class`**: This pseudo-class is used to style an element when it receives focus. Examples would include `input` or `select` elements where the clicks or tabs on the element to focus it. -- **`:active pseudo-class`**: This pseudo-class is used to style an element that was activated by the user. Common example would be when the user clicks on a button. +- **`:active pseudo-class`**: This pseudo-class is used to style an element that was activated by the user. A common example would be when the user clicks on a button. ## Working with Backgrounds and Borders diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md index 9e1a3d3e81..6738912f28 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md @@ -14,13 +14,13 @@ Review the concepts below to prepare for the upcoming quiz. - **Color Theory Definition**: This is the study of how colors interact with each other and how they affect our perception. It covers color relationships, color harmony, and the psychological impact of color. - **Primary Colors**: These colors which are yellow, blue, and red, are the fundamental hues from which all other colors are derived. - **Secondary Colors**: These colors result from mixing equal amounts of two primary colors. Green, orange, and purple are examples of secondary colors. -- **Tertiary Colors**: These colors result from combining a primary color with a neighboring secondary color. Yellow-Green, Blue-Green, and Blue-Violet, are examples of tertiary colors. +- **Tertiary Colors**: These colors result from combining a primary color with a neighboring secondary color. Yellow-Green, Blue-Green, and Blue-Violet are examples of tertiary colors. - **Warm Colors**: These colors which include reds, oranges, and yellows, evoke feelings of comfort, warmth, and coziness. - **Cool Colors**: These colors which include blues, green, and purples, evoke feelings of calmness, serenity, and professionalism. - **Color Wheel**: The color wheel is a circular diagram that shows how colors relate to each other. It's an essential tool for designers because it helps them to select color combinations. - **Analogous Color Schemes**: These color schemes create cohesive and soothing experiences. They have analogous colors, which are adjacent to each other in the color wheel. - **Complementary Color Schemes**: These color schemes create high contrast and visual impact. Their colors are located on the opposite ends of the color wheel, relative to each other. -- **Triadic Color Scheme**: This color scheme has vibrant colors. They are made from colors that are approximately equidistant from each other. If they are connected, they form an equilateral triangle on the color wheel, like you can see in this example. +- **Triadic Color Scheme**: This color scheme has vibrant colors. They are made from colors that are approximately equidistant from each other. If they are connected, they form an equilateral triangle on the color wheel, as you can see in this example. - **Monochromatic Color Scheme**: For this color scheme, all the colors are derived from the same base color by adjusting its lightness, darkness, and saturation. This evokes a feeling of unity and harmony while still creating contrast. ## Different Ways to Work with Colors in CSS diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md index a14acbae2c..5642d58c09 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md @@ -41,7 +41,7 @@ flex-flow: column wrap-reverse; - **`justify-content: center;`**: This centers the flex items along the main axis. - **`justify-content: space-between;`**: This will distribute the elements evenly along the main axis. - **`justify-content: space-around;`**: This will distribute flex items evenly within the main axis, adding a space before the first item and after the last item. -- **`justify-content: space-evenly;`**: This will distributes the items evenly along the main axis. +- **`justify-content: space-evenly;`**: This will distribute the items evenly along the main axis. ## The `align-items` Property diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-grid/671a99394bedfb9a5bc687c4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-grid/671a99394bedfb9a5bc687c4.md index a65816af89..6167303c75 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-grid/671a99394bedfb9a5bc687c4.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-grid/671a99394bedfb9a5bc687c4.md @@ -11,7 +11,7 @@ Review the concepts below to prepare for the upcoming quiz. ## CSS Grid Basics -- **Definition**: CSS Grid is a two dimensional layout system used to create complex layouts in web pages. Grids will have rows and columns with gaps between them. To define a grid layout, you would set the `display` property to `grid`. +- **Definition**: CSS Grid is a two-dimensional layout system used to create complex layouts in web pages. Grids will have rows and columns with gaps between them. To define a grid layout, you would set the `display` property to `grid`. ```css .container { diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-positioning/671a967424a00e8c6561b182.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-positioning/671a967424a00e8c6561b182.md index 126586a5fd..e117c96f8c 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-positioning/671a967424a00e8c6561b182.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-positioning/671a967424a00e8c6561b182.md @@ -11,7 +11,7 @@ Review the concepts below to prepare for the upcoming quiz. ## Working With Floats -- **Definition**: Floats are used to remove an element from its normal flow on the page and position it either on the left or right side of its container. When this happens, text will wrap around that floated content. +- **Definition**: Floats are used to remove an element from its normal flow on the page and position it either on the left or right side of its container. When this happens, the text will wrap around that floated content. ```css float: left; @@ -30,8 +30,8 @@ float: right; ## Static, Relative and Absolute Positioning -- **Static Positioning**: This is the normal flow for the document. Elements are positioned from top to bottom, and left to right one after another. -- **Relative Positioning**: This allows you to use the `top`, `left`, `right` and `bottom` properties to position the element withing the normal document flow. You can also use relative positioning to make elements overlap with other elements on the page. +- **Static Positioning**: This is the normal flow for the document. Elements are positioned from top to bottom and left to right one after another. +- **Relative Positioning**: This allows you to use the `top`, `left`, `right` and `bottom` properties to position the element within the normal document flow. You can also use relative positioning to make elements overlap with other elements on the page. ```css .relative { @@ -64,7 +64,7 @@ float: right; } ``` -- **Sticky Positioning**: This type of positioning will act as an relative positioned element as you scroll down the page. If you specify a `top`, `left`, `right` or `bottom` property, then the element will stop acting like a relatively positioned element and start behaving like a fixed position element. +- **Sticky Positioning**: This type of positioning will act as a relative positioned element as you scroll down the page. If you specify a `top`, `left`, `right` or `bottom` property, then the element will stop acting like a relatively positioned element and start behaving like a fixed position element. ```css .positioned { diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-pseudo-classes/671a907bad4538752765f2ff.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-pseudo-classes/671a907bad4538752765f2ff.md index 5fb9d6edf0..5ed85226d5 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-pseudo-classes/671a907bad4538752765f2ff.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-pseudo-classes/671a907bad4538752765f2ff.md @@ -26,7 +26,7 @@ Review the concepts below to prepare for the upcoming quiz. - **`:checked` Pseudo-class**: This pseudo-class is used to indicate to the user that it is checked. - **`:valid` Pseudo-class**: This pseudo-class targets the input fields that meet the validation criteria. - **`:invalid` Pseudo-class**: This pseudo-class targets the input fields that do not meet the validation criteria. -- **`:in-range` and `:out-of-range` Pseudo-classes**: These pseudo-classes applies styles to elements based on whether their values are within or outside specified range constraints. +- **`:in-range` and `:out-of-range` Pseudo-classes**: These pseudo-classes apply styles to elements based on whether their values are within or outside specified range constraints. - **`:required` Pseudo-class**: This pseudo-class targets `input` elements that have the `required` attribute. It signals to the user that they must fill out the field to submit the form. - **`:optional` Pseudo-class**: This pseudo-class applies styles input elements that are not required and can be left empty. - **`:autofill` Pseudo-class**: This pseudo-class applies styles to input fields that the browser automatically fills with saved data. @@ -83,7 +83,7 @@ p:is(.example, .this-works-too) { } ``` -- **`:has()` Pseudo-class**: This pseudo-class is often dubbed the `"parent"` selector because it allows you to style elements who contain child elements specified in the selector list. +- **`:has()` Pseudo-class**: This pseudo-class is often dubbed the `"parent"` selector because it allows you to style elements that contain child elements specified in the selector list. ```css article:has(h2) { diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css/671a9a0a140c2b9d6a75629f.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css/671a9a0a140c2b9d6a75629f.md index 2db3b7d80c..31eb9ac186 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css/671a9a0a140c2b9d6a75629f.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css/671a9a0a140c2b9d6a75629f.md @@ -19,7 +19,7 @@ Review the concepts below to prepare for the upcoming exam. ## Inline, Internal, and External CSS - **Inline CSS**: These styles are written directly within an HTML element using the `style` attribute. Most of the time you will not be using inline CSS due to separation of concerns. -- **Internal CSS**: These styles are written within the `