Весь мой опыт по верстке сайтов в одном посте.
БЫСТРЫЙ СТАРТ
(Если Ты продвинутый новичок):
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, призван облегчить создание CSS спрайтов. Генерирует картинку и css код: http://goo.gl/PUyt1p
Остальная тонна других плагинов здесь: http://madebyvadim.tumblr.com/
UPD: Но идеальный инструмент для верстки на сегодняшний день это "верстальный комбайн" Avocode: http://avocode.com/ Это инструмент из разряда must have!!!
7. Далее для быстрого прототипирования сайтов используй CSS фрэймворк Bootstrap или Foundation. Достаточно знать только HTML, чтобы УЖЕ строить сайты. И даже для мобильных устройств!
Официальный сайт Bootstrap: http://getbootstrap.com/
Перевод на русский официального сайта Bootstrap: http://www.oneskyapp.com/ru/docs/bootstrap
Официальный сайт Foundation: http://foundation.zurb.com/
8. Изучи что такое препроцессоры и как их использовать! Они позволят писать код в разы быстрее!
Для HTML это:
- HAML: http://haml.info/
- SLIM: http://slim-lang.com/
- Markdown: http://daringfireball.net/projects/markdown/
- JADE: http://jade-lang.com/
Для CSS это:
- SASS: http://sass-lang.com/
- LESS: http://lesscss.org/
- STYLUS: http://learnboost.github.io/stylus/
Для JavaScript это:
- CoffeeScript: http://coffeescript.org/
- LiveScript: http://livescript.net/
9. Теперь начинай постепенно автоматизировать свой рабочий процесс. Для этого изучай основы командной строки. Она позволит тебе перейти на качественно новый уровень - использование сборщиков, которые избавят тебя от рутинных задач, таких как сборка проекта, минификация HTML, CSS, JavaScript, оптимизация изображений и много-много чего еще с помощью дополнений.
Вот основные сборщики:
- Grunt (http://gruntjs.com/);
- Gulp (http://gulpjs.com/)
И затем разберись с ракетным менеджером Bower (http://bower.io/). Он позволит прямо из командной строки загружать самые последнии версии jQuery, Bootstrap и любые библиотеки и фрэймворки, которые только вздумается, не заходя на официальные сайты в браузере.
10. Подойдя к этому этапу, ты почти что бог веб разработки и фронтона! Осталось теперь познать Yeoman:
http://yeoman.io/
О да! Это вершина фронтенд-разработки! Это целая экосистема HTML, CSS, JavaScript. Yeoman содержит в себе Grunt и Bower в мощном симбиозе! Свободное владение Yeoman - это все равно что воевать, используя ядерное оружие :)
P.S. И наконец, главная рекомендация. Найди человека, который уже чего то достиг в веб разработке, которого ты уважаешь, и который будет помогать тебе осваивать фронтенд. Это может происходить удаленно с помощью Skype-сессий и функции "показать экран". Плати ему деньги за занятия и подходи ответственно к делу. Это самый эффективный способ учиться!
P.P.S. Еще больше всяких фишек в моем паблике "Как верстать сайты": https://vk.com/psd_2_html
Успехов! ;)
