Создайте и разверните современный веб-сайт с пользовательским интерфейсом с помощью React & Tailwind CSS

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

• Использование инструментов искусственного интеллекта для улучшения сайта.  

• Введение в финальное приложение Brainwave с различными элементами и эффектами.  

• Использование современного макета Bento Box.  

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

• Важность изучения адаптивной разработки интерфейса.  

• Рекомендация использования Hostinger для хостинга.  

• Преимущества бизнес-плана Hostinger: производительность, SSL, доменное имя, CDN.  

• Процесс настройки хостинга и выбор доменного имени.  

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

• Использование Visual Studio Code и терминала для работы.  

• Настройка проекта с помощью Vite и Tailwind CSS.  

• Установка Tailwind CSS с помощью Vite.  

• Настройка путей к шаблонам и добавление директив Tailwind CSS.  

• Запуск проекта на локальном хостинге.  

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

• Удаляем ненужные элементы и импортируем CSS приложения.  

• Проверяем, что Tailwind CSS правильно применяет стили.  

• Устанавливаем расширение Tailwind CSS Intellisense для VS Code.  

• Создаем папку .vscode и файл settings.json.  

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

• Автоматическое форматирование кода при сохранении.  

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

• Обновляем конфигурацию Tailwind CSS и добавляем цвета.  

• Определяем компоненты и стили для них.  

• Устанавливаем React Router DOM через npm.  

• Обертываем приложение с помощью маршрутизатора.  

• Импортируем маршрутизатор браузера.  

• Удаляем существующую папку assets и скачиваем новую.  

• Изменяем значок ссылки и название приложения.  

• Готовимся к настройке скелета приложения.  

• Объявляем приложение с помощью функции ES6.  

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

• Создаем градиент кнопки и импортируем его.  

• Создаем новый компонент в папке components.  

• Импортируем кнопку в приложение и тестируем её.  

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

• Преобразование простой кнопки в повторно используемый компонент.  

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

• Возможность добавления onclick и дочерних элементов.  

• Создание подфункции для рендеринга кнопки.  

• Использование компонента кнопки svg.  

• Импорт и использование компонента кнопки svg.  

• Добавление стилей и классов к кнопке.  

• Использование относительного и линейного гибкого позиционирования.  

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

• Передача значений пикселей и текста.  

• Применение классов и z-индекса к элементу span.  

• Создание функции для рендеринга ссылки.  

• Создание компонента заголовка в формате JSX.  

• Добавление фиксированного элемента div с z-индексом.  

• Добавление фона и границы для заголовка.  

• Добавление изображения в заголовок.  

• Импорт изображения и настройка его размеров.  

• Настройка навигации и перемещение изображения внутрь раздела.  

• Создаем навигационный элемент с классом "скрытое, фиксированное".  

• Устанавливаем свойства: верхнее значение 5rem, левое, правое и нижнее значения 0, фон - n8, на больших устройствах - статичный, гибкий, поле x - автоматическое, прозрачное.  

• Внутри навигационной панели создаем div с классом "относительный z-index 2, flex, flex-row".  

• Создаем папку "константы" и файл "index.js" внутри нее.  

• Копируем и вставляем файл констант в раздел "Прочитай меня".  

• Файл констант содержит списки контента и текста для использования в приложении.  

• Импортируем навигацию из констант и используем динамический блок кода.  

• Сопоставляем элементы навигации с заголовками и URL-адресами.  

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

• Присваиваем тегу привязки класс "динамический" для преобразования элементов в блоки.  

• Применяем специальное семейство шрифтов и изменяем цвет при наведении курсора.  

• Включаем свойство "item" для отображения элементов только на мобильных устройствах.  

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

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

• Используем свойство useLocation из react-router-dom для определения текущей ссылки.  

• Использование const path name для доступа к текущему URL.  

• Применение z-индекса и стилей для элементов в зависимости от URL.  

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

• Создание тега привязки с href и классом для кнопки.  

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

• Использование многоразового кнопочного компонента для кнопки "Войти".  

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

• Добавление мобильной навигации с использованием абсолютного позиционирования.  

• Импорт и использование элементов из папки design.  

• Импорт элементов из папки design и их использование.  

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

• Проверка и отображение меню в зависимости от состояния навигации.  

• Добавление кнопки для отображения меню в формате SVG.  

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

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

• Исправление макета и добавление прослушивателя onclick.  

• Использование пакета scroll-lock для отключения прокрутки страниц.  

• Включение и отключение прокрутки страниц в зависимости от состояния навигации.  

