README.md

Оригинальная статья находится на сайте https://practical-web.ru

ARTICLE.html

<h1 id="серия-видео-где-будем-делать-адаптивную-кроссбраузерную-вёрстку-баннера-с-разными-анимациями-видео-записью-внутри-букв-и-всплывающую-форму">Серия видео где будем делать адаптивную, кроссбраузерную вёрстку баннера с разными анимациями, видео записью внутри букв и всплывающую форму</h1>
<h2 id="✅-в-этой-серии-уроков-по-frontend-разработке-будет-рассмотрено">&#9989; В этой серии уроков по frontend разработке будет рассмотрено:</h2>
<h3 id="-как-сделать-видео-внутри-текста-чтобы-на-фоне-за-текстом-ещё-была-картинка-движущаяся-от-движений-мыши">&#128073; Как сделать видео внутри текста чтобы на фоне за текстом ещё была картинка движущаяся от движений мыши</h3>
<h3 id="-как-адаптировать-вёрстку-для-osx-safari-12-и-ios-safari-12">&#128073; Как адаптировать вёрстку для OSx Safari 12 и iOS Safari 12</h3>
<h3 id="-как-адаптировать-вёрстку-для-мобильных-разрешений">&#128073; Как адаптировать вёрстку для мобильных разрешений</h3>
<h3 id="-как-сделать-анимации-на-чистом-scss-и-javascript">&#128073; Как сделать анимации на чистом SCSS и JavaScript</h3>
<h3 id="-как-сделать-адаптацию-вёрстки-к-проверкам-google-page-speed">&#128073; Как сделать адаптацию вёрстки к проверкам Google Page Speed</h3>
<h2 id="✅-исходный-код-хранится-на-github">&#9989; Исходный код хранится на GitHub</h2>
<p><a target="_blank" href="https://github.com/artemsites/mars" title="Открыть в новой вкладке">https://github.com/artemsites/mars</a></p>
<h2 id="✅-живая-демонстрация-здесь">&#9989; Живая демонстрация здесь</h2>
<p><a target="_blank" href="https://practical-web.ru/demo/lessons/frontend/mars/" title="Открыть в новой вкладке">https://practical-web.ru/demo/lessons/frontend/mars/</a></p>
<h2 id="0-вступление-демонстрация-что-будем-делать-и-как-будет-проходить-съёмка">0. Вступление-демонстрация: что будем делать и как будет проходить съёмка</h2>
<p>[[insertYoutube?code=pbvwDSsftmo]]   </p>
<h2 id="1-демонстрация-дизайна-баннера-с-видео-внутри-текста--вокруг-текста-фоновое-изображение--множество-анимаций--форма-обратной-связи">1. Демонстрация дизайна: баннера с видео внутри текста + вокруг текста фоновое изображение + множество анимаций + форма обратной связи</h2>
<p>[[insertYoutube?code=dM2MbAj2A2o]]  </p>
<h2 id="2-подготовка-среды-сборщик-vitejs-и-scss-для-вёрстки">2. Подготовка среды (сборщик vite.js) и scss для вёрстки</h2>
<p>[[insertYoutube?code=kk6meuS3Rpg]]  </p>
<h2 id="3-вёрстка-шапки-для-пк-мониторная-версия">3. Вёрстка шапки для ПК, мониторная версия</h2>
<p>[[insertYoutube?code=2fQcUzIw-BY]] </p>
<h2 id="4-вёрстка-линии-и-текста-баннера-без-видео-мониторная-версия">4. Вёрстка линии и текста баннера (без видео), мониторная версия</h2>
<p>[[insertYoutube?code=rgfLXjAzQQQ]] </p>
<h2 id="5-установка-видео-на-буквы-с-фоновым-изображением-на-весь-экран-гуглёжка">5. Установка видео на буквы с фоновым изображением на весь экран (гуглёжка)</h2>
<p>[[insertYoutube?code=K3r0XDkoSu8]]   </p>
<h2 id="6-ещё-попытка-установки-видео-в-качестве-фона-на-буквы">6. Ещё попытка установки видео в качестве фона на буквы</h2>
<p>[[insertYoutube?code=GP8VS_huJyY]]   </p>
<h2 id="7-ещё-попытка-сделать-фон-внутри-текста-в-соответствии-с-фоном-на-всей-странице">7. Ещё попытка сделать фон внутри текста в соответствии с фоном на всей странице</h2>
<p>[[insertYoutube?code=mLntiWXCAMA]]   </p>
<h2 id="8-останавливаемся-на-текущей-реализации-видео-в-тексте">8. Останавливаемся на текущей реализации видео в тексте</h2>
<p>[[insertYoutube?code=GG48mU5PClE]]   </p>
<h2 id="9-создание-каркаса-попапа-который-появляется-из-кнопки-вызова-попапа">9. Создание каркаса попапа который появляется из кнопки вызова попапа</h2>
<p>[[insertYoutube?code=vX0zYaNSemk]]  </p>
<h2 id="10-вёрстка-формы-заказа-билетов-внутри-попапа">10. Вёрстка формы заказа билетов внутри попапа</h2>
<p>[[insertYoutube?code=44CjiJOIgO4]]  </p>
<h2 id="11-правка-бага-с-шрифтом-после-смены-шрифта-на-cyrillic-с-latin">11. Правка бага с шрифтом после смены шрифта на cyrillic с latin</h2>
<p>[[insertYoutube?code=9jqzQO3ak5k]]  </p>
<h2 id="12-подключение-vanilla-calendar-pro-к-input-форме-выбора-даты-и-стилизация-календаря">12. Подключение vanilla calendar pro к input форме выбора даты и стилизация календаря</h2>
<p>[[insertYoutube?code=XVhkEimB0Ao]]</p>
<h2 id="13-изменение-input-числа-колесом-мыши-и-числами-с-клавиатуры">13. Изменение input числа колесом мыши и числами с клавиатуры</h2>
<p>[[insertYoutube?code=YYZCUDjhAcU]]  </p>
<h2 id="14-написание-js-скрипта-отправки-формы-на-сервер-который-отрпавит-письмо-на-почту--анимация-успешн">14. Написание js скрипта отправки формы на сервер который отрпавит письмо на почту + анимация успешн</h2>
<p>[[insertYoutube?code=b_YFm6U4ysc]]</p>
<h2 id="15-делаем-всё-таки-видео-внутри-текста-с-единым-фоновым-изорбражением-за-текстом-и-на-весь-экран">15. Делаем всё таки видео внутри текста с единым фоновым изорбражением за текстом и на весь экран</h2>
<p>[[insertYoutube?code=8ekFdull3UI]]</p>
<h2 id="16-создание-анимаций-движения-космоса-появления-декорной-линии-появление-заголовков-движение-дымки-в-космосе">16. Создание анимаций: движения космоса, появления декорной линии, появление заголовков, движение дымки в космосе</h2>
<p>[[insertYoutube?code=bO2X0iOvcH4]]</p>
<h2 id="17-анимация-движения-космоса-в-зависимости-от-движения-мыши-по-экрану">17. Анимация движения космоса в зависимости от движения мыши по экрану</h2>
<p>[[insertYoutube?code=ZPj-qPFxYxA]]</p>
<h2 id="18-переделываение-текста-в-svg-как-mask-для-video-что-позволило-избавиться-от-багов-mix-blend-mode">18. Переделываение текста в svg как mask для video что позволило избавиться от багов mix blend mode</h2>
<p>[[insertYoutube?code=TEBOU74us7k]]</p>
<h2 id="19-подгонка-анимаций-в-вёрстке-к-анимациям-в-макете">19. Подгонка анимаций в вёрстке к анимациям в макете</h2>
<p>[[insertYoutube?code=fn4NilAEpL0]]</p>
<h2 id="201-установка-старой-версии-firefox-браузера-установка-плагина-autoprefixer-в-vitejs-и-его-настройка-проверка-вёрстки-и-анимаций-firefox-91-версии">20.1 Установка старой версии firefox браузера, установка плагина autoprefixer в vitejs и его настройка, проверка вёрстки и анимаций firefox 91 версии</h2>
<p>[[insertYoutube?code=d9OleQKgVt0]]</p>
<h2 id="202-кроссбраузероность-пробую-затестить-браузер-opera-верссии-78-в-manjaro-linux-неуспешно">20.2 Кроссбраузероность: пробую затестить браузер opera верссии 78 в manjaro linux неуспешно</h2>
<p>[[insertYoutube?code=T_nysmdmIVY]]</p>
<h2 id="203-кроссбраузероность-установка-браузера-opera-78-на-windows">20.3 Кроссбраузероность: установка браузера opera 78 на windows</h2>
<p>[[insertYoutube?code=yD5GxNwyPzg]]</p>
<h2 id="204-кроссбраузероность-проверка-вёрстки-в-opera-78-и-firefox-91">20.4 Кроссбраузероность: проверка вёрстки в opera 78 и firefox 91</h2>
<p>[[insertYoutube?code=YkPz6DdzrPk]]</p>
<h2 id="205-кроссбраузероность-неудачная-попытка-найти-microsoft-edge-92">20.5 Кроссбраузероность: неудачная попытка найти microsoft edge 92</h2>
<p>[[insertYoutube?code=n1PNpgHrwjE]]</p>
<h2 id="206-кроссбраузероность-скачка-chrome-93">20.6 Кроссбраузероность: скачка chrome 93</h2>
<p>[[insertYoutube?code=AFwUzBnVyR8]]</p>
<h2 id="207-кроссбраузероность-проверка-вёрстки-на-chrome-93-и-правки-скрытия-календаря-при-нажатии-на-выбор-дня">20.7 Кроссбраузероность: проверка вёрстки на chrome 93 и правки скрытия календаря при нажатии на выбор дня</h2>
<p>[[insertYoutube?code=IluoxWp1oXQ]]</p>
<h2 id="208-кроссбраузероность-пытаюсь-найти-edge-92">20.8 Кроссбраузероность: пытаюсь найти edge 92</h2>
<p>[[insertYoutube?code=Z39_IpCI5l8]]</p>
<h2 id="209-кроссбраузероность-итоги-тестирования-старых-браузеров">20.9 Кроссбраузероность: итоги тестирования старых браузеров</h2>
<p>[[insertYoutube?code=dEhRYJNRPbY]]</p>
<h2 id="21-pixel-perfect-проверка-вёрстки-главного-экрана-и-подгонка">21. Pixel perfect: проверка вёрстки главного экрана и подгонка</h2>
<p>[[insertYoutube?code=iHTTO8PWLE0]]</p>
<h2 id="22-адаптация-header-к-ноутбуку-планшету-и-мобильному-добавление-бургера-и-крестика-закрытия-выпадающего-меню">22. Адаптация header к ноутбуку, планшету и мобильному. Добавление бургера и крестика закрытия выпадающего меню</h2>
<p>[[insertYoutube?code=3cdQKlrYWRY]]</p>
<h2 id="23-pixel-perfect-проверка-вёрстки-попапа-и-подгонка-проверка-главного-экрана-и-подгонка">23. Pixel perfect: проверка вёрстки попапа и подгонка, проверка главного экрана и подгонка</h2>
<p>[[insertYoutube?code=IS1fDelRZ-w]]</p>
<h2 id="24-неудачно-адаптация-видео-в-тексте-под-мобилу">24. !Неудачно: адаптация видео в тексте под мобилу</h2>
<p>[[insertYoutube?code=j9gSjMvxKOc]]</p>
<h2 id="25-адаптация-баннера-с-видео-в-тексте-к-мобильной-версии--адаптация-svg-clippath-к-динамическим-размерам--высчитывание-высоты-декора">25. Адаптация баннера с видео в тексте к мобильной версии + адаптация SVG clipPath к динамическим размерам + высчитывание высоты декора</h2>
<p>[[insertYoutube?code=YKH2zAB41bA]]</p>
<h2 id="26-подведение-итогов-адаптации-шапки-и-баннера-и-небольшие-правки-адаптации-в-шапке">26. Подведение итогов адаптации шапки и баннера и небольшие правки адаптации в шапке</h2>
<p>[[insertYoutube?code=aafWinCsAOg]]</p>
<h2 id="27-адаптация-попапа-к-мобильным-разрешениям-экрана">27. Адаптация попапа к мобильным разрешениям экрана</h2>
<p>[[insertYoutube?code=LGJrSV6njh0]]</p>
<h2 id="281-google-page-speed-раздел-performance---оптимизации-подключение-нескольких-webp-в-background">28.1 Google page speed: раздел Performance   оптимизации: подключение нескольких webp в background</h2>
<p>[[insertYoutube?code=_uR4PBxo3ag]]</p>
<h2 id="282-google-page-speed-оптимизация-в-разделе-accessibility">28.2 Google page speed: оптимизация в разделе Accessibility</h2>
<p>[[insertYoutube?code=sj2ya08-74w]]</p>
<h2 id="283-google-page-speed-небольшая-оптимизация-в-разделе-seo">28.3 Google page speed: небольшая оптимизация в разделе SEO</h2>
<p>[[insertYoutube?code=qIGK84kYaqE]]</p>
<h2 id="284-google-page-speed-раздел-performance---включение-кэша-на-виртуальном-хостинге-beget">28.4 Google page speed: раздел Performance   включение кэша на виртуальном хостинге beget</h2>
<p>[[insertYoutube?code=gx22WjlQ9P0]]</p>
<h2 id="285-google-page-speed---раздел-performance---включение-такого-кэширования-на-виртуальном-хостинге-beget-чтобы-понравиться-гуглу">28.5 Google page speed - раздел Performance - включение такого кэширования на виртуальном хостинге beget, чтобы &quot;понравиться&quot; гуглу</h2>
<p>[[insertYoutube?code=0eIPa3sPAXQ]]</p>
<h2 id="286-google-page-speed-раздел-performance---результат-включения-кэширования-на-виртуальном-хостинг">28.6 Google page speed: раздел Performance   результат включения кэширования на виртуальном хостинг</h2>
<p>[[insertYoutube?code=q159N22ALiQ]]</p>
<h2 id="287-google-page-speed---раздел-performance---обрезка-видеозаписи-которая-будет-внутри-текста-проигрываться">28.7 Google page speed - раздел Performance - обрезка видеозаписи которая будет внутри текста проигрываться</h2>
<p>[[insertYoutube?code=ErRN5ZgQhd0]]</p>
<h2 id="288-google-page-speed---раздел-performance---установка-на-прослушиватели-колеса-мыши-режима-passive-true">28.8 Google page speed - раздел Performance - установка на прослушиватели колеса мыши режима &quot;passive: true&quot;</h2>
<p>[[insertYoutube?code=qpFI485vC7E]]  </p>
<h2 id="29-правки-некоторых-недочётов-по-вёрстке-и-выбору-даты-в-календаре">29. Правки некоторых недочётов по вёрстке и выбору даты в календаре</h2>
<p>[[insertYoutube?code=3rQnV2_rylk]]  </p>
<h2 id="301-кроссбраузерность-safari-12-налаживание-отступов-в-меню-и-в-форме-для-браузера">30.1 Кроссбраузерность: Safari 12: налаживание отступов в меню и в форме для браузера</h2>
<p>[[insertYoutube?code=jikwKZ0j2B8]]  </p>
<h2 id="302-кроссбраузерность-safari-12-замена-datepciker-на-другой-так-как-найдены-баги">30.2 Кроссбраузерность: Safari 12: замена datepciker на другой, так как найдены баги</h2>
<p>[[insertYoutube?code=Qlcis6EmZnw]] </p>
<h2 id="303-кроссбраузерность-safari-12-mask-image-вместо-clip-path">30.3 Кроссбраузерность: Safari 12: mask image вместо clip path</h2>
<p>[[insertYoutube?code=JwF8jEF9SYA]] </p>
<h2 id="304-кроссбраузерность-safari-12-перевод-анимаций-с-rem-в-px-чтобы-верные-размеры-были">30.4 Кроссбраузерность: Safari 12: перевод анимаций с rem в px чтобы верные размеры были</h2>
<p>[[insertYoutube?code=hRK9KaoR2H8]] </p>
<h2 id="305-кроссбраузерность-safari-12-замена-gap-на-margin">30.5 Кроссбраузерность: Safari 12: замена gap на margin</h2>
<p>[[insertYoutube?code=oRf-S05-Dss]] </p>
<h2 id="306-кроссбраузерность-safari-12-перезапуск-анимации-потому-что-в-сафари-не-работает-динамический">30.6 Кроссбраузерность: Safari 12: перезапуск анимации потому что в сафари не работает динамический</h2>
<p>[[insertYoutube?code=20bgm7uzSNw]] </p>
<h2 id="307-кроссбраузерность-safari-12-сделаем-анимацию-position-absolute-чтобы-не-скакала">30.7 Кроссбраузерность: Safari 12: сделаем анимацию position absolute чтобы не скакала</h2>
<p>[[insertYoutube?code=Pri4AJUlADc]] </p>
<h2 id="308-кроссбраузерность-safari-12-на-ios-проверка-вёрстки">30.8 Кроссбраузерность: Safari 12 на iOS: проверка вёрстки</h2>
<p>[[insertYoutube?code=lseeLQOx55M]] </p>
<h2 id="31-сжатие-видео-файлов-для-экономии-трафика">31. Сжатие видео файлов для экономии трафика</h2>
<p>[[insertYoutube?code=R48VmJVtx8o]] </p>
<h2 id="32-автоскрытие-datepicker-при-выборе-даты">32. Автоскрытие datepicker при выборе даты</h2>
<p>[[insertYoutube?code=elEPpKvczGE]] </p>
<h2 id="33-настройки-поведения-и-вёрстки-datepicker">33. Настройки поведения и вёрстки datepicker</h2>
<p>[[insertYoutube?code=t3sWGJl2W1o]] </p>
<h2 id="34-кроссбраузерность-safari-12-и-safari-12-на-ios--firefox-91-проверка-datepicker-вёрстки-и-поведения">34. Кроссбраузерность: Safari 12 и Safari 12 на iOS + Firefox 91: проверка datepicker вёрстки и поведения</h2>
<p>[[insertYoutube?code=VsEalS16NP4]] </p>
<h2 id="35-исправление-бага-анимации-космоса-на-js-при-смене-ширины-браузера">35. Исправление бага анимации космоса на js при смене ширины браузера</h2>
<p>[[insertYoutube?code=3yNbfy2svHk]]</p>

