From 95b8c79eb7f59ed66d075e1d967ba002a956041f Mon Sep 17 00:00:00 2001 From: camperbot Date: Mon, 31 Mar 2025 14:09:59 +0000 Subject: [PATCH] chore(i18n,learn): processed translations --- .../656477845006313fbfea0ad1.md | 2 +- .../65a5080cafc379ea8d382c42.md | 2 +- .../66d6a7a3e1aa411e94bf2346.md | 2 +- .../66a37f37ef5823a313de8c26.md | 30 +++--- .../66ed9002f45ce3ece4053eb6.md | 2 +- .../6724e2026e608219108d385a.md | 96 +++++++++++++++++++ .../656477845006313fbfea0ad1.md | 2 +- .../65a5080cafc379ea8d382c42.md | 2 +- .../66d6a7a3e1aa411e94bf2346.md | 2 +- .../66a37f37ef5823a313de8c26.md | 30 +++--- .../66ed9002f45ce3ece4053eb6.md | 2 +- .../6724e2026e608219108d385a.md | 96 +++++++++++++++++++ .../656477845006313fbfea0ad1.md | 2 +- .../65a5080cafc379ea8d382c42.md | 2 +- .../66d6a7a3e1aa411e94bf2346.md | 2 +- .../66a37f37ef5823a313de8c26.md | 30 +++--- .../66ed9002f45ce3ece4053eb6.md | 2 +- .../6724e2026e608219108d385a.md | 96 +++++++++++++++++++ .../656477845006313fbfea0ad1.md | 2 +- .../65a5080cafc379ea8d382c42.md | 2 +- .../66d6a7a3e1aa411e94bf2346.md | 2 +- .../66a37f37ef5823a313de8c26.md | 30 +++--- .../66ed9002f45ce3ece4053eb6.md | 2 +- .../6724e2026e608219108d385a.md | 96 +++++++++++++++++++ .../656477845006313fbfea0ad1.md | 2 +- .../65a5080cafc379ea8d382c42.md | 2 +- .../66d6a7a3e1aa411e94bf2346.md | 2 +- .../66a37f37ef5823a313de8c26.md | 30 +++--- .../66ed9002f45ce3ece4053eb6.md | 2 +- .../6724e2026e608219108d385a.md | 96 +++++++++++++++++++ .../656477845006313fbfea0ad1.md | 2 +- .../65a5080cafc379ea8d382c42.md | 2 +- .../66d6a7a3e1aa411e94bf2346.md | 2 +- .../66a37f37ef5823a313de8c26.md | 30 +++--- .../66ed9002f45ce3ece4053eb6.md | 2 +- .../6724e2026e608219108d385a.md | 96 +++++++++++++++++++ .../palindrome-checker.md | 36 +++---- .../roman-numeral-converter.md | 92 +++++++++--------- .../656477845006313fbfea0ad1.md | 2 +- .../65a5080cafc379ea8d382c42.md | 2 +- .../66d6a7a3e1aa411e94bf2346.md | 2 +- .../66a37f37ef5823a313de8c26.md | 30 +++--- .../66ed9002f45ce3ece4053eb6.md | 2 +- .../6724e2026e608219108d385a.md | 96 +++++++++++++++++++ .../656477845006313fbfea0ad1.md | 2 +- .../65a5080cafc379ea8d382c42.md | 2 +- .../66d6a7a3e1aa411e94bf2346.md | 2 +- .../66a37f37ef5823a313de8c26.md | 32 ++++--- .../66ed9002f45ce3ece4053eb6.md | 2 +- .../6724e2026e608219108d385a.md | 96 +++++++++++++++++++ .../656477845006313fbfea0ad1.md | 2 +- .../65a5080cafc379ea8d382c42.md | 2 +- .../66d6a7a3e1aa411e94bf2346.md | 2 +- .../66a37f37ef5823a313de8c26.md | 30 +++--- .../66ed9002f45ce3ece4053eb6.md | 2 +- .../6724e2026e608219108d385a.md | 96 +++++++++++++++++++ .../656477845006313fbfea0ad1.md | 2 +- .../65a5080cafc379ea8d382c42.md | 2 +- .../66d6a7a3e1aa411e94bf2346.md | 2 +- .../66a37f37ef5823a313de8c26.md | 30 +++--- .../6708143cab2b583ecd3324f5.md | 48 +++++----- .../670838977810401844af6fe0.md | 74 +++++++------- .../670838e914096b194b0c51aa.md | 74 +++++++------- .../670839051794aa19fcef6dc8.md | 44 ++++----- .../66ed9002f45ce3ece4053eb6.md | 2 +- .../6724e2026e608219108d385a.md | 96 +++++++++++++++++++ 66 files changed, 1375 insertions(+), 335 deletions(-) diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md index 63870767bb..de80fcb16e 100644 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md +++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md @@ -7,7 +7,7 @@ dashedName: step-12 # --description-- -Although the effect might seem equal to `random.choice()`, `secrets` ensure you the most secure source of randomness that your operating system can provide. +Although the effect might seem equal to `random.choice()`, `secrets` ensures you the most secure source of randomness that your operating system can provide. Now, delete your two `print()` calls. diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md index 6b9cb3ca6c..311e1abe42 100644 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md @@ -31,7 +31,7 @@ This adjective in the expression means allowing access, passage, or a view throu ### --feedback-- -This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. it is in plural form. +This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. It is in plural form. # --scene-- 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 5828a1e374..cfe3753e0c 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 @@ -20,7 +20,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab 1. Your `#house` should have a background color and a border set. 1. You should have a `#chimney`, `#roof`, `#window-1`, `#window-2`, and `#door` `div`s within the `#house`. 1. All of the immediate children of the `#house` should have a `position` of `absolute`. -1. `#roof`, `#chimney`, `window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set. +1. `#roof`, `#chimney`, `#window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set. 1. Your `#roof` should have a top value of `0`. 1. Your `#door` should be placed at the bottom of your house. 1. Your windows should be placed below your `#roof` and at least higher than one third of your `#door`'s height. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md index c37f8f4ba6..d0803c2173 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md @@ -22,25 +22,27 @@ Fulfill the user stories below and get all the tests to pass to complete the lab 4. Inside the `.orbit` `div`, there should be another `div` with the class `moon`. -5. The `space` `div` should be centered on the page and have a width and height of `200px`. +5. The `div` element with a `class` of `space` should be centered on the page and have a width and height of `200px`. -6. The `earth` `div` should use `absolute` positioning. Position the center of the `earth` `div` at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the `earth` `div` back by half its own width and height, to center it within its parent, `.space`. +6. The `div` element with a `class` of `space` should use `relative` positioning. -7. The `earth` `div` should have a width and height of `100px`. +7. The `.earth` element should use `absolute` positioning. Position the center of the `.earth` element at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the `.earth` element back by half its own width and height, to center it within its parent, the `.space` element. -8. The `orbit` `div` should have a width and height of `200px`. +8. The `.earth` element should have a width and height of `100px`. -9. The `orbit` `div` should be positioned using `absolute` positioning. Its bottom right corner should be at the center of the `space` `div` using a `transform` property that shifts it by `-50%` on both the vertical and horizontal axes. +9. The `.orbit` element should have a width and height of `200px`. -10. The orbit path for the moon around the Earth should be a circle. +10. The `.orbit` element should be positioned using `absolute` positioning. Its bottom right corner should be at the center of the `space` `div` using a `transform` property that shifts it by `-50%` on both the vertical and horizontal axes. -11. The moon `div` should be positioned using `absolute` positioning and have a width and height of `30px`. The moon `div` should position itself at the top of the `orbit` `div` and be centered horizontally. +11. The orbit path for the moon around the Earth should be a circle. -12. You should further adjust the horizontal positioning of the `moon` by moving the element to the left by half of its width. +12. The `.moon` element should be positioned using `absolute` positioning and have a width and height of `30px`. The `.moon` element should position itself at the top of the `orbit` `div` and be centered horizontally. -13. Your `.earth` and `.moon` `div` elements should have a background color and a `border-radius` of `50%` to make them look like planets. +13. You should further adjust the horizontal positioning of the `.moon` element by moving the element to the left by half of its width. -14. You should define a `@keyframes orbit` animation that rotates the `.orbit` element 360 degrees around its center. You should apply this animation to the `.orbit` element with a duration of `5` seconds, a linear timing function, and infinite iterations. +14. Your `.earth` and `.moon` elements should have a background color and a `border-radius` of `50%` to make them look like planets. + +15. You should define a `@keyframes orbit` animation that rotates the `.orbit` element 360 degrees around its center. You should apply this animation to the `.orbit` element with a duration of `5` seconds, a linear timing function, and infinite iterations. **Note:** Be sure to link your stylesheet in your HTML and apply your CSS. @@ -69,7 +71,13 @@ assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.width, '2 assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.height, '200px'); ``` -You should have a `div` with the class `earth` inside the `.space` `div`. +The `.space` element should have a `position` property of `relative`. + +```js +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.position, 'relative') +``` + +You should have a `div` with a class of `earth` inside the `div` with a `class` of `space`. ```js assert.exists(document.querySelector('div.space div.earth')); diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md index d4d8054993..e14472e42e 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md @@ -29,7 +29,7 @@ They are properties that adjust an element's size or layout on the page. --- -They are selector used to add movement effects to an element during interactions. +They are selectors used to add movement effects to an element during interactions. #### --answer-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md index a654a07963..dcf19148da 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md @@ -9,7 +9,103 @@ dashedName: review-css-libraries-and-frameworks Review the concepts below to prepare for the upcoming quiz. +## CSS Frameworks +- **CSS frameworks**: CSS frameworks can speed up your workflow, create a uniform visual style across a website, make your design look consistent across multiple browsers, and keep your CSS code more organized. +- **Popular CSS frameworks**: Some of the popular CSS frameworks are Tailwind CSS, Bootstrap, Materialize, and Foundation. +- **Potential disadvantages**: + - The CSS provided by the framework might conflict with your custom CSS. + - Your website might look similar to other websites using the same framework. + - Large frameworks might cause performance issues. + +## Two Types of CSS Frameworks + +- **Utility-first CSS frameworks**: These frameworks have small classes with specific purposes, like setting the margin, padding, or background color. You can assign these small classes directly to the HTML elements as needed. Tailwind CSS is categorized as a utility-first CSS framework. + +Here is an example of using Tailwind CSS to style a button. + +```html + +``` + +- **Component-based CSS frameworks**: These frameworks have pre-built components with pre-defined styles that you can add to your website. The components are available in the official documentation of the CSS framework, and you can copy and paste them into your project. Bootstrap is categorized as a component-based CSS framework. + +Here is an example of using Bootstrap to create a list group. Instead of applying small classes to your HTML elements, you will add the entire component, including the HTML structure. + +```html +
+ +
+``` + +## CSS Preprocessors + +- **CSS preprocessor**: A CSS preprocessor is a tool that extends standard CSS. It compiles the code with extended syntax into a native CSS file. It can be helpful for writing cleaner, reusable, less repetitive, and scalable CSS for complex projects. +- **Features**: Some of the features that can be provided by CSS preprocessors are variables, mixins, nesting, and selector inheritance. +- **Popular CSS preprocessors**: Some of the popular CSS preprocessors are Sass, Less, and Stylus. +- **Potential disadvantages**: + - Compiling the CSS rules into standard CSS might cause overhead. + - The compiled code may be difficult to debug. + +## Sass + +- **Sass**: It is one of the most popular CSS preprocessors. Sass stands for "Syntactically Awesome Style Sheets." +- **Features supported by Sass**: Sass supports features like variables, nested CSS rules, modules, mixins, inheritance, and operators for basic mathematical operations + +## Two Syntaxes Supported by Sass + +- **SCSS syntax**: The SCSS (Sassy CSS) expands the basic syntax of CSS. It is the most widely used syntax for Sass. SCSS files have an `.scss` extension. + +Here is an example of defining and using a variable in SCSS. + +```scss +$primary-color: #3498eb; + +header { + background-color: $primary-color; +} +``` + +- **Indented syntax**: The indented syntax was Sass's original syntax and is also known as the "Sass syntax." + +Here is an example of defining and using a variable in the indented syntax. + +```sass +$primary-color: #3498eb + +header + background-color: $primary-color +``` + +### Mixins + +- **Mixins**: Mixins allow you to group multiple CSS properties and their values under the name and reuse that block of CSS code throughout your stylesheet. + +Here is an example of defining a mixin in SCSS syntax. In this case, the mixin is called `center-flex`. It has three CSS properties to center elements using flexbox. + +```scss +@mixin center-flex { + display: flex; + justify-content: center; + align-items: center; +} +``` + +Here is an example of using the mixin you defined. + +```scss +section { + @include center-flex; + height: 500px; + background-color: #3289a8; +} +``` # --assignment-- diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md index deaea423ed..c5d59d91cb 100644 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md +++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md @@ -7,7 +7,7 @@ dashedName: step-12 # --description-- -Although the effect might seem equal to `random.choice()`, `secrets` ensure you the most secure source of randomness that your operating system can provide. +Although the effect might seem equal to `random.choice()`, `secrets` ensures you the most secure source of randomness that your operating system can provide. Now, delete your two `print()` calls. diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md index 6b9cb3ca6c..311e1abe42 100644 --- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md @@ -31,7 +31,7 @@ This adjective in the expression means allowing access, passage, or a view throu ### --feedback-- -This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. it is in plural form. +This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. It is in plural form. # --scene-- diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md b/curriculum/challenges/chinese/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md index 99fe8a2fea..185dffe8ca 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md +++ b/curriculum/challenges/chinese/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md @@ -20,7 +20,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab 1. Your `#house` should have a background color and a border set. 1. You should have a `#chimney`, `#roof`, `#window-1`, `#window-2`, and `#door` `div`s within the `#house`. 1. All of the immediate children of the `#house` should have a `position` of `absolute`. -1. `#roof`, `#chimney`, `window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set. +1. `#roof`, `#chimney`, `#window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set. 1. Your `#roof` should have a top value of `0`. 1. Your `#door` should be placed at the bottom of your house. 1. Your windows should be placed below your `#roof` and at least higher than one third of your `#door`'s height. diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md b/curriculum/challenges/chinese/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md index a8fcb34ee3..6ce6d8263b 100644 --- a/curriculum/challenges/chinese/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md +++ b/curriculum/challenges/chinese/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md @@ -22,25 +22,27 @@ Fulfill the user stories below and get all the tests to pass to complete the lab 4. Inside the `.orbit` `div`, there should be another `div` with the class `moon`. -5. The `space` `div` should be centered on the page and have a width and height of `200px`. +5. The `div` element with a `class` of `space` should be centered on the page and have a width and height of `200px`. -6. The `earth` `div` should use `absolute` positioning. Position the center of the `earth` `div` at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the `earth` `div` back by half its own width and height, to center it within its parent, `.space`. +6. The `div` element with a `class` of `space` should use `relative` positioning. -7. The `earth` `div` should have a width and height of `100px`. +7. The `.earth` element should use `absolute` positioning. Position the center of the `.earth` element at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the `.earth` element back by half its own width and height, to center it within its parent, the `.space` element. -8. The `orbit` `div` should have a width and height of `200px`. +8. The `.earth` element should have a width and height of `100px`. -9. The `orbit` `div` should be positioned using `absolute` positioning. Its bottom right corner should be at the center of the `space` `div` using a `transform` property that shifts it by `-50%` on both the vertical and horizontal axes. +9. The `.orbit` element should have a width and height of `200px`. -10. The orbit path for the moon around the Earth should be a circle. +10. The `.orbit` element should be positioned using `absolute` positioning. Its bottom right corner should be at the center of the `space` `div` using a `transform` property that shifts it by `-50%` on both the vertical and horizontal axes. -11. The moon `div` should be positioned using `absolute` positioning and have a width and height of `30px`. The moon `div` should position itself at the top of the `orbit` `div` and be centered horizontally. +11. The orbit path for the moon around the Earth should be a circle. -12. You should further adjust the horizontal positioning of the `moon` by moving the element to the left by half of its width. +12. The `.moon` element should be positioned using `absolute` positioning and have a width and height of `30px`. The `.moon` element should position itself at the top of the `orbit` `div` and be centered horizontally. -13. Your `.earth` and `.moon` `div` elements should have a background color and a `border-radius` of `50%` to make them look like planets. +13. You should further adjust the horizontal positioning of the `.moon` element by moving the element to the left by half of its width. -14. You should define a `@keyframes orbit` animation that rotates the `.orbit` element 360 degrees around its center. You should apply this animation to the `.orbit` element with a duration of `5` seconds, a linear timing function, and infinite iterations. +14. Your `.earth` and `.moon` elements should have a background color and a `border-radius` of `50%` to make them look like planets. + +15. You should define a `@keyframes orbit` animation that rotates the `.orbit` element 360 degrees around its center. You should apply this animation to the `.orbit` element with a duration of `5` seconds, a linear timing function, and infinite iterations. **Note:** Be sure to link your stylesheet in your HTML and apply your CSS. @@ -69,7 +71,13 @@ assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.width, '2 assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.height, '200px'); ``` -You should have a `div` with the class `earth` inside the `.space` `div`. +The `.space` element should have a `position` property of `relative`. + +```js +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.position, 'relative') +``` + +You should have a `div` with a class of `earth` inside the `div` with a `class` of `space`. ```js assert.exists(document.querySelector('div.space div.earth')); diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md b/curriculum/challenges/chinese/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md index d4d8054993..e14472e42e 100644 --- a/curriculum/challenges/chinese/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md +++ b/curriculum/challenges/chinese/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md @@ -29,7 +29,7 @@ They are properties that adjust an element's size or layout on the page. --- -They are selector used to add movement effects to an element during interactions. +They are selectors used to add movement effects to an element during interactions. #### --answer-- diff --git a/curriculum/challenges/chinese/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md b/curriculum/challenges/chinese/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md index a654a07963..dcf19148da 100644 --- a/curriculum/challenges/chinese/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md +++ b/curriculum/challenges/chinese/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md @@ -9,7 +9,103 @@ dashedName: review-css-libraries-and-frameworks Review the concepts below to prepare for the upcoming quiz. +## CSS Frameworks +- **CSS frameworks**: CSS frameworks can speed up your workflow, create a uniform visual style across a website, make your design look consistent across multiple browsers, and keep your CSS code more organized. +- **Popular CSS frameworks**: Some of the popular CSS frameworks are Tailwind CSS, Bootstrap, Materialize, and Foundation. +- **Potential disadvantages**: + - The CSS provided by the framework might conflict with your custom CSS. + - Your website might look similar to other websites using the same framework. + - Large frameworks might cause performance issues. + +## Two Types of CSS Frameworks + +- **Utility-first CSS frameworks**: These frameworks have small classes with specific purposes, like setting the margin, padding, or background color. You can assign these small classes directly to the HTML elements as needed. Tailwind CSS is categorized as a utility-first CSS framework. + +Here is an example of using Tailwind CSS to style a button. + +```html + +``` + +- **Component-based CSS frameworks**: These frameworks have pre-built components with pre-defined styles that you can add to your website. The components are available in the official documentation of the CSS framework, and you can copy and paste them into your project. Bootstrap is categorized as a component-based CSS framework. + +Here is an example of using Bootstrap to create a list group. Instead of applying small classes to your HTML elements, you will add the entire component, including the HTML structure. + +```html +
+ +
+``` + +## CSS Preprocessors + +- **CSS preprocessor**: A CSS preprocessor is a tool that extends standard CSS. It compiles the code with extended syntax into a native CSS file. It can be helpful for writing cleaner, reusable, less repetitive, and scalable CSS for complex projects. +- **Features**: Some of the features that can be provided by CSS preprocessors are variables, mixins, nesting, and selector inheritance. +- **Popular CSS preprocessors**: Some of the popular CSS preprocessors are Sass, Less, and Stylus. +- **Potential disadvantages**: + - Compiling the CSS rules into standard CSS might cause overhead. + - The compiled code may be difficult to debug. + +## Sass + +- **Sass**: It is one of the most popular CSS preprocessors. Sass stands for "Syntactically Awesome Style Sheets." +- **Features supported by Sass**: Sass supports features like variables, nested CSS rules, modules, mixins, inheritance, and operators for basic mathematical operations + +## Two Syntaxes Supported by Sass + +- **SCSS syntax**: The SCSS (Sassy CSS) expands the basic syntax of CSS. It is the most widely used syntax for Sass. SCSS files have an `.scss` extension. + +Here is an example of defining and using a variable in SCSS. + +```scss +$primary-color: #3498eb; + +header { + background-color: $primary-color; +} +``` + +- **Indented syntax**: The indented syntax was Sass's original syntax and is also known as the "Sass syntax." + +Here is an example of defining and using a variable in the indented syntax. + +```sass +$primary-color: #3498eb + +header + background-color: $primary-color +``` + +### Mixins + +- **Mixins**: Mixins allow you to group multiple CSS properties and their values under the name and reuse that block of CSS code throughout your stylesheet. + +Here is an example of defining a mixin in SCSS syntax. In this case, the mixin is called `center-flex`. It has three CSS properties to center elements using flexbox. + +```scss +@mixin center-flex { + display: flex; + justify-content: center; + align-items: center; +} +``` + +Here is an example of using the mixin you defined. + +```scss +section { + @include center-flex; + height: 500px; + background-color: #3289a8; +} +``` # --assignment-- diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md index cae1150fdb..04979e598d 100644 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md +++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md @@ -7,7 +7,7 @@ dashedName: step-12 # --description-- -Although the effect might seem equal to `random.choice()`, `secrets` ensure you the most secure source of randomness that your operating system can provide. +Although the effect might seem equal to `random.choice()`, `secrets` ensures you the most secure source of randomness that your operating system can provide. Now, delete your two `print()` calls. diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md index 6b9cb3ca6c..311e1abe42 100644 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md @@ -31,7 +31,7 @@ This adjective in the expression means allowing access, passage, or a view throu ### --feedback-- -This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. it is in plural form. +This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. It is in plural form. # --scene-- diff --git a/curriculum/challenges/espanol/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md b/curriculum/challenges/espanol/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md index b7531dae51..92931561a2 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md +++ b/curriculum/challenges/espanol/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md @@ -20,7 +20,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab 1. Your `#house` should have a background color and a border set. 1. You should have a `#chimney`, `#roof`, `#window-1`, `#window-2`, and `#door` `div`s within the `#house`. 1. All of the immediate children of the `#house` should have a `position` of `absolute`. -1. `#roof`, `#chimney`, `window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set. +1. `#roof`, `#chimney`, `#window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set. 1. Your `#roof` should have a top value of `0`. 1. Your `#door` should be placed at the bottom of your house. 1. Your windows should be placed below your `#roof` and at least higher than one third of your `#door`'s height. diff --git a/curriculum/challenges/espanol/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md b/curriculum/challenges/espanol/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md index 7a2d52cbe2..e61fb86573 100644 --- a/curriculum/challenges/espanol/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md +++ b/curriculum/challenges/espanol/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md @@ -22,25 +22,27 @@ Fulfill the user stories below and get all the tests to pass to complete the lab 4. Inside the `.orbit` `div`, there should be another `div` with the class `moon`. -5. The `space` `div` should be centered on the page and have a width and height of `200px`. +5. The `div` element with a `class` of `space` should be centered on the page and have a width and height of `200px`. -6. The `earth` `div` should use `absolute` positioning. Position the center of the `earth` `div` at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the `earth` `div` back by half its own width and height, to center it within its parent, `.space`. +6. The `div` element with a `class` of `space` should use `relative` positioning. -7. The `earth` `div` should have a width and height of `100px`. +7. The `.earth` element should use `absolute` positioning. Position the center of the `.earth` element at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the `.earth` element back by half its own width and height, to center it within its parent, the `.space` element. -8. The `orbit` `div` should have a width and height of `200px`. +8. The `.earth` element should have a width and height of `100px`. -9. The `orbit` `div` should be positioned using `absolute` positioning. Its bottom right corner should be at the center of the `space` `div` using a `transform` property that shifts it by `-50%` on both the vertical and horizontal axes. +9. The `.orbit` element should have a width and height of `200px`. -10. The orbit path for the moon around the Earth should be a circle. +10. The `.orbit` element should be positioned using `absolute` positioning. Its bottom right corner should be at the center of the `space` `div` using a `transform` property that shifts it by `-50%` on both the vertical and horizontal axes. -11. The moon `div` should be positioned using `absolute` positioning and have a width and height of `30px`. The moon `div` should position itself at the top of the `orbit` `div` and be centered horizontally. +11. The orbit path for the moon around the Earth should be a circle. -12. You should further adjust the horizontal positioning of the `moon` by moving the element to the left by half of its width. +12. The `.moon` element should be positioned using `absolute` positioning and have a width and height of `30px`. The `.moon` element should position itself at the top of the `orbit` `div` and be centered horizontally. -13. Your `.earth` and `.moon` `div` elements should have a background color and a `border-radius` of `50%` to make them look like planets. +13. You should further adjust the horizontal positioning of the `.moon` element by moving the element to the left by half of its width. -14. You should define a `@keyframes orbit` animation that rotates the `.orbit` element 360 degrees around its center. You should apply this animation to the `.orbit` element with a duration of `5` seconds, a linear timing function, and infinite iterations. +14. Your `.earth` and `.moon` elements should have a background color and a `border-radius` of `50%` to make them look like planets. + +15. You should define a `@keyframes orbit` animation that rotates the `.orbit` element 360 degrees around its center. You should apply this animation to the `.orbit` element with a duration of `5` seconds, a linear timing function, and infinite iterations. **Note:** Be sure to link your stylesheet in your HTML and apply your CSS. @@ -69,7 +71,13 @@ assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.width, '2 assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.height, '200px'); ``` -You should have a `div` with the class `earth` inside the `.space` `div`. +The `.space` element should have a `position` property of `relative`. + +```js +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.position, 'relative') +``` + +You should have a `div` with a class of `earth` inside the `div` with a `class` of `space`. ```js assert.exists(document.querySelector('div.space div.earth')); diff --git a/curriculum/challenges/espanol/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md b/curriculum/challenges/espanol/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md index d4d8054993..e14472e42e 100644 --- a/curriculum/challenges/espanol/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md +++ b/curriculum/challenges/espanol/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md @@ -29,7 +29,7 @@ They are properties that adjust an element's size or layout on the page. --- -They are selector used to add movement effects to an element during interactions. +They are selectors used to add movement effects to an element during interactions. #### --answer-- diff --git a/curriculum/challenges/espanol/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md b/curriculum/challenges/espanol/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md index a654a07963..dcf19148da 100644 --- a/curriculum/challenges/espanol/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md +++ b/curriculum/challenges/espanol/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md @@ -9,7 +9,103 @@ dashedName: review-css-libraries-and-frameworks Review the concepts below to prepare for the upcoming quiz. +## CSS Frameworks +- **CSS frameworks**: CSS frameworks can speed up your workflow, create a uniform visual style across a website, make your design look consistent across multiple browsers, and keep your CSS code more organized. +- **Popular CSS frameworks**: Some of the popular CSS frameworks are Tailwind CSS, Bootstrap, Materialize, and Foundation. +- **Potential disadvantages**: + - The CSS provided by the framework might conflict with your custom CSS. + - Your website might look similar to other websites using the same framework. + - Large frameworks might cause performance issues. + +## Two Types of CSS Frameworks + +- **Utility-first CSS frameworks**: These frameworks have small classes with specific purposes, like setting the margin, padding, or background color. You can assign these small classes directly to the HTML elements as needed. Tailwind CSS is categorized as a utility-first CSS framework. + +Here is an example of using Tailwind CSS to style a button. + +```html + +``` + +- **Component-based CSS frameworks**: These frameworks have pre-built components with pre-defined styles that you can add to your website. The components are available in the official documentation of the CSS framework, and you can copy and paste them into your project. Bootstrap is categorized as a component-based CSS framework. + +Here is an example of using Bootstrap to create a list group. Instead of applying small classes to your HTML elements, you will add the entire component, including the HTML structure. + +```html +
+ +
+``` + +## CSS Preprocessors + +- **CSS preprocessor**: A CSS preprocessor is a tool that extends standard CSS. It compiles the code with extended syntax into a native CSS file. It can be helpful for writing cleaner, reusable, less repetitive, and scalable CSS for complex projects. +- **Features**: Some of the features that can be provided by CSS preprocessors are variables, mixins, nesting, and selector inheritance. +- **Popular CSS preprocessors**: Some of the popular CSS preprocessors are Sass, Less, and Stylus. +- **Potential disadvantages**: + - Compiling the CSS rules into standard CSS might cause overhead. + - The compiled code may be difficult to debug. + +## Sass + +- **Sass**: It is one of the most popular CSS preprocessors. Sass stands for "Syntactically Awesome Style Sheets." +- **Features supported by Sass**: Sass supports features like variables, nested CSS rules, modules, mixins, inheritance, and operators for basic mathematical operations + +## Two Syntaxes Supported by Sass + +- **SCSS syntax**: The SCSS (Sassy CSS) expands the basic syntax of CSS. It is the most widely used syntax for Sass. SCSS files have an `.scss` extension. + +Here is an example of defining and using a variable in SCSS. + +```scss +$primary-color: #3498eb; + +header { + background-color: $primary-color; +} +``` + +- **Indented syntax**: The indented syntax was Sass's original syntax and is also known as the "Sass syntax." + +Here is an example of defining and using a variable in the indented syntax. + +```sass +$primary-color: #3498eb + +header + background-color: $primary-color +``` + +### Mixins + +- **Mixins**: Mixins allow you to group multiple CSS properties and their values under the name and reuse that block of CSS code throughout your stylesheet. + +Here is an example of defining a mixin in SCSS syntax. In this case, the mixin is called `center-flex`. It has three CSS properties to center elements using flexbox. + +```scss +@mixin center-flex { + display: flex; + justify-content: center; + align-items: center; +} +``` + +Here is an example of using the mixin you defined. + +```scss +section { + @include center-flex; + height: 500px; + background-color: #3289a8; +} +``` # --assignment-- diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md b/curriculum/challenges/german/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md index 092c6920d1..4a093b90ba 100644 --- a/curriculum/challenges/german/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md +++ b/curriculum/challenges/german/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md @@ -7,7 +7,7 @@ dashedName: step-12 # --description-- -Although the effect might seem equal to `random.choice()`, `secrets` ensure you the most secure source of randomness that your operating system can provide. +Although the effect might seem equal to `random.choice()`, `secrets` ensures you the most secure source of randomness that your operating system can provide. Now, delete your two `print()` calls. diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md index c1cb575530..257b6e2012 100644 --- a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md @@ -31,7 +31,7 @@ This adjective in the expression means allowing access, passage, or a view throu ### --feedback-- -This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. it is in plural form. +This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. It is in plural form. # --scene-- diff --git a/curriculum/challenges/german/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md b/curriculum/challenges/german/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md index 7e467753d8..b60b49832b 100644 --- a/curriculum/challenges/german/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md +++ b/curriculum/challenges/german/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md @@ -20,7 +20,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab 1. Your `#house` should have a background color and a border set. 1. You should have a `#chimney`, `#roof`, `#window-1`, `#window-2`, and `#door` `div`s within the `#house`. 1. All of the immediate children of the `#house` should have a `position` of `absolute`. -1. `#roof`, `#chimney`, `window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set. +1. `#roof`, `#chimney`, `#window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set. 1. Your `#roof` should have a top value of `0`. 1. Your `#door` should be placed at the bottom of your house. 1. Your windows should be placed below your `#roof` and at least higher than one third of your `#door`'s height. diff --git a/curriculum/challenges/german/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md b/curriculum/challenges/german/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md index 7a2d52cbe2..e61fb86573 100644 --- a/curriculum/challenges/german/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md +++ b/curriculum/challenges/german/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md @@ -22,25 +22,27 @@ Fulfill the user stories below and get all the tests to pass to complete the lab 4. Inside the `.orbit` `div`, there should be another `div` with the class `moon`. -5. The `space` `div` should be centered on the page and have a width and height of `200px`. +5. The `div` element with a `class` of `space` should be centered on the page and have a width and height of `200px`. -6. The `earth` `div` should use `absolute` positioning. Position the center of the `earth` `div` at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the `earth` `div` back by half its own width and height, to center it within its parent, `.space`. +6. The `div` element with a `class` of `space` should use `relative` positioning. -7. The `earth` `div` should have a width and height of `100px`. +7. The `.earth` element should use `absolute` positioning. Position the center of the `.earth` element at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the `.earth` element back by half its own width and height, to center it within its parent, the `.space` element. -8. The `orbit` `div` should have a width and height of `200px`. +8. The `.earth` element should have a width and height of `100px`. -9. The `orbit` `div` should be positioned using `absolute` positioning. Its bottom right corner should be at the center of the `space` `div` using a `transform` property that shifts it by `-50%` on both the vertical and horizontal axes. +9. The `.orbit` element should have a width and height of `200px`. -10. The orbit path for the moon around the Earth should be a circle. +10. The `.orbit` element should be positioned using `absolute` positioning. Its bottom right corner should be at the center of the `space` `div` using a `transform` property that shifts it by `-50%` on both the vertical and horizontal axes. -11. The moon `div` should be positioned using `absolute` positioning and have a width and height of `30px`. The moon `div` should position itself at the top of the `orbit` `div` and be centered horizontally. +11. The orbit path for the moon around the Earth should be a circle. -12. You should further adjust the horizontal positioning of the `moon` by moving the element to the left by half of its width. +12. The `.moon` element should be positioned using `absolute` positioning and have a width and height of `30px`. The `.moon` element should position itself at the top of the `orbit` `div` and be centered horizontally. -13. Your `.earth` and `.moon` `div` elements should have a background color and a `border-radius` of `50%` to make them look like planets. +13. You should further adjust the horizontal positioning of the `.moon` element by moving the element to the left by half of its width. -14. You should define a `@keyframes orbit` animation that rotates the `.orbit` element 360 degrees around its center. You should apply this animation to the `.orbit` element with a duration of `5` seconds, a linear timing function, and infinite iterations. +14. Your `.earth` and `.moon` elements should have a background color and a `border-radius` of `50%` to make them look like planets. + +15. You should define a `@keyframes orbit` animation that rotates the `.orbit` element 360 degrees around its center. You should apply this animation to the `.orbit` element with a duration of `5` seconds, a linear timing function, and infinite iterations. **Note:** Be sure to link your stylesheet in your HTML and apply your CSS. @@ -69,7 +71,13 @@ assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.width, '2 assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.height, '200px'); ``` -You should have a `div` with the class `earth` inside the `.space` `div`. +The `.space` element should have a `position` property of `relative`. + +```js +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.position, 'relative') +``` + +You should have a `div` with a class of `earth` inside the `div` with a `class` of `space`. ```js assert.exists(document.querySelector('div.space div.earth')); diff --git a/curriculum/challenges/german/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md b/curriculum/challenges/german/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md index d4d8054993..e14472e42e 100644 --- a/curriculum/challenges/german/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md +++ b/curriculum/challenges/german/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md @@ -29,7 +29,7 @@ They are properties that adjust an element's size or layout on the page. --- -They are selector used to add movement effects to an element during interactions. +They are selectors used to add movement effects to an element during interactions. #### --answer-- diff --git a/curriculum/challenges/german/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md b/curriculum/challenges/german/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md index a654a07963..dcf19148da 100644 --- a/curriculum/challenges/german/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md +++ b/curriculum/challenges/german/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md @@ -9,7 +9,103 @@ dashedName: review-css-libraries-and-frameworks Review the concepts below to prepare for the upcoming quiz. +## CSS Frameworks +- **CSS frameworks**: CSS frameworks can speed up your workflow, create a uniform visual style across a website, make your design look consistent across multiple browsers, and keep your CSS code more organized. +- **Popular CSS frameworks**: Some of the popular CSS frameworks are Tailwind CSS, Bootstrap, Materialize, and Foundation. +- **Potential disadvantages**: + - The CSS provided by the framework might conflict with your custom CSS. + - Your website might look similar to other websites using the same framework. + - Large frameworks might cause performance issues. + +## Two Types of CSS Frameworks + +- **Utility-first CSS frameworks**: These frameworks have small classes with specific purposes, like setting the margin, padding, or background color. You can assign these small classes directly to the HTML elements as needed. Tailwind CSS is categorized as a utility-first CSS framework. + +Here is an example of using Tailwind CSS to style a button. + +```html + +``` + +- **Component-based CSS frameworks**: These frameworks have pre-built components with pre-defined styles that you can add to your website. The components are available in the official documentation of the CSS framework, and you can copy and paste them into your project. Bootstrap is categorized as a component-based CSS framework. + +Here is an example of using Bootstrap to create a list group. Instead of applying small classes to your HTML elements, you will add the entire component, including the HTML structure. + +```html +
+ +
+``` + +## CSS Preprocessors + +- **CSS preprocessor**: A CSS preprocessor is a tool that extends standard CSS. It compiles the code with extended syntax into a native CSS file. It can be helpful for writing cleaner, reusable, less repetitive, and scalable CSS for complex projects. +- **Features**: Some of the features that can be provided by CSS preprocessors are variables, mixins, nesting, and selector inheritance. +- **Popular CSS preprocessors**: Some of the popular CSS preprocessors are Sass, Less, and Stylus. +- **Potential disadvantages**: + - Compiling the CSS rules into standard CSS might cause overhead. + - The compiled code may be difficult to debug. + +## Sass + +- **Sass**: It is one of the most popular CSS preprocessors. Sass stands for "Syntactically Awesome Style Sheets." +- **Features supported by Sass**: Sass supports features like variables, nested CSS rules, modules, mixins, inheritance, and operators for basic mathematical operations + +## Two Syntaxes Supported by Sass + +- **SCSS syntax**: The SCSS (Sassy CSS) expands the basic syntax of CSS. It is the most widely used syntax for Sass. SCSS files have an `.scss` extension. + +Here is an example of defining and using a variable in SCSS. + +```scss +$primary-color: #3498eb; + +header { + background-color: $primary-color; +} +``` + +- **Indented syntax**: The indented syntax was Sass's original syntax and is also known as the "Sass syntax." + +Here is an example of defining and using a variable in the indented syntax. + +```sass +$primary-color: #3498eb + +header + background-color: $primary-color +``` + +### Mixins + +- **Mixins**: Mixins allow you to group multiple CSS properties and their values under the name and reuse that block of CSS code throughout your stylesheet. + +Here is an example of defining a mixin in SCSS syntax. In this case, the mixin is called `center-flex`. It has three CSS properties to center elements using flexbox. + +```scss +@mixin center-flex { + display: flex; + justify-content: center; + align-items: center; +} +``` + +Here is an example of using the mixin you defined. + +```scss +section { + @include center-flex; + height: 500px; + background-color: #3289a8; +} +``` # --assignment-- diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md b/curriculum/challenges/italian/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md index 3ab8fa361d..15189a99bd 100644 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md +++ b/curriculum/challenges/italian/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md @@ -7,7 +7,7 @@ dashedName: step-12 # --description-- -Although the effect might seem equal to `random.choice()`, `secrets` ensure you the most secure source of randomness that your operating system can provide. +Although the effect might seem equal to `random.choice()`, `secrets` ensures you the most secure source of randomness that your operating system can provide. Now, delete your two `print()` calls. diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md index 6b9cb3ca6c..311e1abe42 100644 --- a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md @@ -31,7 +31,7 @@ This adjective in the expression means allowing access, passage, or a view throu ### --feedback-- -This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. it is in plural form. +This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. It is in plural form. # --scene-- diff --git a/curriculum/challenges/italian/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md b/curriculum/challenges/italian/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md index 7e467753d8..b60b49832b 100644 --- a/curriculum/challenges/italian/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md +++ b/curriculum/challenges/italian/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md @@ -20,7 +20,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab 1. Your `#house` should have a background color and a border set. 1. You should have a `#chimney`, `#roof`, `#window-1`, `#window-2`, and `#door` `div`s within the `#house`. 1. All of the immediate children of the `#house` should have a `position` of `absolute`. -1. `#roof`, `#chimney`, `window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set. +1. `#roof`, `#chimney`, `#window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set. 1. Your `#roof` should have a top value of `0`. 1. Your `#door` should be placed at the bottom of your house. 1. Your windows should be placed below your `#roof` and at least higher than one third of your `#door`'s height. diff --git a/curriculum/challenges/italian/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md b/curriculum/challenges/italian/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md index 7a2d52cbe2..e61fb86573 100644 --- a/curriculum/challenges/italian/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md +++ b/curriculum/challenges/italian/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md @@ -22,25 +22,27 @@ Fulfill the user stories below and get all the tests to pass to complete the lab 4. Inside the `.orbit` `div`, there should be another `div` with the class `moon`. -5. The `space` `div` should be centered on the page and have a width and height of `200px`. +5. The `div` element with a `class` of `space` should be centered on the page and have a width and height of `200px`. -6. The `earth` `div` should use `absolute` positioning. Position the center of the `earth` `div` at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the `earth` `div` back by half its own width and height, to center it within its parent, `.space`. +6. The `div` element with a `class` of `space` should use `relative` positioning. -7. The `earth` `div` should have a width and height of `100px`. +7. The `.earth` element should use `absolute` positioning. Position the center of the `.earth` element at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the `.earth` element back by half its own width and height, to center it within its parent, the `.space` element. -8. The `orbit` `div` should have a width and height of `200px`. +8. The `.earth` element should have a width and height of `100px`. -9. The `orbit` `div` should be positioned using `absolute` positioning. Its bottom right corner should be at the center of the `space` `div` using a `transform` property that shifts it by `-50%` on both the vertical and horizontal axes. +9. The `.orbit` element should have a width and height of `200px`. -10. The orbit path for the moon around the Earth should be a circle. +10. The `.orbit` element should be positioned using `absolute` positioning. Its bottom right corner should be at the center of the `space` `div` using a `transform` property that shifts it by `-50%` on both the vertical and horizontal axes. -11. The moon `div` should be positioned using `absolute` positioning and have a width and height of `30px`. The moon `div` should position itself at the top of the `orbit` `div` and be centered horizontally. +11. The orbit path for the moon around the Earth should be a circle. -12. You should further adjust the horizontal positioning of the `moon` by moving the element to the left by half of its width. +12. The `.moon` element should be positioned using `absolute` positioning and have a width and height of `30px`. The `.moon` element should position itself at the top of the `orbit` `div` and be centered horizontally. -13. Your `.earth` and `.moon` `div` elements should have a background color and a `border-radius` of `50%` to make them look like planets. +13. You should further adjust the horizontal positioning of the `.moon` element by moving the element to the left by half of its width. -14. You should define a `@keyframes orbit` animation that rotates the `.orbit` element 360 degrees around its center. You should apply this animation to the `.orbit` element with a duration of `5` seconds, a linear timing function, and infinite iterations. +14. Your `.earth` and `.moon` elements should have a background color and a `border-radius` of `50%` to make them look like planets. + +15. You should define a `@keyframes orbit` animation that rotates the `.orbit` element 360 degrees around its center. You should apply this animation to the `.orbit` element with a duration of `5` seconds, a linear timing function, and infinite iterations. **Note:** Be sure to link your stylesheet in your HTML and apply your CSS. @@ -69,7 +71,13 @@ assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.width, '2 assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.height, '200px'); ``` -You should have a `div` with the class `earth` inside the `.space` `div`. +The `.space` element should have a `position` property of `relative`. + +```js +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.position, 'relative') +``` + +You should have a `div` with a class of `earth` inside the `div` with a `class` of `space`. ```js assert.exists(document.querySelector('div.space div.earth')); diff --git a/curriculum/challenges/italian/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md b/curriculum/challenges/italian/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md index d4d8054993..e14472e42e 100644 --- a/curriculum/challenges/italian/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md +++ b/curriculum/challenges/italian/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md @@ -29,7 +29,7 @@ They are properties that adjust an element's size or layout on the page. --- -They are selector used to add movement effects to an element during interactions. +They are selectors used to add movement effects to an element during interactions. #### --answer-- diff --git a/curriculum/challenges/italian/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md b/curriculum/challenges/italian/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md index a654a07963..dcf19148da 100644 --- a/curriculum/challenges/italian/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md +++ b/curriculum/challenges/italian/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md @@ -9,7 +9,103 @@ dashedName: review-css-libraries-and-frameworks Review the concepts below to prepare for the upcoming quiz. +## CSS Frameworks +- **CSS frameworks**: CSS frameworks can speed up your workflow, create a uniform visual style across a website, make your design look consistent across multiple browsers, and keep your CSS code more organized. +- **Popular CSS frameworks**: Some of the popular CSS frameworks are Tailwind CSS, Bootstrap, Materialize, and Foundation. +- **Potential disadvantages**: + - The CSS provided by the framework might conflict with your custom CSS. + - Your website might look similar to other websites using the same framework. + - Large frameworks might cause performance issues. + +## Two Types of CSS Frameworks + +- **Utility-first CSS frameworks**: These frameworks have small classes with specific purposes, like setting the margin, padding, or background color. You can assign these small classes directly to the HTML elements as needed. Tailwind CSS is categorized as a utility-first CSS framework. + +Here is an example of using Tailwind CSS to style a button. + +```html + +``` + +- **Component-based CSS frameworks**: These frameworks have pre-built components with pre-defined styles that you can add to your website. The components are available in the official documentation of the CSS framework, and you can copy and paste them into your project. Bootstrap is categorized as a component-based CSS framework. + +Here is an example of using Bootstrap to create a list group. Instead of applying small classes to your HTML elements, you will add the entire component, including the HTML structure. + +```html +
+ +
+``` + +## CSS Preprocessors + +- **CSS preprocessor**: A CSS preprocessor is a tool that extends standard CSS. It compiles the code with extended syntax into a native CSS file. It can be helpful for writing cleaner, reusable, less repetitive, and scalable CSS for complex projects. +- **Features**: Some of the features that can be provided by CSS preprocessors are variables, mixins, nesting, and selector inheritance. +- **Popular CSS preprocessors**: Some of the popular CSS preprocessors are Sass, Less, and Stylus. +- **Potential disadvantages**: + - Compiling the CSS rules into standard CSS might cause overhead. + - The compiled code may be difficult to debug. + +## Sass + +- **Sass**: It is one of the most popular CSS preprocessors. Sass stands for "Syntactically Awesome Style Sheets." +- **Features supported by Sass**: Sass supports features like variables, nested CSS rules, modules, mixins, inheritance, and operators for basic mathematical operations + +## Two Syntaxes Supported by Sass + +- **SCSS syntax**: The SCSS (Sassy CSS) expands the basic syntax of CSS. It is the most widely used syntax for Sass. SCSS files have an `.scss` extension. + +Here is an example of defining and using a variable in SCSS. + +```scss +$primary-color: #3498eb; + +header { + background-color: $primary-color; +} +``` + +- **Indented syntax**: The indented syntax was Sass's original syntax and is also known as the "Sass syntax." + +Here is an example of defining and using a variable in the indented syntax. + +```sass +$primary-color: #3498eb + +header + background-color: $primary-color +``` + +### Mixins + +- **Mixins**: Mixins allow you to group multiple CSS properties and their values under the name and reuse that block of CSS code throughout your stylesheet. + +Here is an example of defining a mixin in SCSS syntax. In this case, the mixin is called `center-flex`. It has three CSS properties to center elements using flexbox. + +```scss +@mixin center-flex { + display: flex; + justify-content: center; + align-items: center; +} +``` + +Here is an example of using the mixin you defined. + +```scss +section { + @include center-flex; + height: 500px; + background-color: #3289a8; +} +``` # --assignment-- diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md index 4d5b973a1e..1dc811ae7b 100644 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md +++ b/curriculum/challenges/japanese/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md @@ -7,7 +7,7 @@ dashedName: step-12 # --description-- -Although the effect might seem equal to `random.choice()`, `secrets` ensure you the most secure source of randomness that your operating system can provide. +Although the effect might seem equal to `random.choice()`, `secrets` ensures you the most secure source of randomness that your operating system can provide. Now, delete your two `print()` calls. diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md index 6b9cb3ca6c..311e1abe42 100644 --- a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md @@ -31,7 +31,7 @@ This adjective in the expression means allowing access, passage, or a view throu ### --feedback-- -This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. it is in plural form. +This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. It is in plural form. # --scene-- diff --git a/curriculum/challenges/japanese/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md b/curriculum/challenges/japanese/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md index 6ad2a41b95..41d7efde1d 100644 --- a/curriculum/challenges/japanese/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md +++ b/curriculum/challenges/japanese/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md @@ -20,7 +20,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab 1. Your `#house` should have a background color and a border set. 1. You should have a `#chimney`, `#roof`, `#window-1`, `#window-2`, and `#door` `div`s within the `#house`. 1. All of the immediate children of the `#house` should have a `position` of `absolute`. -1. `#roof`, `#chimney`, `window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set. +1. `#roof`, `#chimney`, `#window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set. 1. Your `#roof` should have a top value of `0`. 1. Your `#door` should be placed at the bottom of your house. 1. Your windows should be placed below your `#roof` and at least higher than one third of your `#door`'s height. diff --git a/curriculum/challenges/japanese/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md b/curriculum/challenges/japanese/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md index 7a2d52cbe2..e61fb86573 100644 --- a/curriculum/challenges/japanese/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md +++ b/curriculum/challenges/japanese/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md @@ -22,25 +22,27 @@ Fulfill the user stories below and get all the tests to pass to complete the lab 4. Inside the `.orbit` `div`, there should be another `div` with the class `moon`. -5. The `space` `div` should be centered on the page and have a width and height of `200px`. +5. The `div` element with a `class` of `space` should be centered on the page and have a width and height of `200px`. -6. The `earth` `div` should use `absolute` positioning. Position the center of the `earth` `div` at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the `earth` `div` back by half its own width and height, to center it within its parent, `.space`. +6. The `div` element with a `class` of `space` should use `relative` positioning. -7. The `earth` `div` should have a width and height of `100px`. +7. The `.earth` element should use `absolute` positioning. Position the center of the `.earth` element at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the `.earth` element back by half its own width and height, to center it within its parent, the `.space` element. -8. The `orbit` `div` should have a width and height of `200px`. +8. The `.earth` element should have a width and height of `100px`. -9. The `orbit` `div` should be positioned using `absolute` positioning. Its bottom right corner should be at the center of the `space` `div` using a `transform` property that shifts it by `-50%` on both the vertical and horizontal axes. +9. The `.orbit` element should have a width and height of `200px`. -10. The orbit path for the moon around the Earth should be a circle. +10. The `.orbit` element should be positioned using `absolute` positioning. Its bottom right corner should be at the center of the `space` `div` using a `transform` property that shifts it by `-50%` on both the vertical and horizontal axes. -11. The moon `div` should be positioned using `absolute` positioning and have a width and height of `30px`. The moon `div` should position itself at the top of the `orbit` `div` and be centered horizontally. +11. The orbit path for the moon around the Earth should be a circle. -12. You should further adjust the horizontal positioning of the `moon` by moving the element to the left by half of its width. +12. The `.moon` element should be positioned using `absolute` positioning and have a width and height of `30px`. The `.moon` element should position itself at the top of the `orbit` `div` and be centered horizontally. -13. Your `.earth` and `.moon` `div` elements should have a background color and a `border-radius` of `50%` to make them look like planets. +13. You should further adjust the horizontal positioning of the `.moon` element by moving the element to the left by half of its width. -14. You should define a `@keyframes orbit` animation that rotates the `.orbit` element 360 degrees around its center. You should apply this animation to the `.orbit` element with a duration of `5` seconds, a linear timing function, and infinite iterations. +14. Your `.earth` and `.moon` elements should have a background color and a `border-radius` of `50%` to make them look like planets. + +15. You should define a `@keyframes orbit` animation that rotates the `.orbit` element 360 degrees around its center. You should apply this animation to the `.orbit` element with a duration of `5` seconds, a linear timing function, and infinite iterations. **Note:** Be sure to link your stylesheet in your HTML and apply your CSS. @@ -69,7 +71,13 @@ assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.width, '2 assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.height, '200px'); ``` -You should have a `div` with the class `earth` inside the `.space` `div`. +The `.space` element should have a `position` property of `relative`. + +```js +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.position, 'relative') +``` + +You should have a `div` with a class of `earth` inside the `div` with a `class` of `space`. ```js assert.exists(document.querySelector('div.space div.earth')); diff --git a/curriculum/challenges/japanese/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md b/curriculum/challenges/japanese/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md index d4d8054993..e14472e42e 100644 --- a/curriculum/challenges/japanese/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md +++ b/curriculum/challenges/japanese/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md @@ -29,7 +29,7 @@ They are properties that adjust an element's size or layout on the page. --- -They are selector used to add movement effects to an element during interactions. +They are selectors used to add movement effects to an element during interactions. #### --answer-- diff --git a/curriculum/challenges/japanese/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md b/curriculum/challenges/japanese/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md index a654a07963..dcf19148da 100644 --- a/curriculum/challenges/japanese/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md +++ b/curriculum/challenges/japanese/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md @@ -9,7 +9,103 @@ dashedName: review-css-libraries-and-frameworks Review the concepts below to prepare for the upcoming quiz. +## CSS Frameworks +- **CSS frameworks**: CSS frameworks can speed up your workflow, create a uniform visual style across a website, make your design look consistent across multiple browsers, and keep your CSS code more organized. +- **Popular CSS frameworks**: Some of the popular CSS frameworks are Tailwind CSS, Bootstrap, Materialize, and Foundation. +- **Potential disadvantages**: + - The CSS provided by the framework might conflict with your custom CSS. + - Your website might look similar to other websites using the same framework. + - Large frameworks might cause performance issues. + +## Two Types of CSS Frameworks + +- **Utility-first CSS frameworks**: These frameworks have small classes with specific purposes, like setting the margin, padding, or background color. You can assign these small classes directly to the HTML elements as needed. Tailwind CSS is categorized as a utility-first CSS framework. + +Here is an example of using Tailwind CSS to style a button. + +```html + +``` + +- **Component-based CSS frameworks**: These frameworks have pre-built components with pre-defined styles that you can add to your website. The components are available in the official documentation of the CSS framework, and you can copy and paste them into your project. Bootstrap is categorized as a component-based CSS framework. + +Here is an example of using Bootstrap to create a list group. Instead of applying small classes to your HTML elements, you will add the entire component, including the HTML structure. + +```html +
+ +
+``` + +## CSS Preprocessors + +- **CSS preprocessor**: A CSS preprocessor is a tool that extends standard CSS. It compiles the code with extended syntax into a native CSS file. It can be helpful for writing cleaner, reusable, less repetitive, and scalable CSS for complex projects. +- **Features**: Some of the features that can be provided by CSS preprocessors are variables, mixins, nesting, and selector inheritance. +- **Popular CSS preprocessors**: Some of the popular CSS preprocessors are Sass, Less, and Stylus. +- **Potential disadvantages**: + - Compiling the CSS rules into standard CSS might cause overhead. + - The compiled code may be difficult to debug. + +## Sass + +- **Sass**: It is one of the most popular CSS preprocessors. Sass stands for "Syntactically Awesome Style Sheets." +- **Features supported by Sass**: Sass supports features like variables, nested CSS rules, modules, mixins, inheritance, and operators for basic mathematical operations + +## Two Syntaxes Supported by Sass + +- **SCSS syntax**: The SCSS (Sassy CSS) expands the basic syntax of CSS. It is the most widely used syntax for Sass. SCSS files have an `.scss` extension. + +Here is an example of defining and using a variable in SCSS. + +```scss +$primary-color: #3498eb; + +header { + background-color: $primary-color; +} +``` + +- **Indented syntax**: The indented syntax was Sass's original syntax and is also known as the "Sass syntax." + +Here is an example of defining and using a variable in the indented syntax. + +```sass +$primary-color: #3498eb + +header + background-color: $primary-color +``` + +### Mixins + +- **Mixins**: Mixins allow you to group multiple CSS properties and their values under the name and reuse that block of CSS code throughout your stylesheet. + +Here is an example of defining a mixin in SCSS syntax. In this case, the mixin is called `center-flex`. It has three CSS properties to center elements using flexbox. + +```scss +@mixin center-flex { + display: flex; + justify-content: center; + align-items: center; +} +``` + +Here is an example of using the mixin you defined. + +```scss +section { + @include center-flex; + height: 500px; + background-color: #3289a8; +} +``` # --assignment-- diff --git a/curriculum/challenges/korean/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md b/curriculum/challenges/korean/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md index 8a4e1b9cd6..1b3493bbd2 100644 --- a/curriculum/challenges/korean/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md +++ b/curriculum/challenges/korean/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md @@ -1,6 +1,6 @@ --- id: aaa48de84e1ecc7c742e1124 -title: Palindrome Checker +title: 회문 검사기 challengeType: 5 forumTopicId: 16004 dashedName: palindrome-checker @@ -8,85 +8,85 @@ dashedName: palindrome-checker # --description-- -Return `true` if the given string is a palindrome. Otherwise, return `false`. +주어진 문자열이 회문이면 `true`를 반환하십시오. 그렇지 않으면 `false`를 반환합니다. -A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing. +회문은 구두점, 대소문자 및 공간을 무시하고, 앞뒤로 동일한 방법으로 철자되는 단어나 문장입니다. -**Note:** You'll need to remove **all non-alphanumeric characters** (punctuation, spaces and symbols) and turn everything into the same case (lower or upper case) in order to check for palindromes. +**참고:** 회문을 확인하기 위해 **모든 영숫자가 아닌 문자**(구두점, 공백 및 기호)를 제거하고 모든 것을 동일한 대소문자로 변경해야 합니다(소문자 또는 대문자). -We'll pass strings with varying formats, such as `racecar`, `RaceCar`, and `race CAR` among others. +`racecar`, `RaceCar`, `race CAR` 등 다양한 형식의 문자열을 전달할 것입니다. -We'll also pass strings with special symbols, such as `2A3*3a2`, `2A3 3a2`, and `2_A3*3#A2`. +`2A3*3a2`, `2A3 3a2`, `2_A3*3#A2`와 같은 특수 기호가 있는 문자열도 전달할 것입니다. # --hints-- -`palindrome("eye")` should return a boolean. +`palindrome("eye")`는 boolean을 반환해야 합니다. ```js assert(typeof palindrome('eye') === 'boolean'); ``` -`palindrome("eye")` should return `true`. +`palindrome("eye")`는 `true`를 반환해야 합니다. ```js assert(palindrome('eye') === true); ``` -`palindrome("_eye")` should return `true`. +`palindrome("_eye")`는 `true`를 반환해야 합니다. ```js assert(palindrome('_eye') === true); ``` -`palindrome("race car")` should return `true`. +`palindrome("race car")`는 `true`를 반환해야 합니다. ```js assert(palindrome('race car') === true); ``` -`palindrome("not a palindrome")` should return `false`. +`palindrome("not a palindrome")`는 `false`를 반환해야 합니다. ```js assert(palindrome('not a palindrome') === false); ``` -`palindrome("A man, a plan, a canal. Panama")` should return `true`. +`palindrome("A man, a plan, a canal. Panama")`는 `true`를 반환해야 합니다. ```js assert(palindrome('A man, a plan, a canal. Panama') === true); ``` -`palindrome("never odd or even")` should return `true`. +`palindrome("never odd or even")`는 `true`를 반환해야 합니다. ```js assert(palindrome('never odd or even') === true); ``` -`palindrome("nope")` should return `false`. +`palindrome("nope")`는 `false`를 반환해야 합니다. ```js assert(palindrome('nope') === false); ``` -`palindrome("almostomla")` should return `false`. +`palindrome("almostomla")`는 `false`를 반환해야 합니다. ```js assert(palindrome('almostomla') === false); ``` -`palindrome("My age is 0, 0 si ega ym.")` should return `true`. +`palindrome("My age is 0, 0 si ega ym.")`는 `true`를 반환해야 합니다. ```js assert(palindrome('My age is 0, 0 si ega ym.') === true); ``` -`palindrome("1 eye for of 1 eye.")` should return `false`. +`palindrome("1 eye for of 1 eye.")`는 `false`를 반환해야 합니다. ```js assert(palindrome('1 eye for of 1 eye.') === false); ``` -`palindrome("0_0 (: /-\ :) 0-0")` should return `true`. +`palindrome("0_0 (: /-\ :) 0-0")`는 `true`를 반환해야 합니다. ```js assert(palindrome('0_0 (: /- :) 0-0') === true); diff --git a/curriculum/challenges/korean/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md b/curriculum/challenges/korean/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md index a771018e18..c9443afe59 100644 --- a/curriculum/challenges/korean/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md +++ b/curriculum/challenges/korean/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md @@ -1,6 +1,6 @@ --- id: a7f4d8f2483413a6ce226cac -title: Roman Numeral Converter +title: 로마 숫자 변환기 challengeType: 5 forumTopicId: 16044 dashedName: roman-numeral-converter @@ -8,179 +8,179 @@ dashedName: roman-numeral-converter # --description-- -Convert the given number into a roman numeral. - -| Roman numerals | Arabic numerals | -| -------------- | --------------- | -| M | 1000 | -| CM | 900 | -| D | 500 | -| CD | 400 | -| C | 100 | -| XC | 90 | -| L | 50 | -| XL | 40 | -| X | 10 | -| IX | 9 | -| V | 5 | -| IV | 4 | -| I | 1 | - -All roman numerals answers should be provided in upper-case. +주어진 숫자를 로마 숫자로 변환하십시오. + +| 로마 숫자 | 아라비아 숫자 | +| ----- | ------- | +| M | 1000 | +| CM | 900 | +| D | 500 | +| CD | 400 | +| C | 100 | +| XC | 90 | +| L | 50 | +| XL | 40 | +| X | 10 | +| IX | 9 | +| V | 5 | +| IV | 4 | +| I | 1 | + +모든 로마 숫자 답변은 대문자로 제공되어야 합니다. # --hints-- -`convertToRoman(2)` should return the string `II`. +`convertToRoman(2)`는 `II`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(2), 'II'); ``` -`convertToRoman(3)` should return the string `III`. +`convertToRoman(3)`는 `III`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(3), 'III'); ``` -`convertToRoman(4)` should return the string `IV`. +`convertToRoman(4)`는 `IV`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(4), 'IV'); ``` -`convertToRoman(5)` should return the string `V`. +`convertToRoman(5)`는 `V`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(5), 'V'); ``` -`convertToRoman(9)` should return the string `IX`. +`convertToRoman(9)`는 `IX`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(9), 'IX'); ``` -`convertToRoman(12)` should return the string `XII`. +`convertToRoman(12)`는 `XII`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(12), 'XII'); ``` -`convertToRoman(16)` should return the string `XVI`. +`convertToRoman(16)`는 `XVI`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(16), 'XVI'); ``` -`convertToRoman(29)` should return the string `XXIX`. +`convertToRoman(29)`는 `XXIX`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(29), 'XXIX'); ``` -`convertToRoman(44)` should return the string `XLIV`. +`convertToRoman(44)`는 `XLIV`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(44), 'XLIV'); ``` -`convertToRoman(45)` should return the string `XLV`. +`convertToRoman(45)`는 `XLV`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(45), 'XLV'); ``` -`convertToRoman(68)` should return the string `LXVIII` +`convertToRoman(68)`는 `LXVIII`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(68), 'LXVIII'); ``` -`convertToRoman(83)` should return the string `LXXXIII` +`convertToRoman(83)`는 `LXXXIII`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(83), 'LXXXIII'); ``` -`convertToRoman(97)` should return the string `XCVII` +`convertToRoman(97)`는 `XCVII`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(97), 'XCVII'); ``` -`convertToRoman(99)` should return the string `XCIX` +`convertToRoman(99)`는 `XCIX`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(99), 'XCIX'); ``` -`convertToRoman(400)` should return the string `CD` +`convertToRoman(400)`는 `CD`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(400), 'CD'); ``` -`convertToRoman(500)` should return the string `D` +`convertToRoman(500)`는 `D`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(500), 'D'); ``` -`convertToRoman(501)` should return the string `DI` +`convertToRoman(501)`는 `DI`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(501), 'DI'); ``` -`convertToRoman(649)` should return the string `DCXLIX` +`convertToRoman(649)`는 `DCXLIX`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(649), 'DCXLIX'); ``` -`convertToRoman(798)` should return the string `DCCXCVIII` +`convertToRoman(798)`는 `DCCXCVIII`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(798), 'DCCXCVIII'); ``` -`convertToRoman(891)` should return the string `DCCCXCI` +`convertToRoman(891)`는 `DCCCXCI`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(891), 'DCCCXCI'); ``` -`convertToRoman(1000)` should return the string `M` +`convertToRoman(1000)`는 `M`을 반환해야 합니다. ```js assert.deepEqual(convertToRoman(1000), 'M'); ``` -`convertToRoman(1004)` should return the string `MIV` +`convertToRoman(1004)`는 `MIV`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(1004), 'MIV'); ``` -`convertToRoman(1006)` should return the string `MVI` +`convertToRoman(1006)`를 `MVI`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(1006), 'MVI'); ``` -`convertToRoman(1023)` should return the string `MXXIII` +`convertToRoman(1023)`는 `MXXIII`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(1023), 'MXXIII'); ``` -`convertToRoman(2014)` should return the string `MMXIV` +`convertToRoman(2014)`는 `MMXIV`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(2014), 'MMXIV'); ``` -`convertToRoman(3999)` should return the string `MMMCMXCIX` +`convertToRoman(3999)`는 `MMMCMXCIX`를 반환해야 합니다. ```js assert.deepEqual(convertToRoman(3999), 'MMMCMXCIX'); diff --git a/curriculum/challenges/korean/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md b/curriculum/challenges/korean/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md index 3ab8fa361d..15189a99bd 100644 --- a/curriculum/challenges/korean/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md +++ b/curriculum/challenges/korean/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md @@ -7,7 +7,7 @@ dashedName: step-12 # --description-- -Although the effect might seem equal to `random.choice()`, `secrets` ensure you the most secure source of randomness that your operating system can provide. +Although the effect might seem equal to `random.choice()`, `secrets` ensures you the most secure source of randomness that your operating system can provide. Now, delete your two `print()` calls. diff --git a/curriculum/challenges/korean/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md b/curriculum/challenges/korean/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md index 6b9cb3ca6c..311e1abe42 100644 --- a/curriculum/challenges/korean/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md +++ b/curriculum/challenges/korean/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md @@ -31,7 +31,7 @@ This adjective in the expression means allowing access, passage, or a view throu ### --feedback-- -This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. it is in plural form. +This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. It is in plural form. # --scene-- diff --git a/curriculum/challenges/korean/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md b/curriculum/challenges/korean/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md index 7e467753d8..b60b49832b 100644 --- a/curriculum/challenges/korean/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md +++ b/curriculum/challenges/korean/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md @@ -20,7 +20,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab 1. Your `#house` should have a background color and a border set. 1. You should have a `#chimney`, `#roof`, `#window-1`, `#window-2`, and `#door` `div`s within the `#house`. 1. All of the immediate children of the `#house` should have a `position` of `absolute`. -1. `#roof`, `#chimney`, `window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set. +1. `#roof`, `#chimney`, `#window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set. 1. Your `#roof` should have a top value of `0`. 1. Your `#door` should be placed at the bottom of your house. 1. Your windows should be placed below your `#roof` and at least higher than one third of your `#door`'s height. diff --git a/curriculum/challenges/korean/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md b/curriculum/challenges/korean/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md index 7a2d52cbe2..e61fb86573 100644 --- a/curriculum/challenges/korean/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md +++ b/curriculum/challenges/korean/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md @@ -22,25 +22,27 @@ Fulfill the user stories below and get all the tests to pass to complete the lab 4. Inside the `.orbit` `div`, there should be another `div` with the class `moon`. -5. The `space` `div` should be centered on the page and have a width and height of `200px`. +5. The `div` element with a `class` of `space` should be centered on the page and have a width and height of `200px`. -6. The `earth` `div` should use `absolute` positioning. Position the center of the `earth` `div` at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the `earth` `div` back by half its own width and height, to center it within its parent, `.space`. +6. The `div` element with a `class` of `space` should use `relative` positioning. -7. The `earth` `div` should have a width and height of `100px`. +7. The `.earth` element should use `absolute` positioning. Position the center of the `.earth` element at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the `.earth` element back by half its own width and height, to center it within its parent, the `.space` element. -8. The `orbit` `div` should have a width and height of `200px`. +8. The `.earth` element should have a width and height of `100px`. -9. The `orbit` `div` should be positioned using `absolute` positioning. Its bottom right corner should be at the center of the `space` `div` using a `transform` property that shifts it by `-50%` on both the vertical and horizontal axes. +9. The `.orbit` element should have a width and height of `200px`. -10. The orbit path for the moon around the Earth should be a circle. +10. The `.orbit` element should be positioned using `absolute` positioning. Its bottom right corner should be at the center of the `space` `div` using a `transform` property that shifts it by `-50%` on both the vertical and horizontal axes. -11. The moon `div` should be positioned using `absolute` positioning and have a width and height of `30px`. The moon `div` should position itself at the top of the `orbit` `div` and be centered horizontally. +11. The orbit path for the moon around the Earth should be a circle. -12. You should further adjust the horizontal positioning of the `moon` by moving the element to the left by half of its width. +12. The `.moon` element should be positioned using `absolute` positioning and have a width and height of `30px`. The `.moon` element should position itself at the top of the `orbit` `div` and be centered horizontally. -13. Your `.earth` and `.moon` `div` elements should have a background color and a `border-radius` of `50%` to make them look like planets. +13. You should further adjust the horizontal positioning of the `.moon` element by moving the element to the left by half of its width. -14. You should define a `@keyframes orbit` animation that rotates the `.orbit` element 360 degrees around its center. You should apply this animation to the `.orbit` element with a duration of `5` seconds, a linear timing function, and infinite iterations. +14. Your `.earth` and `.moon` elements should have a background color and a `border-radius` of `50%` to make them look like planets. + +15. You should define a `@keyframes orbit` animation that rotates the `.orbit` element 360 degrees around its center. You should apply this animation to the `.orbit` element with a duration of `5` seconds, a linear timing function, and infinite iterations. **Note:** Be sure to link your stylesheet in your HTML and apply your CSS. @@ -69,7 +71,13 @@ assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.width, '2 assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.height, '200px'); ``` -You should have a `div` with the class `earth` inside the `.space` `div`. +The `.space` element should have a `position` property of `relative`. + +```js +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.position, 'relative') +``` + +You should have a `div` with a class of `earth` inside the `div` with a `class` of `space`. ```js assert.exists(document.querySelector('div.space div.earth')); diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md b/curriculum/challenges/korean/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md index d4d8054993..e14472e42e 100644 --- a/curriculum/challenges/korean/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md +++ b/curriculum/challenges/korean/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md @@ -29,7 +29,7 @@ They are properties that adjust an element's size or layout on the page. --- -They are selector used to add movement effects to an element during interactions. +They are selectors used to add movement effects to an element during interactions. #### --answer-- diff --git a/curriculum/challenges/korean/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md b/curriculum/challenges/korean/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md index a654a07963..dcf19148da 100644 --- a/curriculum/challenges/korean/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md +++ b/curriculum/challenges/korean/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md @@ -9,7 +9,103 @@ dashedName: review-css-libraries-and-frameworks Review the concepts below to prepare for the upcoming quiz. +## CSS Frameworks +- **CSS frameworks**: CSS frameworks can speed up your workflow, create a uniform visual style across a website, make your design look consistent across multiple browsers, and keep your CSS code more organized. +- **Popular CSS frameworks**: Some of the popular CSS frameworks are Tailwind CSS, Bootstrap, Materialize, and Foundation. +- **Potential disadvantages**: + - The CSS provided by the framework might conflict with your custom CSS. + - Your website might look similar to other websites using the same framework. + - Large frameworks might cause performance issues. + +## Two Types of CSS Frameworks + +- **Utility-first CSS frameworks**: These frameworks have small classes with specific purposes, like setting the margin, padding, or background color. You can assign these small classes directly to the HTML elements as needed. Tailwind CSS is categorized as a utility-first CSS framework. + +Here is an example of using Tailwind CSS to style a button. + +```html + +``` + +- **Component-based CSS frameworks**: These frameworks have pre-built components with pre-defined styles that you can add to your website. The components are available in the official documentation of the CSS framework, and you can copy and paste them into your project. Bootstrap is categorized as a component-based CSS framework. + +Here is an example of using Bootstrap to create a list group. Instead of applying small classes to your HTML elements, you will add the entire component, including the HTML structure. + +```html +
+ +
+``` + +## CSS Preprocessors + +- **CSS preprocessor**: A CSS preprocessor is a tool that extends standard CSS. It compiles the code with extended syntax into a native CSS file. It can be helpful for writing cleaner, reusable, less repetitive, and scalable CSS for complex projects. +- **Features**: Some of the features that can be provided by CSS preprocessors are variables, mixins, nesting, and selector inheritance. +- **Popular CSS preprocessors**: Some of the popular CSS preprocessors are Sass, Less, and Stylus. +- **Potential disadvantages**: + - Compiling the CSS rules into standard CSS might cause overhead. + - The compiled code may be difficult to debug. + +## Sass + +- **Sass**: It is one of the most popular CSS preprocessors. Sass stands for "Syntactically Awesome Style Sheets." +- **Features supported by Sass**: Sass supports features like variables, nested CSS rules, modules, mixins, inheritance, and operators for basic mathematical operations + +## Two Syntaxes Supported by Sass + +- **SCSS syntax**: The SCSS (Sassy CSS) expands the basic syntax of CSS. It is the most widely used syntax for Sass. SCSS files have an `.scss` extension. + +Here is an example of defining and using a variable in SCSS. + +```scss +$primary-color: #3498eb; + +header { + background-color: $primary-color; +} +``` + +- **Indented syntax**: The indented syntax was Sass's original syntax and is also known as the "Sass syntax." + +Here is an example of defining and using a variable in the indented syntax. + +```sass +$primary-color: #3498eb + +header + background-color: $primary-color +``` + +### Mixins + +- **Mixins**: Mixins allow you to group multiple CSS properties and their values under the name and reuse that block of CSS code throughout your stylesheet. + +Here is an example of defining a mixin in SCSS syntax. In this case, the mixin is called `center-flex`. It has three CSS properties to center elements using flexbox. + +```scss +@mixin center-flex { + display: flex; + justify-content: center; + align-items: center; +} +``` + +Here is an example of using the mixin you defined. + +```scss +section { + @include center-flex; + height: 500px; + background-color: #3289a8; +} +``` # --assignment-- diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md index 2016aaf14a..863ce808ad 100644 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md +++ b/curriculum/challenges/portuguese/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md @@ -7,7 +7,7 @@ dashedName: step-12 # --description-- -Although the effect might seem equal to `random.choice()`, `secrets` ensure you the most secure source of randomness that your operating system can provide. +Although the effect might seem equal to `random.choice()`, `secrets` ensures you the most secure source of randomness that your operating system can provide. Now, delete your two `print()` calls. diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md index e839e1c11a..a202ae8b8b 100644 --- a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md @@ -31,7 +31,7 @@ This adjective in the expression means allowing access, passage, or a view throu ### --feedback-- -This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. it is in plural form. +This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. It is in plural form. # --scene-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md b/curriculum/challenges/portuguese/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md index 0d10705174..66c31745b5 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md +++ b/curriculum/challenges/portuguese/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md @@ -20,7 +20,7 @@ Atenda às histórias de usuário abaixo e faça todos os testes passarem para c 1. Your `#house` should have a background color and a border set. 1. You should have a `#chimney`, `#roof`, `#window-1`, `#window-2`, and `#door` `div`s within the `#house`. 1. All of the immediate children of the `#house` should have a `position` of `absolute`. -1. `#roof`, `#chimney`, `window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set. +1. `#roof`, `#chimney`, `#window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set. 1. Your `#roof` should have a top value of `0`. 1. Your `#door` should be placed at the bottom of your house. 1. Your windows should be placed below your `#roof` and at least higher than one third of your `#door`'s height. diff --git a/curriculum/challenges/portuguese/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md b/curriculum/challenges/portuguese/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md index a7a6ecc973..04d2a02f9c 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md +++ b/curriculum/challenges/portuguese/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md @@ -22,25 +22,27 @@ Atenda às histórias de usuário abaixo e faça todos os testes passarem para c 4. Dentro da `div` `.orbit`, deve haver outra `div` com a classe `moon`. -5. A `div` `space` deve estar centralizada na página e ter uma largura e altura de `200px`. +5. The `div` element with a `class` of `space` should be centered on the page and have a width and height of `200px`. -6. A `div` `earth` deve usar o posicionamento `absolute`. Posicione o centro da `div` `earth` no ponto médio do elemento pai, tanto no eixo vertical (topo) como no horizontal (esquerda). Após isso, desloque a `div` `earth` de volta usando a metade de sua própria largura e altura, para centralizá-lo dentro do elemento pai, `.space`. +6. The `div` element with a `class` of `space` should use `relative` positioning. -7. A `div` `earth` deve ter uma largura e altura de `100px`. +7. The `.earth` element should use `absolute` positioning. Position the center of the `.earth` element at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the `.earth` element back by half its own width and height, to center it within its parent, the `.space` element. -8. A `div` `orbit` deve ter uma largura e altura de `200px`. +8. The `.earth` element should have a width and height of `100px`. -9. A `div` `orbit` deve ser posicionada usando posicionamento `absolute`. O canto inferior direito deve estar no centro da `div` `space` usando uma propriedade `transform`, que a desloque em `-50%` nos eixos vertical e horizontal. +9. The `.orbit` element should have a width and height of `200px`. -10. O caminho da órbita para a lua ao redor da Terra deve ser um círculo. +10. The `.orbit` element should be positioned using `absolute` positioning. O canto inferior direito deve estar no centro da `div` `space` usando uma propriedade `transform`, que a desloque em `-50%` nos eixos vertical e horizontal. -11. A `div` da lua deve ser posicionada usando posicionamento `absolute` e ter uma largura e altura de `30px`. A `div` da lua deve se posicionar no topo da `div` `orbit` e ser centralizada horizontalmente. +11. O caminho da órbita para a lua ao redor da Terra deve ser um círculo. -12. Você deve ajustar ainda mais o posicionamento horizontal de `moon` movendo o elemento para a esquerda usando metade de sua largura. +12. The `.moon` element should be positioned using `absolute` positioning and have a width and height of `30px`. The `.moon` element should position itself at the top of the `orbit` `div` and be centered horizontally. -13. Os elementos `div` `.earth` e `.moon` devem ter uma cor de fundo e um `border-radius` de `50%` para se parecerem com planetas. +13. You should further adjust the horizontal positioning of the `.moon` element by moving the element to the left by half of its width. -14. Você deve definir uma animação `@keyframes orbit` que rotacione o elemento `.orbit` 360 graus em torno de seu centro. Você deve aplicar esta animação ao elemento `.orbit` com uma duração de `5` segundos, uma função de tempo linear e iterações infinitas. +14. Your `.earth` and `.moon` elements should have a background color and a `border-radius` of `50%` to make them look like planets. + +15. Você deve definir uma animação `@keyframes orbit` que rotacione o elemento `.orbit` 360 graus em torno de seu centro. Você deve aplicar esta animação ao elemento `.orbit` com uma duração de `5` segundos, uma função de tempo linear e iterações infinitas. **Observação:** certifique-se de vincular sua folha de estilo ao HTML e de aplicar o CSS. @@ -69,7 +71,13 @@ assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.width, '2 assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.height, '200px'); ``` -Você deve ter uma `div` com a classe `earth` dentro da `div` `.space`. +The `.space` element should have a `position` property of `relative`. + +```js +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.position, 'relative') +``` + +You should have a `div` with a class of `earth` inside the `div` with a `class` of `space`. ```js assert.exists(document.querySelector('div.space div.earth')); @@ -88,7 +96,7 @@ assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.earth')?.width, '1 assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.earth')?.height, '100px'); ``` -A `div` `earth` deve usar posicionamento `absolute`. +A `div` `earth` deve usar o posicionamento `absolute`. ```js diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md index 4aa6d56b19..0998fd73f0 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md +++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md @@ -29,7 +29,7 @@ They are properties that adjust an element's size or layout on the page. --- -They are selector used to add movement effects to an element during interactions. +They are selectors used to add movement effects to an element during interactions. #### --answer-- diff --git a/curriculum/challenges/portuguese/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md b/curriculum/challenges/portuguese/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md index a654a07963..dcf19148da 100644 --- a/curriculum/challenges/portuguese/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md +++ b/curriculum/challenges/portuguese/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md @@ -9,7 +9,103 @@ dashedName: review-css-libraries-and-frameworks Review the concepts below to prepare for the upcoming quiz. +## CSS Frameworks +- **CSS frameworks**: CSS frameworks can speed up your workflow, create a uniform visual style across a website, make your design look consistent across multiple browsers, and keep your CSS code more organized. +- **Popular CSS frameworks**: Some of the popular CSS frameworks are Tailwind CSS, Bootstrap, Materialize, and Foundation. +- **Potential disadvantages**: + - The CSS provided by the framework might conflict with your custom CSS. + - Your website might look similar to other websites using the same framework. + - Large frameworks might cause performance issues. + +## Two Types of CSS Frameworks + +- **Utility-first CSS frameworks**: These frameworks have small classes with specific purposes, like setting the margin, padding, or background color. You can assign these small classes directly to the HTML elements as needed. Tailwind CSS is categorized as a utility-first CSS framework. + +Here is an example of using Tailwind CSS to style a button. + +```html + +``` + +- **Component-based CSS frameworks**: These frameworks have pre-built components with pre-defined styles that you can add to your website. The components are available in the official documentation of the CSS framework, and you can copy and paste them into your project. Bootstrap is categorized as a component-based CSS framework. + +Here is an example of using Bootstrap to create a list group. Instead of applying small classes to your HTML elements, you will add the entire component, including the HTML structure. + +```html +
+ +
+``` + +## CSS Preprocessors + +- **CSS preprocessor**: A CSS preprocessor is a tool that extends standard CSS. It compiles the code with extended syntax into a native CSS file. It can be helpful for writing cleaner, reusable, less repetitive, and scalable CSS for complex projects. +- **Features**: Some of the features that can be provided by CSS preprocessors are variables, mixins, nesting, and selector inheritance. +- **Popular CSS preprocessors**: Some of the popular CSS preprocessors are Sass, Less, and Stylus. +- **Potential disadvantages**: + - Compiling the CSS rules into standard CSS might cause overhead. + - The compiled code may be difficult to debug. + +## Sass + +- **Sass**: It is one of the most popular CSS preprocessors. Sass stands for "Syntactically Awesome Style Sheets." +- **Features supported by Sass**: Sass supports features like variables, nested CSS rules, modules, mixins, inheritance, and operators for basic mathematical operations + +## Two Syntaxes Supported by Sass + +- **SCSS syntax**: The SCSS (Sassy CSS) expands the basic syntax of CSS. It is the most widely used syntax for Sass. SCSS files have an `.scss` extension. + +Here is an example of defining and using a variable in SCSS. + +```scss +$primary-color: #3498eb; + +header { + background-color: $primary-color; +} +``` + +- **Indented syntax**: The indented syntax was Sass's original syntax and is also known as the "Sass syntax." + +Here is an example of defining and using a variable in the indented syntax. + +```sass +$primary-color: #3498eb + +header + background-color: $primary-color +``` + +### Mixins + +- **Mixins**: Mixins allow you to group multiple CSS properties and their values under the name and reuse that block of CSS code throughout your stylesheet. + +Here is an example of defining a mixin in SCSS syntax. In this case, the mixin is called `center-flex`. It has three CSS properties to center elements using flexbox. + +```scss +@mixin center-flex { + display: flex; + justify-content: center; + align-items: center; +} +``` + +Here is an example of using the mixin you defined. + +```scss +section { + @include center-flex; + height: 500px; + background-color: #3289a8; +} +``` # --assignment-- diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md index cd38496858..2b314bcd19 100644 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md +++ b/curriculum/challenges/swahili/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md @@ -7,7 +7,7 @@ dashedName: step-12 # --description-- -Although the effect might seem equal to `random.choice()`, `secrets` ensure you the most secure source of randomness that your operating system can provide. +Although the effect might seem equal to `random.choice()`, `secrets` ensures you the most secure source of randomness that your operating system can provide. Now, delete your two `print()` calls. diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md index 6b9cb3ca6c..311e1abe42 100644 --- a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md @@ -31,7 +31,7 @@ This adjective in the expression means allowing access, passage, or a view throu ### --feedback-- -This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. it is in plural form. +This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. It is in plural form. # --scene-- diff --git a/curriculum/challenges/swahili/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md b/curriculum/challenges/swahili/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md index 7e467753d8..b60b49832b 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md +++ b/curriculum/challenges/swahili/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md @@ -20,7 +20,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab 1. Your `#house` should have a background color and a border set. 1. You should have a `#chimney`, `#roof`, `#window-1`, `#window-2`, and `#door` `div`s within the `#house`. 1. All of the immediate children of the `#house` should have a `position` of `absolute`. -1. `#roof`, `#chimney`, `window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set. +1. `#roof`, `#chimney`, `#window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set. 1. Your `#roof` should have a top value of `0`. 1. Your `#door` should be placed at the bottom of your house. 1. Your windows should be placed below your `#roof` and at least higher than one third of your `#door`'s height. diff --git a/curriculum/challenges/swahili/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md b/curriculum/challenges/swahili/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md index 7a2d52cbe2..e61fb86573 100644 --- a/curriculum/challenges/swahili/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md +++ b/curriculum/challenges/swahili/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md @@ -22,25 +22,27 @@ Fulfill the user stories below and get all the tests to pass to complete the lab 4. Inside the `.orbit` `div`, there should be another `div` with the class `moon`. -5. The `space` `div` should be centered on the page and have a width and height of `200px`. +5. The `div` element with a `class` of `space` should be centered on the page and have a width and height of `200px`. -6. The `earth` `div` should use `absolute` positioning. Position the center of the `earth` `div` at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the `earth` `div` back by half its own width and height, to center it within its parent, `.space`. +6. The `div` element with a `class` of `space` should use `relative` positioning. -7. The `earth` `div` should have a width and height of `100px`. +7. The `.earth` element should use `absolute` positioning. Position the center of the `.earth` element at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the `.earth` element back by half its own width and height, to center it within its parent, the `.space` element. -8. The `orbit` `div` should have a width and height of `200px`. +8. The `.earth` element should have a width and height of `100px`. -9. The `orbit` `div` should be positioned using `absolute` positioning. Its bottom right corner should be at the center of the `space` `div` using a `transform` property that shifts it by `-50%` on both the vertical and horizontal axes. +9. The `.orbit` element should have a width and height of `200px`. -10. The orbit path for the moon around the Earth should be a circle. +10. The `.orbit` element should be positioned using `absolute` positioning. Its bottom right corner should be at the center of the `space` `div` using a `transform` property that shifts it by `-50%` on both the vertical and horizontal axes. -11. The moon `div` should be positioned using `absolute` positioning and have a width and height of `30px`. The moon `div` should position itself at the top of the `orbit` `div` and be centered horizontally. +11. The orbit path for the moon around the Earth should be a circle. -12. You should further adjust the horizontal positioning of the `moon` by moving the element to the left by half of its width. +12. The `.moon` element should be positioned using `absolute` positioning and have a width and height of `30px`. The `.moon` element should position itself at the top of the `orbit` `div` and be centered horizontally. -13. Your `.earth` and `.moon` `div` elements should have a background color and a `border-radius` of `50%` to make them look like planets. +13. You should further adjust the horizontal positioning of the `.moon` element by moving the element to the left by half of its width. -14. You should define a `@keyframes orbit` animation that rotates the `.orbit` element 360 degrees around its center. You should apply this animation to the `.orbit` element with a duration of `5` seconds, a linear timing function, and infinite iterations. +14. Your `.earth` and `.moon` elements should have a background color and a `border-radius` of `50%` to make them look like planets. + +15. You should define a `@keyframes orbit` animation that rotates the `.orbit` element 360 degrees around its center. You should apply this animation to the `.orbit` element with a duration of `5` seconds, a linear timing function, and infinite iterations. **Note:** Be sure to link your stylesheet in your HTML and apply your CSS. @@ -69,7 +71,13 @@ assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.width, '2 assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.height, '200px'); ``` -You should have a `div` with the class `earth` inside the `.space` `div`. +The `.space` element should have a `position` property of `relative`. + +```js +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.position, 'relative') +``` + +You should have a `div` with a class of `earth` inside the `div` with a `class` of `space`. ```js assert.exists(document.querySelector('div.space div.earth')); diff --git a/curriculum/challenges/swahili/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md b/curriculum/challenges/swahili/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md index d4d8054993..e14472e42e 100644 --- a/curriculum/challenges/swahili/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md +++ b/curriculum/challenges/swahili/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md @@ -29,7 +29,7 @@ They are properties that adjust an element's size or layout on the page. --- -They are selector used to add movement effects to an element during interactions. +They are selectors used to add movement effects to an element during interactions. #### --answer-- diff --git a/curriculum/challenges/swahili/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md b/curriculum/challenges/swahili/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md index a654a07963..dcf19148da 100644 --- a/curriculum/challenges/swahili/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md +++ b/curriculum/challenges/swahili/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md @@ -9,7 +9,103 @@ dashedName: review-css-libraries-and-frameworks Review the concepts below to prepare for the upcoming quiz. +## CSS Frameworks +- **CSS frameworks**: CSS frameworks can speed up your workflow, create a uniform visual style across a website, make your design look consistent across multiple browsers, and keep your CSS code more organized. +- **Popular CSS frameworks**: Some of the popular CSS frameworks are Tailwind CSS, Bootstrap, Materialize, and Foundation. +- **Potential disadvantages**: + - The CSS provided by the framework might conflict with your custom CSS. + - Your website might look similar to other websites using the same framework. + - Large frameworks might cause performance issues. + +## Two Types of CSS Frameworks + +- **Utility-first CSS frameworks**: These frameworks have small classes with specific purposes, like setting the margin, padding, or background color. You can assign these small classes directly to the HTML elements as needed. Tailwind CSS is categorized as a utility-first CSS framework. + +Here is an example of using Tailwind CSS to style a button. + +```html + +``` + +- **Component-based CSS frameworks**: These frameworks have pre-built components with pre-defined styles that you can add to your website. The components are available in the official documentation of the CSS framework, and you can copy and paste them into your project. Bootstrap is categorized as a component-based CSS framework. + +Here is an example of using Bootstrap to create a list group. Instead of applying small classes to your HTML elements, you will add the entire component, including the HTML structure. + +```html +
+ +
+``` + +## CSS Preprocessors + +- **CSS preprocessor**: A CSS preprocessor is a tool that extends standard CSS. It compiles the code with extended syntax into a native CSS file. It can be helpful for writing cleaner, reusable, less repetitive, and scalable CSS for complex projects. +- **Features**: Some of the features that can be provided by CSS preprocessors are variables, mixins, nesting, and selector inheritance. +- **Popular CSS preprocessors**: Some of the popular CSS preprocessors are Sass, Less, and Stylus. +- **Potential disadvantages**: + - Compiling the CSS rules into standard CSS might cause overhead. + - The compiled code may be difficult to debug. + +## Sass + +- **Sass**: It is one of the most popular CSS preprocessors. Sass stands for "Syntactically Awesome Style Sheets." +- **Features supported by Sass**: Sass supports features like variables, nested CSS rules, modules, mixins, inheritance, and operators for basic mathematical operations + +## Two Syntaxes Supported by Sass + +- **SCSS syntax**: The SCSS (Sassy CSS) expands the basic syntax of CSS. It is the most widely used syntax for Sass. SCSS files have an `.scss` extension. + +Here is an example of defining and using a variable in SCSS. + +```scss +$primary-color: #3498eb; + +header { + background-color: $primary-color; +} +``` + +- **Indented syntax**: The indented syntax was Sass's original syntax and is also known as the "Sass syntax." + +Here is an example of defining and using a variable in the indented syntax. + +```sass +$primary-color: #3498eb + +header + background-color: $primary-color +``` + +### Mixins + +- **Mixins**: Mixins allow you to group multiple CSS properties and their values under the name and reuse that block of CSS code throughout your stylesheet. + +Here is an example of defining a mixin in SCSS syntax. In this case, the mixin is called `center-flex`. It has three CSS properties to center elements using flexbox. + +```scss +@mixin center-flex { + display: flex; + justify-content: center; + align-items: center; +} +``` + +Here is an example of using the mixin you defined. + +```scss +section { + @include center-flex; + height: 500px; + background-color: #3289a8; +} +``` # --assignment-- diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md index d6a3e75605..42ff2830c8 100644 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md +++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/learn-regular-expressions-by-building-a-password-generator/656477845006313fbfea0ad1.md @@ -7,7 +7,7 @@ dashedName: step-12 # --description-- -Хоча ефект може здатися рівним `random.choice()`, `secrets` гарантує найбезпечніше джерело випадковості, яке може надати операційна система. +Although the effect might seem equal to `random.choice()`, `secrets` ensures you the most secure source of randomness that your operating system can provide. Тепер видаліть обидва виклики `print()`. diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md index fed20c9092..26b7c2a2f6 100644 --- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65a5080cafc379ea8d382c42.md @@ -31,7 +31,7 @@ This adjective in the expression means allowing access, passage, or a view throu ### --feedback-- -This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. it is in plural form. +This noun refers to things that may happen or be the case in the future, often exciting or beneficial opportunities. It is in plural form. # --scene-- diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md b/curriculum/challenges/ukrainian/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md index 733e84b9bd..4d7ff2fb61 100644 --- a/curriculum/challenges/ukrainian/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md +++ b/curriculum/challenges/ukrainian/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md @@ -20,7 +20,7 @@ In this lab, you will use HTML to create the structure of a house. Then, you wil 1. Your `#house` should have a background color and a border set. 1. You should have a `#chimney`, `#roof`, `#window-1`, `#window-2`, and `#door` `div`s within the `#house`. 1. All of the immediate children of the `#house` should have a `position` of `absolute`. -1. `#roof`, `#chimney`, `window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set. +1. `#roof`, `#chimney`, `#window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set. 1. Your `#roof` should have a top value of `0`. 1. Your `#door` should be placed at the bottom of your house. 1. Your windows should be placed below your `#roof` and at least higher than one third of your `#door`'s height. diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md b/curriculum/challenges/ukrainian/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md index 7e96319d11..e6a97fd654 100644 --- a/curriculum/challenges/ukrainian/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md +++ b/curriculum/challenges/ukrainian/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md @@ -22,25 +22,27 @@ In this lab, you will create a simple animation of the Moon's orbit around the E 4. Inside the `.orbit` `div`, there should be another `div` with the class `moon`. -5. The `space` `div` should be centered on the page and have a width and height of `200px`. +5. The `div` element with a `class` of `space` should be centered on the page and have a width and height of `200px`. -6. The `earth` `div` should use `absolute` positioning. Position the center of the `earth` `div` at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the `earth` `div` back by half its own width and height, to center it within its parent, `.space`. +6. The `div` element with a `class` of `space` should use `relative` positioning. -7. The `earth` `div` should have a width and height of `100px`. +7. The `.earth` element should use `absolute` positioning. Position the center of the `.earth` element at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the `.earth` element back by half its own width and height, to center it within its parent, the `.space` element. -8. The `orbit` `div` should have a width and height of `200px`. +8. The `.earth` element should have a width and height of `100px`. -9. The `orbit` `div` should be positioned using `absolute` positioning. Its bottom right corner should be at the center of the `space` `div` using a `transform` property that shifts it by `-50%` on both the vertical and horizontal axes. +9. The `.orbit` element should have a width and height of `200px`. -10. The orbit path for the moon around the Earth should be a circle. +10. The `.orbit` element should be positioned using `absolute` positioning. Its bottom right corner should be at the center of the `space` `div` using a `transform` property that shifts it by `-50%` on both the vertical and horizontal axes. -11. The moon `div` should be positioned using `absolute` positioning and have a width and height of `30px`. The moon `div` should position itself at the top of the `orbit` `div` and be centered horizontally. +11. The orbit path for the moon around the Earth should be a circle. -12. You should further adjust the horizontal positioning of the `moon` by moving the element to the left by half of its width. +12. The `.moon` element should be positioned using `absolute` positioning and have a width and height of `30px`. The `.moon` element should position itself at the top of the `orbit` `div` and be centered horizontally. -13. Your `.earth` and `.moon` `div` elements should have a background color and a `border-radius` of `50%` to make them look like planets. +13. You should further adjust the horizontal positioning of the `.moon` element by moving the element to the left by half of its width. -14. You should define a `@keyframes orbit` animation that rotates the `.orbit` element 360 degrees around its center. You should apply this animation to the `.orbit` element with a duration of `5` seconds, a linear timing function, and infinite iterations. +14. Your `.earth` and `.moon` elements should have a background color and a `border-radius` of `50%` to make them look like planets. + +15. You should define a `@keyframes orbit` animation that rotates the `.orbit` element 360 degrees around its center. You should apply this animation to the `.orbit` element with a duration of `5` seconds, a linear timing function, and infinite iterations. **Примітка:** не забудьте прив’язати таблицю стилів до HTML та застосувати CSS. @@ -69,7 +71,13 @@ assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.width, '2 assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.height, '200px'); ``` -You should have a `div` with the class `earth` inside the `.space` `div`. +The `.space` element should have a `position` property of `relative`. + +```js +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.position, 'relative') +``` + +You should have a `div` with a class of `earth` inside the `div` with a `class` of `space`. ```js assert.exists(document.querySelector('div.space div.earth')); diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md index 72cc3cdd34..c03b71006c 100644 --- a/curriculum/challenges/ukrainian/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md +++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md @@ -1,6 +1,6 @@ --- id: 6708143cab2b583ecd3324f5 -title: What Are Attributes, and How Do They Work? +title: Що таке атрибут і як він працює? challengeType: 11 videoId: zUCIsEDCIMU dashedName: what-are-attributes @@ -12,43 +12,43 @@ dashedName: what-are-attributes # --transcript-- -An attribute is a value placed inside the opening tag of an HTML element. Attributes provide additional information about the element or specify how the element should behave. Here is the basic syntax for an attribute: +Атрибут — це значення, написане в початковому тегу HTML-елемента. Атрибути надають додаткову інформацію про елемент або визначають його поведінку. Ось базовий синтаксис атрибута: ```html ``` -The attribute name is followed by an equal sign (`=`) and a value in quotes. The value can be a string or a number, depending on the attribute. +Після назви атрибута стоїть знак «дорівнює» (`=`) і значення в лапках. Залежно від атрибута, значенням може бути рядок або число. -Let's take a look at a few examples of common HTML attributes. The first example is the `href` attribute, which is used to specify the URL of a link: +Розглянемо декілька прикладів поширених атрибутів у HTML. Розпочнемо з атрибута `href`, який вказує посилання: ```html Visit our website ``` -Without this attribute, the link would not work because there would be no destination URL. So you must include this `href` attribute to make the link functional. Other common attributes are the `src`, or source, and `alt`, or alternative, attribute - which is used to specify the source of an image and provide alternative descriptive text for the image, respectively: +Посилання без цього атрибута не працюватиме, оскільки не буде місця призначення. Тому, щоб посилання було функціональним, потрібно використовувати атрибут `href`. До інших поширених атрибутів відносять `src` (скорочено від англ. source) та `alt` (скорочено від англ. alternative), які використовують, щоб визначити джерело зображення і надати йому альтернативний опис: ```html A beautiful image ``` -Similar to the `href` attribute, the `src` attribute is required because it specifies the image file to be displayed. The `alt` attribute is not required, but it is recommended for accessibility purposes. Accessibility means making sure that everyone, including those with disabilities, can use and understand things like websites, apps, and physical spaces. You will learn more about accessibility in the upcoming lectures. +Подібно до `href`, атрибут `src` є обов’язковим, оскільки він вказує зображення, яке потрібно відтворити. Атрибут `alt` не є обов’язковим, але рекомендований з метою доступності. Доступність — це створення умов, за яких всі люди (включно з тими, хто має порушення) можуть користуватись вебсайтами, застосунками і фізичними просторами. У наступних лекціях ви дізнаєтесь більше про доступність. -Some attributes are a little unique with their syntax like the `checked` attribute shown here: +Деякі атрибути мають унікальний синтаксис. Наприклад, атрибут `checked`: ```html ``` -In the following example, we have an `input` element with the `type` attribute set to `checkbox`. Inputs are used to collect data from users, and the `type` attribute specifies the type of input. In this case, this input is a checkbox. You will learn more about how inputs work in the upcoming lectures. The `checked` attribute is used to specify that the checkbox should be checked by default. The `checked` attribute does not require a value. If it is present, the checkbox will be checked by default. If the attribute is not present, the checkbox will be unchecked. This is known as a boolean attribute. You will learn more about booleans in general when you get to the JavaScript section. There are several common boolean attributes you will encounter in HTML, such as `disabled`, `readonly`, and `required`. These attributes are used to specify the state of an element, such as whether it is disabled, read-only, or required. +Цей приклад має елемент `input` з атрибутом `type` зі значенням `checkbox`. Елементи `input` збирають дані від користувачів, а атрибут `type` визначає тип цих даних. У цьому випадку вхідними даними є прапорець. У наступних лекціях ви дізнаєтесь більше про вхідні дані. Атрибут `checked` вказує, що прапорець має бути попередньо вибраним за замовчуванням. Атрибут `checked` не потребує значення. Якщо він присутній, то прапорець буде вибраним. Якщо ні, то прапорець не буде вибраним. Цей атрибут відомий як булевий (або логічний). У розділі «JavaScript» ви дізнаєтесь більше про булеві значення. HTML має декілька поширених булевих атрибутів, серед яких `disabled`, `readonly` та `required`. Ці атрибути вказують стан елемента: активний, доступний лише для читання або обов’язковий. -HTML has many attributes that can be used to customize the behavior and appearance of elements on a webpage. Understanding how to use attributes is essential for creating interactive and accessible web content. Over the next few lectures, you will learn about more HTML attributes and how to use them effectively in your web development projects. +HTML має безліч атрибутів, які використовують для налаштування поведінки та зовнішнього вигляду елементів на вебсторінці. Для створення інтерактивного та доступного вебвмісту важливо розуміти, як користуватись атрибутами. У наступних лекціях ви дізнаєтесь більше про атрибути в HTML, а також як їх ефективно використовувати в проєктах. # --questions-- ## --text-- -Which of the following is an example of a boolean attribute? +Який з наведених атрибутів є булевим? ## --answers-- @@ -56,7 +56,7 @@ Which of the following is an example of a boolean attribute? ### --feedback-- -Watch the last part of the video where common boolean attributes were discussed. +Перегляньте кінець відео, де обговорювали поширені булеві атрибути. --- @@ -64,7 +64,7 @@ Watch the last part of the video where common boolean attributes were discussed. ### --feedback-- -Watch the last part of the video where common boolean attributes were discussed. +Перегляньте кінець відео, де обговорювали поширені булеві атрибути. --- @@ -76,7 +76,7 @@ Watch the last part of the video where common boolean attributes were discussed. ### --feedback-- -Watch the last part of the video where common boolean attributes were discussed. +Перегляньте кінець відео, де обговорювали поширені булеві атрибути. ## --video-solution-- @@ -88,31 +88,31 @@ Watch the last part of the video where common boolean attributes were discussed. ## --answers-- -Attributes provide additional information and help define the behavior for HTML elements. +Атрибути надають додаткову інформацію та допомагають визначити поведінку HTML-елементів. --- -Attributes change the background color of an element. +Атрибути змінюють колір фону елемента. ### --feedback-- -Review the beginning of the video where the definition for attributes was discussed. +Перегляньте початок відео, де обговорювали визначення атрибутів. --- -Attributes change the font size of an element. +Атрибути змінюють розмір шрифту елемента. ### --feedback-- -Review the beginning of the video where the definition for attributes was discussed. +Перегляньте початок відео, де обговорювали визначення атрибутів. --- -Attributes add JavaScript functionality to an element. +Атрибути додають JavaScript-функціональність до елемента. ### --feedback-- -Review the beginning of the video where the definition for attributes was discussed. +Перегляньте початок відео, де обговорювали визначення атрибутів. ## --video-solution-- @@ -120,7 +120,7 @@ Review the beginning of the video where the definition for attributes was discus ## --text-- -Which of the following is the correct syntax for a boolean attribute? +Який з наведених синтаксисів булевого атрибута є правильним? ## --answers-- @@ -132,7 +132,7 @@ Which of the following is the correct syntax for a boolean attribute? ### --feedback-- -Review the last part of the video where the `checked` attribute was discussed. +Перегляньте кінець відео, де обговорювали атрибут `checked`. --- @@ -140,7 +140,7 @@ Review the last part of the video where the `checked` attribute was discussed. ### --feedback-- -Review the last part of the video where the `checked` attribute was discussed. +Перегляньте кінець відео, де обговорювали атрибут `checked`. --- @@ -148,7 +148,7 @@ Review the last part of the video where the `checked` attribute was discussed. ### --feedback-- -Review the last part of the video where the `checked` attribute was discussed. +Перегляньте кінець відео, де обговорювали атрибут `checked`. ## --video-solution-- diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-what-is-html/670838977810401844af6fe0.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-what-is-html/670838977810401844af6fe0.md index ca551b742d..7730f60a3c 100644 --- a/curriculum/challenges/ukrainian/25-front-end-development/lecture-what-is-html/670838977810401844af6fe0.md +++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-what-is-html/670838977810401844af6fe0.md @@ -1,6 +1,6 @@ --- id: 670838977810401844af6fe0 -title: What Is the Role of the Link Element in HTML, and How Can It Be Used to Link to External Stylesheets? +title: Яка роль елемента link в HTML і як його можна використати для прив’язки зовнішньої таблиці стилів? challengeType: 11 videoId: Xdyig5C-oSU dashedName: what-is-the-role-of-the-link-element-in-html @@ -8,28 +8,28 @@ dashedName: what-is-the-role-of-the-link-element-in-html # --description-- -Watch the video or read the transcript and answer the questions below. +Перегляньте відео або прочитайте текстову версію та дайте відповіді на запитання нижче. # --transcript-- -Let's learn about the `link` element, and how to use it to link to external stylesheets. +Дізнаємось про елемент `link` і як його можна використати для прив’язки зовнішньої таблиці стилів. -The `link` element is used to link to external resources like stylesheets and site icons. Here is the basic syntax for using the `link` element for an external CSS file: +Елемент `link` використовують, щоб прив’язати зовнішні ресурси (наприклад, таблиці стилів чи іконки сайту). Ось основний синтаксис використання елемента `link` для зовнішнього CSS-файлу: ```html ``` -The `rel` attribute is used to specify the relationship between the linked resource and the HTML document. In this situation, we need to specify that this linked resource is a `stylesheet`. +Атрибут `rel` використовують, щоб вказати зв’язок між пов’язаним ресурсом та HTML-документом. У цьому випадку потрібно зазначити, що пов’язаним ресурсом є `stylesheet`. -It is considered best practice to separate your HTML and CSS in different files. Developers will use the `link` element for their external CSS file instead of writing everything in the HTML document. +Для HTML та CSS найкраще використовувати різні файли. Розробники використовують елемент `link` для зовнішнього CSS-файлу замість того, щоб писати весь код в HTML-документі. -The `href` attribute is used to specify the location of the URL for the external resource. +Атрибут `href` використовують, щоб вказати адресу зовнішнього ресурсу. -The `dot` followed by a forward slash in the example tells the computer to look in the current folder, or directory, for the `styles.css` file. +Крапка та скісна риска вказують комп’ютеру шукати файл `styles.css` в поточній папці або каталозі. -The `link` element should be placed inside the `head` element as seen in the following example: +Елемент `link` потрібно розташовувати в елементі `head` як показано в прикладі: ```html @@ -40,7 +40,7 @@ The `link` element should be placed inside the `head` element as seen in the fol ``` -Often times you will see multiple `link` elements inside a professional codebase that link to different stylesheets, fonts, and icons. Here is an example of using the `link` element to link to an external Google Font called *Playwright Cuba*: +У професійній кодовій базі часто можна побачити декілька елементів `link`, які прив’язують різні таблиці стилів, шрифти та іконки. Ось приклад елемента `link`, який прив’язує зовнішній шрифт під назвою *Playwright Cuba* з бібліотеки Google Fonts: ```html @@ -51,49 +51,49 @@ Often times you will see multiple `link` elements inside a professional codebase /> ``` -Google Fonts are a set of free and open source custom fonts that you can use inside any project. You can choose which fonts you would like to use and Google will provide you with the necessary HTML and CSS code. In this example, the `preconnect` value for the `rel` attribute tells the browser to create an early connection to the value specified in the `href` attribute. This is done to speed up loading times for these external resources. +Google Fonts — це безоплатні користувацькі шрифти у відкритому доступі, які можна використовувати для будь-якого проєкту. Ви можете вибрати, які шрифти хотіли б використати, і Google надасть необхідний код для HTML та CSS. Значення `preconnect` атрибута `rel` з прикладу каже браузеру попередньо встановити з’єднання зі значенням, вказаним в атрибуті `href`. Це робиться для швидшого завантаження зовнішніх ресурсів. -Another common use case for the `link` element is to link to icons. Here is an example of linking to a favicon: +Елемент `link` також часто використовують, щоб прив’язати іконки. Ось приклад прив’язки фавікона: ```html ``` -A favicon, which is short for favorite icon, is a small icon typically displayed in the browser tab next the site title. A lot of websites will use a favicon to display their brand icon. +Фавікон (скорочено від англ. favorite icon) — це маленька іконка, яка зазвичай розташована у вкладці браузера поряд з назвою сайту. Багато вебсайтів використовують брендову іконку як фавікон. # --questions-- ## --text-- -What is the role of the `link` element in HTML? +Що робить елемент `link` в HTML? ## --answers-- -It specifies the content type of the linked resource. +Визначає тип вмісту пов’язаного ресурсу. ### --feedback-- -Pay close attention to the name of this element because it will give you clue as to what it does. +Придивіться до назви. Вона підкаже, що робить цей елемент. --- -It determines the visibility of the linked resource on the webpage. +Визначає видимість пов’язаного ресурсу на вебсторінці. ### --feedback-- -Pay close attention to the name of this element because it will give you clue as to what it does. +Придивіться до назви. Вона підкаже, що робить цей елемент. --- -It defines the font size of the linked resource when displayed. +Визначає розмір шрифту пов’язаного ресурсу при відтворенні. ### --feedback-- -Pay close attention to the name of this element because it will give you clue as to what it does. +Придивіться до назви. Вона підкаже, що робить цей елемент. --- -It is used to link to external resources like stylesheets and site icons. +Прив’язує зовнішні ресурси (наприклад, таблиці стилів чи іконки сайту). ## --video-solution-- @@ -101,35 +101,35 @@ It is used to link to external resources like stylesheets and site icons. ## --text-- -What is the role of the `rel` attribute inside the `link` element? +Що робить атрибут `rel` в елементі `link`? ## --answers-- -It is used to indicate the language of the linked document. +Вказує мову пов’язаного документа. ### --feedback-- -The `rel` attribute represents a relationship. +Атрибут `rel` визначає зв’язок. --- -It is used to specify the relationship between the linked resource and the HTML document. +Вказує зв’язок між пов’язаним ресурсом та HTML-документом. --- -It is used to define the media type of the linked document. +Визначає тип медіавмісту пов’язаного документа. ### --feedback-- -The `rel` attribute represents a relationship. +Атрибут `rel` визначає зв’язок. --- -It is used to determine the size of the linked document. +Визначає розмір пов’язаного документа. ### --feedback-- -The `rel` attribute represents a relationship. +Атрибут `rel` визначає зв’язок. ## --video-solution-- @@ -137,35 +137,35 @@ The `rel` attribute represents a relationship. ## --text-- -What is a favicon? +Що таке фавікон? ## --answers-- -A type of JavaScript file used to enhance website functionality. +Тип JavaScript-файлу, який використовують для покращення функціональності сайту. ### --feedback-- -Look closely at the name since it will imply what a favicon is. +Придивіться до назви. Вона підкаже, що таке фавікон. --- -A type of font used to style text on a website. +Тип шрифту, який використовують для оформлення тексту на вебсайті. ### --feedback-- -Look closely at the name since it will imply what a favicon is. +Придивіться до назви. Вона підкаже, що таке фавікон. --- -A small icon typically displayed in the browser tab next to the site title. +Маленька іконка, яка зазвичай розташована у вкладці браузера поряд з назвою сайту. --- -A security feature used to prevent cross-site scripting attacks. +Функція безпеки, яку використовують для запобігання міжсайтового скриптингу. ### --feedback-- -Look closely at the name since it will imply what a favicon is. +Придивіться до назви. Вона підкаже, що таке фавікон. ## --video-solution-- diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-what-is-html/670838e914096b194b0c51aa.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-what-is-html/670838e914096b194b0c51aa.md index cc5ab08c53..4cee1bcdb5 100644 --- a/curriculum/challenges/ukrainian/25-front-end-development/lecture-what-is-html/670838e914096b194b0c51aa.md +++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-what-is-html/670838e914096b194b0c51aa.md @@ -1,6 +1,6 @@ --- id: 670838e914096b194b0c51aa -title: What Is an HTML Boilerplate, and Why Is It Important? +title: Що таке шаблонний HTML-код і чому він важливий? challengeType: 11 videoId: IlJEEVOc9o0 dashedName: what-is-an-html-boilerplate @@ -8,13 +8,13 @@ dashedName: what-is-an-html-boilerplate # --description-- -Watch the video or read the transcript and answer the questions below. +Перегляньте відео або прочитайте текстову версію та дайте відповіді на запитання нижче. # --transcript-- -Let's learn about the HTML boilerplate. +Розглянемо шаблонний HTML-код. -What is the HTML boilerplate, you ask? It's like a ready-made template for your webpages. Think of it as the foundations of a house. A boilerplate includes the basic structure and essential elements every HTML document needs. It saves you time and helps ensure your pages are set up properly. Here is an example: +Що ж таке шаблонний HTML-код? Це готовий шаблон вебсторінки. Вважайте його основою будинку. Шаблонний код містить базову структуру та необхідні елементи, які повинен містити кожен HTML-документ. Це економить час і допомагає забезпечити правильне налаштування сторінки. Ось приклад: ```html @@ -32,13 +32,13 @@ What is the HTML boilerplate, you ask? It's like a ready-made template for your ``` -Let's break down the key parts of this boilerplate. First, there is the `DOCTYPE` declaration: +Розберемо ключові частини шаблонного коду. По-перше, ось оголошення `DOCTYPE`: ```html ``` -It tells browsers which version of HTML you're using. Next, comes the `html` tag: +Воно повідомляє браузерам, яку версію HTML використовувати. Далі йде тег `html`: ```html @@ -47,7 +47,7 @@ It tells browsers which version of HTML you're using. Next, comes the `html` tag ``` -This wraps around all your content, and can specify the language of your page. Inside the `html` tag, you'll find two main sections - a `head`, and a `body`: +Він охоплює весь вміст і може визначати мову сторінки. В межах тега `html` розташовано два основні розділи — `head` та `body`: ```html @@ -61,7 +61,7 @@ This wraps around all your content, and can specify the language of your page. I ``` -The `head` section contains important behind-the-scenes information: +Розділ `head` містить важливу інформацію залаштунків: ```html @@ -72,9 +72,9 @@ The `head` section contains important behind-the-scenes information: ``` -Your site's metadata, contained in `meta` elements, has details about things like character encoding, and how websites like Twitter should preview your page's link. Your site's title, found in the `title` element, determines the text that appears in the browser tab or window. Finally, you'll typically link your page's external stylesheets in the `head` section using `link` elements. +Метадані сайту, які зберігаються в елементах `meta`, містять певні деталі (наприклад, кодування символів чи як різні вебсайти мають відтворювати попередній перегляд сторінки). Заголовок сайту, що знаходиться в елементі `title`, визначає текст, який з’являється у вкладці або вікні браузера. А ось за допомогою елементів `link` у розділі `head` зазвичай прив’язують зовнішні таблиці стилів. -The `body` section is where all your content goes: +У розділі `body` знаходиться весь вміст: ```html @@ -83,45 +83,45 @@ The `body` section is where all your content goes: ``` -This is what visitors actually see on your web page. +Це те, що відвідувачі бачать на вебсторінці. -Now, why is a boilerplate important? It ensures your pages are structured correctly and work well across different browsers. Using a boilerplate helps you avoid common mistakes and follow best practices. It's a great starting point for any web project. Remember, you can customize your own boilerplate to fit your needs. As you gain experience, you might add your own preferred elements or `meta` tags. As you continue to improve your personal boilerplate, you'll find that it saves you time when starting new projects. +Чому шаблонний код важливий? Він забезпечує правильну структуру сторінки та її сумісність з різними браузерами. Використання шаблонного коду допомагає уникнути поширених помилок і дотримуватися найкращих практик. Це чудовий старт для будь-якого вебпроєкту. Пам’ятайте: ви можете налаштувати власний шаблонний код відповідно до своїх потреб. З отриманням досвіду ви можете додавати улюблені елементи або теги `meta`. Покращуючи власний шаблонний код, ви зекономите час при розробці нових проєктів. -Next time you start a new HTML file, consider using a boilerplate. It will definitely give you a solid foundation to build on. +Коли розпочнете працювати над новим HTML-файлом, згадайте про шаблонний код. Він безумовно надасть міцної основи для роботи. # --questions-- ## --text-- -Where would you set the character encoding for your page? +Де встановлюється кодування символів сторінки? ## --answers-- -A `meta` element in the `body`. +В елементі `meta` в межах `body`. ### --feedback-- -Character encoding is metadata information. +Кодування символів є інформацією з метаданих. --- -A `head` element in the `body`. +В елементі `head` в межах `body`. ### --feedback-- -Character encoding is metadata information. +Кодування символів є інформацією з метаданих. --- -A `meta` element in the `head`. +В елементі `meta` в межах `head`. --- -In the `DOCTYPE`. +У `DOCTYPE`. ### --feedback-- -Character encoding is metadata information. +Кодування символів є інформацією з метаданих. ## --video-solution-- @@ -129,35 +129,35 @@ Character encoding is metadata information. ## --text-- -Where would you set the language for your page? +Де встановлюється мова сторінки? ## --answers-- -In the opening `html` tag. +У початковому тегу `html`. --- -A `meta` element in the `body`. +В елементі `meta` в межах `body`. ### --feedback-- -This is an attribute on the outer-most element. +Це атрибут найбільш зовнішнього елемента. --- -A `head` element in the `body`. +В елементі `head` в межах `body`. ### --feedback-- -This is an attribute on the outer-most element. +Це атрибут найбільш зовнішнього елемента. --- -A `meta` element in the `head`. +В елементі `meta` в межах `head`. ### --feedback-- -This is an attribute on the outer-most element. +Це атрибут найбільш зовнішнього елемента. ## --video-solution-- @@ -165,35 +165,35 @@ This is an attribute on the outer-most element. ## --text-- -What purpose does a boilerplate serve? +Яка мета шаблонного коду? ## --answers-- -Provides a starting structure for your websites. +Забезпечити початкову структуру вебсайту. ### --feedback-- -A boilerplate is helpful in many ways. +Шаблонний код корисний у багатьох аспектах. --- -Ensures you are not missing any essential elements. +Гарантувати, що жоден з важливих елементів не буде пропущений. ### --feedback-- -A boilerplate is helpful in many ways. +Шаблонний код корисний у багатьох аспектах. --- -Allows you to get started writing the content of your page faster. +Допомогти швидше написати початок вмісту сторінки. ### --feedback-- -A boilerplate is helpful in many ways. +Шаблонний код корисний у багатьох аспектах. --- -All of the above. +Усе з переліченого вище. ## --video-solution-- diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-what-is-html/670839051794aa19fcef6dc8.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-what-is-html/670839051794aa19fcef6dc8.md index 1399f0c667..0fbf6e56b9 100644 --- a/curriculum/challenges/ukrainian/25-front-end-development/lecture-what-is-html/670839051794aa19fcef6dc8.md +++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-what-is-html/670839051794aa19fcef6dc8.md @@ -1,6 +1,6 @@ --- id: 670839051794aa19fcef6dc8 -title: What Is UTF-8 Character Encoding, and Why Is It Needed? +title: Що таке кодування символів UTF-8 і чому це важливо? challengeType: 11 videoId: T0VimOMROr8 dashedName: what-is-utf-8-character-encoding @@ -8,19 +8,19 @@ dashedName: what-is-utf-8-character-encoding # --description-- -Watch the video or read the transcript and answer the questions below. +Перегляньте відео або прочитайте текстову версію та дайте відповіді на запитання нижче. # --transcript-- -What is UTF-8 character encoding, and why is it needed? +Що таке кодування символів UTF-8 і чому це важливо? -UTF-8, or UCS Transformation Format 8, is a standardized character encoding widely used on the web. Character encoding is the method computers use to store characters as data. Essentially, all text on a web page is a sequence of characters stored as one or more bytes. In computing, a byte is a unit of data consisting of 8 bits, or binary digits. UTF-8 supports every character in the Unicode character set - and this includes characters and symbols from all writing systems, languages, and technical symbols. Here is an example of using the `meta` element with the `charset` attribute to set the character encoding to `UTF-8`: +UTF-8 (англ. UCS Transformation Format 8) — це стандартизоване кодування символів, яке широко використовується в інтернеті. Кодування символів — це метод, який використовують комп’ютери для збереження символів як даних. По суті, весь текст на вебсторінці є послідовністю символів, збережених як один або більше байтів. Байт — це одиниця даних, яка складається з 8 бітів (бінарних чисел). UTF-8 підтримує всі символи Юнікоду (включно з символами усіх писемних систем, мов і технічними символами). Ось приклад елемента `meta` з атрибутом `charset`, що встановлює кодування символів `UTF-8`: ```html ``` -By setting the character encoding to UTF-8, it will ensure that the accented `"e"` character (`é`) is displayed correctly on the page. Here is an extended code example of using the UTF-8 character encoding: +Кодування символів UTF-8 забезпечить, що на сторінці правильно відтвориться наголошена літера `"e"` (`é`). Ось розширений приклад коду, де використано кодування символів UTF-8: ```html @@ -36,13 +36,13 @@ By setting the character encoding to UTF-8, it will ensure that the accented `"e ``` -For each new project you create, you should include this `meta` element with the `charset` attribute set to `UTF-8`. +У всіх нових проєктах варто використовувати елемент `meta` з атрибутом `charset` зі значенням `UTF-8`. # --questions-- ## --text-- -Which attribute is used to set the UTF-8 character encoding for HTML documents? +Який атрибут використовують, щоб встановити кодування символів UTF-8 для HTML-документів? ## --answers-- @@ -50,7 +50,7 @@ Which attribute is used to set the UTF-8 character encoding for HTML documents? ### --feedback-- -Refer back to the middle of video where there are examples showing which attribute to use. +Перегляньте середину відео, де є приклади потрібного атрибута. --- @@ -58,7 +58,7 @@ Refer back to the middle of video where there are examples showing which attribu ### --feedback-- -Refer back to the middle of video where there are examples showing which attribute to use. +Перегляньте середину відео, де є приклади потрібного атрибута. --- @@ -70,7 +70,7 @@ Refer back to the middle of video where there are examples showing which attribu ### --feedback-- -Refer back to the middle of video where there are examples showing which attribute to use. +Перегляньте середину відео, де є приклади потрібного атрибута. ## --video-solution-- @@ -78,35 +78,35 @@ Refer back to the middle of video where there are examples showing which attribu ## --text-- -What is character encoding? +Що таке кодування символів? ## --answers-- -A method computers use to store characters as data. +Метод, який використовують комп’ютери для збереження символів як даних. --- -A way to compress text files. +Спосіб стиснення текстових файлів. ### --feedback-- -Think about what computers do with characters. +Подумайте, що комп’ютери роблять з символами. --- -It determines the font used to display text on a screen. +Визначення шрифту, який використовується для відтворення тексту на екрані. ### --feedback-- -Think about what computers do with characters. +Подумайте, що комп’ютери роблять з символами. --- -It refers to the process of converting spoken language into written text. +Процес перетворення усної мови в письмовий текст. ### --feedback-- -Think about what computers do with characters. +Подумайте, що комп’ютери роблять з символами. ## --video-solution-- @@ -114,7 +114,7 @@ Think about what computers do with characters. ## --text-- -How many bits are inside of a byte? +Скільки бітів містить байт? ## --answers-- @@ -122,7 +122,7 @@ How many bits are inside of a byte? ### --feedback-- -Refer back to the beginning of the video where it talks about bytes and bits. +Перегляньте початок відео, де розповідають про байти та біти. --- @@ -130,7 +130,7 @@ Refer back to the beginning of the video where it talks about bytes and bits. ### --feedback-- -Refer back to the beginning of the video where it talks about bytes and bits. +Перегляньте початок відео, де розповідають про байти та біти. --- @@ -138,7 +138,7 @@ Refer back to the beginning of the video where it talks about bytes and bits. ### --feedback-- -Refer back to the beginning of the video where it talks about bytes and bits. +Перегляньте початок відео, де розповідають про байти та біти. --- diff --git a/curriculum/challenges/ukrainian/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md b/curriculum/challenges/ukrainian/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md index 9d2f71bddd..5115e4d99b 100644 --- a/curriculum/challenges/ukrainian/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md +++ b/curriculum/challenges/ukrainian/25-front-end-development/quiz-css-pseudo-classes/66ed9002f45ce3ece4053eb6.md @@ -29,7 +29,7 @@ They are properties that adjust an element's size or layout on the page. --- -They are selector used to add movement effects to an element during interactions. +They are selectors used to add movement effects to an element during interactions. #### --answer-- diff --git a/curriculum/challenges/ukrainian/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md b/curriculum/challenges/ukrainian/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md index 952e50b47b..93a545ffef 100644 --- a/curriculum/challenges/ukrainian/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md +++ b/curriculum/challenges/ukrainian/25-front-end-development/review-css-libraries-and-frameworks/6724e2026e608219108d385a.md @@ -9,7 +9,103 @@ dashedName: review-css-libraries-and-frameworks Пригадайте поняття нижче, щоб підготуватись до тесту. +## CSS Frameworks +- **CSS frameworks**: CSS frameworks can speed up your workflow, create a uniform visual style across a website, make your design look consistent across multiple browsers, and keep your CSS code more organized. +- **Popular CSS frameworks**: Some of the popular CSS frameworks are Tailwind CSS, Bootstrap, Materialize, and Foundation. +- **Potential disadvantages**: + - The CSS provided by the framework might conflict with your custom CSS. + - Your website might look similar to other websites using the same framework. + - Large frameworks might cause performance issues. + +## Two Types of CSS Frameworks + +- **Utility-first CSS frameworks**: These frameworks have small classes with specific purposes, like setting the margin, padding, or background color. You can assign these small classes directly to the HTML elements as needed. Tailwind CSS is categorized as a utility-first CSS framework. + +Here is an example of using Tailwind CSS to style a button. + +```html + +``` + +- **Component-based CSS frameworks**: These frameworks have pre-built components with pre-defined styles that you can add to your website. The components are available in the official documentation of the CSS framework, and you can copy and paste them into your project. Bootstrap is categorized as a component-based CSS framework. + +Here is an example of using Bootstrap to create a list group. Instead of applying small classes to your HTML elements, you will add the entire component, including the HTML structure. + +```html +
+ +
+``` + +## CSS Preprocessors + +- **CSS preprocessor**: A CSS preprocessor is a tool that extends standard CSS. It compiles the code with extended syntax into a native CSS file. It can be helpful for writing cleaner, reusable, less repetitive, and scalable CSS for complex projects. +- **Features**: Some of the features that can be provided by CSS preprocessors are variables, mixins, nesting, and selector inheritance. +- **Popular CSS preprocessors**: Some of the popular CSS preprocessors are Sass, Less, and Stylus. +- **Potential disadvantages**: + - Compiling the CSS rules into standard CSS might cause overhead. + - The compiled code may be difficult to debug. + +## Sass + +- **Sass**: It is one of the most popular CSS preprocessors. Sass stands for "Syntactically Awesome Style Sheets." +- **Features supported by Sass**: Sass supports features like variables, nested CSS rules, modules, mixins, inheritance, and operators for basic mathematical operations + +## Two Syntaxes Supported by Sass + +- **SCSS syntax**: The SCSS (Sassy CSS) expands the basic syntax of CSS. It is the most widely used syntax for Sass. SCSS files have an `.scss` extension. + +Here is an example of defining and using a variable in SCSS. + +```scss +$primary-color: #3498eb; + +header { + background-color: $primary-color; +} +``` + +- **Indented syntax**: The indented syntax was Sass's original syntax and is also known as the "Sass syntax." + +Here is an example of defining and using a variable in the indented syntax. + +```sass +$primary-color: #3498eb + +header + background-color: $primary-color +``` + +### Mixins + +- **Mixins**: Mixins allow you to group multiple CSS properties and their values under the name and reuse that block of CSS code throughout your stylesheet. + +Here is an example of defining a mixin in SCSS syntax. In this case, the mixin is called `center-flex`. It has three CSS properties to center elements using flexbox. + +```scss +@mixin center-flex { + display: flex; + justify-content: center; + align-items: center; +} +``` + +Here is an example of using the mixin you defined. + +```scss +section { + @include center-flex; + height: 500px; + background-color: #3289a8; +} +``` # --assignment--