• При нажатии на элемент навигация не открывается.  

• Включение прокрутки страницы и установка значения "Открыто для навигации" в false.  

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

• Создание компонента section для всех последующих разделов.  

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

• Принятие реквизитов: имена классов, идентификатор раздела, крестики, смещение крестиков.  

• Настройка стилей для div с динамическими отступами.  

• Отображение дочерних элементов и создание разделителей для боковых линий.  

• Создание div для выделения разделов на мобильных устройствах.  

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

• Импорт и использование компонента section svg.  

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

• Создание нового компонента hero в папке components.  

• Запускаем приложение и отображаем раздел с героями.  

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

• Импортируем раздел и добавляем необходимые реквизиты.  

• Добавляем разделитель с классом container и relative.  

• Создаем div с классом h one и полем внизу.  

• Добавляем текст "Исследуй возможности искусственного интеллекта".  

• Добавляем изображение с источником curve и классом absolute.  

• Создаем заголовок и подзаголовок "Раскройте мощь искусственного интеллекта в Brainwave".  

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

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

• Создаем контейнер для остальной части раздела hero.  

• Добавляем градиент и закругленные углы.  

• Создаем div с изображением робота и классом w dash full.  

• Устанавливаем ширину и высоту изображения.  

• Изменяем соотношение сторон для разных устройств.  

• Создаем изображение фона для героя.  

• Переносим ширину и высоту изображения робота на фон.  

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

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

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

• Присвоение классов для улучшения масштабирования и перевода.  

• Установка пакета react-parallax.  

• Импорт необходимых элементов для реализации параллакса.  

• Настройка ссылки на раздел "Герой" и отображение параллакса прокрутки.  

• Отображение значков героев внутри параллакса.  

• Настройка стилей для значков и параллакса.  

• Добавление интерактивности к меню значков.  

• Отображение самозакрывающегося градиентного компонента.  

• Добавление фоновых кругов для завершения дизайна.  

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

• Проверка и исправление пользовательских заполнений.  

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

• Завершение работы над разделом с героями и подготовка к дальнейшим улучшениям.  

• Приложение с искусственным интеллектом должно иметь маленькие прыгающие дополнения.  

• Исправление интервалов между текстами и размещение искусственного интеллекта в нужном месте.  

• Добавление конечного знака и точки с запятой для улучшения читаемости.  

• Сосредоточение на внедрении летающих дополнений на экран робота.  

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

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

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

• Отображение компонента в разделе "Герои" и добавление дополнительных реквизитов для позиционирования.  

• Настройка стилей для устройств среднего размера.  

• Создание нового компонента для отображения карты генерации кода.  

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

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

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

• Отображение заголовка и текста в уведомлении.  

• Добавление изображений пользователей, генерирующих код.  

• Стилизация изображений пользователей и добавление текста "минуту назад".  

• Добавление изображения генерации кода и настройка его стилей.  

• Завершение и проверка финального вида приложения.  

• Создание нового файла "логотипы компании" в разделе "Компоненты".  

• Импорт компонента и настройка его стилей.  

• Применение стилей к div для отображения логотипов.  

• Отображение слогана "Помогаем людям создавать красивый контент".  

• Создание ul для отображения логотипов компаний.  

• Настройка стилей для ul и li для отображения логотипов.  

• Проверка и настройка стилей для логотипов.  

• Оценка внешнего вида раздела "Герои".  

• Планы на создание следующего раздела "Преимущества".  

• Создание нового компонента "benefits" в папке "Components".  

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

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

• Настройка реквизита для компонента заголовка.  

• Проверка и отображение слогана "Общаться умнее, а не сложнее с помощью Brainwave".  

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

• Возможность передачи дополнительных стилей для заголовков.  

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

• Пример с заголовком "Преимущества".  

• Создание div с классом flex и flex-wrap.  

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

• Преобразование данных в массив объектов с идентификаторами, заголовками и текстами.  

• Создание раздела с ключом идентификатора элемента.  

• Создание div с классом block и относительным позиционированием.  

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

• Присвоение класса относительному z-index и flex.  

• Добавление p-value для дополнения и указание на отсутствие кликабельности.  

• Стилизация текста с использованием специальных цветов.  

• Отображение значков с использованием URL-адресов.  

• Добавление стрелки для "исследовать больше".  

• Стилизация тега p для улучшения внешнего вида.  

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

• Применение градиента к карточкам для визуального интереса.  

• Создание раздела для отображения изображений при наведении курсора.  

• Присвоение div класса absolute и inset 0.5.  

