Вступление на путь верстальщика

Итак, ты прочел название и заинтересовался. Сейчас я немного сумбурно, но все же введу тебя в курс дела, если ты совсем в «в этом вашем вебе» не понимаешь.


ВВЕДЕНИЕ.



Что же такое верстка?


Если вкратце, то это процесс создания страницы сайта. Заметьте, статичной страницы, без каких либо скриптов. Верстальщик использует языки разметки, в данном случае подразумевается HTML5/CSS3, с помощью которых размечает страницу. Создает ее с самого зеро, то есть с пустого документа.



HTML – используется исключительно для разметки. CSS или каскадные таблицы стилей – для управления потоком документа, придания элементам, заранее созданным в разметке определенной формы, размещения их в том или ином порядке, манипуляций с текстом, размерами etc. Они идут в связке.



В итоге получается готовая страница сайта. Сайты верстают, чаще всего с psd макетов, которые предоставляет дизайнер. Макет разбирают в фотошопе. После верстки готовый документ не является завершенным сайтом. Это просто оболочка, причем статичная. Дальше идет обработка с помощью JS, подключение скриптов, работа серверных программистов и еще куча всего.


По сути, если собрался становиться именно верстальщиком, то необходимо не слишком большое количество скиллов.


Однако верстальщики сейчас на рынке не так востребованы. Намного чаще требуются именно фронтендеры. Фронт-енд – клиентская сторона создания сайта. То есть работа на стороне браузера. Если сильно обобщить, то она включает в себя как верстку, так и работу со скриптами.



Есть еще бэкенд. Бэкенд – серверная сторона, отвечает за взаимодействие с сервером, непосредственно работу сайта, оперирование данными от пользователей и т.д. В этой пасте бэкенду почти ничего не посвящено. Материалов у нас очень мало, ткак не то направление. Если кто поделится, будем рады пополнить свои закрома.



Так вот, фронтендер, даже самый начинающий должен знать сильно больше верстальщика. Тут лучше продублирую ОП-пост:


На данный момент фронтендеру новичку нужно учить больше, чем просто HTML/CSS. В частности необходимы продвинутые инструменты разработки, автоматизаторы, работа со скриптами, сам Js и Jquery, в перспективе что-то из Js фреймворков, MVC и прочего дерьма.


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



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



И это отмечу, далеко не предел, даже на начальном этапе расти есть куда. Вариантов масса. От псевдотрехмерных техник создания сайтов на параллаксе, до запила крутых приложений на JS, с перспективой перехода на мобильные платформы. Да что там говорить, даже игры умудряются пилить, и довольно удачно.



РАБОТА.



По поводу работы. Она есть. И места есть, и заказы есть, и конкуренция есть. Последняя причем есть везде. Если ты ноешь, что работы нет, значит плохо искал, либо живешь в глухом селе хуй знает где. Тогда сочувствую бро, тебе только в переезд или во фриланс.



Основные направления: фриланс или конторки.



О фрилансе ты наверняка слышал хоть немного. Есть местные или зарубежные биржи, где люди выкладывают свои заказы разных уровней. От «поправь шрифт на сайте для мобильных версий» до «запили мне рабочий аналог фейсбука за 30 долларов» (утрировано). Из зарубежных самый популярный – Upwork. Кстати в воркаче есть постоянно живущий тред по апворку, где можно узнать больше информации, советую читнуть тамошний фак.



Новичкам на фрилансе сложновато за счет сильной конкуренции (чаще всего вас просто будут игнорить заказчики), плюс при работе на зарубежных сайтах нужно знание английского, но это не значит, что не стоит и пытаться. Лично знаю людей, которые начинали работать с совсем уж мелочных заказов на какой-то пидорашкинской бирже, а затем перекатились на конкретный такой запил сайтов на апворке.



Конторки – местные кружки веб-макак локального или глобального уровня. Пилят от мелких сайтов торгашам с рынка, до довольно крупных продаваемых приложений (если тебе повезло в такую попасть со старта). Основная задача местных анонов – пробиться в одну из них. Собственно, материалы в треде как раз и предназначены для того, чтобы выбить ентри левел. Через несколько месяцев пребывания там, ты, если не конченый дебил, уже и сам будешь знать, что тебя ждет, что дальше делать и куда двигаться.


