modern-responsive-markup-webinar

by Sergei Solovev

Вебинар проведен 15 ноября 2021 года для студентов ИУ7 МГТУ и сотрудников Qoollo

Что вы найдете в репозитории

В этом репозитории вы найдёте пример использования адаптивной вестки с использованием

• семантической верстки
• BEM-именования классов
• CSS Flexbox
• CSS Custom props
• CSS анимаций и трансформаций

Как запустить

• выкачать репозиторий
• запустить сервер в папке проекта

Основные ресурсы

• Презентация к вебинару
• Временная ссылка на видео-записи этого и прошлого вебинара
• Исходный макет по которому верстали сайт
• Фигма проекта, где я кропотливо отрисовал в компонентах картинку с макетом
• Репозиторий с кодом

Полезные ссылки

• Источники бесплатных профессиональных фотографий Unsplash и Pexels.
• Источник PNG без фона PngEgg
• Библиотека бесплатных шрифтов и иконок от Google, которые легко подключаются через CDN
• Фотки людей и не только, которые для вас в любых количествах генерит нейросетка. Я залип на полчаса и славно поорал с некоторых шедевров.
• Источники референсов (примеров дизайна) Behance, Pinterest
• Инструменты VS Code, расширение LiveServer
• Коллаборативный инструмент для макетирования Figma

Универсальный алгоритм верстки

Тут изложена многолетняя мудрость, накопленная с практическим опытом и курением мануалов

Предварительный этап

Необходимо получить от дизайнера или подготовить самому макет для верстки. Макет должен включать:

• формализованный дизайн-язык (коды цветов, названия и свойства шрифтов, радиусы и отступы в пискселях)
• декомпозицию на компоненты
• подготовленные к экспорту материалы (картинки, иконки, ...)
• поведение элементов при наведении и прочих взаимодействиях (все состояния интерактивных компонентов!)
• навигация между страницами и разделами сайта

Подготовительный этап

Внимтельно выполните подготовительные шаги, чтобы создать поддерживаемый человекочитаемый код разметки и стилей.

• Перенести статический контент (картинки, видео, иконки, звуки, ...)
• Перенести основные элементы дизайн-языка (цвета, шрифты, радиусы, отступы)
• Стилизовать основные компоненты UI-Kit (заголовки, абзацы, ссылки, кнопки, поля ввода)
• проанализировать структуру, выбрать способ релаизации лейаута (позиционирования на верхнем уровне дерева HTML)
• Задать адаптивный лейаут
• Добавить механизм назначения динамических классов на основе размера вьюпорта (например, mobile, desktop)

Основной этап

Удобнее всего разбить сайт/приложение на экраны и секции и для каждой выполнить набор действий:

• воспроизвести структуру контента в соотв. с макетом в HTML
• именовать элементы в соответствии с именами компонентов в макете и BEM
• добавить стили
• дожать адаптивность (от мобилки до телевизора)

Скриншот результата

Спасибо за помощь в проведении вебинара:

• Алексею Кривенко (презентация)
• Луизе Шаиповой (презентация)
• Дмитрию Капсомуну (CSS код)