chore(i18n,curriculum): processed translations - new ukrainian (#44447)
This commit is contained in:
camperbot
GitHub
@ -25,7 +25,7 @@ Não inclua aspas (simples ou duplas) na saída.
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
Sequências de cartas 2, 3, 4, 5, 6 deve retornar `5 Bet`
|
Sequência de cartas 2, 3, 4, 5, 6 deve retornar a string `5 Bet`
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
|||||||
@ -0,0 +1,21 @@
|
|||||||
|
---
|
||||||
|
id: 561add10cb82ac38a17523bc
|
||||||
|
title: Back End розробка та сертифікація API
|
||||||
|
challengeType: 7
|
||||||
|
isPrivate: true
|
||||||
|
tests:
|
||||||
|
-
|
||||||
|
id: bd7158d8c443edefaeb5bdef
|
||||||
|
title: Мікросервіс Timestamp
|
||||||
|
-
|
||||||
|
id: bd7158d8c443edefaeb5bdff
|
||||||
|
title: Мікросервіс синтаксичного аналізатора заголовків запиту
|
||||||
|
-
|
||||||
|
id: bd7158d8c443edefaeb5bd0e
|
||||||
|
title: Мікросервіс скорочування URL-адрес
|
||||||
|
-
|
||||||
|
id: 5a8b073d06fa14fcfde687aa
|
||||||
|
title: Фітнес-трекер
|
||||||
|
-
|
||||||
|
id: bd7158d8c443edefaeb5bd0f
|
||||||
|
title: Мікросервіс метаданих файлу
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
---
|
||||||
|
id: 5e46fc95ac417301a38fb934
|
||||||
|
title: Аналіз даних за допомогою сертифікату Python
|
||||||
|
challengeType: 7
|
||||||
|
isPrivate: true
|
||||||
|
tests:
|
||||||
|
-
|
||||||
|
id: 5e46f7e5ac417301a38fb928
|
||||||
|
title: Калькулятор середньоквадратичного відхилення
|
||||||
|
-
|
||||||
|
id: 5e46f7e5ac417301a38fb929
|
||||||
|
title: Аналізатор демографічних даних
|
||||||
|
-
|
||||||
|
id: 5e46f7f8ac417301a38fb92a
|
||||||
|
title: Візуалізатор медичних даних
|
||||||
|
-
|
||||||
|
id: 5e46f802ac417301a38fb92b
|
||||||
|
title: Візуалізатор часового ряду перегляду сторінки
|
||||||
|
-
|
||||||
|
id: 5e4f5c4b570f7e3a4949899f
|
||||||
|
title: Прогнозування змін рівня моря
|
||||||
|
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
---
|
||||||
|
id: 5a553ca864b52e1d8bceea14
|
||||||
|
title: Сертифікація Візуалізації Даних
|
||||||
|
challengeType: 7
|
||||||
|
isPrivate: true
|
||||||
|
tests:
|
||||||
|
-
|
||||||
|
id: bd7168d8c242eddfaeb5bd13
|
||||||
|
title: Візуалізуйте дані за допомогою гістограми
|
||||||
|
-
|
||||||
|
id: bd7178d8c242eddfaeb5bd13
|
||||||
|
title: Відобразити дані за допомогою діаграми розсіювання
|
||||||
|
-
|
||||||
|
id: bd7188d8c242eddfaeb5bd13
|
||||||
|
title: Візуалізувати дані за допомогою теплокарти
|
||||||
|
-
|
||||||
|
id: 587d7fa6367417b2b2512bbf
|
||||||
|
title: Візуалізувати дані за допомогою карти Хороплета
|
||||||
|
-
|
||||||
|
id: 587d7fa6367417b2b2512bc0
|
||||||
|
title: Візуалізувати дані за допомогою діаграми Treemap
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
---
|
||||||
|
id: 561acd10cb82ac38a17513bc
|
||||||
|
title: Сертифікація бібліотеки Front End розробки
|
||||||
|
challengeType: 7
|
||||||
|
isPrivate: true
|
||||||
|
tests:
|
||||||
|
-
|
||||||
|
id: bd7158d8c442eddfaeb5bd13
|
||||||
|
title: Створіть генератор випадкових цитат
|
||||||
|
-
|
||||||
|
id: bd7157d8c242eddfaeb5bd13
|
||||||
|
title: Створіть Markdown-програму попереднього перегляду
|
||||||
|
-
|
||||||
|
id: 587d7dbc367417b2b2512bae
|
||||||
|
title: Створіть драм-машину
|
||||||
|
-
|
||||||
|
id: bd7158d8c442eddfaeb5bd17
|
||||||
|
title: Створіть JavaScript калькулятор
|
||||||
|
-
|
||||||
|
id: bd7158d8c442eddfaeb5bd0f
|
||||||
|
title: Створіть таймер 25 + 5
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
---
|
||||||
|
id: 5e6021435ac9d0ecd8b94b00
|
||||||
|
title: Сертифікат інформаційної безпеки
|
||||||
|
challengeType: 7
|
||||||
|
isPrivate: true
|
||||||
|
tests:
|
||||||
|
-
|
||||||
|
id: 587d824a367417b2b2512c44
|
||||||
|
title: Перевірка цін на акції
|
||||||
|
-
|
||||||
|
id: 587d824a367417b2b2512c45
|
||||||
|
title: Анонімна панель повідомлень
|
||||||
|
-
|
||||||
|
id: 5e46f979ac417301a38fb932
|
||||||
|
title: Сканер портів
|
||||||
|
-
|
||||||
|
id: 5e46f983ac417301a38fb933
|
||||||
|
title: Програма для злому паролів SHA-1
|
||||||
|
-
|
||||||
|
id: 5e601c775ac9d0ecd8b94aff
|
||||||
|
title: Захищена мультиплеєрна гра в режимі реального часу
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
---
|
||||||
|
id: 561abd10cb81ac38a17513bc
|
||||||
|
title: Алгоритми JavaScript та сертифікація структури даних
|
||||||
|
challengeType: 7
|
||||||
|
isPrivate: true
|
||||||
|
tests:
|
||||||
|
-
|
||||||
|
id: aaa48de84e1ecc7c742e1124
|
||||||
|
title: Перевірка паліндромів
|
||||||
|
-
|
||||||
|
id: a7f4d8f2483413a6ce226cac
|
||||||
|
title: Конвертер римських цифр
|
||||||
|
-
|
||||||
|
id: 56533eb9ac21ba0edf2244e2
|
||||||
|
title: Шифр Цезаря
|
||||||
|
-
|
||||||
|
id: aff0395860f5d3034dc0bfc9
|
||||||
|
title: Перевірка телефонного номера
|
||||||
|
-
|
||||||
|
id: aa2e6f85cab2ab736c9a9b24
|
||||||
|
title: Касовий апарат
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
---
|
||||||
|
id: 660add10cb82ac38a17513be
|
||||||
|
title: Застарілий Бекенд Сертифікат
|
||||||
|
challengeType: 7
|
||||||
|
isPrivate: true
|
||||||
|
tests:
|
||||||
|
-
|
||||||
|
id: bd7158d8c443edefaeb5bdef
|
||||||
|
title: Мікросервіс Timestamp
|
||||||
|
-
|
||||||
|
id: bd7158d8c443edefaeb5bdff
|
||||||
|
title: Мікросервіс синтаксичного аналізатора заголовків запиту
|
||||||
|
-
|
||||||
|
id: bd7158d8c443edefaeb5bd0e
|
||||||
|
title: Мікросервіс скорочування URL посилань
|
||||||
|
-
|
||||||
|
id: bd7158d8c443edefaeb5bdee
|
||||||
|
title: Рівень абстракції пошуку зображень
|
||||||
|
-
|
||||||
|
id: bd7158d8c443edefaeb5bd0f
|
||||||
|
title: Мікросервіс метаданих файлу
|
||||||
|
-
|
||||||
|
id: bd7158d8c443eddfaeb5bdef
|
||||||
|
title: Створіть додаток для голосування
|
||||||
|
-
|
||||||
|
id: bd7158d8c443eddfaeb5bdff
|
||||||
|
title: Створіть додаток для координації нічного життя
|
||||||
|
-
|
||||||
|
id: bd7158d8c443eddfaeb5bd0e
|
||||||
|
title: Складіть графік фондового ринку
|
||||||
|
-
|
||||||
|
id: bd7158d8c443eddfaeb5bd0f
|
||||||
|
title: Керуйте клубом книготоргівлі
|
||||||
|
-
|
||||||
|
id: bd7158d8c443eddfaeb5bdee
|
||||||
|
title: Cтворіть копію Pinterest
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
---
|
||||||
|
id: 561add10cb82ac39a17513bc
|
||||||
|
title: Застаріла сертифікація візуалізації даних
|
||||||
|
challengeType: 7
|
||||||
|
isPrivate: true
|
||||||
|
tests:
|
||||||
|
-
|
||||||
|
id: bd7157d8c242eddfaeb5bd13
|
||||||
|
title: Створіть Markdown-програму попереднього перегляду
|
||||||
|
-
|
||||||
|
id: bd7156d8c242eddfaeb5bd13
|
||||||
|
title: Створіть таблицю лідерів-кемперів
|
||||||
|
-
|
||||||
|
id: bd7155d8c242eddfaeb5bd13
|
||||||
|
title: Створіть збірник рецептів
|
||||||
|
-
|
||||||
|
id: bd7154d8c242eddfaeb5bd13
|
||||||
|
title: Створіть гру Життя
|
||||||
|
-
|
||||||
|
id: bd7153d8c242eddfaeb5bd13
|
||||||
|
title: Створіть гру Roguelike Dungeon Crawler
|
||||||
|
-
|
||||||
|
id: bd7168d8c242eddfaeb5bd13
|
||||||
|
title: Візуалізуйте дані за допомогою гістограми
|
||||||
|
-
|
||||||
|
id: bd7178d8c242eddfaeb5bd13
|
||||||
|
title: Візуалізація даних за допомогою точкової діаграми
|
||||||
|
-
|
||||||
|
id: bd7188d8c242eddfaeb5bd13
|
||||||
|
title: Візуалізуйте дані за допомогою теплової карти
|
||||||
|
-
|
||||||
|
id: bd7198d8c242eddfaeb5bd13
|
||||||
|
title: Покажіть національну спільність за допомогою орієнтованого графу
|
||||||
|
-
|
||||||
|
id: bd7108d8c242eddfaeb5bd13
|
||||||
|
title: Картографічні дані по всьому світу
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
---
|
||||||
|
id: 561add10cb82ac38a17513be
|
||||||
|
title: Застарілий код Legacy
|
||||||
|
challengeType: 7
|
||||||
|
isPrivate: true
|
||||||
|
tests:
|
||||||
|
-
|
||||||
|
id: bd7158d8c242eddfaeb5bd13
|
||||||
|
title: Створити веб-сторінку персонального портфоліо
|
||||||
|
-
|
||||||
|
id: bd7158d8c442eddfaeb5bd13
|
||||||
|
title: Створити генератор випадкових цитат
|
||||||
|
-
|
||||||
|
id: bd7158d8c442eddfaeb5bd0f
|
||||||
|
title: Створити таймер 25 + 5 хвилин
|
||||||
|
-
|
||||||
|
id: bd7158d8c442eddfaeb5bd17
|
||||||
|
title: Створити калькулятор за допомогою JavaScript
|
||||||
|
-
|
||||||
|
id: bd7158d8c442eddfaeb5bd10
|
||||||
|
title: Показати місцеву погоду
|
||||||
|
-
|
||||||
|
id: bd7158d8c442eddfaeb5bd1f
|
||||||
|
title: Використовувати Twitch JSON API
|
||||||
|
-
|
||||||
|
id: bd7158d8c442eddfaeb5bd18
|
||||||
|
title: Стилізувати стрічку новин на Camper News
|
||||||
|
-
|
||||||
|
id: bd7158d8c442eddfaeb5bd19
|
||||||
|
title: Вбудувати опцію перегляду Вікіпедії
|
||||||
|
-
|
||||||
|
id: bd7158d8c442eedfaeb5bd1c
|
||||||
|
title: Створити гру Хрестики-нулики
|
||||||
|
-
|
||||||
|
id: bd7158d8c442eddfaeb5bd1c
|
||||||
|
title: Створити гру Simon
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
---
|
||||||
|
id: 561add10cb82ac38a17213bd
|
||||||
|
title: Застаріла сертифікація програмного забезпечення повного циклу
|
||||||
|
challengeType: 7
|
||||||
|
isPrivate: true
|
||||||
|
tests:
|
||||||
|
-
|
||||||
|
id: 561add10cb82ac38a17513bc
|
||||||
|
title: Сертифікація адаптивного вебдизайну
|
||||||
|
-
|
||||||
|
id: 561abd10cb81ac38a17513bc
|
||||||
|
title: Алгоритми JavaScript та Сертифікація структури даних
|
||||||
|
-
|
||||||
|
id: 561acd10cb82ac38a17513bc
|
||||||
|
title: Сертифікація бібліотек Front End
|
||||||
|
-
|
||||||
|
id: 5a553ca864b52e1d8bceea14
|
||||||
|
title: Сертифікація візуалізації даних
|
||||||
|
-
|
||||||
|
id: 561add10cb82ac38a17523bc
|
||||||
|
title: Сертифікація API та мікросервісів
|
||||||
|
-
|
||||||
|
id: 561add10cb82ac38a17213bc
|
||||||
|
title: Інформаційна безпека попередніх версій та сертифікат якості
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
---
|
||||||
|
id: 561add10cb82ac38a17213bc
|
||||||
|
title: Інформаційна безпека попередніх версій та сертифікат якості
|
||||||
|
challengeType: 7
|
||||||
|
isPrivate: true
|
||||||
|
tests:
|
||||||
|
-
|
||||||
|
id: 587d8249367417b2b2512c41
|
||||||
|
title: Метрично-імперський конвертер
|
||||||
|
-
|
||||||
|
id: 587d8249367417b2b2512c42
|
||||||
|
title: Система відстеження помилок
|
||||||
|
-
|
||||||
|
id: 587d824a367417b2b2512c43
|
||||||
|
title: Особиста бібліотека
|
||||||
|
-
|
||||||
|
id: 587d824a367417b2b2512c44
|
||||||
|
title: Перевірка цін на акції
|
||||||
|
-
|
||||||
|
id: 587d824a367417b2b2512c45
|
||||||
|
title: Анонімна панель повідомлень
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
---
|
||||||
|
id: 5e46fc95ac417301a38fb935
|
||||||
|
title: Машинне навчання з отриманням сертифікату Python
|
||||||
|
challengeType: 7
|
||||||
|
isPrivate: true
|
||||||
|
tests:
|
||||||
|
-
|
||||||
|
id: 5e46f8d6ac417301a38fb92d
|
||||||
|
title: Камінь-ножиці-папір
|
||||||
|
-
|
||||||
|
id: 5e46f8dcac417301a38fb92e
|
||||||
|
title: Класифікатор зображень котів і собак
|
||||||
|
-
|
||||||
|
id: 5e46f8e3ac417301a38fb92f
|
||||||
|
title: Інструмент рекомендацій книг із використанням KNN
|
||||||
|
-
|
||||||
|
id: 5e46f8edac417301a38fb930
|
||||||
|
title: Калькулятор лінійної регресії витрат на охорону здоров'я
|
||||||
|
-
|
||||||
|
id: 5e46f8edac417301a38fb931
|
||||||
|
title: Нейронна мережа для класифікації текстів SMS
|
||||||
|
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
---
|
||||||
|
id: 5e611829481575a52dc59c0e
|
||||||
|
title: Сертифікат забезпечення якості
|
||||||
|
challengeType: 7
|
||||||
|
isPrivate: true
|
||||||
|
tests:
|
||||||
|
-
|
||||||
|
id: 587d8249367417b2b2512c41
|
||||||
|
title: Конвертер метрично-британських величин
|
||||||
|
-
|
||||||
|
id: 587d8249367417b2b2512c42
|
||||||
|
title: Система відстеження помилок
|
||||||
|
-
|
||||||
|
id: 587d824a367417b2b2512c43
|
||||||
|
title: Персональна бібліотека
|
||||||
|
-
|
||||||
|
id: 5e601bf95ac9d0ecd8b94afd
|
||||||
|
title: Програма для розв'язування судоку
|
||||||
|
-
|
||||||
|
id: 5e601c0d5ac9d0ecd8b94afe
|
||||||
|
title: Перекладач американської та британської англійської
|
||||||
|
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
---
|
||||||
|
id: 606243f50267e718b1e755f4
|
||||||
|
title: Сертифікація реляційних баз даних
|
||||||
|
challengeType: 7
|
||||||
|
isPrivate: true
|
||||||
|
tests:
|
||||||
|
-
|
||||||
|
id: 5f1a4ef5d5d6b5ab580fc6ae
|
||||||
|
title: База даних небесних тіл
|
||||||
|
-
|
||||||
|
id: 5f9771307d4d22b9d2b75a94
|
||||||
|
title: База даних чемпіонату світу
|
||||||
|
-
|
||||||
|
id: 5f87ac112ae598023a42df1a
|
||||||
|
title: Планувальник зустрічей в салоні
|
||||||
|
-
|
||||||
|
id: 602d9ff222201c65d2a019f2
|
||||||
|
title: База даних періодичної таблиці
|
||||||
|
-
|
||||||
|
id: 602da04c22201c65d2a019f4
|
||||||
|
title: Гра на відгадування чисел
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
---
|
||||||
|
id: 561add10cb82ac38a17513bc
|
||||||
|
title: Сертифікація з адаптивного веб-дизайну
|
||||||
|
challengeType: 7
|
||||||
|
isPrivate: true
|
||||||
|
tests:
|
||||||
|
-
|
||||||
|
id: bd7158d8c442eddfaeb5bd18
|
||||||
|
title: Створіть пам'ятну сторінку
|
||||||
|
-
|
||||||
|
id: 587d78af367417b2b2512b03
|
||||||
|
title: Створіть форму опитування
|
||||||
|
-
|
||||||
|
id: 587d78af367417b2b2512b04
|
||||||
|
title: Створіть цільову сторінку продукту
|
||||||
|
-
|
||||||
|
id: 587d78b0367417b2b2512b05
|
||||||
|
title: Створіть сторінку технічної документації
|
||||||
|
-
|
||||||
|
id: bd7158d8c242eddfaeb5bd13
|
||||||
|
title: Створіть сайт з персональним портфоліо
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
---
|
||||||
|
id: 5e44431b903586ffb414c951
|
||||||
|
title: Наукові обчислення за допомогою сертифікату Python
|
||||||
|
challengeType: 7
|
||||||
|
isPrivate: true
|
||||||
|
tests:
|
||||||
|
-
|
||||||
|
id: 5e44412c903586ffb414c94c
|
||||||
|
title: Арифметичне форматування
|
||||||
|
-
|
||||||
|
id: 5e444136903586ffb414c94d
|
||||||
|
title: Калькулятор часу
|
||||||
|
-
|
||||||
|
id: 5e44413e903586ffb414c94e
|
||||||
|
title: Додаток для ведення бюджету
|
||||||
|
-
|
||||||
|
id: 5e444147903586ffb414c94f
|
||||||
|
title: Калькулятор площі многокутника
|
||||||
|
-
|
||||||
|
id: 5e44414f903586ffb414c950
|
||||||
|
title: Калькулятор ймовірностей
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
---
|
||||||
|
id: 587d774c367417b2b2512a9c
|
||||||
|
title: Додайте альтернативний текст до зображень для людей з вадами зору
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cPp7VfD'
|
||||||
|
forumTopicId: 16628
|
||||||
|
dashedName: add-a-text-alternative-to-images-for-visually-impaired-accessibility
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Цілком імовірно, що ви бачили атрибут `alt` тегу `img` в інших завданнях. Текст атрибуту `alt` описує вміст зображення та забезпечує його текстовий замінник. Атрибут `alt` допомагає у випадках, коли зображення не завантажується, або яке користувач не бачить. Пошукові системи також використовують його, щоб визначити вміст зображення та включити його в результати пошуку. Наприклад:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img src="importantLogo.jpeg" alt="Company logo">
|
||||||
|
```
|
||||||
|
|
||||||
|
Люди з вадами зору використовують зчитувачі екрану, що перетворюють контент сайту в аудіо формат. Вони не отримають інформацію, якщо вона подана тільки візуально. Що стосується зображень, програма зчитування з екрану може мати доступ до атрибуту `alt` і зчитувати їхній вміст, щоб передати ключову інформацію.
|
||||||
|
|
||||||
|
Якісний текст атрибуту `alt` надає програмі зчитування з екрану короткий опис зображення. Завжди додавайте атрибут `alt` до вашого зображення. Згідно зі специфікаціями HTML5, наразі це вважається обов'язковим.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Кіт Кампер є одночасно ніндзя-кодувальником і справжнім ніндзя, який створює сайт, щоб поділитися знаннями. Фото профілю, яке він використовує, відображає його навички, тож усім відвідувачам сайту слід його цінувати. Додайте атрибут `alt` в тег `img`, який пояснює, що Кіт Кампер займається карате. (Зображення `src` не має посилання на існуючий файл, тож ви маєте побачити текст `alt` на дисплеї.)
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш теґ `img` повинен містити атрибут `alt` і не має бути порожнім.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('img').attr('alt'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img src="doingKarateWow.jpeg">
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img src="doingKarateWow.jpeg" alt="Someone doing karate">
|
||||||
|
```
|
||||||
@ -0,0 +1,105 @@
|
|||||||
|
---
|
||||||
|
id: 587d778b367417b2b2512aa8
|
||||||
|
title: Додайте доступне поле для вибору дати
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cR3bRbCV'
|
||||||
|
forumTopicId: 301008
|
||||||
|
dashedName: add-an-accessible-date-picker
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Форми часто містять поле `input`, яке можна використовувати, щоб створити декілька різних елементів керування формою. Атрибут `type` на цьому елементі позначає, який різновид елементу `input` буде створений.
|
||||||
|
|
||||||
|
Ви могли помітити типи введення `text` і `submit` у попередніх завданнях; HTML5 запропонував опцію, щоб вказати поле `date`. Залежно від підтримки браузера, поле вибору дати з'являється в полі `input`, коли воно у фокусі, що спрощує заповнення форми для всіх користувачів.
|
||||||
|
|
||||||
|
У старих браузерах за замовчуванням буде відтворюватися тип `text`, тож варто показати користувачам очікуваний формат дати в `label` або тексті `placeholder` про всяк випадок.
|
||||||
|
|
||||||
|
Наприклад:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<label for="input1">Enter a date:</label>
|
||||||
|
<input type="date" id="input1" name="input1">
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Кіт Кампер організовує турнір у Mortal Kombat і хоче опитати своїх супротивників, щоб визначити найкращу дату. Додайте теґ `input` з атрибутом `type` для `date`, атрибут `id` для `pickdate` і атрибут `name` для `date`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код має додати один теґ `input` для поля вибору дати.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('input').length == 2);
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш теґ `input` повинен містити атрибут `type` зі значенням `date`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('input').attr('type') == 'date');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш теґ `input` повинен містити атрибут `id` зі значенням `pickdate`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('input').attr('id') == 'pickdate');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш теґ `input` повинен містити атрибут `name` зі значенням `date`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('input').attr('name') == 'date');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Tournaments</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<h2>Mortal Kombat Tournament Survey</h2>
|
||||||
|
<form>
|
||||||
|
<p>Tell us the best date for the competition</p>
|
||||||
|
<label for="pickdate">Preferred Date:</label>
|
||||||
|
|
||||||
|
<!-- Only change code below this line -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Only change code above this line -->
|
||||||
|
|
||||||
|
<input type="submit" name="submit" value="Submit">
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Tournaments</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<h2>Mortal Kombat Tournament Survey</h2>
|
||||||
|
<form>
|
||||||
|
<p>Tell us the best date for the competition</p>
|
||||||
|
<label for="pickdate">Preferred Date:</label>
|
||||||
|
<input type="date" id="pickdate" name="date">
|
||||||
|
<input type="submit" name="submit" value="Submit">
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
---
|
||||||
|
id: 587d778f367417b2b2512aad
|
||||||
|
title: >-
|
||||||
|
Щоб уникнути проблем, пов'язаних із дальтонізмом, ретельно добирайте кольори, що передають інформацію
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c437as3'
|
||||||
|
forumTopicId: 301011
|
||||||
|
dashedName: >-
|
||||||
|
avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Існують різні види дальтонізму. Вони можуть варіюватися від зниженої чутливості до певної частоти світлової хвилі до повної нездатності бачити колір. Найрозповсюдженішим різновидом є знижена чутливість до розпізнавання зеленого кольору.
|
||||||
|
|
||||||
|
Наприклад, якщо подібні між собою зелені кольори є на передньому та задньому планах вашого контенту, користувач із дальтонізмом може їх не розрізнити. Подібні один до одного кольори вважаються сусідніми на спектральному колі, тож не слід використовувати їхні комбінації для передачі важливої інформації.
|
||||||
|
|
||||||
|
**Примітка:** деякі онлайн-інструменти вибору кольорів мають візуальні симуляції того, як бачать кольори люди з різними видами дальтонізму. Це чудові ресурси на додачу до онлайн-калькуляторів для перевірки контрасту.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Кіт Кампер тестує різні стилі для важливої кнопки, проте жовтий (`#FFFF33`) колір фону `background-color` і зелений (`#33FF33`) колір тексту `color` розташовані по сусідству на спектральному колі, і їх майже не розрізнити користувачам із дальтонізмом. (Їхня схожа освітленість також зане проходитьперевірку на коефіцієнт контрасності). Замініть колір тексту `color` на темно-блакитний (`#003366`), щоб вирішити обидві проблеми.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код має змінити колір тексту `color` для кнопки `button` на темно-блакитний.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('button').css('color') == 'rgb(0, 51, 102)');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
button {
|
||||||
|
color: #33FF33;
|
||||||
|
background-color: #FFFF33;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Danger!</h1>
|
||||||
|
</header>
|
||||||
|
<button>Delete Internet</button>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
button {
|
||||||
|
color: #003366;
|
||||||
|
background-color: #FFFF33;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Danger!</h1>
|
||||||
|
</header>
|
||||||
|
<button>Delete Internet</button>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
---
|
||||||
|
id: 587d778f367417b2b2512aac
|
||||||
|
title: Щоб уникнути проблем, пов'язаних із дальтонізмом, використовуйте належну контрастність
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cmzMEUw'
|
||||||
|
forumTopicId: 301012
|
||||||
|
dashedName: avoid-colorblindness-issues-by-using-sufficient-contrast
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Колір є величезною частиною візуального дизайну, але його використання призводить до двох проблем, пов'язаних із доступністю для людей з обмеженими можливостями. По-перше, колір не слід використовувати як єдиний спосіб передачі важливої інформації, адже користувачі, що використовують програми зчитування з екрану не матимуть змоги його побачити. По-друге, кольори переднього та заднього планів потребують належної контрастності, щоб користувачі з дальтонізмом могли їх розрізнити.
|
||||||
|
|
||||||
|
Попередні завдання були пов'язані з впровадженням текстових альтернатив для вирішення першої проблеми. В останньому завданні були представлені інструменти для перевірки контрастності, щоб розібратися з другою проблемою. Рекомендований WCAG коефіцієнт контрастності 4.5:1 підходить як для кольорів, так і для комбінацій відтінків сірого.
|
||||||
|
|
||||||
|
Користувачі з дальтонізмом часто стикаються з неможливістю відрізнити деякі кольори від інших - зазвичай це стосується тону, але іноді й яскравості. Можливо, ви пам'ятаєте, що коефіцієнт контрастності вираховується за допомогою відносної яскравості (або освітленості) значень кольорів переднього та заднього планів.
|
||||||
|
|
||||||
|
На практиці, коефіцієнта контрастності 4.5:1 можна досягнути за допомогою затемнення (додавання чорного) темнішого кольору та освітлення (додавання білого) світлішого. Темнішими тонами на кольоровому колі вважаються відтінки блакитного, фіолетового, пурпурового та червоного, тоді як світлішими є відтінки помаранчевого, жовтого, зеленого та синьо-зеленого.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat експериментує з кольорами тексту та тла його блоґу, але поточне поєднання зеленуватого фонового кольору `background-color` з коричневим текстом `color` має коефіцієнт контрастності 2.5:1. Ви можете легко налаштувати світлість кольорів, адже він визначив їх за допомогою CSS `hsl()` (що розшифровується як тон, насиченість, світлість), змінивши третій параметр. Збільшіть світлість кольору фону `background-color` з 35% до 55%, і зменшіть світлість кольору тексту `color` з 20% до 15%. Це покращить контрастність до значення 5.9:1.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код має змінити світлість кольору тексту `color` на значення 15%.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код має змінити світлість фонового кольору `background-color` на значення 55%.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
color: hsl(0, 55%, 20%);
|
||||||
|
background-color: hsl(120, 25%, 35%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||||
|
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||||
|
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||||
|
</article>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
color: hsl(0, 55%, 15%);
|
||||||
|
background-color: hsl(120, 25%, 55%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||||
|
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||||
|
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||||
|
</article>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
---
|
||||||
|
id: 587d778f367417b2b2512aae
|
||||||
|
title: Надайте значення посиланням, використовуючи текстовий опис
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c437DcV'
|
||||||
|
forumTopicId: 301013
|
||||||
|
dashedName: give-links-meaning-by-using-descriptive-link-text
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Користувачі пристроїв для читання з екрану мають різні варіанти контенту для читання. Ці варіанти містять перехід до елементів навігації (або їх пропуск), перехід до основного вмісту або отримання короткого змісту сторінки з заголовків. Ще одна опція - прослухати посилання, доступні на сторінці.
|
||||||
|
|
||||||
|
Зчитувачі з екрану, читають текст посилання або ж те, що знаходиться між теґами прив'язки (`a`). Список посилань на зразок "натисніть тут" або "читати більше" не допоможе у такому випадку. Замість цього використовуйте короткий, але змістовний, текст у межах теґів `a`, щоб користувачі змогли зрозуміти призначення лінку.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Текст посилання, який використовує Кіт Кампер, не дуже змістовний поза контекстом. Перемістіть теґи прив'язки (`a`) так, щоб вони огортали текст `information about batteries` замість `Click here`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код має перемістити теґи прив'язки `a` навколо слів `Click here` так, щоб огорнути слова `information about batteries`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('a')
|
||||||
|
.text()
|
||||||
|
.match(/^(information about batteries)$/g)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
Елемент `a` повинен мати атрибут `href` зі значенням порожнього рядка `""`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('a').attr('href') === '');
|
||||||
|
```
|
||||||
|
|
||||||
|
Елемент `a` повинен мати кінцевий теґ.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/<\/a>/g) &&
|
||||||
|
code.match(/<\/a>/g).length === code.match(/<a href=(''|"")>/g).length
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near. <a href="">Click here</a> for information about batteries</p>
|
||||||
|
</article>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near. Click here for <a href="">information about batteries</a></p>
|
||||||
|
</article>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,115 @@
|
|||||||
|
---
|
||||||
|
id: 587d7789367417b2b2512aa4
|
||||||
|
title: Як покращити доступність аудіоконтенту за допомогою елементу audio
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cVJVkcZ'
|
||||||
|
forumTopicId: 301014
|
||||||
|
dashedName: improve-accessibility-of-audio-content-with-the-audio-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Елемент HTML5 `audio` має семантичне значення в розмітці, якщо він огортає звуковий чи аудіо-потоковий контент. Аудіоконтент також потребує текстової альтернативи, щоб до нього мали доступ люди з глухотою чи вадами слуху. Її можна створити, розмістивши текст поряд з елементом або ж за допомогою посилання на субтитри.
|
||||||
|
|
||||||
|
Теґ `audio` підтримує атрибут `controls`. Він відображає елементи браузера за замовчуванням: відтворення, паузу та інші; а також підтримує функціональність клавіатури. Це логічний (булевий) атрибут, тобто такий, що не потребує значення, його присутність на тезі вмикає налаштування.
|
||||||
|
|
||||||
|
Наприклад:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<audio id="meowClip" controls>
|
||||||
|
<source src="audio/meow.mp3" type="audio/mpeg">
|
||||||
|
<source src="audio/meow.ogg" type="audio/ogg">
|
||||||
|
</audio>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Примітка:** Мультимедійний контент зазвичай має як візуальні, так і аудіальні компоненти. Він потребує синхронізованих субтитрів і розшифровки, щоб користувачі з вадами зору та/або слуху мали до нього доступ. Загалом, веб-розробник не є відповідальним за створення субтитрів чи розшифровки, але повинен вміти їх додавати.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Давайте відпочинемо від Camper Cat та зустрінемося з його приятелем Зерсіаксом (@zersiax), чемпіоном з доступності та користувачем програми для читання з екрану. Щоб почути запис роботи зчитувача з екрану, додайте елемент `audio` після `p`. Додайте атрибут `controls`. Потім розмістіть теґ `source` всередині теґів `audio`, налаштувавши значення атрибуту `src` на `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3`, а значення атрибуту `type` - на `"audio/mpeg"`.
|
||||||
|
|
||||||
|
**Примітка:** Запис може здатися занадто швидким і малозрозумілим, але це звичайна швидкість для користувачів зчитувачів з екрану.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код повинен містити один теґ `audio`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('audio').length === 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
Елемент `audio` повинен містити кінцевий теґ.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/<\/audio>/g).length === 1 &&
|
||||||
|
code.match(/<audio.*>[\s\S]*<\/audio>/g)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
Теґ `audio` повинен містити атрибут `controls`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('audio').attr('controls'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код повинен містити один теґ `source`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('source').length === 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
Теґ `source` повинен знаходитися всередині теґів `audio`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('audio').children('source').length === 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
Значення атрибута `src` на тезі `source` має повністю збігатися з посиланням в поясненнях.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('source').attr('src') ===
|
||||||
|
'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код повинен містити атрибут `type` на тезі `source` зі значенням audio/mpeg.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('source').attr('type') === 'audio/mpeg');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Real Coding Ninjas</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<p>A sound clip of Zersiax's screen reader in action.</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Real Coding Ninjas</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<p>A sound clip of Zersiax's screen reader in action.</p>
|
||||||
|
<audio controls>
|
||||||
|
<source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg"/>
|
||||||
|
</audio>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,161 @@
|
|||||||
|
---
|
||||||
|
id: 587d778a367417b2b2512aa5
|
||||||
|
title: Як покращити доступність графіків за допомогою Елемента figure
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cGJMqtE'
|
||||||
|
forumTopicId: 301015
|
||||||
|
dashedName: improve-chart-accessibility-with-the-figure-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
HTML5 впровадив елемент `figure` і пов'язаний з ним `figcaption`. При спільному використанні вони огортають візуальне відображення (зокрема зображення, діаграму або графік) з підписом. Поєднання обох елементів посилює доступність завдяки групуванню спорідненого контенту, а також наданню текстової альтернативи, що пояснює вміст `figure`.
|
||||||
|
|
||||||
|
Для візуалізації даних на кшталт графіків можна використовувати підпис із короткими відмітками прогнозів чи висновків для користувачів із вадами зору. Ще одна проблема полягає в тому, щоб перемістити табличні дані графіку за межі екрану (за допомогою CSS) для користувачів зчитувачів з екрану.
|
||||||
|
|
||||||
|
Ось приклад - зверніть увагу не те, що `figcaption` знаходиться всередині теґів `figure` і може поєднуватися з іншими елементами:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<figure>
|
||||||
|
<img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
|
||||||
|
<br>
|
||||||
|
<figcaption>
|
||||||
|
Master Camper Cat demonstrates proper form of a roundhouse kick.
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Кіт Кампер сумлінно працює над створенням гістограми з накопиченням, яка показує кількість часу на тиждень, що відводиться на тренування невловимості, бойових мистецв та володіння зброєю. Допоможіть йому краще структурувати сторінку, змінивши теґ `div`, який він використав, на теґ `figure`, а теґ the `p`, що оточує заголовок, на теґ `figcaption`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код повинен містити один теґ `figure`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('figure').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код повинен містити один теґ `figcaption`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('figcaption').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код не повинен містити жодних теґів `div`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('div').length == 0);
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код не повинен містити жодних теґів `p`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('p').length == 0);
|
||||||
|
```
|
||||||
|
|
||||||
|
Теґ `figcaption` має бути дочірнім елементом теґу `figure`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('figure').children('figcaption').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
Елемент `figure` повинен містити кінцевий теґ.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/<\/figure>/g) &&
|
||||||
|
code.match(/<\/figure>/g).length === code.match(/<figure>/g).length
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Training</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||||
|
<li><a href="#combat">Combat</a></li>
|
||||||
|
<li><a href="#weapons">Weapons</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
|
||||||
|
<!-- Only change code below this line -->
|
||||||
|
<div>
|
||||||
|
<!-- Stacked bar chart will go here -->
|
||||||
|
<br>
|
||||||
|
<p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>
|
||||||
|
</div>
|
||||||
|
<!-- Only change code above this line -->
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Training</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||||
|
<li><a href="#combat">Combat</a></li>
|
||||||
|
<li><a href="#weapons">Weapons</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<figure>
|
||||||
|
<!-- Stacked bar chart will go here -->
|
||||||
|
<br>
|
||||||
|
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||||
|
</figure>
|
||||||
|
</section>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,119 @@
|
|||||||
|
---
|
||||||
|
id: 587d778a367417b2b2512aa6
|
||||||
|
title: Як покращити доступність поля форми за допомогою Елементу Label
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cGJMMAN'
|
||||||
|
forumTopicId: 301016
|
||||||
|
dashedName: improve-form-field-accessibility-with-the-label-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Покращення доступності за допомогою семантичної розмітки HTML стосується використання як відповідних назв тегів, так і атрибутів. Наступні декілька завдань охоплюють деякі важливі сценарії використання атрибутів у формах.
|
||||||
|
|
||||||
|
Тег `label`, який огортає текст певного елемента керування формою, зазвичай це ім'я або мітка на вибору. Це додає більше змісту елементу і робить форму більш читабельною. Атрибут `for` тегу `label` явно пов'язує `label` з елементом керування формою і використовується програмами зчитування з екрану.
|
||||||
|
|
||||||
|
Ви ознайомилися з радіокнопками та їхніми мітками на уроці в розділі "База HTML". На цьому уроку, ми згорнули елемент введення радіокнопки всередині елемента `label` разом з текстом мітки для того, щоб зробити текст активним на екрані. Інший варіант — це використати атрибут `for`, про що йдеться у цьому уроці.
|
||||||
|
|
||||||
|
Значення атрибута `for` має збігатися зі значенням атрибута `id` елемента керування формою. Приклад:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<form>
|
||||||
|
<label for="name">Name:</label>
|
||||||
|
<input type="text" id="name" name="name">
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat очікує великого інтересу до своїх продуманих публікацій у блозі і хоче включити форму реєстрації електронною поштою. Додайте атрибут `for` до `label` електронної пошти, яка збігається з `id` на полі `input`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код має містити атрибут `for` у не пустому тезі `label`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('label').attr('for'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваше значення атрибута `for` має співпадати зі значенням `id` у полі `input` електронної адреси.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('label').attr('for') == 'email');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<form>
|
||||||
|
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||||
|
|
||||||
|
|
||||||
|
<label>Email:</label>
|
||||||
|
<input type="text" id="email" name="email">
|
||||||
|
|
||||||
|
|
||||||
|
<input type="submit" name="submit" value="Submit">
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
<article>
|
||||||
|
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||||
|
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||||
|
</article>
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||||
|
</article>
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
<article>
|
||||||
|
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||||
|
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||||
|
</article>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<form>
|
||||||
|
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||||
|
|
||||||
|
|
||||||
|
<label for="email">Email:</label>
|
||||||
|
<input type="text" id="email" name="email">
|
||||||
|
|
||||||
|
|
||||||
|
<input type="submit" name="submit" value="Submit">
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
<article>
|
||||||
|
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||||
|
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||||
|
</article>
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||||
|
</article>
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
<article>
|
||||||
|
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||||
|
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||||
|
</article>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,80 @@
|
|||||||
|
---
|
||||||
|
id: 587d778e367417b2b2512aab
|
||||||
|
title: Як покращити читабельність за допомогою контрасного тексту
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cKb3nCq'
|
||||||
|
forumTopicId: 301017
|
||||||
|
dashedName: improve-readability-with-high-contrast-text
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Низький контраст між кольорами тексту та фону може ускладнити читання тексту. Достатня контрастність покращує читабельність вмісту, але що саме означає "достатня"?
|
||||||
|
|
||||||
|
В рекомендаціях Web Content Accessibility Guidelines (WCAG) пропонується виставляти коефіцієнт контрастності від 4.5 до 1 для звичайного тексту. Коефіцієнт вираховується шляхом порівняння відносної яскравості двох кольорів. Співвідношення варіюється від 1:1 для одного й того ж кольору (без контрасту) до 21:1 для білого на фоні чорного (найбільший контраст). Існує багато онлайн-засобів, які перевіряють контрастність та розраховують для вас цей коефіцієнт.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Світло сірий текст на білому фоні в останньому пості блогу Кота Кампера зі співвідношенням коефіцієнта контрастності 1.5:1 ускладнює прочитання тексту. Змініть `color` тексту з наявного сірого (`#D3D3D3`) на темніший сірий (`#636363`), щоб покращити коефіцієнт контрастності до 6:1.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код повинен змінити текст `color` для `body` на темно-сірий.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('body').css('color') == 'rgb(99, 99, 99)');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код не повинен міняти колір фона `background-color` для `body`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('body').css('background-color') == 'rgb(255, 255, 255)');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
color: #D3D3D3;
|
||||||
|
background-color: #FFF;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||||
|
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||||
|
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||||
|
</article>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
color: #636363;
|
||||||
|
background-color: #FFF;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||||
|
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||||
|
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||||
|
</article>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
---
|
||||||
|
id: 587d774e367417b2b2512a9f
|
||||||
|
title: Перехід прямо до контенту, використовуючи елемент main
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cPp7zuE'
|
||||||
|
forumTopicId: 301018
|
||||||
|
dashedName: jump-straight-to-the-content-using-the-main-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
HTML5 ввів декілька нових елементів, які надають розробникам більше можливостей, а також містять функції спеціальних можливостей. Серед них теґи `main`, `header`, `footer`, `nav`, `article` і `section` та інші.
|
||||||
|
|
||||||
|
У браузері ці елементи за замовчуванням відображені як звичайний `div`. Однак, використання їх у тих випадках, коли це доречно, надає додаткового значення вашій розмітці. Назва тегу може вказувати на тип інформації, що в ньому міститься; це додає семантичного змісту до цього контенту. Допоміжні технології можуть отримати доступ до цієї інформації, щоб надати своїм користувачам кращий зміст сторінки чи варіанти навігації.
|
||||||
|
|
||||||
|
Як ви могли здогадатися, елемент `main` використовується, щоб огортати основний вміст, він має бути лише один на сторінку. Він призначений для зосередження на інформації, пов'язаної з центральною темою вашої сторінки. Він не повинен містити елементи, що повторюються на різних сторінках, на кшталт посилань чи банерів.
|
||||||
|
|
||||||
|
Тег `main` також має вбудовану функцію орієнтира, якою можуть скористатися допоміжні технології, для швидкого переходу до основного змісту. Ви могли зустрічати посилання "Jump to Main Content" у верхній частині сторінки — використання тегу `main` автоматично дає допоміжним пристроям таку можливість.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Кіт Кампер має кілька грандіозних ідей стосовно сторінки про зброю ніндзя. Допоможіть йому встановити розмітку, розмістивши початковий та кінцевий теги `main` між `header` і `footer` (які розглядаються в інших завданнях). Поки що залишіть теги `main` порожніми.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код має містити один теґ `main`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('main').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
Теги `main` мають знаходитися між кінцевим теґом `header` і початковим теґом `footer`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<header>
|
||||||
|
<h1>Weapons of the Ninja</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<footer></footer>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<header>
|
||||||
|
<h1>Weapons of the Ninja</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
<footer></footer>
|
||||||
|
```
|
||||||
@ -0,0 +1,76 @@
|
|||||||
|
---
|
||||||
|
id: 587d774c367417b2b2512a9d
|
||||||
|
title: Коли потрібно залишити атрибут alt текст порожнім
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cM9P4t2'
|
||||||
|
forumTopicId: 301019
|
||||||
|
dashedName: know-when-alt-text-should-be-left-blank
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Під час останнього завдання ви вивчили, що включати атрибут `alt` при використанні тегу `img` є обов'язковим. Хоча інколи фото можуть бути згрупованими з уже існуючим описом або використовуються лише для декорації. У таких випадках текст `alt` буде зайвим та необов'язковим.
|
||||||
|
|
||||||
|
Якщо до зображення вже існує текстовий вміст або зображення не має значення для сторінки, `img` все ще потребує атрибут `alt`, але його можна встановити як порожній рядок. Наприклад:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img src="visualDecoration.jpeg" alt="">
|
||||||
|
```
|
||||||
|
|
||||||
|
Фонові зображення також підпадають під мітку "декоративні". Однак вони зазвичай застосовуються з правилами CSS, і тому не є частиною процесу читання з екрану.
|
||||||
|
|
||||||
|
**Примітка:** Для зображень із підписом ви все одно можете додати `alt` текст, оскільки це допомагає пошуковим системам класифікувати вміст зображення.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat закодували макет сторінки для розділу блогу на своєму вебсайті. Вони планують додати візуальний розрив між двома статтями з декоративним зображенням самурайського меча. Додайте атрибут `alt` до тегу `img` і присвойте йому порожній рядок. (Зверніть увагу, що зображення `src` не посилається на фактичний файл — не хвилюйтесь, що на дисплеї не відображаються мечі.)
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш тег `img` має містити атрибут `alt`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(!($('img').attr('alt') == undefined));
|
||||||
|
```
|
||||||
|
|
||||||
|
Атрибуту `alt` має бути призначений порожній рядок.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('img').attr('alt') == '');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>To Come...</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<img src="samuraiSwords.jpeg">
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||||
|
<p>To Come...</p>
|
||||||
|
</article>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>To Come...</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||||
|
<p>To Come...</p>
|
||||||
|
</article>
|
||||||
|
```
|
||||||
@ -0,0 +1,244 @@
|
|||||||
|
---
|
||||||
|
id: 587d778d367417b2b2512aaa
|
||||||
|
title: Зробіть елементи видимими тільки програми екранного зчитування за допомогою Custom CSS
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cJ8QGkhJ'
|
||||||
|
forumTopicId: 301020
|
||||||
|
dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-css
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Ви помітили, що в жодному з попередніх завдань, пов'язаних із доступністю, не використовувався CSS? Це демонструє важливість використання логічної структури документа і семантично змістовних теґів у вашому контенті перед тим, як вводити візуальний дизайн.
|
||||||
|
|
||||||
|
Однак магія CSS також може поліпшити доступність вашої сторінки, якщо ви маєте на меті приховати вміст, призначений виключно для читання з екрану. Це трапляється, коли інформація міститься у візуальному форматі (наприклад, на графіку), але користувачі програми для читання потребують альтернативної подачі (у таблиці), щоб мати до неї доступ. CSS використовується для розміщення елементів екрану тільки для читання з візуальної зони вікна браузера.
|
||||||
|
|
||||||
|
Ось приклад правил CSS, які це здійснюють:
|
||||||
|
|
||||||
|
```css
|
||||||
|
.sr-only {
|
||||||
|
position: absolute;
|
||||||
|
left: -10000px;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
top: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Примітка:** Наступні підходи CSS НЕ будуть робити те саме:
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><code>display: none;</code> чи <code>visibility: hidden;</code> приховують вміст від усіх, включаючи користувачів програми зчитування з екрана</li>
|
||||||
|
<li>Нульові значення для піксельних розмірів, зокрема <code>width: 0px; height: 0px;</code> вилучають цей елемент з вашого документа, тобто програма для читання з екрана буде його ігнорувати</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat створив просто чудову гістограму для своєї навчальної сторінки, а для користувачів із вадами зору подав інформацію у таблиці. Таблиця вже має клас `sr-only`, але правила CSS ще не заповнені. Надайте елементу `position` значення `absolute`, елементу the `left` - значення `-10000px`, а елементам `width` і `height` - значення `1px`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код має встановити властивість `position` класу `sr-only` на значення `absolute`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.sr-only').css('position') == 'absolute');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код має встановити властивість `left` класу `sr-only` на значення `-10000px`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.sr-only').css('left') == '-10000px');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код має встановити властивість `width` класу `sr-only` на значення `1` піксель.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/width:\s*?1px/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код має встановити властивість `height` класу `sr-only` на значення `1` піксель.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/height:\s*?1px/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
.sr-only {
|
||||||
|
position: ;
|
||||||
|
left: ;
|
||||||
|
width: ;
|
||||||
|
height: ;
|
||||||
|
top: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Training</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||||
|
<li><a href="#combat">Combat</a></li>
|
||||||
|
<li><a href="#weapons">Weapons</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
|
||||||
|
<figure>
|
||||||
|
<!-- Stacked bar chart of weekly training -->
|
||||||
|
<p>[Stacked bar chart]</p>
|
||||||
|
<br />
|
||||||
|
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||||
|
</figure>
|
||||||
|
<table class="sr-only">
|
||||||
|
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th scope="col">Stealth & Agility</th>
|
||||||
|
<th scope="col">Combat</th>
|
||||||
|
<th scope="col">Weapons</th>
|
||||||
|
<th scope="col">Total</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Week One</th>
|
||||||
|
<td>3</td>
|
||||||
|
<td>5</td>
|
||||||
|
<td>2</td>
|
||||||
|
<td>10</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Week Two</th>
|
||||||
|
<td>4</td>
|
||||||
|
<td>5</td>
|
||||||
|
<td>3</td>
|
||||||
|
<td>12</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Week Three</th>
|
||||||
|
<td>4</td>
|
||||||
|
<td>6</td>
|
||||||
|
<td>3</td>
|
||||||
|
<td>13</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
.sr-only {
|
||||||
|
position: absolute;
|
||||||
|
left: -10000px;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
top: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Training</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||||
|
<li><a href="#combat">Combat</a></li>
|
||||||
|
<li><a href="#weapons">Weapons</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
|
||||||
|
<figure>
|
||||||
|
<!-- Stacked bar chart of weekly training -->
|
||||||
|
<p>[Stacked bar chart]</p>
|
||||||
|
<br />
|
||||||
|
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||||
|
</figure>
|
||||||
|
<table class="sr-only">
|
||||||
|
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th scope="col">Stealth & Agility</th>
|
||||||
|
<th scope="col">Combat</th>
|
||||||
|
<th scope="col">Weapons</th>
|
||||||
|
<th scope="col">Total</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Week One</th>
|
||||||
|
<td>3</td>
|
||||||
|
<td>5</td>
|
||||||
|
<td>2</td>
|
||||||
|
<td>10</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Week Two</th>
|
||||||
|
<td>4</td>
|
||||||
|
<td>5</td>
|
||||||
|
<td>3</td>
|
||||||
|
<td>12</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Week Three</th>
|
||||||
|
<td>4</td>
|
||||||
|
<td>6</td>
|
||||||
|
<td>3</td>
|
||||||
|
<td>13</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,106 @@
|
|||||||
|
---
|
||||||
|
id: 587d7790367417b2b2512aaf
|
||||||
|
title: Створіть навігаційні посилання з клавішами доступу HTML
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cQvmaTp'
|
||||||
|
forumTopicId: 301021
|
||||||
|
dashedName: make-links-navigable-with-html-access-keys
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
HTML пропонує атрибут `accesskey` для встановлення гарячої клавіші, що активує елемент або зосереджується на ньому. Додавання атрибута `accesskey` може покращити ефективність навігації для користувачів, здатних послуговуватися лише клавіатурою.
|
||||||
|
|
||||||
|
HTML5 дозволяє використовувати цей атрибут на будь-якому елементі, але він особливо корисний з інтерактивними елементами. Включає лінки, кнопки та керування формами.
|
||||||
|
|
||||||
|
Наприклад:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<button accesskey="b">Important Button</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat хоче додати клавіші доступу до посилань поряд з заголовками двох статей у блозі, щоб користувачі могли швидко перейти до повного тексту. Додайте атрибут `accesskey` до обох посилань і встановіть перший на `g` (for Garfield), а другий - на `c` (for Chuck Norris).
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код має додати атрибут `accesskey` до теґа `a` зі значенням `id` встановленим на `first`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#first').attr('accesskey'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код має додати атрибут `accesskey` до теґа `a` зі значенням `id`, встановленим на `second`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#second').attr('accesskey'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код має налаштувати атрибут `accesskey` на тезі `a` зі значенням `id`, встановленим на `first`, на `g`. Зауважте, що написання з великої чи маленької літери має значення.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#first').attr('accesskey') == 'g');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код має налаштувати атрибут `accesskey` на тезі `a` зі значенням `id`, встановленим на `second`, на `c`. Зауважте, що написання з великої чи маленької літери має значення.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#second').attr('accesskey') == 'c');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
|
||||||
|
|
||||||
|
<h2><a id="first" href="#">The Garfield Files: Lasagna as Training Fuel?</a></h2>
|
||||||
|
|
||||||
|
|
||||||
|
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
|
||||||
|
|
||||||
|
<h2><a id="second" href="#">Is Chuck Norris a Cat Person?</a></h2>
|
||||||
|
|
||||||
|
|
||||||
|
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||||
|
</article>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
|
||||||
|
|
||||||
|
<h2><a id="first" accesskey="g" href="#">The Garfield Files: Lasagna as Training Fuel?</a></h2>
|
||||||
|
|
||||||
|
|
||||||
|
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
|
||||||
|
|
||||||
|
<h2><a id="second" accesskey="c" href="#">Is Chuck Norris a Cat Person?</a></h2>
|
||||||
|
|
||||||
|
|
||||||
|
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||||
|
</article>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,116 @@
|
|||||||
|
---
|
||||||
|
id: 587d7788367417b2b2512aa3
|
||||||
|
title: Полегшіть навігацію сторінки за допомогою нижньої орієнтації екрану
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/crVrDh8'
|
||||||
|
forumTopicId: 301022
|
||||||
|
dashedName: make-screen-reader-navigation-easier-with-the-footer-landmark
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Елемент `footer`, подібно до `header` і `nav`, має вбудовану функцію областей, яка дозволяє допоміжним пристроям швидко перейти до них. Насамперед вони застосовуються для збереження інформації про авторські права або посилання на пов'язані з ними документи, які зазвичай знаходяться внизу сторінки.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Сторінка навчання Camper Cat успішно розвивається. Змініть `div` який використовувався, щоб відобразити інформацію про авторські права у нижній частині сторінки на елемент `footer`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код повинен містити один тег `footer`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('footer').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код не повинен містити жодних тегів `div`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('div').length == 0);
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код повинен містити відкритий і закритий тег `footer` tag.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/<footer>\s*© 2018 Camper Cat\s*<\/footer>/g));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Training</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||||
|
<li><a href="#combat">Combat</a></li>
|
||||||
|
<li><a href="#weapons">Weapons</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
<div>© 2018 Camper Cat</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Training</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||||
|
<li><a href="#combat">Combat</a></li>
|
||||||
|
<li><a href="#weapons">Weapons</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
---
|
||||||
|
id: 587d7787367417b2b2512aa1
|
||||||
|
title: Полегшіть навігацію сторінки за допомогою нижньої орієнтації екрану
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cB76vtv'
|
||||||
|
forumTopicId: 301023
|
||||||
|
dashedName: make-screen-reader-navigation-easier-with-the-header-landmark
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Наступний елемент HTML5, що має змогу додавати семантичне значення і покращує доступ, є тегом `header`. Це використовується для зберігання вступної інформації або навігаційних посилань для батьківського тегу і добре працює з інформацією, яка з'являється повторно зверху на кожній сторінці.
|
||||||
|
|
||||||
|
`header` використовує функцію зі збереженою закладкою, яку ви бачили з `main`, дозволяючи допоміжним функціям швидко орієнтуватися у цьому контенті.
|
||||||
|
|
||||||
|
**Note:** `header` призначений для використання в тегу `body` вашого HTML документа. Це відрізняється від елемента `head`, який містить заголовок сторінки, метаінформацію і так далі.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat пише декілька захоплюючих статей про навчання ніндзя, і хоче додати для них сторінку на своєму сайті. Змініть верхній `div`, який містить `h1`, на тег `header`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код повинен містити один тег `header`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('header').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш `header`повинен охоплювати `h1`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('header').children('h1').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код не повинен містити жодних тегів `div`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('div').length == 0);
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш елемент `header` повинен містити кінцевий теґ.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/<\/header>/g) &&
|
||||||
|
code.match(/<\/header>/g).length === code.match(/<header>/g).length
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h1>Training with Camper Cat</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h1>Training with Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,121 @@
|
|||||||
|
---
|
||||||
|
id: 587d7788367417b2b2512aa2
|
||||||
|
title: Полегшіть навігацію по екрані за допомогою навігаційного орієнтиру
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/czVwWSv'
|
||||||
|
forumTopicId: 301024
|
||||||
|
dashedName: make-screen-reader-navigation-easier-with-the-nav-landmark
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Теґ `nav` - це ще один елемент HTML5 із вбудованою функцією орієнтира, що спрощує навігацію по екрані. Цей теґ призначений для об'єднання основних навігаційних посилань на сторінці.
|
||||||
|
|
||||||
|
Якщо в нижній частині сторінки містяться повторювані посилання, не обов'язково також позначати їх теґом `nav`. Достатньо використати теґ `footer` (розглядатиметься в наступному завданні).
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat включив навігаційні посилання у верхній частині тренувальної сторінки, але розмістив їх у `div`. Замініть теґ `div` на `nav`, щоб покращити доступність його сторінки.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код має містити один теґ `nav`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('nav').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваші теґи `nav` мають обгортати `ul` і елементи його списку.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('nav').children('ul').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код не має містити жодних теґів `div`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('div').length == 0);
|
||||||
|
```
|
||||||
|
|
||||||
|
Елемент `nav` має містити кінцевий теґ.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/<\/nav>/g) &&
|
||||||
|
code.match(/<\/nav>/g).length === code.match(/<nav>/g).length
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Training with Camper Cat</h1>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||||
|
<li><a href="#combat">Combat</a></li>
|
||||||
|
<li><a href="#weapons">Weapons</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Training with Camper Cat</h1>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||||
|
<li><a href="#combat">Combat</a></li>
|
||||||
|
<li><a href="#weapons">Weapons</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,132 @@
|
|||||||
|
---
|
||||||
|
id: 587d778c367417b2b2512aa9
|
||||||
|
title: Стандартизуйте час за допомогою атрибута datetime в HTML5
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cmzMgtz'
|
||||||
|
forumTopicId: 301025
|
||||||
|
dashedName: standardize-times-with-the-html5-datetime-attribute
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Продовжуючи тему дати, HTML5 запропонував елемент `time` разом з атрибутом `datetime` з метою стандартизації часу. Елемент `time` є вбудованим і може зберігати дату або час на сторінці. Атрибут `datetime` містить правильний формат дати. До цього значення мають доступ допоміжні пристрої. Атрибут допомагає уникнути плутанини, вказуючи стандартизований формат часу, навіть якщо він неформально вказаний у тексті.
|
||||||
|
|
||||||
|
Наприклад:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Результати опитування Camper Cat стосовно Mortal Combat готові! Обгорніть теґ `time` навколо тексту `Thursday, September 15<sup>th</sup>` і додайте атрибут `datetime`, встановлений на значення `2016-09-15`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код має містити елемент `p`, що включає текст `Thank you to everyone for responding to Master Camper Cat's survey.` і елемент `time`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(timeElement.length);
|
||||||
|
```
|
||||||
|
|
||||||
|
Додані теґи `time` мають обгортати текст `Thursday, September 15<sup>th</sup>`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
timeElement.length &&
|
||||||
|
$(timeElement).html().trim() === 'Thursday, September 15<sup>th</sup>'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
Доданий теґ `time` має містити атрибут `datetime`, який не є порожнім.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(datetimeAttr && datetimeAttr.length);
|
||||||
|
```
|
||||||
|
|
||||||
|
Доданий атрибут `datetime` має бути встановленим на значення `2016-09-15`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(datetimeAttr === '2016-09-15');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --after-user-code--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script>
|
||||||
|
const pElement = $("article > p")
|
||||||
|
.filter((_, elem) => $(elem).text().includes("Thank you to everyone for responding to Master Camper Cat's survey."));
|
||||||
|
const timeElement = pElement[0] ? $(pElement[0]).find("time") : null;
|
||||||
|
const datetimeAttr = $(timeElement).attr("datetime");
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Tournaments</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<h2>Mortal Kombat Tournament Survey Results</h2>
|
||||||
|
|
||||||
|
<!-- Only change code below this line -->
|
||||||
|
|
||||||
|
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is Thursday, September 15<sup>th</sup>. May the best ninja win!</p>
|
||||||
|
|
||||||
|
<!-- Only change code above this line -->
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h3>Comments:</h3>
|
||||||
|
<article>
|
||||||
|
<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
|
||||||
|
<p>Johnny Cage better be there, I'll finish him!</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
|
||||||
|
<p>Wow, much combat, so mortal.</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
|
||||||
|
<p>Looks like I'll be busy that day.</p>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Tournaments</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<h2>Mortal Kombat Tournament Survey Results</h2>
|
||||||
|
|
||||||
|
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h3>Comments:</h3>
|
||||||
|
<article>
|
||||||
|
<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
|
||||||
|
<p>Johnny Cage better be there, I'll finish him!</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
|
||||||
|
<p>Wow, much combat, so mortal.</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
|
||||||
|
<p>Looks like I'll be busy that day.</p>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
---
|
||||||
|
id: 587d774d367417b2b2512a9e
|
||||||
|
title: Використовуйте заголовки для того, щоб показати ієрархічні зв'язки вмісту
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cqVEktm'
|
||||||
|
forumTopicId: 301026
|
||||||
|
dashedName: use-headings-to-show-hierarchical-relationships-of-content
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Заголовки (`h1` through `h6` elements) - це суто робочі теги, які допомагають забезпечити структуру і маркування вашого контенту. Програми читання з екрану можна налаштувати тільки для читання заголовків на сторінці для того щоб користувачі мали доступ до короткого змісту. Це означає, що дуже важливо, щоб теги заголовків в вашій розмітці мали семантичне значення і співвідносились один з одним, а не вибирались тільки за величиною їх розміру.
|
||||||
|
|
||||||
|
*Semantic meaning* означає, що тег, який ви використовуєте разом із вмістом, вказує на тип інформації, яку він містить.
|
||||||
|
|
||||||
|
Якби вам довелось писати роботу із вступом, головною частиною і висновками, то, напевно, було б недоречно розміщувати висновки в основній частині вашої роботи. Це має бути як окремий розділ. Аналогічна ситуація також із заголовками тегів на веб-сторінці, які повинні йти в правильному порядку і вказувати на ієрархічні зв'язки вашого контенту.
|
||||||
|
|
||||||
|
Заголовки з рівним (або вищим) статусом започатковують нові запропоновані розділи, а заголовки із нижчим статусом - починають підрозділи попередніх.
|
||||||
|
|
||||||
|
Наприклад, сторінка з елементом `h2`, яка супроводжується декількома підрозділами позначена тегом `h4` заплутає користувача, який використовує програму зчитування з екрану. Є шість варіантів. Ми радимо скористатися тегом, адже він виглядає ліпше у браузері, хоча ви також можете використовувати CSS, щоб редагувати відносний порядок за розміром.
|
||||||
|
|
||||||
|
І під кінець, кожна сторінка повинна зажди мати один (і тільки один) елемент `h1`, який є ключовим об'єктом вашого контенту. Цей та інші заголовки частково використовуються пошуковими системами, щоб зрозуміти тему сторінки.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat хоче мати сторінку, яка призначена для того, щоб допомогти йому стати ніндзею. Допоможіть йому справитися із заголовками в такий спосіб, щоб розмітка надала оте семантичне значення до контенту і вказала на коректний тісний зв'язок з його розділами. Змініть всі `h5` теги на правильний рівень заголовка, щоб показати, що вони є підрозділами цих кодів `h2`. Використовуйте теги `h3` за потреби.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код повинен налічувати 6 `h3` елементів.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h3').length === 6);
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код має містити 6 тегів `h3`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert((code.match(/\/h3/g) || []).length === 6);
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код не повинен містити жодних елементів `h5`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h5').length === 0);
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код не повинен містити жодних тегів `h5`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(/\/h5/.test(code) === false);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1>How to Become a Ninja</h1>
|
||||||
|
<main>
|
||||||
|
<h2>Learn the Art of Moving Stealthily</h2>
|
||||||
|
<h5>How to Hide in Plain Sight</h5>
|
||||||
|
<h5>How to Climb a Wall</h5>
|
||||||
|
|
||||||
|
<h2>Learn the Art of Battle</h2>
|
||||||
|
<h5>How to Strengthen your Body</h5>
|
||||||
|
<h5>How to Fight like a Ninja</h5>
|
||||||
|
|
||||||
|
<h2>Learn the Art of Living with Honor</h2>
|
||||||
|
<h5>How to Breathe Properly</h5>
|
||||||
|
<h5>How to Simplify your Life</h5>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1>How to Become a Ninja</h1>
|
||||||
|
<main>
|
||||||
|
<h2>Learn the Art of Moving Stealthily</h2>
|
||||||
|
<h3>How to Hide in Plain Sight</h3>
|
||||||
|
<h3>How to Climb a Wall</h3>
|
||||||
|
|
||||||
|
<h2>Learn the Art of Battle</h2>
|
||||||
|
<h3>How to Strengthen your Body</h3>
|
||||||
|
<h3>How to Fight like a Ninja</h3>
|
||||||
|
|
||||||
|
<h2>Learn the Art of Living with Honor</h2>
|
||||||
|
<h3>How to Breathe Properly</h3>
|
||||||
|
<h3>How to Simplify your Life</h3>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
@ -0,0 +1,144 @@
|
|||||||
|
---
|
||||||
|
id: 587d7790367417b2b2512ab0
|
||||||
|
title: Використовуйте tabindex, щоб додати фокус клавіатури до елемента
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cmzMDHW'
|
||||||
|
forumTopicId: 301027
|
||||||
|
dashedName: use-tabindex-to-add-keyboard-focus-to-an-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Значення HTML `tabindex` має три різні функції, що відносяться до елемента фокусу на клавіатурі. Коли він з'явиться на клавіатурі, це означає, що елемент можна фокусувати. Значення (ціле число: додатнє, від'ємне або нуль) визначає поводження об'єкта.
|
||||||
|
|
||||||
|
Певні елементи, такі як посилання і форми управління, отримують автоматично фокус клавіатури, якщо користувач виділяє їх через сторінку. В тому ж самому порядку як елементи надходять у HTML джерела розмітки. Цю ж саму функцію можна додати до інших елементів, таких як `div`, `span` і `p`, розмістивши для них значення `tabindex="0"`. Для прикладу:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div tabindex="0">I need keyboard focus!</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Note:**: від'ємне значення `tabindex` (як правило -1) показує, що елемент фокусується, але не доступний за допомогою клавіатури. Зазвичай цей метод використовується для надання контенту фокусу програмного (наприклад, коли `div` використовується для активації спливаючого вікна), і виходить за рамки самих завдань.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat створив нову анкету, щоб зібрати інформацію про своїх користувачів. Він знає, що поля вводу автоматично фокусуються на клавіатурі, але хоче переконатися, що його користувачі клавіатури слідують інструкціям при табуляції через елементи. Додайте значення `tabindex` до тегу `p` та задайте це значення до `0`. Бонус - використання `tabindex` також дозволяє псевдокласу CSS `:focus` працювати з тегом `p`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код повинен додати значення `tabindex` до тегу `p`, який містить інструкції до форми.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('p').attr('tabindex'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код повинен встановити значення `tabindex` до тегу `p` зі значенням 0.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('p').attr('tabindex') == '0');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
p:focus {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Ninja Survey</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<form>
|
||||||
|
|
||||||
|
|
||||||
|
<p>Instructions: Fill in ALL your information then click <b>Submit</b></p>
|
||||||
|
|
||||||
|
|
||||||
|
<label for="username">Username:</label>
|
||||||
|
<input type="text" id="username" name="username"><br>
|
||||||
|
<fieldset>
|
||||||
|
<legend>What level ninja are you?</legend>
|
||||||
|
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||||
|
<label for="newbie">Newbie Kitten</label><br>
|
||||||
|
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||||
|
<label for="intermediate">Developing Student</label><br>
|
||||||
|
<input id="master" type="radio" name="levels" value="master">
|
||||||
|
<label for="master">9th Life Master</label>
|
||||||
|
</fieldset>
|
||||||
|
<br>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Select your favorite weapons:</legend>
|
||||||
|
<input id="stars" type="checkbox" name="weapons" value="stars">
|
||||||
|
<label for="stars">Throwing Stars</label><br>
|
||||||
|
<input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
|
||||||
|
<label for="nunchucks">Nunchucks</label><br>
|
||||||
|
<input id="sai" type="checkbox" name="weapons" value="sai">
|
||||||
|
<label for="sai">Sai Set</label><br>
|
||||||
|
<input id="sword" type="checkbox" name="weapons" value="sword">
|
||||||
|
<label for="sword">Sword</label>
|
||||||
|
</fieldset>
|
||||||
|
<br>
|
||||||
|
<input type="submit" name="submit" value="Submit">
|
||||||
|
</form><br>
|
||||||
|
</section>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
p:focus {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Ninja Survey</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<form>
|
||||||
|
|
||||||
|
|
||||||
|
<p tabindex="0">Instructions: Fill in ALL your information then click <b>Submit</b></p>
|
||||||
|
|
||||||
|
|
||||||
|
<label for="username">Username:</label>
|
||||||
|
<input type="text" id="username" name="username"><br>
|
||||||
|
<fieldset>
|
||||||
|
<legend>What level ninja are you?</legend>
|
||||||
|
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||||
|
<label for="newbie">Newbie Kitten</label><br>
|
||||||
|
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||||
|
<label for="intermediate">Developing Student</label><br>
|
||||||
|
<input id="master" type="radio" name="levels" value="master">
|
||||||
|
<label for="master">9th Life Master</label>
|
||||||
|
</fieldset>
|
||||||
|
<br>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Select your favorite weapons:</legend>
|
||||||
|
<input id="stars" type="checkbox" name="weapons" value="stars">
|
||||||
|
<label for="stars">Throwing Stars</label><br>
|
||||||
|
<input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
|
||||||
|
<label for="nunchucks">Nunchucks</label><br>
|
||||||
|
<input id="sai" type="checkbox" name="weapons" value="sai">
|
||||||
|
<label for="sai">Sai Set</label><br>
|
||||||
|
<input id="sword" type="checkbox" name="weapons" value="sword">
|
||||||
|
<label for="sword">Sword</label>
|
||||||
|
</fieldset>
|
||||||
|
<br>
|
||||||
|
<input type="submit" name="submit" value="Submit">
|
||||||
|
</form><br>
|
||||||
|
</section>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,160 @@
|
|||||||
|
---
|
||||||
|
id: 587d7790367417b2b2512ab1
|
||||||
|
title: Використовуйте tabindex, щоб точно визначити фокус клавіатури для декількох елементів
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cmzRRcb'
|
||||||
|
forumTopicId: 301028
|
||||||
|
dashedName: use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Значення `tabindex` також вказує на точний порядок вкладки елементів. Це досягається тоді, коли при встановленні значення символ дорівнює додатньому числу 1 або вище.
|
||||||
|
|
||||||
|
Налаштування `tabindex="1"` дозволить для початку сфокусувати елемент для клавіатури. Тоді він переходить через послідовність вказаних значень `tabindex` (2,3, і так далі.), перед переходом до елементів за замовчуванням `tabindex="0"`.
|
||||||
|
|
||||||
|
Важливо зазначити, що коли порядок вкладок встановлюється таким чином, він замінює стандартний порядок (який використовує джерело HTML). Це може викликати труднощі у користувачів, які хочуть почати навігацію з верхньої частини сторінки. Цей спосіб може стати необхідним в деяких випадках, але з точки зору доступності - будьте обережні перед його застосуванням.
|
||||||
|
|
||||||
|
Наприклад:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div tabindex="1">I get keyboard focus, and I get it first!</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div tabindex="2">I get keyboard focus, and I get it second!</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat має поле для пошуку на сторінці з цитатами, що надихають, які він хоче розмістити в правому верхньому куті з CSS. Він хоче, щоб форми контролю пошук `input` і введення `input` були першими елементами у порядку вкладок. Додайте значення `tabindex` до `1` до `search``input`, і значення `tabindex` до `2` і до `submit` `input`.
|
||||||
|
|
||||||
|
Cлід також зауважити, що деякі браузери можуть розмістити вас всередині вашого порядку вкладок, при натисканні на елемент. Елемент був доданий до сторінки, а це гарантує вам те, що ви завжди будете починати з початку вашого порядку вкладок.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код повинен додати значення `tabindex` до тегу `search` `input`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#search').attr('tabindex'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код повинен додати значення `tabindex` до тегу `submit` `input`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#submit').attr('tabindex'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код повинен встановити значення `tabindex` до тегу `search` `input` зі значенням 1.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#search').attr('tabindex') == '1');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код повинен встановити значення `tabindex` до тегу `submit` `input` зі значенням 2.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#submit').attr('tabindex') == '2');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<div tabindex="1" class="overlay"></div>
|
||||||
|
<header>
|
||||||
|
<h1>Even Deeper Thoughts with Master Camper Cat</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Home</a></li>
|
||||||
|
<li><a href="">Blog</a></li>
|
||||||
|
<li><a href="">Training</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<form>
|
||||||
|
<label for="search">Search:</label>
|
||||||
|
|
||||||
|
|
||||||
|
<input type="search" name="search" id="search">
|
||||||
|
<input type="submit" name="submit" value="Submit" id="submit">
|
||||||
|
|
||||||
|
|
||||||
|
</form>
|
||||||
|
<h2>Inspirational Quotes</h2>
|
||||||
|
<blockquote>
|
||||||
|
<p>“There's no Theory of Evolution, just a list of creatures I've allowed to live.”<br>
|
||||||
|
- Chuck Norris</p>
|
||||||
|
</blockquote>
|
||||||
|
<blockquote>
|
||||||
|
<p>“Wise men say forgiveness is divine, but never pay full price for late pizza.”<br>
|
||||||
|
- TMNT</p>
|
||||||
|
</blockquote>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
.overlay {
|
||||||
|
margin: -8px;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<div tabindex="1" class="overlay"></div>
|
||||||
|
<header>
|
||||||
|
<h1>Even Deeper Thoughts with Master Camper Cat</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Home</a></li>
|
||||||
|
<li><a href="">Blog</a></li>
|
||||||
|
<li><a href="">Training</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<form>
|
||||||
|
<label for="search">Search:</label>
|
||||||
|
|
||||||
|
|
||||||
|
<input tabindex="1" type="search" name="search" id="search">
|
||||||
|
<input tabindex="2" type="submit" name="submit" value="Submit" id="submit">
|
||||||
|
|
||||||
|
|
||||||
|
</form>
|
||||||
|
<h2>Inspirational Quotes</h2>
|
||||||
|
<blockquote>
|
||||||
|
<p>“There's no Theory of Evolution, just a list of creatures I've allowed to live.”<br>
|
||||||
|
- Chuck Norris</p>
|
||||||
|
</blockquote>
|
||||||
|
<blockquote>
|
||||||
|
<p>“Wise men say forgiveness is divine, but never pay full price for late pizza.”<br>
|
||||||
|
- TMNT</p>
|
||||||
|
</blockquote>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
.overlay {
|
||||||
|
margin: -8px;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
---
|
||||||
|
id: 587d774e367417b2b2512aa0
|
||||||
|
title: Перенесення вмісту в тег елементу статті
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cPp79S3'
|
||||||
|
forumTopicId: 301029
|
||||||
|
dashedName: wrap-content-in-the-article-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
`article` це ще один з нових елементів в HTML5 та додає семантичного значення до Вашої розмітки. `article` - це елемент розділення, який використовується для обгортання незалежного, автономного контенту. Даний тег добре застосовувати для блогів, повідомлень на форумах або новин.
|
||||||
|
|
||||||
|
Визначення того, чи вміст може бути поданий окремо, зазвичай є власним суб'єктивним рішенням, але ви можете скористатися парою простих тестів. Запитайте себе, чи мав би цей контент все ще сенс, якби ви видалили весь контекст? Аналогічно і з текстом, чи збережеться контент, якщо він знаходиться у RSS-каналі?
|
||||||
|
|
||||||
|
Пам'ятайте, що люди, які використовують допоміжні технології, покладаються на організовану, семантично значущу розмітку, щоб краще зрозуміти вашу роботу.
|
||||||
|
|
||||||
|
**Note:** Елемент `section` є також новим у HTML5 і має дещо інше смислове значення, ніж `article`. Елемент `article` призначений для автономного контенту, а `section` для групування тематично пов’язаного контенту. За необхідності їх можна використовувати всередині один одного. Наприклад, якщо книга - це `article`, то кожен розділ - `section`. Якщо між групами контенту немає зв’язку, використовуйте `div`.
|
||||||
|
|
||||||
|
`<div>` - вміст груп `<section>` - вміст, пов'язаний з групами `<article>` - незалежний, автономний вміст груп
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat використовував теги `article`, щоб обгортати публікації на своїй сторінці блогу, але він забув використати їх навколо верхнього блоку. Змініть тег `div`, щоб замість нього використовувати `article`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код повинен мати три теги `article`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('article').length == 3);
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код не повинен містити жодних тегів `div`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('div').length == 0);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
<main>
|
||||||
|
<div>
|
||||||
|
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||||
|
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||||
|
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
<main>
|
||||||
|
<article>
|
||||||
|
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||||
|
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||||
|
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
@ -0,0 +1,165 @@
|
|||||||
|
---
|
||||||
|
id: 587d778b367417b2b2512aa7
|
||||||
|
title: Зберігайте радіокнопки в елементі fieldset для кращої доступності
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cVJVefw'
|
||||||
|
forumTopicId: 301030
|
||||||
|
dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Наступна тема стосується доступності радіокнопок. Кожній опції надається мітка `label` з атрибутом `for`, прив'язаним до `id` відповідного об'єкта, як пояснюється в останньому завданні. Оскільки радіокнопки часто знаходяться в групі, де користувач має обрати лише одну, існує спосіб семантично продемонструвати, що вибір є частиною набору.
|
||||||
|
|
||||||
|
Для цього всю групу радіокнопок оточує теґ `fieldset`. Він часто використовує теґ `legend`, щоб забезпечити наявність опису групи кнопок, який фіксують зчитувачі з екрана для кожної опції в елементі `fieldset`.
|
||||||
|
|
||||||
|
Обгортання `fieldset` і теґ `legend` не є обов'язковими у використанні, коли опції зрозумілі самі по собі, наприклад, як вибір статі. Достатньо використовувати `label` з атрибутом `for` для кожної радіокнопки.
|
||||||
|
|
||||||
|
Наприклад:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<form>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Choose one of these three items:</legend>
|
||||||
|
<input id="one" type="radio" name="items" value="one">
|
||||||
|
<label for="one">Choice One</label><br>
|
||||||
|
<input id="two" type="radio" name="items" value="two">
|
||||||
|
<label for="two">Choice Two</label><br>
|
||||||
|
<input id="three" type="radio" name="items" value="three">
|
||||||
|
<label for="three">Choice Three</label>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat хоче отримувати інформацію про рівень ніндзя користувачів на його сайті, коли вони підписуються на електронну розсилку. Він уже додав набір радіокнопок, а на попередньому уроці навчився використовувати теґи `label` з атрибутами `for` для кожної опції. Вперед, Camper Cat! Однак його код усе ще потребує допомоги. Замініть теґ `div`, що оточує радіокнопки, на теґ `fieldset`, а потім замініть теґ `p` усередині нього на `legend`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код має містити теґ `fieldset` навколо набору радіокнопок.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('fieldset').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
Елемент `fieldset` повинен мати кінцевий теґ.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/<\/fieldset>/g) &&
|
||||||
|
code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код має містити теґ `legend` навколо тексту із запитанням про рівень ніндзя.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('legend').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код не повинен містити жодних тегів `div`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('div').length == 0);
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код уже не має містити теґ `p` навколо тексту з запитанням про рівень ніндзя.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('p').length == 4);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<form>
|
||||||
|
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||||
|
<label for="email">Email:</label>
|
||||||
|
<input type="text" id="email" name="email">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Only change code below this line -->
|
||||||
|
<div>
|
||||||
|
<p>What level ninja are you?</p>
|
||||||
|
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||||
|
<label for="newbie">Newbie Kitten</label><br>
|
||||||
|
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||||
|
<label for="intermediate">Developing Student</label><br>
|
||||||
|
<input id="master" type="radio" name="levels" value="master">
|
||||||
|
<label for="master">Master</label>
|
||||||
|
</div>
|
||||||
|
<!-- Only change code above this line -->
|
||||||
|
|
||||||
|
|
||||||
|
<input type="submit" name="submit" value="Submit">
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
<article>
|
||||||
|
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||||
|
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||||
|
</article>
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||||
|
</article>
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
<article>
|
||||||
|
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||||
|
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||||
|
</article>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<form>
|
||||||
|
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||||
|
<label for="email">Email:</label>
|
||||||
|
<input type="text" id="email" name="email">
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<legend>What level ninja are you?</legend>
|
||||||
|
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||||
|
<label for="newbie">Newbie Kitten</label><br>
|
||||||
|
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||||
|
<label for="intermediate">Developing Student</label><br>
|
||||||
|
<input id="master" type="radio" name="levels" value="master">
|
||||||
|
<label for="master">Master</label>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<input type="submit" name="submit" value="Submit">
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
<article>
|
||||||
|
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||||
|
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||||
|
</article>
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||||
|
</article>
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
<article>
|
||||||
|
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||||
|
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||||
|
</article>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,154 @@
|
|||||||
|
---
|
||||||
|
id: 587d781b367417b2b2512abe
|
||||||
|
title: Додавання тіні до карткового елемента
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cvVZdUd'
|
||||||
|
forumTopicId: 301031
|
||||||
|
dashedName: add-a-box-shadow-to-a-card-like-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Властивість `box-shadow` додає одну або більше тіней до елемента.
|
||||||
|
|
||||||
|
Властивість `box-shadow` приймає значення
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><code>offset-x</code> (наскільки далеко відсунути тінь від елемента по горизонталі)</li>
|
||||||
|
<li><code>offset-y</code> (наскільки далеко відсунути тінь від елемента по вертикалі)</li>
|
||||||
|
<li><code>blur-radius</code>,</li>
|
||||||
|
<li><code>spread-radius</code> і</li>
|
||||||
|
<li><code>color</code>, в такому порядку.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
Значення `blur-radius` та `spread-radius` є необов'язковими.
|
||||||
|
|
||||||
|
Можна створити кілька тіней, використовуючи коми для розділення властивостей кожного елемента `box-shadow`.
|
||||||
|
|
||||||
|
Ось приклад CSS для створення декількох тіней майже прозорого чорного кольору з невеликою розмитістю:
|
||||||
|
|
||||||
|
```css
|
||||||
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Тепер елемент має id `thumbnail`. За допомогою цього селектора, використайте значення з прикладу CSS вище, щоб застосувати `box-shadow` на картці.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код повинен додати властивість `box-shadow` до id `thumbnail`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g));
|
||||||
|
```
|
||||||
|
|
||||||
|
Вам потрібно використати даний CSS для значення `box-shadow`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(
|
||||||
|
/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\)\s*?,\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(45, 45, 45, 0.1);
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 27px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard" id="thumbnail">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(45, 45, 45, 0.1);
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 27px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
#thumbnail {
|
||||||
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard" id="thumbnail">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,146 @@
|
|||||||
|
---
|
||||||
|
id: 587d781b367417b2b2512abc
|
||||||
|
title: Налаштування властивості фонового кольору тексту
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cEDqwA6'
|
||||||
|
forumTopicId: 301032
|
||||||
|
dashedName: adjust-the-background-color-property-of-text
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Замість того, щоб налаштовувати загальний фон чи колір тексту, аби передній план легко читався, ви можете додати `background-color` до елемента з текстом, який хочете підкреслити. В цьому завданні використовується код `rgba()` замість `hex` чи стандартного `rgb()`.
|
||||||
|
|
||||||
|
<blockquote>rgba означає:<br> r = red (червоний)<br> g = green (зелений)<br> b = blue (синій)<br> a = alpha/рівень непрозорості</blockquote>
|
||||||
|
|
||||||
|
Значення RGB можуть змінюватися в діапазоні від 0 до 255. Значення альфа може змінюватися від 1, коли колір повністю непрозорий або суцільний, до 0, коли колір стає повністю прозорий і виразний. `rgba()` чудово підходить в цій ситуації, оскільки дозволяє вам налаштувати непрозорість. Це значить, що вам не треба повністю загороджувати фон.
|
||||||
|
|
||||||
|
В цьому завданні вам слід використати `background-color: rgba(45, 45, 45, 0.1)`. Це створить темно-сірий колір, який буде майже прозорим через низький рівень непрозорості.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Щоб текст більше виділявся, поміняйте властивість `background-color` елемента `h4` на дане значення `rgba()`.
|
||||||
|
|
||||||
|
Також видаліть в `h4` властивість `height` та додайте `padding` з 10px.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код повинен додати властивість `background-color` до елемента `h4` з налаштуванням `rgba(45, 45, 45, 0.1)`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
/(background-color|background):rgba\(45,45,45,0?\.1\)(;?}|;)/gi.test(
|
||||||
|
code.replace(/\s/g, '')
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код повинен додати властивість `padding` до елемента `h4` та налаштувати її до 10 пікселів.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('h4').css('padding-top') == '10px' &&
|
||||||
|
$('h4').css('padding-right') == '10px' &&
|
||||||
|
$('h4').css('padding-bottom') == '10px' &&
|
||||||
|
$('h4').css('padding-left') == '10px'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
Властивість `height` елемента `h4` потрібно видалити.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(!($('h4').css('height') == '25px'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: rgba(45, 45, 45, 0.1);
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,130 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a4367417b2b2512ad3
|
||||||
|
title: Змінити колір різних елементів до додаткових кольорів
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cWmPpud'
|
||||||
|
forumTopicId: 301033
|
||||||
|
dashedName: adjust-the-color-of-various-elements-to-complementary-colors
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Згідно з завданням про доповняльні кольори, якщо протилежні кольори розташувати на палітрі один біля одного, це зробить їх більш насиченими. Проте, у разі використання на сайті насиченого візуалу, це може викликати роздратування і ускладнювати читання, особливо якщо колір фону доповняльний. На практиці, один із кольорів зазвичай є домінантним, а доповняльний використовується, щоб надати особливої уваги змісту на сторінці.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Для цієї сторінки буде використано відтінок бірюзового (`#09A7A1`) як домінантний колір, та доповняльний йому - помаранчевий (`#FF790E`), щоб візуально виділити кнопку реєстрації. Змініть колір `background-color` елементів `header` та `footer` з чорного на бірюзовий. Потім змініть також властивість `color` тексту `h2` на бірюзовий. І під кінець, змініть колір `background-color` кнопки `button` на помаранчевий.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Елементу `header` необхідно мати властивість `background-color` із значенням #09A7A1.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('header').css('background-color') == 'rgb(9, 167, 161)');
|
||||||
|
```
|
||||||
|
|
||||||
|
Елементу `footer` необхідно мати властивість `background-color` із значенням #09A7A1.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('footer').css('background-color') == 'rgb(9, 167, 161)');
|
||||||
|
```
|
||||||
|
|
||||||
|
Елементу `h2` необхідно мати властивість `color` із значенням #09A7A1.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h2').css('color') == 'rgb(9, 167, 161)');
|
||||||
|
```
|
||||||
|
|
||||||
|
Елементу `button` необхідно мати властивість `background-color` із значенням #FF790E.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('button').css('background-color') == 'rgb(255, 121, 14)');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
padding: 0.25em;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<header>
|
||||||
|
<h1>Cooking with FCC!</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<article>
|
||||||
|
<h2>Machine Learning in the Kitchen</h2>
|
||||||
|
<p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
|
||||||
|
<button>Sign Up</button>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h2>Bisection Vegetable Chopping</h2>
|
||||||
|
<p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
|
||||||
|
<button>Sign Up</button>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
<br>
|
||||||
|
<footer>© 2018 FCC Kitchen</footer>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
background-color: #09A7A1;
|
||||||
|
color: white;
|
||||||
|
padding: 0.25em;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
color: #09A7A1;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: #FF790E;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
background-color: #09A7A1;
|
||||||
|
color: white;
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<header>
|
||||||
|
<h1>Cooking with FCC!</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<article>
|
||||||
|
<h2>Machine Learning in the Kitchen</h2>
|
||||||
|
<p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
|
||||||
|
<button>Sign Up</button>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h2>Bisection Vegetable Chopping</h2>
|
||||||
|
<p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
|
||||||
|
<button>Sign Up</button>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
<br>
|
||||||
|
<footer>© 2018 FCC Kitchen</footer>
|
||||||
|
```
|
||||||
@ -0,0 +1,118 @@
|
|||||||
|
---
|
||||||
|
id: 587d7791367417b2b2512ab5
|
||||||
|
title: Змініть висоту елементу за допомогою властивості висоти
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cEDaDTN'
|
||||||
|
forumTopicId: 301034
|
||||||
|
dashedName: adjust-the-height-of-an-element-using-the-height-property
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Ви можете вказати висоту елементу, використовуючи властивість `height` в CSS, схожу до властивості `width`. Ось приклад, який задає зображенню висоту в 20 пікселів:
|
||||||
|
|
||||||
|
```css
|
||||||
|
img {
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Додайте властивість `height` до тегу `h4` і задайте йому значення у 25 пікселів.
|
||||||
|
|
||||||
|
**Примітка:** Вам може знадобитися збільшити масштаб на 100%, щоб пройти тест у цьому завданні.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Вам код має змінити значення властивості `height` тегу `h4` на 25 пікселів.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
Math.round(document.querySelector('h4').getBoundingClientRect().height) ===
|
||||||
|
25 &&
|
||||||
|
/h4{\S*height:25px(;\S*}|})/.test($('style').text().replace(/\s/g, ''))
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
margin-right: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
margin-right: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
---
|
||||||
|
id: 587d781d367417b2b2512ac8
|
||||||
|
title: Зміна стану якірного тега при наведенні курсора
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cakRGcm'
|
||||||
|
forumTopicId: 301035
|
||||||
|
dashedName: adjust-the-hover-state-of-an-anchor-tag
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
У цьому завданні буде йти мова про псевдокласи. Псевдоклас - це ключове слове, яке можна додавати до селекторів, щоб обрати певний стан елемента.
|
||||||
|
|
||||||
|
Наприклад, стиль якірного тега при наведенні курсора можна змінити за допомогою `:hover` селектора псевдокласу. Ось CSS для зміни властивості `color` якірного тегу на червоний при наведенні:
|
||||||
|
|
||||||
|
```css
|
||||||
|
a:hover {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Редактор коду має правило CSS, щоб змінити колір усіх тегів `a` на чорний. Додайте таке правило, щоб при наведенні користувачем курсора на тег `a` його колір `color` ставав синім.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Колір якірного тегу `color` має залишатися чорним, додайте правила CSS лише для стану `:hover`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('a').css('color') == 'rgb(0, 0, 0)');
|
||||||
|
```
|
||||||
|
|
||||||
|
Колір якірного тега має ставати синім `color` при наведенні.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(
|
||||||
|
/a:hover\s*?{\s*?color:\s*?(blue|rgba\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?,\s*?1\s*?\)|#00F|rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\))\s*?;\s*?}/gi
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
a {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<a href="https://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
a {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: rgba(0,0,255,1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<a href="https://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
|
||||||
|
```
|
||||||
@ -0,0 +1,129 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a4367417b2b2512ad4
|
||||||
|
title: Регулювання відтінку кольору
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cPp38TZ'
|
||||||
|
forumTopicId: 301036
|
||||||
|
dashedName: adjust-the-hue-of-a-color
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Кольори мають декілька характеристик, включно з відтінком, насиченістю та яскравістю. У CSS3 властивість `hsl()` представлена як альтернативний спосіб вибору кольору, з налаштуванням усіх трьох характеристик.
|
||||||
|
|
||||||
|
Під**відтінком** люди часто розуміють колір. Якщо уявити спектр кольорів, починаючи з червоного зліва, через зелений посередині, і закінчуючи синім справа, то відтінок - це місце на цій лінії, де знаходиться колір. У `hsl()`, для визначення відтінку замість спектру використовується концепція колірного кола, де кут кольору на окружності задається значенням від 0 до 360.
|
||||||
|
|
||||||
|
**Насиченість** це кількість сірого в кольорі. Чим менше сірого, тим насиченішим є колір, тоді як мінімально насичений колір майже повністю сірий. Це задається відсотками, де 100% означає максимально насичений колір.
|
||||||
|
|
||||||
|
**Яскравість** це вміст білого або чорного в кольорі. Відсоток задається значенням від 0% (чорний) до 100% (білий), де 50% це стандартний колір.
|
||||||
|
|
||||||
|
Ось кілька прикладів використання `hsl()` з максимально насиченими кольорами зі стандартною яскравістю:
|
||||||
|
|
||||||
|
<table class='table table-striped'><thead><tr><th>Колір</th><th>HSL</th></tr></thead><tbody><tr><td>червоний</td><td>hsl(0, 100%, 50%)</td></tr><tr><td>жовтий</td><td>hsl(60, 100%, 50%)</td></tr><tr><td>зелений</td><td>hsl(120, 100%, 50%)</td></tr><tr><td>блакитний</td><td>hsl(180, 100%, 50%)</td></tr><tr><td>синій</td><td>hsl(240, 100%, 50%)</td></tr><tr><td>пурпуровий</td><td>hsl(300, 100%, 50%)</td></tr></tbody></table>
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Змініть колір фону `background-color` кожного `div` елемента, відповідно до імен класу (зелений `green`, блакитний `cyan`, або синій `blue`), використовуючи колірну модель `hsl()`. Усі три повинні мати максимальну насиченість і стандартну яскравість.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ви маєте використати властивість `hsl()`, щоб задати зелений колір `green`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
Ви маєте використати властивість `hsl()`, щоб задати блакитний колір `cyan`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
Ви маєте використати властивість `hsl()`, щоб задати синій колір `blue`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
У `div` елементу класу `green` колір фону `background-color` має бути зеленим.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.green').css('background-color') == 'rgb(0, 255, 0)');
|
||||||
|
```
|
||||||
|
|
||||||
|
У `div` елементу класу `cyan` колір фону `background-color` має бути блакитним.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||||
|
```
|
||||||
|
|
||||||
|
У `div` елементу класу `blue` колір фону `background-color` має бути синім.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.green {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cyan {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="cyan"></div>
|
||||||
|
<div class="blue"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.green {
|
||||||
|
background-color: hsl(120, 100%, 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cyan {
|
||||||
|
background-color: hsl(180, 100%, 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue {
|
||||||
|
background-color: hsl(240, 100%, 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="cyan"></div>
|
||||||
|
<div class="blue"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,119 @@
|
|||||||
|
---
|
||||||
|
id: 587d781b367417b2b2512abd
|
||||||
|
title: Налаштування розміру заголовка елемента відносно параграфу елемента
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c3bRPTz'
|
||||||
|
forumTopicId: 301037
|
||||||
|
dashedName: adjust-the-size-of-a-heading-element-versus-a-paragraph-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Розмір шрифту елементів заголовка (`h1` through `h6`) в цілому повинен бути більшим, аніж розмір шрифту тегів параграфів. Для користувача це значно полегшує сприйняття макета візуально та розуміння важливості кожного елемента на сторінці. Використовуйте властивість `font-size`, щоб змінити розмір тексту елемента.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Для того, щоб зробити заголовок значно більшим, ніж сам параграф, змініть розмір шрифту `font-size` of the `h4` елемента на 27 пікселів.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код повинен додати властивість `font-size` до елемента `h4` і встановити значення на 27 пікселів.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h4').css('font-size') == '27px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(45, 45, 45, 0.1);
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(45, 45, 45, 0.1);
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 27px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
@ -0,0 +1,119 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a4367417b2b2512ad5
|
||||||
|
title: Регулювання відтінку кольору
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cEDJvT7'
|
||||||
|
forumTopicId: 301038
|
||||||
|
dashedName: adjust-the-tone-of-a-color
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Опція колірної моделі `hsl()` в CSS також спрощує налаштування тональності кольору. Якщо змішати білий зі світлим відтінком, можна отримати світлий тон, а якщо з чорним - темний. Окрім цього, тон можна змінити за допомогою одночасного освітлення та затемнення відтінку. Нагадуємо, що в колірній моделі `hsl()` букви 's' і 'l' відповідають за насиченість і яскравість відповідно. Відсоткове значення насиченості змінює кількість сірого в кольорі, а відсоток яскравості визначає, скільки білого та чорного міститься в кольорі. Це стає в нагоді, коли Вам необхідно отримати декілька варіацій кольору, який вам подобається.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Усі елементи мають `background-color`, який за замовченням є `transparent`. Наш елемент `nav` зараз, вочевидь, має фон кольору `cyan`, через те, що властивості `background-color` елементу за ним надано значення `cyan`. Додайте `background-color` до елемента `nav` так, щоб він використовував той самий колір `cyan`, але з насиченістю `80%` і яскравістю `25%`, щоб змінити його тон і відтінок.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Елемент `nav` повинен містити `background-color` блакитного кольору, налаштованого за допомогою властивості `hsl()`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
header {
|
||||||
|
background-color: hsl(180, 90%, 35%);
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-indent: 10px;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 5px 0px 5px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav li {
|
||||||
|
display: inline;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h1>Cooking with FCC!</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Home</a></li>
|
||||||
|
<li><a href="#">Classes</a></li>
|
||||||
|
<li><a href="#">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
header {
|
||||||
|
background-color: hsl(180, 90%, 35%);
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
background-color: hsl(180, 80%, 25%);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-indent: 10px;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 5px 0px 5px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav li {
|
||||||
|
display: inline;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<header>
|
||||||
|
<h1>Cooking with FCC!</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Home</a></li>
|
||||||
|
<li><a href="#">Classes</a></li>
|
||||||
|
<li><a href="#">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
```
|
||||||
@ -0,0 +1,115 @@
|
|||||||
|
---
|
||||||
|
id: 587d7791367417b2b2512ab4
|
||||||
|
title: Налаштування ширини елементу за допомогою властивості width
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cvVLPtN'
|
||||||
|
forumTopicId: 301039
|
||||||
|
dashedName: adjust-the-width-of-an-element-using-the-width-property
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Ви можете вказати ширину елементу, використовуючи властивість `width` в CSS. Значення можуть бути виражені у відносних одиницях довжини (таких як `em`), абсолютних одиницях довжини (таких як `px`), або у відсотках від розміру вихідного елементу. Ось приклад, який задає зображенню висоту 220 пікселів:
|
||||||
|
|
||||||
|
```css
|
||||||
|
img {
|
||||||
|
width: 220px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Застосуйте властивість `width` до всієї картки і встановіть їй абсолютне значення 245 пікселів. Використайте значення `fullCard`, щоб обрати елемент.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код має змінити властивість `width` картки на 245 пікселів, використовуючи селектор значення `fullCard`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const fullCard = code.match(/\.fullCard\s*{[\s\S]+?[^}]}/g);
|
||||||
|
assert(
|
||||||
|
fullCard &&
|
||||||
|
/width\s*:\s*245px\s*(;|})/gi.test(fullCard[0]) &&
|
||||||
|
$('.fullCard').css('maxWidth') === 'none'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
margin-right: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
margin-right: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,141 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a8367417b2b2512ae5
|
||||||
|
title: Анімаційні елементи у змінних ставках
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cZ89WA4'
|
||||||
|
forumTopicId: 301040
|
||||||
|
dashedName: animate-elements-at-variable-rates
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Існує безліч способів зміни частоти анімації аналогічно анімованих елементів. Поки що цього було досягнуто шляхом застосування властивості `animation-iteration-count` і встановлення правил `@keyframes`.
|
||||||
|
|
||||||
|
До прикладу, анімація справа складається з двох зірок, розмір і прозорість кожної з яких у правилі `@keyframes` зменшується до позначки 20%, що створює ефект миготіння. Ви можете змінити правило `@keyframes` для одного з елементів, щоб зірки миготіли з різною швидкістю.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Змініть частоту кадрів анімації елементу класу `star-1`, змінивши значення його `@keyframes` правила на 50%.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Правило `@keyframes` для класу `star-1` повинно становити 50%.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/twinkle-1\s*?{\s*?50%/g));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.stars {
|
||||||
|
background-color: white;
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-1 {
|
||||||
|
margin-top: 15%;
|
||||||
|
margin-left: 60%;
|
||||||
|
animation-name: twinkle-1;
|
||||||
|
animation-duration: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-2 {
|
||||||
|
margin-top: 25%;
|
||||||
|
margin-left: 25%;
|
||||||
|
animation-name: twinkle-2;
|
||||||
|
animation-duration: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes twinkle-1 {
|
||||||
|
20% {
|
||||||
|
transform: scale(0.5);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes twinkle-2 {
|
||||||
|
20% {
|
||||||
|
transform: scale(0.5);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#back {
|
||||||
|
position: fixed;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="back"></div>
|
||||||
|
<div class="star-1 stars"></div>
|
||||||
|
<div class="star-2 stars"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.stars {
|
||||||
|
background-color: white;
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-1 {
|
||||||
|
margin-top: 15%;
|
||||||
|
margin-left: 60%;
|
||||||
|
animation-name: twinkle-1;
|
||||||
|
animation-duration: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-2 {
|
||||||
|
margin-top: 25%;
|
||||||
|
margin-left: 25%;
|
||||||
|
animation-name: twinkle-2;
|
||||||
|
animation-duration: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes twinkle-1 {
|
||||||
|
50% {
|
||||||
|
transform: scale(0.5);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes twinkle-2 {
|
||||||
|
20% {
|
||||||
|
transform: scale(0.5);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#back {
|
||||||
|
position: fixed;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="back"></div>
|
||||||
|
<div class="star-1 stars"></div>
|
||||||
|
<div class="star-2 stars"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,107 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a8367417b2b2512ae3
|
||||||
|
title: Безперервна анімація елементів за допомогою властивості Infinite Animation Count
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cVJDVfq'
|
||||||
|
forumTopicId: 301041
|
||||||
|
dashedName: animate-elements-continually-using-an-infinite-animation-count
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Попередні завдання стосувалися використання деяких властивостей анімації та правила `@keyframes`. Іншою властивістю анімації є `animation-iteration-count`, яка дозволяє вам контролювати, скільки разів буде повторюватися анімація. До прикладу:
|
||||||
|
|
||||||
|
```css
|
||||||
|
animation-iteration-count: 3;
|
||||||
|
```
|
||||||
|
|
||||||
|
У цьому випадку анімація зупиниться лише після 3-го запуску, але її можна зробити безперервною, якщо задати значення `infinite`.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Щоб м'яч стрибав безперервно, змініть властивість `animation-iteration-count` на `infinite`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Властивості `animation-iteration-count` має бути надано значення `infinite`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#ball').css('animation-iteration-count') == 'infinite');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
|
||||||
|
#ball {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
margin: 50px auto;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
animation-name: bounce;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-iteration-count: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce{
|
||||||
|
0% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
top: 249px;
|
||||||
|
width: 130px;
|
||||||
|
height: 70px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="ball"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
#ball {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
margin: 50px auto;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
animation-name: bounce;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce{
|
||||||
|
0% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
top: 249px;
|
||||||
|
width: 130px;
|
||||||
|
height: 70px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="ball"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,155 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a8367417b2b2512ae6
|
||||||
|
title: Анімація елементів зі змінною швидкістю
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cnpWZc9'
|
||||||
|
forumTopicId: 301042
|
||||||
|
dashedName: animate-multiple-elements-at-variable-rates
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
У попередньому завданні ви змінили швидкість анімації для двох елементів зі схожою анімацією, змінивши їхні правила `@keyframes`. Ви можете досягти тієї ж мети, маніпулюючи `animation-duration` кількох елементів.
|
||||||
|
|
||||||
|
В анімації, що виконується в редакторі коду, представлено три зірки на небі, які безперервно миготять з однаковою швидкістю. Щоб вони мерехтіли не синхронно, ви можете встановити властивість `animation-duration` для різних значень у кожному елементі.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Встановіть `animation-duration` елементів класу `star-1`, `star-2`, і `star-3` на 1, 0.9 та 1.1 секунди відповідно.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Так `animation-duration` властивість для зірки класу `star-1` має становити 1 секунду.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.star-1').css('animation-duration') == '1s');
|
||||||
|
```
|
||||||
|
|
||||||
|
Тоді як `animation-duration` властивість для зірки класу `star-2` має становити 0.9 секунди.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.star-2').css('animation-duration') == '0.9s');
|
||||||
|
```
|
||||||
|
|
||||||
|
А `animation-duration` властивість для зірки класу `star-3` має складати 1.1 секунди.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.star-3').css('animation-duration') == '1.1s');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.stars {
|
||||||
|
background-color: white;
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-1 {
|
||||||
|
margin-top: 15%;
|
||||||
|
margin-left: 60%;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-name: twinkle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-2 {
|
||||||
|
margin-top: 25%;
|
||||||
|
margin-left: 25%;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-name: twinkle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-3 {
|
||||||
|
margin-top: 10%;
|
||||||
|
margin-left: 50%;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-name: twinkle;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes twinkle {
|
||||||
|
20% {
|
||||||
|
transform: scale(0.5);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#back {
|
||||||
|
position: fixed;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="back"></div>
|
||||||
|
<div class="star-1 stars"></div>
|
||||||
|
<div class="star-2 stars"></div>
|
||||||
|
<div class="star-3 stars"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.stars {
|
||||||
|
background-color: white;
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-1 {
|
||||||
|
margin-top: 15%;
|
||||||
|
margin-left: 60%;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-name: twinkle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-2 {
|
||||||
|
margin-top: 25%;
|
||||||
|
margin-left: 25%;
|
||||||
|
animation-duration: 0.9s;
|
||||||
|
animation-name: twinkle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-3 {
|
||||||
|
margin-top: 10%;
|
||||||
|
margin-left: 50%;
|
||||||
|
animation-duration: 1.1s;
|
||||||
|
animation-name: twinkle;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes twinkle {
|
||||||
|
20% {
|
||||||
|
transform: scale(0.5);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#back {
|
||||||
|
position: fixed;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="back"></div>
|
||||||
|
<div class="star-1 stars"></div>
|
||||||
|
<div class="star-2 stars"></div>
|
||||||
|
<div class="star-3 stars"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a3367417b2b2512ad0
|
||||||
|
title: Вирівнювання елемента горизонтально по центру з використанням властивості margin
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cyLJqU4'
|
||||||
|
forumTopicId: 301043
|
||||||
|
dashedName: center-an-element-horizontally-using-the-margin-property
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Ще однією технікою вирівнювання є розташувати блок-елемент горизонтально по центру. Одним зі способів це зробити є встановити властивість `margin` для значення "auto".
|
||||||
|
|
||||||
|
Цей метод працює і для зображень. Зображення є вбудованими (inline) елементами за замовчуванням, але їх можна зробити елементами-блоками, якщо надати властивості `display` значення `block`.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Відцентруйте `div` на сторінці, додавши `margin` властивість із значенням `auto`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Властивість `margin` для `div` потрібно встановити на `auto`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('div')?.margin === 'auto');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
---
|
||||||
|
id: 587d781e367417b2b2512ac9
|
||||||
|
title: Змінити відносну позицію елемента
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/czVmMtZ'
|
||||||
|
forumTopicId: 301044
|
||||||
|
dashedName: change-an-elements-relative-position
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
CSS сприймає кожний елемент HTML як власний блок, який зазвичай називають <dfn>CSS Box Model</dfn>. Елементи-блоки автоматично переміщуються на новий рядок (такий як заголовок, параграф, сектор), тоді як вбудовані елементи можуть бути оточені іншими матеріалами (такими як зображення або інтервали). У такому разі шаблон елементів, що використовується за замовчуванням, називається <dfn>normal flow</dfn> документа, але CSS пропонує властивість position (розміщення), щоб змінити його.
|
||||||
|
|
||||||
|
Коли елементу задана властивість `relative`, що дозволяє вам визначити, як має рухатися CSS *relative* відносно свого поточного розміщення у стандартному блоці сторінки. Разом з CSS властивість offset (розміщення) може бути `left` або `right`, і `top` або `bottom`. Це вказує на кількість пікселів, відсотків або em, необхідних для переміщення елементу *away* у стандартну позицію. Ось приклад того, як пересунути параграф на 10 пікселів вгору:
|
||||||
|
|
||||||
|
```css
|
||||||
|
p {
|
||||||
|
position: relative;
|
||||||
|
bottom: 10px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Змінюючи позицію елементу на відносну, ви не прибираєте елемент зі стандартного блоку - інші об'єкти на сторінці розташовані так, ніби елемент не змінював свого положення за замовчуванням.
|
||||||
|
|
||||||
|
**Примітка:** Зміна розташування дозволяє вам краще оперувати візуальним шаблоном сторінки. Пам'ятайте, що незважаючи на положення елементів, нижча розмітка HTML повинна бути організована і мати сенс при читанні зверху знизу. Саме так користувачі і порушеннями зору (які покладаються на допоміжні пристрої, такі як зчитувачі екрану) отримують доступ до ваших матеріалів.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Змініть `position` для `h2` на `relative`, та скористайтеся властивістю offset (розміщення) для CSS, задля переміщення на 15 пікселів від `top`, тобто стандартного блоку. Перевірте, чи не змінилося розташування інших елементів відносно h1 та p.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Елемент `h2` повинен мати властивість `position` в позиції `relative`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h2').css('position') == 'relative');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код має використовувати зсув CSS, щоб змістити `h2` на 15 пікселів від його стандартного розташування відносно `top`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h2').css('top') == '15px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h2 {
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<h1>On Being Well-Positioned</h1>
|
||||||
|
<h2>Move me!</h2>
|
||||||
|
<p>I still think the h2 is where it normally sits.</p>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h2 {
|
||||||
|
position: relative;
|
||||||
|
top: 15px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<h1>On Being Well-Positioned</h1>
|
||||||
|
<h2>Move me!</h2>
|
||||||
|
<p>I still think the h2 is where it normally sits.</p>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,127 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a8367417b2b2512ae7
|
||||||
|
title: Змінити час анімації за допомогою ключових слів
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cJKvwCM'
|
||||||
|
forumTopicId: 301045
|
||||||
|
dashedName: change-animation-timing-with-keywords
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
В анімаціях CSS, властивість `animation-timing-function` контролює наскільки швидко змінюється тривалість анімації елементу. Якщо анімацією є авто, яке за певний час переміщується з точки А у точку Б (властивість `animation-duration`), то властивість `animation-timing-function` відповідатиме за те, як пришвидшується або уповільнюється його швидкість.
|
||||||
|
|
||||||
|
Існує певний набір готових ключових слів, які містять найпоширеніші завдання. Наприклад, якщо значення за замовчуванням - `ease`, то анімація починається повільно, на середині прискорюється і знову уповільнюється вкінці. Інші завдання відповідають за властивість `ease-out`, при якій анімація починається швидко і сповільнюються вкінці, властивість `ease-in`, де анімація починається повільно і прискорюється вкінці, та властивість `linear`, яка надає анімації постійну незмінну швидкість.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
До кожного елементу з id `ball1` та `ball2` додайте властивість `animation-timing-function`, та для `#ball1` встановіть властивість `linear`, а до `#ball2` додайте `ease-out`. Зверніть увагу на те, як по різному рухаються анімовані елементи, при чому анімація зупиняється одночасно, якщо властивість `animation-duration` кожного елемента встановлено на 2 секунди.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Значення властивості `animation-timing-function` елементів з id `ball1` має бути `linear`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const ball1Animation = __helpers.removeWhiteSpace(
|
||||||
|
$('#ball1').css('animation-timing-function')
|
||||||
|
);
|
||||||
|
assert(ball1Animation == 'linear' || ball1Animation == 'cubic-bezier(0,0,1,1)');
|
||||||
|
```
|
||||||
|
|
||||||
|
Значення властивості `animation-timing-function` для елементів з id `ball2` має бути `ease-out`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const ball2Animation = __helpers.removeWhiteSpace(
|
||||||
|
$('#ball2').css('animation-timing-function')
|
||||||
|
);
|
||||||
|
assert(
|
||||||
|
ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.balls {
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
position: fixed;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin-top: 50px;
|
||||||
|
animation-name: bounce;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
#ball1 {
|
||||||
|
left:27%;
|
||||||
|
|
||||||
|
}
|
||||||
|
#ball2 {
|
||||||
|
left:56%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 249px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="balls" id="ball1"></div>
|
||||||
|
<div class="balls" id="ball2"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.balls {
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
position: fixed;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin-top: 50px;
|
||||||
|
animation-name: bounce;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
#ball1 {
|
||||||
|
left:27%;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
#ball2 {
|
||||||
|
left:56%;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 249px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="balls" id="ball1"></div>
|
||||||
|
<div class="balls" id="ball2"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,81 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a3367417b2b2512acf
|
||||||
|
title: Змініть розташування елементів, які перекриваються, за допомогою властивості z-index
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cM94aHk'
|
||||||
|
forumTopicId: 301046
|
||||||
|
dashedName: change-the-position-of-overlapping-elements-with-the-z-index-property
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Коли елементи розташовані з перекриттям (тобто використовується `position: absolute | relative | fixed | sticky`), елемент, що з'явився пізніше в розмітці HTML, буде за замовчуванням знаходитися над іншими. Однак властивість `z-index` може впорядкувати розташування елементів, які накладаються один на одного. Це значення має бути цілим числом, а не дробом, а більші значення властивості `z-index` рухають його вище відносно менших значень.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Додайте властивість `z-index` до елемента з назвою класу `first` (червоний прямокутник), встановіть значення 2, щоб він перекрив інший елемент (блакитний прямокутник).
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Елемент з класом `first` повинен мати значення `z-index`, із значенням 2.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.first').css('z-index') == '2');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 60%;
|
||||||
|
height: 200px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first {
|
||||||
|
background-color: red;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
}
|
||||||
|
.second {
|
||||||
|
background-color: blue;
|
||||||
|
position: absolute;
|
||||||
|
left: 40px;
|
||||||
|
top: 50px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="first"></div>
|
||||||
|
<div class="second"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 60%;
|
||||||
|
height: 200px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first {
|
||||||
|
background-color: red;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.second {
|
||||||
|
background-color: blue;
|
||||||
|
position: absolute;
|
||||||
|
left: 40px;
|
||||||
|
top: 50px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="first"></div>
|
||||||
|
<div class="second"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,76 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a5367417b2b2512ad6
|
||||||
|
title: Створити поступовий лінійний градієнт CSS
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cg4dpt9'
|
||||||
|
forumTopicId: 301047
|
||||||
|
dashedName: create-a-gradual-css-linear-gradient
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Використання кольору для елементів HTML не обмежується лише одним відтінком. CSS надає можливість використовувати переходи між кольорами, які відомі як градієнти на елементах. Це дозволено робити через функцію `background` property's `linear-gradient()`. Ось загальний порядок:
|
||||||
|
|
||||||
|
```css
|
||||||
|
background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
|
||||||
|
```
|
||||||
|
|
||||||
|
Перший аргумент вказує напрямок, від якого починається перехід кольору - його можна позначити як ступінь, де `90deg` робить горизонтальний градієнт (зліва направо) і `45deg` робить градієнт по діагоналі (зліва знизу вправо вверх). Наступні аргументи визначають порядок кольорів, які використовуються в градієнті.
|
||||||
|
|
||||||
|
Наприклад:
|
||||||
|
|
||||||
|
```css
|
||||||
|
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Використовуйте `linear-gradient()` для елемента `div`, і встановіть йому напрям 35 градусів для зміни кольору від `#CCFFFF` до `#FFCCCC`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Елемент `div` повинен мати a `linear-gradient` `background` з вказаним напрямом і кольорами.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('div')
|
||||||
|
.css('background-image')
|
||||||
|
.match(
|
||||||
|
/linear-gradient\(35deg, rgb\(204, 255, 255\), rgb\(255, 204, 204\)\)/gi
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 70%;
|
||||||
|
height: 400px;
|
||||||
|
margin: 50px auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 70%;
|
||||||
|
height: 400px;
|
||||||
|
margin: 50px auto;
|
||||||
|
background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,89 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a6367417b2b2512add
|
||||||
|
title: Створення графіки за допомогою CSS
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cEDWPs6'
|
||||||
|
forumTopicId: 301048
|
||||||
|
dashedName: create-a-graphic-using-css
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Керуючи різними селекторами та властивостями, ви можете створювати цікаві фігури. Однією з найпростіших фігур є фігура півмісяця. Для цього завдання вам необхідно використати властивість `box-shadow`, яка задає тінь елементу, та властивість `border-radius`, яка контролює округлення кутів елементу.
|
||||||
|
|
||||||
|
Ви створите круглий, прозорий об'єкт з чіткою тінню, що трохи зсунута в сторону і повторює форму півмісяця.
|
||||||
|
|
||||||
|
Щоб створити круглий об'єкт, необхідно задати властивості `border-radius` значення 50%.
|
||||||
|
|
||||||
|
Як ви могли помітити в попередньому завданні, властивість `box-shadow` приймає значення: `offset-x`, `offset-y`, `blur-radius`, `spread-radius` і значення кольору. Значення `blur-radius` і `spread-radius` необов'язкові.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Керуйте квадратним елементом у редакторі, щоб створити форму місяця. Спочатку змініть `background-color` на `transparent`, тоді надайте властивості `border-radius` значення 50%, щоб створити круглу форму. Вкінці змініть властивість `box-shadow`, щоб надати властивості `offset-x` значення 25 пікселів, властивості `offset-y` - 10 пікселів, `blur-radius` - 0, `spread-radius` - 0, а за допомогою властивості `blue` встановити колір.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Значення властивості `background-color` має бути встановлено на `transparent`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/background-color:\s*?transparent;/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
Значення властивості `border-radius` має бути встановлено на `50%`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/border-radius:\s*?50%;/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
Значення властивості `box-shadow` повинно мати значення 25 пікселів для `offset-x`, 10 пікселів для `offset-y`, 0 для `blur-radius`, 0 для `spread-radius`, та колір має бути задано за допомогою `blue`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.center {
|
||||||
|
position: absolute;
|
||||||
|
margin: auto;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
background-color: blue;
|
||||||
|
border-radius: 0px;
|
||||||
|
box-shadow: 25px 10px 10px 10px green;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<div class="center"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.center {
|
||||||
|
position: absolute;
|
||||||
|
margin: auto;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
background-color: transparent;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 25px 10px 0 0 blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="center"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,122 @@
|
|||||||
|
---
|
||||||
|
id: 587d781b367417b2b2512abb
|
||||||
|
title: Створення горизонтального рядка за допомогою елемента hr
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c3bR8t7'
|
||||||
|
forumTopicId: 301049
|
||||||
|
dashedName: create-a-horizontal-line-using-the-hr-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Ви можете використовувати теґ `hr`, щоб додати горизонтальний рядок до ширини елемента, який він містить. Цей теґ можна використовувати для того, щоб позначити зміну теми або візуально розділити групи контенту.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Додайте тег `hr` під`h4`, який містить заголовок карти.
|
||||||
|
|
||||||
|
**Примітка:** У HTML, `hr` - само завершувальний тег і тому тег, що окремо закривається - не потрібен.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код має додати тег `hr` у текст розмітки.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('hr').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
Тег `hr` повинен бути між заголовком та абзацом.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4><s>Google</s>Alphabet</h4>
|
||||||
|
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4><s>Google</s>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,136 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a7367417b2b2512ae1
|
||||||
|
title: Створення руху за допомогою CSS анімації
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c7amZfW'
|
||||||
|
forumTopicId: 301051
|
||||||
|
dashedName: create-movement-using-css-animation
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Коли елементи мають певну `position`, наприклад `fixed` або `relative`, `right`, `left`, `top`, і `bottom` CSS офсет властивості зміщення можуть застосовуватись до анімацій, щоб створювати рух.
|
||||||
|
|
||||||
|
Як показано на прикладі нижче, ви можете перемістити об'єкт вниз, а потім вгору, якщо встановити його на 50px `50%` властивості `top`, але спочатку встановити 0px (`0%`), і останнє — (`100%`).
|
||||||
|
|
||||||
|
```css
|
||||||
|
@keyframes rainbow {
|
||||||
|
0% {
|
||||||
|
background-color: blue;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-color: green;
|
||||||
|
top: 50px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-color: yellow;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Додавання горизонтального руху до `div` анімації. Використовуючи властивість `left`, додайте до правила `@keyframes`, щоб веселка починалась на 0 pixels в `0%`, рухалась до 25 pixels в `50%` і закінчилась на -25 pixels в `100%`. Не переміщайте властивість `top` у редактор - анімація повинна мати як вертикальний, так і горизонтальний рух.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
0px офсет `left` повинен використовуватись з правилом `@keyframes` для `0%`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/[^50]0%\s*?{[\s\S]*?left:\s*?0px(;[\s\S]*?|\s*?)}/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
25px офсет `left` повинен використовуватись з правилом `@keyframes` для `50%`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/50%\s*?{[\s\S]*?left:\s*?25px(;[\s\S]*?|\s*?)}/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
-25px офсет `left` повинен використовуватись з правилом `@keyframes` для `100%`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/100%\s*?{[\s\S]*?left:\s*?-25px(;[\s\S]*?|\s*?)}/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
height: 40px;
|
||||||
|
width: 70%;
|
||||||
|
background: black;
|
||||||
|
margin: 50px auto;
|
||||||
|
border-radius: 5px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rect {
|
||||||
|
animation-name: rainbow;
|
||||||
|
animation-duration: 4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rainbow {
|
||||||
|
0% {
|
||||||
|
background-color: blue;
|
||||||
|
top: 0px;
|
||||||
|
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-color: green;
|
||||||
|
top: 50px;
|
||||||
|
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-color: yellow;
|
||||||
|
top: 0px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="rect"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
height: 40px;
|
||||||
|
width: 70%;
|
||||||
|
background: black;
|
||||||
|
margin: 50px auto;
|
||||||
|
border-radius: 5px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rect {
|
||||||
|
animation-name: rainbow;
|
||||||
|
animation-duration: 4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rainbow {
|
||||||
|
0% {
|
||||||
|
background-color: blue;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-color: green;
|
||||||
|
top: 50px;
|
||||||
|
left: 25px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-color: yellow;
|
||||||
|
top: 0px;
|
||||||
|
left: -25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="rect"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a5367417b2b2512ad8
|
||||||
|
title: Створити текстуру, додавши тонкий шаблон у вигляді фонового зображення
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cQdwJC8'
|
||||||
|
forumTopicId: 301052
|
||||||
|
dashedName: create-texture-by-adding-a-subtle-pattern-as-a-background-image
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Один із варіантів додати текстуру та надати фону цікавості і, щоб зробити його ще більше - це додати тонкий шаблон. Головне - це баланс, так як ви ж не не хочете, щоб фон дуже виділявся, заберіть його з переднього плану. Властивість `background` підтримує функцію `url()` для того, щоб посилатися на зображення вибраної текстури або шаблону. Посилання загорнуте в лапки всередині дужок.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Використання URL-адреси `https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png`, встановіть `background` для всієї сторінки селектора `body`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш елемент `body` повинен містити властивості `background`, встановленого за заданим посиланням `url()`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(
|
||||||
|
/background(-image)?:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\2\s*\)/gi
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: url("https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png");
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
@ -0,0 +1,118 @@
|
|||||||
|
---
|
||||||
|
id: 587d7791367417b2b2512ab3
|
||||||
|
title: Створення візуального балансу за допомогою властивості вирівнювання тексту
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c3b4EAp'
|
||||||
|
forumTopicId: 301053
|
||||||
|
dashedName: create-visual-balance-using-the-text-align-property
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Цей розділ навчальної програми присвячений застосуванню візуального дизайну. Перша група завдань спирається на задане розміщення карти, показуючи низку основних принципів.
|
||||||
|
|
||||||
|
Текст часто є значною частиною Web контенту. У CSS є кілька варіантів того, як можна вирівняти його за допомогою властивості `text-align`.
|
||||||
|
|
||||||
|
`text-align: justify;` вирівнює текст за шириною.
|
||||||
|
|
||||||
|
`text-align: center;` вирівнює текст по центру.
|
||||||
|
|
||||||
|
`text-align: right;` вирівнює текст за правим краєм.
|
||||||
|
|
||||||
|
А `text-align: left;` (за замовчуванням) вирівнює текст за лівим краєм.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Розмістіть текст теґу `h4` "Google" з вирівнюванням по центру. Тоді вирівняйте теґ абзацу, який містить інформацію про заснування Google, за шириною.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код повинен використовувати властивість вирівнювання тексту в тезі `h4`, щоб вирівняти його по центру (`center`).
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h4').css('text-align') == 'center');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код повинен використовувати властивість вирівнювання тексту в тезі `p` tag, щоб вирівняти його за шириною (`justify`).
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('p').css('text-align') == 'justify');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
margin-right: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
margin-right: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,95 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a7367417b2b2512ae2
|
||||||
|
title: Створити візуальний напрямок прибравши елемент зліва направо
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cGJqqAE'
|
||||||
|
forumTopicId: 301054
|
||||||
|
dashedName: create-visual-direction-by-fading-an-element-from-left-to-right
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Для цього завдання ви зміните `opacity` анімованого елемента, тому він поступово зникає, коли досягає правої частини екрану.
|
||||||
|
|
||||||
|
У відображеній анімації, округлий елемент з фоновим градієнтом рухається праворуч до позначки 50% анімації, як правило `@keyframes`.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Виділіть елемент з ідентифікатором `ball` і додайте властивість `opacity` у значення 0.1 `50%`, тому цей елемент зникає, так як рухається праворуч.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Правило `keyframes` для затухання повинне встановити властивість `opacity` на 0.1 на 50%.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(
|
||||||
|
/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
|
||||||
|
#ball {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
margin: 50px auto;
|
||||||
|
position: fixed;
|
||||||
|
left: 20%;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
animation-name: fade;
|
||||||
|
animation-duration: 3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade {
|
||||||
|
50% {
|
||||||
|
left: 60%;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="ball"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
#ball {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
margin: 50px auto;
|
||||||
|
position: fixed;
|
||||||
|
left: 20%;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
animation-name: fade;
|
||||||
|
animation-duration: 3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade {
|
||||||
|
50% {
|
||||||
|
left: 60%;
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="ball"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,134 @@
|
|||||||
|
---
|
||||||
|
id: 587d781c367417b2b2512abf
|
||||||
|
title: Зменшіть непрозорість елемента
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c7aKqu4'
|
||||||
|
forumTopicId: 301055
|
||||||
|
dashedName: decrease-the-opacity-of-an-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Властивість `opacity` у CSS використовується для налаштування непрозорості або, навпаки, прозорості об'єкта.
|
||||||
|
|
||||||
|
<blockquote>Значення 1 зовсім непрозоре, <br> Значення 0.5 напівпрозоре.<br>Значення 0 повністю прозоре.</blockquote>
|
||||||
|
|
||||||
|
Подане значення буде застосовуватися до всього елемента: чи то зображення з певною прозорістю, чи то колір переднього плану чи колір тла для текстового блоку.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Встановіть `opacity` якірних теґів на значення 0.7 за допомогою класу `links`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код має встановити властивість `opacity` на значення 0.7 на якірних теґах, обравши клас `links`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
/\.links\s*{([\s\S]*?;)*\s*opacity\s*:\s*0*\.70*\s*(;[\s\S]*?|\s*)}/.test(
|
||||||
|
$('style').text()
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(45, 45, 45, 0.1);
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 27px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
|
||||||
|
}
|
||||||
|
#thumbnail {
|
||||||
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard" id="thumbnail">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(45, 45, 45, 0.1);
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 27px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
#thumbnail {
|
||||||
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard" id="thumbnail">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a3367417b2b2512ad1
|
||||||
|
title: Дізнайтеся більше про додаткові кольори
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c2MD3Tr'
|
||||||
|
forumTopicId: 301056
|
||||||
|
dashedName: learn-about-complementary-colors
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Теорія кольору та її вплив на дизайн є широкою темою, і лише невелика її частина висвітлена у поданих завданнях. Колір може привернути увагу до інформації, викликати певні емоції чи допомогти у візуальному оформлені веб-сайту. Різноманітні комбінації кольорів можуть змінити увесь вигляд вашу сайту, і добір правильної кольорової палітри потребує чимало зусиль.
|
||||||
|
|
||||||
|
Колірне коло - це корисний інструмент, що показує, як співвідносяться кольори; тут схожі відтінки знаходяться поруч, і чим більше вони відрізняються, тим далі один від одного знаходяться. Якщо у колірному колі два кольори розташовані навпроти, вони називаються додатковими. Їхньою особливістю є те, що при комбінуванні, такі кольори "спростовують" один одного і утворюють сірий колір. Однак, розташовані поруч, вони стають яскравішими і створюють сильний візуальний контраст.
|
||||||
|
|
||||||
|
Ось декілька прикладів додаткових кольорів з їхніми hex-кодами:
|
||||||
|
|
||||||
|
<blockquote>червоний (#FF0000) та блакитний (#00FFFF)<br>зелений (#00FF00) та пурпуровий (#FF00FF)<br>синій (#0000FF) та жовтий (#FFFF00)</blockquote>
|
||||||
|
|
||||||
|
Ця модель має різні основні і додаткові кольори і відрізняється від застарілої колірної моделі RYB, якої багатьох з нас навчали у школі. Новітня колірна теорія використовує додаткову модель RGB (як показано на екрані комп'ютера) та субтрактивну колірну модель CMY(K) (використовується у поліграфії). Більше інформації про цю складну тему читайте [тут](https://en.wikipedia.org/wiki/Color_model).
|
||||||
|
|
||||||
|
Існує безліч онлайн-інструментів для підбору кольору, у яких є опція вибору додаткового кольору.
|
||||||
|
|
||||||
|
**Примітка:** Використання кольору може бути потужним способом у створенні візуально цікавої сторінки. Проте колір - не єдиний спосіб передачі важливої інформації, адже користувачі із вадами зору можуть її не зрозуміти. Це питання буде розглядатися більш детально у завданні Застосування Спеціальних можливостей.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Змініть властивість `background-color` для класів `blue` та `yellow` на відповідні їм кольори. Зверніть увагу, як по-іншому кольори виглядають порівняно один з одним і у порівнянні з білим фоном.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Елемент `div` класу `blue` повинне мати властивість `background-color` значення синього кольору.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||||
|
```
|
||||||
|
|
||||||
|
Елемент `div` класу `yellow` повинен мати властивість `background-color` значення жовтого кольору.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.blue {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
.yellow {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="blue"></div>
|
||||||
|
<div class="yellow"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.blue {
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
.yellow {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="blue"></div>
|
||||||
|
<div class="yellow"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,114 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a4367417b2b2512ad2
|
||||||
|
title: Дізнайтеся більше про третинні кольори (Tertiary)
|
||||||
|
challengeType: 0
|
||||||
|
forumTopicId: 301057
|
||||||
|
dashedName: learn-about-tertiary-colors
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Комп'ютерні монітори та екрани пристрою створюють різні кольори, поєднуючи кількість червоного, зеленого та синього світла. У сучасній теорії кольорів це відоме як додаткова колірна модель RGB. Червоний (red - R), зелений (green - G) та синій (blue - B) — основні кольори. Змішування двох основних кольорів створює вторинні кольори: блакитний (G + B), пурпурний (R + B) і жовтий (R + G). Ви бачили ці кольори у завданні про дадаткові кольори. Ці вторинні кольори є доповненням до основного кольору, який не використовується при їх створенні, і є протилежними до основного кольору на колірному колі. Наприклад, пурпуровий — це колір від змішування червоного та синього кольорів і є компліментарним кольором до зеленого.
|
||||||
|
|
||||||
|
Третинні кольори є результатом поєднання основного кольору з одним із вторинним сусіднім кольором. Наприклад, у колірній моделі RGB червоний (первинний колір) та жовтий (вторинний колір) утворюють оранжевий (третинний колір). Це додасть ще шість кольорів до простого колірного кола загалом їх дванадцять.
|
||||||
|
|
||||||
|
Існують різні методи вибору різних кольорів, що в результаті стають гармонійним поєднанням дизайну. Наприклад, використання третинних кольорів можливе у спліт-додатковій колірній схемі. Ця схема починається з базового кольору, а потім поєднується з двома кольорами, які є сусідніми до його протилежного кольору. Ці три кольори утворюють сильний зоровий контраст у дизайні, але є менш вираженими, ніж використання двох доповняльних кольорів.
|
||||||
|
|
||||||
|
Три кольори утворені за допомогою комплементарної схеми:
|
||||||
|
|
||||||
|
<table class='table table-striped'><thead><tr><th>Колір</th><th>Шістнадцятковий код кольору</th></tr></thead><thead></thead><tbody><tr><td>оранжевий</td><td>#FF7F00</td></tr><tr><td>бірюзовий</td><td>#00FFFF</td></tr><tr><td>малиновий</td><td>#FF007F</td></tr></tbody></table>
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Змініть характеристики класів `background-color`, `orange`, `cyan` і `raspberry` на відповідні кольори. Переконайтеся, що ви використовуєте шістнадцяткові коди, а не назви кольорів.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
У `div` елементу класу `orange` повинен бути оранжевий `background-color`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.orange').css('background-color') == 'rgb(255, 127, 0)');
|
||||||
|
```
|
||||||
|
|
||||||
|
У `div` елементу класу `cyan` фоновий колір має бути бірюзовий `background-color`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||||
|
```
|
||||||
|
|
||||||
|
У `div` елементу класу `raspberry` повинен бути малиновий `background-color`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.raspberry').css('background-color') == 'rgb(255, 0, 127)');
|
||||||
|
```
|
||||||
|
|
||||||
|
Усі значення `background-color` для класів кольорів мають бути шістнадцятковими кодами, а не назвами кольорів.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(!/background-color:\s(orange|cyan|raspberry)/.test(code));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orange {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cyan {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.raspberry {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="orange"></div>
|
||||||
|
<div class="cyan"></div>
|
||||||
|
<div class="raspberry"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orange {
|
||||||
|
background-color: #FF7F00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cyan {
|
||||||
|
background-color: #00FFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.raspberry {
|
||||||
|
background-color: #FF007F;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="orange"></div>
|
||||||
|
<div class="cyan"></div>
|
||||||
|
<div class="raspberry"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,136 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a9367417b2b2512ae8
|
||||||
|
title: Дізнайтеся, як працюють криві Безьє
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c9bDrs8'
|
||||||
|
forumTopicId: 301058
|
||||||
|
dashedName: learn-how-bezier-curves-work
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
В останньому завданні були представлені властивості `animation-timing-function` та декілька ключових слів, які змінюють швидкість анімації. CSS пропонує інші варіанти, окрім ключових слів, які забезпечують ще точніший контроль над відтворенням анімації за допомогою кривих Безьє.
|
||||||
|
|
||||||
|
У анімаціях CSS криві Безьє використовуються з функцією `cubic-bezier`. Форма кривої демонструє, як буде відтворена анімація. Крива лежить на координатній системі 1 до 1. Вісь x цієї координатної системи позначає тривалість анімації (уявіть часову шкалу), а вісь y — зміни в анімації.
|
||||||
|
|
||||||
|
Функція `cubic-bezier` складається з чотирьох основних точок, які розташовані на координатній сітці 1 на 1: `p0`, `p1`, `p2`, та `p3`. `p0` та `p3` налаштовані для вас: це початкова та кінцева точки, які завжди розташовані відповідно у початку координат (0, 0) та (1, 1). Ви встановлюєте значення x та у для інших двох точок, і їхнє розміщення у координатній сітці задає форму кривої для даної анімації. Усе це виконується мовою CSS, надаючи значення x та y початкам виділення `p1` та `p2` у вигляді: `(x1, y1, x2, y2)`. Підсумовуючи, ось приклад кривої Безьє в коді CSS:
|
||||||
|
|
||||||
|
```css
|
||||||
|
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
|
||||||
|
```
|
||||||
|
|
||||||
|
У прикладі вище значення x та y рівнозначні (x1 = 0.25 = y1 and x2 = 0.75 = y2), а ми пам'ятаємо з геометрії, що це лінія, яка простягається від початку координат до точки (1, 1). Ця анімація є лінійною зміною елемента протягом тривалості анімації і така ж, як за допомогою ключового слова `linear`. Інакше кажучи, вона змінюється постійно.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Для елемента з ідентифікатором `ball1` змініть значення властивості `animation-timing-function` з `linear` на його еквівалентне значення функції `cubic-bezier`. Використовуйте значення точки, як у прикладі вище.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Значення властивості `animation-timing-function` для елемента з ідентифікатором `ball1` має бути лінійно-еквівалентним функції `cubic-bezier`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('#ball1').css('animation-timing-function') ==
|
||||||
|
'cubic-bezier(0.25, 0.25, 0.75, 0.75)'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
Значення властивості `animation-timing-function` для елемента з ідентифікатором `ball2` не повинно змінюватися.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const ball2Animation = __helpers.removeWhiteSpace(
|
||||||
|
$('#ball2').css('animation-timing-function')
|
||||||
|
);
|
||||||
|
assert(
|
||||||
|
ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.balls{
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
position: fixed;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin-top: 50px;
|
||||||
|
animation-name: bounce;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
#ball1 {
|
||||||
|
left: 27%;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
#ball2 {
|
||||||
|
left: 56%;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 249px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="balls" id="ball1"></div>
|
||||||
|
<div class="balls" id="ball2"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.balls{
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
position: fixed;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin-top: 50px;
|
||||||
|
animation-name: bounce;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
#ball1 {
|
||||||
|
left: 27%;
|
||||||
|
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
|
||||||
|
}
|
||||||
|
#ball2 {
|
||||||
|
left: 56%;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 249px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="balls" id="ball1"></div>
|
||||||
|
<div class="balls" id="ball2"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,136 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a7367417b2b2512adf
|
||||||
|
title: Дізнайтеся, як працюють CSS @keyframames і властивості анімації
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cakprhv'
|
||||||
|
forumTopicId: 301059
|
||||||
|
dashedName: learn-how-the-css-keyframes-and-animation-properties-work
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Щоб анімувати елемент, потрібно знати про властивості анімації і правило `@keyframes`. Властивості анімації визначають поведінку анімації і правило `@keyframes` контролює, що відбувається під час цієї анімації. Загалом, існує вісім властивостей анімації. Ми не будемо ускладнювати це завдання і розглянемо спершу дві найважливіші:
|
||||||
|
|
||||||
|
`animation-name` встановлює назву анімації, яка пізніше використовується `@keyframes`, щоб вказати CSS, які правила використовуються з якими анімаціями.
|
||||||
|
|
||||||
|
`animation-duration` встановлює тривалість анімації.
|
||||||
|
|
||||||
|
`@keyframes` це спосіб точно вказати, що відбувається в анімації протягом цієї тривалості. Це робиться надавши властивості CSS певним "кадрам" під час анімації, з відсотками в межах від 0% до 100%. Якщо порівняти це з фільмом, властивості CSS для 0% - це те, як елемент відображається на початковій сцені. Властивості CSS для 100% - це те, як цей елемент виглядає в кінці прямо саме перед тим, як починаються титри. Тоді CSS використовує магію заміни елемента за вказану тривалість для відтворення сцени. Ось приклад, що ілюструє використання `@keyframes` та властивостей анімації:
|
||||||
|
|
||||||
|
```css
|
||||||
|
#anim {
|
||||||
|
animation-name: colorful;
|
||||||
|
animation-duration: 3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes colorful {
|
||||||
|
0% {
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Для елемента з id `anim` фрагмент коду вище встановлює `animation-name` на `colorful` і встановлює `animation-duration` на 3 секунди. Тоді правило `@keyframes` посилається на властивості анімації з назвою `colorful`. Він встановлює синій колір на початку анімації (0%), який перейде в жовтий до кінця анімації (100%). Ви не обмежені лише початковим та кінцевим переходами, ви можете встановити властивості елементу в будь-яких межах між 0% і 100%.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Створіть анімацію для елемента з id `rect`, встановивши `animation-name` на `rainbow` та `animation-duration` на 4 секунди. Далі, задайте правило `@keyframes` і встановіть голубий `background-color` на початку анімації (`0%`), зелений посередині анімації (`50%`) та жовтий в кінці анімації (`100%`).
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Елемент з id `rect` повинен мати властивість `animation-name` зі значенням `rainbow`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#rect').css('animation-name') == 'rainbow');
|
||||||
|
```
|
||||||
|
|
||||||
|
Елемент з id `rect` повинен мати `animation-duration` 4 секунд.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#rect').css('animation-duration') == '4s');
|
||||||
|
```
|
||||||
|
|
||||||
|
Правило `@keyframes` повинно використовувати `animation-name` `rainbow`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/@keyframes\s+?rainbow\s*?{/g));
|
||||||
|
```
|
||||||
|
|
||||||
|
Правило `@keyframes` повинно використовувати для `rainbow` `blue` `background-color` при 0%.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
Правило `@keyframes` повинно використовувати для `rainbow` `green` `background-color` при 50%.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
Правило `@keyframes` повинно використовувати для `rainbow` `yellow` `background-color` при 100%.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
height: 40px;
|
||||||
|
width: 70%;
|
||||||
|
background: black;
|
||||||
|
margin: 50px auto;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rect {
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<div id="rect"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
height: 40px;
|
||||||
|
width: 70%;
|
||||||
|
background: black;
|
||||||
|
margin: 50px auto;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rect {
|
||||||
|
animation-name: rainbow;
|
||||||
|
animation-duration: 4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rainbow {
|
||||||
|
0% {
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="rect"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
---
|
||||||
|
id: 587d781e367417b2b2512acb
|
||||||
|
title: З'єднайте елемент з батьківським елементом за допомогою абсолютної розстановки
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cyLJ7c3'
|
||||||
|
forumTopicId: 301060
|
||||||
|
dashedName: lock-an-element-to-its-parent-with-absolute-positioning
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Наступним варіантом для властивості CSS `position` є `absolute`, який замикає елемент на місці відносно його батьківського елемента. На відміну від положення `relative`, він видаляє елемент зі звичайного потоку документа, тож об'єкти навколо його ігнорують. Властивості зміщення CSS (вгору або вниз, ліворуч або праворуч) використовуються для налаштування розташування.
|
||||||
|
|
||||||
|
Один нюанс з абсолютною розстановкою полягає в тому, що він буде приєднаний до найближчого *positioned* родича. Якщо ви забудете додати правило розстановки до батьківського елемента (зазвичай це відбувається під час використання `position: relative;`), браузер продовжить шукати ланцюжок і за замовчуванням перемикатися на теґ `body`.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Приєднайте елемент `#searchbar` до правого верхнього кута його батьківського елемента `section`, зазначивши його `position` як `absolute`. Надайте теґам `top` і `right` значення по 50 пікселів.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Елемент `#searchbar` має містити `position`, встановлену на `absolute`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#searchbar').css('position') == 'absolute');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код має використовувати зміщення CSS `top` зі значенням 50 пікселів на елементі `#searchbar`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#searchbar').css('top') == '50px');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код має використовувати зміщення CSS `right` зі значенням 50 пікселів на елементі `#searchbar`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#searchbar').css('right') == '50px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
#searchbar {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
section {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<h1>Welcome!</h1>
|
||||||
|
<section>
|
||||||
|
<form id="searchbar">
|
||||||
|
<label for="search">Search:</label>
|
||||||
|
<input type="search" id="search" name="search">
|
||||||
|
<input type="submit" name="submit" value="Go!">
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
#searchbar {
|
||||||
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
right: 50px;
|
||||||
|
}
|
||||||
|
section {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<h1>Welcome!</h1>
|
||||||
|
<section>
|
||||||
|
<form id="searchbar">
|
||||||
|
<label for="search">Search:</label>
|
||||||
|
<input type="search" id="search" name="search">
|
||||||
|
<input type="submit" name="submit" value="Go!">
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,120 @@
|
|||||||
|
---
|
||||||
|
id: 587d781e367417b2b2512acc
|
||||||
|
title: Заблокувати елемент у вікні браузера з фіксованим розташуванням
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c2MDNUR'
|
||||||
|
forumTopicId: 301061
|
||||||
|
dashedName: lock-an-element-to-the-browser-window-with-fixed-positioning
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Наступна схема, яку пропонує CSS - позиція `fixed`, яка є категоричним позиціонуванням, що блокує елемент відносно вікна браузера. Схоже до абсолютного розташування, він використовується властивостями зміщення CSS, а також видаляє елемент із стандартного потоку документів. Інші позиції більше не "реалізуються" там, де вони розташовані, що може вимагати деякого коректування макета в інших місцях.
|
||||||
|
|
||||||
|
Одна ключова різниця між позиціями `fixed` та `absolute` - елемент з фіксованою позицією не переміститься при прокрутці.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Навігаційний рядок в коді позначений з id `navbar`. Змінити `position` на `fixed` і компенсувати 0 пікселів `top` та 0 пікселів `eft`. Після того, як ви додали код, прокрутіть до попереднього перегляду вікна, щоб побачити як навігація залишається на місці.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Елемент `#navbar` повинен мати `position` встановлену як `fixed`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#navbar').css('position') == 'fixed');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код повинен застосовувати `top` CSS offset в 0 пікселів на елементі `#navbar`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#navbar').css('top') == '0px');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код повинен використовувати `left` CSS 0 пікселів на елемент`#navbar`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#navbar').css('left') == '0px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
min-height: 150vh;
|
||||||
|
}
|
||||||
|
#navbar {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
background-color: #767676;
|
||||||
|
}
|
||||||
|
nav ul {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 5px 0px 5px 30px;
|
||||||
|
}
|
||||||
|
nav li {
|
||||||
|
display: inline;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Welcome!</h1>
|
||||||
|
<nav id="navbar">
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Home</a></li>
|
||||||
|
<li><a href="">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<p>I shift up when the #navbar is fixed to the browser window.</p>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
min-height: 150vh;
|
||||||
|
}
|
||||||
|
#navbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #767676;
|
||||||
|
}
|
||||||
|
nav ul {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 5px 0px 5px 30px;
|
||||||
|
}
|
||||||
|
nav li {
|
||||||
|
display: inline;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Welcome!</h1>
|
||||||
|
<nav id="navbar">
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Home</a></li>
|
||||||
|
<li><a href="">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<p>I shift up when the #navbar is fixed to the browser window.</p>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,181 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a8367417b2b2512ae4
|
||||||
|
title: Створення анімації серцебиття за допомогою властивості Infinite Animation Count
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cDZpDUr'
|
||||||
|
forumTopicId: 301062
|
||||||
|
dashedName: make-a-css-heartbeat-using-an-infinite-animation-count
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Ось ще один приклад безперервної анімації з властивістю `animation-iteration-count`, що використовує серце, яке ви створили в попередньому завданні.
|
||||||
|
|
||||||
|
Анімація серцебиття тривалістю в одну секунду складається з двох анімованих частин. Елементи `heart` (у тому числі частини `:before` та `:after`) анімуються, щоб змінити розмір за допомогою властивості `transform`, а фон `div` анімується, щоб змінити його колір за допомогою властивості `background`.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Щоб серце почало битися, додайте властивість `animation-iteration-count` для класу `back` і класу `heart` та задайте значення `infinite`. Селектори `heart:before` та `heart:after` не потребують жодних властивостей анімації.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Властивість `animation-iteration-count` для класу `heart` повинна мати значення `infinite`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.heart').css('animation-iteration-count') == 'infinite');
|
||||||
|
```
|
||||||
|
|
||||||
|
Властивість `animation-iteration-count` для класу `back` повинна мати значення `infinite`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.back').css('animation-iteration-count') == 'infinite');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.back {
|
||||||
|
position: fixed;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: white;
|
||||||
|
animation-name: backdiv;
|
||||||
|
animation-duration: 1s;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.heart {
|
||||||
|
position: absolute;
|
||||||
|
margin: auto;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: pink;
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
animation-name: beat;
|
||||||
|
animation-duration: 1s;
|
||||||
|
|
||||||
|
}
|
||||||
|
.heart:after {
|
||||||
|
background-color: pink;
|
||||||
|
content: "";
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
top: 0px;
|
||||||
|
left: 25px;
|
||||||
|
}
|
||||||
|
.heart:before {
|
||||||
|
background-color: pink;
|
||||||
|
content: "";
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
top: -25px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes backdiv {
|
||||||
|
50% {
|
||||||
|
background: #ffe6f2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes beat {
|
||||||
|
0% {
|
||||||
|
transform: scale(1) rotate(-45deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(0.6) rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<div class="back"></div>
|
||||||
|
<div class="heart"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.back {
|
||||||
|
position: fixed;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: white;
|
||||||
|
animation-name: backdiv;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heart {
|
||||||
|
position: absolute;
|
||||||
|
margin: auto;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: pink;
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
animation-name: beat;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
.heart:after {
|
||||||
|
background-color: pink;
|
||||||
|
content: "";
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
top: 0px;
|
||||||
|
left: 25px;
|
||||||
|
}
|
||||||
|
.heart:before {
|
||||||
|
background-color: pink;
|
||||||
|
content: "";
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
top: -25px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes backdiv {
|
||||||
|
50% {
|
||||||
|
background: #ffe6f2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes beat {
|
||||||
|
0% {
|
||||||
|
transform: scale(1) rotate(-45deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(0.6) rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="back"></div>
|
||||||
|
<div class="heart"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,121 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a9367417b2b2512aea
|
||||||
|
title: Зробити рух більш природнім за допомогою кривої Безьє
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c7akWUv'
|
||||||
|
forumTopicId: 301063
|
||||||
|
dashedName: make-motion-more-natural-using-a-bezier-curve
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Це завдання заохочує елемент для повтору руху кульки, якою жонглюють. Пріоритетні завдання охоплювали кубічні криві Безьє `linear` і `ease-out`, однак жодна із них не зображує точно сам рух жонглювання. Для цього вам потрібно налаштувати криву Безьє.
|
||||||
|
|
||||||
|
`animation-timing-function` автоматично з'являється на кожному ключовому кадрі, коли `animation-iteration-count` встановлений до безкінечності. Так як існує правило ключового кадру, встановлене всередині тривалості анімації (на `50%`), це призводить до виникнення двох однакових анімацій руху м'яча вгору і вниз.
|
||||||
|
|
||||||
|
Наступна кубічна крива Безьє відтворює рух жонглювання:
|
||||||
|
|
||||||
|
```css
|
||||||
|
cubic-bezier(0.3, 0.4, 0.5, 1.6);
|
||||||
|
```
|
||||||
|
|
||||||
|
Зазначте собі, що значення y2 більше, ніж 1. Хоча кубічна крива Безьє розміщена в точці 1 на 1 в системі координат, і це лише приймає значення х від 0 до 1, значення може бути встановлене у цифрах, які дорівнюють більше 1. Це приведе до того, що рух стрибка, який є ідеальним для відтворення жонглювання м'яча.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Змініть значення `animation-timing-function` елемента з ідентифікацією `green` до функції `cubic-bezier` зі заченнями х1, y1, x2, y2, які вказані відповідно до 0.311, 0.441, 0.444, 1.649.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Значення властивості `animation-timing-function` для елемента з ідентифікацією `green` повинне бути функцією `cubic-bezier` з вказаними значеннями x1, y1, x2, y2.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('#green').css('animation-timing-function') ==
|
||||||
|
'cubic-bezier(0.311, 0.441, 0.444, 1.649)'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.balls {
|
||||||
|
border-radius: 50%;
|
||||||
|
position: fixed;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
top: 60%;
|
||||||
|
animation-name: jump;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
#red {
|
||||||
|
background: red;
|
||||||
|
left: 25%;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
#blue {
|
||||||
|
background: blue;
|
||||||
|
left: 50%;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
#green {
|
||||||
|
background: green;
|
||||||
|
left: 75%;
|
||||||
|
animation-timing-function: cubic-bezier(0.69, 0.1, 1, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes jump {
|
||||||
|
50% {
|
||||||
|
top: 10%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="balls" id="red"></div>
|
||||||
|
<div class="balls" id="blue"></div>
|
||||||
|
<div class="balls" id="green"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.balls {
|
||||||
|
border-radius: 50%;
|
||||||
|
position: fixed;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
top: 60%;
|
||||||
|
animation-name: jump;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
#red {
|
||||||
|
background: red;
|
||||||
|
left: 25%;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
#blue {
|
||||||
|
background: blue;
|
||||||
|
left: 50%;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
#green {
|
||||||
|
background: green;
|
||||||
|
left: 75%;
|
||||||
|
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes jump {
|
||||||
|
50% {
|
||||||
|
top: 10%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="balls" id="red"></div>
|
||||||
|
<div class="balls" id="blue"></div>
|
||||||
|
<div class="balls" id="green"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
---
|
||||||
|
id: 58a7a6ebf9a6318348e2d5aa
|
||||||
|
title: Змінюйте режим заповнення анімації
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cVJDmcE'
|
||||||
|
forumTopicId: 301064
|
||||||
|
dashedName: modify-fill-mode-of-an-animation
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Усе чудово, але ще не все правильно працює. Зверніть увагу, як анімація починається з початку, коли проходить `500ms`, у результаті чого кнопка повертається до початкового кольору. Потрібно, щоб кнопка підсвічувалася.
|
||||||
|
|
||||||
|
Це можливо зробити налаштовуючи властивості `animation-fill-mode` до `forwards`. `animation-fill-mode` визначає стиль, застосований до елемента після завершення анімації. Ви можете налаштувати це так:
|
||||||
|
|
||||||
|
```css
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Налаштуйте властивості `animation-fill-mode` property of `button:hover` to `forwards`, щоб кнопка підсвічувалася, коли користувач наводить на неї.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`button:hover` повинна мати властивість `animation-fill-mode` зі значенням `forwards`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(
|
||||||
|
/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi
|
||||||
|
) &&
|
||||||
|
code.match(
|
||||||
|
/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi
|
||||||
|
) &&
|
||||||
|
code.match(
|
||||||
|
/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
button {
|
||||||
|
border-radius: 5px;
|
||||||
|
color: white;
|
||||||
|
background-color: #0F5897;
|
||||||
|
padding: 5px 10px 8px 10px;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
animation-name: background-color;
|
||||||
|
animation-duration: 500ms;
|
||||||
|
/* Only change code below this line */
|
||||||
|
|
||||||
|
/* Only change code above this line */
|
||||||
|
}
|
||||||
|
@keyframes background-color {
|
||||||
|
100% {
|
||||||
|
background-color: #4791d0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<button>Register</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
button {
|
||||||
|
border-radius: 5px;
|
||||||
|
color: white;
|
||||||
|
background-color: #0F5897;
|
||||||
|
padding: 5px 10px 8px 10px;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
animation-name: background-color;
|
||||||
|
animation-duration: 500ms;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
@keyframes background-color {
|
||||||
|
100% {
|
||||||
|
background-color: #4791d0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<button>Register</button>
|
||||||
|
```
|
||||||
@ -0,0 +1,70 @@
|
|||||||
|
---
|
||||||
|
id: 587d781e367417b2b2512aca
|
||||||
|
title: Переміщення відносно розміщеного елемента за допомогою зсуву CSS
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c9bQEA4'
|
||||||
|
forumTopicId: 301065
|
||||||
|
dashedName: move-a-relatively-positioned-element-with-css-offsets
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Зсуви CSS `top` або `bottom` та `left` або `right` повідомляють браузеру, як далеко зсунути елемент відносно того, де б він знаходився у звичайному потоці документа. Ви зсуваєте елемент від вказаної точки, яка відводить елемент від заданої сторони (по суті, у протилежному напрямку). Як ви бачили в останньому завданні, використання зсуву `top` перемістило `h2` вниз. Так само використання зсуву `left` переміщує елемент праворуч.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Використайте CSS offsets, щоб перемістити `h2` на 15 пікселів праворуч і 10 пікселів вгору.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код повинен використовувати CSS offset, щоб змістити `h2` на 10 пікселів вгору. Іншими словами, перемістіть його на 10 пікселів від `bottom`, де він зазвичай розташований.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h2').css('bottom') == '10px');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код повинен використовувати CSS offset, щоб змістити `h2` на 15 пікселів праворуч. Іншими словами, перемістіть його на 15 пікселів від `left`, де він зазвичай розташований.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h2').css('left') == '15px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
h2 {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>On Being Well-Positioned</h1>
|
||||||
|
<h2>Move me!</h2>
|
||||||
|
<p>I still think the h2 is where it normally sits.</p>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
h2 {
|
||||||
|
position: relative;
|
||||||
|
left: 15px;
|
||||||
|
bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>On Being Well-Positioned</h1>
|
||||||
|
<h2>Move me!</h2>
|
||||||
|
<p>I still think the h2 is where it normally sits.</p>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,100 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a3367417b2b2512ace
|
||||||
|
title: Переміщення елементів вліво та вправо за допомогою властивості float
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c2MDqu2'
|
||||||
|
forumTopicId: 301066
|
||||||
|
dashedName: push-elements-left-or-right-with-the-float-property
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Наступний інструмент позиціювання не використовує `position`, а встановлює властивість елемента `float`. Вирівнені елементи видаляються зі звичного потоку документа та посуваються або до `left`, або `right` до їхнього початкового елементу. Він зазвичай використовується з властивістю `width`, щоб визначити скільки потрібно місця горизонтально для вирівняних елементів.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Ця розмітка буде добре працювати разом з макетом елементів, що складається з двох колон `section` і `aside`, що знаходяться поруч один з одним. Надайте `#left` елементу `float` `left` та `#right` елементу `float` `right`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Елемент з ідентифікатором `left` має мати значення `left` `float`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#left').css('float') == 'left');
|
||||||
|
```
|
||||||
|
|
||||||
|
Елемент з ідентифікатором `right` має мати значення `right` `float`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#right').css('float') == 'right');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
#left {
|
||||||
|
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
#right {
|
||||||
|
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
aside, section {
|
||||||
|
padding: 2px;
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Welcome!</h1>
|
||||||
|
</header>
|
||||||
|
<section id="left">
|
||||||
|
<h2>Content</h2>
|
||||||
|
<p>Good stuff</p>
|
||||||
|
</section>
|
||||||
|
<aside id="right">
|
||||||
|
<h2>Sidebar</h2>
|
||||||
|
<p>Links</p>
|
||||||
|
</aside>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
#left {
|
||||||
|
float: left;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
#right {
|
||||||
|
float: right;
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
aside, section {
|
||||||
|
padding: 2px;
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Welcome!</h1>
|
||||||
|
</header>
|
||||||
|
<section id="left">
|
||||||
|
<h2>Content</h2>
|
||||||
|
<p>Good stuff</p>
|
||||||
|
</section>
|
||||||
|
<aside id="right">
|
||||||
|
<h2>Sidebar</h2>
|
||||||
|
<p>Links</p>
|
||||||
|
</aside>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,119 @@
|
|||||||
|
---
|
||||||
|
id: 587d781c367417b2b2512ac2
|
||||||
|
title: Встановлення розміру шрифту для для кількох елементів заголовку
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cPpQNT3'
|
||||||
|
forumTopicId: 301067
|
||||||
|
dashedName: set-the-font-size-for-multiple-heading-elements
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Властивість `font-size` використовується для визначення розміру тексту в заданому елементі. Це правило можна застосовувати для кількох елементів, щоб створити візуальну узгодженість тексту на сторінці. У цьому завданні ви встановите значення для всіх `h1` по `h6` тегів, щоб вирівняти розмір заголовків.
|
||||||
|
|
||||||
|
# --instructions-- <p>У тегах <code>style</code>, встановіть <code>font-size</code> у:</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Тег <code>h1</code> до 68px.</li>
|
||||||
|
<li>Тег <code>h2</code> до 52px.</li>
|
||||||
|
<li>Тег <code>h3</code> до 40px.</li>
|
||||||
|
<li>Тег <code>h4</code> до 32px.</li>
|
||||||
|
<li>Тег <code>h5</code> до 21px.</li>
|
||||||
|
<li>Тег <code>h6</code> до 14px.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код має встановити властивість `font-size` для `h1` тегу до 68 пікселів.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const fontSizeOfh1 = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('font-size');
|
||||||
|
assert(fontSizeOfh1 === '68px');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код має встановити властивість `font-size` для `h2` тегу до 52 пікселів.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const fontSizeOfh2 = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('font-size');
|
||||||
|
assert(fontSizeOfh2 === '52px');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код має встановити властивість `font-size` для `h3` тегу до 40 пікселів.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const fontSizeOfh3 = new __helpers.CSSHelp(document).getStyle('h3')?.getPropertyValue('font-size');
|
||||||
|
assert(fontSizeOfh3 === '40px');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код має встановити властивість `font-size` для `h4` тегу до 32 пікселів.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const fontSizeOfh4 = new __helpers.CSSHelp(document).getStyle('h4')?.getPropertyValue('font-size');
|
||||||
|
assert(fontSizeOfh4 === '32px');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код має встановити властивість `font-size` для `h5` тегу до 21 пікселів.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const fontSizeOfh5 = new __helpers.CSSHelp(document).getStyle('h5')?.getPropertyValue('font-size');
|
||||||
|
assert(fontSizeOfh5 === '21px');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код має встановити властивість `font-size` для `h6` тегу до 14 пікселів.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const fontSizeOfh6 = new __helpers.CSSHelp(document).getStyle('h6')?.getPropertyValue('font-size');
|
||||||
|
assert(fontSizeOfh6 === '14px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<h1>This is h1 text</h1>
|
||||||
|
<h2>This is h2 text</h2>
|
||||||
|
<h3>This is h3 text</h3>
|
||||||
|
<h4>This is h4 text</h4>
|
||||||
|
<h5>This is h5 text</h5>
|
||||||
|
<h6>This is h6 text</h6>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h1 {
|
||||||
|
font-size: 68px;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 52px;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
h5 {
|
||||||
|
font-size: 21px;
|
||||||
|
}
|
||||||
|
h6 {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h1>This is h1 text</h1>
|
||||||
|
<h2>This is h2 text</h2>
|
||||||
|
<h3>This is h3 text</h3>
|
||||||
|
<h4>This is h4 text</h4>
|
||||||
|
<h5>This is h5 text</h5>
|
||||||
|
<h6>This is h6 text</h6>
|
||||||
|
```
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
---
|
||||||
|
id: 587d781c367417b2b2512ac4
|
||||||
|
title: Встановлення розміру шрифту тексту абзацу
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cVJ36Cr'
|
||||||
|
forumTopicId: 301068
|
||||||
|
dashedName: set-the-font-size-of-paragraph-text
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Властивість `font-size` у CSS не обмежується лише заголовками, вона може застосовуватись до будь-якого елементу, що містить текст.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Абзац стане більш видимий, якщо змінити значення властивості `font-size` до 16px.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш тег `p` повинен мати розмір шрифту 16 pixels `font-size`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('p').css('font-size') == '16px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
|
</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
|
</p>
|
||||||
|
```
|
||||||
@ -0,0 +1,132 @@
|
|||||||
|
---
|
||||||
|
id: 587d781c367417b2b2512ac3
|
||||||
|
title: Встановлення насиченості для кількох елементів заголовку
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/crVWRHq'
|
||||||
|
forumTopicId: 301069
|
||||||
|
dashedName: set-the-font-weight-for-multiple-heading-elements
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
В останньому завданні ви встановлювали `font-size` кожного тегу, тут ви зміните `font-weight`.
|
||||||
|
|
||||||
|
Властивість `font-weight` визначає наскільки символи в тексті будуть товстими або тонкими.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
<ul><li>Встановіть <code>font-weight</code> <code>h1</code> тегу до 800.</li><li>Встановіть <code>font-weight</code> <code>h2</code> тегу до 600.</li><li>Встановіть <code>font-weight</code> <code>h3</code> тегу до 500.</li><li>Встановіть <code>font-weight</code> <code>h4</code> тегу до 400.</li><li>Встановіть <code>font-weight</code> <code>h5</code> тегу до 300.</li><li>Встановіть <code>font-weight</code> <code>h6</code> тегу до 200.</li></ul>
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код має встановити властивість `font-weight` для `h1` тегу до 800.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h1').css('font-weight') == '800');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код має встановити властивість `font-weight` для `h2` тегу до 600.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h2').css('font-weight') == '600');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код має встановити властивість `font-weight` для `h3` тегу до 500.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h3').css('font-weight') == '500');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код має встановити властивість `font-weight` для `h4` тегу до 400.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h4').css('font-weight') == '400');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код має встановити властивість `font-weight` для `h5` тегу до 300.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h5').css('font-weight') == '300');
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш код має встановити властивість `font-weight` для `h6` тегу до 200.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h6').css('font-weight') == '200');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h1 {
|
||||||
|
font-size: 68px;
|
||||||
|
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 52px;
|
||||||
|
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 40px;
|
||||||
|
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size: 32px;
|
||||||
|
|
||||||
|
}
|
||||||
|
h5 {
|
||||||
|
font-size: 21px;
|
||||||
|
|
||||||
|
}
|
||||||
|
h6 {
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h1>This is h1 text</h1>
|
||||||
|
<h2>This is h2 text</h2>
|
||||||
|
<h3>This is h3 text</h3>
|
||||||
|
<h4>This is h4 text</h4>
|
||||||
|
<h5>This is h5 text</h5>
|
||||||
|
<h6>This is h6 text</h6>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h1 {
|
||||||
|
font-size: 68px;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 52px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
h5 {
|
||||||
|
font-size: 21px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
h6 {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h1>This is h1 text</h1>
|
||||||
|
<h2>This is h2 text</h2>
|
||||||
|
<h3>This is h3 text</h3>
|
||||||
|
<h4>This is h4 text</h4>
|
||||||
|
<h5>This is h5 text</h5>
|
||||||
|
<h6>This is h6 text</h6>
|
||||||
|
```
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
---
|
||||||
|
id: 587d781d367417b2b2512ac5
|
||||||
|
title: Установка висоти рядків абзаців
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/crVWdcv'
|
||||||
|
forumTopicId: 301070
|
||||||
|
dashedName: set-the-line-height-of-paragraphs
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
CSS пропонує характеристику `line-height`, щоб змінити висоту кожного рядка у блоці тексту. Як пропонує назва, це змінює кількість вертикального простору, який отримує кожен рядок тексту.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Додайте властивість `line-height` до тегу `p` і встановіть до 25px.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код повинен встановити `line-height` тегу `p` до 25 пікселів.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('p').css('line-height') == '25px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
|
</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
|
</p>
|
||||||
|
```
|
||||||
@ -0,0 +1,128 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a9367417b2b2512ae9
|
||||||
|
title: Використання кривої Безьє для переміщення графіка
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c6bnRCK'
|
||||||
|
forumTopicId: 301071
|
||||||
|
dashedName: use-a-bezier-curve-to-move-a-graphic
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
У попередньому завданні йшлося про ключове слово `ease-out`, яке описує зміну анімації, що спочатку пришвидшується, а тоді уповільнюється в кінці анімації. Праворуч показано різницю між ключовим словом `ease-out` (для синього елемента) і ключовим словом `linear` (для червоного елемента). Подібну послідовність анімації до ключового слова `ease-out` можна створити за допомогою користувацької функції кубічної кривої Безьє.
|
||||||
|
|
||||||
|
Загалом зміна точок прив'язки `p1` та `p2` керує створенням різних кривих Безьє, що контролює розвиток анімації в часі. Ось приклад кривої Безьє, створеної за допомогою значень для імітації стилю зсунення зі зникненням (ease-out):
|
||||||
|
|
||||||
|
```css
|
||||||
|
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
Пам'ятайте, що всі функції `cubic-bezier` починаються з `p0` на точці (0, 0) та закінчуються `p3` на точці (1, 1). У цьому прикладі крива рухається швидше по осі Y (починається з 0, тоді рухається до `p1`, y має значення 0, тоді рухається до `p2`, y має значення 1), ніж по осі X (0 на початку, тоді 0 для `p1`, до 0.58 для `p2`). У результаті зміна анімованих елементів відбувається швидше ніж час анімації для даного сегменту. Під кінець кривої зв'язок між зміною значень x та у змінюється на протилежне: значення у переходить від 1 до 1 (без змін), а значення x зміщуються з 0.58 до 1, завдяки чому зміна анімації відбувається повільніше у порівнянні з тривалістю анімації.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Щоб побачити результат цієї кривої Безьє в дії, змініть `animation-timing-function` елемента з ідентифікацією `red` на функцію `cubic-bezier` зі значеннями х1, y1, x2, y2, які вказані відповідно до 0, 0, 0.58, 1. Завдяки цьому обидва елементи будуть однаково просуватися по анімації.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Значення властивості `animation-timing-function` для елемента з ідентифікацією `red` повинно бути функцією `cubic-bezier` зі значеннями x1, y1, x2, y2, які вказані відповідно до 0, 0, 0.58, 1 .
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
Елемент з ідентифікацією `red` більше не повинен мати властивість `animation-timing-function` коду `linear`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#red').css('animation-timing-function') !== 'linear');
|
||||||
|
```
|
||||||
|
|
||||||
|
Значення властивості `animation-timing-function` для елемента з ідентифікацією `blue` не повинно змінюватися.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const blueBallAnimation = __helpers.removeWhiteSpace(
|
||||||
|
$('#blue').css('animation-timing-function')
|
||||||
|
);
|
||||||
|
assert(
|
||||||
|
blueBallAnimation == 'ease-out' ||
|
||||||
|
blueBallAnimation == 'cubic-bezier(0,0,0.58,1)'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.balls{
|
||||||
|
border-radius: 50%;
|
||||||
|
position: fixed;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin-top: 50px;
|
||||||
|
animation-name: bounce;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
#red {
|
||||||
|
background: red;
|
||||||
|
left: 27%;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
#blue {
|
||||||
|
background: blue;
|
||||||
|
left: 56%;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
@keyframes bounce {
|
||||||
|
0% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 249px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="balls" id= "red"></div>
|
||||||
|
<div class="balls" id= "blue"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.balls{
|
||||||
|
border-radius: 50%;
|
||||||
|
position: fixed;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin-top: 50px;
|
||||||
|
animation-name: bounce;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
#red {
|
||||||
|
background: red;
|
||||||
|
left: 27%;
|
||||||
|
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||||
|
}
|
||||||
|
#blue {
|
||||||
|
background: blue;
|
||||||
|
left: 56%;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
@keyframes bounce {
|
||||||
|
0% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 249px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="balls" id= "red"></div>
|
||||||
|
<div class="balls" id= "blue"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,113 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a5367417b2b2512ad7
|
||||||
|
title: Використання лінійного градієнта CSS для створення смугастого елемента
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c6bmQh2'
|
||||||
|
forumTopicId: 301072
|
||||||
|
dashedName: use-a-css-linear-gradient-to-create-a-striped-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Функція `repeating-linear-gradient()` дуже схожа на `linear-gradient()`. Головна різниця полягає в тому, що ця функція повторює вказаний градієнт шаблону. `repeating-linear-gradient()` набуває безлічі значень, але, щоб полегшити завдання, ви будете працювати зі значенням кута і значеннями стоп-кольору.
|
||||||
|
|
||||||
|
Значення кута - це напрямок градієнта. Стоп-кольори або кольорові обмежувачі - схожі значення ширини, що позначають місце, де відбувається перехід, і вони подаються у відсотках або у кількості пікселів.
|
||||||
|
|
||||||
|
У прикладі, який подано в редакторі коду, градієнт починається з кольору `yellow` (жовтий) на рівні 0 пікселів, який зливається з другим кольором `blue` (синій) на рівні 40 пікселів від початку. Оскільки наступний стоп-колір також знаходиться на рівні 40 пікселів, градієнт негайно змінюється на третій колір `green` (зелений), який сам по собі зливається з четвертим значенням кольору `red` (червоний), оскільки він розташований на рівні 80 пікселів від початку градієнта.
|
||||||
|
|
||||||
|
Для цього прикладу слід уявляти собі стоп-кольори як пари, де кожні два кольори зливаються.
|
||||||
|
|
||||||
|
```css
|
||||||
|
0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px
|
||||||
|
```
|
||||||
|
|
||||||
|
Якщо обидва значення стоп-кольорів однакові, злиття непомітне, оскільки воно відбувається між тим самим кольором, після чого здійснюється різкий перехід до наступного кольору, тому в результаті виходять смуги.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Смуги можна зробити змінивши `repeating-linear-gradient()` таким чином, щоб використати градієнтний кут `45deg`, потім налаштувати перші два стоп-кольори на `yellow` (жовтий), а вкінці два інші стоп-кольори - на `black` (чорний).
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Кут `repeating-linear-gradient()` повинен складати 45 градусів.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
Кут `repeating-linear-gradient()` повинен складати не більше 90 градусів
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(!code.match(/90deg/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
Стоп-колір на рівні 0 пікселів повинен бути `yellow` (жовтий).
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/yellow\s+?0(px)?/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
Один стоп-колір на рівні 40 пікселів повинен бути `yellow` (жовтий).
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/yellow\s+?40px/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
Другий стоп-колір на рівні 40 пікселів повинен бути `black` (чорний).
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
Останній стоп-колір на рівні 80 пікселів повинен бути `black` (чорний).
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/black\s+?80px/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
|
||||||
|
div{
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 70%;
|
||||||
|
height: 400px;
|
||||||
|
margin: 50 auto;
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
90deg,
|
||||||
|
yellow 0px,
|
||||||
|
blue 40px,
|
||||||
|
green 40px,
|
||||||
|
red 80px
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div{
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 70%;
|
||||||
|
height: 400px;
|
||||||
|
margin: 50 auto;
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
45deg,
|
||||||
|
yellow 0px,
|
||||||
|
yellow 40px,
|
||||||
|
black 40px,
|
||||||
|
black 80px
|
||||||
|
);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,103 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a7367417b2b2512ae0
|
||||||
|
title: Використовуйте анімацію CSS, щоб змінити положення клавіші при наведенні
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cg4vZAa'
|
||||||
|
forumTopicId: 301073
|
||||||
|
dashedName: use-css-animation-to-change-the-hover-state-of-a-button
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Ви можете використати CSS `@keyframes`, щоб змінити колір клавіші при наведенні.
|
||||||
|
|
||||||
|
Ось приклад зміни ширини зображення на курсорі:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
img {
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
img:hover {
|
||||||
|
animation-name: width;
|
||||||
|
animation-duration: 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes width {
|
||||||
|
100% {
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<img src="https://cdn.freecodecamp.org/curriculum/applied-visual-design/google-logo.png" alt="Google's Logo" />
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Зверніть увагу, що `ms` означає мілісекунди, де 1000 мілісекунд дорівнює одній секунді.
|
||||||
|
|
||||||
|
Використовуйте CSS `@keyframes`, щоб змінити `background-color` елемента `button`, так щоб він став `#4791d0`, коли користувач наводить на нього курсор. Правило `@keyframes` повинне мати лише запис на `100%`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Правило @keyframes повинне використовувати колір фону `animation-name`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/@keyframes\s+?background-color\s*?{/g));
|
||||||
|
```
|
||||||
|
|
||||||
|
Повинна бути лише одна умова під `@keyframes`, яка змінює `background-color` до `#4791d0` на 100%.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
button {
|
||||||
|
border-radius: 5px;
|
||||||
|
color: white;
|
||||||
|
background-color: #0F5897;
|
||||||
|
padding: 5px 10px 8px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
animation-name: background-color;
|
||||||
|
animation-duration: 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<button>Register</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
button {
|
||||||
|
border-radius: 5px;
|
||||||
|
color: white;
|
||||||
|
background-color: #0F5897;
|
||||||
|
padding: 5px 10px 8px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
animation-name: background-color;
|
||||||
|
animation-duration: 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes background-color {
|
||||||
|
100% {
|
||||||
|
background-color: #4791d0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<button>Register</button>
|
||||||
|
```
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a6367417b2b2512adb
|
||||||
|
title: Використання властивості CSS transform skewX для оновлення елементу разом з віссю X
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cyLP8Sr'
|
||||||
|
forumTopicId: 301074
|
||||||
|
dashedName: use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
`skewX()` — ще одна функція властивості `transform`, яка переносить обраний елемент по власній вісі Х (горизонтальній) на задану кількість градусів.
|
||||||
|
|
||||||
|
Даний код пересуває абзац на -32 градуси по вісі Х.
|
||||||
|
|
||||||
|
```css
|
||||||
|
p {
|
||||||
|
transform: skewX(-32deg);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Перемістіть елемент з ідентифікатором `bottom` на 24 градуси по вісі Х, використовуючи властивість `transform`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Елемент з ідентифікатором `bottom` повинен переміститись на 24 градуси по вісі Х.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 70%;
|
||||||
|
height: 100px;
|
||||||
|
margin: 50px auto;
|
||||||
|
}
|
||||||
|
#top {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
#bottom {
|
||||||
|
background-color: blue;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="top"></div>
|
||||||
|
<div id="bottom"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 70%;
|
||||||
|
height: 100px;
|
||||||
|
margin: 50px auto;
|
||||||
|
}
|
||||||
|
#top {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
#bottom {
|
||||||
|
background-color: blue;
|
||||||
|
transform: skewX(24deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="top"></div>
|
||||||
|
<div id="bottom"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,71 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a6367417b2b2512adc
|
||||||
|
title: Використання властивості CSS transform skewY для оновлення елементу разом з віссю Y
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c2MZ2uB'
|
||||||
|
forumTopicId: 301075
|
||||||
|
dashedName: use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Зважаючи на те, що функція `skewX()` переносить вибраний елемент вздовж вісі Х на заданий градус, не дивно, що властивість `skewY()` переносить елемент вздовж вісі Y (по вертикалі).
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Перемістіть елемент з ідентифікатором `top` на -10 градуси по вісі Y, використовуючи властивість `transform`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Елемент з ідентифікатором `top` повинен переміститись на -10 градуси по вісі Y.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 70%;
|
||||||
|
height: 100px;
|
||||||
|
margin: 50px auto;
|
||||||
|
}
|
||||||
|
#top {
|
||||||
|
background-color: red;
|
||||||
|
|
||||||
|
}
|
||||||
|
#bottom {
|
||||||
|
background-color: blue;
|
||||||
|
transform: skewX(24deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="top"></div>
|
||||||
|
<div id="bottom"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 70%;
|
||||||
|
height: 100px;
|
||||||
|
margin: 50px auto;
|
||||||
|
}
|
||||||
|
#top {
|
||||||
|
background-color: red;
|
||||||
|
transform: skewY(-10deg);
|
||||||
|
}
|
||||||
|
#bottom {
|
||||||
|
background-color: blue;
|
||||||
|
transform: skewX(24deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="top"></div>
|
||||||
|
<div id="bottom"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,95 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a5367417b2b2512ad9
|
||||||
|
title: Використання властивості трансформування CSS scale для зміни розміру елемента
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c2MZVSg'
|
||||||
|
forumTopicId: 301076
|
||||||
|
dashedName: use-the-css-transform-scale-property-to-change-the-size-of-an-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Щоб змінити масштаб елемента, CSS має властивість `transform` разом з функцією `scale()`. Приклад наступного коду подвоює розмір всіх елементів абзацу на сторінці:
|
||||||
|
|
||||||
|
```css
|
||||||
|
p {
|
||||||
|
transform: scale(2);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Збільште розмір елемента з ідентифікатором `ball2` в 1,5 рази від його початкового розміру.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Властивість `transform` для `#ball2` має бути збільшено в 1.5 рази від початкового розміру.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(
|
||||||
|
/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.ball {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 50 auto;
|
||||||
|
position: fixed;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
#ball1 {
|
||||||
|
left: 20%;
|
||||||
|
}
|
||||||
|
#ball2 {
|
||||||
|
left: 65%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="ball" id= "ball1"></div>
|
||||||
|
<div class="ball" id= "ball2"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.ball {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 50 auto;
|
||||||
|
position: fixed;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
#ball1 {
|
||||||
|
left: 20%;
|
||||||
|
}
|
||||||
|
#ball2 {
|
||||||
|
left: 65%;
|
||||||
|
transform: scale(1.5);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="ball" id= "ball1"></div>
|
||||||
|
<div class="ball" id= "ball2"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a5367417b2b2512ada
|
||||||
|
title: Використання властивості трансформування CSS scale для розміщення елементу в Hover
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cyLPJuM'
|
||||||
|
forumTopicId: 301077
|
||||||
|
dashedName: use-the-css-transform-scale-property-to-scale-an-element-on-hover
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Властивість `transform` має різні функції, що дозволяють масштабувати, рухати, обертати, нахиляти, і т. д., ваші елементи. При використанні з псевдокласами, такими як `:hover`, який визначає певний стан елемента, властивість `transform` може легко додати інтерактивність до ваших елементів.
|
||||||
|
|
||||||
|
Ось приклад масштабування елементів абзацу до 2,1 разів від початкового розміру, коли користувач наводить на нього:
|
||||||
|
|
||||||
|
```css
|
||||||
|
p:hover {
|
||||||
|
transform: scale(2.1);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Примітка:** Застосовуючи transform на `div` елемент, він також вплине на будь-які дочірні елементи, що містяться у div.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Додайте правило CSS до `hover` стану `div` та використайте властивість `transform` щоб масштабувати елемент `div` до 1,1 рази від початкового розміру, коли користувач наводить на нього.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Розмір елемента `div` має масштабуватись в 1,1 рази, коли користувач наводить на нього.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 70%;
|
||||||
|
height: 100px;
|
||||||
|
margin: 50px auto;
|
||||||
|
background: linear-gradient(
|
||||||
|
53deg,
|
||||||
|
#ccfffc,
|
||||||
|
#ffcccf
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 70%;
|
||||||
|
height: 100px;
|
||||||
|
margin: 50px auto;
|
||||||
|
background: linear-gradient(
|
||||||
|
53deg,
|
||||||
|
#ccfffc,
|
||||||
|
#ffcccf
|
||||||
|
);
|
||||||
|
}
|
||||||
|
div:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,118 @@
|
|||||||
|
---
|
||||||
|
id: 587d781a367417b2b2512ab9
|
||||||
|
title: Використання тегу em для виділення тексту курсивом
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cVJRBtp'
|
||||||
|
forumTopicId: 301078
|
||||||
|
dashedName: use-the-em-tag-to-italicize-text
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Щоб акцентувати текст, ви можете використати тег `em`. Текст відобразиться курсивом, оскільки браузер застосовує код CSS `font-style: italic;` до елемента.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Розмістіть тег `em` навколо вмісту абзацу щоб акцентувати його.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код має додати тег `em` у текст розмітки.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('em').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
Тег `em` має охопити вміст `p` тегу, а не сам `p` тег.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('p').children().length == 1 && $('em').children().length == 2);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,135 @@
|
|||||||
|
---
|
||||||
|
id: 587d781b367417b2b2512aba
|
||||||
|
title: Використання тегу s щоб закреслити текст
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
forumTopicId: 301079
|
||||||
|
dashedName: use-the-s-tag-to-strikethrough-text
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Для закреслення тексту, що відображається як горизонтальна лінія, яка проходить крізь символи, ви можете використати тег `s`. Таким чином можна показати, що частина тексту більше недійсна. З тегом `s` браузер застосовує `text-decoration: line-through;` CSS код до елемента.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Розмістіть тег `s` навколо `Google` всередині тегу `h4`, а потім додайте до нього слово `Alphabet`, яке не повинне бути закресленим.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код має додати тег `s` у текст розмітки.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('s').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
Тег `s` повинен бути розміщеним навколо тексту `Google` в тезі `h4`. Він не повинен містити слово `Alphabet`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('h4 > s')
|
||||||
|
.text()
|
||||||
|
.match(/Google/gi) &&
|
||||||
|
!$('h4 > s')
|
||||||
|
.text()
|
||||||
|
.match(/Alphabet/gi)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
Ви повинні додати слово `Alphabet` в тег `h4` без викреслення.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('h4')
|
||||||
|
.html()
|
||||||
|
.match(/Alphabet/gi)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4><s>Google</s> Alphabet</h4>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,128 @@
|
|||||||
|
---
|
||||||
|
id: 587d781a367417b2b2512ab7
|
||||||
|
title: Використання тегу strong для виділення тексту жирним шрифтом
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/ceJNBSb'
|
||||||
|
forumTopicId: 301080
|
||||||
|
dashedName: use-the-strong-tag-to-make-text-bold
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Щоб виділити текст жирним шрифтом, ви можете використати тег `strong`. Він часто використовується для того, щоб привернути увагу до тексту та вказати на його важливість. За допомогою тегу `strong` браузер застосовує `font-weight: bold;` CSS код до елементу.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Розмістіть тег `strong` навколо тексту `Stanford University` всередині тегу `p` (без крапки).
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код має додати тег `strong` у текст розмітки.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('strong').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
Тег `source` повинен знаходитися в середині тегу `p`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('p').children('strong').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
Тег `strong` повинен бути розміщеним навколо слів `Stanford University`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('strong')
|
||||||
|
.text()
|
||||||
|
.match(/^Stanford University\.?$/gi)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,138 @@
|
|||||||
|
---
|
||||||
|
id: 587d781c367417b2b2512ac0
|
||||||
|
title: Використання властивості text-transform, щоб перевести текст у верхній регістр
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cvVZQSP'
|
||||||
|
forumTopicId: 301081
|
||||||
|
dashedName: use-the-text-transform-property-to-make-text-uppercase
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Властивість CSS `text-transform` використовується для того щоб змінити вигляду тексту. Це зручний спосіб переконатися, що текст на веб-сторнці виникає послідовно та не змушує змінювати зміст тексту самих елементів HTML.
|
||||||
|
|
||||||
|
Наступна таблиця показує, як різні значення `text-transform` змінюють приклад тексту "Зміни мене".
|
||||||
|
|
||||||
|
<table class='table table-striped'><thead><tr><th>Значення</th><th>Результат</th></tr></thead><tbody><tr><td><code>lowercase</code></td><td>"зміни мене"</td></tr><tr><td><code>uppercase</code></td><td>"ЗМІНИ МЕНЕ"</td></tr><tr><td><code>capitalize</code></td><td>"Зміни мене"</td></tr><tr><td><code>initial</code></td><td>Використовувати значення за замовчуванням</td></tr><tr><td><code>inherit</code></td><td>Використовуйте значення <code>text-transform</code> з батьківського елемента</td></tr><tr><td><code>none</code></td><td><strong>За замовчуванням:</strong> Використовуйте вихідний текст</td></tr></tbody></table>
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Змініть текст тегу `h4` в верхній регістр за допомогою властивості `text-transform`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Властивість тексту `h4` повинна мати значення `uppercase`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h4').css('text-transform') === 'uppercase');
|
||||||
|
```
|
||||||
|
|
||||||
|
Оригінальний текст h4 не можна змінювати.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h4').text() !== $('h4').text().toUpperCase());
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(45, 45, 45, 0.1);
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 27px;
|
||||||
|
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
#thumbnail {
|
||||||
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard" id="thumbnail">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(45, 45, 45, 0.1);
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 27px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
#thumbnail {
|
||||||
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard" id="thumbnail">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,120 @@
|
|||||||
|
---
|
||||||
|
id: 587d781a367417b2b2512ab8
|
||||||
|
title: Використання тегу u для підкреслення тексту
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cN6aQCL'
|
||||||
|
forumTopicId: 301082
|
||||||
|
dashedName: use-the-u-tag-to-underline-text
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Щоб підкреслити текст, ви можете скористатися тегом `u`. Це часто використовується, щоб виділити важливу частину тексту або те, що необхідно запам'ятати. З тегом `u` браузер використовує до елементу CSS властивість `text-decoration: underline;`.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Тег `u` має містити лише текст `Ph.D. students`.
|
||||||
|
|
||||||
|
**Примітка:**Намагайтеся уникнути використання тегу `u` для тексту, схожого на посилання. Якірні теги також мають формат підкреслення за замовчуванням.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш код має додати тег `u` у текст розмітки.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('u').length === 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
Тег `u` має містити лише текст `Ph.D. students`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('u').text() === 'Ph.D. students');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,115 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08823
|
||||||
|
title: Додавання негативного зовнішнього відступу до елемента
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cnpyGs3'
|
||||||
|
forumTopicId: 16166
|
||||||
|
dashedName: add-a-negative-margin-to-an-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Властивість `margin` елемента контролює відстань між межами елемента `border` та елементами, що його оточують.
|
||||||
|
|
||||||
|
Якщо ви встановите негативне значення для параметра `margin`, то об'єкт збільшиться в розмірі.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Спробуйте встановити властивість `margin` негативного значення, як це було зроблено для червоного прямокутника.
|
||||||
|
|
||||||
|
Змініть значення `margin` синього прямокутника на `-15px`, так щоб він повністю заповнив по горизонталі жовтий прямокутник, що його оточує.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Ваш клас `blue-box` повинен надати елементам `-15px` для `margin`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue-box').css('margin-top') === '-15px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
margin: -15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
margin: -15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 20px;
|
||||||
|
margin-top: -15px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,190 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9bedf08813
|
||||||
|
title: Додавання рамки довкола ваших елементів
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c2MvnHZ'
|
||||||
|
forumTopicId: 16630
|
||||||
|
dashedName: add-borders-around-your-elements
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Рамки в CSS мають такі значення `style`, `color` та `width`.
|
||||||
|
|
||||||
|
Наприклад, якщо ми хочемо створити червону рамку товщиною 5 пікселів довкола HTML елемента, ми можемо скористатися цим класом:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.thin-red-border {
|
||||||
|
border-color: red;
|
||||||
|
border-width: 5px;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Створіть клас під назвою `thick-green-border`. Цей клас повинен додати суцільну зелену рамку шириною 10 пікселів довкола HTML елемента. Застосуйте цей клас до фотографії кота.
|
||||||
|
|
||||||
|
Пам'ятайте, що ви можете застосувати декілька класів до елемента, використовуючи його атрибут `class`, розділивши назви класів пробілами. Наприклад:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img class="class1 class2">
|
||||||
|
```
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Елемент `img` повинен мати клас `smaller-image`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('img').hasClass('smaller-image'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Елемент `img` повинен мати клас `thick-green-border`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('img').hasClass('thick-green-border'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваше зображення повинне мати рамку шириною `10px`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('img').hasClass('thick-green-border') &&
|
||||||
|
parseInt($('img').css('border-top-width'), 10) >= 8 &&
|
||||||
|
parseInt($('img').css('border-top-width'), 10) <= 12
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваше зображення повинне мати стиль рамки `solid`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('img').css('border-right-style') === 'solid');
|
||||||
|
```
|
||||||
|
|
||||||
|
Рамка довкола елемента `img` повинна бути зеленою.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('img').css('border-left-color') === 'rgb(0, 128, 0)');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-width: 10px;
|
||||||
|
border-color: green;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
@ -0,0 +1,136 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1248bd9aedf08824
|
||||||
|
title: Додати різні межі для кожної сторони елементу
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cg4RWh4'
|
||||||
|
forumTopicId: 16633
|
||||||
|
dashedName: add-different-margins-to-each-side-of-an-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Інколи вам потрібно буде налаштувати елемент так, щоб його зовнішні відступи `margin` були різними для кожної з його сторін.
|
||||||
|
|
||||||
|
CSS дозволяє контролювати параметри поля `margin` для всіх чотирьох сторін елемента окремо, використовуючи властивості `margin-top`, `margin-right`, `margin-bottom`, та `margin-left`.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Задайте зовнішньому відступу `margin` синього прямокутника товщину `40px` для верхньої та нижньої сторін елемента і товщину `20px` для нижньої і правої сторін.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Клас `blue-box` повинен задати товщину `40px` для `margin` верхньої сторони елементів.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue-box').css('margin-top') === '40px');
|
||||||
|
```
|
||||||
|
|
||||||
|
Клас `blue-box` повинен задати товщину `20px` для `margin`правої сторони елементів.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue-box').css('margin-right') === '20px');
|
||||||
|
```
|
||||||
|
|
||||||
|
Клас `blue-box` повинен задати товщину `20px` для `margin` нижньої сторони елементів.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue-box').css('margin-bottom') === '20px');
|
||||||
|
```
|
||||||
|
|
||||||
|
Клас `blue-box` повинен задати товщину `40px` для `margin` лівої сторони елементів.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue-box').css('margin-left') === '40px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h5 class="injected-text">margin</h5>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h5 class="injected-text">margin</h5>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,136 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08824
|
||||||
|
title: Додавання різних внутрішніх відступів до кожної сторони елемента
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cB7mwUw'
|
||||||
|
forumTopicId: 16634
|
||||||
|
dashedName: add-different-padding-to-each-side-of-an-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Інколи вам потрібно буде налаштувати елемент так, щоб його внутрішні відступи `padding` були різними для кожної з його сторін.
|
||||||
|
|
||||||
|
CSS дозволяє контролювати параметри відступу `padding` для всіх чотирьох сторін елемента окремо, використовуючи властивості `padding-top`, `padding-right`, `padding-bottom`, та `padding-left`.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Задайте внутрішньому відступу `padding` синього прямокутника товщину `40px` для верхньої та нижньої сторін елемента і товщину `20px` для нижньої і правої сторін.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Клас `blue-box` повинен задати товщину `40px` для `padding` верхньої сторони елементів.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue-box').css('padding-top') === '40px');
|
||||||
|
```
|
||||||
|
|
||||||
|
Клас `blue-box` повинен задати товщину `20px` для `padding` правої сторони елементів.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue-box').css('padding-right') === '20px');
|
||||||
|
```
|
||||||
|
|
||||||
|
Клас `blue-box` повинен задати товщину `20px` для `padding` нижньої сторони елементів.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue-box').css('padding-bottom') === '20px');
|
||||||
|
```
|
||||||
|
|
||||||
|
Клас `blue-box` повинен задати товщину `40px` для `padding` лівої сторони елементів.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue-box').css('padding-left') === '40px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
padding-top: 40px;
|
||||||
|
padding-right: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h5 class="injected-text">margin</h5>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
padding-top: 40px;
|
||||||
|
padding-right: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
padding-top: 40px;
|
||||||
|
padding-right: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h5 class="injected-text">margin</h5>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,164 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08814
|
||||||
|
title: Додавання заокруглених кутів за допомогою властивості border-radius
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cbZm2hg'
|
||||||
|
forumTopicId: 16649
|
||||||
|
dashedName: add-rounded-corners-with-border-radius
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Зараз фото кішки має гострі кути. Ми можемо округлити ці кути за допомогою властивості CSS під назвою `border-radius`.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Ви можете вказати `border-radius` в пікселях. Задайте фотографії кішки `border-radius` на `10px`.
|
||||||
|
|
||||||
|
**Примітка:** це завдання допускає декілька можливих розв'язань. Наприклад, ви можете додати `border-radius` до класу `.thick-green-border`, або класу `.smaller-image`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Елемент зображення повинен мати клас `thick-green-border`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('img').hasClass('thick-green-border'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Зображення повинне мати рамку з радіусом `10px`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('img').css('border-top-left-radius') === '10px' &&
|
||||||
|
$('img').css('border-top-right-radius') === '10px' &&
|
||||||
|
$('img').css('border-bottom-left-radius') === '10px' &&
|
||||||
|
$('img').css('border-bottom-right-radius') === '10px'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
@ -0,0 +1,116 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08822
|
||||||
|
title: Налаштування зовнішнього відступу елемента
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cVJarHW'
|
||||||
|
forumTopicId: 16654
|
||||||
|
dashedName: adjust-the-margin-of-an-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Властивість елемента `margin` контролює відстань між межами елемента `border` й елементами, що його оточують.
|
||||||
|
|
||||||
|
Тут ми бачимо, що синій та червоний прямокутники вкладені у жовтий прямокутник. Зверніть увагу, що в червоного прямокутника поля `margin` більші, ніж у синього, тому він здається меншим.
|
||||||
|
|
||||||
|
Коли ви збільшуєте поле `margin` синього прямокутника, це збільшує відстань між його межею та елементами, що його оточують.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Змініть `margin` синього прямокутника так, щоб він співпадав з полем червоного прямокутника.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Клас `blue-box` повинен задати елементам `margin` товщиною `20px`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue-box').css('margin-top') === '20px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h5 class="injected-text">margin</h5>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h5 class="injected-text">margin</h5>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,118 @@
|
|||||||
|
---
|
||||||
|
id: bad88fee1348bd9aedf08825
|
||||||
|
title: Налаштування внутрішнього відступу елемента
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cED8ZC2'
|
||||||
|
forumTopicId: 301083
|
||||||
|
dashedName: adjust-the-padding-of-an-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Тепер давайте ненадовго відкладемо Cat Photo App і дізнаємося більше про стилізацію HTML.
|
||||||
|
|
||||||
|
Ви вже, напевно, помітили, що всі елементи HTML — це, в основному, маленькі прямокутники.
|
||||||
|
|
||||||
|
Є три важливі властивості, що керують простором навколо кожного елемента HTML: `padding`, `border`, і `margin`.
|
||||||
|
|
||||||
|
`padding` елемента керує простором між вмістом елемента і його `border`.
|
||||||
|
|
||||||
|
Тут ми бачимо, що синій та червоний прямокутники вкладені в жовтий прямокутник. Зверніть увагу, що червоний прямокутник має більший `padding`, ніж у синього.
|
||||||
|
|
||||||
|
Коли ви збільшуєте `padding` синього прямокутника, це збільшує відстань (`padding`) між текстом та рамкою довкола нього.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Змініть `padding` синього прямокутника так, щоб він співпадав з відступом у червоному прямокутнику.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Клас `blue-box` повинен задати елементам `padding` товщиною `20px`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue-box').css('padding-top') === '20px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h5 class="injected-text">margin</h5>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h5 class="injected-text">margin</h5>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,272 @@
|
|||||||
|
---
|
||||||
|
id: 5a9d7286424fe3d0e10cad13
|
||||||
|
title: Прикріплення резервного значення до змінної CSS
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c6bDNfp'
|
||||||
|
forumTopicId: 301084
|
||||||
|
dashedName: attach-a-fallback-value-to-a-css-variable
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
При використанні змінної як значення властивості CSS ви можете прикріпити резервне значення, до якого повернеться браузер, якщо дана змінна виявиться недійсною.
|
||||||
|
|
||||||
|
**Примітка:** цей резервний варіант не використовується для підвищення сумісності браузерів і не буде працювати в IE браузерах. Швидше за все, він використовується для того, щоб у браузера був колір для відображення, якщо він не зможе знайти вашу змінну.
|
||||||
|
|
||||||
|
Ось як це зробити:
|
||||||
|
|
||||||
|
```css
|
||||||
|
background: var(--penguin-skin, black);
|
||||||
|
```
|
||||||
|
|
||||||
|
Це встановить фон в `black`, навіть якщо ваша змінна не була визначена. Зверніть увагу, що це може бути корисно для налагодження.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Схоже, виникла проблема зі змінними, що передаються класам `.penguin-top` та `.penguin-bottom`. Замість того, щоб виправляти цю опечатку, додайте резервне значення `black` до властивості `background` класів `.penguin-top` та `.penguin-bottom`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Резервне значення `black` потрібно використати у властивості `background` класу `penguin-top`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(
|
||||||
|
/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
Резервне значення `black` потрібно використати у властивості `background` класу `penguin-bottom`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(
|
||||||
|
/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.penguin {
|
||||||
|
--penguin-skin: black;
|
||||||
|
--penguin-belly: gray;
|
||||||
|
--penguin-beak: yellow;
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
display: block;
|
||||||
|
margin-top: 5%;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin-top {
|
||||||
|
top: 10%;
|
||||||
|
left: 25%;
|
||||||
|
|
||||||
|
/* Change code below this line */
|
||||||
|
background: var(--pengiun-skin);
|
||||||
|
/* Change code above this line */
|
||||||
|
|
||||||
|
width: 50%;
|
||||||
|
height: 45%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin-bottom {
|
||||||
|
top: 40%;
|
||||||
|
left: 23.5%;
|
||||||
|
|
||||||
|
/* Change code below this line */
|
||||||
|
background: var(--pengiun-skin);
|
||||||
|
/* Change code above this line */
|
||||||
|
|
||||||
|
width: 53%;
|
||||||
|
height: 45%;
|
||||||
|
border-radius: 70% 70% 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-hand {
|
||||||
|
top: 0%;
|
||||||
|
left: -5%;
|
||||||
|
background: var(--penguin-skin, black);
|
||||||
|
width: 30%;
|
||||||
|
height: 60%;
|
||||||
|
border-radius: 30% 30% 120% 30%;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-hand {
|
||||||
|
top: 0%;
|
||||||
|
left: 75%;
|
||||||
|
background: var(--penguin-skin, black);
|
||||||
|
width: 30%;
|
||||||
|
height: 60%;
|
||||||
|
border-radius: 30% 30% 30% 120%;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-cheek {
|
||||||
|
top: 15%;
|
||||||
|
left: 35%;
|
||||||
|
background: var(--penguin-belly, white);
|
||||||
|
width: 60%;
|
||||||
|
height: 70%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-cheek {
|
||||||
|
top: 15%;
|
||||||
|
left: 5%;
|
||||||
|
background: var(--penguin-belly, white);
|
||||||
|
width: 60%;
|
||||||
|
height: 70%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.belly {
|
||||||
|
top: 60%;
|
||||||
|
left: 2.5%;
|
||||||
|
background: var(--penguin-belly, white);
|
||||||
|
width: 95%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 120% 120% 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-feet {
|
||||||
|
top: 85%;
|
||||||
|
left: 60%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 15%;
|
||||||
|
height: 30%;
|
||||||
|
border-radius: 50% 50% 50% 50%;
|
||||||
|
transform: rotate(-80deg);
|
||||||
|
z-index: -2222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-feet {
|
||||||
|
top: 85%;
|
||||||
|
left: 25%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 15%;
|
||||||
|
height: 30%;
|
||||||
|
border-radius: 50% 50% 50% 50%;
|
||||||
|
transform: rotate(80deg);
|
||||||
|
z-index: -2222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-eye {
|
||||||
|
top: 45%;
|
||||||
|
left: 60%;
|
||||||
|
background: black;
|
||||||
|
width: 15%;
|
||||||
|
height: 17%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-eye {
|
||||||
|
top: 45%;
|
||||||
|
left: 25%;
|
||||||
|
background: black;
|
||||||
|
width: 15%;
|
||||||
|
height: 17%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sparkle {
|
||||||
|
top: 25%;
|
||||||
|
left: 15%;
|
||||||
|
background: white;
|
||||||
|
width: 35%;
|
||||||
|
height: 35%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blush-right {
|
||||||
|
top: 65%;
|
||||||
|
left: 15%;
|
||||||
|
background: pink;
|
||||||
|
width: 15%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blush-left {
|
||||||
|
top: 65%;
|
||||||
|
left: 70%;
|
||||||
|
background: pink;
|
||||||
|
width: 15%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beak-top {
|
||||||
|
top: 60%;
|
||||||
|
left: 40%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 20%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beak-bottom {
|
||||||
|
top: 65%;
|
||||||
|
left: 42%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 16%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #c6faf1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin * {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="penguin">
|
||||||
|
<div class="penguin-bottom">
|
||||||
|
<div class="right-hand"></div>
|
||||||
|
<div class="left-hand"></div>
|
||||||
|
<div class="right-feet"></div>
|
||||||
|
<div class="left-feet"></div>
|
||||||
|
</div>
|
||||||
|
<div class="penguin-top">
|
||||||
|
<div class="right-cheek"></div>
|
||||||
|
<div class="left-cheek"></div>
|
||||||
|
<div class="belly"></div>
|
||||||
|
<div class="right-eye">
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="left-eye">
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="blush-right"></div>
|
||||||
|
<div class="blush-left"></div>
|
||||||
|
<div class="beak-top"></div>
|
||||||
|
<div class="beak-bottom"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.penguin-top {
|
||||||
|
background: var(--pengiun-skin, black);
|
||||||
|
}
|
||||||
|
.penguin-bottom {
|
||||||
|
background: var(--pengiun-skin, black);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
@ -0,0 +1,254 @@
|
|||||||
|
---
|
||||||
|
id: 5a9d72a1424fe3d0e10cad15
|
||||||
|
title: Зміна змінної величини для певної області
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cdRwbuW'
|
||||||
|
forumTopicId: 301085
|
||||||
|
dashedName: change-a-variable-for-a-specific-area
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Коли ви створюєте ваші змінні в `:root`, вони установлять значення змінної величини для цілої сторінки.
|
||||||
|
|
||||||
|
Ви можете перезаписати ці змінні вставивши їх знову у спеціальний елемент.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Змініть значення `--penguin-belly` на `white` в класі `penguin`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Клас `penguin` повинен перерозподілити змінну `--penguin-belly` і надати їй значення `white`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/\.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
Клас `penguin` не повинен містити властивість `background-color`
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/^((?!background-color\s*?:\s*?)[\s\S])*$/g)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--penguin-skin: gray;
|
||||||
|
--penguin-belly: pink;
|
||||||
|
--penguin-beak: orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: var(--penguin-belly, #c6faf1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin {
|
||||||
|
/* Only change code below this line */
|
||||||
|
|
||||||
|
/* Only change code above this line */
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
display: block;
|
||||||
|
margin-top: 5%;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-cheek {
|
||||||
|
top: 15%;
|
||||||
|
left: 35%;
|
||||||
|
background: var(--penguin-belly, pink);
|
||||||
|
width: 60%;
|
||||||
|
height: 70%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-cheek {
|
||||||
|
top: 15%;
|
||||||
|
left: 5%;
|
||||||
|
background: var(--penguin-belly, pink);
|
||||||
|
width: 60%;
|
||||||
|
height: 70%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.belly {
|
||||||
|
top: 60%;
|
||||||
|
left: 2.5%;
|
||||||
|
background: var(--penguin-belly, pink);
|
||||||
|
width: 95%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 120% 120% 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin-top {
|
||||||
|
top: 10%;
|
||||||
|
left: 25%;
|
||||||
|
background: var(--penguin-skin, gray);
|
||||||
|
width: 50%;
|
||||||
|
height: 45%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin-bottom {
|
||||||
|
top: 40%;
|
||||||
|
left: 23.5%;
|
||||||
|
background: var(--penguin-skin, gray);
|
||||||
|
width: 53%;
|
||||||
|
height: 45%;
|
||||||
|
border-radius: 70% 70% 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-hand {
|
||||||
|
top: 0%;
|
||||||
|
left: -5%;
|
||||||
|
background: var(--penguin-skin, gray);
|
||||||
|
width: 30%;
|
||||||
|
height: 60%;
|
||||||
|
border-radius: 30% 30% 120% 30%;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-hand {
|
||||||
|
top: 0%;
|
||||||
|
left: 75%;
|
||||||
|
background: var(--penguin-skin, gray);
|
||||||
|
width: 30%;
|
||||||
|
height: 60%;
|
||||||
|
border-radius: 30% 30% 30% 120%;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-feet {
|
||||||
|
top: 85%;
|
||||||
|
left: 60%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 15%;
|
||||||
|
height: 30%;
|
||||||
|
border-radius: 50% 50% 50% 50%;
|
||||||
|
transform: rotate(-80deg);
|
||||||
|
z-index: -2222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-feet {
|
||||||
|
top: 85%;
|
||||||
|
left: 25%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 15%;
|
||||||
|
height: 30%;
|
||||||
|
border-radius: 50% 50% 50% 50%;
|
||||||
|
transform: rotate(80deg);
|
||||||
|
z-index: -2222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-eye {
|
||||||
|
top: 45%;
|
||||||
|
left: 60%;
|
||||||
|
background: black;
|
||||||
|
width: 15%;
|
||||||
|
height: 17%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-eye {
|
||||||
|
top: 45%;
|
||||||
|
left: 25%;
|
||||||
|
background: black;
|
||||||
|
width: 15%;
|
||||||
|
height: 17%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sparkle {
|
||||||
|
top: 25%;
|
||||||
|
left: 15%;
|
||||||
|
background: white;
|
||||||
|
width: 35%;
|
||||||
|
height: 35%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blush-right {
|
||||||
|
top: 65%;
|
||||||
|
left: 15%;
|
||||||
|
background: pink;
|
||||||
|
width: 15%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blush-left {
|
||||||
|
top: 65%;
|
||||||
|
left: 70%;
|
||||||
|
background: pink;
|
||||||
|
width: 15%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beak-top {
|
||||||
|
top: 60%;
|
||||||
|
left: 40%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 20%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beak-bottom {
|
||||||
|
top: 65%;
|
||||||
|
left: 42%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 16%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin * {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="penguin">
|
||||||
|
<div class="penguin-bottom">
|
||||||
|
<div class="right-hand"></div>
|
||||||
|
<div class="left-hand"></div>
|
||||||
|
<div class="right-feet"></div>
|
||||||
|
<div class="left-feet"></div>
|
||||||
|
</div>
|
||||||
|
<div class="penguin-top">
|
||||||
|
<div class="right-cheek"></div>
|
||||||
|
<div class="left-cheek"></div>
|
||||||
|
<div class="belly"></div>
|
||||||
|
<div class="right-eye">
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="left-eye">
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="blush-right"></div>
|
||||||
|
<div class="blush-left"></div>
|
||||||
|
<div class="beak-top"></div>
|
||||||
|
<div class="beak-bottom"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.penguin {--penguin-belly: white;}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
@ -0,0 +1,122 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08803
|
||||||
|
title: Зміна кольору тексту
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cRkVmSm'
|
||||||
|
forumTopicId: 16775
|
||||||
|
dashedName: change-the-color-of-text
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Тепер змінимо колір частини нашого тексту.
|
||||||
|
|
||||||
|
Це можна зробити, змінивши `style` вашого елемента `h2`.
|
||||||
|
|
||||||
|
Властивість, яка відповідає за колір тексту елемента є властивістю стилю `color`.
|
||||||
|
|
||||||
|
Ось як ви могли б встановити текст вашого `h2` елемента синій:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h2 style="color: blue;">CatPhotoApp</h2>
|
||||||
|
```
|
||||||
|
|
||||||
|
Зауважте, що добре було б закінчувати вбудовані оголошення `style` символом `;`.
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Змініть стиль вашого елемента `h2`, щоб його колір був червоним.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Елемент `h2` повинен мати атрибут `style`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h2').attr('style'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Ваш елемент `h2` повинен мати встановленим `red` колір.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h2')[0].style.color === 'red');
|
||||||
|
```
|
||||||
|
|
||||||
|
Атрибут вашого `style` повинен закінчуватись символом `;`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h2').attr('style') && $('h2').attr('style').endsWith(';'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h2>CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h2 style="color: red;">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user