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

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

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

Tailwind CSS Mastery

Вигляд:

Модуль 1. Перші кроки: Картка профілю

1

Що таке Tailwind CSS?

Знайомство з utility-first підходом та філософією Tailwind.

2

Встановлення та налаштування

Створюємо проект з Tailwind CSS за допомогою Vite.

3

Перші utility-класи

Вивчаємо базові класи: кольори, відступи, розміри.

4

Типографіка

Стилізуємо текст: шрифти, розміри, вага, кольори.

5

Проект: Картка профілю

Створюємо стильну картку профілю з фото та інформацією.

Модуль 2. Flexbox: Навігаційне меню

6

Display та позиціонування

Block, inline, hidden та інші display класи.

7

Основи Flexbox

flex, flex-row, flex-col та базове вирівнювання.

8

Justify та Align

Вирівнювання елементів по осях.

9

Gap та простір між елементами

Використання gap, space-x, space-y.

10

Flex-grow, shrink та basis

Контроль розмірів flex-елементів.

11

Проект: Навігаційне меню

Створюємо адаптивне навігаційне меню.

Модуль 3. Grid: Фотогалерея

12

Основи CSS Grid

grid, grid-cols та базова сітка.

13

Колонки та рядки

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

14

Gap у Grid

Відступи між елементами сітки.

15

Grid span та позиціонування

col-span, row-span для складних layout.

16

Auto-fit та auto-fill

Автоматична адаптація кількості колонок.

17

Проект: Фотогалерея

Створюємо красиву masonry-подібну галерею.

Модуль 4. Форми: Сторінка входу

18

Стилізація input полів

Базові стилі для текстових полів.

19

Focus та placeholder стилі

Інтерактивні стани полів вводу.

20

Кнопки

Створюємо стильні кнопки різних варіантів.

21

Checkbox та Radio

Кастомні чекбокси та радіокнопки.

22

Select та Textarea

Стилізація випадаючих списків та текстових областей.

23

Валідація форм

Стилі для valid, invalid, required станів.

24

Проект: Сторінка входу

Створюємо красиву форму логіну з валідацією.

Модуль 5. Ефекти: Інтерактивні картки

25

Тіні та borders

shadow, rounded та border класи.

26

Hover ефекти

Інтерактивність при наведенні.

27

Transitions

Плавні переходи між станами.

28

Transform

scale, rotate, translate ефекти.

29

Анімації

animate-spin, animate-pulse та кастомні анімації.

30

Градієнти

Створення красивих градієнтних фонів.

31

Проект: Картки товарів

Створюємо анімовані картки з hover ефектами.

Модуль 6. Responsive: Hero секція

32

Mobile-first підхід

Філософія responsive дизайну в Tailwind.

33

Breakpoints

sm, md, lg, xl, 2xl - коли і як використовувати.

34

Responsive типографіка

Адаптивні розміри тексту.

35

Responsive spacing

Різні відступи на різних екранах.

36

Responsive Flexbox та Grid

Зміна layout залежно від екрану.

37

Приховування елементів

hidden, block на різних breakpoints.

38

Проект: Hero секція

Створюємо вражаючу hero секцію для лендінгу.

Модуль 7. Dark Mode: Перемикач теми

39

Налаштування Dark Mode

Конфігурація темної теми в Tailwind.

40

dark: модифікатор

Застосування стилів для темної теми.

41

Кольорова палітра для темної теми

Вибір правильних кольорів для dark mode.

42

CSS змінні та кастомні кольори

Використання CSS variables з Tailwind.

43

Проект: Перемикач теми

Створюємо компонент перемикання light/dark mode.

Модуль 8. Просунуті техніки: Dashboard

44

Конфігурація tailwind.config.js

Кастомізація тем, кольорів, шрифтів.

45

Кастомні класи з @apply

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

46

Arbitrary values

Використання довільних значень [100px].

47

Plugins

Розширення Tailwind плагінами.

48

Container та max-width

Контейнери та обмеження ширини.

49

Проект: Sidebar Dashboard

Створюємо layout для адмін-панелі.

Модуль 9. Фінальний проект: Портфоліо

50

Планування структури сайту

Архітектура та компоненти портфоліо.

51

Header та навігація

Фіксований header з мобільним меню.

52

Hero секція портфоліо

Вражаюча головна секція з анімаціями.

53

Секція About Me

Розповідь про себе зі стильним оформленням.

54

Секція Skills

Візуалізація навичок з progress bars.

55

Секція Projects

Галерея проектів з фільтрацією.

56

Секція Contact

Форма зворотнього звʼязку.

57

Footer

Інформативний footer з соцмережами.

58

Оптимізація для продакшену

Purge CSS, мініфікація та performance.

59

Деплой портфоліо

Публікація на Vercel або Netlify.

60

Підсумки та наступні кроки

Що вивчати далі та ресурси для розвитку.

Коментарі

💬

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