ARTICLE.md

Серия видео где будем делать адаптивную, кроссбраузерную вёрстку баннера с разными анимациями, видео записью внутри букв и всплывающую форму

✅ В этой серии уроков по frontend разработке будет рассмотрено:

👉 Как сделать видео внутри текста чтобы на фоне за текстом ещё была картинка движущаяся от движений мыши

👉 Как адаптировать вёрстку для OSx Safari 12 и iOS Safari 12

👉 Как адаптировать вёрстку для мобильных разрешений

👉 Как сделать анимации на чистом SCSS и JavaScript

👉 Как сделать адаптацию вёрстки к проверкам Google Page Speed

✅ Исходный код хранится на GitHub

https://github.com/artemsites/mars

✅ Живая демонстрация здесь

https://practical-web.ru/demo/lessons/frontend/mars/

0. Вступление-демонстрация: что будем делать и как будет проходить съёмка

[[youtube id="pbvwDSsftmo"]]

1. Демонстрация дизайна: баннера с видео внутри текста + вокруг текста фоновое изображение + множество анимаций + форма обратной связи

[[youtube id="dM2MbAj2A2o"]]

2. Подготовка среды (сборщик vite.js) и scss для вёрстки

[[youtube id="kk6meuS3Rpg"]]

3. Вёрстка шапки для ПК, мониторная версия

