` element wouldn’t be. +У цьому прикладі будуть обрані всі три елементи `
`, а елемент `` element, which doesn’t exist.
+Ви не зможете об’єднати декілька селекторів типу, оскільки елемент може мати лише один тип. Наприклад, якщо об’єднати два селектори (`div` та `p`), ми отримаємо селектор `divp`, який не працюватиме, оскільки шукатиме елемент ``, якого не існує.
# --question--
## --text--
-Given an element that has an `id` of `title` and a `class` of `primary`, how would you use both attributes for a single rule?
+Вам надано елемент, який має `id` зі значенням `title` та `class` зі значенням `primary`. Як ви б використали обидва атрибути для одного правила?
## --answers--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
index 2e292c446fd..09f1c91d2e1 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
@@ -1,38 +1,38 @@
---
id: 6489bcd7b7600c818dc297ea
-title: The Cascade of CSS Lesson A
+title: Каскадність CSS. Урок №1
challengeType: 15
dashedName: the-cascade-of-css-lesson-a
---
# --description--
-Sometimes we may have rules that conflict with one another, and we end up with some unexpected results. “But I wanted these paragraphs to be blue, why are they red like these other paragraphs?!” As frustrating as this can be, it’s important to understand that CSS doesn’t just do things against your wishes. CSS only does what we tell it to do. One exception to this is the default styles that are provided by a browser. These default styles vary from browser to browser, and they are why some elements create a large “gap” between themselves and other elements, or why buttons look the way they do, despite us not writing any CSS rules to style them that way.
+Іноді у нас можуть бути правила, які суперечать одне одному, внаслідок чого виникають несподівані результати. «Ці абзаци мали бути синіми, чому вони червоні, як і всі інші?!» Це дратує, однак важливо розуміти, що CSS робить так ненавмисно. CSS робить лише те, що ми просимо. Єдиним винятком є стилі за замовчуванням, які надає браузер. Ці стилі відрізняються залежно від браузера, через що деякі елементи створюють «прогалину» між собою та іншими елементами, або кнопки мають певний вигляд, хоча ми не писали жодних правил CSS для них.
-So if you end up with some unexpected behavior like this it’s either because of these default styles, not understanding how a property works, or not understanding this little thing called the cascade.
+Тому, якщо у вас виникне такий несподіваний результат, то причиною є стилі за замовчуванням, незнання властивості чи нерозуміння дрібнички під назвою «каскад».
-The cascade is what determines which rules actually get applied to your HTML. There are different factors that the cascade uses to determine this. We will examine three of these factors, which will hopefully help you avoid those frustrating “I hate CSS” moments.
+Саме каскад визначає, які правила насправді застосовуються до HTML. Для цього каскад використовує різні фактори. Ми вивчимо три з цих факторів, які, сподіваємось, допоможуть уникнути слів «я ненавиджу CSS».
# --question--
## --text--
-Why might you encounter unexpected behavior in CSS?
+Чому в CSS може виникнути несподівана поведінка?
## --answers--
-Due to conflicting rules and unexpected results
+Через конфліктуючі правила та неочікувані результати
---
-Due to the browser's default styles
+Через стилі браузера за замовчуванням
---
-Due to a lack of understanding of CSS properties
+Через недостатнє розуміння властивостей CSS
---
-All of the above
+Усе перелічене вище
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
index d1891dcb6cc..ae87e47552c 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
@@ -1,41 +1,41 @@
---
id: 6489c96782cf2e4f86f03ae2
-title: The Cascade of CSS Lesson B
+title: Каскадність CSS. Урок №2
challengeType: 15
dashedName: the-cascade-of-css-lesson-b
---
# --description--
-A CSS declaration that is more specific will take precedence over less specific ones. Inline styles, which you went over in a previous lesson, have the highest specificity compared to selectors, while each type of selector has its own specificity level that contributes to how specific a declaration is. Other selectors contribute to specificity, but you're focusing only on the ones you’ve gone over so far:
+Чим специфічніше оголошення CSS, тим у нього більше переваги над іншими. Вбудовані стилі, які ви розглянули минулого уроку, мають найвищу специфічність серед інших селекторів, хоча кожен тип селектора має власний рівень специфічності, який сприяє специфічності оголошення. Інші селектори сприяють специфічності, але ми фокусуємось лише на тих, які вже розглянули:
-1. ID selectors (most specific selector)
-2. Class selectors
-3. Type selectors
+1. селектори ID (найспецифічніший селектор);
+2. селектори класу;
+3. селектори типу.
-Specificity will only be taken into account when an element has multiple, conflicting declarations targeting it, sort of like a tie-breaker. An ID selector will always beat any number of class selectors, a class selector will always beat any number of type selectors, and a type selector will always beat any number of anything less specific than it. When no declaration has a selector with a higher specificity, a larger amount of a single selector will beat a smaller amount of that same selector.
+Специфічність враховується лише тоді, коли елемент має декілька конфліктуючих оголошень, націлених на себе. Селектор ID завжди переважатиме будь-яку кількість селекторів класу, селектор класу завжди переважатиме будь-яку кількість селекторів типу, а селектор типу завжди переважатиме будь-яку кількість менш специфічних селекторів. Якщо жодне оголошення не має селектору вищої специфічності, то більша кількість селектору переважає меншу кількість того самого селектору.
# --question--
## --text--
-Which of the following is the correct order of specificity for CSS selectors, from most specific to least specific?
+Що з переліченого показує правильний порядок специфічності селекторів CSS (від найбільш специфічного до найменш специфічного)?
## --answers--
-Type selectors, class selectors, ID selectors
+Селектори типу, селектори класу, селектори ID
---
-ID selectors, class selectors, type selectors
+Селектори ID, селектори класу, селектори типу
---
-Class selectors, type selectors, ID selectors
+Селектори класу, селектори типу, селектори ID
---
-ID selectors, type selectors, class selectors
+Селектори ID, селектори типу, селектори класу
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
index aee970d3d1f..70dc4a13347 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
@@ -1,13 +1,13 @@
---
id: 6489cb0b82cf2e4f86f03ae3
-title: The Cascade of CSS Lesson C
+title: Каскадність CSS. Урок №3
challengeType: 15
dashedName: the-cascade-of-css-lesson-c
---
# --description--
-Let’s take a look at a few quick examples to visualize how specificity works. Consider the following HTML and CSS code:
+Розберемо декілька прикладів, щоб зрозуміти специфічність. Розглянемо такий код HTML та CSS:
```html
@@ -29,29 +29,29 @@ Let’s take a look at a few quick examples to visualize how specificity works.
}
```
-In the example above, both rules are using only class selectors, but rule 2 is more specific because it is using more class selectors.
+У прикладі вище обидва правила використовують лише селектори класу, але правило №2 специфічніше, оскільки використовує більше селекторів класу.
# --question--
## --text--
-Based on the given HTML and CSS code, which color would the `` element be rendered as?
+На основі наданого коду HTML та CSS, якого кольору буде елемент ``?
## --answers--
-blue
+Синього
---
-red
+Червоного
---
-purple
+Фіолетового
---
-black
+Чорного
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
index 18738183e1e..8093df48654 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
@@ -1,13 +1,13 @@
---
id: 6489cf5882cf2e4f86f03ae5
-title: The Cascade of CSS Lesson D
+title: Каскадність CSS. Урок №4
challengeType: 15
dashedName: the-cascade-of-css-lesson-d
---
# --description--
-Now, let’s change things a little bit:
+Тепер додамо трішки змін:
```html
@@ -29,29 +29,29 @@ Now, let’s change things a little bit:
}
```
-In the example above, despite rule 2 having more class selectors than ID selectors, rule 1 is more specific because ID beats class.
+Хоча правило №2 у прикладі вище має більше селекторів класу ніж селекторів ID, специфічнішим є правило №1, оскільки ID перемагає клас.
# --question--
## --text--
-Based on the modified HTML and CSS code, which color would the `` element be rendered as?
+На основі зміненого коду HTML та CSS, якого кольору буде елемент ``?
## --answers--
-orange
+Оранжевого
---
-red
+Червоного
---
-blue
+Синього
---
-cyan
+Блакитного
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
index b7608df5093..63ca2effd9a 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
@@ -1,6 +1,6 @@
---
id: 6489cf6282cf2e4f86f03ae6
-title: The Cascade of CSS Lesson E
+title: Каскадність CSS. Урок №5
challengeType: 15
dashedName: the-cascade-of-css-lesson-e
---
@@ -20,31 +20,31 @@ dashedName: the-cascade-of-css-lesson-e
}
```
-In this final example, both rules are using ID and class selectors, so neither rule is using a more specific selector than the other. The cascade then checks the amounts of each selector type. Both rules only have one ID selector, but rule 2 has more class selectors, so rule 2 has a higher specificity!
+В останньому прикладі обидва правила використовують селектори ID та класу, тому жодне правило не використовує специфічнішого селектора. У такому випадку каскад перевіряє кількість кожного типу селектору. Обидва правила мають по одному селектору ID, але правило №2 має більше селекторів класу, а отже має вищу специфічність!
-While the `color: red` declaration would take precedence, the `background-color: yellow` declaration would still be applied since there’s no conflicting declaration for it.
+Хоча оголошення `color: red` має перевагу, оголошення `background-color: yellow` все одно буде застосовано, оскільки не виникає конфліктуючого оголошення.
# --question--
## --text--
-Considering the updated CSS code, which of the following describes the rendering of the `` element?
+Враховуючи оновлений код CSS, що з переліченого описує відтворення елемента ``?
## --answers--
-Text color: Red, Background color: Transparent
+Колір тексту: червоний, колір фону: прозорий
---
-Text color: Red, Background color: Yellow
+Колір тексту: червоний, колір фону: жовтий
---
-Text color: Blue, Background color: Transparent
+Колір тексту: синій, колір фону: прозорий
---
-Text color: Blue, Background color: Yellow
+Колір тексту: синій, колір фону: жовтий
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
index 97c78768eb6..71484c44709 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
@@ -1,6 +1,6 @@
---
id: 6489cf6782cf2e4f86f03ae7
-title: The Cascade of CSS Lesson F
+title: Каскадність CSS. Урок №6
challengeType: 15
dashedName: the-cascade-of-css-lesson-f
---
@@ -19,7 +19,7 @@ dashedName: the-cascade-of-css-lesson-f
}
```
-Here both rule 1 and rule 2 have the same specificity. Rule 1 uses a chaining selector (no space) and rule 2 uses a descendant combinator (the empty space). But both rules have two classes and the combinator symbol itself does not add to the specificity.
+Обидва правила мають однакову специфічність. Правило №1 використовує об’єднуючий селектор (немає пробілу), а правило №2 використовує нащадка (є пробіл). Однак обидва правила мають два класи, а символ комбінатора не додає специфічності.
```css
/* rule 1 */
@@ -32,15 +32,15 @@ Here both rule 1 and rule 2 have the same specificity. Rule 1 uses a chaining se
}
```
-This example shows the same thing. Even though rule 2 is using a child combinator (`>`), this does not change the specificity value. Both rules still have two classes so they have the same specificity values.
+Цей приклад показує те саме. Хоча правило №2 використовує дочірній комбінатор (`>`), значення специфічності не змінюється. Обидва правила мають два класи, тому специфічність однакова.
-*Note:* Not everything adds to specificity When comparing selectors, you may come across special symbols for the universal selector (`*`) as well as combinators (`+`, `~`, `>`, and an empty space). These symbols do not add any specificity in and of themselves.
+*Примітка:* не все впливає на специфічність. Порівнюючи селектори, ви можете наткнутись на спеціальні символи універсального селектора (`*`), а також комбінаторів (`+`, `~`, `>` й пробіл). Такі символи не додають жодної специфічності.
# --question--
## --text--
-Based on the given CSS code, which font size would be applied to elements with the class "class second-class"?
+На основі наданого коду CSS, який розмір шрифту буде застосовано до елементів з класом `class second-class`?
## --answers--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
index ef09942a733..800585e1f43 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
@@ -1,15 +1,15 @@
---
id: 6489cf7682cf2e4f86f03ae8
-title: The Cascade of CSS Lesson G
+title: Каскадність CSS. Урок №7
challengeType: 15
dashedName: the-cascade-of-css-lesson-g
---
# --description--
-Inheritance refers to certain CSS properties that, when applied to an element, are inherited by that element’s descendants, even if we don’t explicitly write a rule for those descendants. Typography based properties (`color`, `font-size`, `font-family`, etc.) are usually inherited, while most other properties aren’t.
+Спадковість стосується деяких властивостей CSS, які, застосувавши до елемента, успадковуються нащадками цього елемента, навіть якщо ми не пишемо окреме правило для них. Властивості на основі типографії (`color`, `font-size`, `font-family` тощо) зазвичай успадковуються, а більшість інших властивостей — ні.
-The exception to this is when directly targeting an element, as this always beats inheritance:
+Виняток лише тоді, коли елемент прямо націлений, оскільки це переважає успадкування:
```html
@@ -31,29 +31,29 @@ The exception to this is when directly targeting an element, as this always beat
}
```
-Despite the `parent` element having a higher specificity with an ID, the `child` element would have the `color: blue` style applied since that declaration directly targets it, while `color: red` from the parent is only inherited.
+Хоча елемент `parent` має вищу специфічність через ID, до елемента `child` буде застосовано стиль `color: blue`, оскільки оголошення прямо націлене на нього, а `color: red` успадковується від батька.
# --question--
## --text--
-Based on the given HTML and CSS code, what would be the color of the `` element?
+На основі наданого коду HTML та CSS, яким буде колір елемента ``?
## --answers--
-Red
+Червоний
---
-Blue
+Синій
---
-Inherited from the parent element
+Успадкований від батьківського елемента
---
-Transparent
+Прозорий
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
index da43c0c9240..df38ce4f9a6 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
@@ -1,15 +1,15 @@
---
id: 648acb0745e79f79650fa2ac
-title: The Cascade of CSS Lesson H
+title: Каскадність CSS. Урок №8
challengeType: 15
dashedName: the-cascade-of-css-lesson-h
---
# --description--
-The final factor, the end of the line, the tie-breaker of the tie-breaker. Let’s say that after every other factor has been taken into account, there are still multiple conflicting rules targeting an element. How does the cascade determine which rule to apply?
+Кінцевий фактор, фінішна пряма, остання частина. Уявимо, що після всіх факторів, які ми розглянули, досі виникають конфліктуючі правила, націлені на елемент. Як каскад визначає, яке правило застосувати?
-Really simply, actually. Whichever rule was the last defined is the winner.
+Насправді дуже просто. Перемагає те правило, яке було визначене останнім.
```css
/* styles.css */
@@ -23,28 +23,28 @@ Really simply, actually. Whichever rule was the last defined is the winner.
}
```
-For an element that has both the `alert` and `warning` classes, the cascade would run through every other factor, including inheritance (none here) and specificity (neither rule is more specific than the other). Since the `.warning` rule was the last one defined, and no other factor was able to determine which rule to apply, it’s the one that gets applied to the element.
+Якщо елемент має класи `alert` та `warning`, каскад розгляне кожен інший фактор, включно зі спадковістю (її тут немає) та специфічністю (жодне правило не переважає над іншими). Оскільки правило `.warning` визначено останнім та жоден інший фактор не зміг визначити, яке правило застосувати, то саме це правило буде застосовано до елемента.
# --question--
## --text--
-What determines which CSS rule is applied when there are conflicting rules targeting the same element?
+Що визначає, яке правило CSS застосувати, якщо конфліктуючі правила націлені на один елемент?
## --answers--
-The specificity of the CSS rule.
+Специфічність правила CSS.
---
-The inheritance hierarchy of the element.
+Ієрархія успадкування елемента.
---
-The presence of classes or IDs on the element.
+Наявність класів чи ID в елемента.
---
-The order in which the rules were defined.
+Порядок визначення правил.
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
index f17ab8ffd27..006df78ce66 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
@@ -7,7 +7,7 @@ dashedName: learn-data-types-and-conditionals-lesson-l
# --description--
-Another way to compare conditional statements would be the ternary operator. The ternary operator is a shorthand way of writing an `if-else` statement. It is used to evaluate a condition and return a value based on the result of the condition. The syntax of the ternary operator is as follows:
+Another way to compare conditional statements would be the ternary operator. The ternary operator is a shorthand way of writing an `if-else` statement. It is used to evaluate a condition and return a value based on the result of the condition. Синтаксис тернарного оператора такий:
```javascript
let result = condition ? value1 : value2;
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
index 545705ca00f..6093d807862 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
@@ -1,44 +1,44 @@
---
id: 637f4e0e72c65bc8e73dfe1e
videoId: LGQuIIv2RVA
-title: HTML Foundations Lesson A
+title: Основи HTML. Урок №1
challengeType: 15
dashedName: html-foundations-lesson-a
---
# --description--
-Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags.
+Майже всі елементи на сторінці HTML насправді є простим вмістом у початкових та кінцевих тегах HTML.
-Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `
+
# --assignment--
-Watch Kevin Powell’s Introduction to HTML video
+Перегляньте відео Кевіна Павелла про вступ до HTML.
# --question--
## --text--
-What are HTML tags?
+Що таке теги у HTML?
## --answers--
-HTML tags tell the browser what content an element contains.
+Теги у HTML повідомляють браузеру про вміст елемента.
---
-HTML tags tell the browser when to load its content.
+Теги у HTML повідомляють браузеру коли завантажувати вміст.
---
-HTML tags tell the browser what content the next element contains.
+Теги у HTML повідомляють браузеру про вміст наступного елемента.
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
index cbf924480fc..70496db84ea 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
@@ -1,37 +1,37 @@
---
id: 637f4e1672c65bc8e73dfe1f
-title: HTML Foundations Lesson B
+title: Основи HTML. Урок №2
challengeType: 15
dashedName: html-foundations-lesson-b
---
# --description--
-You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+Елементи можна вважати контейнерами, в яких зберігається вміст. Початкові та кінцеві теги повідомляють браузеру вміст, який містить елемент. Браузер використовує цю інформацію, щоб знати як інтерпретувати та форматувати вміст.
-There are some HTML elements that do not have a closing tag. These elements often look like this: `
` or `![]()
`, but some can also be used without the closing forward slash such as `
` or `![]()
`. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags.
+Деякі елементи HTML не мають кінцевих тегів. Ці елементи часто виглядають так: `
` або `![]()
`, але деякі також можна використовувати без кінцевої скісної риски (наприклад, `
` або `![]()
`). Вони відомі як самозакриваючі теги або порожні елементи, оскільки вони не обгортають жоден вміст. З деякими ви зустрінетесь у наступних завданнях, але здебільшого ви використовуватимете і початковий, і кінцевий теги.
-HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet.
+HTML має великий список стандартних тегів, які можна використовувати для створення будь-яких елементів. Важливо використовувати правильні теги для вмісту. Правильні теги впливають на два аспекти: рейтинг сайтів у пошукових системах і їхня доступність для користувачів, які покладаються на допоміжні технології, щоб користуватися інтернетом (наприклад, читачі екрана).
-Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum.
+Використання правильних елементів для вмісту називається семантичним HTML. Про це ви дізнаєтесь пізніше.
# --question--
## --text--
-Why are self-closing tags like `
` or `![]()
` essential in HTML?
+Чому в HTML важливі самозакриваючі теги (наприклад, `
` чи `![]()
`)?
## --answers--
-They prevent formatting issues in HTML documents.
+Вони запобігають виникненню проблем з форматуванням в документах HTML.
---
-They indicate empty elements and require no closing tag.
+Вони вказують на порожні елементи і не вимагають кінцевого тегу.
---
-They improve website performance by reducing code complexity.
+Вони покращують ефективність вебсайту, зменшуючи складність коду.
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
index 51c84c3d068..9a2ed23182b 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
@@ -1,52 +1,52 @@
---
id: 637f4e1c72c65bc8e73dfe20
-title: HTML Foundations Lesson C
+title: Основи HTML. Урок №3
challengeType: 15
dashedName: html-foundations-lesson-c
---
# --description--
-To demonstrate an HTML boilerplate, you first need an HTML file to work with.
+Щоб продемонструвати шаблонний код HTML, нам треба файл HTML.
-Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`.
+Створіть нову папку на своєму комп’ютері та назвіть її `html-boilerplate`. Створіть новий файл у цій папці та назвіть його `index.html`.
-You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files.
+Мабуть, ви знайомі з різними типами файлів (наприклад, .doc, .pdf чи зображення).
-To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file.
+Щоб комп’ютер знав, що ви хочете створити файл HTML, потрібно додати розширення `.html` до назви файлу, як ви робили при створенні файлу `index.html`.
-It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an `index.html` page when users land on your websites - and not having one will cause big problems.
+Важливо зазначити, що ви назвали свій файл HTML «index». Файл HTML, який міститиме домашню сторінку вебсайту, завжди потрібно називати `index.html`. Причина в тому, що вебсервери за замовчуванням шукатимуть сторінку `index.html`, коли користувачі заходять на ваш сайт. Відсутність сторінки з такою назвою може спричинити проблеми.
-## The DOCTYPE
+## DOCTYPE
-Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply ``.
+Кожна сторінка HTML починається з оголошення doctype. Мета doctype — повідомити браузеру яку версію HTML потрібно використовувати, щоб відтворити документ. Найновішою версією HTML є HTML5, а оголошенням цієї версії є ``.
-The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4:
+Оголошення doctype для старіших версій HTML складніше. Наприклад, оголошення doctype для HTML4:
```html
```
-However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use ``.
+Ви, швидше за все, не будете використовувати старіші версії HTML, тому завжди використовуватимете ``.
-Open the `index.html` file created earlier in your text editor and add `` to the very first line.
+Відкрийте створений раніше файл `index.html` у текстовому редакторі та додайте `` до першого рядка.
# --question--
## --text--
-What is the purpose of the `DOCTYPE` declaration?
+Яка суть оголошення `DOCTYPE`?
## --answers--
-It tells the browser which version of HTML to use to render the document.
+Воно повідомляє браузеру яку версію HTML потрібно використати, щоб відтворити документ.
---
-It tells the browser that this document uses JavaScript.
+Воно повідомляє браузеру, що цей документ використовує JavaScript.
---
-It tells the browser the title of the document.
+Воно повідомляє браузеру заголовок документа.
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
index 895e6f06caa..bb449cfda26 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
@@ -1,17 +1,17 @@
---
id: 637f4e2872c65bc8e73dfe21
-title: HTML Foundations Lesson D
+title: Основи HTML. Урок №4
challengeType: 15
dashedName: html-foundations-lesson-d
---
# --description--
-After you declare the doctype, you need to provide an `` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it.
+Після оголошення doctype потрібно надати елемент ``. Він відомий як кореневий елемент документа, тобто всі інші елементи в документі будуть його нащадками.
-This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document.
+Це буде важливо пізніше, коли ви дізнаєтесь про маніпулювання HTML з JavaScript. Наразі просто знайте, що елемент `html` повинен бути у кожному документі HTML.
-Back in the `index.html` file, let’s add the `` element by typing out its opening and closing tags, like so:
+Повернемось до файлу `index.html`: додайте елемент ``, ввівши початковий та кінцевий теги:
```html
@@ -19,26 +19,26 @@ Back in the `index.html` file, let’s add the `` element by typing out it
```
-## What is the lang attribute?
-`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation.
+## Що таке атрибут lang?
+`lang` вказує мову текстового вмісту в елементі. У першу чергу цей атрибут використовують, щоб покращити доступність вебсторінки. Він дозволяє допоміжним технологіям (наприклад, читачам екрана) адаптуватись відповідно до мови та відтворити правильну вимову.
# --question--
## --text--
-What is the `html` element?
+Що таке елемент `html`?
## --answers--
-It is the root element in the document and tells the browser which version of HTML it should use.
+Це кореневий елемент документа, який повідомляє браузеру яку версію HTML потрібно використовувати.
---
-It is the root element in the document and all other elements should descend from it.
+Це кореневий елемент документа, а всі інші елементи повинні бути його нащадками.
---
-It is the root element in the document and all other elements should come after it.
+Це кореневий елемент документа, а всі інші елементи повинні йти після нього.
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
index 6b23f758ad3..48f2f0a1a55 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
@@ -1,33 +1,33 @@
---
id: 637f4e2f72c65bc8e73dfe22
-title: HTML Foundations Lesson E
+title: Основи HTML. Урок №5
challengeType: 15
dashedName: html-foundations-lesson-e
---
# --description--
-The `` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the ``, you should not use any element that displays content on the webpage.
+В елементі `` розміщується вся важлива метаінформація про вебсторінки, а також все інше, необхідне для правильного відтворення вебсторінок у браузері. Всередині `` не можна використовувати елементи, які показують вміст на сторінці.
-## The Charset Meta Element
-You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: ``.
+## Елемент meta charset
+Ви завжди повинні мати тег `meta` для кодування `charset` в елементі `head`: ``.
-Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser.
+Налаштувати кодування символів надзвичайно важливо, оскільки це гарантує, що вебсторінка правильно показуватиме спеціальні символи різних мов.
-## Title Element
-Another element you should always include in the head of an HTML document is the `title` element:
+## Елемент title
+Ще одним елементом, який завжди повинен бути в голові документа HTML, є елемент `title`:
```html
My First Webpage
```
-The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab.
+Елемент `title` надає вебсторінкам заголовок, який можуть прочитати люди та який показано на вкладці вебсторінки.
-If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open.
+Якщо ви не надасте елемент `title`, заголовком вебсторінки за замовчуванням буде назва файлу. У нашому випадку заголовком би був `index.html`, що не дуже змістовно для користувачів. Через це користувачу було б важко знайти вебсторінку, якщо відкрито багато вкладок.
-There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum.
+У голові документа HTML можна помістити багато інших елементів. Наразі важливо знати про два елементи, які ми розглянули. Пізніше ви дізнаєтесь про більше елементів, які розміщуються в `head`.
-Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `` tag:
+Повернемось до файлу `index.html`: додайте до нього елемент `head` з елементом `meta` `charset`, який містить `title`. Елемент `head` входить до елемента HTML та завжди повинен бути першим елементом після початкового тегу ``:
```html
@@ -45,19 +45,19 @@ Back in `index.html` file, let’s add a `head` element with a `charset` `meta`
## --text--
-What is the purpose of the `head` element?
+Яка суть елемента `head`?
## --answers--
-The `head` element is used to display all elements that are displayed on the webpage.
+Елемент `head` використовують, щоб відтворити всі елементи, які відображаються на вебсторінці.
---
-The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements.
+Елемент `head` використовують, щоб відтворити важливу інформацію про вебсторінки за допомогою елементів `meta`.
---
-The `head` element is used to display the header content on top of the webpage.
+Елемент `head` використовують, щоб відтворити вміст заголовка у верхній частині вебсторінки.
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
index bc0d7262f1d..432eb7f9c20 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
@@ -1,46 +1,46 @@
---
id: 637f4e3672c65bc8e73dfe23
videoId: V8UAEoOvqFg
-title: HTML Foundations Lesson F
+title: Основи HTML. Урок №6
challengeType: 15
dashedName: html-foundations-lesson-f
---
# --description--
-The final element needed to complete the HTML boilerplate is the `` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on.
+Останній елемент, необхідний для шаблонного коду HTML — елемент ``. У ньому розміщується весь вміст, який побачать користувачі: текст, зображення, посилання, списки тощо.
-To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so:
+Щоб закінчити шаблонний код, додайте елемент `body` до файлу `index.html`. Елемент `body` завжди розташований в елементі `html` та завжди після елемента `head`:
# --assignment--
-Watch and follow along to Kevin Powell’s brilliant Building your first web page video above.
+Перегляньте відео Кевіна Павелла про побудову першої вебсторінки (розміщене вище).
---
-Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory.
+Потренуйте пам’ять, видаливши весь вміст файлу `index.html` та спробуйте написати шаблонний код ще раз. Не хвилюйтесь, якщо перші рази вам потрібно переглянути матеріал. Продовжуйте, поки не зможете написати код з пам’яті.
---
-Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML.
+Запустіть свій шаблонний код через [валідатор HTML](https://www.freeformatter.com/html-validator.html). Валідатори гарантують, що розмітка є правильною. Це чудові інструменти для навчання, оскільки вони повідомляють про синтаксичні помилки, які ви можете час від часу допускати, навіть не здогадуючись про них (наприклад, відсутність кінцевих тегів або додавання зайвих пробілів).
# --question--
## --text--
-What is the purpose of the `body` element?
+Яка суть елемента `body`?
## --answers--
-This is where all important information about the webpage is displayed such as the `title` and `meta` tags.
+Тут розміщена вся важлива інформація про вебсторінку (наприклад, теги `title` та `meta`).
---
-This is where you tell the browser how to render the webpage correctly.
+Тут вказується браузеру, як правильно відтворити вебсторінку.
---
-This is where all content will be displayed on the page such images, text, and links.
+Тут розміщений весь вміст, який буде показано (наприклад, зображення, текст та посилання).
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
index 5cfe098a523..71b6e958a56 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
@@ -1,31 +1,31 @@
---
id: 6376327e2724a688c04636e3
-title: HTML Foundations Lesson G
+title: Основи HTML. Урок №7
challengeType: 15
dashedName: html-foundations-lesson-g
---
# --description--
-HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!
+HTML та CSS — це дві мови, які працюють разом, щоб створити все, що ви бачите в інтернеті. HTML — це необроблені дані, на яких побудована вебсторінка. Весь текст, посилання, картки, списки та кнопки створюються в HTML. CSS надає стилю цим звичайним елементам. HTML розміщує інформацію на вебсторінці, а CSS робить її красивою, надаючи кольору та змінюючи шрифт.
# --question--
## --text--
-What are the primary responsibilities of HTML and CSS in creating a webpage?
+Які основні обов’язки виконують HTML та CSS для створення вебсторінки?
## --answers--
-HTML structures the content, while CSS styles the elements.
+HTML структурує вміст, а CSS стилізує елементи.
---
-HTML creates the visual design, while CSS organizes the content.
+HTML створює візуальний дизайн, а CSS організовує вміст.
---
-CSS manages the functionality, while HTML controls the layout.
+CSS контролює функціоналом, а HTML — макетом.
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
index 6983034f3ad..b079cd8721f 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
@@ -1,31 +1,31 @@
---
id: 637633162724a688c04636e4
-title: HTML Foundations Lesson H
+title: Основи HTML. Урок №8
challengeType: 15
dashedName: html-foundations-lesson-h
---
# --description--
-Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content.
+Багато ресурсів продовжують називати HTML та CSS мовами програмування, але, якщо розібратися з технічної точки зору, це не зовсім правильно. Причина в тому, що їх використовують лише для представлення інформації. Їх не використовують для створення логіки програми. JavaScript, який ви вивчите в наступному розділі, є мовою програмування, оскільки його використовують для того, щоб вебсторінки виконували певні дії. Однак багато чого можна зробити, використовуючи лише HTML та CSS, тому вони обов’язково знадобляться. Наступні уроки нашої навчальної програми зосереджені на інструментах, які необхідно осягнути перед тим, як перейти до JavaScript.
# --question--
## --text--
-Why are HTML and CSS not typically classified as programming languages?
+Чому HTML та CSS зазвичай не класифікуються як мови програмування?
## --answers--
-They lack the ability to create webpages.
+Їм не вистачає здатності створювати вебсторінки.
---
-They focus on presenting information rather than programming logic.
+Вони зосереджуються на відтворенні інформації, а не логіці програмування.
---
-They are outdated technologies.
+Це застарілі технології.
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
index f771234359b..ed5100ecaa9 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
@@ -17,19 +17,19 @@ There are many operators in JavaScript. Every operator has a corresponding prece
Here’s an extract from the precedence table (you don’t need to remember this, but note that unary operators are higher than corresponding binary ones):
-| Precedence | Name | Sign |
-| ---------- | -------------- | ---- |
-| ... | ... | ... |
-| 14 | unary plus | + |
-| 14 | unary negation | - |
-| 13 | exponentiation | ** |
-| 12 | multiplication | * |
-| 12 | division | / |
-| 11 | addition | + |
-| 11 | subtraction | - |
-| ... | ... | ... |
-| 2 | assignment | = |
-| ... | ... | ... |
+| Пріоритет | Назва | Знак |
+| --------- | --------------------- | ---- |
+| ... | ... | ... |
+| 14 | унарний плюс | + |
+| 14 | унарний мінус | - |
+| 13 | піднесення до степеня | ** |
+| 12 | множення | * |
+| 12 | ділення | / |
+| 11 | додавання | + |
+| 11 | віднімання | - |
+| ... | ... | ... |
+| 2 | призначення | = |
+| ... | ... | ... |
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
index ca0dd6762c0..f7898b75f5e 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
@@ -1,55 +1,55 @@
---
id: 637f704072c65bc8e73dfe36
videoId: tsEQgGjSmkM
-title: Links and Images Lesson A
+title: Посилання та зображення. Урок №1
challengeType: 15
dashedName: links-and-images-lesson-a
---
# --description--
-To get some practice using links and images throughout this lesson you need an HTML project to work with.
+Щоб попрактикуватись з посиланнями та зображеннями, вам потрібний проєкт HTML.
-- Create a new directory named `odin-links-and-images`.
+- Створіть новий каталог під назвою `odin-links-and-images`.
-- Within that directory, create a new file named `index.html`.
+- У цьому каталозі створіть новий файл під назвою `index.html`.
-- Fill in the usual HTML boilerplate.
+- Заповніть звичайний шаблонний код HTML.
-- Finally, add the following `h1` to the `body`: `![]()
` element. Unlike the other elements you have encountered, the `![]()
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+Щоб відтворити зображення у HTML, використовують елемент `![]()
`. На відміну від інших елементів, які ми вже вивчили, елемент `![]()
` є самозакривним. Порожнім самозакривним елементам HTML не потрібний кінцевий тег.
-Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+Замість того, щоб обгортати вміст початковим та кінцевим тегами, зображення вкладається за допомогою атрибута `src`, який повідомляє браузеру, де знаходиться файл зображення. Атрибут `src` працює майже так само, як атрибут `href` для тегів посилання. Він може вкласти зображення за допомогою як абсолютного, так і відносного шляхів.
-For example, using an absolute path you can display an image located on The Odin Project site:
+Наприклад, використовуючи абсолютний шлях, можна відтворити зображення з сайту The Odin Project:
-
+
-To use images that you have on your own websites, you can use a relative path.
+Щоб використати зображення з власного вебсайту, можна використати відносний шлях.
-- Create a new directory named `images` within the `odin-links-and-images` project.
+- Створіть новий каталог під назвою `images` в межах проєкту `odin-links-and-images`.
-- Next, download this image and move it into the `images` directory you just created.
+- Потім завантажте це зображення та перемістіть його у щойно створений каталог `images`.
-- Rename the image to `dog.jpg`.
+- Перейменуйте зображення на `dog.jpg`.
-Finally add the image to the `index.html` file:
+Наприкінці додайте зображення до файлу `index.html`:
```html
@@ -39,47 +39,47 @@ Finally add the image to the `index.html` file:
```
-Save the `index.html` file and open it in a browser to view Charles in all his glory.
+Збережіть файл `index.html` та відкрийте його у браузері, щоб подивитись на Чарльза у всій його красі.
-## Parent Directories
+## Батьківські каталоги
-What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+Що робити, якщо ви хочете використати зображення собаки на сторінці `about`? Перш ніж отримати доступ до каталогу зображень, вам потрібно піднятися на один рівень вище в каталозі сторінок до батьківського каталогу.
-To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+Щоб перейти до батьківського каталогу, вам потрібно використати дві крапки у відносному шляху, ось так: `../`. Розглянемо це в дії: в межах `body` файлу `about.html` додайте таке зображення під заголовком, який ви додали раніше:
```html
```
-To break this down:
+Розіб’ємо на частини:
-- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+- спочатку перейдіть до батьківського каталогу сторінок, тобто `odin-links-and-images`;
-- Then, from the parent directory, you can go into the `images` directory.
+- потім ви можете перейти до каталогу `images` з батьківського каталогу;
-- Finally, you can access the `dog.jpg` file.
+- нарешті ви можете отримати доступ до файлу `dog.jpg`.
-Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+Використаємо метафору: `../` у шляху нагадує вихід з кімнати до коридору, щоб перейти до іншої кімнати.
-## `Alt` attribute
+## Атрибут `alt`
-Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+Окрім атрибута `src`, кожному елементу зображення потрібний атрибут `alt` (alternative text).
-The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+Атрибут `alt` використовують, щоб описати зображення. Він буде використаний на місці зображення, яке не завантажується. Його також використовують читачі екрана, щоб описати зображення для користувачів з порушенням зору.
-This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
-
+Ось так виглядає логотип The Odin Project з атрибутом `alt`:
+
# --assignment--
-Watch Kevin Powell’s HTML Images Video above.
+Перегляньте відео Кевіна Павелла про зображення у HTML (розміщене вище).
# --question--
## --text--
-Which tag is used to display an image?
+За допомогою якого тега відтворюють зображення?
## --answers--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
index 5ea069897aa..7bcc72e3d7b 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
@@ -1,31 +1,31 @@
---
id: 637f701c72c65bc8e73dfe31
-title: Links and Images Lesson F
+title: Посилання та зображення. Урок №6
challengeType: 15
dashedName: links-and-images-lesson-f
---
# --description--
-Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+Вебсайти були б нудними, якби показувати лише текст. На щастя, HTML надає широкий вибір елементів для відтворення різних видів медіа. Найчастіше використовують елемент зображення.
-To display an image in HTML you use the `![]()
` element. Unlike the other elements you have encountered, the `![]()
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+Щоб відтворити зображення у HTML, використовують елемент `![]()
`. На відміну від інших елементів, які ми вже вивчили, елемент `![]()
` є самозакривним. Порожнім самозакривним елементам HTML не потрібний кінцевий тег.
-Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+Замість того, щоб обгортати вміст початковим та кінцевим тегами, зображення вкладається за допомогою атрибута `src`, який повідомляє браузеру, де знаходиться файл зображення. Атрибут `src` працює майже так само, як атрибут `href` для тегів посилання. Він може вкласти зображення за допомогою як абсолютного, так і відносного шляхів.
-For example, using an absolute path you can display an image located on The Odin Project site:
+Наприклад, використовуючи абсолютний шлях, можна відтворити зображення з сайту The Odin Project:
-
+
-To use images that you have on your own websites, you can use a relative path.
+Щоб використати зображення з власного вебсайту, можна використати відносний шлях.
-- Create a new directory named `images` within the `odin-links-and-images` project.
+- Створіть новий каталог під назвою `images` в межах проєкту `odin-links-and-images`.
-- Next, download this image and move it into the images directory you just created.
+- Потім завантажте це зображення та перемістіть його у щойно створений каталог зображень.
-- Rename the image to `dog.jpg`.
+- Перейменуйте зображення на `dog.jpg`.
-Finally add the image to the `index.html` file:
+Наприкінці додайте зображення до файлу `index.html`:
```html
@@ -38,55 +38,55 @@ Finally add the image to the `index.html` file:
```
-Save the `index.html` file and open it in a browser to view Charles in all his glory.
+Збережіть файл `index.html` та відкрийте його у браузері, щоб подивитись на Чарльза у всій його красі.
-## Parent Directories
+## Батьківські каталоги
-What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+Що робити, якщо ви хочете використати зображення собаки на сторінці `about`? Перш ніж отримати доступ до каталогу зображень, вам потрібно піднятися на один рівень вище в каталозі сторінок до батьківського каталогу.
-To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+Щоб перейти до батьківського каталогу, вам потрібно використати дві крапки у відносному шляху, ось так: `../`. Розглянемо це в дії: в межах `body` файлу `about.html` додайте таке зображення під заголовком, який ви додали раніше:
```html
```
-To break this down:
+Розіб’ємо на частини:
-- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+- спочатку перейдіть до батьківського каталогу сторінок, тобто `odin-links-and-images`;
-- Then, from the parent directory, you can go into the `images` directory.
+- потім ви можете перейти до каталогу `images` з батьківського каталогу;
-- Finally, you can access the `dog.jpg` file.
+- нарешті ви можете отримати доступ до файлу `dog.jpg`.
-Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+Використаємо метафору: `../` у шляху нагадує вихід з кімнати до коридору, щоб перейти до іншої кімнати.
-## Alt attribute
+## Атрибут alt
-Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+Окрім атрибута `src`, кожному елементу зображення потрібний атрибут `alt` (alternative text).
-The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+Атрибут `alt` використовують, щоб описати зображення. Він буде використаний на місці зображення, яке не завантажується. Його також використовують читачі екрана, щоб описати зображення для користувачів з порушенням зору.
-This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
-
+Ось так виглядає логотип The Odin Project з атрибутом alt:
+
# --question--
## --text--
-What two attributes do images always need to have?
+Які атрибути повинні мати зображення?
## --answers--
-`href` and `alt`
+`href` та `alt`
---
-`name` and `href`
+`name` та `href`
---
-`alt` and `src`
+`alt` та `src`
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
index 71bdf4add9b..42c4cc0450d 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
@@ -1,31 +1,31 @@
---
id: 637f701572c65bc8e73dfe30
-title: Links and Images Lesson G
+title: Посилання та зображення. Урок №7
challengeType: 15
dashedName: links-and-images-lesson-g
---
# --description--
-Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+Вебсайти були б нудними, якби показувати лише текст. На щастя, HTML надає широкий вибір елементів для відтворення різних видів медіа. Найчастіше використовують елемент зображення.
-To display an image in HTML you use the `![]()
` element. Unlike the other elements you have encountered, the `![]()
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+Щоб відтворити зображення у HTML, використовують елемент `![]()
`. На відміну від інших елементів, які ми вже вивчили, елемент `![]()
` є самозакривним. Порожнім самозакривним елементам HTML не потрібний кінцевий тег.
-Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+Замість того, щоб обгортати вміст початковим та кінцевим тегами, зображення вкладається за допомогою атрибута `src`, який повідомляє браузеру, де знаходиться файл зображення. Атрибут `src` працює майже так само, як атрибут `href` для тегів посилання. Він може вкласти зображення за допомогою як абсолютного, так і відносного шляхів.
-For example, using an absolute path you can display an image located on The Odin Project site:
+Наприклад, використовуючи абсолютний шлях, можна відтворити зображення з сайту The Odin Project:
-
+
-To use images that you have on your own websites, you can use a relative path.
+Щоб використати зображення з власного вебсайту, можна використати відносний шлях.
-- Create a new directory named `images` within the `odin-links-and-images` project.
+- Створіть новий каталог під назвою `images` в межах проєкту `odin-links-and-images`.
-- Next, download this image and move it into the images directory you just created.
+- Потім завантажте це зображення та перемістіть його у щойно створений каталог зображень.
-- Rename the image to `dog.jpg`.
+- Перейменуйте зображення на `dog.jpg`.
-Finally add the image to the `index.html` file:
+Наприкінці додайте зображення до файлу `index.html`:
```html
@@ -38,43 +38,43 @@ Finally add the image to the `index.html` file:
```
-Save the `index.html` file and open it in a browser to view Charles in all his glory.
+Збережіть файл `index.html` та відкрийте його у браузері, щоб подивитись на Чарльза у всій його красі.
-## Parent Directories
+## Батьківські каталоги
-What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+Що робити, якщо ви хочете використати зображення собаки на сторінці `about`? Перш ніж отримати доступ до каталогу зображень, вам потрібно піднятися на один рівень вище в каталозі сторінок до батьківського каталогу.
-To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+Щоб перейти до батьківського каталогу, вам потрібно використати дві крапки у відносному шляху, ось так: `../`. Розглянемо це в дії: в межах `body` файлу `about.html` додайте таке зображення під заголовком, який ви додали раніше:
```html
```
-To break this down:
+Розіб’ємо на частини:
-- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+- спочатку перейдіть до батьківського каталогу сторінок, тобто `odin-links-and-images`;
-- Then, from the parent directory, you can go into the `images` directory.
+- потім ви можете перейти до каталогу `images` з батьківського каталогу;
-- Finally, you can access the `dog.jpg` file.
+- нарешті ви можете отримати доступ до файлу `dog.jpg`.
-Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+Використаємо метафору: `../` у шляху нагадує вихід з кімнати до коридору, щоб перейти до іншої кімнати.
-## Alt attribute
+## Атрибут alt
-Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+Окрім атрибута `src`, кожному елементу зображення потрібний атрибут `alt` (alternative text).
-The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+Атрибут `alt` використовують, щоб описати зображення. Він буде використаний на місці зображення, яке не завантажується. Його також використовують читачі екрана, щоб описати зображення для користувачів з порушенням зору.
-This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
-
+Ось так виглядає логотип The Odin Project з атрибутом alt:
+
# --question--
## --text--
-How do you access a parent directory in a filepath?
+Як отримати доступ до батьківського каталогу у шляху до файлу?
## --answers--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
index 2f78b640e8f..8b4ddec910b 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
@@ -1,31 +1,31 @@
---
id: 637f700b72c65bc8e73dfe2f
-title: Links and Images Lesson H
+title: Посилання та зображення. Урок №8
challengeType: 15
dashedName: links-and-images-lesson-h
---
# --description--
-Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+Вебсайти були б нудними, якби показувати лише текст. На щастя, HTML надає широкий вибір елементів для відтворення різних видів медіа. Найчастіше використовують елемент зображення.
-To display an image in HTML you use the `![]()
` element. Unlike the other elements you have encountered, the `![]()
` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+Щоб відтворити зображення у HTML, використовують елемент `![]()
`. На відміну від інших елементів, які ми вже вивчили, елемент `![]()
` є самозакривним. Порожнім самозакривним елементам HTML не потрібний кінцевий тег.
-Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+Замість того, щоб обгортати вміст початковим та кінцевим тегами, зображення вкладається за допомогою атрибута `src`, який повідомляє браузеру, де знаходиться файл зображення. Атрибут `src` працює майже так само, як атрибут `href` для тегів посилання. Він може вкласти зображення за допомогою як абсолютного, так і відносного шляхів.
-For example, using an absolute path you can display an image located on The Odin Project site:
+Наприклад, використовуючи абсолютний шлях, можна відтворити зображення з сайту The Odin Project:
-
+
-To use images that you have on your own websites, you can use a relative path.
+Щоб використати зображення з власного вебсайту, можна використати відносний шлях.
-- Create a new directory named `images` within the `odin-links-and-images` project.
+- Створіть новий каталог під назвою `images` в межах проєкту `odin-links-and-images`.
-- Next, download this image and move it into the images directory you just created.
+- Потім завантажте це зображення та перемістіть його у щойно створений каталог зображень.
-- Rename the image to `dog.jpg`.
+- Перейменуйте зображення на `dog.jpg`.
-Finally add the image to the `index.html` file:
+Наприкінці додайте зображення до файлу `index.html`:
```html
@@ -38,59 +38,59 @@ Finally add the image to the `index.html` file:
```
-Save the `index.html` file and open it in a browser to view Charles in all his glory.
+Збережіть файл `index.html` та відкрийте його у браузері, щоб подивитись на Чарльза у всій його красі.
-## Parent Directories
+## Батьківські каталоги
-What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+Що робити, якщо ви хочете використати зображення собаки на сторінці `about`? Перш ніж отримати доступ до каталогу зображень, вам потрібно піднятися на один рівень вище в каталозі сторінок до батьківського каталогу.
-To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+Щоб перейти до батьківського каталогу, вам потрібно використати дві крапки у відносному шляху, ось так: `../`. Розглянемо це в дії: в межах `body` файлу `about.html` додайте таке зображення під заголовком, який ви додали раніше:
```html
```
-To break this down:
+Розіб’ємо на частини:
-- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+- спочатку перейдіть до батьківського каталогу сторінок, тобто `odin-links-and-images`;
-- Then, from the parent directory, you can go into the `images` directory.
+- потім ви можете перейти до каталогу `images` з батьківського каталогу;
-- Finally, you can access the `dog.jpg` file.
+- нарешті ви можете отримати доступ до файлу `dog.jpg`.
-Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+Використаємо метафору: `../` у шляху нагадує вихід з кімнати до коридору, щоб перейти до іншої кімнати.
-## Alt attribute
+## Атрибут alt
-Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+Окрім атрибута `src`, кожному елементу зображення потрібний атрибут `alt` (alternative text).
-The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+Атрибут `alt` використовують, щоб описати зображення. Він буде використаний на місці зображення, яке не завантажується. Його також використовують читачі екрана, щоб описати зображення для користувачів з порушенням зору.
-This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
-
+Ось так виглядає логотип The Odin Project з атрибутом alt:
+
# --assignment--
-Read about the four main image formats that can be used on the web.
+Прочитайте про чотири основні формати зображень, які можна використовувати у вебмережі (англійською мовою).
# --question--
## --text--
-What are the four main image formats that you can use for images on the web?
+Які чотири основні формати зображення можна використовувати у вебмережі?
## --answers--
-MOV, GIF, PNG, and SVG.
+MOV, GIF, PNG та SVG.
---
-JPG, PNG, GIF, and SVG.
+JPG, PNG, GIF та SVG.
---
-JPG, PDF, SVG, and GIF.
+JPG, PDF, SVG та GIF.
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
index a5b1babdd77..b95ba785124 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
@@ -1,43 +1,43 @@
---
id: 64a5529c02815a7d323aab88
-title: The Box Model Lesson A
+title: Блокова модель. Урок №1
challengeType: 15
dashedName: the-box-model-lesson-a
---
# --description--
-Being able to inspect and debug your HTML and CSS is critical to frontend development. This lesson will take us through the Chrome Dev Tools, which allow you to see detailed information about your elements and CSS rules, as well as assist you in finding and fixing problems in your code.
+Для фронтенду важливо вміти оглядати та налагоджувати HTML й CSS. У цьому уроці ми пройдемось по інструментах веброзробника Chrome, які дозволяють отримати детальну інформацію про елементи та правила CSS, а також допомагають зі знаходженням та налагодженням помилок у коді.
-To open up the inspector, you can right-click on any element of a webpage and click “Inspect” or press F12. Go ahead and do that right now to see the HTML and CSS used on this page.
+Щоб відкрити інспектора, натисніть правою кнопкою миші на будь-якому елементі вебсторінки та оберіть «Перевірити» або натисніть F12. Зробіть так прямо зараз, щоб дізнатись застосовані до цієї сторінки HTML та CSS.
-Don’t get overwhelmed with all the tools you’re now seeing! For this lesson, we want to focus on the Elements and Styles panes.
+Не лякайтесь всіх побачених інструментів! У цьому уроці ми фокусуватимемось на панелях «Елементи» та «Стилі».
# --assignment--
-Play around with Chrome Dev Tools and see if you can answer the following question.
+Розгляньте інструменти веброзробника Chrome та дізнайтесь, чи зможете відповісти на запитання.
# --question--
## --text--
-Which panes should you focus on in the Chrome Dev Tools for inspecting and debugging HTML and CSS?
+На яких панелях в інструментах веброзробника Chrome варто фокусуватись при огляді та налагодженні HTML й CSS?
## --answers--
-Console and Network
+«Консоль» та «Мережа»
---
-Elements and Styles
+«Елементи» та «Стилі»
---
-Sources and Application
+«Джерела» та «Додаток»
---
-Performance and Memory
+«Ефективність» та «Пам’ять»
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
index 802fed2ac2f..8a9e8c0d2db 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
@@ -1,41 +1,41 @@
---
id: 64a553ed02815a7d323aab89
-title: The Box Model Lesson B
+title: Блокова модель. Урок №2
challengeType: 15
dashedName: the-box-model-lesson-b
---
# --description--
-In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+На панелі «Елементи» можна побачити повну структуру HTML. Ви можете натиснути на будь-який елемент панелі, щоб обрати певний елемент. Або ж ви можете натиснути на голубий значок зліва (показано нижче) та навести на будь-який елемент сторінки.
-
+
-When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on the The Odin Project homepage, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+Коли елемент обрано, вкладка «Стилі» покаже всі застосовані стилі, а також усі змінені стилі (у вигляді закресленого тексту). Наприклад, якщо використати інспектора та натиснути на заголовок «Your Career in Web Development Starts Here» домашньої сторінки проєкту Odin, справа ви побачите всі стилі, які наразі застосовані до елемента:
-
+
# --question--
## --text--
-When inspecting an element in the Chrome Dev Tools, if a style property is shown with a strikethrough, what does it indicate?
+Припустимо, ви оглядаєте елемент в інструментах веброзробника Chrome. Що означає закреслена властивість стилю?
## --answers--
-The style property is currently disabled and not applied to the element.
+Наразі властивість стилю пошкоджена та не застосовується до елемента.
---
-The style property is overridden by a more specific CSS rule.
+Властивість стилю замінена специфічнішим правилом CSS.
---
-The style property is deprecated and should not be used.
+Властивість стилю нерекомендована та її бажано не використовувати.
---
-The style property is experimental and may not be supported by all browsers
+Властивість стилю експериментальна та може підтримуватись не всіма браузерами.
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
index 76ff0d4c362..558502cda47 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
@@ -1,44 +1,44 @@
---
id: 64a5551d02815a7d323aab8a
-title: The Box Model Lesson C
+title: Блокова модель. Урок №3
challengeType: 15
dashedName: the-box-model-lesson-c
---
# --description--
-In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+На панелі «Елементи» можна побачити повну структуру HTML. Ви можете натиснути на будь-який елемент панелі, щоб обрати певний елемент. Або ж ви можете натиснути на голубий значок зліва (показано нижче) та навести на будь-який елемент сторінки.
-
+
-When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on the The Odin Project homepage, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+Коли елемент обрано, вкладка «Стилі» покаже всі застосовані стилі, а також усі змінені стилі (у вигляді закресленого тексту). Наприклад, якщо використати інспектора та натиснути на заголовок «Your Career in Web Development Starts Here» домашньої сторінки проєкту Odin, справа ви побачите всі стилі, які наразі застосовані до елемента:
-
+
# --assignment--
-Play around with Chrome Dev Tools and see if you can answer the following question.
+Розгляньте інструменти веброзробника Chrome та дізнайтесь, чи зможете відповісти на запитання.
# --question--
## --text--
-Which feature in the Elements pane allows you to select any element on a webpage by hovering over it?
+Яка функція панелі елементів дозволяє вибрати будь-який елемент сторінки, навівши на нього?
## --answers--
-Blue-highlighted icon
+Голубий значок
---
-Styles tab
+Вкладка «Стилі»
---
-Inspector tab
+Вкладка «Інспектор»
---
-HTML structure view
+Вигляд структури HTML
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
index c22f53661be..d304ca86bc9 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
@@ -1,43 +1,43 @@
---
id: 64a55a6102815a7d323aab8b
-title: The Box Model Lesson D
+title: Блокова модель. Урок №4
challengeType: 15
dashedName: the-box-model-lesson-d
---
# --description--
-In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+На панелі «Елементи» можна побачити повну структуру HTML. Ви можете натиснути на будь-який елемент панелі, щоб обрати певний елемент. Або ж ви можете натиснути на голубий значок зліва (показано нижче) та навести на будь-який елемент сторінки.
-
+
-When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on the The Odin Project homepage, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+Коли елемент обрано, вкладка «Стилі» покаже всі застосовані стилі, а також усі змінені стилі (у вигляді закресленого тексту). Наприклад, якщо використати інспектора та натиснути на заголовок «Your Career in Web Development Starts Here» домашньої сторінки проєкту Odin, справа ви побачите всі стилі, які наразі застосовані до елемента:
-
+
# --assignment--
-Play around with Chrome Dev Tools and see if you can answer the following question.
+Розгляньте інструменти веброзробника Chrome та дізнайтесь, чи зможете відповісти на запитання.
# --question--
## --text--
-In the Styles pane, what information can you view about an element when it is selected?
+Яку інформацію щодо наведеного елемента можна переглянути на панелі «Стилі»?
## --answers--
-HTML structure and CSS rules
+Структуру HTML та правила CSS
---
-Styles tab
+Вкладку «Стилі»
---
-Inspector tab
+Вкладку «Інспектор»
---
-Applied styles and overwritten styles.
+Застосовані та змінені стилі
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
index e2b9e44febc..43360ef1bb3 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
@@ -1,36 +1,36 @@
---
id: 64a669f77a7d00f97013ed0c
-title: The Box Model Lesson E
+title: Блокова модель. Урок №5
challengeType: 15
dashedName: the-box-model-lesson-e
---
# --description--
-Now that you understand the basic syntax of HTML and CSS, we’re going to get serious. The most important skills you need to master with CSS are positioning and layout. Changing fonts and colors is a crucial skill, but being able to put things exactly where you want them on a webpage is even more crucial. After all, how many webpages can you find where absolutely every element is just stacked one on top of another?
+Тепер ви розумієте базовий синтаксис HTML та CSS, тому перейдемо до серйознішого. Найважливіші навички CSS, які потрібно опанувати — це позиціювання та макет сторінки. Вміти змінювати шрифт та колір теж важливо, але вміти розміщувати елементи на вебсторінці важливіше. Зрештою, на скількох вебсторінках всі елементи наліплені один на одного?
-Learning to position elements on a webpage is not that difficult once you understand just a few key concepts. Unfortunately, many learners race through learning HTML and CSS to get to JavaScript and end up missing these fundamental concepts. This leads to frustration, pain, (and funny gifs) because all the JavaScript skills in the world are meaningless if you can’t stick your elements on the page where you need them to be. So with that in mind, let’s get started.
+Навчитись розміщувати елементи на вебсторінці не так вже і важко, якщо розібратись з ключовими поняттями. На жаль, багато учнів проскакують вивчення HTML та CSS, переходять до JavaScript та не знають цих основних понять. Це призводить до розчарування, болю (та смішних гіфок), оскільки знання JavaScript стає непотрібним, якщо ви не можете розмістити елементи на потрібному місці. Маючи це на увазі, розпочнемо.
# --question--
## --text--
-Why is it important to have a solid understanding of CSS in web development?
+Чому у веброзробці важливо розуміти CSS?
## --answers--
-It allows you to create complex animations and interactive effects.
+CSS дозволяє створити складні анімації та інтерактивні ефекти.
---
-It allows you to create complex animations and interactive effects.
+CSS дозволяє створити складні анімації та інтерактивні ефекти.
---
-It helps in optimizing database queries for improved performance.
+CSS допомагає оптимізувати запити бази даних для покращення роботи.
---
-It enables you to style and design webpages with precision and control.
+CSS дозволяє точно та контрольовано стилізувати і проєктувати вебсторінки.
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
index 4cbbaec8343..25da98856dc 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
@@ -1,14 +1,14 @@
---
id: 64a66c917a7d00f97013ed0d
-title: The Box Model Lesson F
+title: Блокова модель. Урок №6
challengeType: 15
dashedName: the-box-model-lesson-f
---
# --description--
-The first important concept that you need to understand to be successful in CSS is the box model. It isn’t complicated, but skipping over it now will cause you much frustration down the line.
+Щоб бути успішним у CSS, для початку потрібно знати про блокову модель. Це не складно, але якщо пропустити це поняття — пізніше буде складніше.
-Every single thing on a webpage is a rectangular box. These boxes can have other boxes in them and can sit alongside one another. You can get a rough idea of how this works by sticking a border on every item on the page like this:
+Будь-що на вебсторінці є прямокутним блоком. Ці блоки можуть містити інші блоки, а також можуть знаходитись поруч. Щоб краще розібратись з цим, додайте кордон до кожного елемента вебсторінки:
```css
* {
@@ -18,29 +18,29 @@ Every single thing on a webpage is a rectangular box. These boxes can have other
# --assignment--
-Add a border to every element on the page and see how the boxes are laid out.
+Додайте кордон до кожного елемента на сторінці та подивіться, як розміщені блоки.
# --question--
## --text--
-What is the fundamental concept in CSS that helps you understand the structure of elements as rectangular boxes?
+Яке основне поняття у CSS дозволяє зрозуміти структуру елементів як прямокутних блоків?
## --answers--
-Box-sizing
+Розмір блоку
---
-Box-shadow
+Тінь блоку
---
-Box model
+Блокова модель
---
-Border-box
+Кордон блоку
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
index ab042ee7f3b..a6abd4dbed8 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
@@ -1,50 +1,50 @@
---
id: 64a6702e7a7d00f97013ed0e
-title: The Box Model Lesson G
+title: Блокова модель. Урок №7
challengeType: 15
dashedName: the-box-model-lesson-g
---
# --description--
-
+
-OK, so there might be some circles in the above image… but when it comes to layout, they fit together like rectangular boxes and not circles. In the end, laying out a webpage and positioning all its elements is deciding how you are going to nest and stack these boxes.
+На зображені вище є пару кружечків… Але коли мова йде про макети, все сходиться як прямокутні блоки, а не кружечки. Зрештою, розміщення всіх елементів на вебсторінці вирішує, як ви вкладатимете та складатимете ці блоки.
-The only real complication here is that there are many ways to manipulate the size of these boxes, and the space between them, using padding, margin, and border. But to sum it up briefly:
+Єдине ускладнення в тому, що існує багато способів маніпулювати розмірами блоків та простором між ними за допомогою відступів, полів і кордонів. Якщо коротко підсумувати:
-- `padding` increases the space between the border of a box and the content of the box.
-- `margin` increases the space between the borders of a box and the borders of adjacent boxes.
-- `border` adds space (even if it’s only a pixel or two) between the margin and the padding.
+- `padding` (відступ) збільшує простір між кордоном та вмістом блоку;
+- `margin` (поле) збільшує простір між кордонами суміжних блоків;
+- `border` (кордон) додає простір між відступом та полем, навіть якщо це лише один піксель.
-Be sure to study the diagrams carefully.
+Обов’язково розглядайте схеми.
-
+
# --assignment--
-Add a border to every element on the page and see how the boxes are laid out.
+Додайте кордон до кожного елемента на сторінці та подивіться, як розміщені блоки.
# --question--
## --text--
-From inside to outside, what is the order of box-model properties?
+Який порядок властивостей блокової моделі від середини до зовні?
## --answers--
-Content, Margin, Padding, Border
+Вміст, поле, відступ, кордон
---
-Margin, Padding, Content, Border
+Поле, відступ, вміст, кордон
---
-Content, Padding, Border, Margin
+Вміст, відступ, кордон, поле
---
-Padding, Content, Border, Margin
+Відступ, вміст, кордон, поле
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
index 5423c67fb5c..0be9da8d0e4 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
@@ -1,35 +1,35 @@
---
id: 64a674937a7d00f97013ed0f
videoId: rIO5326FgPE
-title: The Box Model Lesson H
+title: Блокова модель. Урок №8
challengeType: 15
dashedName: the-box-model-lesson-h
---
# --description--
-Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with this lesson from MDN. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+Оскільки поняття блокової моделі є основним, розглянемо його детальніше у цьому уроці від MDN (англійською мовою). Він охоплює той самий матеріал, що й відео вище та ознайомить вас з вбудованими блоками, які ми розглянемо в наступному уроці. Зверніть увагу на приклади та приділіть деякий час, щоб поекспериментувати з редактором у браузері!
# --question--
## --text--
-What does the box-sizing CSS property do?
+Що робить властивість box-sizing у CSS?
## --answers--
-It determines the order of the box-model properties.
+Визначає порядок властивостей блокової моделі.
---
-It specifies the position of an element on the webpage.
+Вказує розташування елемента на вебсторінці.
---
-It controls how the total width and height of an element are calculated.
+Контролює обчислення ширини та висоти елемента.
---
-It sets the background color of an element.
+Налаштовує колір фону елемента.
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
index 0f70fbcec65..959fe5ce5a6 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
@@ -1,35 +1,35 @@
---
id: 64a6749a7a7d00f97013ed10
videoId: rIO5326FgPE
-title: The Box Model Lesson I
+title: Блокова модель. Урок №9
challengeType: 15
dashedName: the-box-model-lesson-i
---
# --description--
-Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with this lesson from MDN. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+Оскільки поняття блокової моделі є основним, розглянемо його детальніше у цьому уроці від MDN (англійською мовою). Він охоплює той самий матеріал, що й відео вище та ознайомить вас з вбудованими блоками, які ми розглянемо в наступному уроці. Зверніть увагу на приклади та приділіть деякий час, щоб поекспериментувати з редактором у браузері!
# --question--
## --text--
-What is the difference between the standard and alternative box model?
+Яка різниця між стандартною та альтернативною блоковими моделями?
## --answers--
-The standard box model calculates the width and height of an element based on the content alone, while the alternative box model calculates based on the content plus padding and border.
+Стандартна блокова модель обчислює ширину та висоту елементу на основі вмісту, а альтернативна блокова модель — на основі вмісту, доданого до відступу та кордону.
---
-The standard box model includes content, padding, and border, while the alternative box model includes only the content.
+Стандартна блокова модель містить вміст, відступ та кордон, а альтернативна блокова модель — лише вміст.
---
-The standard box model and the alternative box model are the same and have no differences.
+Стандартна й альтернативна блокові моделі одинакові та не мають жодних відмінностей.
---
-The standard box model includes only the content, while the alternative box model includes content, padding, and border.
+Стандартна блокова модель містить лише вміст, а альтернативна блокова модель — вміст, відступ та кордон.
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
index 1b311df62dd..ac2295992b2 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
@@ -1,35 +1,35 @@
---
id: 64a674a47a7d00f97013ed11
videoId: rIO5326FgPE
-title: The Box Model Lesson J
+title: Блокова модель. Урок №10
challengeType: 15
dashedName: the-box-model-lesson-j
---
# --description--
-Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with this lesson from MDN. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+Оскільки поняття блокової моделі є основним, розглянемо його детальніше у цьому уроці від MDN (англійською мовою). Він охоплює той самий матеріал, що й відео вище та ознайомить вас з вбудованими блоками, які ми розглянемо в наступному уроці. Зверніть увагу на приклади та приділіть деякий час, щоб поекспериментувати з редактором у браузері!
# --question--
## --text--
-Would you use margin or padding to create more space between 2 elements?
+Що б ви використали, щоб створити більше простору між двома елементами: поле чи відступ?
## --answers--
-Padding
+Відступ
---
-Both margin and padding can be used interchangeably
+Поле та відступ можна використовувати один замість одного
---
-Neither margin nor padding can be used to create more space between elements
+Ні поле, ні відступ не використовують для створення простору між елементами
---
-Margin
+Поле
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
index b782f8bb4f9..c446bcd2e4b 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
@@ -1,19 +1,19 @@
---
id: 64a674ac7a7d00f97013ed12
videoId: rIO5326FgPE
-title: The Box Model Lesson K
+title: Блокова модель. Урок №11
challengeType: 15
dashedName: the-box-model-lesson-k
---
# --description--
-Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with this lesson from MDN. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+Оскільки поняття блокової моделі є основним, розглянемо його детальніше у цьому уроці від MDN (англійською мовою). Він охоплює той самий матеріал, що й відео вище та ознайомить вас з вбудованими блоками, які ми розглянемо в наступному уроці. Зверніть увагу на приклади та приділіть деякий час, щоб поекспериментувати з редактором у браузері!
# --question--
## --text--
-Which CSS property would you use to create more space between the contents of an element and its border?
+Яку властивість CSS ви б використали, щоб створити більше простору між вмістом елемента та його кордоном?
## --answers--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
index e86aa50c732..62307dea741 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
@@ -1,27 +1,27 @@
---
id: 64a674b97a7d00f97013ed13
videoId: rIO5326FgPE
-title: The Box Model Lesson L
+title: Блокова модель. Урок №12
challengeType: 15
dashedName: the-box-model-lesson-l
---
# --description--
-Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with this lesson from MDN. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+Оскільки поняття блокової моделі є основним, розглянемо його детальніше у цьому уроці від MDN (англійською мовою). Він охоплює той самий матеріал, що й відео вище та ознайомить вас з вбудованими блоками, які ми розглянемо в наступному уроці. Зверніть увагу на приклади та приділіть деякий час, щоб поекспериментувати з редактором у браузері!
# --question--
## --text--
-Would you use margin or padding if you wanted two elements to overlap each other?
+Що б ви використали, щоб два елементи перекривали один одного: поле чи відступ?
## --answers--
-Padding
+Відступ
---
-Margin
+Поле
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
index d7296f95901..2c70ee80a7d 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
@@ -1,19 +1,19 @@
---
id: 64a674c27a7d00f97013ed14
videoId: rIO5326FgPE
-title: The Box Model Lesson M
+title: Блокова модель. Урок №13
challengeType: 15
dashedName: the-box-model-lesson-m
---
# --description--
-Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with this lesson from MDN. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+Оскільки поняття блокової моделі є основним, розглянемо його детальніше у цьому уроці від MDN (англійською мовою). Він охоплює той самий матеріал, що й відео вище та ознайомить вас з вбудованими блоками, які ми розглянемо в наступному уроці. Зверніть увагу на приклади та приділіть деякий час, щоб поекспериментувати з редактором у браузері!
# --question--
## --text--
-How do you set the alternative box model for all of your elements?
+Як налаштувати альтернативну блокову модель для всіх елементів?
## --answers--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
index e44f4fa7533..08191ec0f6f 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
@@ -1,14 +1,14 @@
---
id: 637f4e5872c65bc8e73dfe27
videoId: yqcd-XkxZNM
-title: Working With Text Lesson A
+title: Робота з текстом. Урок №1
challengeType: 15
dashedName: working-with-text-lesson-a
---
# --description--
-What would you expect the following text to output on an HTML page?
+Які вихідні дані ви очікуєте від цього тексту на HTML-сторінці?
```html
@@ -20,27 +20,27 @@ What would you expect the following text to output on an HTML page?
```
-It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below:
+Текст виглядає як два абзаци, і ви можете очікувати, що він відтвориться так само. Але не в цьому випадку, як можете побачити нижче:
-
+
-When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line.
+Коли браузер стикається з подібними рядками в HTML, він об’єднує їх. У результаті такого об’єднання весь текст групується в один довгий рядок.
-If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `` to `
` — ні. # --question-- ## --text-- -Which of the following best describes the CSS code given above? +Що з переліченого найкраще описує код CSS, поданий вище? ## --answers-- -The code applies a `white` color to all elements in the HTML file. +Код надає колір зі значенням `white` всім елементам у файлі HTML. --- -The code applies a `white` color to all `div` elements in the HTML file. +Код надає колір зі значенням `white` всім елементам `div` у файлі HTML. --- -The code applies a `white` color to all `p` elements in the HTML file. +Код надає колір зі значенням `white` всім елементам `p` у файлі HTML. ## --video-solution-- diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md index 4431d278eef..d547ffbda62 100644 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md +++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md @@ -1,14 +1,14 @@ --- id: 63ee35240d8d4841c3a7091b videoId: LGQuIIv2RVA -title: CSS Foundations Lesson B +title: Основи CSS. Урок №2 challengeType: 15 dashedName: css-foundations-lesson-b --- # --description-- -Class selectors will select all elements with the given `class`, which is just an attribute you place on an HTML element. Here’s how you add a class to an HTML tag and select it in CSS: +Селектори класу обирають всі елементи з наданим `class`, що є звичайним атрибутом, розміщеним в елементі HTML. Ось так ви додаєте клас до тегу HTML та обираєте його в CSS: ```html @@ -26,12 +26,12 @@ Class selectors will select all elements with the given `class`, which is just a } ``` -Note the syntax for `class` selectors: a period immediately followed by the case-sensitive value of the class attribute. Classes aren’t required to be unique, so you can use the same `class` on as many elements as you want. +Примітка щодо синтаксису для селекторів `class`: після крапки пишеться значення атрибуту класу, яке чутливе до регістру. Класи не повинні бути унікальними, тому ви можете використовувати однаковий `class` для декількох елементів. -Another thing you can do with the `class` attribute is to add multiple classes to a single element as a space-separated list, such as `class="alert-text severe-alert"`. Since whitespace is used to separate `class` names like this, you should never use spaces for multi-worded names and should use a hyphen instead. +Завдяки атрибуту `class` також можна додати декілька класів до одного елемента, розділивши їх пробілом, як-от `class="alert-text severe-alert"`. Оскільки пробіл використовують, щоб розділити назви `class`, не використовуйте пробіли у назвах з декількома словами (натомість використовуйте дефіси). -## ID Selectors -ID selectors are similar to `class` selectors. They select an element with the given `id`, which is another attribute you place on an HTML element: +## Селектори ID +Селектори ID схожі до селекторів `class`. Вони обирають елемент з наданим `id`, що є ще одним атрибутом елемента HTML: ```html @@ -47,27 +47,27 @@ ID selectors are similar to `class` selectors. They select an element with the g } ``` -Instead of a period, you use a hashtag immediately followed by the case-sensitive value of the `id` attribute. A common pitfall is people overusing the `id` attribute when they don’t necessarily need to, and when classes will suffice. While there are cases where using an `id` makes sense or is needed, such as taking advantage of specificity or having links redirect to a section on the current page, you should use `id`s sparingly (if at all). +Замість коми потрібно використовувати знак решітки, після якого пишеться значення атрибута `id`, чутливе до регістру. Люди часто помиляються, використовуючи атрибут `id` там, де немає потреби і можна було використати класи. Хоча є випадки, коли логічніше використовувати `id` (наприклад, щоб використати переваги специфічності чи перенаправити до розділу поточної сторінки). -The major difference between classes and IDs is that an element can only have one `id`. An `id` cannot be repeated on a single page, and the `id` attribute should not contain any whitespace at all. +Головною відмінністю між класами та ID є те, що елемент може мати лише один `id`. `id` не може повторюватись на сторінці, а атрибут `id` не повинен містити пробілів. # --question-- ## --text-- -What is the syntax for class and ID selectors? +Який синтаксис для селекторів класу та ID? ## --answers-- -To select a `class` you use `$` and to select an `id` you use `#` +Щоб обрати `class`, використовують `$`; щоб обрати `id`, використовують `#` --- -To select a `class` you use `.` and to select an `id` you use `*` +Щоб обрати `class`, використовують `.`; щоб обрати `id`, використовують `*` --- -To select a `class` you use `.` and to select an `id` you use `#` +Щоб обрати `class`, використовують `.`; щоб обрати `id`, використовують `#` ## --video-solution-- diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md index 03f093145ff..e0979d05e5d 100644 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md +++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md @@ -1,14 +1,14 @@ --- id: 63ee352b0d8d4841c3a7091c videoId: LGQuIIv2RVA -title: CSS Foundations Lesson C +title: Основи CSS. Урок №3 challengeType: 15 dashedName: css-foundations-lesson-c --- # --description-- -What if you have two groups of elements that share some of their style declarations? +Що робити, якщо у вас є дві групи елементів, які мають спільні оголошення стилів? ```css .read { @@ -24,7 +24,7 @@ What if you have two groups of elements that share some of their style declarati } ``` -Both our `.read` and `.unread` selectors share the `color: white;` and `background-color: black;` declarations, but otherwise have several of their own unique declarations. To cut down on the repetition, you can group these two selectors together as a comma-separated list: +Обидва селектори (`.read` та `.unread`) мають спільні оголошення `color: white;` та `background-color: black;`, але окрім них вони мають декілька власних унікальних оголошень. Щоб зменшити повторення, ви можете згрупувати ці два селектори разом у вигляді списку, розділеного комами: ```css .read, @@ -42,13 +42,13 @@ Both our `.read` and `.unread` selectors share the `color: white;` and `backgrou } ``` -Both of the examples above (with and without grouping) will have the same result, but the second example reduces the repetition of declarations and makes it easier to edit either the `color` or `background-color` for both classes at once. +Обидва наведені вище приклади (з групуванням і без нього) матимуть однаковий результат, але другий приклад зменшує повтори оголошень та полегшує одночасне редагування `color` чи `background-color` для обох класів. # --question-- ## --text-- -How would you apply a single rule to two different selectors, `.red-box` and `.yellow-box`? +Як би ви застосували одне правило до двох різних селекторів: `.red-box` та `.yellow-box`? ## --answers-- diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md index 9dc6044c89b..2844f14df5b 100644 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md +++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md @@ -1,14 +1,14 @@ --- id: 63ee35300d8d4841c3a7091d videoId: LGQuIIv2RVA -title: CSS Foundations Lesson D +title: Основи CSS. Урок №4 challengeType: 15 dashedName: css-foundations-lesson-d --- # --description-- -Another way to use selectors is to chain them as a list without any separation. Let’s say you had the following HTML: +Ще один спосіб використовувати селектори — об’єднати їх у списку без відокремлень. Скажімо, ви маєте такий HTML: ```html
@@ -17,7 +17,7 @@ Another way to use selectors is to chain them as a list without any separation.
```
-You have two elements with the `subsection` class that have some sort of unique styles, but what if you only want to apply a separate rule to the element that also has `header` as a second class? Well, you could chain both the `class` selectors together in your CSS like so:
+У вас є два елементи з класом `subsection`, які мають відносно унікальні стилі. Вам потрібно застосувати окреме правило до елемента, який також має `header` як другий клас. Що робитимете? Ви можете об’єднати селектори `class` у CSS:
```css
.subsection.header {
@@ -25,9 +25,9 @@ You have two elements with the `subsection` class that have some sort of unique
}
```
-What `.subsection.header` does is it selects any element that has both the `subsection` and `header` classes. Notice how there isn’t any space between the `.subsection` and `.header` `class` selectors. This syntax basically works for chaining any combination of selectors, except for chaining more than one type selector.
+`.subsection.header` обирає будь-який елемент, який має класи `subsection` та `header`. Зверніть увагу, що між селекторами `class` `.subsection` та `.header` немає пробілу. Цей синтаксис в основному працює для об’єднання будь-якої комбінації селекторів, за винятком об’єднання декількох селекторів типу.
-This can also be used to chain a class and an ID, as shown below:
+Його можна використати, щоб об’єднати клас та ID:
```html
@@ -36,7 +36,7 @@ This can also be used to chain a class and an ID, as shown below:
```
-You can take the two elements above and combine them with the following:
+Ви можете взяти два елементи вище та поєднати їх:
```css
.subsection.header {
@@ -48,13 +48,13 @@ You can take the two elements above and combine them with the following:
}
```
-In general, you can’t chain more than one type selector since an element can’t be two different types at once. For example, chaining two type selectors like `div` and `p` would give us the selector `divp`, which wouldn’t work since the selector would try to find a literal ``. +Початкові теги повідомляють браузеру про початок елемента HTML. Вони складаються з ключового слова в кутових дужках `<>`. Наприклад, початковий тег абзацу буде таким: `
`. -Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. +Кінцеві теги повідомляють браузеру про кінець елемента. Вони майже такі самі, як і початкові теги. Єдина відмінність полягає в тому, що вони мають скісну риску перед ключовим словом. Наприклад, кінцевий тег абзацу буде таким: ``. -A full paragraph element looks like this: +Повний елемент абзацу виглядає так: -
+
# --assignment--
-Watch Kevin Powell’s Introduction to HTML video
+Перегляньте відео Кевіна Павелла про вступ до HTML.
# --question--
## --text--
-What are HTML tags?
+Що таке теги у HTML?
## --answers--
-HTML tags tell the browser what content an element contains.
+Теги у HTML повідомляють браузеру про вміст елемента.
---
-HTML tags tell the browser when to load its content.
+Теги у HTML повідомляють браузеру коли завантажувати вміст.
---
-HTML tags tell the browser what content the next element contains.
+Теги у HTML повідомляють браузеру про вміст наступного елемента.
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
index cbf924480fc..70496db84ea 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
@@ -1,37 +1,37 @@
---
id: 637f4e1672c65bc8e73dfe1f
-title: HTML Foundations Lesson B
+title: Основи HTML. Урок №2
challengeType: 15
dashedName: html-foundations-lesson-b
---
# --description--
-You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+Елементи можна вважати контейнерами, в яких зберігається вміст. Початкові та кінцеві теги повідомляють браузеру вміст, який містить елемент. Браузер використовує цю інформацію, щоб знати як інтерпретувати та форматувати вміст.
-There are some HTML elements that do not have a closing tag. These elements often look like this: `` or `
` or `
` або `
` або `
` or `
` чи `
Homepage
` +- Вкінці додайте такий `h1` до `body`: `Homepage
` -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. +## Елементи посилання +Щоб створити посилання в HTML, використовують елемент посилання. Щоб визначити елемент посилання, потрібно обгорнути текст або інший елемент HTML, який має бути посиланням, тегом ``. -Add the following to the `body` of the `index.html` page you created and open it in the browser: +Додайте такий елемент до тіла створеної сторінки `index.html` та відкрийте сторінку у браузері: ```html click me ``` -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. +Можливо, ви помітили, що при натисканні на посилання нічого не відбувається. Тег посилання не знає куди переходити. Ви повинні сказати йому місце призначення. Для цього використовують атрибут HTML. -An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. +Атрибут HTML надає додаткову інформацію елементу HTML та завжди розміщений всередині початкового тегу елемента. Зазвичай атрибут складається з двох частин: назви та значення, однак не всі атрибути вимагають значення. У нашому випадку потрібно додати атрибут `href` (hyperlink reference) до початкового тегу посилання. Значенням атрибута `href` є місце призначення, на яке потрібно направляти користувачів. -Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. +Додайте даний атрибут `href` до створеного елемента посилання та спробуйте натиснути на нього знову. Не забудьте оновити браузер, щоб застосувати нові зміни. ```html click me ``` -By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. +Будь-який текст з тегом посилання без атрибута `href` буде звичайним текстом. Якщо атрибут `href` наявний, браузер надасть тексту синього кольору та підкреслення, щоб вказати, що це посилання. -It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. +Важливо зазначити, що теги посилання можна використовувати для будь-яких ресурсів в інтернеті, а не лише документів HTML. Ви можете направляти на відео, файли pdf, зображення та інше, але здебільшого ви направлятимете на інші документи HTML. # --assignment-- -Watch Kevin Powell’s HTML Links video above. +Перегляньте відео Кевіна Павелла про посилання у HTML (розміщене вище). # --question-- ## --text-- -What HTML tag is used to create a link? +Який тег потрібно використати, щоб створити посилання у HTML? ## --answers-- diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md index 7039766863f..3f93e04d68c 100644 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md +++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md @@ -1,60 +1,60 @@ --- id: 637f703572c65bc8e73dfe35 -title: Links and Images Lesson B +title: Посилання та зображення. Урок №2 challengeType: 15 dashedName: links-and-images-lesson-b --- # --description-- -To get some practice using links and images throughout this lesson you need an HTML project to work with. +Щоб попрактикуватись з посиланнями та зображеннями, вам потрібний проєкт HTML. -- Create a new directory named `odin-links-and-images`. +- Створіть новий каталог під назвою `odin-links-and-images`. -- Within that directory, create a new file named `index.html`. +- У цьому каталозі створіть новий файл під назвою `index.html`. -- Fill in the usual HTML boilerplate. +- Заповніть звичайний шаблонний код HTML. -- Finally, add the following `h1` to the `body`: `Homepage
` +- Вкінці додайте такий `h1` до `body`: `Homepage
` -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. +## Елементи посилання +Щоб створити посилання в HTML, використовують елемент посилання. Щоб визначити елемент посилання, потрібно обгорнути текст або інший елемент HTML, який має бути посиланням, тегом ``. -Add the following to the `body` of the `index.html` page you created and open it in the browser: +Додайте такий елемент до тіла створеної сторінки `index.html` та відкрийте сторінку у браузері: ```html click me ``` -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. +Можливо, ви помітили, що при натисканні на посилання нічого не відбувається. Тег посилання не знає куди переходити. Ви повинні сказати йому місце призначення. Для цього використовують атрибут HTML. -An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. +Атрибут HTML надає додаткову інформацію елементу HTML та завжди розміщений всередині початкового тегу елемента. Зазвичай атрибут складається з двох частин: назви та значення, однак не всі атрибути вимагають значення. У нашому випадку потрібно додати атрибут `href` (hyperlink reference) до початкового тегу посилання. Значенням атрибута `href` є місце призначення, на яке потрібно направляти користувачів. -Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. +Додайте даний атрибут `href` до створеного елемента посилання та спробуйте натиснути на нього знову. Не забудьте оновити браузер, щоб застосувати нові зміни. ```html click me ``` -By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. +Будь-який текст з тегом посилання без атрибута `href` буде звичайним текстом. Якщо атрибут `href` наявний, браузер надасть тексту синього кольору та підкреслення, щоб вказати, що це посилання. -It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. +Важливо зазначити, що теги посилання можна використовувати для будь-яких ресурсів в інтернеті, а не лише документів HTML. Ви можете направляти на відео, файли pdf, зображення та інше, але здебільшого ви направлятимете на інші документи HTML. # --question-- ## --text-- -What is an attribute? +Що таке атрибут? ## --answers-- -An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag. +Атрибут HTML надає додаткову інформацію елементу HTML та завжди розміщений всередині кінцевого тегу елемента. --- -An HTML attribute is used to tell the browser what the element contains. +Атрибут HTML повідомляє браузеру вміст елемента. --- -An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. +Атрибут HTML надає додаткову інформацію елементу HTML та завжди розміщений всередині початкового тегу елемента. ## --video-solution-- diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md index 4f1440bc5f3..c508ab622f6 100644 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md +++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md @@ -1,50 +1,50 @@ --- id: 637f703072c65bc8e73dfe34 -title: Links and Images Lesson C +title: Посилання та зображення. Урок №3 challengeType: 15 dashedName: links-and-images-lesson-c --- # --description-- -To get some practice using links and images throughout this lesson you need an HTML project to work with. +Щоб попрактикуватись з посиланнями та зображеннями, вам потрібний проєкт HTML. -- Create a new directory named `odin-links-and-images`. +- Створіть новий каталог під назвою `odin-links-and-images`. -- Within that directory, create a new file named `index.html`. +- У цьому каталозі створіть новий файл під назвою `index.html`. -- Fill in the usual HTML boilerplate. +- Заповніть звичайний шаблонний код HTML. -- Finally, add the following `h1` to the `body`: `Homepage
` +- Вкінці додайте такий `h1` до `body`: `Homepage
` -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. +## Елементи посилання +Щоб створити посилання в HTML, використовують елемент посилання. Щоб визначити елемент посилання, потрібно обгорнути текст або інший елемент HTML, який має бути посиланням, тегом ``. -Add the following to the `body` of the `index.html` page you created and open it in the browser: +Додайте такий елемент до тіла створеної сторінки `index.html` та відкрийте сторінку у браузері: ```html click me ``` -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. +Можливо, ви помітили, що при натисканні на посилання нічого не відбувається. Тег посилання не знає куди переходити. Ви повинні сказати йому місце призначення. Для цього використовують атрибут HTML. -An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. +Атрибут HTML надає додаткову інформацію елементу HTML та завжди розміщений всередині початкового тегу елемента. Зазвичай атрибут складається з двох частин: назви та значення, однак не всі атрибути вимагають значення. У нашому випадку потрібно додати атрибут `href` (hyperlink reference) до початкового тегу посилання. Значенням атрибута `href` є місце призначення, на яке потрібно направляти користувачів. -Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. +Додайте даний атрибут `href` до створеного елемента посилання та спробуйте натиснути на нього знову. Не забудьте оновити браузер, щоб застосувати нові зміни. ```html click me ``` -By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. +Будь-який текст з тегом посилання без атрибута `href` буде звичайним текстом. Якщо атрибут `href` наявний, браузер надасть тексту синього кольору та підкреслення, щоб вказати, що це посилання. -It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. +Важливо зазначити, що теги посилання можна використовувати для будь-яких ресурсів в інтернеті, а не лише документів HTML. Ви можете направляти на відео, файли pdf, зображення та інше, але здебільшого ви направлятимете на інші документи HTML. # --question-- ## --text-- -What attribute tells links where to go to? +Який атрибут повідомляє посиланню про місце призначення? ## --answers-- diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md index 69bbd58d2da..35c5f5d944b 100644 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md +++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md @@ -1,7 +1,7 @@ --- id: 637f702872c65bc8e73dfe33 videoId: ta3Oxx7Yqbo -title: Links and Images Lesson D +title: Посилання та зображення. Урок №4 challengeType: 15 dashedName: links-and-images-lesson-d --- @@ -9,26 +9,26 @@ dashedName: links-and-images-lesson-d # --description-- -Generally, there are two kinds of links you will create: +Загалом існує два типи посилань, які ви створюватимете: -- Links to pages on other websites on the internet +- посилання на сторінки інших вебсайтів в інтернеті; -- Links to pages located on your own websites +- посилання на сторінки власних вебсайтів. -## Absolute Links -Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination. +## Абсолютні посилання +Посилання на сторінку іншого вебсайту в інтернеті називають абсолютним посиланням. Зазвичай абсолютне посилання складається з наступних частин: `protocol://domain/path`. Абсолютне посилання завжди міститиме протокол та домен місця призначення. -You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain. +Ви вже бачили абсолютне посилання в дії. Посилання на головну сторінку проєкту Odin є абсолютним посиланням, оскільки воно містить протокол та домен. `https://www.theodinproject.com/about` -## Relative Links -Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on. +## Відносні посилання +Посилання на іншу сторінку власного вебсайту називають відносним посиланням. Відносне посилання не містить домену, оскільки це інша сторінка на тому ж сайті, тому назва домену буде одинаковою. -Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example. +Відносні посилання містять лише шлях файлу до іншої сторінки відносно сторінки, на яку ви направляєте. Це досить абстрактно, тому розглянемо приклад. -Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it: +У межах каталогу `odin-links-and-images` створіть ще один файл HTML під назвою `about.html` та додайте до нього такий код: ```html @@ -44,7 +44,7 @@ Within the `odin-links-and-images` directory, create another HTML file named `ab ``` -Back in the `index` page, add the following anchor element to create a link to the `about` page: +Повернемось до сторінки `index`: додайте даний елемент посилання, щоб створити посилання на сторінку `about`: ```html @@ -55,17 +55,17 @@ Back in the `index` page, add the following anchor element to create a link to t ``` -Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created. +Відкрийте файл `index.html` у браузері та натисніть на посилання, щоб перевірити, що все працює правильно. Після натискання на посилання ви маєте перейти на щойно створену сторінку `about`. -This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value. +Все працює, оскільки `index` та `about` знаходяться в одному каталозі. Це означає, що ви можете використати назву (`about.html`) як значення `href`. -But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory. +Однак зазвичай каталоги потрібно організовувати кращим способом. Зазвичай у кореневому каталозі ви б мали тільки `index.html`, а всі інші файли HTML мали власні каталоги. -Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory. +Створіть новий каталог під назвою `pages` в межах каталогу `odin-links-and-images` та перемістіть файл `about.html` до нового каталогу. -Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed. +Оновіть сторінку `index` у браузері та натисніть на посилання `about`. Зараз воно буде недійсним. Причина в тому, що змінилось розташування сторінки `about`. -To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file. +Щоб виправити це, вам просто потрібно оновити значення `href` посилання `about`, щоб включити каталог `pages/`, оскільки це нове розташування файлу `about.html` відносно файлу `index.html`. ```html @@ -74,9 +74,9 @@ To fix this, you just need to update the `about` link `href` value to include th ``` -Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order. +Оновіть сторінку `index` у браузері та спробуйте знову натиснути на посилання `about`. Зараз воно має працювати. -In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory. +У більшості випадків все працюватиме. Однак іноді ви можете натрапити на непередбачувані проблеми. Якщо додати `./` перед посиланням, проблем можна уникнути. За допомогою `./` ви вказуєте коду, що він повинен шукати файл/каталог відносно **поточного** каталогу. ```html @@ -87,25 +87,25 @@ In many cases, this will work just fine; however, you can still run into unexpec # --assignment-- -Watch Kevin Powell’s HTML File Structure video above. +Перегляньте відео Кевіна Павелла про структуру файлів у HTML (розміщене вище). # --question-- ## --text-- -What is the difference between an absolute and a relative link? +Яка різниця між абсолютним та відносним посиланням? ## --answers-- -An absolute link is a link to another page on the current website. A relative link is a link to another website. +Абсолютне посилання — посилання на іншу сторінку поточного вебсайту. Відносне посилання — посилання на інший вебсайт. --- -An absolute link is a link to another website. A relative link is a link another page on the current website. +Абсолютне посилання — посилання на інший вебсайт. Відносне посилання — посилання на іншу сторінку поточного вебсайту. --- -There is no difference between absolute and relative links. +Між абсолютним та відносним посиланням немає різниці. ## --video-solution-- diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md index eb4b15a8d54..95ea39ae307 100644 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md +++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md @@ -1,32 +1,32 @@ --- id: 637f702372c65bc8e73dfe32 videoId: 0xoztJCHpbQ -title: Links and Images Lesson E +title: Посилання та зображення. Урок №5 challengeType: 15 dashedName: links-and-images-lesson-e --- # --description-- -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. +Вебсайти були б нудними, якби показувати лише текст. На щастя, HTML надає широкий вибір елементів для відтворення різних видів медіа. Найчастіше використовують елемент зображення. -To display an image in HTML you use the `
```
-To break this down:
+Розіб’ємо на частини:
-- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+- спочатку перейдіть до батьківського каталогу сторінок, тобто `odin-links-and-images`;
-- Then, from the parent directory, you can go into the `images` directory.
+- потім ви можете перейти до каталогу `images` з батьківського каталогу;
-- Finally, you can access the `dog.jpg` file.
+- нарешті ви можете отримати доступ до файлу `dog.jpg`.
-Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+Використаємо метафору: `../` у шляху нагадує вихід з кімнати до коридору, щоб перейти до іншої кімнати.
-## `Alt` attribute
+## Атрибут `alt`
-Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+Окрім атрибута `src`, кожному елементу зображення потрібний атрибут `alt` (alternative text).
-The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+Атрибут `alt` використовують, щоб описати зображення. Він буде використаний на місці зображення, яке не завантажується. Його також використовують читачі екрана, щоб описати зображення для користувачів з порушенням зору.
-This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
-
+Ось так виглядає логотип The Odin Project з атрибутом `alt`:
+
# --assignment--
-Watch Kevin Powell’s HTML Images Video above.
+Перегляньте відео Кевіна Павелла про зображення у HTML (розміщене вище).
# --question--
## --text--
-Which tag is used to display an image?
+За допомогою якого тега відтворюють зображення?
## --answers--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
index 5ea069897aa..7bcc72e3d7b 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
@@ -1,31 +1,31 @@
---
id: 637f701c72c65bc8e73dfe31
-title: Links and Images Lesson F
+title: Посилання та зображення. Урок №6
challengeType: 15
dashedName: links-and-images-lesson-f
---
# --description--
-Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+Вебсайти були б нудними, якби показувати лише текст. На щастя, HTML надає широкий вибір елементів для відтворення різних видів медіа. Найчастіше використовують елемент зображення.
-To display an image in HTML you use the `
```
-To break this down:
+Розіб’ємо на частини:
-- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+- спочатку перейдіть до батьківського каталогу сторінок, тобто `odin-links-and-images`;
-- Then, from the parent directory, you can go into the `images` directory.
+- потім ви можете перейти до каталогу `images` з батьківського каталогу;
-- Finally, you can access the `dog.jpg` file.
+- нарешті ви можете отримати доступ до файлу `dog.jpg`.
-Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+Використаємо метафору: `../` у шляху нагадує вихід з кімнати до коридору, щоб перейти до іншої кімнати.
-## Alt attribute
+## Атрибут alt
-Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+Окрім атрибута `src`, кожному елементу зображення потрібний атрибут `alt` (alternative text).
-The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+Атрибут `alt` використовують, щоб описати зображення. Він буде використаний на місці зображення, яке не завантажується. Його також використовують читачі екрана, щоб описати зображення для користувачів з порушенням зору.
-This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
-
+Ось так виглядає логотип The Odin Project з атрибутом alt:
+
# --question--
## --text--
-What two attributes do images always need to have?
+Які атрибути повинні мати зображення?
## --answers--
-`href` and `alt`
+`href` та `alt`
---
-`name` and `href`
+`name` та `href`
---
-`alt` and `src`
+`alt` та `src`
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
index 71bdf4add9b..42c4cc0450d 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
@@ -1,31 +1,31 @@
---
id: 637f701572c65bc8e73dfe30
-title: Links and Images Lesson G
+title: Посилання та зображення. Урок №7
challengeType: 15
dashedName: links-and-images-lesson-g
---
# --description--
-Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+Вебсайти були б нудними, якби показувати лише текст. На щастя, HTML надає широкий вибір елементів для відтворення різних видів медіа. Найчастіше використовують елемент зображення.
-To display an image in HTML you use the `
```
-To break this down:
+Розіб’ємо на частини:
-- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+- спочатку перейдіть до батьківського каталогу сторінок, тобто `odin-links-and-images`;
-- Then, from the parent directory, you can go into the `images` directory.
+- потім ви можете перейти до каталогу `images` з батьківського каталогу;
-- Finally, you can access the `dog.jpg` file.
+- нарешті ви можете отримати доступ до файлу `dog.jpg`.
-Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+Використаємо метафору: `../` у шляху нагадує вихід з кімнати до коридору, щоб перейти до іншої кімнати.
-## Alt attribute
+## Атрибут alt
-Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+Окрім атрибута `src`, кожному елементу зображення потрібний атрибут `alt` (alternative text).
-The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+Атрибут `alt` використовують, щоб описати зображення. Він буде використаний на місці зображення, яке не завантажується. Його також використовують читачі екрана, щоб описати зображення для користувачів з порушенням зору.
-This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
-
+Ось так виглядає логотип The Odin Project з атрибутом alt:
+
# --question--
## --text--
-How do you access a parent directory in a filepath?
+Як отримати доступ до батьківського каталогу у шляху до файлу?
## --answers--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
index 2f78b640e8f..8b4ddec910b 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
@@ -1,31 +1,31 @@
---
id: 637f700b72c65bc8e73dfe2f
-title: Links and Images Lesson H
+title: Посилання та зображення. Урок №8
challengeType: 15
dashedName: links-and-images-lesson-h
---
# --description--
-Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+Вебсайти були б нудними, якби показувати лише текст. На щастя, HTML надає широкий вибір елементів для відтворення різних видів медіа. Найчастіше використовують елемент зображення.
-To display an image in HTML you use the `
```
-To break this down:
+Розіб’ємо на частини:
-- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+- спочатку перейдіть до батьківського каталогу сторінок, тобто `odin-links-and-images`;
-- Then, from the parent directory, you can go into the `images` directory.
+- потім ви можете перейти до каталогу `images` з батьківського каталогу;
-- Finally, you can access the `dog.jpg` file.
+- нарешті ви можете отримати доступ до файлу `dog.jpg`.
-Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+Використаємо метафору: `../` у шляху нагадує вихід з кімнати до коридору, щоб перейти до іншої кімнати.
-## Alt attribute
+## Атрибут alt
-Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+Окрім атрибута `src`, кожному елементу зображення потрібний атрибут `alt` (alternative text).
-The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+Атрибут `alt` використовують, щоб описати зображення. Він буде використаний на місці зображення, яке не завантажується. Його також використовують читачі екрана, щоб описати зображення для користувачів з порушенням зору.
-This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
-
+Ось так виглядає логотип The Odin Project з атрибутом alt:
+
# --assignment--
-Read about the four main image formats that can be used on the web.
+Прочитайте про чотири основні формати зображень, які можна використовувати у вебмережі (англійською мовою).
# --question--
## --text--
-What are the four main image formats that you can use for images on the web?
+Які чотири основні формати зображення можна використовувати у вебмережі?
## --answers--
-MOV, GIF, PNG, and SVG.
+MOV, GIF, PNG та SVG.
---
-JPG, PNG, GIF, and SVG.
+JPG, PNG, GIF та SVG.
---
-JPG, PDF, SVG, and GIF.
+JPG, PDF, SVG та GIF.
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
index a5b1babdd77..b95ba785124 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
@@ -1,43 +1,43 @@
---
id: 64a5529c02815a7d323aab88
-title: The Box Model Lesson A
+title: Блокова модель. Урок №1
challengeType: 15
dashedName: the-box-model-lesson-a
---
# --description--
-Being able to inspect and debug your HTML and CSS is critical to frontend development. This lesson will take us through the Chrome Dev Tools, which allow you to see detailed information about your elements and CSS rules, as well as assist you in finding and fixing problems in your code.
+Для фронтенду важливо вміти оглядати та налагоджувати HTML й CSS. У цьому уроці ми пройдемось по інструментах веброзробника Chrome, які дозволяють отримати детальну інформацію про елементи та правила CSS, а також допомагають зі знаходженням та налагодженням помилок у коді.
-To open up the inspector, you can right-click on any element of a webpage and click “Inspect” or press F12. Go ahead and do that right now to see the HTML and CSS used on this page.
+Щоб відкрити інспектора, натисніть правою кнопкою миші на будь-якому елементі вебсторінки та оберіть «Перевірити» або натисніть F12. Зробіть так прямо зараз, щоб дізнатись застосовані до цієї сторінки HTML та CSS.
-Don’t get overwhelmed with all the tools you’re now seeing! For this lesson, we want to focus on the Elements and Styles panes.
+Не лякайтесь всіх побачених інструментів! У цьому уроці ми фокусуватимемось на панелях «Елементи» та «Стилі».
# --assignment--
-Play around with Chrome Dev Tools and see if you can answer the following question.
+Розгляньте інструменти веброзробника Chrome та дізнайтесь, чи зможете відповісти на запитання.
# --question--
## --text--
-Which panes should you focus on in the Chrome Dev Tools for inspecting and debugging HTML and CSS?
+На яких панелях в інструментах веброзробника Chrome варто фокусуватись при огляді та налагодженні HTML й CSS?
## --answers--
-Console and Network
+«Консоль» та «Мережа»
---
-Elements and Styles
+«Елементи» та «Стилі»
---
-Sources and Application
+«Джерела» та «Додаток»
---
-Performance and Memory
+«Ефективність» та «Пам’ять»
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
index 802fed2ac2f..8a9e8c0d2db 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
@@ -1,41 +1,41 @@
---
id: 64a553ed02815a7d323aab89
-title: The Box Model Lesson B
+title: Блокова модель. Урок №2
challengeType: 15
dashedName: the-box-model-lesson-b
---
# --description--
-In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+На панелі «Елементи» можна побачити повну структуру HTML. Ви можете натиснути на будь-який елемент панелі, щоб обрати певний елемент. Або ж ви можете натиснути на голубий значок зліва (показано нижче) та навести на будь-який елемент сторінки.
-
+
-When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on the The Odin Project homepage, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+Коли елемент обрано, вкладка «Стилі» покаже всі застосовані стилі, а також усі змінені стилі (у вигляді закресленого тексту). Наприклад, якщо використати інспектора та натиснути на заголовок «Your Career in Web Development Starts Here» домашньої сторінки проєкту Odin, справа ви побачите всі стилі, які наразі застосовані до елемента:
-
+
# --question--
## --text--
-When inspecting an element in the Chrome Dev Tools, if a style property is shown with a strikethrough, what does it indicate?
+Припустимо, ви оглядаєте елемент в інструментах веброзробника Chrome. Що означає закреслена властивість стилю?
## --answers--
-The style property is currently disabled and not applied to the element.
+Наразі властивість стилю пошкоджена та не застосовується до елемента.
---
-The style property is overridden by a more specific CSS rule.
+Властивість стилю замінена специфічнішим правилом CSS.
---
-The style property is deprecated and should not be used.
+Властивість стилю нерекомендована та її бажано не використовувати.
---
-The style property is experimental and may not be supported by all browsers
+Властивість стилю експериментальна та може підтримуватись не всіма браузерами.
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
index 76ff0d4c362..558502cda47 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
@@ -1,44 +1,44 @@
---
id: 64a5551d02815a7d323aab8a
-title: The Box Model Lesson C
+title: Блокова модель. Урок №3
challengeType: 15
dashedName: the-box-model-lesson-c
---
# --description--
-In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+На панелі «Елементи» можна побачити повну структуру HTML. Ви можете натиснути на будь-який елемент панелі, щоб обрати певний елемент. Або ж ви можете натиснути на голубий значок зліва (показано нижче) та навести на будь-який елемент сторінки.
-
+
-When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on the The Odin Project homepage, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+Коли елемент обрано, вкладка «Стилі» покаже всі застосовані стилі, а також усі змінені стилі (у вигляді закресленого тексту). Наприклад, якщо використати інспектора та натиснути на заголовок «Your Career in Web Development Starts Here» домашньої сторінки проєкту Odin, справа ви побачите всі стилі, які наразі застосовані до елемента:
-
+
# --assignment--
-Play around with Chrome Dev Tools and see if you can answer the following question.
+Розгляньте інструменти веброзробника Chrome та дізнайтесь, чи зможете відповісти на запитання.
# --question--
## --text--
-Which feature in the Elements pane allows you to select any element on a webpage by hovering over it?
+Яка функція панелі елементів дозволяє вибрати будь-який елемент сторінки, навівши на нього?
## --answers--
-Blue-highlighted icon
+Голубий значок
---
-Styles tab
+Вкладка «Стилі»
---
-Inspector tab
+Вкладка «Інспектор»
---
-HTML structure view
+Вигляд структури HTML
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
index c22f53661be..d304ca86bc9 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
@@ -1,43 +1,43 @@
---
id: 64a55a6102815a7d323aab8b
-title: The Box Model Lesson D
+title: Блокова модель. Урок №4
challengeType: 15
dashedName: the-box-model-lesson-d
---
# --description--
-In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+На панелі «Елементи» можна побачити повну структуру HTML. Ви можете натиснути на будь-який елемент панелі, щоб обрати певний елемент. Або ж ви можете натиснути на голубий значок зліва (показано нижче) та навести на будь-який елемент сторінки.
-
+
-When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on the The Odin Project homepage, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+Коли елемент обрано, вкладка «Стилі» покаже всі застосовані стилі, а також усі змінені стилі (у вигляді закресленого тексту). Наприклад, якщо використати інспектора та натиснути на заголовок «Your Career in Web Development Starts Here» домашньої сторінки проєкту Odin, справа ви побачите всі стилі, які наразі застосовані до елемента:
-
+
# --assignment--
-Play around with Chrome Dev Tools and see if you can answer the following question.
+Розгляньте інструменти веброзробника Chrome та дізнайтесь, чи зможете відповісти на запитання.
# --question--
## --text--
-In the Styles pane, what information can you view about an element when it is selected?
+Яку інформацію щодо наведеного елемента можна переглянути на панелі «Стилі»?
## --answers--
-HTML structure and CSS rules
+Структуру HTML та правила CSS
---
-Styles tab
+Вкладку «Стилі»
---
-Inspector tab
+Вкладку «Інспектор»
---
-Applied styles and overwritten styles.
+Застосовані та змінені стилі
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
index e2b9e44febc..43360ef1bb3 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
@@ -1,36 +1,36 @@
---
id: 64a669f77a7d00f97013ed0c
-title: The Box Model Lesson E
+title: Блокова модель. Урок №5
challengeType: 15
dashedName: the-box-model-lesson-e
---
# --description--
-Now that you understand the basic syntax of HTML and CSS, we’re going to get serious. The most important skills you need to master with CSS are positioning and layout. Changing fonts and colors is a crucial skill, but being able to put things exactly where you want them on a webpage is even more crucial. After all, how many webpages can you find where absolutely every element is just stacked one on top of another?
+Тепер ви розумієте базовий синтаксис HTML та CSS, тому перейдемо до серйознішого. Найважливіші навички CSS, які потрібно опанувати — це позиціювання та макет сторінки. Вміти змінювати шрифт та колір теж важливо, але вміти розміщувати елементи на вебсторінці важливіше. Зрештою, на скількох вебсторінках всі елементи наліплені один на одного?
-Learning to position elements on a webpage is not that difficult once you understand just a few key concepts. Unfortunately, many learners race through learning HTML and CSS to get to JavaScript and end up missing these fundamental concepts. This leads to frustration, pain, (and funny gifs) because all the JavaScript skills in the world are meaningless if you can’t stick your elements on the page where you need them to be. So with that in mind, let’s get started.
+Навчитись розміщувати елементи на вебсторінці не так вже і важко, якщо розібратись з ключовими поняттями. На жаль, багато учнів проскакують вивчення HTML та CSS, переходять до JavaScript та не знають цих основних понять. Це призводить до розчарування, болю (та смішних гіфок), оскільки знання JavaScript стає непотрібним, якщо ви не можете розмістити елементи на потрібному місці. Маючи це на увазі, розпочнемо.
# --question--
## --text--
-Why is it important to have a solid understanding of CSS in web development?
+Чому у веброзробці важливо розуміти CSS?
## --answers--
-It allows you to create complex animations and interactive effects.
+CSS дозволяє створити складні анімації та інтерактивні ефекти.
---
-It allows you to create complex animations and interactive effects.
+CSS дозволяє створити складні анімації та інтерактивні ефекти.
---
-It helps in optimizing database queries for improved performance.
+CSS допомагає оптимізувати запити бази даних для покращення роботи.
---
-It enables you to style and design webpages with precision and control.
+CSS дозволяє точно та контрольовано стилізувати і проєктувати вебсторінки.
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
index 4cbbaec8343..25da98856dc 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
@@ -1,14 +1,14 @@
---
id: 64a66c917a7d00f97013ed0d
-title: The Box Model Lesson F
+title: Блокова модель. Урок №6
challengeType: 15
dashedName: the-box-model-lesson-f
---
# --description--
-The first important concept that you need to understand to be successful in CSS is the box model. It isn’t complicated, but skipping over it now will cause you much frustration down the line.
+Щоб бути успішним у CSS, для початку потрібно знати про блокову модель. Це не складно, але якщо пропустити це поняття — пізніше буде складніше.
-Every single thing on a webpage is a rectangular box. These boxes can have other boxes in them and can sit alongside one another. You can get a rough idea of how this works by sticking a border on every item on the page like this:
+Будь-що на вебсторінці є прямокутним блоком. Ці блоки можуть містити інші блоки, а також можуть знаходитись поруч. Щоб краще розібратись з цим, додайте кордон до кожного елемента вебсторінки:
```css
* {
@@ -18,29 +18,29 @@ Every single thing on a webpage is a rectangular box. These boxes can have other
# --assignment--
-Add a border to every element on the page and see how the boxes are laid out.
+Додайте кордон до кожного елемента на сторінці та подивіться, як розміщені блоки.
# --question--
## --text--
-What is the fundamental concept in CSS that helps you understand the structure of elements as rectangular boxes?
+Яке основне поняття у CSS дозволяє зрозуміти структуру елементів як прямокутних блоків?
## --answers--
-Box-sizing
+Розмір блоку
---
-Box-shadow
+Тінь блоку
---
-Box model
+Блокова модель
---
-Border-box
+Кордон блоку
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
index ab042ee7f3b..a6abd4dbed8 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
@@ -1,50 +1,50 @@
---
id: 64a6702e7a7d00f97013ed0e
-title: The Box Model Lesson G
+title: Блокова модель. Урок №7
challengeType: 15
dashedName: the-box-model-lesson-g
---
# --description--
-
+
-OK, so there might be some circles in the above image… but when it comes to layout, they fit together like rectangular boxes and not circles. In the end, laying out a webpage and positioning all its elements is deciding how you are going to nest and stack these boxes.
+На зображені вище є пару кружечків… Але коли мова йде про макети, все сходиться як прямокутні блоки, а не кружечки. Зрештою, розміщення всіх елементів на вебсторінці вирішує, як ви вкладатимете та складатимете ці блоки.
-The only real complication here is that there are many ways to manipulate the size of these boxes, and the space between them, using padding, margin, and border. But to sum it up briefly:
+Єдине ускладнення в тому, що існує багато способів маніпулювати розмірами блоків та простором між ними за допомогою відступів, полів і кордонів. Якщо коротко підсумувати:
-- `padding` increases the space between the border of a box and the content of the box.
-- `margin` increases the space between the borders of a box and the borders of adjacent boxes.
-- `border` adds space (even if it’s only a pixel or two) between the margin and the padding.
+- `padding` (відступ) збільшує простір між кордоном та вмістом блоку;
+- `margin` (поле) збільшує простір між кордонами суміжних блоків;
+- `border` (кордон) додає простір між відступом та полем, навіть якщо це лише один піксель.
-Be sure to study the diagrams carefully.
+Обов’язково розглядайте схеми.
-
+
# --assignment--
-Add a border to every element on the page and see how the boxes are laid out.
+Додайте кордон до кожного елемента на сторінці та подивіться, як розміщені блоки.
# --question--
## --text--
-From inside to outside, what is the order of box-model properties?
+Який порядок властивостей блокової моделі від середини до зовні?
## --answers--
-Content, Margin, Padding, Border
+Вміст, поле, відступ, кордон
---
-Margin, Padding, Content, Border
+Поле, відступ, вміст, кордон
---
-Content, Padding, Border, Margin
+Вміст, відступ, кордон, поле
---
-Padding, Content, Border, Margin
+Відступ, вміст, кордон, поле
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
index 5423c67fb5c..0be9da8d0e4 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
@@ -1,35 +1,35 @@
---
id: 64a674937a7d00f97013ed0f
videoId: rIO5326FgPE
-title: The Box Model Lesson H
+title: Блокова модель. Урок №8
challengeType: 15
dashedName: the-box-model-lesson-h
---
# --description--
-Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with this lesson from MDN. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+Оскільки поняття блокової моделі є основним, розглянемо його детальніше у цьому уроці від MDN (англійською мовою). Він охоплює той самий матеріал, що й відео вище та ознайомить вас з вбудованими блоками, які ми розглянемо в наступному уроці. Зверніть увагу на приклади та приділіть деякий час, щоб поекспериментувати з редактором у браузері!
# --question--
## --text--
-What does the box-sizing CSS property do?
+Що робить властивість box-sizing у CSS?
## --answers--
-It determines the order of the box-model properties.
+Визначає порядок властивостей блокової моделі.
---
-It specifies the position of an element on the webpage.
+Вказує розташування елемента на вебсторінці.
---
-It controls how the total width and height of an element are calculated.
+Контролює обчислення ширини та висоти елемента.
---
-It sets the background color of an element.
+Налаштовує колір фону елемента.
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
index 0f70fbcec65..959fe5ce5a6 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
@@ -1,35 +1,35 @@
---
id: 64a6749a7a7d00f97013ed10
videoId: rIO5326FgPE
-title: The Box Model Lesson I
+title: Блокова модель. Урок №9
challengeType: 15
dashedName: the-box-model-lesson-i
---
# --description--
-Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with this lesson from MDN. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+Оскільки поняття блокової моделі є основним, розглянемо його детальніше у цьому уроці від MDN (англійською мовою). Він охоплює той самий матеріал, що й відео вище та ознайомить вас з вбудованими блоками, які ми розглянемо в наступному уроці. Зверніть увагу на приклади та приділіть деякий час, щоб поекспериментувати з редактором у браузері!
# --question--
## --text--
-What is the difference between the standard and alternative box model?
+Яка різниця між стандартною та альтернативною блоковими моделями?
## --answers--
-The standard box model calculates the width and height of an element based on the content alone, while the alternative box model calculates based on the content plus padding and border.
+Стандартна блокова модель обчислює ширину та висоту елементу на основі вмісту, а альтернативна блокова модель — на основі вмісту, доданого до відступу та кордону.
---
-The standard box model includes content, padding, and border, while the alternative box model includes only the content.
+Стандартна блокова модель містить вміст, відступ та кордон, а альтернативна блокова модель — лише вміст.
---
-The standard box model and the alternative box model are the same and have no differences.
+Стандартна й альтернативна блокові моделі одинакові та не мають жодних відмінностей.
---
-The standard box model includes only the content, while the alternative box model includes content, padding, and border.
+Стандартна блокова модель містить лише вміст, а альтернативна блокова модель — вміст, відступ та кордон.
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
index 1b311df62dd..ac2295992b2 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
@@ -1,35 +1,35 @@
---
id: 64a674a47a7d00f97013ed11
videoId: rIO5326FgPE
-title: The Box Model Lesson J
+title: Блокова модель. Урок №10
challengeType: 15
dashedName: the-box-model-lesson-j
---
# --description--
-Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with this lesson from MDN. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+Оскільки поняття блокової моделі є основним, розглянемо його детальніше у цьому уроці від MDN (англійською мовою). Він охоплює той самий матеріал, що й відео вище та ознайомить вас з вбудованими блоками, які ми розглянемо в наступному уроці. Зверніть увагу на приклади та приділіть деякий час, щоб поекспериментувати з редактором у браузері!
# --question--
## --text--
-Would you use margin or padding to create more space between 2 elements?
+Що б ви використали, щоб створити більше простору між двома елементами: поле чи відступ?
## --answers--
-Padding
+Відступ
---
-Both margin and padding can be used interchangeably
+Поле та відступ можна використовувати один замість одного
---
-Neither margin nor padding can be used to create more space between elements
+Ні поле, ні відступ не використовують для створення простору між елементами
---
-Margin
+Поле
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
index b782f8bb4f9..c446bcd2e4b 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
@@ -1,19 +1,19 @@
---
id: 64a674ac7a7d00f97013ed12
videoId: rIO5326FgPE
-title: The Box Model Lesson K
+title: Блокова модель. Урок №11
challengeType: 15
dashedName: the-box-model-lesson-k
---
# --description--
-Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with this lesson from MDN. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+Оскільки поняття блокової моделі є основним, розглянемо його детальніше у цьому уроці від MDN (англійською мовою). Він охоплює той самий матеріал, що й відео вище та ознайомить вас з вбудованими блоками, які ми розглянемо в наступному уроці. Зверніть увагу на приклади та приділіть деякий час, щоб поекспериментувати з редактором у браузері!
# --question--
## --text--
-Which CSS property would you use to create more space between the contents of an element and its border?
+Яку властивість CSS ви б використали, щоб створити більше простору між вмістом елемента та його кордоном?
## --answers--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
index e86aa50c732..62307dea741 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
@@ -1,27 +1,27 @@
---
id: 64a674b97a7d00f97013ed13
videoId: rIO5326FgPE
-title: The Box Model Lesson L
+title: Блокова модель. Урок №12
challengeType: 15
dashedName: the-box-model-lesson-l
---
# --description--
-Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with this lesson from MDN. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+Оскільки поняття блокової моделі є основним, розглянемо його детальніше у цьому уроці від MDN (англійською мовою). Він охоплює той самий матеріал, що й відео вище та ознайомить вас з вбудованими блоками, які ми розглянемо в наступному уроці. Зверніть увагу на приклади та приділіть деякий час, щоб поекспериментувати з редактором у браузері!
# --question--
## --text--
-Would you use margin or padding if you wanted two elements to overlap each other?
+Що б ви використали, щоб два елементи перекривали один одного: поле чи відступ?
## --answers--
-Padding
+Відступ
---
-Margin
+Поле
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
index d7296f95901..2c70ee80a7d 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
@@ -1,19 +1,19 @@
---
id: 64a674c27a7d00f97013ed14
videoId: rIO5326FgPE
-title: The Box Model Lesson M
+title: Блокова модель. Урок №13
challengeType: 15
dashedName: the-box-model-lesson-m
---
# --description--
-Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with this lesson from MDN. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+Оскільки поняття блокової моделі є основним, розглянемо його детальніше у цьому уроці від MDN (англійською мовою). Він охоплює той самий матеріал, що й відео вище та ознайомить вас з вбудованими блоками, які ми розглянемо в наступному уроці. Зверніть увагу на приклади та приділіть деякий час, щоб поекспериментувати з редактором у браузері!
# --question--
## --text--
-How do you set the alternative box model for all of your elements?
+Як налаштувати альтернативну блокову модель для всіх елементів?
## --answers--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
index e44f4fa7533..08191ec0f6f 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
@@ -1,14 +1,14 @@
---
id: 637f4e5872c65bc8e73dfe27
videoId: yqcd-XkxZNM
-title: Working With Text Lesson A
+title: Робота з текстом. Урок №1
challengeType: 15
dashedName: working-with-text-lesson-a
---
# --description--
-What would you expect the following text to output on an HTML page?
+Які вихідні дані ви очікуєте від цього тексту на HTML-сторінці?
```html
@@ -20,27 +20,27 @@ What would you expect the following text to output on an HTML page?
```
-It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below:
+Текст виглядає як два абзаци, і ви можете очікувати, що він відтвориться так само. Але не в цьому випадку, як можете побачити нижче:
-
+
-When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line.
+Коли браузер стикається з подібними рядками в HTML, він об’єднує їх. У результаті такого об’єднання весь текст групується в один довгий рядок.
-If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `` tag. +Якщо ви хочете створити абзаци в HTML, потрібно використати елемент абзацу, який додає новий рядок після кожного абзацу. Щоб створити елемент абзацу, напишіть текст в межах тегу `
`. -Changing our example from before to use paragraph elements fixes the issue: +Попередня проблема зникне, якщо ми використаємо елементи абзаців: - + # --assignment-- -Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above. +Перегляньте відео Кевіна Павелла про абзаци та заголовки у HTML (розміщене вище). # --question-- ## --text-- -How do you create a paragraph in HTML? +Як створити абзац в HTML? ## --answers-- diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md index 390147c9623..adcdb62532c 100644 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md +++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md @@ -1,38 +1,38 @@ --- id: 637f4e5f72c65bc8e73dfe28 -title: Working With Text Lesson B +title: Робота з текстом. Урок №2 challengeType: 15 dashedName: working-with-text-lesson-b --- # --description-- -Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings. +Заголовки відрізняються від інших текстових елементів у HTML: вони більші і жирніші за інший текст, що вказує на те, що вони є заголовками. -There are 6 different levels of headings starting from `