В этом видео можно познакомиться с тем:
- Как верстать адаптивно
- Как пользоваться медиа запросами
- Как сделать слайдер
- Как писать анимации на 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
81
22
4 months ago 05:05:31 1
Адаптивная верстка сайта с SCSS и JS. Объясняю по шагам. CSS Grid, БЭМ. Макет LoftHouse
4 months ago 00:16:13 1
Интенсивный курс адаптивная верстка сайта за 15 минут! html css
4 months ago 00:41:17 1
CSS EM REM и прочие единицы измерения CSS. Что когда использовать? Подробное объяснение на практике.
4 months ago 04:29:35 1
Адаптивная верстка интернет магазина с НУЛЯ. Выполняю реальный заказ. Верстка сайта за $150
4 months ago 00:11:41 1
Анализируем новый макет в #Figma глазами разработчика
4 months ago 00:35:13 1
Создание потрясающей галереи на HTML, CSS и JavaScript (CSS-анимация, Blur, Parallax, Gradient)
4 months ago 00:13:02 1
Обзор Flutter | Идем в Web c WebAssembly и Макросы | Что показали на Google I/O ?
5 months ago 01:39:26 1
Верстка сайта для начинающих. Подробное объяснения. Часть 1 Подготовка и верстка шапки на HTML и CSS
5 months ago 04:20:05 1
Основы вёрстки HTML+CSS | Базовые принципы работы с CSS и HTML на практике
5 months ago 00:01:00 1
Адаптивность без media (clamp) #shorts #adaptive #webpage #htmlcss #javascript #css3 #coder #кодинг
5 months ago 01:07:20 1
🔥CSS GRID СЕТКА 🎉 САМЫЙ ПОНЯТНЫЙ И ПОЛНЫЙ УРОК! Верстка для новичков
5 months ago 00:10:16 1
#3 Плагин Perfect Pixel, Верстаем по макету из Figma
5 months ago 11:55:00 1
Frontender[1.0] - Модуль 1 | Курс по FRONTEND | HTML, CSS, SCSS, GIT, NPM, SEO, A11Y | УРОКИ [2-55]
6 months ago 04:42:31 35
Верстка сайта HTML SCSS из Figma на Gulp сборке. Проект Modimal. Адаптивная верстка. 4K
6 months ago 00:43:27 1
Web - 24 - Адаптивная CSS верстка. Адаптация HTML страницы под экран телефона, планшета, монитора ПК
6 months ago 00:18:11 3
ПЛАН РАЗВИТИЯ ФРОНТЕНД РАЗРАБОТЧИКА. ЭФФЕКТИВНОЕ ОБУЧЕНИЕ HTML CSS JAVASCRIPT
6 months ago 00:12:55 8
Базовый MVP клиента ChatGPT
6 months ago 01:05:51 1
Адаптивная верстка одностраничного сайта на чистом HTML & CSS || Travel Agency Website HTML&CSS
6 months ago 03:38:46 1
[Жесть!] ~4 часа верстки лендинга из Figma на HTML/CSS/Bootstrap 4 с нуля!
6 months ago 00:14:37 1
Adaptive layout (Адаптивная верстка) в Android Studio
6 months ago 00:18:27 1
Адаптивные изображения. Практические приемы верстки картинок. CSS object-fit HTML picture.
6 months ago 00:15:02 1
#1 Сетка Bootstrap 5 для начинающих | Быстрая верстка сайта при помощи колоночной сетки
7 months ago 01:57:22 1
🔥 Верстка сайта с нуля для начинающих | HTML, CSS, VS Code, PSD
7 months ago 00:11:29 2
Нужно ли делать 320пх? Сколько адаптивных макетов дизайна лучше показывать? Дизайн. Верстка. Фриланс