[[youtube id="2fQcUzIw-BY"]]

4. Вёрстка линии и текста баннера (без видео), мониторная версия

[[youtube id="rgfLXjAzQQQ"]]

5. Установка видео на буквы с фоновым изображением на весь экран (гуглёжка)

[[youtube id="K3r0XDkoSu8"]]

6. Ещё попытка установки видео в качестве фона на буквы

[[youtube id="GP8VS_huJyY"]]

7. Ещё попытка сделать фон внутри текста в соответствии с фоном на всей странице

[[youtube id="mLntiWXCAMA"]]

8. Останавливаемся на текущей реализации видео в тексте

[[youtube id="GG48mU5PClE"]]

9. Создание каркаса попапа который появляется из кнопки вызова попапа

[[youtube id="vX0zYaNSemk"]]

10. Вёрстка формы заказа билетов внутри попапа

[[youtube id="44CjiJOIgO4"]]

11. Правка бага с шрифтом после смены шрифта на cyrillic с latin

[[youtube id="9jqzQO3ak5k"]]

12. Подключение vanilla calendar pro к input форме выбора даты и стилизация календаря

[[youtube id="XVhkEimB0Ao"]]

13. Изменение input числа колесом мыши и числами с клавиатуры

[[youtube id="YYZCUDjhAcU"]]

