Адаптивная верстка сайта с нуля. Макет Velocity. Часть 5. Адаптив всех секций (html, css, js)

В этой серии видеороликов мы сверстаем с нуля и запрограммируем адаптивный макет Velocity из Figma. Реализуем на сайте плавную прокрутку и переключение табов с помощью javascript. Верстка сайта позволит нам применить на практике знания html, css, js, бэм, адаптив. В данном видео мы затронем следующие аспекты: ► Верстка сайта под мобильные устройства и планшеты (адаптация сайта под маленькие устройства) ► Как прописывать медиазапросы? (медиа запросы для desktop first) ► Как адаптировать сайт по методу desktop first? ► Как перестроить элементы в одну колонку на мобилке? ► Как сделать, чтобы элементы занимали всю ширину? ► Как задать отступы между рядами и колонками в флексбокс? 🚀 НАЧНИ ОБУЧЕНИЕ В ШКОЛЕ WEB PRO. Получить первый урок, тест и домашнее задание можно совершенно бесплатно по ссылке ниже: ✅ Ссылка на полный плейлист верстки макета Velocity: 👨‍💻 Мой список плагинов и расширений для редактора кода VS Code: ❗️САМЫЕ ПОЛЕЗНЫЕ КАНАЛЫ ДЛЯ ВЕРСТАЛЬЩИКОВ: 💜 Сайт школы WEB PRO 📚 Материалы для верстки сайта и макет сайта можно получить в телеграме, написав боту слово “код“ без кавычек: 🎁 Готовый код с уроков можно получить в телеграме, написав боту слово “готкод“ без кавычек: Ищи школу WEB PRO в соц. сетях: 🚀 Группа ВК: 🔥 Телеграм канал: 💬 Телеграм чат для общения веб-разработчиков: 🔔 Бонусные материалы и уведомления от школы: Таймкоды: 00:00 Что нас ждёт сегодня? 01:30 Как открыть инструменты разработчика для адаптации сайта? (toggle device toolbar) 04:25 Начало адаптации. Ищем точку перелома (breakpoint) 06:40 Прописываем перенос для карточек, если им не хватает места в ширину (flex-direction: wrap) 08:40 Использование отступов между колонками и рядами с помощью gap в flexbox модели. Как проверить поддерживается ли свойство браузерами? 12:20 Находим новую точку перелома. 14:00 Адаптируем шапку до 320px. Как писать медиа запросы? Пишем первый медиазапрос. 18:42 Адаптируем приветственную секцию. Как центрировать блочные элементы? Как сделать, чтобы ссылки занимали всю ширину экрана? 25:05 Адаптируем секцию с карточками What we do (about) 29:50 Адаптируем секцию с большими карточками Services. Ищем новую точку перелома для секции. Как перестроить элементы в колонку? 36:30 Адаптируем секцию с табами. 42:00 Адаптируем подвал сайта. Перестраиваем элементы в одну колонку. 52:00 Смотрим на конечный результат - полностью сверстанный и адаптированный сайт. Делаем последние правки. 55:12 Сортируем медиазапросы в правильном порядке. 56:42 Что нас ждет в следующий раз? Начни путь веб-разработчика уже сегодня! 👨‍💻 С вами был Никита Щегольков, школа веб-разработки Веб Про. Увидимся! 🙋‍♂️ Данные видеоуроки были бы интересны всем, кто ищет: верстка сайта с нуля, адаптивная верстка сайта, верстка сайта для начинающих. #velocity #webpro #вебпро #html #css #верстка #версткасайта #версткасайтаснуля #адаптивнаяверсткасайта #версткасайтадляначинающих #созданиесайта #каксоздатьсайт #адаптив #бэм