Обмежений доступ для гостей

Вам доступно 3 уроки з цього курсу безкоштовно.

  • Коментарі доступні тільки авторизованим користувачам
  • Прогрес зберігається тільки 0:00
🔒
КурсиВеб-розробка / Основи HTML + CSS

Основи HTML + CSS

Вигляд:

Модуль 1. Вступ та інструменти

1

Що таке HTML та CSS

Знайомство з основними технологіями веб-розробки та їх призначенням.

2

Встановлення редактора коду

Встановлюємо Visual Studio Code та корисні розширення для веб-розробки.

3

Структура HTML документа

Вивчаємо базову структуру HTML-документа: DOCTYPE, html, head, body.

4

Перша веб-сторінка

Створюємо та запускаємо першу веб-сторінку у браузері.

Модуль 2. Основи HTML

5

Заголовки та параграфи

Теги h1-h6 для заголовків та p для параграфів тексту.

6

Форматування тексту

Теги strong, em, mark, del, sub, sup та інші для форматування.

7

Посилання

Тег a для створення гіперпосилань. Атрибути href, target, title.

8

Зображення

Тег img для вставки зображень. Атрибути src, alt, width, height.

9

Списки

Нумеровані (ol), маркіровані (ul) та списки визначень (dl).

10

Таблиці

Створення таблиць: table, tr, td, th, thead, tbody, tfoot.

Модуль 3. Семантичний HTML5

11

Семантичні теги

Header, nav, main, section, article, aside, footer - структура сторінки.

12

Форми та поля вводу

Створення форм: form, input, textarea, select, button, label.

13

Типи полів введення

Різні типи input: text, email, password, number, date, checkbox, radio.

14

Мультимедіа

Вставка аудіо та відео на сторінку: audio, video, source.

Модуль 4. Основи CSS

15

Підключення CSS

Три способи підключення стилів: inline, internal, external.

16

Селектори CSS

Селектори елементів, класів, ID. Комбіновані та вкладені селектори.

17

Кольори та фони

Робота з кольорами (HEX, RGB, HSL) та фоновими зображеннями.

18

Типографіка

Шрифти, розміри тексту, висота рядка, вирівнювання тексту.

19

Box Model

Модель блоку: content, padding, border, margin. Box-sizing.

20

Одиниці виміру

Абсолютні (px) та відносні (em, rem, %, vh, vw) одиниці.

Модуль 5. Позиціонування

21

Display властивість

Block, inline, inline-block, none. Як елементи займають простір.

22

Position властивість

Static, relative, absolute, fixed, sticky позиціонування.

23

Z-index та контекст накладання

Керування порядком накладання елементів один на одного.

Модуль 6. Flexbox

24

Вступ до Flexbox

Що таке Flexbox та коли його використовувати. Flex-контейнер.

25

Властивості flex-контейнера

Flex-direction, justify-content, align-items, flex-wrap, gap.

26

Властивості flex-елементів

Flex-grow, flex-shrink, flex-basis, align-self, order.

27

Практика Flexbox

Створюємо реальні макети за допомогою Flexbox.

Модуль 7. CSS Grid

28

Вступ до CSS Grid

Що таке Grid та чим він відрізняється від Flexbox.

29

Grid Template

Grid-template-columns, grid-template-rows, fr одиниці, repeat().

30

Розміщення елементів у Grid

Grid-column, grid-row, grid-area. Span та лінії сітки.

31

Grid Areas та іменування

Іменовані області сітки для зручної розмітки.

32

Практика CSS Grid

Створюємо складні макети сторінок за допомогою Grid.

Модуль 8. Адаптивний дизайн

33

Viewport та meta-тег

Налаштування viewport для мобільних пристроїв.

34

Media Queries

Створення стилів для різних розмірів екрану.

35

Mobile-first підхід

Стратегія розробки від мобільних до десктопних пристроїв.

36

Адаптивні зображення

Picture, srcset та sizes для оптимізації зображень.

Модуль 9. Сучасні CSS техніки

37

CSS змінні

Оголошення та використання --custom-property та var().

38

Трансформації

Transform: translate, rotate, scale, skew.

39

Переходи

Transition для плавних змін властивостей елементів.

40

CSS анімації

Keyframes та animation для створення анімацій.

41

Псевдокласи

Hover, focus, nth-child та інші псевдокласи для інтерактивності.

42

Псевдоелементи

Before, after для додавання декоративного контенту.

43

Градієнти та тіні

Linear-gradient, radial-gradient, box-shadow, text-shadow.

Модуль 10. Практичні проекти

44

Верстка картки товару

Створюємо адаптивну картку товару з використанням Flexbox.

45

Верстка навігаційного меню

Створюємо адаптивне меню з бургер-іконкою для мобільних.

46

Верстка Hero-секції

Створюємо привабливу вступну секцію сайту.

47

Фінальний проект: Landing Page

Верстаємо повноцінну посадкову сторінку з нуля.

Коментарі

💬

Коментарі доступні тільки для авторизованих користувачів