14. Написание js скрипта отправки формы на сервер который отрпавит письмо на почту + анимация успешн

[[youtube id="b_YFm6U4ysc"]]

15. Делаем всё таки видео внутри текста с единым фоновым изорбражением за текстом и на весь экран

[[youtube id="8ekFdull3UI"]]

16. Создание анимаций: движения космоса, появления декорной линии, появление заголовков, движение дымки в космосе

[[youtube id="bO2X0iOvcH4"]]

17. Анимация движения космоса в зависимости от движения мыши по экрану

[[youtube id="ZPj-qPFxYxA"]]

18. Переделываение текста в svg как mask для video что позволило избавиться от багов mix blend mode

[[youtube id="TEBOU74us7k"]]

19. Подгонка анимаций в вёрстке к анимациям в макете

[[youtube id="fn4NilAEpL0"]]

20.1 Установка старой версии firefox браузера, установка плагина autoprefixer в vitejs и его настройка, проверка вёрстки и анимаций firefox 91 версии

[[youtube id="d9OleQKgVt0"]]

20.2 Кроссбраузероность: пробую затестить браузер opera верссии 78 в manjaro linux неуспешно

[[youtube id="T_nysmdmIVY"]]

20.3 Кроссбраузероность: установка браузера opera 78 на windows

