Front-end-разработчик webcoalition.ru Татьяна Тен в колонке для «Нетологии» дает пять практических советов начинающим верстальщикам.

Очень часто верстку не считают программированием вовсе или считают ненастоящим программированием. Такое мнение может складываться от незнания или недопонимания возможностей и задач верстки. Так же, как и в музыке, из всего семи нот могут получиться и пятая симфония Бетховена, и песня «О боже, какой мужчина».

На мой взгляд, верстальщик — это тоже программист, со своей специализацией, своими задачами и трудностями. Верстать и легко, и сложно.

Кроссбраузерность и уже ненавистный всем Internet Explorer 8, задача поддержки большого количества разных устройств, а также необходимость предусмотреть множество возможных вариантов сочетания контентных блоков, учесть огрехи дизайнера или иногда даже убедить его, если он неправ, — все это ложится на плечи верстальщика.

Вместе с этим верстка, как и любая другая задача программиста, очень интересна и захватывает. Продумать и сверстать лейаут сайта — это все равно что собирать кубик Рубика.

Теперь несколько советов.

Прежде чем верстать, проанализируйте макет

Закладывайте в свой временной расчет от 1 до 3 часов в зависимости от сложности. Еще не поздно будет пообщаться с дизайнером, если вы заметили разные отступы у одинаковых элементов или расположение элементов не по сетке, или посоветоваться, что позволит вам сделать верстку более универсальной и устойчивой к изменениям контента.

Принцип DRY — Do not Repeat Yourself

Ну и просто для себя, если выделить общие закономерности, вы избежите повторений себя.

Google наше все

Очень часто получаю вопросы от студентов. В основном для поиска ответа я открываю Google, пишу вопрос и даю первую или вторую ссылку. Редко вопрос представляет собой что-то такое, что трудно найти и можно понять только с опытом. Мне никогда не жалко ответить на вопрос и дать ссылку из Google. Но что будет после окончания курса? Не стесняйтесь гуглить!

К сожалению (или к счастью), самые актуальные ответы есть в англоязычных статьях и ресурсах. Думаю, это ни для кого не секрет и все айтишники так или иначе знают английский. Если не знаете — имеет смысл подтянуть. В сфере IT без этого будет очень сложно.

Читайте блоги, новости, дневники профессионалов

Продолжая совет номер 2: ищите и читайте блоги и разные новости в сфере Front-end, это всегда полезно. Я стараюсь каждый день читать какую-нибудь статью.

Из того, что читаю постоянно:

Практика, практика и еще раз практика

Если взять бесплатные красивые psd-шаблоны и сверстать несколько — это будет и хорошей практикой, и неплохим вариантом для портфолио, если пока что нет (или не так много) реальных проектов в вашем арсенале.

Читаемый и поддерживаемый код

Зачастую ваш код после вас будет изменяться, дорабатываться и жить своей собственной жизнью. Постарайтесь сделать жизнь неизвестного вам, но наверняка очень хорошего программиста легче и приятнее — позаботьтесь о том, чтобы ваш код легко читался и не содержал каких-то понятных только вам одному наворотов.

Резюмируем

Прежде чем верстать, проанализируйте макет.
Ищите ответы на вопросы в интернете.
Читайте блоги, новости, дневники профессионалов.
Практикуйтесь.
Пишите понятный код.