Изучение Tailwind CSS за час в одном видео! Разработка проекта с нуля

• Tailwind CSS - это фреймворк для стилизации HTML-кода.  

• Он упрощает стилизацию, предоставляя множество готовых стилей.  

• В отличие от Bootstrap, Tailwind фокусируется на конкретных свойствах, а не на готовых компонентах.  

• Bootstrap популярен, но имеет много лишнего кода.  

• Tailwind подходит для создания сайтов с глобальными стилями.  

• Он помогает быстрее прописывать стандартные стили для HTML-тэгов.  

• Необходимы базовые знания HTML и CSS.  

• Для работы с Tailwind понадобится текстовый редактор, например, Visual Studio Code.  

• Для установки Tailwind можно использовать терминал и пакетный менеджер npm.  

• Сначала нужно инициализировать проект с помощью npm.  

• После инициализации можно установить фреймворк с помощью команды `npm install tailwindcss`.  

• После установки создается файл `tailwind.config.js`, который описывает глобальные настройки.  

• В этом файле можно указать, какие файлы будут взаимодействовать с фреймворком.  

• Можно использовать звездочки для указания всех файлов с расширением .html.  

• Создается файл `input.css` для подключения базовых стилей Tailwind.  

• Для преобразования кода в стандартный CSS используется команда `npx tailwindcss`.  

• Можно создать команду в package.json для автоматического запуска преобразования кода.  

• Прописываем команду в терминале для запуска скрипта.  

• Создаем файл с глобальными настройками и файл input.scss для конвертации в style.css.  

• Создаем файл index.html для HTML-разметки и подключаем файл style.css.  

• Запускаем файл в браузере через проводник или с помощью Live Server.  

• Проверяем, что стандартные стили Tailwind CSS применяются к HTML-тегам.  

• Добавляем классы для изменения стилей текста, например, жирный и наклонный текст.  

• Используем документацию для поиска и применения нужных классов.  

• Находим и применяем стили для различных элементов, таких как задний фон и цвет текста.  

• Используем классы для указания насыщенности и цвета фона.  

• Настраиваем темную тему в файле tailwind.config.js.  

• Применяем стили для темной темы, указывая соответствующие классы для HTML-элементов.  

• Переключаемся между светлой и темной темами, меняя класс в HTML-тегах.  

• В будущем можно использовать JavaScript для динамического изменения класса.  

• Переключение между темной и светлой версиями сайта.  

• Практика создания веб-сайта на основе фреймворка Tailwind CSS.  

• Изучение новых классов и стилей.  

• Удаление ненужных HTML-тегов и классов.  

• Использование файла настроек для добавления собственных цветов и отступов.  

• Создание собственных свойств для классов.  

• Создание свойства "main-color" для основного цвета сайта.  

• Применение созданного цвета для заднего фона тега body.  

• Возможность использования собственных значений без обращения к файлу CSS.  

• Создание свойства "big" для внутренних отступов.  

• Указание значения 50 пикселей для отступа.  

• Применение класса для указания отступа.  

• Установка белого цвета текста для тега body.  

• Создание шапки с использованием класса "container".  

• Центрирование блока с помощью свойства "m-x-auto".  

• Объяснение значений свойств "margin" и "padding".  

• Применение свойств для центрирования блока.  

• Сохранение изменений и обновление страницы.  

• Блок отцентрирован и имеет отступы по бокам.  

• Используется технология флексбокс для расположения элементов.  

• Элементы располагаются по бокам с отступами.  

• Используется класс padding-top для отступа сверху.  

• Можно использовать предустановленные классы или свои значения.  

• Создается логотип с текстом и жирным шрифтом.  

• Создается меню из ссылок.  

• Ссылки располагаются по бокам благодаря технологии флексбокс.  

• Добавляются стили для отступов и эффектов при наведении.  

• Создается кнопка с насыщенным красным фоном и закруглениями.  

• Добавляется эффект при наведении для изменения заднего фона.  