На фрилансе больше нужны люди оркестры, в конторках скорее необходим человек более узкой специализации. Но бывает всякое.



МАТЕРИАЛЫ, ПОЛЕЗНЫЕ ССЫЛКИ И СОВЕТЫ ПО ОБУЧЕНИЮ.



Сначала вкратце по процессу обучения: если совсем нихуя не знаешь, то лучше начинай учить именно HTML/CSS. Сверстаешь свой первый макет – учись верстать адаптивно. Почитывай материалы в инете, разные статейки, смотри интересные примеры, практикуйся, спрашивай непонятное в треде, читай литературу представленную здесь и ищи что-то сам. Постепенно придет понимание всех этих процессов, и че это вообще за хуйня. Как почувствуешь уверенность в верстке – перекатывайся на JS (мастхев, если хочешь развиваться). Можешь параллельно прикручивать готовые скрипты к своим сайтикам, смотреть что как работает. Ну а дальше работы не паханое поле. Двигайся, куда тебе захочется.



Необязательно вычитывать и проходить абсолютно все, что есть в пасте. Какие-то вещи тут повторяются, какие-то тебе и вовсе не нужны. Что-то возможно даже немного устарело. Чего-то не хватает. Сначала думай головой.



1. Первичные материалы в хаотичном порядке. Они часто дублируют друг друга. Можно проходить что-то одно по одному из направлений. Личные предпочтения выскажу ниже.



http://dash.generalassemb.ly/


http://learnlayout.com/


http://htmlacademy.ru/ - ультрагоднота, советую начинать изучение HTML/CSS отсюда. У них же есть интенсивы (обучающие видеоуроки, для лучшего понимания предмета, тоже мастхев) ссылки чуть ниже.


http://learn.javascript.ru/ - по JS на русском лютая годнота. Годнее только Флэнаган. Лучше начинать учить язык отсюда, потом уже книги.


http://www.codecademy.com/


http://codeschool.com/ - тут платно, но есть бесплатные курсы, годные вещи про jquery и git


http://htmlbook.ru/ Справочник. Каждый верстальщик пользуется им. Все непонятное смотрим там.


http://teamtreehouse.com - тут все платно, но первые две недели бесплатно, можно успеть пройти пару курсов, объясняют хорошо.



Интенсивы от академии:


Базовый интенсив HTMLacademy за 2015 год:


http://nnm-club.me/forum/viewtopic.php?t=899131



Продвинутый интенсив HTMLacademy за 2015 год:


http://nnm-club.me/forum/viewtopic.php?t=900609



Лично я бы советовал сначала браться за http://htmlacademy.ru/. В идеале пройди базовые курсы у них на сайте, затем купи/скачай с торрента интенсивы, пройди их.



Курсы дадут понимание элементов верстки, но только разрозненное. Вряд ли ты сможешь после них сверстать полноценный сайт самостоятельно, это нормально. Для того и нужен базовый интенсив. После него ты сможешь делать фиксированные простенькие странички. Запили минимум 3 из представленных учебных макетов. Практика просто необходима.



Затем переходи на продвинутый интенсив. Твоя основная задача там - освоить продвинутые инструменты верстки и адаптивность. Сверстай парочку тамошних тестовых макетов применяя все вышеописанные технологии и приемы.



Дальше можешь выкачивать макеты с простор интернета и верстать уже их. Наращивание сложности приветствуется. Где не прописана адаптивность, тоже запили сам. Старайся в каждом новом проекте улучшать код. Черпай инфу из инета и литературы. Узнавай полезные приемы.



Не лишним будет ознакомиться с сетками на flexbox и прочими новыми фишками. Вот здесь уже можно проплатить, если есть желание, продвинутые курсы в академии. Месяц там стоит 300 рублей, и за это время ты вполне успеешь пройти все даже дважды. Это не то чтобы мастхев, но понимание работы ксс-анимаций, хороших практик верстки, различных продвинутых элементов в новой спецификации и т.д. там дается. Хотя я буду лукавить, если скажу что всю эту инфу нельзя найти в инете и в разрозненном виде.


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



Текстовые редакторы:


http://brackets.io/


http://www.sublimetext.com/2


https://atom.io/



