🐕
hi-eddy
🐕
hi-eddy
УвійтиЗареєструватися

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

Вам доступно 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

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

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

Увійдіть для доступу

Коментарі

💬

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

УвійтиЗареєструватися