[[youtube id="yD5GxNwyPzg"]]

20.4 Кроссбраузероность: проверка вёрстки в opera 78 и firefox 91

[[youtube id="YkPz6DdzrPk"]]

20.5 Кроссбраузероность: неудачная попытка найти microsoft edge 92

[[youtube id="n1PNpgHrwjE"]]

20.6 Кроссбраузероность: скачка chrome 93

[[youtube id="AFwUzBnVyR8"]]

20.7 Кроссбраузероность: проверка вёрстки на chrome 93 и правки скрытия календаря при нажатии на выбор дня

[[youtube id="IluoxWp1oXQ"]]

20.8 Кроссбраузероность: пытаюсь найти edge 92

[[youtube id="Z39_IpCI5l8"]]

20.9 Кроссбраузероность: итоги тестирования старых браузеров

[[youtube id="dEhRYJNRPbY"]]

21. Pixel perfect: проверка вёрстки главного экрана и подгонка

[[youtube id="iHTTO8PWLE0"]]

22. Адаптация header к ноутбуку, планшету и мобильному. Добавление бургера и крестика закрытия выпадающего меню

[[youtube id="3cdQKlrYWRY"]]

23. Pixel perfect: проверка вёрстки попапа и подгонка, проверка главного экрана и подгонка

