Языки и основы веба · Стек 2027
HTML и CSS
Структура, оформление и доступность веб-интерфейса.
HTML описывает структуру и смысл содержимого страницы. CSS задаёт её оформление: расположение блоков, размеры, цвета и поведение на разных экранах. Вместе они образуют основу веб-интерфейса. Даже сложное приложение начинается с документа, который человек должен суметь прочитать и использовать с подходящего ему устройства.
Ключевые идеи
- Семантическая разметка помогает браузеру и вспомогательным технологиям понять назначение элементов. Заголовки задают структуру, ссылки ведут к ресурсам, кнопки запускают действия, а подписи объясняют поля формы.
- Адаптивность проверяют на содержимом и сценариях. Длинное название, увеличение шрифта или сообщение об ошибке способны выявить проблему, которую не видно на аккуратном демонстрационном экране.
- CSS требует понимания каскада, наследования, специфичности и размеров элементов. Flexbox и Grid помогают строить раскладку, но не определяют, какие сведения действительно нужны человеку на странице.
- Bootstrap может дать готовую сетку и компоненты. Его подключение требует согласовать версии и стили проекта; большое количество переопределений часто показывает, что структура оформления нуждается в пересмотре.
- Проверка интерфейса включает клавиатуру, видимость фокуса, контраст, подписи и состояния элементов. Скриншот полезен для сравнения оформления, но не показывает весь опыт взаимодействия.
Вывод
Качественная основа из HTML и CSS облегчает дальнейшую работу с JavaScript. Дизайн-система в Figma помогает согласовать компоненты и состояния, однако результат нужно проверять в браузере: именно там встречаются реальные данные, размеры экрана и действия пользователя.