КНИГИ:



Тут надо выбирать индивидуально. Если по HTML/CSS, то желательно, чтобы книга была не старше 2012 года, ну или хотя бы переиздана. Читай все что интересно. В любом случае это будет полезно.



http://www.ozon.ru/context/detail/id/20279391/ - "Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript и CSS" Весьма неплохая книга, бегло позволит ориентироваться в основах веб-технологий и понять, как же все это говно вместе работает.


http://rutracker.org/forum/viewtopic.php?t=4214664 - "CSS ручной работы" Дэн Седерхольм


http://www.ozon.ru/context/detail/id/5647176/ - "Большая книга CSS" Дэвид Сойер Макфарланд


http://habrahabr.ru/post/240219/ - «Выразительный Джаваскрипт» Хавербек Марейн. Вводна книга по JS и программингу в целом. Для новичков может быть сложноватой.


http://frontendbookshelf.ru/ - список полезных книг. Большинство актуальны, можно выбрать по языку, технологии и конкретному уровню знаний. Первооочередную литературу желательно брать оттуда.


http://scanlibs.com/ что-то типа хранилища айти книг. Скачать книги можно бесплатно. Там есть дохуя всего. Если в свободном доступе не найдете, попробуйте поискать там.



Учебное задания УЛЬТРА ХАРДКОР ЛЕВЕЛ. Если считаешь, что тебе мало учебной хуйни. Сделай это и положи к себе в портфолио. Будет что показать на собеседовании. На данный момент устарели, но попрактиковаться все-таки можно:


http://htmlforum.ru/index.php?showtopic=47141


Появились новые тренировочные задания с ТЗ:


http://htmlforum.ru/index.php?showtopic=47974


http://htmlforum.ru/index.php?showtopic=47965



ПРИМЕРЫ ВЕРСТКИ ДЛЯ САМЫХ МАЛЕНЬКИХ:



Внизу видеокурс о том, как верстать PSD шаблон. Просто пример, чтобы посмотрели как выглядит работа и как верстают С НУЛЯ.


http://denweb.ru/put-veb-mastera_sod



Верстка по БЭМ


http://habrahabr.ru/post/203440/



Лично я все же посоветую черпать инфу по базовой верстке из интенсивов, ссылки чуть ниже. Там ребята показывают весь процесс и делают это качественно. Никаких ошибок, минимум стилизации и отсебятины.



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



http://frontender.info - годный ресурс по фронт-енд тематике


http://habrahabr.ru/post/114256/ - чеклист верстки. Если ваше говно проходит хотя бы половину пунктов, вы без проблем найдете работу в своем задрищенске.


http://habrahabr.ru/hub/webdev/


tympanus.net/codrops - тут есть годная еженедельная подборочка новостей из мира фронт-енда, рикаминдую


http://www.smashingmagazine.com/ - многое отсюда так или иначе переведено на русский, ресурс полезный для развития


http://css-tricks.com/ - тут можно найти много готовых шаблонов для решения часто встречающихся задач


http://ru.bem.info/ - БЭМ, методология фронт-енд разработки от Яндекса, рикаминдую прочесть доки, наверняка вы нихуя не поймете, но фраза "я прочитал конечно документацию БЭМ, но в силу своего уровня пока понял оттуда совсем немного" звучит на собеседовании гораздо лучше чем хлопание глазами. По БЭМу также немного поясняют в интенсиве академии.


http://goratchet.com/ - mobile first фреймворк от создателей бутстрапа.


http://getbootstrap.com/ - бутстрап. без комментариев, маст хэв. Популярный фронт-енд фреймворк, можно положить его в сонову вашего проекта или быстро накидать сайтец, если дизайн не важен.


http://www.ibm.com/developerworks/ru/ - очень неплохой ресурс от всем известной компании, есть там и статьи про веб-разработку.


http://sass-lang.com/, http://lesscss.ru/, http://lesscss.org/, http://learnboost.github.io/stylus/ - тоже полезные шутки, значительно прокачивают ваш CSS. Так называемые препроцессоры. Я пользуюсь less.


http://codepen.io/ - ресурс с кучей интересных примеров кода.


http://www.html5rocks.com/en/ - туториалы от гугла