[[youtube id="IS1fDelRZ-w"]]

24. !Неудачно: адаптация видео в тексте под мобилу

[[youtube id="j9gSjMvxKOc"]]

25. Адаптация баннера с видео в тексте к мобильной версии + адаптация SVG clipPath к динамическим размерам + высчитывание высоты декора

[[youtube id="YKH2zAB41bA"]]

26. Подведение итогов адаптации шапки и баннера и небольшие правки адаптации в шапке

[[youtube id="aafWinCsAOg"]]

27. Адаптация попапа к мобильным разрешениям экрана

[[youtube id="LGJrSV6njh0"]]

28.1 Google page speed: раздел Performance оптимизации: подключение нескольких webp в background

[[youtube id="_uR4PBxo3ag"]]

28.2 Google page speed: оптимизация в разделе Accessibility

[[youtube id="sj2ya08-74w"]]

28.3 Google page speed: небольшая оптимизация в разделе SEO

[[youtube id="qIGK84kYaqE"]]

28.4 Google page speed: раздел Performance включение кэша на виртуальном хостинге beget

[[youtube id="gx22WjlQ9P0"]]

28.5 Google page speed - раздел Performance - включение такого кэширования на виртуальном хостинге beget, чтобы "понравиться" гуглу

[[youtube id="0eIPa3sPAXQ"]]

