Томский Техникум
Информационных Технологий

Дистанционное обучение позволяет не только сэкономить время на дороге до техникума и обратно, но и попробовать новые сервисы и программы, не установленные на рабочих машинах ТТИТ.

Своими рекомендациями делится мастер производственного обучения Юлия Владимировна Комарова.

1. Первая из программ для верстки сайтов - это редактор кода

• Atom
• Brackets
• Sublime Text 3

Однако не беда, если вы не можете по каким-либо причинам их установить, подойдет работа в стандартном блокноте windows или Notepad++.

Если же вы остановились на IDE PHPStorm, тогда вам могут пригодиться сочетания горячих клавиш:

• Выравнивание кода (выделять всё crtl+A, выравнивать ctrl+alt+L)
• Поиск по всему проекту + найти и заменить (ctrl+shift+F)
• Найти метод или его использование (ctrl + клик левой кнопкой мыши)
• Закомитить + запушить (ctrl + K, ctrl + shift + K)
• Обнять часть кода новым тегом html (ctrl +alt +J)
• Показать идентичные куски кода (ctrl+alt+shift+J)

2. Emmet

Программа для верстки сайтов в программе редактора кода. Набор плагинов для текстовых редакторов. Этот товарищ поможет быстрее набирать код в HTML & CSS.
Например, такой строкой:
nav>ul>li*3
По нажатию на tab вы получите такой код:

• <nav>
•   <ul>
•         <li></li>
•              <li></li>
•              <li></li>
•       </ul>
• </nav>

3. CSS препроцессоры

Это конечно не программа для верстки сайтов, а, наверное, быстрый и умный способ написания кода CSS. Можно использовать LESS, SASS, SCSS. Разобравшись с одним из них, остальные вы тоже поймете. Они отличаются только синтаксисом. Я использую препроцессоры потому что в них есть:

• Вложенность
• Переменные
• Примеси
• Расширители

Код css получается более удобочитаемым, структурированным, легко редактируемый и расширяемый. Ух, какие длинные слова, но они очень важны для верстальщика HTM!

4. Онлайн программы, для верстки и работы с .psd макетами сайтов

И еще, когда нет под рукой Photoshop или просто хочется что-то новенького, можно использовать для препарирования .PSD макета онлайн программы типа:

• avocode.com
• assets2.adobe.com

Не забываем валидировать свой код на validator.w3.org .

Удачи!