chore(i18n,curriculum): processed translations - new ukrainian (#44447)

curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md

@@ -0,0 +1,47 @@
+---
+id: bd7158d8c242eddfaeb5bd13
+title: Створіть веб-сторінку персонального портфоліо
+challengeType: 3
+forumTopicId: 301143
+dashedName: build-a-personal-portfolio-webpage
+---
+
+# --description--
+
+**Мета:** Створити [CodePen.io](https://codepen.io) застосунок, який за своїми функціями нагадує цей: <https://codepen.io/freeCodeCamp/full/zNBOYG>.
+
+Заповніть [ історії користувачів ](https://en.wikipedia.org/wiki/User_story), розміщені нижче, і отримайте доступ до всіх тестів, які потрібно пройти. Виконайте завдання у власному стилі.
+
+Ви можете використати HTML, JavaScript, and CSS для виконання цього проєкту. Рекомендовано використовувати звичайний CSS, тому що саме про це розповідається на уроках і вам варто попрактикуватися зі звичайним CSS. Якщо обираєте Bootstrap або SASS, можете користуватися ними. Не бажано використовувати додаткові технології (наприклад: jQuery, React, Angular або Vue), в іншому разі, це лише під вашу власну відповідальність. Під час роботи над іншими проєктами ви зможете попрацювати з різними технологічними стеками, як-от React. Ми візьмемо до уваги і спробуємо виправити всі звіти, що використовують запропонований технологічний стек у цьому проєкті. Вдалого програмування!
+
+**Історія користувача #1:** На моєму портфоліо повинен бути розділ-вітання з наступним id `welcome-section`.
+
+**Історія користувача #2:** Розділ для вітання повинен містити елемент `h1` з текстом.
+
+**Історія користувача #3:** На моєму портфоліо повинен бути розділ з проєктами з id `projects`.
+
+**Історія користувача #4:** Розділ з проєктами повинен містити щонайменше один елемент класу `project-tile` для зберігання проєктів.
+
+**Історія користувача #5:** Розділ з проєктами повинен містити щонайменше одне посилання на проєкт.
+
+**Історія користувача #6:** На моєму портфоліо повинна бути навігаційна панель з id `navbar`.
+
+**Історія користувача #7:** Навігаційна панель повинна містити щонайменше одне посилання, завдяки якому ми могли б перейти на інші розділи сторінки.
+
+**Історія користувача #8:** На моєму портфоліо повинно бути посилання з id `profile-link`, завдяки якому можна перейти на мої профілі GitHub і FCC у новій вкладці.
+
+**Історія користувача #9:** На моєму портфоліо повинен бути щонайменше один медіа-запит.
+
+**Історія користувача #10:** Висота розділу з вітанням повинна збігатися з висотою вікна перегляду.
+
+**Історія користувача #11:** Навігаційна панель повинна розміщуватися у верхній частині вікна перегляду.
+
+Ви можете створити проєкт за допомогою <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> й натиснути `Save` для створення власного фрагмента. Або ж ви можете скористатися цим CDN посиланням для проходження тестів у будь-якому комфортному для вас середовищі:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+Після завершення прикріпіть URL-адресу із пройденими тестами до проєкту, над яким працюєте.
+
+# --solutions--
+
+```html
+// solution required
+```

curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md

@@ -0,0 +1,55 @@
+---
+id: 587d78af367417b2b2512b04
+title: Створіть цільову сторінку продукту
+challengeType: 3
+forumTopicId: 301144
+dashedName: build-a-product-landing-page
+---
+
+# --description--
+
+**Objective:** Створіть застосунок [CodePen.io](https://codepen.io), функціонально схожий на цей: <https://codepen.io/freeCodeCamp/full/RKRbwL>.
+
+Заповніть [ історії користувачів ](https://en.wikipedia.org/wiki/User_story), розміщені нижче, і отримайте доступ до всіх тестів, які потрібно пройти. Проявіть при цьому свій власний стиль.
+
+Ви можете використати HTML, JavaScript, and CSS для виконання цього проєкту. Рекомендується використовувати звичайну CSS, тому що саме цю мову ви розглядали на уроках раніше і вам потрібно більше попрактикуватися. Якщо обираєте Bootstrap або SASS, можете користуватися ними. Не бажано використовувати додаткові технології (наприклад: jQuery, React, Angular або Vue), в іншому разі, це лише під вашу власну відповідальність. Під час роботи над іншими проєктами ви зможете попрацювати з різними технологічними стеками, як-от React. Ми звернемо увагу на усі запити щодо проблем стосовно рекомендованої технологічної теки для цього проєкту та спробуємо їх вирішити. Вдалого програмування!
+
+**Історія користувача #1:** На моїй цільовій сторінці продукту повинен бути `header` елемент з відповідним `id="header"`.
+
+**Історія користувача #2:** Я бачу зображення з `header` елементом з відповідним `id="header-img"`. Логотип компанії тут чудово пасуватиме.
+
+**Історія користувача #3:** У межах `#header` елементу, мені потрібно бачити `nav` елемент з відповідним `id="nav-bar"`.
+
+**Історія користувача #4:** Я бачу щонайменше три клікабельні елементи в `nav` елементі, кожен з яких класу `nav-link`.
+
+**Історія користувача #5:** Після натискання кнопки `.nav-link` у `nav` елементі я переходжу до відповідного розділу цільової сторінки.
+
+**Історія користувача #6:** Я можу переглянути вкладений відеоматеріал з `id="video"`.
+
+**Історія користувача #7:** На моїй цільовій сторінці повинен бути `form` елемент з відповідним `id="form"`.
+
+**Історія користувача #8:** У формі наявне `input` поле з `id="email"`, де можна ввести адресу електронної пошти.
+
+**Історія користувача #9:** На `#email` полі введення повинно бути місце для заповнення тексту, щоб користувач розумів, для чого це поле.
+
+**Історія користувача #10:** `#email` Поле введення використовує перевірку HTML5, щоб переконатися, що введений текст є електронною поштою.
+
+**Історія користувача #11:** У формі є можливість підтвердження `input` з відповідним `id="submit"`.
+
+**Історія користувача #12:** Після натискання `#submit` елементу, електронна пошта відправляють на статичну сторінку (використовуйте цю альтернативну URL-адресу: <https://www.freecodecamp.com/email-submit>).
+
+**Історія користувача #13:** Навігаційна панель повинна розміщуватися у верхній частині вікна перегляду.
+
+**Історія користувача #14:** На моїй цільовій сторінці продукту повинен бути щонайменше один медіа-запит.
+
+**Історія користувача #15:** Моя цільова сторінка продукту повинна використовувати CSS Flexbox щонайменше один раз.
+
+Ви можете створити свій проєкт <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> і натиснувши `Save`, аби створити власний фрагмент. Або ви можете використати це посилання CDN для запуску тестів у будь-якому середовищі, яке вам подобається: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+Після завершення прикріпіть URL адресу із пройденими тестами до проєкту, над яким працюєте.
+
+# --solutions--
+
+```html
+// solution required
+```

curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md

@@ -0,0 +1,57 @@
+---
+id: 587d78af367417b2b2512b03
+title: Створіть форму для опитування
+challengeType: 3
+forumTopicId: 301145
+dashedName: build-a-survey-form
+---
+
+# --description--
+
+**Objective:** Створіть застосунок [CodePen.io](https://codepen.io), функціонально схожий на цей: <https://codepen.io/freeCodeCamp/full/VPaoNP>.
+
+Заповніть нижче [ історії користувача](https://en.wikipedia.org/wiki/User_story) та отримаєте тести для проходження. Проявіть при цьому свій власний стиль.
+
+Ви можете використовувати HTML, JavaScript, та CSS, щоб завершити цей проєкт. Рекомендується використовувати звичайну CSS, тому що саме цю мову ви розглядали на уроках раніше і вам потрібно більше попрактикуватися. Якщо обираєте Bootstrap або SASS, можете користуватися ними. Для цього проєкту не рекомендовані додаткові застосунки (як наприклад, jQuery, React, Angular, чи Vue). Ви ризикуєте, використовуючи їх. Під час роботи над іншими проєктами ви зможете попрацювати з різними технологічними стеками, як-от React. Ми візьмемо до уваги і спробуємо виправити всі звіти, що використовують запропонований технологічний стек у цьому проєкті. Вдалого кодування!
+
+**Історія користувача #1: **Я можу бачити заголовок `id="title"` текстом розміром Н1.
+
+**Історія користувача #2: ** Я можу бачити коротке пояснення `id="description"` текстом розміром P.
+
+** історія користувача #3:** я бачу форму `` с `id="survey-form"`.
+
+**Історія користувача #4:** Всередині елементу форми, мені необхідно ввести ім'я в поле з `id="name"`.
+
+**Історія користувача #5:** Всередині елементу форми, мені необхідно ввести електронну пошту у полі з `id="email"`.
+
+**Історія користувача #6:** Якщо я введу електронну пошту, неправильно відформатовану, я побачу помилку перевірки HTML5.
+
+**Історія користувача #7:** Всередині форми я можу ввести число у полі `id="number"`.
+
+**Історія користувача #8:** Якщо я введу не числа з номером введення, я побачу помилку перевірки HTML5.
+
+**Історія користувача #9:** Якщо я введу числа поза межами діапазону введення, що позначені по `min` and `max` атрибутам, я побачу помилку перевірки HTML5.
+
+**Історія користувача #10:** Для назви, електронної пошти і поля введення чисел у межах форми, я можу побачити, що відповідні ярлики, які описують призначення кожного поля, супроводжуються певними ідентифікаторами: `id="name-label"`, `id="email-label"`, й `id="number-label"`.
+
+**Історія користувача #11:** У полі введення назви, електронної пошти та ін., я можу побачити надані текстом заповнювача описи або інструкції для кожного з полів.
+
+**Історія користувача #12:** Всередині елементу форми я можу обрати варіант зі спадного списку зі відповідним `id="dropdown"`.
+
+**Історія користувача #13:** У межах форми кожного елементу я можу обрати поля з однієї чи більше групи радіокнопок. Кожна група повинна бути згрупована зі використанням `name` атрибуту.
+
+**Історія користувача #14:** Я можу обрати декілька полів всередині форми елементу зі серії прапорців, кожен з яких повинен мати атрибут `value`.
+
+**Історія користувача #15:** Всередині форми елементу наприкінці я надаю `textarea` для додаткових коментарів.
+
+**Історія користувача #16:** Я можу затвердити усі внесені дані у форму елементу за допомогою кнопки `id="submit"`.
+
+Ви можете створити проєкт за допомогою <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> й натиснути `Save` для створення власного фрагмента. Або ви можете використати CDN посилання для проведення тесту у будь-якому середовищі: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+Після завершення надайте посилання до вашого проєкту з усіма пройденими тестами.
+
+# --solutions--
+
+```html
+// solution required
+```

curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md

@@ -0,0 +1,55 @@
+---
+id: 587d78b0367417b2b2512b05
+title: Створіть сторінку технічної документації
+challengeType: 3
+forumTopicId: 301146
+dashedName: build-a-technical-documentation-page
+---
+
+# --description--
+
+**Objective:** Створіть застосунок [CodePen.io](https://codepen.io), функціонально схожий на цей: <https://codepen.io/freeCodeCamp/full/NdrKKL>.
+
+Заповніть [user stories](https://en.wikipedia.org/wiki/User_story), розміщені нижче, та отримайте доступ до тестів, які потрібно пройти. Проявіть при цьому свій власний стиль.
+
+Ви можете використати HTML, JavaScript, and CSS для виконання цього проєкту. Рекомендується використовувати звичайну CSS, тому що саме цю мову ви розглядали на уроках раніше і вам потрібно більше відповідної практики. Якщо обираєте Bootstrap або SASS, можете користуватися ними. Не бажано використовувати додаткові технології (наприклад: jQuery, React, Angular або Vue), в іншому разі, це лише під вашу власну відповідальність. Під час роботи над іншими проєктами ви зможете попрацювати з різними технологічними стеками, як-от React. Ми візьмемо до уваги і спробуємо виправити всі звіти, що використовують запропонований технологічний стек у цьому проєкті. Вдалого програмування!
+
+**Історія користувача #1:** Я бачу `main` елемент з відповідним `id="main-doc"`, який містить основний вміст сторінки (технічна документація).
+
+**Історія користувача #2:** У межах `#main-doc` елементу, я бачу декілька `section` елементів, кожен з яких класу `main-section`. Їх повинно бути щонайменше 5.
+
+**Історія користувача #3:** Перший елемент у межах кожного `.main-section` повинен бути `header` елементом, який містить текст, що описує тему конкретного розділу.
+
+**Історія користувача #4:** Кожен `section` елемент класу `main-section` також повинен мати id, який за текстом відповідає кожному `header`, що міститься в ньому. Будь-який пробіл потрібно замінити знаком підкреслення (наприклад `section`, який містить заголовок "JavaScript і Java", повинен мати відповідний `id="JavaScript_and_Java"`).
+
+**Історія користувача #5:** `.main-section` елементи повинні містити щонайменше 10 `p` елементів загалом (не кожен).
+
+**Історія користувача #6:** `.main-section` елементи повинні містити щонайменше 5 `code` елементів загалом (не кожен).
+
+**Історія користувача #7:** `.main-section` елементи повинні містити щонайменше 5 `li` елементів загалом (не кожен).
+
+** Історія користувача #8:** Я бачу `nav` елемент з відповідними `id="navbar"`.
+
+**Історія користувача #9:** Елемент панелі навігації повинен містити один `header` елемент, який включає текст, що описує тему технічної документації.
+
+**Історія користувача #10:** Крім того, навігаційна панель повинна містити (`a`) елементи посилань класу `nav-link`. На кожен елемент класу `main-section` має бути одне посилання.
+
+**Історія користувача #11:**`header` елемент в межах навігаційної панелі повинен розміщуватися перед елементами (`a`) посилань.
+
+**Історія користувача #12:** Кожен елемент класу `nav-link` повинен містити текст, який відповідає `header` тексту у кожній `section` (наприклад, якщо у вас є розділ/заголовок "Вітаю, світе", ваша навігаційна панель повинна мати елемент, що містить текст "Вітаю, світе").
+
+**Історія користувача #13:** При натисканні на елемент навігаційної панелі, сторінка повинна скеровувати до відповідного розділу `main-doc` елементу (наприклад, у разі натискання на `nav-link` елемент, що містить текст "Вітаю, світе", сторінка скеровує до `section` елементу із таким же id та відповідним `header`.
+
+**Історія користувача #14:** На пристроях типової величини (ноутбуки, комп'ютери) елемент з `id="navbar"` повинен відображатися ліворуч на екрані і завжди бути видимим для користувача.
+
+**Історія користувача #15:** Моя сторінка технічної документації повинна використовувати щонайменше один медіа-запит.
+
+Ви можете створити свій проєкт за допомогою <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>, використовуючи цей CodePen </a> зразок і натиснувши `Save`, щоб створити власний фрагмент. Або ви можете використати це посилання CDN для запуску тестів у будь-якому середовищі, яке вам подобається: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+Після завершення прикріпіть URL адресу із пройденими тестами до проєкту, над яким працюєте.
+
+# --solutions--
+
+```html
+// solution required
+```

curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md

@@ -0,0 +1,43 @@
+---
+id: bd7158d8c442eddfaeb5bd18
+title: Створіть пам'ятну сторінку
+challengeType: 3
+forumTopicId: 301147
+dashedName: build-a-tribute-page
+---
+
+# --description--
+
+**Завдання:** Створіть [CodePen.io](https://codepen.io) застосунок, який схожий за функціями на:<https://codepen.io/freeCodeCamp/full/zNqgVx>.
+
+Нижче заповніть [ історії користувачів ](https://en.wikipedia.org/wiki/User_story) і отримайте доступ до тестів, котрі потрібно пройти. Виконайте завдання у власному стилі.
+
+Ви можете використати HTML, JavaScript, and CSS для завершення цього проєкту. Рекомендується використовувати звичайну CSS, тому що саме цю мову ви розглядали на уроках раніше і вам потрібно більше попрактикуватися. Якщо ви оберете Bootstrap або SASS, то можете користуватися ними. Не бажано використовувати додаткові технології (наприклад: jQuery, React, Angular або Vue), в іншому разі, це лише під вашу власну відповідальність. Під час роботи над іншими проєктами ви зможете попрацювати з різними технологічними стеками, як-от React. Ми візьмемо до уваги і спробуємо виправити всі звіти, що використовують запропонований технологічний стек у цьому проєкті. Вдалого програмування!
+
+** Історія користувача #1:** Моя пам'ятна сторінка повинна містити елемент з відповідним `id="main"`, котрий містить усі інші елементи.
+
+** Історія користувача #2: ** Мені потрібно бачити елемент з відповідним `id="title"`, котрий містить рядок (наприклад текст) і описує тему пам'ятної сторінки. (наприклад "Лікар Норман Борлау").
+
+** Історія користувача #3:** Мені потрібно бачити або `figure`, або `div` елемент з відповідними `id="img-div"`.
+
+**Історія користувача #4:** У межах `img-div` елементу, мені потрібно бачити `img` елемент з відповідним `id="image"`.
+
+**Історія користувача #5:** У межах `img-div` елементу, мені потрібно бачити елемент з відповідним `id="img-caption"`, котрий містить текстовий контент, який описує зображення яке показується в `img-div`.
+
+**Історія користувача #6:** Мені потрібно бачити елемент з відповідним `id="tribute-info"`, котрий містить текстовий контент, який описує пам'ятну сторінку.
+
+**Історія користувача#7:** Мені потрібно бачити `a` елемент з відповідним `id="tribute-link"`, котрий дає посилання на зовнішній сайт, який містить додаткову інформацію про тему пам'ятної сторінки. ПІДКАЗКА: Ви повинні надати вашому елементу атрибут у формі `target` і налаштувати його до `_blank` для того щоб ваше посилання відкрилося у новій вкладці(т.к. `target="_blank"`).
+
+**Історія користувача #8:**Елемент`img`повинен у відповідь змінити свій розмір, у зв'язку з шириною його початкового елементу, без перевищення його оригінального розміру.
+
+**Історія користувача#9:** Елемент `img` повинен знаходитись у центрі в межах його початкового елементу.
+
+Ви можете створити проєкт за допомогою <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> й натиснути `Save` для створення власного фрагмента. Або ж ви можете скористатися цим CDN посиланням для проходження тестів у будь-якому комфортному для вас середовищі:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
+
+Після того як ви завершили, прикріпіть URL до вашому проєкту, над яким ви працюєте, з усіма пройденими тестами.
+
+# --solutions--
+
+```html
+// solution required
+```