• Кнопка выглядит как полноценная кнопка с внутренними отступами.  

• Создается контейнер с классом container для элементов на одной линии.  

• Добавляется отступ по вертикали и текст с классом text-center.  

• Текст увеличивается и выравнивается по центру.  

• Создается абзац с текстом заглушкой.  

• Добавляется отступ сверху и ширина текста с классом width.  

• Текст растягивается на 100% или устанавливается точное значение в пикселях.  

• Текст центрируется и увеличивается отступ сверху.  

• Текст выглядит хорошо и остается без изменений.  

• Создаем div и добавляем кнопки.  

• Используем div для блочных элементов, чтобы они располагались в разных рядах.  

• Применяем стили и меняем названия кнопок.  

• Добавляем класс flex для выравнивания кнопок в один ряд.  

• Устанавливаем justify-center для центрирования.  

• Добавляем отступы и указываем ширину кнопок.  

• Создаем div с классом container для одинаковых отступов.  

• Добавляем class grid для использования системы сеток.  

• Указываем количество колонок и отступы между ними.  

• Создаем блоки с разными стилями и размерами.  

• Указываем цвет и ширину блоков.  

• Обновляем страницу для проверки расположения блоков.  

• Создаем блоки с разной шириной и процентами.  

• Проверяем адаптивность сайта.  

• Планируем дальнейшую работу над адаптивностью.  

• В Stylus автоматически прописываются адаптивные классы.  

• При проверке сайта могут возникать проблемы с элементами, выходящими за пределы.  

• Для решения нужно добавить дополнительные классы, срабатывающие в определенных моментах.  

• Уменьшение шапки сайта показывает, что элементы прижимаются к бокам.  

• При уменьшении до 320 пикселей элементы выглядят хорошо.  

• Для добавления классов нужно указать брейкпоинты в файле с настройками.  

• Указываем названия брейкпоинтов: см, эди мидл, lg, xl.  

• Для шапки устанавливаем внутренние отступы по бокам с помощью свойства px.  

• Для экранов выше 768 пикселей отступы по бокам устанавливаются на ноль.  

• Для мобильных телефонов и разрешений ниже 768 пикселей используется один стиль.  

• Для экранов выше 768 пикселей применяется другой стиль.  

• Обновляем страницу и проверяем, что отступы по бокам исчезают при увеличении размера экрана.  

• Удаляем нижний блок и адаптируем центральную секцию.  

• Кнопки не помещаются по размеру и становятся "бубликами".  

• Прописываем стили для мобильных телефонов и экранов выше 768 пикселей.  

• Для мобильных телефонов кнопки располагаются друг под другом.  

• Для экранов выше 768 пикселей кнопки располагаются в один ряд.  

• Указываем отступы по горизонтали для мобильных телефонов и ноль для экранов выше 768 пикселей.  

• Текст шириной 450 пикселей не помещается на экранах ниже 480 пикселей.  

• Для мобильных телефонов текст должен быть на полный размер.  

• Для экранов выше 480 пикселей текст имеет ширину 450 пикселей.  

• Обновляем страницу и проверяем, что текст не вылазит за экран.  

• Текст находится в пределах необходимого размера.  

• Для основной секции добавляем отступы по бокам.  

• На мобильных устройствах отступы будут, на экранах от 480 пикселей и выше их не будет.  

• Нижняя секция автоматически адаптируется, но для неё указываем другой задний фон с градиентом.  

• Используем класс bg-gradient для указания градиента.  

• Указываем направление градиента: к правой стороне.  

• Определяем цвета для начала и конца градиента: от фиолетового к красному.  

• Добавляем промежуточный цвет с помощью класса via и указываем его значение.  

• Фреймворк удобен для работы, не требует написания CSS.  

• Можно использовать готовые классы, предоставляемые фреймворком.  

• Со временем можно запомнить все стандартные классы и писать веб-сайты быстро и красиво.  

• Урок подходит к концу, подписывайтесь на канал и вступайте в соцсети.