EasyCode365EasyCode365

Основи CSS

Починай тут, щоб стилізувати перші вебсторінки кольорами, відступами, типографікою та простими макетами для початківців.

  1. Що таке CSS?

    Дізнайся, що таке CSS, як CSS працює разом з HTML, і як писати стилі через теги style, inline-стилі та зовнішні таблиці стилів.

  2. Синтаксис CSS і базові селектори

    Вивчи структуру CSS-правила, декларації та базові селектори: селектори елементів, класів, ID і згруповані селектори.

  3. Розширені CSS-селектори та комбінатори

    Попрактикуй розширені CSS-селектори: селектори атрибутів, дочірні селектори, селектори сусідів, нащадків і універсальний селектор.

  4. Специфічність, наслідування і каскад

    Зрозумій вагу селекторів, порядок каскаду, наслідування, конфліктні правила і коли варто або не варто використовувати !important.

  5. Значення, одиниці та кольори CSS

    Вивчи поширені значення, одиниці та кольори CSS, зокрема px, em, rem, відсотки, RGB, RGBA, HSL і hex-кольори.

  6. Опановуємо CSS box model

    Зрозумій область контенту, padding, рамки, margins, схлопування відступів і те, як box-sizing впливає на макет.

  7. Основи вебтипографіки

    Вивчи основи вебтипографіки: font-family, розмір шрифту, line-height, вирівнювання та просте форматування тексту.

  8. Фони та рамки

    Навчися стилізувати фони та рамки за допомогою кольорів, зображень, повторення, стилів рамки та border-radius.

  9. Інтерактивний

    Інтерактивний урок: margin, padding, border

    Попрактикуй margin, padding, ширину рамки, стиль рамки та border-radius на живому CSS-блоці.

  10. Створення посилань і навігації

    Навчися стилізувати стани посилань і створювати прості вертикальні та горизонтальні панелі навігації.

  11. Стилізація списків і таблиць

    Навчися стилізувати списки й таблиці за допомогою власних маркерів, відступів, рамок, вирівнювання, чергування рядків і читабельних макетів даних.

  12. Стилізація форм і кнопок

    Навчися стилізувати inputs, labels, checkboxes, кнопки, стани фокусу та стандартні стилі форм у браузері.

  13. Базове візуальне форматування і позиціонування

    Вивчи потік документа, display-значення block, inline та inline-block, а також базове relative й absolute позиціонування.

  14. Плаваючі елементи і clearfix

    Дізнайся, як працюють floats, як текст обтікає плаваючі елементи і як clear та clearfix розв'язують проблеми макета.

  15. Вступ до CSS Flexbox

    Вивчи основи flex-контейнерів, flex-елементів, напрямку, вирівнювання, перенесення, відступів і пропорцій.

  16. Інтерактивний

    Інтерактивний урок: CSS Flexbox

    Практикуй напрямок, перенесення, вирівнювання, відступи та пропорції елементів Flexbox у фокусованих живих playgrounds.

  17. Вступ до CSS Grid

    Вивчи основи CSS Grid, зокрема grid-контейнери, grid-елементи, рядки, колонки, gaps і прості layout сторінки.

  18. Інтерактивний

    Інтерактивний урок: Layout з CSS Grid

    Практикуй колонки, рядки, gaps, spanning і auto-placement у CSS Grid з живим playground.

  19. Вступ до responsive design і media queries

    Вивчи базові media queries, mobile-first layouts, breakpoints і як адаптувати сторінки для телефону, планшета та desktop.