В этой статье поделюсь своим арсеналом программ, которые я использую для верстки.
Редактор VSCode
Первая и самая важная программа, без которой верстальщику делать нечего это редактор кода.
По сути, редактор кода - это блокнот, но с продвинутыми функциями.
Сначала я делала сайты на sublime, сейчас я пользуюсь Visual Studio Code.
Почему я выбрала его:
- Встроенный live-server. Эта возможность позволяет писать код и сразу видеть, как он отображается на веб-страничке, без необходимости обновлять ее вручную.
- Встроенный live компилятор препроцессора sass в css
- Плагин emmet - это уже мастхэв стандарт при верстке. Он дописывает код за верстальщиком, например, всевозможные скобочки.
- Возможность создания своих сниппетов. Сниппет - это целый кусок кода, для вывода которого можно назначить очень короткое слово. Например, я напишу mymenu и выведется мой код для меню, и мне не нужно будет его писать с нуля.
- Множество полезных расширений, например, при наведении на код цвета появляется всплывающее окно, в котором этот цвет видно наглядно.
Photoshop
Да, графическим редактором верстальщику тоже нужно уметь пользоваться, хотя бы в базовых вещах. Хотя бы для того, чтобы открыть макет, который предоставил дизайнер и разобраться в нем.
Много кто из дизайнеров все еще делает сайты в фотошопе.
Figma
Мой любимый графический редактор. Да, в нем меньше функций чем в фотошопе именно для графики, но сайты с него верстать просто сказка.
Но тут мы не выбираем. В чем макет, тем и открывает.
Если в фигме, значит открываем фигмой. Фотошоп такой макет не откроет.
Figma - это онлайн приложение. У него есть десктопная версия, но все равно данные она берет из интернета, поэтому я работаю с фигмой сразу в браузере.
Photopea.com
Это онлайн редактор файлов psd. Т.е. такой более простой аналог фотошопа.
Пользуюсь я им редко, например, когда нужно быстро открыть какой-нибудь файл psd и глянуть что там. Или если нет под рукой компьютера с установленным фотошопом.
А так как редактор бесплатный, то для верстки может вполне заменить фотошоп. Не у каждого верстальщика есть деньги заплатить за photoshop.
Google Chrome
Ну и, конечно, браузер гугл хром. Использую его для отладки сайтов и проверки как смотрится верстка на разных разрешениях экрана.
Так же по-хорошему сайт надо проверить во всех известных браузерах: mozilla, opera, safari.