В этом видео можно познакомиться с тем:
- Как верстать адаптивно
- Как пользоваться медиа запросами
- Как сделать слайдер
- Как писать анимации на GSAP
- Как делать анимации при доскроливании до элемента
Я попытался всё доступно объяснять. Если что непонятно - пишите
Код -
Посмотреть результат -
0:00 Введение
1:25 Начало работы с редактором
6:03 Live Server расширение для Visual Studio Code
8:12 Знакомство с Figma
9:32 HTML шапки сайта, header
26:30 Расширение Chrome ColorZilla для получения цвета с сайта
29:43 CSS цвет шапки сайта, header
31:34 CSS по умолчанию у тега body
34:07 Как работает свойство box-sizing
38:00 Указывание удобного box-sizing для всех элементов
42:25 HTML Навигационные ссылки шапки сайта
44:45 CSS стили для header элементов
1:35:50 CSS медиа запросы для header элементов
1:52:00 HTML блок intro
2:07:35 CSS блок intro
2:28:23 HTML нижняя часть intro
2:33:20 CSS нижняя часть intro
2:43:30 CSS медиа запросы для intro элементов
3:06:30 HTML блок deals
3:14:20 CSS блок deals
3:39:10 HTML блок vendor
3:54:20 CSS блок vendor
4:19:15 HTML блок teams
4:32:40 Что такое слайдер Swiper, как им пользоваться
4:49:00 CSS блок teams
4:53:22 JS код для инициализации слайдера Swiper
5:06:06 CSS блок teams, стилизация слайдера
5:29:35 JS установка чётных/нечётных классов для элементов слайдера для их раскрашивания
5:59:20 CSS блок teams, стилизация слайдера
6:16:50 блок security
6:37:50 HTML блок footer
6:52:12 CSS блок footer
7:05:20 Как всё анимировать
7:07:00 JS создаём функцию, в которой будут GSAP анимации
7:08:45 Смотрим документацию библиотека для анимаций GSAP
7:11:00 JS Пишем анимации для header ссылок
7:25:00 JS Создание функции для анимации при доскроливании до элемента или если он находится в области видимости пользователя
8:10:00 JS Делаем не глючную анимацию
8:17:40 JS Анимация intro текстов, кнопки и картинки
8:43:10 JS Анимация intro companies
8:52:00 JS Анимация deals__section-header
9:04:40 JS Анимация deals__two
9:10:22 JS Анимация vendor__section-header
9:15:37 JS Анимация teams__title
9:18:10 JS Анимация teams__slider
9:25:14 JS Анимация security__section-header
9:28:15 JS Анимация security__img
9:33:37 JS Анимация footer
9:35:43 CSS добавление каких-то мелких правок
9:54:22 Завершающая речь
Мои контакты:
почта - kamahinmihail@
vk -
telegram -
twitch -
vk play live -
1 view
100
27
2 months ago 03:55:52 1
Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS
3 months ago 00:28:35 2
Chrome DevTools. Полный ГАЙД для Тестировщиков
3 months ago 00:25:11 1
Полный гайд по CSS Grid: адаптивная верстка за пару минут
3 months ago 00:11:36 1
Как написать соцсеть в 2024 году? Установка Node JS и Yarn. Реализация дизайна.
3 months ago 06:38:50 1
Полный курс HTML & CSS за 6 часов
3 months ago 00:35:30 1
#1 Адаптивная верстка сайта с нуля для начинающих | HTML, CSS, Figma практика | Анализ макета
3 months ago 00:05:02 157
Open Server 6.0 - Как создать проект. Как использовать Apache
4 months ago 00:16:13 1
Интенсивный курс адаптивная верстка сайта за 15 минут! html css
4 months ago 01:49:10 1
Как новичку создать красивый сайт | Подробный урок