Основы вёрстки для дизайнера. Часть 4. Инструменты разработчика: как заглянуть «под капот» сайта
Мы уже разобрали анатомию страницы (HTML) и её визуальное оформление (CSS) (1, 2, 3). Но как увидеть это всё вживую? Как понять, почему кнопка на сайте съехала на два пикселя ниже, чем в вашем макете?Ответ прост — инструменты разработчика (Developer Tools, или сокращённо DevTools). Это встроенный во все современные браузеры набор утилит, который позволяет в реальном времени просматривать код, стили и структуру любой веб-страницы. Для дизайнера это не просто любопытная игрушка, а незаменимый инструмент для проведения авторского надзора.В этой статье мы научимся им пользоваться и сопоставлять то, что вы видите в Figma, с тем, как это реализовано в коде. Читать далее