Создание красивого сайта с анимацией заголовка | HTML CSS JS
Это подробный урок для начинающих по созданию своего красивого сайта. В этом уроке я шаг за шагом объясню и покажу, как создать красивый сайт с нуля самому, используя современные технологии HTML, CSS и JavaScript. Мы на реальном практическом примере создадим несложный сайт с эффектной анимацией при скролле.
Лучшая практика для начинающих:
Создание сайта от А до Я:
Материалы урока (результат, исходники):
Уроки по созданию красивых сайтов:
Таймкоды:
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 Что ещё изучить?
Телеграм:
11 views
353
66
5 months ago 00:01:56 1
С Днем Рождения Женщине Красивая музыкальная Видео открытка Поздравления и пожелания с Днем Рождения
5 months ago 00:02:58 1
Слайд-шоу из фотографий с музыкой - Сделать онлайн очень просто за 5 мин.
5 months ago 00:04:17 1
ЦВЕТЫ из ЛЕНТ. Ribbon Flowers DIY
5 months ago 01:03:03 1
Самая красивая мелодия в мире...ВОССТАНОВЛЕНИЕ НЕРВНОЙ СИСТЕМЫ! До слез красивая мелодия! #2024
5 months ago 00:17:48 1
2 серия. Что необходимо знать о пчелиной семье
5 months ago 00:16:34 1
Домашняя ферма от МОИ perepela. Горячая штучка сегодня по акции. Минус 20 от #моиперепела
5 months ago 00:00:59 1
Футаж Солнце и вода. Футажи для видеомонтажа. Блики на воде. Солнечная дорожка на воде. Видеофутажи
5 months ago 00:01:15 1
Трогательная до слёз музыка. Лучшее поздравление с днём рождения для любимой дочери.
5 months ago 00:01:00 1
ФУНДАМЕНТ ДОМА И ПРУД: чревато? Создание декоративного пруда с рыбами у дома
5 months ago 00:14:29 1
Обзор новинок – большая поставка бусин из гематита (геметина)
5 months ago 00:17:23 1
The Bebop, часть 3
5 months ago 00:03:37 1
Красивые девушки божественно поют под гусли и ханг / Psaltery, глюкофон, фольклор
5 months ago 00:28:42 1
Салфеткa к Пасхе в виде курочки крючком
5 months ago 00:27:22 1
Мысли о прекрасном. Специалист по организации русской усадьбы Елена Маньенан. Часть 3
5 months ago 00:33:21 1
Симонов монастырь (место погребения героев Куликовской битвы-Пересвета и Осляби)
5 months ago 00:00:45 1
10 апреля - День Братьев и Сестер! Цените друг друга! С национальным днем братьев и сестер.
5 months ago 00:16:33 1
Иван Айвазовский картины, жизнь и творчество. обзор.
5 months ago 00:01:44 1
С ДНЕМ МАТЕРИ💐До Слез Трогательная Песня! Супер Красивое и Нежное Поздравление Самой Лучшей Маме!
5 months ago 00:10:37 1
НАСТРОЙ НА ЧУДЕСА. Утренний ритуал от Ады Кондэ. #АдаКондэНастрой
5 months ago 00:15:05 1
НОВЫЕ ТРЕНДЫ ВЕСНЫ 2024-2025💕 СОВРЕМЕННЫЕ ОБРАЗЫ ДЛЯ ДАМ 50+💕
5 months ago 00:17:57 1
Омар Хайям! Гениальные Рубаи, Афоризмы, Яркие Высказывания и Цитаты!
5 months ago 00:00:38 1
Что он держит в руках? 😯
5 months ago 00:05:08 1
Он был однолюбом и в личной жизни, и в творчестве. Актер Геннадий Фролов