HTML + CSS
  • 🧑‍💻Full-Stack Web Developer
  • ‼️Список корисних ресурсів
  • 📚Теорія
    • 1️⃣HTML
      • Введення в веб-розробку
      • Теги та атрибути
      • Скелет документа HTML
      • Семантика
      • Розмітка тексту
      • Розмітка тексту (2 частина)
      • Зображення
      • Структура HTML-документа
      • Таблиці
      • Символьні підстановки
      • Таблиця кодів символів
      • Відео та аудіо
      • Інструменти розробника
      • Валідація
    • 2️⃣CSS та селектори
      • CSS
      • Селектори
      • Псевдокласи стану
      • Колір
      • Каскад стилів
      • CSS-змінні
      • Одиниці вимірювання
      • Стилізація тексту
      • Властивості шрифту
      • Псевдоелементи тексту
      • Підключення сторонніх шрифтів
    • 3️⃣Блокова модель
      • Основи блокової моделі
      • Геометрія елемента
      • Типи елементів
      • Структурні псевдокласи
    • 4️⃣Flexbox
      • Концепції
      • Властивості контейнера
      • Властивості елемента
    • 5️⃣Grid
    • 6️⃣Зображення і декор
      • Типи зображень
      • Фон елемента
      • Властивості object-fit і object-position
      • Псевдоелементи
      • Градієнт
      • Тінь елемента
    • 7️⃣Векторна графіка
      • Що таке векторна графіка
      • SVG-елементи
      • SVG-документ
      • Використання векторної графіки
      • Зміна властивостей в SVG
    • 8️⃣Позиціонування
      • Позиційовані елементи
      • Властивість z-index
      • Властивість overflow
    • 9️⃣Переходи і анімація
      • CSS-переходи
      • CSS-анімація
      • 2D-трансформації
      • Перспектива
    • 🔟Форми
      • Для чого потрібні форми
      • Елемент <form>
      • Елемент <label>
      • Елемент <input>
      • Елемент <textarea>
      • Елемент <select>
      • Елемент <datalist>
      • Групування полів
      • Валідація форм
      • Валідація на клієнті
      • Псевдокласи стану
    • 🐭Адаптивна верстка
      • Медіа-запити
      • Метатег viewport
      • Інструменти розробника для адаптивної та респонсивної верстки
      • Типи верстки
      • Стратегія Mobile First
      • Вендорні префікси
      • Налаштування теми
    • 🐹Адаптивна графіка
      • Щільність пікселів
      • Респонсивні зображення
      • Респонсивні фонові зображення
      • Респонсивний елемент <img>
      • Елемент <picture>
    • 🦁Методологія ВЕМ
    • 🐶Препроцесор SASS
    • 🐰CSS фреймворки
      • Що таке CSS фреймворки
  • 👷‍♂️Практика
    • 👷Практика
  • Про мене
    • Про мене
Powered by GitBook
On this page
  1. 📚Теорія

🐹Адаптивна графіка

Щільність пікселівРеспонсивні зображенняРеспонсивні фонові зображенняРеспонсивний елемент <img>Елемент <picture>
PreviousНалаштування темиNextЩільність пікселів