http://www.sitepoint.com/html-css/, https://medium.com/tag/css, http://css-live.ru/ выборка статей по теме.



Список полезных каналов на ютубе


https://www.youtube.com/channel/UCyU5wkjgQYGRB0hIHMwm2Sg


https://www.youtube.com/channel/UCyIe-61Y8C4_o-zZCtO4ETQ


https://www.youtube.com/channel/UCwRXb5dUK4cvsHbx-rGzSgw


https://www.youtube.com/channel/UCVTlvUkGslCV_h-nSAId8Sw


https://www.youtube.com/channel/UCJbPGzawDH1njbqV-D5HqKw



3.Что делать дальше?



Загляни в програмач, там есть треды по JS и PHP. Читни тамошний фак, реши пару задачек и думай, что тебе хочется дальше делать. Здесь все-таки больше базовый фронт-енд и верстка, поэтому серьезные вопросы по программированию и инфу следует черпать там.


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



Гайд от анона по гитхабу:


http://randomfederation.github.io/



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


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



Как правило, несколько месяцев хватает на то чтобы научиться хорошо верстать, а это уже претензия на трудоустройство. На Джаваскрипт уйдет больше времени, хотя хардкорный JS необходим для вакансий, что уровнем повыше будут(но не всегда).



ОБЩИЕ МАТЕРИАЛЫ БЕЗ ОСНОВАТЕЛЬНОЙ СОРТИРОВКИ



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



Макеты для верстки:


Moose - http://yadi.sk/d/g74XxFDUPyrob - корпоративный сайт


Hotel - http://yadi.sk/d/5VEeZriDPyroK - туристический сайт


Seabird - http://yadi.sk/d/XVt_w-TrPyrp4 - корпоративный сайт


Appmo - https://yadi.sk/d/Ofaah1ZsTNrLf - лендинг приложения


Cleanwhite - https://yadi.sk/d/b05MLaKITNrLy - корпоративный сайт


Shoes - https://yadi.sk/d/Cp7qki0yTNrM4 - интернет-магазин обуви.


http://dbfreebies.co/templates http://freebiesbug.com/psd-freebies/website-template/ - cайты с макетами.


http://www.html5rocks.com/ru/tutorials/internals/howbrowsers... как работают браузеры.



Гайды по форматированию кода:


http://mdo.github.io/code-guide/ — стайлгайд по форматированию HTML и CSS


http://google-styleguide.googlecode.com/svn/trunk/htmlcssgui... и от гугла тоже гайд.


https://github.com/necolas/idiomatic-css/tree/master/transla... — перевод на русский


https://github.com/matmuchrapna/CSS-Guidelines/blob/master/R... — перевод на русский


CSS Style Guides http://css-tricks.com/css-style-guides/ — Статья со списком стайлгайдов


Ставить или не ставить закрывающий слэш? (англ.) http://www.colorglare.com/2014/02/03/to-close-or-not-to-clos... — статья-рассуждение по поводу закрывающего слэша в одиночных тэгах


https://htmlacademy.github.io/codeguide/?utm_source=%D0%9F%D... гайд от HTMLacademy самый свежий.



Пояснение по блочной модели/сетках:


Флоаты:


Старая, но подробная статья про флоаты: Раскладка в CSS: float -http://softwaremaniacs.org/blog/2005/12/01/css-layout-float/


Хорошая статья про флоаты на английском All About Floats | CSS-Tricks - http://css-tricks.com/all-about-floats/


И пара статей на Хабре: раз - http://habrahabr.ru/post/136588/ - и два - http://habrahabr.ru/post/136622/


Инлайн блоки:


Приёмы борьбы с пробелами после инлайн блоков (англ) - http://css-tricks.com/fighting-the-space-between-inline-bloc...


Флексбокс:


https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - гайд по флексам.



Фотошоп для верстальщика :


Почитать Николай Громов Photoshop для html-верстальщика http://nicothin.ru/page/photoshop-dlja-html-verstalshhika


Два видео-урока:


http://www.youtube.com/watch?v=xXv93EpWeyA


http://www.youtube.com/watch?v=NEKMOXDMz9w


Обсуждение видеоуроков:


http://www.youtube.com/watch?v=OoBUXVaE6SA


