Как верстать сайты?

БЫСТРЫЙ СТАРТ (Если Ты продвинутый новичок): 1. Если есть возможность, то используй для работы MAC вместо PC. Он быстрее и надежнее. (Посмотри это видео: http://goo.gl/oGoN7M Сам пользуюсь Macbook Pro Retina 15" и очень доволен. На PC с Windows вряд ли перейду обратно; 2. Используй программку Alfred (для MAC: http://www.alfredapp.com/ ) и Launchy (для Windows: http://www.launchy.net/) для быстрого вызова других программ. Это уже реальная необходимость в постоянной работе за компьютером; 3. Начни с прочного фундамента. Пройди эти уроки по азам HTML и CSS: http://htmlacademy.ru/courses/4 ; Далее пройди эти очень важные уроки: - по HTML (блочная модель документа): http://htmlacademy.ru/courses/44 - по CSS (наследование и каскадирование): http://htmlacademy.ru/courses/66 Достаточно разобраться с азами HTML и CSS, затем понять блочную модель и разобраться с каскадированием и наследованием в CSS. С этим багажом уже можно смело двигаться дальше! Пройди 1-месячный интенсив. И это будет САМЫЙ БЫСТРЫЙ СТАРТ: http://htmlacademy.ru/intensive (Промо-код на скидку 10%: 5481e4bdf) 4. Используй продвинутые редакторы кода. Сейчас это Sublime Text, Brackets и Atom Скачать их можно здесь: Sublime Text - http://www.sublimetext.com/3 Brackets - http://brackets.io/ Atom - https://atom.io/ 5. Для ускорения написания HTML и CSS используй плагин для этих редакторов - Emmet (http://emmet.io/) + еще с десяток плагинов (для Sublime Text): - Package Control: http://goo.gl/rava0k - SideBarEnhancements: http://goo.gl/feP6Zr - AdvancedNewFile: http://goo.gl/bhgmcw - Emmet: http://goo.gl/QTSldQ - Bootstrap 3 snippets: http://goo.gl/kfnx5g - AutoFileName: http://goo.gl/V2ZfpM - Tag: http://goo.gl/NtoZcp - ColorPicker: http://goo.gl/Z7Bz4H - FakeImg.pl: http://goo.gl/T6l6Sb - WebFont: http://goo.gl/WhLT8V И еще посмотри мои видео: - "Как устанавливать плагины для Sublime Text": https://www.youtube.com/watch?v=cCJG-J50TTE ; - "10 плагинов для Sublime Text 3": https://www.youtube.com/watch?v=FWGKve1c0FY 6. Научись эффективно использовать графические редакторы, для вырезания графики из psd-макетов. Конечно, в основном это Photoshop. Для MAC есть отличная альтернатива в виде программы Pixelmator (намного дешевле в итоге, чем Photoshop). Смелее применяй плагины и сервисы, чтобы сделать работу приятней. Например: - WebZap, для мгновенного прототипирования основных элементов web страницы: http://goo.gl/apt1YO - Pixel Dropr, отличный плагин для кастомизации созданного прототипа :http://goo.gl/KVvrFB - Doco, очень мощно повышает скорость работы при манипуляциях со слоями разных макетов. Теперь не нужно переключаться между окнами: http://goo.gl/FaUZe3 - Renamy, маленький, но суперудобный плагин, который переименует десятки слоев в один клик. Поставит префиксы, постфикс, нумерацию слоев и даже поддерживает регулярные выражения: http://goo.gl/8WCW5I - Pixel2Vector, преобразует растровый слой в вектор: http://goo.gl/nt6kwx - Zeick, преобразует вектор в svg: http://goo.gl/YBZZ8V - SpecKing, покажет точное расстояние в пикселях от одного элемента до другого и размеры самого элемента. Идеальный инструмент для пользователей Photoshop до версии CC: http://goo.gl/QwNvXc В фотошопе CC 2014 (15.x) эта функция есть по умолчанию; - Griddify, часто нужный инструмент для автоматической генерации направляющих в один клик: http://goo.gl/xDZlFG - CSS Hat, позволяет максимально точно получать css код из любых слоев. Работает реально точнее, чем встроенная такая же функция в самом Photoshop: http://goo.gl/1cgwyD - Lorem Ipsum Generator, создает любое количество псевдолатинского текст без определенного значения, для заполнения текстовых блоков: http://goo.gl/3ulqPv - Layrs Control, для легкого редактирования слоев PSD: http://goo.gl/4IBnml - SpriteOwl, призван облег