Адаптивная верстка сайта с нуля. Макет Velocity. Часть 6. Табы и плавная прокрутка на javascript.

Данное видео является заключительным в серии видеороликов, где мы верстаем с нуля и программируем адаптивный макет Velocity из Figma. В этом видео мы реализуем на сайте плавную прокрутку и переключение табов с помощью javascript. Верстка данного сайта позволила нам применить на практике знания html, css, js, бэм, адаптив. В данном видео мы затронем следующие аспекты: ► Запрограммируем на сайте табы и сделаем плавную прокрутку для якорных ссылок ► Как создать табы с помощью js? ► Как создать плавную прокрутку на сайте с помощью js? ► Где скачать бесплатные картинки для сайта в хорошем качестве? ► Как найти элементы на странице с помощью js? Как работает querySelector и querySelectorAll? ► Как перебрать все элементы на странице с помощью forEach? ► Как добавить или удалить класс у элемента с помощью js? ► Как сделать анимацию плавного появления элемента? ► Как создать перемещение по странице на сайте? ► Как отменить стандартное действие элемента на сайте? Отменяем стандартное поведение элемента на странице с помощью () ► Работа с window, offsetTop, scroll, behavior smooth 🚀 НАЧНИ ОБУЧЕНИЕ В ШКОЛЕ WEB PRO. Получить первый урок, тест и домашнее задание можно совершенно бесплатно по ссылке ниже: ✅ Ссылка на полный плейлист верстки макета Velocity: 👨‍💻 Мой список плагинов и расширений для редактора кода VS Code: ❗️САМЫЕ ПОЛЕЗНЫЕ КАНАЛЫ ДЛЯ ВЕРСТАЛЬЩИКОВ: 💜 Сайт школы WEB PRO 📚 Материалы для верстки сайта и макет сайта можно получить в телеграме, написав боту слово “код“ без кавычек: 🎁 Готовый код с уроков можно получить в телеграме, написав боту слово “готкод“ без кавычек: Ищи школу WEB PRO в соц. сетях: 🚀 Группа ВК: 🔥 Телеграм канал: 💬 Телеграм чат для общения веб-разработчиков: 🔔 Бонусные материалы и уведомления от школы: Таймкоды: 00:00 Что нас ждёт сегодня? 01:20 Небольшое предисловие перед началом программирования. 02:10 Логика работы табов 02:50 Создаём разметку для остальных табов 03:20 Скачиваем картинки для табов с помощью плагина Unsplash. 05:55 Алгоритм действий для создания табов 06:40 Создаем и подключаем javascript файл () 07:20 Как проверить работу js файла, правильно ли вы его подключили? 07:40 Находим необходимые элементы для программирования табов 11:15 Создание функции, которая будет скрывать табы со страницы и делать кнопки неактивными 14:50 Правка бага в коде, который я допустил при добавлении разметки новых табов. 16:37 Дописываем предыдущую функцию. Делаем кнопки неактивными. 17:55 Создание функции, которая будет показывать таб и делать соответствующую ему кнопку активной 22:15 Вешаем переключение табов по нажатию на кнопки 26:20 Создаём эффект плавного появления табов 29:50 Логика работы плавной прокрутки сайта 30:10 Создаём плавную прокрутку на сайте при клике на якорную ссылку 35:20 Как создать якорную ссылку на сайте? 37:28 Продолжаем писать функцию плавной прокрутки в js 45:10 Фиксим небольшой баг при прокрутке страницы 47:30 Поддержка браузерами данного способа плавной прокрутки caniuse 48:40 Просматриваем финальный вариант сайта Velocity, который у нас получился 49:40 ЗАДАЧА ДЛЯ ВАС 51:10 Что будет дальше с каналом? Начни путь веб-разработчика уже сегодня! 👨‍💻 С вами был Никита Щегольков, школа веб-разработки Веб Про. Увидимся! 🙋‍♂️ Данные видеоуроки были бы интересны всем, кто ищет: верстка сайта с нуля, адаптивная верстка сайта, верстка сайта для начинающих. #velocity #webpro #вебпро #html #css #программированиесайта #плавнаяпрокрутканасайте #плавнаяпрокрутка #добавлениескриптовнасайте #переключениетабов #созданиесайта #каксоздатьсайт #js #javascript