http://www.youtube.com/watch?v=gbrptHPp9dk



Улучшение и полировка кода, полезные приемы:


Напочитать в этот раз целая книга: http://css-live.ru/articles/obzor-inlajnovyj-kontekst-format...


Progressive Enhancement или всё-таки Graceful Degradation - http://habrahabr.ru/post/157115/


Так ли дорого прогрессивное улучшение? - http://habrahabr.ru/post/163877/


Туториал: Progressive enhancement на примере формы входа - http://htmlacademy.ru/demos/1


Progressive Enhancement: практичный подход к современной кроссбраузерной разработке. Видео доклада и презентация. - http://tech.yandex.ru/events/yac/2012/talks/373/


Dive Into HTML5 - http://diveintohtml5.info/


http://html5book.ru/css3-transform/ гайд по ксс-трансформациям.


https://events.yandex.ru/lib/talks/1520/ - по семантичной верстке.



Сервисы:


Тесты поддержки новых возможностей в браузерах


http://html5test.com


http://css3test.com


http://caniuse.com


http://fmbip.com/litmus/#css3-properties



Набор полифилов и рекомендаций


http://html5please.com


http://css3please.com



Сборник CSS3 анимаций


http://daneden.github.io/animate.css/



Генераторы CSS3 свойств


http://css3generator.com


Градиенты: http://www.css3factory.com/linear-gradients/



Определение поддержки


http://modernizr.com


Вспомогательные букмарклеты


http://mir.aculo.us/dom-monster/


http://responsive.victorcoulon.fr



Стартовый шаблон страницы


http://html5boilerplate.com



Наборы веб шрифтов


http://www.google.com/fonts


http://typekit.com


http://webfont.ru/


http://fontello.com/



Работа с префиксами


https://github.com/ai/autoprefixer


http://leaverou.github.io/prefixfree/



Оптимизаторы CSS/JS/SVG/Images:


https://github.com/css/csso


https://code.google.com/p/cssmin/


https://github.com/mishoo/UglifyJS2


http://closure-compiler.appspot.com/home


https://github.com/svg/svgo/


http://imageoptim.com


http://pngmini.com



Продвинутый валидатор ХТМЛ


https://validator.w3.org/nu/


Замеры скорости работы сайта


http://gtmetrix.com



Таблица UTF-8 символов


http://copypastecharacter.com



Паттерны для фонов


http://subtlepatterns.com


http://noisepng.com


http://repper.studioludens.com/repper.html



Фреймворки


http://getbootstrap.com


http://getpreboot.com



Введение в JavaScript:



Справочник Mozilla Developer Network - http://developer.mozilla.org/en/docs/Web/JavaScript


Учебник JavaScript - http://learn.javascript.ru/


JavaScript на Codecademy - http://www.codecademy.com/ru/tracks/javascript


JavaScript Garden - http://bonsaiden.github.io/JavaScript-Garden/ru/



JavaScript API


Canvas - http://developer.mozilla.org/en-US/docs/Web/HTML/Canvas


Geolocation API - http://developer.mozilla.org/en/docs/WebAPI/Using_geolocatio...


History API - http://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Ma...


Web Notifications API - http://developer.mozilla.org/en-US/docs/WebAPI/Using_Web_Not...


Full Screen API - http://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Us...


Device Orientation API - http://www.html5rocks.com/en/tutorials/device/orientation/


Ambient Light API - http://developer.mozilla.org/en-US/docs/WebAPI/Using_Light_E...


Vibration API - http://davidwalsh.name/vibration-api


Gamepad API - http://developer.mozilla.org/en-US/docs/Web/Guide/API/Gamepa...


Battery Status API - http://developer.mozilla.org/en-US/docs/WebAPI/Battery_Statu...


Page Visibility API - http://www.html5rocks.com/en/tutorials/pagevisibility/intro/


Web Workers - http://www.html5rocks.com/en/tutorials/workers/basics/



Еще статьи:


Улучшаем опыт взаимодействия с формам - http://simonenko.su/38146501854/improving-ux-for-web-form


Циклическое слайд-шоу на чистом CSS3 - http://habrahabr.ru/post/143025/


Библия и 9 заповедей начинающего версталы от господа бога Гугла


https://developers.google.com/web/fundamentals/