28.6 Google page speed: раздел Performance результат включения кэширования на виртуальном хостинг

[[youtube id="q159N22ALiQ"]]

28.7 Google page speed - раздел Performance - обрезка видеозаписи которая будет внутри текста проигрываться

[[youtube id="ErRN5ZgQhd0"]]

28.8 Google page speed - раздел Performance - установка на прослушиватели колеса мыши режима "passive: true"

[[youtube id="qpFI485vC7E"]]

29. Правки некоторых недочётов по вёрстке и выбору даты в календаре

[[youtube id="3rQnV2_rylk"]]

30.1 Кроссбраузерность: Safari 12: налаживание отступов в меню и в форме для браузера

[[youtube id="jikwKZ0j2B8"]]

30.2 Кроссбраузерность: Safari 12: замена datepciker на другой, так как найдены баги

[[youtube id="Qlcis6EmZnw"]]

30.3 Кроссбраузерность: Safari 12: mask image вместо clip path

[[youtube id="JwF8jEF9SYA"]]

30.4 Кроссбраузерность: Safari 12: перевод анимаций с rem в px чтобы верные размеры были

[[youtube id="hRK9KaoR2H8"]]

30.5 Кроссбраузерность: Safari 12: замена gap на margin

[[youtube id="oRf-S05-Dss"]]

30.6 Кроссбраузерность: Safari 12: перезапуск анимации потому что в сафари не работает динамический

[[youtube id="20bgm7uzSNw"]]

30.7 Кроссбраузерность: Safari 12: сделаем анимацию position absolute чтобы не скакала

[[youtube id="Pri4AJUlADc"]]

30.8 Кроссбраузерность: Safari 12 на iOS: проверка вёрстки

[[youtube id="lseeLQOx55M"]]

31. Сжатие видео файлов для экономии трафика

[[youtube id="R48VmJVtx8o"]]

32. Автоскрытие datepicker при выборе даты

[[youtube id="elEPpKvczGE"]]

33. Настройки поведения и вёрстки datepicker

[[youtube id="t3sWGJl2W1o"]]

34. Кроссбраузерность: Safari 12 и Safari 12 на iOS + Firefox 91: проверка datepicker вёрстки и поведения

[[youtube id="VsEalS16NP4"]]

35. Исправление бага анимации космоса на js при смене ширины браузера

[[youtube id="3yNbfy2svHk"]]