Проект React JS | Создание и развертывание полного адаптивного веб-сайта в пошаговом руководстве React

• Приветствие и анонс урока по созданию адаптивного веб-сайта с помощью React.js.  

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

• Демонстрация адаптивности веб-страницы на разных устройствах.  

• Меню навигации и значок воспроизведения видео.  

• Контактная форма и отправка запроса администратору.  

• Благодарность подписчикам за создание предыдущего проекта.  

• Рекомендация курса по JavaScript для новичков в React.  

• Создание проекта с помощью npm и открытие папки в редакторе кода VS.  

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

• Очистка HTML-файла и удаление ненужных файлов.  

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

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

• Добавление свойств CSS для навигационной панели и индекса.  

• Изменение шрифта текста с помощью Google Fonts.  

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

• Скопируйте файл шрифта и вставьте его в редактор VS Code.  

• Добавьте отступ 4 пикселя сверху и снизу, 0 пикселей слева и справа.  

• Используйте display flex для горизонтального выравнивания и z-index для перекрытия элементов.  

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

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

• Установите размер шрифта 16 пикселей.  

• Используйте тег button и добавьте класс btn.  

• Установите фон, цвет текста, отступ, размер шрифта и радиус границы.  

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

• Создайте папку "Герой" и файл hero.jsx.  

• Импортируйте файл css и добавьте класс hero.  

• Установите ширину 100%, минимальную высоту и фон с изображением.  

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

• Установите белый цвет фона и удалите черный цвет на панели навигации.  

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

• Добавьте пробел слева и справа от текста.  

• Выровняйте текст по центру и установите максимальную ширину.  

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

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

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

• Уменьшите размер значка и оставьте пространство между текстом и значком.  

• Создайте новую папку "Программы" в папке компонентов.  

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

• Импортируйте CSS-файл в JSX-файл с помощью инструкции import.  

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

• Добавьте тег img и импортируйте изображения из папки "Ресурсы".  

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

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

• Исправьте ошибку "программы.css" и обновите веб-страницу.  

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

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

• Добавьте контейнер с классом "container" для добавления пробелов слева и справа.  

• Переместите программы в этот контейнер.  

• Добавьте еще один раздел для добавления пробелов.  

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

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

• Наложите значки и текст на изображения с помощью CSS.  

• Центрируйте значки и текст.  

• Скройте содержимое при наведении курсора.  

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

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

• Импортируйте CSS-файл и добавьте класс "title".  

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

• Добавьте выравнивание текста по центру и цвет.  

• Установите размер шрифта и вес шрифта.  

• Добавьте отступы и CSS-свойства для второй части заголовка.  

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

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

• В компоненте заголовка передаем реквизиты через props.  

• Создаем новый компонент "О программе".  

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

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

• Добавляем отступ и функцию гибкого отображения.  

• Определяем ширину левой и правой колонки.  

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

• Применяем CSS для подзаголовка, названия и описания.  

• Добавляем вес шрифта, размер шрифта и цвет.  

• Устанавливаем отступы и максимальную ширину.  

• Добавляем контейнер с именем класса dark nav.  

• Применяем темный фон и переход.  

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

• Используем переменную состояния sticky.  

• Применяем эффект использования для динамического добавления класса dark nav.  

• Устанавливаем значение sticky в зависимости от положения прокрутки.  

• Объяснение оператора events trinity и его использования в JavaScript.  

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

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

• Добавление класса контейнера и динамического класса dark nav.  

• Проверка значения sticky и применение класса dark nav при прокрутке.  

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

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

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

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

• Добавление класса campus и галереи для фотографий.  

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

• Выравнивание изображений и добавление кнопки "Подробнее".  

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

• Изменение цвета фона кнопки для отображения значка.  

• Завершение создания раздела "Кампус".  

• Добавление заголовка "Отзывы" и подзаголовка "Что говорит студент".  

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

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

• Импорт значков "Далее" и "Назад".  

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

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

• Сохраните изменения и вернитесь на веб-страницу.  

• Добавьте свойства CSS для раздела отзывов.  

• Создайте класс для кнопок "Далее" и "Назад".  

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

• Исправьте цвет фона для значков.  

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

• Добавьте ползунок и теги ul и li.  

• Создайте div для отображения информации о пользователе.  

• Добавьте изображение профиля, имя пользователя и его назначение.  

