Воркшоп по базовой вёрстке
Воркшоп в двух частях для Traktor School с примером вёрстки мобильного приложения. Верстаем HTML-каркас, стилизуем страницу, учитываем особенности мобильного интерфейса, помним о доступности.
В первой части мы сверстаем разметку приложения для заказа пиццы и научимся применять правильные теги. Разберёмся, что такое семантика и почему она важна. Научимся правильно выбирать подходящие элементы форм, выбирать между ссылками и кнопками. Выполним требования по базовой доступности и валидности.
Во второй части застилизуем страницу под макет. Превратим стандартные браузерные контроллы в кастомные, оставив при этом всю функциональность, которую обеспечивает браузер. Разберёмся в разнице между контентными и декоративными изображениями, научимся оптимизировать графику и её загрузку. Поговорим о композиции стилей и методологии БЭМ.
Запись
Мы разбили воркшоп на две части. В первой — верстаем каркас и думаем о структуре контента и доступности:
…Во второй части — пишем стили и приводим вид страницы к макету: