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

В этой серии видеороликов мы сверстаем с нуля и запрограммируем адаптивный макет Velocity из Figma. Реализуем на сайте плавную прокрутку и переключение табов с помощью javascript. Верстка сайта позволит нам применить на практике знания html, css, js, бэм, адаптив. В данном видео мы затронем следующие аспекты: ► Сверстаем две секции с карточками на сайте. ► Поработаем с бэм неймингом (bem naming) ► Темная тема в секции на сайте с помощью модификатора ► Что такое !important в css? ► Делаем неразрывный пробел на сайте, чтобы слова переносились вместе. ► Как создать тень в фигме? Как создать тень в css? 🚀 НАЧНИ ОБУЧЕНИЕ В ШКОЛЕ WEB PRO. Получить первый урок, тест и домашнее задание можно совершенно бесплатно по ссылке ниже: ✅ Ссылка на полный плейлист верстки макета Velocity: 👨‍💻 Мой список плагинов и расширений для редактора кода VS Code: ❗️САМЫЕ ПОЛЕЗНЫЕ КАНАЛЫ ДЛЯ ВЕРСТАЛЬЩИКОВ: 💜 Сайт школы WEB PRO 📚 Материалы для верстки сайта и макет сайта можно получить в телеграме, написав боту слово “код“ без кавычек: 🎁 Готовый код с уроков можно получить в телеграме, написав боту слово “готкод“ без кавычек: Ищи школу WEB PRO в соц. сетях: 🚀 Группа ВК: 🔥 Телеграм канал: 💬 Телеграм чат для общения веб-разработчиков: 🔔 Бонусные материалы и уведомления от школы: Таймкоды: 00:00 Что нас ждёт в этом видео? 00:41 Предисловие. Как реализовать на сайте тёмную секцию и светлую секцию с помощью классов и бэм нэйминга? Переиспользование блоков на сайте. 03:54 Разметка секции с карточками What we do (about) 05:05 Почему не стоит вешать контейнер на весь сайт, а лучше задавать отдельно в каждой секции? 05:47 About. Делим секцию на логические блоки. 08:40 About. Создание карточки в секции. 11:10 Создание общего класса для одинаковых секций. 13:30 About. Стилизация секции. 14:50 Как убрать перемещение сайта наверх при обновлении страницы с помощью Live Server? Что такое important? (значение свойства !important) 17:00 About. Возвращаемся к стилизации секции. Стилизуем общий блок с заголовками. 19:50 Стилизация селектора общей секции. 22:10 About. Стилизация карточек. Как выстроить карточки на сайте в ряд? 30:40 About. Пробуем поломать секцию и предугадать действия заказчика на сайте. Фиксим возможные будущие баги с карточками. 31:55 Предисловие перед вёрсткой секции Services. Оцениваем, что можем переиспользовать из предыдущих блоков. 32:28 Services. Разметка секции с большими карточками. 33:48 Services. Делаем секцию тёмной с помощью модификатора. 34:48 Services. Разметка карточек. 36:40 Стилизация темной темы секции на сайте. Вешаем стили на модификатор dark. 39:20 Services. Стилизация карточек. 40:10 Почему ширину карточек лучше задать в процентах, а не в пикселях? 41:05 Символ неразрывного пробела   в html. Как сделать, чтобы при переносе одного слова, переносилось другое слово (словосочетание)? Как запретить перенос одного слова на новую строку на сайте? 41:55 Services. Проверка секции на резиновость, адаптивность. 42:35 Services. Отступы между элементами. 45:15 Смотрим на полученный результат к данному моменту. 46:20 Создание тени в Figma и в CSS для шапки (box-shadow) 48:00 Пробуем задать тёмную тему на сайте разным секциям с помощью модификатора. 49:10 Что нас ждет в следующий раз? Начни путь веб-разработчика уже сегодня! 👨‍💻 С вами был Никита Щегольков, школа веб-разработки Веб Про. Увидимся! 🙋‍♂️ Данные видеоуроки были бы интересны всем, кто ищет: верстка сайта с нуля, адаптивная верстка сайта, верстка сайта для начинающих. #velocity #webpro #вебпро #html #css #верстка #версткасайта #версткасайтаснуля #адаптивнаяверсткасайта #версткасайтадляначинающих #созданиесайта #каксоздатьсайт #адаптив #бэм