• Использование clip-path для отображения фоновых изображений.  

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

• Использование SVG-файлов для отображения преимуществ.  

• Создание заголовка, который будет удобнее использовать.  

• Проверка готового веб-сайта на настольных устройствах и мобильных устройствах.  

• Завершили раздел преимуществ и переходим к разделу совместной работы.  

• Создаем новый компонент "Совместная работа" в папке "Компоненты".  

• Импортируем компонент в приложение и начинаем внедрять.  

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

• Создаем контейнер с классом "container" и flex на больших устройствах.  

• Внутри контейнера размещаем div с классом "max-w-25rem" и h2.  

• Внутри div с h2 размещаем ul с классом "max-w-22rem".  

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

• Добавляем div с классом "flex" и изображением для каждого элемента.  

• Добавляем кнопку "попробуйте прямо сейчас".  

• Реализуем пользовательский компонент кнопки.  

• Конфигурация Tailwind упрощает создание повторно используемых классов.  

• Переходим к правой части экрана на настольных устройствах.  

• Создаем div с классом "collab" и текстом из констант.  

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

• Создаем div для иллюстрации с классом "relative".  

• Добавляем div с классом "flex" и изображением логотипа.  

• Внутри div размещаем изображение символа Brainwave.  

• Присвоение div класса flex и выравнивание по центру.  

• Исправление конического градиента для правильного отображения.  

• Создание ul для отображения значков приложений.  

• Создание li для каждого приложения с изображением значка.  

• Стилизация li для точного отображения на экране.  

• Поворот и масштабирование изображений значков.  

• Присвоение div класса для динамического расположения.  

• Добавление гибкости и фона.  

• Применение рамки для создания эффекта плавающих элементов.  

• Проверка правильного расположения значков.  

• Корректировка поворотов для правильного отображения.  

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

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

• Увеличение маржи для лучшего отображения на мобильных устройствах.  

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

• Завершение раздела о совместной работе.  

• Переход к следующему разделу о сервисах.  

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

• Импорт и использование компонента заголовка.  

• Добавление текста и абзаца для отображения заголовка.  

• Создание раздела для отображения сервисов.  

• Создание раздела с классом relative.  

• Добавление гибкого элемента с пунктирной линией.  

• Настройка высоты и отступов для корректного отображения.  

• На больших устройствах отступ составляет 20 бэр, на сверхбольших - 46 бэр.  

• Это создает пространство для отображения контента.  

• Создаем еще один раздел и рисуем самозакрывающееся изображение.  

• Импортируем изображение и переносим его в службу номер три.  

• Присваиваем изображению классы и размеры.  

• Оформляем div, содержащий изображение, для лучшего отображения.  

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

• Рисуем букву "н" и тег "р" с текстом.  

• Импортируем и отображаем значки служб brainwave.  

• Оформляем элементы с помощью классов и стилей.  

• Создаем текстовую иерархию и стили для тегов "н", "р", "d", "i".  

• Придаем стили li, изображению и тегу p.  

• Создаем несколько карточек с названиями и подзаголовками.  

• Используем изображения меньшего размера для повышения производительности.  

• Добавляем генерирующий элемент для искусственного интеллекта.  

• Позиционируем генерирующий элемент с помощью классов.  

• Настраиваем границы и позиционирование для разных устройств.  

• Проверяем отображение на всех устройствах.  

• Создаем второй сервис, сворачивая первый.  

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

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

• Создаем div с классом "relative" и min-height: 39 rem.  

• Добавляем границу и overflow: hidden.  

• Внутри div создаем еще один div с классом "absolute" и нулевой вставкой.  

• Рисуем изображение для второго сервиса с классами "h-full", "w-full" и "object-cover".  

• Устанавливаем ширину и высоту изображения.  

• Добавляем текст, копируя его из первого сервиса.  

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

• Добавляем градиент bg и отступ.  

• Исправляем положение текста на готовом сайте.  

• Импортируем фото-чат и добавляем его в проект.  

• Используем SVG для отображения двойного пузыря.  

• Добавляем панель видео и сообщение в видеочате.  

• Создаем новый div с классом "padding-4", "bg-n-7" и "overflow: hidden".  

• Внутри div создаем раздел с классом "padding-y-12" и "padding-x-4".  

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

• Создаем ul с классом "flex-items-center" и отображаем значки сервисов.  

• Добавляем стили для значков, чтобы они выглядели динамичными.  

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

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

• Устанавливаем ширину и высоту изображения.  

• Добавляем сообщение видеочата и панель видеозаписей.  

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

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

