Адаптивная верстка сайта с нуля. Макет Velocity. Часть 2. Верстка Header и Welcome (html, css, js)

В этой серии видеороликов мы сверстаем с нуля и запрограммируем адаптивный макет Velocity из Figma. Реализуем на сайте плавную прокрутку и переключение табов с помощью javascript. Верстка сайта позволит нам попрактиковать знания html, css, js, бэм, адаптив. В данном видео мы затронем следующие аспекты: ► Начнем верстать сайт с нуля ► Разберёмся в семантике сайта. Применим теги header, nav, main, section. ► Установим расширения для редактора кода vs code live server, ecsstractor, indent-rainbow ► Используем плагин color compass в Figma ► Сделаем секцию по высоте экрана ► Стилизуем кнопки. Добавим взаимодействия кнопкам при наведении и клике с помощью псевдокласса hover и active ► Узнаем как закрепить шапку на странице, для чего нужен z-index (что такое z-index) ✅ Ссылка на полный плейлист верстки макета Velocity: 👨‍💻 Мой список плагинов и расширений для редактора кода VS Code: ❗️САМЫЕ ПОЛЕЗНЫЕ КАНАЛЫ ДЛЯ ВЕРСТАЛЬЩИКОВ: 💜 Сайт школы WEB PRO 📚 Материалы для верстки сайта и макет сайта можно получить в телеграме, написав боту слово “код“ без кавычек: 🎁 Готовый код с уроков можно получить в телеграме, написав боту слово “готкод“ без кавычек: Ищи школу WEB PRO в соц. сетях: 🚀 Группа ВК: 🔥 Телеграм канал: 💬 Телеграм чат для общения веб-разработчиков: 🔔 Бонусные материалы и уведомления от школы: Таймкоды: 00:00 Материалы для верстки, стартовая структура 00:54 Предисловие. Будет использоваться методология БЭМ 01:35 Верстка шапки (header) по семантике 01:55 Про расширение live server для редактора кода visual studio code 03:06 Продолжаем верстать шапку сайта. Нужен ли в данной секции контейнер? 05:54 Навигация сайта 09:02 Как быстро скопировать классы в стилевой файл? Про плагин ecsstractor for vscode 09:50 Подсветка кода, подсветка табов (отступов) в редакторе кода. Про плагин indent-rainbow 10:55 Стилизация шапки сайта (логотип сайта и навигация) 13:33 Что подразумевал дизайнер - якорные ссылки на сайте или внешние? 15:10 Стилизация ссылок в шапке 18:53 Выбор цвета для ссылок при наведении и нажатии. Плагин color compass в фигме 19:53 Выравнивание элементов в шапке в одну строку. 24:01 Отступы от элементов с помощью интересного селектора. Внешние отступы header. 27:33 Почему следующая секция не является шапкой? Что на сайте является шапкой (тег header)? Семантика. 28:10 Что такое тег main? Создание следующей секции. Разметка секции welcome. 35:10 Стили для секции welcome. Подключение фоновой картинки на сайте. 40:45 Центрируем элементы внутри секции 41:30 Фиксим баги, которые могут возникнуть в будущем. 43:15 Делаем эффект вау. Растягиваем секцию под высоту экрана (окна браузера) 44:40 Стили для заголовка 46:30 Стили для кнопок. Стилизуем первую кнопку (кнопка с рамкой, обводкой) 51:00 Стилизуем вторую кнопку (кнопка с фоном) 56:30 Отступы от элементов в секции 59:30 Эффекты для кнопок при наведении и нажатии (псевдоклассы hover и active). Используем расширение Color Compass в Figma. 01:05:30 Фиксируем шапку на сайте 01:08:00 Что нас ждет в следующий раз? Начни путь веб-разработчика уже сегодня! С вами был Никита Щегольков, школа веб-разработки Веб Про. Данные видеоуроки были бы интересно всем, кто ищет: верстка сайта с нуля, адаптивная верстка сайта, верстка сайта для начинающих. #velocity #webpro #вебпро #html #css #верстка #версткасайта #версткасайтаснуля #адаптивнаяверсткасайта #версткасайтадляначинающих #созданиесайта #каксоздатьсайт #адаптив #бэм