Основний навчальник
Основи HTML
Мови для створення сайтів
Які мови використовуються під час розробки сучасних вебсайтів.
Мова HTML
Дізнайтеся, що таке HTML, для чого він потрібен та яку роль відіграє під час створення вебсайтів.
HTML-теги
Дізнайтеся, що таке HTML-теги, як вони записуються та навіщо потрібні.
Атрибути HTML-тегів
Що таке атрибути HTML-тегів, де вони записуються та як змінюють поведінку елементів.
Стили HTML-тегів
Дізнайтеся, як CSS допомагає змінювати вигляд HTML-елементів.
Основна структура HTML-сторінки
Вивчіть базову структуру HTML-документа та призначення основних тегів.
Робота з основними HTML-тегами
Знайомство з основними HTML-тегами, які використовуються для створення структури вебсторінки.
Теги для абзаців
Навчіться створювати текстові абзаци за допомогою HTML-тега p.
Теги для заголовків сторінки
Вивчіть HTML-теги заголовків h1-h6 та їх правильне використання.
Теги для виділення тексту жирним
Навчіться виділяти частину тексту жирним шрифтом за допомогою HTML-тега b.
Теги для виділення тексту курсивом
Навчіться виділяти текст курсивом за допомогою HTML-тега i.
Неупорядковані списки в HTML
Навчіться створювати списки без нумерації за допомогою тегів ul та li.
Упорядковані списки в HTML
Навчіться створювати нумеровані списки за допомогою тегів ol та li.
Робота з посиланнями в HTML
Навчіться створювати посилання за допомогою HTML-тега a та атрибута href.
Внутрішні посилання в HTML
Навчіться створювати посилання між сторінками одного сайту за допомогою відносних шляхів.
Робота із зображеннями в HTML
Навчіться додавати зображення на вебсторінку за допомогою HTML-тега img.
Ширина картинки в HTML
Навчіться змінювати розмір зображення за допомогою атрибута width.
Висота картинки в HTML
Навчіться змінювати висоту зображення за допомогою атрибута height.
Ширина и высота картинки в HTML
Навчіться правильно задавати ширину та висоту зображень і розуміти, коли картинка може спотворюватися.
Робота з таблицями в HTML
Навчіться створювати прості таблиці за допомогою тегів table, tr та td.
Ширина і висота таблиці в HTML
Навчіться задавати розміри HTML-таблиці за допомогою атрибутів width і height.
Ячейки-заголовки в таблице HTML
Познайомтеся з тегом th, який використовується для створення заголовків колонок і рядків таблиці.
Практика на основні HTML теги
Закріпіть знання основних HTML тегів, створивши просту вебсторінку.
Основи CSS
Основи роботи з мовою CSS
Познайомтеся з CSS, його призначенням та підключенням стилів до HTML-сторінки.
Як працювати з CSS
Навчіться створювати CSS-правила за допомогою селекторів, властивостей і значень.
Ключові слова для кольору в CSS
Навчіться змінювати колір HTML-елементів за допомогою стандартних назв кольорів CSS.
Будь-які кольори в CSS
Навчіться задавати кольори в CSS за допомогою RGB та HEX форматів.
Ширина і висота елементів у CSS
Навчіться керувати розмірами HTML-елементів за допомогою властивостей width та height.
Вирівнювання тексту в CSS
Навчіться вирівнювати текст на сторінці за допомогою властивості text-align.
Вирівнювання тексту вправо в CSS
Навчіться вирівнювати текст по правому краю за допомогою властивості text-align.
Вирівнювання тексту по центру в CSS
Навчіться вирівнювати текст по центру за допомогою властивості text-align.
Вирівнювання тексту вліво в CSS
Навчіться вирівнювати текст по лівому краю за допомогою властивості text-align.
Вирівнювання тексту одночасно вправо і вліво в CSS
Навчіться вирівнювати великий текстовий блок по обох краях за допомогою text-align: justify.
Практика на вирівнювання тексту в CSS
Закріпіть роботу з властивістю text-align, шириною елементів та вирівнюванням тексту в CSS.
Жирність тексту в CSS
Навчіться керувати жирністю тексту за допомогою властивості font-weight.
Курсив у CSS
Навчіться робити текст курсивним за допомогою властивості font-style.
Розмір шрифту в CSS
Навчіться змінювати розмір тексту за допомогою властивості font-size.
Тип шрифту в CSS
Навчіться змінювати сімейство шрифту за допомогою властивості font-family.
Міжрядковий інтервал у CSS
Навчіться керувати висотою рядків тексту за допомогою властивості line-height.
Значення line-height без одиниць у CSS
Навчіться задавати міжрядковий інтервал за допомогою line-height без використання px.
Властивість-скорочення font у CSS
Навчіться використовувати скорочений запис font для одночасного налаштування текстових властивостей.
Червоний рядок тексту в CSS
Вивчіть властивість text-indent, яка дозволяє створювати відступ першого рядка тексту в абзацах.
Ефекти тексту в CSS
Вивчіть властивість text-decoration, яка дозволяє додавати та прибирати декоративні ефекти для тексту.
Нижнє підкреслення тексту в CSS
Вивчіть значення underline властивості text-decoration, яке додає нижнє підкреслення тексту.
Верхнє підкреслення тексту в CSS
Властивість text-decoration зі значенням overline додає лінію над текстом.
Перекреслення тексту в CSS
Властивість text-decoration зі значенням line-through додає лінію, яка перекреслює текст.
Скасування ефектів для тексту в CSS
Значення none у властивості text-decoration скасовує всі текстові ефекти. Найчастіше використовується для скасування підкреслення посилань.
Практика на основні CSS властивості
Закріпимо роботу з основними CSS властивостями: кольори, розміри, шрифти, вирівнювання та оформлення тексту.
Селектори
Споріднені зв’язки тегів в HTML
Розбираємо поняття батьківських елементів, нащадків та безпосередніх зв’язків між HTML-тегами.
Наслідування CSS властивостей
Розбираємо, як CSS властивості передаються від батьківських елементів до дочірніх.
Групування селекторів у CSS
Вивчаємо, як об’єднувати CSS-селектори для скорочення коду.
Спільні властивості при групуванні селекторів у CSS
Навчаємося групувати однакові CSS-властивості та окремо записувати унікальні стилі.
Селектор нащадків у CSS
Дізнаємося, як вибирати елементи за їхніми батьківськими елементами за допомогою селектора нащадків.
Дочірній селектор у CSS
Вивчаємо дочірній селектор (>) та дізнаємося, чим він відрізняється від селектора нащадків.
Тег span для фрагментів тексту в HTML
Дізнаємося, навіщо потрібен тег span і як за допомогою CSS оформлювати окремі слова або частини тексту.
Тег div для групування елементів у HTML
Дізнаємося, як за допомогою тега div об'єднувати кілька елементів і застосовувати до них спільні CSS-стилі.
Групування класів у CSS
Навчимося групувати CSS-класи, щоб не дублювати однакові властивості у різних правилах.
Тег із заданим класом у CSS
Навчимося вибирати не всі елементи певного класу, а лише конкретний HTML-тег із цим класом.
Селектор нащадків і класи в CSS
Навчимося використовувати селектор нащадків разом із CSS-класами для вибору елементів усередині певного блоку.
Складні комбінації селектора нащадків і класів у CSS
Навчимося поєднувати селектори класів, тегів і селектор нащадків для точного вибору елементів.
Типова помилка новачків у селекторі нащадків
Розберемо різницю між селектором тега з класом і селектором нащадків. Навчимося правильно читати селектори з пробілом.
Елемент із кількома CSS-класами
Навчимося призначати одному HTML-елементу одразу декілька CSS-класів і комбінувати їхні стилі.
Вибір елемента за унікальним id у CSS
Дізнаємося, що таке атрибут id, чим він відрізняється від class і як вибирати елементи за допомогою селектора #.
Селектор за id і CSS-класи
Дізнаємося, як одночасно використовувати id і class для одного HTML-елемента та поєднувати їхні стилі.
Використання id у CSS
Навчимося поєднувати селектори id із селекторами тегів, класів і селекторами нащадків.
Вибір елемента за кількома класами в CSS
Навчимося вибирати лише ті елементи, які одночасно мають декілька CSS-класів.
Кілька селекторів разом у CSS
Як вибирати елементи, які одночасно мають декілька класів або id.
Помилка при використанні кількох CSS селекторів
Розбираємо різницю між селекторами без пробілу та селекторами з пробілом у CSS.
Групування складних селекторів у CSS
Навчимося скорочувати CSS-код за допомогою групування складних селекторів.
Помилка при групуванні складних CSS селекторів
Розберемо типову помилку під час групування складних селекторів та навчимося правильно об'єднувати CSS правила.
Практика на комбінації CSS селекторів
Практичні завдання для закріплення роботи із селекторами тегів, класів, id та групуванням селекторів.
Приоритет селекторов CSS
Разберем порядок применения CSS правил и узнаем, какое свойство имеет больший приоритет.
Зауваження до конфлікту властивостей CSS
Розберемо випадок, коли CSS-селектори мають різні властивості та як браузер застосовує ці стилі.
Правила специфічності в CSS
Розберемо правила специфічності CSS-селекторів та дізнаємося, який стиль переможе при конфлікті.
Пріоритет селекторів потомків у CSS
Розберемо, чому стиль елемента може мати більший пріоритет, ніж стиль його батьківського елемента.
Сусідній селектор у CSS
Розберемо сусідній селектор +, який дозволяє вибирати елементи, що знаходяться безпосередньо після іншого елемента.
Родинний селектор у CSS
Розберемо родинний селектор ~, який дозволяє вибирати всі елементи, що знаходяться після певного елемента всередині одного батьківського елемента.
Універсальний селектор у CSS
Розберемо універсальний селектор *, який дозволяє вибирати всі HTML елементи або всі елементи всередині певного батьківського елемента.
Селектори атрибутів у CSS
У цьому уроці розберемо селектори атрибутів CSS, які дозволяють вибирати HTML елементи за наявністю атрибутів та значеннями цих атрибутів.
Стани посилань у CSS
У цьому уроці розберемо псевдокласи CSS для роботи зі станами посилань: :link, :visited, :hover та :active.
Нюанси послідовності станів посилань у CSS
Розберемо порядок запису псевдокласів посилань у CSS та правило LoVe HAte.
Стани посилань :link і :visited у CSS
Розберемо об'єднання станів :link і :visited та спрощення CSS для стилізації посилань.
Звичайне використання станів посилань у CSS
Навчимося задавати загальні стилі для всіх посилань та змінювати їх поведінку при наведенні курсора.
Складні селектори зі станами посилань у CSS
Навчимося застосовувати складні селектори разом із псевдокласами посилань :hover, :link і :visited.
Посилання з класом у CSS
Навчимося застосовувати стилі до посилань, які мають CSS клас, використовуючи псевдокласи станів.
Вибірка кінцевих елементів у CSS
Навчимося вибирати перший і останній дочірній елемент за допомогою псевдокласів :first-child та :last-child.
Вибір елементів за позицією в CSS
Вивчаємо псевдокласи :nth-child() та :nth-last-child() для вибору елементів за їх порядковим номером.
Вибірка єдиного нащадка в CSS
Вивчаємо псевдоклас :only-child, який дозволяє вибирати елементи, що є єдиним дочірнім елементом свого батька.
Вибірка порожніх елементів у CSS
Вивчаємо псевдоклас :empty, який дозволяє вибирати елементи без будь-якого вмісту.
Вибірка по позиції і типу елементів у CSS
Вивчаємо псевдокласи для вибору елементів за їх позицією та типом: :first-of-type, :last-of-type, :nth-of-type, :nth-last-of-type.
Селектор заперечення в CSS
Вивчаємо псевдоклас :not(), який дозволяє вибирати всі елементи, крім тих, що відповідають заданому селектору.
Оформлення
Встановлення фонового кольору в CSS
Вивчаємо властивість background-color, яка дозволяє задавати колір фону HTML-елементів.
Основи роботи з межами в CSS
Вивчаємо, як створювати межі елементів за допомогою властивостей border-width, border-style і border-color.
Суцільна рамка в CSS
Вивчаємо значення solid для властивості border-style та створюємо просту суцільну рамку навколо елемента.
Пунктирна рамка в CSS
Вивчаємо значення dotted для властивості border-style та створюємо рамку у вигляді точок.
Пунктирна рамка у вигляді тире в CSS
Вивчаємо значення dashed для властивості border-style та створюємо рамку у вигляді тире.
Опукла рамка в CSS
Вивчаємо значення ridge для властивості border-style та створюємо об'ємну опуклу рамку.
Подвійна межа в CSS
Вивчаємо значення double властивості border-style, яке створює подвійну лінію навколо елемента.
Скорочений запис межі в CSS
Вивчаємо скорочену властивість border для задання товщини, стилю та кольору межі одним рядком.
Межі окремих сторін в CSS
Вивчаємо властивості border-left, border-right, border-top та border-bottom для створення меж окремих сторін елемента.
Заокруглення кутів блоку в CSS
Вивчаємо властивість border-radius для створення заокруглених кутів у елементів.
Заокруглення фону в CSS
Вивчаємо використання властивості border-radius для заокруглення не тільки межі, а й фону елемента.
Створення кола в CSS
Вивчаємо, як створити круглий елемент за допомогою властивості border-radius.
Різне заокруглення для різних кутів CSS
Вивчаємо, як задавати різні значення border-radius для окремих кутів елемента.
Два значення заокруглення для різних кутів CSS
Вивчаємо, як задавати різне заокруглення кутів за допомогою двох значень властивості border-radius.
Три значення заокруглення для різних кутів CSS
Вивчаємо, як задавати різне заокруглення кутів за допомогою трьох значень властивості border-radius.
Заокруглені кути у відсотках в CSS
Вивчаємо використання відсоткових значень для властивості border-radius.
Створення кола при заокругленні у відсотках в CSS
Вивчаємо, як створити круглий елемент за допомогою значення border-radius: 50%.
Зображення для фону в CSS
Вивчаємо, як встановити зображення як фон елемента за допомогою властивості background-image.
Повторення фонового зображення в CSS
Вивчаємо, як керувати повторенням фонового зображення за допомогою властивості background-repeat.
Інші властивості фону в CSS
Вивчаємо додаткові властивості для керування фоном елемента: background-position, background-size, background-attachment, background-clip, background-origin та background.
Робота з маркерами списків ul в CSS
Вивчаємо властивість list-style-type для зміни вигляду або приховування маркерів ненумерованих списків.
Квадратні маркери списків ul в CSS
Вивчаємо значення square властивості list-style-type для створення квадратних маркерів у ненумерованих списках.
Маркери списків ul у вигляді кружків в CSS
Вивчаємо значення circle властивості list-style-type для створення порожніх круглих маркерів у списках ul.
Робота з маркерами списків ul в CSS
Вивчаємо значення disc властивості list-style-type для створення стандартних заповнених круглих маркерів у списках ul.
Відсутність маркерів списків ul в CSS
Вивчаємо значення none властивості list-style-type для видалення маркерів у ненумерованих списках.
Робота з маркерами списків ol в CSS
Вивчаємо, як змінювати вигляд маркерів нумерованих списків ol за допомогою властивості list-style-type.
Малі римські цифри для списків ol в CSS
Вивчаємо значення lower-roman властивості list-style-type для створення нумерації списку ol маленькими римськими цифрами.
Великі римські цифри для списків ol в CSS
Вивчаємо значення upper-roman властивості list-style-type для створення нумерації списку ol великими римськими цифрами.
Малі латинські літери для списків ol в CSS
Вивчаємо значення lower-alpha властивості list-style-type для створення нумерації списку ol маленькими латинськими літерами.
Великі латинські літери для списків ol в CSS
Вивчаємо значення upper-alpha властивості list-style-type для створення нумерації списку ol великими латинськими літерами.
Малі грецькі літери для списків ol в CSS
Вивчаємо значення lower-greek властивості list-style-type для створення нумерації списку ol маленькими грецькими літерами.
Числа з нулем попереду для списків ol в CSS
Вивчаємо значення decimal-leading-zero властивості list-style-type для створення нумерації списку ol з нулем перед однозначними числами.
Блочна модель
Робота з відступами margin в CSS
Вивчаємо властивість margin, яка створює зовнішні відступи між елементами сторінки.
Відступи margin для різних сторін в CSS
Вивчаємо окремі властивості margin для створення різних зовнішніх відступів з кожної сторони елемента.
Чотири значення у властивості margin в CSS
Вивчаємо скорочений запис margin із чотирма значеннями для задання різних зовнішніх відступів з усіх сторін елемента.
Два значення у властивості margin в CSS
Вивчаємо скорочений запис margin із двома значеннями для одночасного задання вертикальних та горизонтальних відступів.
Три значення у властивості margin в CSS
Вивчаємо скорочений запис margin із трьома значеннями для задання верхнього, горизонтального та нижнього відступів.
Робота з відступами padding в CSS
Вивчаємо властивість padding, яка створює внутрішні відступи між вмістом елемента та його границею.
Відступи padding для різних сторін в CSS
Вивчаємо окремі властивості padding для створення різних внутрішніх відступів з кожної сторони елемента.
Кілька значень у властивості padding в CSS
Вивчаємо скорочений запис padding із двома, трьома та чотирма значеннями для задання внутрішніх відступів.
Як padding впливає на розмір елемента в CSS
Вивчаємо, як внутрішні відступи padding змінюють фактичний розмір елемента навіть при заданій ширині width.
Вплив границі на розширення елементів у CSS
Вивчаємо, як властивість border впливає на фактичний розмір елемента та чому блок стає більшим за заданий width.
Вплив padding і границі на розширення елементів у CSS
Вивчаємо, як одночасне використання padding і border збільшує фактичний розмір елемента.
Скасування розширення елементів у CSS
Вивчаємо властивість box-sizing зі значенням border-box, яка дозволяє включити padding і border у задані розміри елемента.
Ширина і висота блочного елемента в CSS
Вивчаємо, як задавати ширину та висоту блочних елементів за допомогою властивостей width і height.
Ширина блочного елемента в CSS
Вивчаємо поведінку блочних елементів без заданої ширини та як CSS автоматично розтягує їх на всю доступну ширину.
Висота блочного елемента в CSS
Вивчаємо, як формується висота блочного елемента, якщо властивість height не задана.
Висота блочного елемента без вмісту в CSS
Вивчаємо, як поводиться блочний елемент без вмісту та чому його висота стає нульовою.
Кілька блочних елементів поруч у CSS
Вивчаємо стандартну поведінку блочних елементів та чому вони починаються з нового рядка.
Ширина і висота рядкового елемента в CSS
Вивчаємо особливості розмірів рядкових елементів та чому властивості width і height для них не працюють.
Кілька рядкових елементів поруч у CSS
Вивчаємо поведінку рядкових елементів та як вони автоматично розташовуються в один ряд.
Відступи між рядковими елементами в CSS
Вивчаємо, звідки беруться проміжки між рядковими елементами та як ними керувати.
Визначення блочної моделі HTML тегів
Практикуємо визначати, до якої моделі відображення належать різні HTML-елементи: блочні або рядкові.
Робота з властивістю display у CSS
Вивчаємо властивість display, яка дозволяє змінювати тип відображення HTML-елементів: робити їх блочними або рядковими.
Ширина і висота рядково-блочного елемента в CSS
Вивчаємо особливості елементів із display: inline-block та можливість задавати їм ширину і висоту.
Ширина рядково-блочного елемента в CSS
Вивчаємо, як формується ширина елемента з display: inline-block, якщо властивість width не задана.
Висота рядково-блочного елемента в CSS
Вивчаємо, як формується висота елемента з display: inline-block, якщо властивість height не задана.
Кілька рядково-блочних елементів поруч у CSS
Вивчаємо, як розташувати кілька елементів в один ряд за допомогою display: inline-block.
Вирівнювання блочних елементів у CSS
Вивчаємо, як за допомогою margin: auto центрувати блочні елементи по горизонталі.
Вирівнювання блочного елемента з відступом зліва в CSS
Вивчаємо, як значення auto у margin-left дозволяє розташувати блочний елемент праворуч.
Вирівнювання блочного елемента з відступом справа в CSS
Вивчаємо, як поєднання margin-left: auto та margin-right дозволяє розташувати блочний елемент із заданим правим відступом.
Центрування рядкових елементів у CSS
Вивчаємо, як вирівнювати рядкові елементи по центру за допомогою властивості text-align.
Центрування кількох рядкових елементів у CSS
Вивчаємо, як вирівнювати кілька рядкових елементів по центру за допомогою text-align.
Вирівнювання рядкових елементів по правому краю в CSS
Вивчаємо, як вирівнювати рядкові елементи праворуч за допомогою властивості text-align.
Центрування рядково-блочних елементів у CSS
Вивчаємо, як вирівнювати рядково-блочні елементи по центру за допомогою text-align.
Вирівнювання рядково-блочних елементів по правому краю в CSS
Вивчаємо, як вирівнювати рядково-блочні елементи по правому краю за допомогою text-align: right.
Флекс-елементи в CSS
Вивчаємо нову модель розташування елементів — flex, яка дозволяє легко створювати рядкові макети.
Висота батьківського елемента flex у CSS
Вивчаємо, як формується висота flex-контейнера, якщо йому не задано власну висоту.
Ширина батьківського елемента flex у CSS
Вивчаємо, як визначається ширина flex-контейнера, якщо йому не задано власну ширину.
Рядково-блочний батьківський елемент flex у CSS
Вивчаємо значення inline-flex, яке створює flex-контейнер із поведінкою рядково-блочного елемента.
Відступи padding батьківського елемента flex у CSS
Вивчаємо, як працює внутрішній відступ padding у flex-контейнера.
Відступи margin у flex-елементів CSS
Вивчаємо, як працюють зовнішні відступи margin у дочірніх flex-елементів.
Вирівнювання flex-елементів по центру в CSS
Вивчаємо властивість justify-content та значення center для вирівнювання flex-елементів по горизонталі.
Вирівнювання flex-елементів по краях батька в CSS
Вивчаємо значення space-between властивості justify-content для рівномірного розподілу flex-елементів.
Вирівнювання flex-елементів з відступами в CSS
Вивчаємо значення space-around властивості justify-content для створення відступів навколо flex-елементів.
Вирівнювання flex-елементів з рівними відступами в CSS
Вивчаємо значення space-evenly властивості justify-content для створення однакових відстаней між flex-елементами та краями контейнера.
Позиціонування
Абсолютне позиціонування елементів у CSS
Вивчаємо абсолютне позиціонування за допомогою position: absolute, а також властивості top, right, bottom та left для розташування елементів за координатами.
Відносне позиціонування елементів у CSS
Вивчаємо position: relative, зміщення елементів за допомогою top, right, bottom та left, а також різницю між relative та normal flow.
Позиціонування відносно батьківського елемента в CSS
Вивчаємо, як position: relative у батьківського елемента змінює поведінку дочірнього елемента з position: absolute.
Позиціонування відносно абсолютного батька в CSS
Вивчаємо, як елемент з position: absolute може бути батьківською системою координат для інших абсолютно позиціонованих елементів.
Абсолютне позиціонування без координат у CSS
Вивчаємо поведінку position: absolute без top, left, right та bottom, а також розуміємо, як елемент випадає з нормального потоку.
Центрування через абсолютне позиціонування в CSS
Вивчаємо спосіб створення елемента з автоматичним розтягуванням за допомогою position: absolute та координат top, right, bottom, left.
Від'ємні значення при позиціонуванні в CSS
Вивчаємо використання від'ємних значень top, right, bottom і left для зміщення позиціонованих елементів.
Фіксоване позиціонування в CSS
Вивчаємо position: fixed та розуміємо різницю між абсолютним і фіксованим позиціонуванням.
Блок на всю ширину екрана в CSS
Вивчаємо створення фіксованого блоку на всю ширину екрана за допомогою position: fixed та width: 100%.
Накладання елементів по осі Z у CSS
Вивчаємо порядок накладання елементів та розуміємо, як браузер визначає, який елемент буде зверху.
Регулювання накладання елементів по осі Z у CSS
Вивчаємо властивість z-index для керування порядком відображення елементів, які накладаються один на одного.
Нюанси використання від'ємного значення z-index у CSS
Розбираємо, як працюють від'ємні значення z-index та чому елемент із z-index: -1 може опинитися позаду інших елементів.
Флоати
Вступ до властивості float у CSS
Вивчаємо властивість float, яка дозволяє розташовувати елементи з обтіканням текстом.
Проникнення плаваючих елементів через теги в CSS
Розбираємо, як float впливає на сусідні елементи та чому плаваючий елемент може заходити за межі інших тегів.
Поєднання float і margin у CSS
Розбираємо особливості роботи margin з плаваючими елементами та розуміємо, чому відступи можуть працювати не так, як очікується.
Поєднання float і padding у CSS
Розбираємо, як padding взаємодіє з плаваючими елементами та чому відступ може не впливати на відстань між текстом і картинкою.
Плаваючі елементи під тегами в CSS
Розбираємо, які елементи обтікають float-елементи та чому обтікання працює тільки для елементів, які знаходяться після них у HTML.
Вплив float на батьківський елемент у CSS
Розбираємо, чому елементи з float не враховуються у висоті батьківського контейнера та як це впливає на верстку.
Висота батьківського елемента з float в CSS
Розбираємо, як задати висоту батьківському елементу, коли всередині знаходяться плаваючі елементи float.
Текст у батьківському елементі з float в CSS
Розбираємо, як текст у батьківському контейнері впливає на висоту блоку з плаваючими елементами float.
Обтікання елементів з float в CSS
Розбираємо проблему накладання блоків при використанні float та як працює обтікання елементів.
Відміна обтікання за допомогою clear в CSS
Вивчаємо властивість clear, яка дозволяє скасувати обтікання float та уникнути накладання елементів.
Окремий div з clearfix в CSS
Розглядаємо використання окремого блоку clearfix для скасування обтікання float.
Кліарфікс і висота батьківського елемента в CSS
Дізнаємося, як clearfix допомагає відновити висоту батьківського блоку з плаваючими елементами float.
Властивість float для блоків у CSS
Вивчаємо використання float не тільки для зображень, а й для звичайних блокових елементів.
Властивість float і декілька блоків у CSS
Розглядаємо поведінку декількох блокових елементів з однаковим значенням float.
Властивість float і батьківський блок без тексту в CSS
Вивчаємо проблему зникнення висоти батьківського елемента при використанні float та вирішення через clearfix.
Флекси
Розміщення flex-елементів у ряд або колонку в CSS
Вивчаємо властивість flex-direction, яка керує напрямком розташування flex-елементів у контейнері.
Розміщення flex-елементів у перевернутому ряду в CSS
Вивчаємо значення row-reverse властивості flex-direction, яке змінює напрямок розташування flex-елементів та перевертає їх порядок.
Розміщення flex-елементів у колонку в CSS
Вивчаємо значення column властивості flex-direction для розміщення flex-елементів вертикально.
Перевертання колонки з flex-елементами в CSS
Вивчаємо значення column-reverse властивості flex-direction для створення перевернутої колонки flex-елементів.
Головна та поперечна осі у flex-блоках у CSS
Вивчаємо головну та поперечну осі у Flexbox, напрямки осей та залежність від властивості flex-direction.
Вирівнювання flex-елементів по головній осі в CSS
Вивчаємо властивість justify-content та значення flex-start і flex-end для вирівнювання flex-елементів по головній осі.
Вирівнювання flex-блоків по поперечній осі в CSS
Вивчаємо властивість align-items для вирівнювання flex-елементів по поперечній осі.
Значення center властивості align-items у CSS
Вивчаємо вирівнювання flex-елементів по центру поперечної осі за допомогою значення center властивості align-items.
Центрування без висоти блоків у CSS
Розглядаємо роботу align-items: center без заданої висоти flex-елементів.
Значення stretch властивості align-items у CSS
Вивчаємо значення stretch властивості align-items та особливості розтягування flex-елементів по поперечній осі.
Практика на вирівнювання по осях у CSS
Практикуємо вирівнювання flex-елементів по головній та поперечній осях за допомогою justify-content та align-items.
Вирівнювання окремого flex-елемента в CSS
Вивчаємо властивість align-self, яка дозволяє змінювати вирівнювання окремого flex-елемента незалежно від інших елементів.
Порядок flex-блоків у CSS
Вивчаємо властивість order, яка дозволяє змінювати порядок відображення flex-елементів без зміни HTML-коду.
Гріди
Введення в CSS Grid
Знайомимося з CSS Grid, створенням Grid-контейнера та принципом роботи двовимірної сітки.
Треки та лінії в CSS Grid
Розбираємо основні складові CSS Grid: треки, лінії та комірки сітки.
Відображення grid у відладчику браузера
Як використовувати інструменти розробника Chrome для перевірки CSS Grid розмітки.
Кількість і ширина стовпців у CSS Grid
Вивчаємо властивість grid-template-columns для створення колонок різної кількості та ширини у CSS Grid.
Одиниця fr у CSS Grid
Вивчаємо гнучку одиницю fr у CSS Grid для розподілу доступного простору між колонками та рядками.
Дробові одиниці fr у CSS Grid
Вивчаємо використання дробових значень fr для точнішого розподілу простору між колонками CSS Grid.
Пікселі та одиниці fr у CSS Grid
Вивчаємо комбінування фіксованих розмірів у px та гнучких значень fr для створення колонок CSS Grid.
Відсотки та одиниці fr у CSS Grid
Вивчаємо використання відсотків (%) разом з одиницями fr для створення гнучких колонок CSS Grid.
Функція repeat у CSS Grid
Вивчаємо використання функції repeat() для скорочення запису однакових колонок у CSS Grid.
Значення auto у CSS Grid
Вивчаємо використання значення auto для автоматичного заповнення вільного простору в CSS Grid.
Значення auto-fill у CSS Grid
Вивчаємо використання auto-fill у функції repeat() для автоматичного створення однакових колонок у CSS Grid.
Функція minmax у CSS Grid
Вивчаємо використання функції minmax() разом з auto-fill для створення адаптивних колонок у CSS Grid.
Значення auto-fit у CSS Grid
Вивчаємо використання auto-fit разом з repeat() та minmax() для створення адаптивних колонок у CSS Grid.
Кількість і висота рядків у CSS Grid
Вивчаємо властивість grid-template-rows для керування кількістю та розміром рядків у CSS Grid.
Скорочення для рядків і колонок у CSS Grid
Вивчаємо скорочений запис grid-template для одночасного налаштування рядків і колонок у CSS Grid.
Об'єднання рядків у CSS Grid
Вивчаємо властивість grid-row, яка дозволяє елементам займати декілька рядків у CSS Grid.
Об'єднання колонок у CSS Grid
Вивчаємо властивість grid-column, яка дозволяє елементам займати декілька колонок у CSS Grid.
Комбінації об'єднань по рядах і стовпцях у CSS гридах
Вивчаємо комбінування властивостей grid-row і grid-column для створення складних макетів у CSS Grid.
Перекриття стовпців у CSS Grid
Вивчаємо ситуації, коли елементи CSS Grid займають однакові стовпці та автоматично переходять на наступні рядки.
Відстань між стовпцями в CSS Grid
Вивчаємо властивість column-gap, яка дозволяє задавати проміжки між стовпцями Grid-контейнера.
Відстань між рядами в CSS Grid
Вивчаємо властивість row-gap, яка дозволяє задавати проміжки між горизонтальними рядами Grid-контейнера.
Відстань між стовпцями і рядами в CSS Grid
Вивчаємо властивість gap, яка дозволяє одночасно задавати проміжки між рядками та стовпцями Grid-контейнера.
Плитка в CSS Grid
Практикуємо створення плиток у CSS Grid: розміщення елементів у декілька колонок та додавання відступів між блоками.
Макети
Створення меню в CSS
Практикуємо створення горизонтального меню сайту за допомогою Flexbox, стилізацію посилань, hover-ефектів та активного пункту меню.
Прості одноколоночні макети сайтів в CSS
Практикуємо створення простого одноколоночного макета сайту з wrapper, меню та основним контентом.
Схема макетів з кількома wrapper у CSS
Вивчаємо створення макетів, де фон займає всю ширину сторінки, а контент залишається по центру за допомогою декількох wrapper та center.
Структурні блоки сайту в HTML
Вивчаємо стандартну структуру вебсайту: wrapper, header, container, content, sidebar та footer.
Схема двоколоночного макета сайту в CSS
Створюємо двоколоночний макет сайту за допомогою HTML-структури та Flexbox для розташування контенту і sidebar.
Схема триколоночного макета сайту в CSS
Створюємо триколоночний макет сайту за допомогою Flexbox: лівий sidebar, основний контент та правий sidebar.
Основні теги макета в HTML
Вивчаємо семантичні HTML-теги для створення структури сайту: header, footer, aside, main та nav.
Тег section в HTML
Вивчаємо тег section для об'єднання пов'язаних блоків сторінки та створення логічної структури HTML-документа.
Практика на макетах HTML та CSS
Практикуємо створення повноцінних макетів сайтів за допомогою HTML та CSS: wrapper, header, nav, aside, main, footer та flex-розмітка.