• Завершаем настройку и тестируем сайт.  

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

• Пример использования дизайна на веб-сайте Clerk.  

• Возможность анимации при наведении курсора на элементы.  

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

• Возможность изменения цветов кнопок в зависимости от модели.  

• Начало работы над разделом ценообразования с использованием JSX.  

• Создание компонента ценообразования с использованием JSX и RAFCE.  

• Добавление класса и идентификатора для раздела ценообразования.  

• Создание div с классом container и z-индексом 2.  

• Создание сферы и добавление звездочек вокруг нее.  

• Настройка позиционирования и размеров изображений.  

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

• Создание компонента слогана с использованием JSX и RAFCE.  

• Настройка макета слогана с использованием SVG-файлов.  

• Центрирование слогана и добавление маржи.  

• Создание компонента прайс-листа и его импорт.  

• Использование дополнительных элементов "левая линия" и "правая линия".  

• Применение прайс-листа под заголовком.  

• Изображение не сохраняется из-за косой черты.  

• Переход к компонентам и ценообразованию.  

• Прайс-лист будет состоять из одной карточки, повторяющейся три раза.  

• Создание div для объединения трех карточек.  

• Использование класса flex gap dash one rem для обертывания карточек.  

• Отображение цен из констант и использование карты для каждого товара.  

• Присвоение идентификатора и класса элементам.  

• Настройка размеров и отступов для карточек.  

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

• Создание визуальной иерархии для карточек.  

• Присвоение цветов и создание класса для четверки.  

• Исправление ошибки с ключевой опорой.  

• Отображение цены элемента в виде точки.  

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

• Настройка внешнего вида и href для кнопки.  

• Отображение ul поверх точечных объектов.  

• Получение каждого объекта и его индекса.  

• Отображение контрольного изображения и функции.  

• Оформление описания с использованием класса body-two.  

• Настройка высоты и отступов для описания.  

• Придание стиля тексту.  

• Присвоение имени класса flex, пунктов по центру, тире h 5,5 rem и маржи - нижняя из шести.  

• У div со знаком доллара будет имя класса h три, а у div с ценой - text- 5,5 rem и начальное значение - none, а также шрифт - bold.  

• Прокрутка вниз до ul и присвоение имени класса flex, пунктирной черточки "центр".  

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

• Выравнивание карточки на мобильном устройстве и увеличение масштаба для лучшего вида.  

• Приподнимание центральной карты и настройка цветов с использованием специальных свойств.  

• Центрирование выплаты и добавление свойства для устройств среднего размера.  

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

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

• Повторное использование слогана и пользовательских элементов.  

• Создание нового компонента "дорожная карта" и импорт его.  

• Присвоение имени класса overflow-hidden и идентификатора roadmap.  

• Создание div с именем класса container и добавлением padding-bottom.  

• Отображение заголовка с тегом "готово к работе" и названием того, над чем работаем.  

• Создание div для контейнера всех четырех карточек дорожной карты.  

• Импорт дорожной карты из констант.  

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

• Отображение изображения с источником grid и добавление z-индекса.  

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

• Добавление тега alt и класса mr из 2,5.  

• Отображение div с именем класса tagline и статусом.  

• Отображение изображения с URL-адресом item dot и добавлением тега item dot title.  

• Завершение раздела дорожной карты с правильным отображением всех элементов.  

• Отображение изображений и текста в виде точек.  

• Присвоение классов для букв "н" и "р".  

• Гибкая схема расположения карточек.  

• Реализация имен классов и стилей для divs.  

• Динамическое изменение макета на разных устройствах.  

• Добавление отступов и округление тире.  

• Определение красочных элементов и применение конического градиента.  

• Стилизация внутренней карты с использованием relative и absolute.  

• Настройка фоновой сетки и flex-элементов.  

• Проблемы с автоматическим закрытием разделов.  

• Решение проблемы через readme и изменение слогана.  

• Проверка макета на рабочем столе и динамичность.  

• Создаем нижний колонтитул с помощью JSX.  

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

• Добавляем div с классом "container flex" и выравниваем по центру на небольших устройствах.  

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

• Формируем ul с классом "flex" и отображаем значки социальных сетей.  

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

• Проверяем работу всех элементов приложения.  

• Размещаем приложение на хостинге, используя npm run build.  

• Разворачиваем оптимизированную производственную сборку и копируем её в панель управления.  

• Проверяем, что все элементы приложения работают корректно.  

• Приложение защищено по протоколу HTTPS.  

• Призыв к изучению курса по JS на jsmastery для дальнейшего погружения в разработку.