Курсы
Уроки
Шаг 8 из 11 на пути «Веб-разработка»
Tailwind CSS
Tailwind позволяет оформлять страницу маленькими классами прямо в HTML. Вы создадите целый сайт приюта для кошек: для телефонов и компьютеров, в светлой и тёмной теме.
Уроки
Уроки
Tailwind позволяет оформлять страницу маленькими классами прямо в HTML. Вы создадите целый сайт приюта для кошек: для телефонов и компьютеров, в светлой и тёмной теме.
Уроки
Урок 1
Подключите Tailwind через @import и оформляйте элементы классами вроде text-center и font-bold.
За урок вы получите 90 XP
Урок 2
Выбирайте цвета палитры вроде text-orange-600 и bg-stone-50, настраивайте размер и жирность шрифта.
За урок вы получите 130 XP
Урок 3
Добавляйте отступы классами p-6 и mt-4 и центрируйте карточку с помощью max-w-sm и mx-auto.
За урок вы получите 85 XP
Мини-проект
Превратите рецепт оладий в белую карточку по центру: с цветами, читаемым текстом и отступами.
За урок вы получите 30 XP
Урок 5
Добавьте карточкам рамки, скругления rounded-2xl и тени, а картинки обрежьте с помощью object-cover.
За урок вы получите 100 XP
Урок 6
Сверстайте страницу классами flex, justify-between и grid-cols-2 и закрепите шапку классом sticky.
За урок вы получите 130 XP
Мини-проект
Соберите галерею фотоконкурса: карточки в два столбца и значок на фото победителя.
За урок вы получите 30 XP
Урок 8
Заставьте кнопки и поля форм реагировать на посетителей с помощью hover:, focus: и disabled:.
За урок вы получите 95 XP
Урок 9
Сначала макет для телефона, затем адаптация под широкие экраны с помощью префиксов md: и lg:.
За урок вы получите 85 XP
Мини-проект
Доделайте сайт кошачьего кафе: полосатый прайс-лист, форму бронирования и раскладку для любого экрана.
За урок вы получите 30 XP
Урок 11
Тёмная версия страницы на классах dark: и кнопка, которая включает и выключает её.
За урок вы получите 80 XP
Урок 12
Добавьте свои цвета и шрифты в @theme и создайте новые классы с помощью @apply и @utility.
За урок вы получите 95 XP
Урок 13
Оформите главную страницу кошачьего приюта из простого HTML: для телефонов и компьютеров, в светлой и тёмной теме.
За урок вы получите 110 XP
Tailwind CSS позволяет оформлять страницу маленькими классами, которые пишутся прямо в HTML. Курс охватывает цвета и текст, отступы и размеры, рамки и тени, Flexbox, Grid и позиционирование, состояния при наведении и фокусе, адаптивный дизайн, тёмную тему и настройку Tailwind под свой дизайн.
Он рассчитан на тех, кто знает HTML и CSS. Вы оформите карточку рецепта, фотоконкурс и кошачье кафе, а итоговый проект — целая главная страница приюта для кошек, от шапки до подвала.