Как новичку создать красивый сайт | Подробный урок

Все курсы в одном комплекте: Создание сайта от А до Я: В этом уроке мы рассмотрим создание красивого сайта с анимацией заголовка при скролле. Я покажу, как происходит создание таких крутых сайтов и на реальном прмере подробно объясню все моменты и тонкие нюансы разработки. Ключевой особенностью данного примера является реализация анимации заголовка на сайте посредством CSS transition. Страница урока: Таймкоды: 00:00 Начало урока 01:10 Материалы урока 02:02 Создание файлов проекта 02:58 Подключение файлов к сайту 04:13 Подготовка изображений 04:50 Подготовка слоёв для сайта 08:23 Подключение библиотек 09:47 Техническая HTML разметка 11:21 Приступаем к HTML вёрстке 12:27 Базовая стилизация CSS 13:11 Пипетка для работы с цветом 13:58 Стилизация html, body 14:30 Подготовка к запуску проекта 15:23 Запускаем живой сервер 15:53 Инициализация библиотеки Swiper 17:10 Настройка параметров слайдера 18:08 Настройка скролла мышью 12:28 Вертикальная ориентация Swiper 19:32 Разделяем работу на части 20:29 Создание слайдера изображений 24:21 Настройка скорости перелистывания 24:49 Добавляем Parallax эффект 26:45 Правила создания Параллакс эффекта 28:24 Наполняем остальные слайды контентом 29:01 Исправляем наплыв слайдов 29:50 Добавляем объёмный 3D эффект 35:02 Приступаем к созданию интерфейса UI 36:01 Настройка контейнера для UI 37:24 Планируем сетку Grid на сайте 38:11 Создание верхей линии top-line 38:28 Раработка сетки для сайта 43:20 Подключение шрифтов на сайт 46:58 Проверка подключения шрифтов 47:20 Вёрстка лого, кнопки и меню 50:53 Определение переменных CSS 51:49 Что такое сайт-выворотка 52:58 Вёрстка кнопки (button) 55:01 Доработка сетки (Grid) 1:04:37 CSS стилизация кнопки 1:08:11 Стилизация красивого меню 1:13:41 Кнопка меню с анимацией 1:17:41 Выбор анимации у кнопки 1:18:49 Вёрстка контентной части 1:23:28 Адаптивный заголовок 1:25:01 Стилизация подзаголовка 1:27:15 Разбиваем буквы на части (JS) 1:28:35 CSS стилизация букв 1:31:52 Создание анимации букв 1:41:29 Анимация подзаголовка 1:44:07 CSS Модификатор для кнопки 1:45:36 Touch на мобильных (CSS) 1:48:04 Что ещё изучить? ВКонтакте: Телеграм: Дзен: