Как новичку создать красивый сайт | Подробный урок
Все курсы в одном комплекте:
Создание сайта от А до Я:
В этом уроке мы рассмотрим создание красивого сайта с анимацией заголовка при скролле. Я покажу, как происходит создание таких крутых сайтов и на реальном прмере подробно объясню все моменты и тонкие нюансы разработки. Ключевой особенностью данного примера является реализация анимации заголовка на сайте посредством 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 Что ещё изучить?
ВКонтакте:
Телеграм:
Дзен:
1 view
131
27
1 month ago 00:08:58 1
Как поехать в круиз с Гринвей БЕСПЛАТНО. Путешествия с Гринвей (новые условия)
1 month ago 00:17:00 1
ТАРГОИДСКИЙ ТИТАН, НОВЫЙ ТАРГОИД, НОВЫЕ МАТЕРИАЛ, ЧТО НАХОДИТСЯ В ЦЕНТРЕ ВИХРЯ !? Elite Dangerous
2 months ago 00:13:38 1
КАК ИГРАТЬ В ДОТУ 2 С НУЛЯ | Гайд
2 months ago 00:19:44 1
ЛОВЛЮ на СОЛЕНЫЙ ОГУРЕЦ и МЕТЛУ! ПРИТВОРИЛСЯ новичком НА РЫБАЛКЕ! И ПОЙМАЛ ЖЕЖ! Рыбаки в афиге:)
2 months ago 00:06:34 1
HELLDIVERS 2 - НОВЫЙ АВТОМАТОН С РЕЛЬСОТРОНАМИ, ОБНОВЛЕНИЕ ОТ 5 НОЯБРЯ, КРОССОВЕР С TRENCH CRUSADE
2 months ago 00:00:31 1
☠️НЕ СКИПАЙ ЧАСКУ в Genshin Impact! #shorts #геншинимпакт #геншин
2 months ago 00:06:51 1
ЭТА ПРОГРЕССИЯ ПОМОЖЕТ И НОВИЧКУ И ПРОФИ! Австралийские подтягивания!
2 months ago 00:15:15 1
В чем опасность новичков и как с этим бороться
2 months ago 00:05:14 1
Удивительно простая техника шитья красивой прихватки для кухни. Советы для новичков в шитье
2 months ago 00:12:56 1
💥Warframe: Окина vs Парные Ихоры? Лучшие билды!
2 months ago 00:08:58 1
Как же это Вкусно Отрывной Пирог 2 яйца кефир 3 ст. муки Рецепт Бомба Тесто для новичков Замес 3 мин
2 months ago 00:03:36 1
Пассивный Заработок в Криптовалюте: Реальность? Пассивный Заработок в Криптовалюте
2 months ago 00:18:59 7
HONDA CBF1000. Спокойный литр, который я хотел купить.
2 months ago 00:44:28 1
Руководство для новичков 2024 | MORDHAU Гайд
2 months ago 00:22:00 1
Навигация для трофи-рейдов на Android. AlpineQuest. Загрузка карт, как забить точки.
2 months ago 00:36:11 1
КАК НОВИЧКИ ИНДЮКОВ РАСТИЛИ! СОДЕРЖАНИЕ ИНДЮКОВ ВПЕРВЫЕ.
2 months ago 00:00:16 1
😈CALL OF DUTY MOBILE , 😈 КАЛЛ ОФ ДУТИ МАБАИЛ , 😈ЧТО-ТО ПОДРОСЛИ #SHORTS
2 months ago 00:15:35 1
ТОП лучших идей для малого бизнеса
2 months ago 00:06:38 1
HELLDIVERS 2 - СЕКРЕТЫ ЭСМИНЦА, РИКРОЛЛ В ФАЙЛАХ ИГРЫ, НОВЫЙ БОЕВОЙ ПРОПУСК «БЛЮСТИТЕЛИ ПРАВДЫ»
2 months ago 00:00:47 1
Можно ли воспитать кошку? Кто говорил что собаки не любят кошек? Что творит эта свинья?