• Дублируйте тег li для отображения четырех пользователей.  

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

• Добавьте свойства CSS для списков.  

• Добавьте скрытый overflow и гибкость отображения для ul.  

• Используйте overflow-hidden для отображения только двух списков.  

• Добавьте свойства CSS для элементов списка.  

• Добавьте box-shadow и радиус границы для элементов списка.  

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

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

• Добавьте логику для кнопок "Далее" и "Назад".  

• Добавьте функции onclick для кнопок "Далее" и "Назад".  

• Скопируйте и добавьте логику для кнопок "Назад".  

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

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

• Применяем логику для перемещения тега ul влево или вправо.  

• Используем свойство transform translate x для перемещения тега ul.  

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

• Применяем логику к тегу ul с помощью onclick.  

• Выбираем тег ul с помощью useref.  

• Определяем начальное значение translate x.  

• Применяем логику для кнопки "Далее" и "Назад".  

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

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

• Создаем компонент "Контакты" и добавляем контактную форму.  

• Создаем две колонки для контактной информации и формы.  

• Добавляем текст и контактную информацию в левую колонку.  

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

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

• Центрируем изображение и текст.  

• Настраиваем CSS для элементов списка и формы.  

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

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

• Сохраняем изменения и проверяем наличие значков.  

• Добавляем свойства CSS для значков.  

• Оформляем левую часть раздела контактов.  

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

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

• Делаем поля обязательными для заполнения.  

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

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

• Добавляем свойства CSS для оформления формы.  

• Проверяем, что поля ввода выглядят корректно.  

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

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

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

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

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

• Проверяем отображение нижнего колонтитула на веб-странице.  

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

• Устанавливаем компонент нижнего колонтитула в файле jsx.  

• Добавляем свойства CSS для нижнего колонтитула, включая отступ, гибкое отображение и выравнивание.  

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

• Выравниваем текст по горизонтали, используя ul и li.  

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

• Устанавливаем пакет react-scroll с помощью npm.  

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

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

• Добавляем тег link в навигационную панель navbar.  

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

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

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

• Уменьшаем пространство слева и справа при уменьшении размера экрана.  

• Уменьшаем размер логотипа и интервал между элементами списка.  

• Уменьшаем расстояние между элементами списка и размер логотипа.  

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

• Уменьшаем отступ между пикселем и нулем.  

• Изменяем положение навигационного ul на фиксированное.  

• Добавляем фон и z-индекс -1.  

• Устанавливаем ширину 200 пикселей и отступы сверху 70 пикселей.  

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

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

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

• Устанавливаем отступы 25 пикселей и 40 пикселей.  

• Добавляем иконку меню в файл jsx.  

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

• Скрытие значка меню на больших устройствах.  

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

• Устанавливаем ширину значка меню 30 пикселей и курсор как указатель.  

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

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

• Добавляем свойство onclick для значка меню.  

• Объявляем функцию переключения меню.  

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

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

• Инициализируем состояние пользователя значением false.  

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

• Обновляем название класса на основе состояния мобильного меню.  

• Панель навигации адаптивна для мобильных телефонов и планшетов.  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Используем ul и li для создания списка.  

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

• Веб-сайт адаптирован для мобильных телефонов и планшетов.  

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

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

• Импортирован файл CSS.  

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

• Видеофайл перемещен в папку проекта src assets.  

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

• Компонент "видеоплеер" добавлен в приложение.  

• Видеоплеер установлен в центре веб-страницы.  

• Добавлен темный слой с непрозрачностью 90% и z-индекс 100.  

• Видеоплеер и видео имеют фиксированную позицию и ширину 100%.  

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

• Видео скрывается при нажатии на значок воспроизведения.  

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

• В компоненте app.jsx добавлено состояние playerstate.  

• Функция setplaystate передается в компонент about.  

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

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

• При значении true видео отображается, при false - скрывается.  

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

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

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

• Добавляем e-точечную мишень для закрытия плеера при нажатии на видео.  

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

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

• Завершаем создание веб-сайта колледжа или университета с помощью React.js.  

• Создаем сборку веб-сайта с помощью команды npm run build.  

• Загружаем ресурсы и HTML-файл на веб-хостинг.  

• Выбираем тарифный план и продолжительность хостинга.  

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

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

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

• Перемещаем файлы в общедоступную папку HTML.  

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

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

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

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