Верстка сайта - инструменты разработчика. Часть 1.

Верстка сайта - это то, с чего начинается любой путь в сфере web-разработки будь то backend, либо frontend. Неважно верстать сайты на начальном этапе обязан уметь каждый. Каждый должен знать html, css без них сейчас просто некуда, это те технологии без знаний которых нет никакого смысла продвигаться дальше.

Верстка - это один из первых этапов разработки сайта, на котором визуальные макеты подготовленные дизайнером переводятся в код, благодаря которому происходит отображение страниц в браузерах, иными словами верстальщик переводит страницу подготовленную дизайнером на язык понятный браузеру для того, чтобы он отображался в интернете. Возможно вы уже имеете представление верстке сайтов, поэтому не буду углубляться и рассказывать какие темы по html и css вам нужно знать. Перейдем сразу к более профессиональным инструментом разработки.

Сейчас существует огромное множество инструментов разработчика, которые помогают сэкономить время и упростить процесс написания frontend части приложения или просто верстки сайта. Ну и первое для того, чтобы писать код быстрее вам понадобится хороший редактор кода, сейчас на пике популярности редактор кода visual studio code и я смело могу посоветовать вам, но так же я могу вам порекомендовать webstorm. Почему вам обязательно нужно использовать современный редактор кода, а не note + + или какой-нибудь блокнот, потому что данные редакторы легко расширяют свой функционал благодаря плагинам и упрощают и ускоряют вашу работу.

Далее вам понадобится установить несколько браузеров для того что проверять кроссбраузерность верстки сайта, проблема в том, что разные браузеры в основном соблюдают общие правила и стандарты, но в некоторых случаях бывает, что алгоритм обработки html-кода исчез, а могут быть немного разные и это приводит к различному отображению одного и того же элемента. Многие ведут разработку в хроме, потому что у него есть удобные chrome dev tool с простыми словами. Это инструменты для создания и отладки веб-сайтов встроенные прямо в браузер, они обеспечивают разработчикам более глубокий доступ к веб-приложениям и браузеру. Вы можете делать все начиная с тестирования вашего видового экрана на мобильном устройстве и заканчивая редактированием html и css.

Следующее о чем я бы хотел поговорить - это макет. Сейчас существует много программ в которых дизайнер может нарисовать макет начиная от классического photoshop до иллюстратора adobe experience design, figma и так далее. Для начала на хорошем уровне все-таки разберитесь именно с фотошопом. Научитесь резать макеты, измерять отступы и так далее.

Это минимальное, что вам требуется знать.