ВЁРСТКА АЛТИМЕЙТ АНРИАЛИ ГАЙД v1.1 beta

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

1. Традиционная паста для тех, кто прочел оп-пост и заинтересовался:

Гайд для тех кто нихуя не умеет, родился в мухосранске и не имеет друзей, ЕОТ, детей(факторов которые мешают уехать из мухосранска).
Многие жалуются на отсутствие образования и блата как преграду для получения хорошей работы, это не проблема вовсе.
Шаг 1.
В твоем мухосранске наверняка есть вебстудия, делают они говно, но нам больше и не надо. И туда могут взять без опыта. Устраивайся туда работать за еду. 10к в месяц на первое время достаточно.
Спрашивать тебя будут основы, которые легко узнаются через википедию, надо знать что такое клиент-сервер и что пхп генерит странички на сервере, напиши пару хеллоу ворлдов и посмотри видеоуроки перед тем как устраиваться.
На этом этапе тебе нужно заработать базовый скилл. Ты научишься верстать говностранички, возненавидишь IE, научишься google driven development, поймешь почему гимп не замена фотошопу, узнаешь jQuery. Из побочных знаний может появится скилл в похапе или знание какой-нибудь CMS вроде джумлы. Почему эти скиллы побочные и не нужны? Потому что они дешевые на рынке и таких спецов хоть лопатой греби, конкуренция очень высокая.
Работаешь там полгода, говноконтора к тому моменту может даже обанкротится, но тебя это не должно волновать. Ты уже имеешь скилл, который позволит тебе сделать тестовое задание. Для второго шага тебе понадобится накопить примерно 30к денег.
Шаг 2.
Возле твоего мухосранска наверняка есть город миллионник, куда добираться меньше дня. Билет будет стоить до тысячи рублей. Первым делом тебе надо найти работу и жилье. То и другое можно найти в интернете. Лучше пользоваться услугами риелторов, ибо просто так найти жилье будет нереально. Лучше искать комнату с бабушкой, а не однушку это примерно в два раза дешевле и плюшками иногда угощать будут. На аренду должно уходить до 10к в месяц.
Твоей следующей работой должна быть контора с красивым дизайном. Зп 20-25 должно будет хватить. На этом этапе главное для тебя составление хорошего портфолио и приобретение расширенного скилла. Чтобы устроится тебе нужно будет выполнить тестовое задание. Тебе его могут дать сразу же или можешь попросить сам. Собеседование можешь провести по скайпу или съездить на день туда. Твое текущее портфолио их ничем скорее всего не убедит и упор надо делать на тестовое задание. Спрашивать тебя будут про какие-нибудь оптимизации, БЭМ и прочую никому не нужную в студиях хрень, где просто лепят пирожки. Чтобы все это знать тебе достаточно сидеть на каком-нибудь хабре на прошлой работе.
В этом месте тебе нужно будет работать около года, и накопить около 80к рублей. Через год у тебя за плечами будет около полсотни сайтов и некоторые из них даже красивые. За это время ты научишься делать крутые штуки, будешь знать jQuery виртуозно, полюбишь IE, и будешь презирать пхп-быдло и прочий скам, если повезет будешь знать что такое тасктрекер и система контроля версий. Главное тут не задерживаться и приступать к шагу 3.
Шаг 3.
Иди на hh.ru делай резюме с портфолио со своими крутыми сайтами, с таким портфолио тебя возьмет любая московская контора, даже яндекс. ЗП искать 60-80к на первое время. Идти не обязательно в студию, а лучше даже не в нее. Можно пойти делать системы для какого-нибудь внутреннего учета или в мобильную разработку. Многие предоставляют для иногородних компенсацию за жилье на первый месяц, но все равно тебе надо будет сначала оплатить это из своего кармана. Компенсация составляет примерно 90к. Однушка стоит около 30к в месяц, но надо будет иметь сумму в 3 раза больше чтобы оплатить риелторов и страховой депозит. Насчет депозита можно договориться выплатить его постепенно. Так что первая трата будет около 60к, квартира+риелтор. Еще через полгода-год зп может удвоится, и пацан к успеху пришел.

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


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

http://dash.generalassemb.ly/
http://learnlayout.com/
http://learn.shayhowe.com/
http://www.wisdomweb.ru/
http://htmlacademy.ru/ - ультрагоднота
http://eloquentjavascript.net/
http://learn.javascript.ru/ - по JS на русском лютая годнота. Годнее только Флэнаган
http://www.codecademy.com/
http://codeschool.com/ - тут платно, но есть бесплатные курсы, годные вещи про jquery и git
http://htmlbook.ru/ Справочник. Каждый верстальщик пользуется им. Все непонятное смотрим там.
http://teamtreehouse.com - тут все платно, но первые джве недели бесплатно, можно успеть пройти пару курсов, объясняют хорошо.


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

Текстовые редакторы:
http://brackets.io/
http://www.sublimetext.com/2

Интенсив от htmlacademy. Один из работников сказал, что не против раздачи. Если раздачи не будет - пишите в тред. Что такое интенсив от htmlacademy, посмотрите на их сайте.
https://mega.co.nz/#!NVIkySKQ!uksvWXFK20OKSeWvoLVXKloihG8Zn2Yx7-FPMS43kyI - ссылка на торрент
https://mega.co.nz/#F!8VgAVQhD!6QsQM2hTkh-6DRGdvKEYzA - сами файлы

Курс профессионального javaScript. Кантор Илья - автор learn.javascript.ru
http://rutracker.org/forum/viewtopic.php?t=4654156
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" Дэвид Сойер Макфарланд

Обучающее видео на английском. Все нужные технологии в подробных видеоуроках. Выбирай по душе и обмазывайся:
От lynda.com
http://rutracker.org/forum/tracker.php?f=1564&nm=lynda+com
От Tutsplus.com
http://rutracker.org/forum/tracker.php?f=1564&nm=Tutsplus.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://psd-html-css.ru/

Верстка по БЭМ
http://habrahabr.ru/post/203440/

Обычная верстка:
Внимание! Тут сделано с ошибками, но можно получить общее представление о том, как выглядит по шагам верстка
http://habrahabr.ru/post/202408/

Тот же самый шаблон, но уже на bootstrap:
Внимание! Тут сделано с ошибками, но можно получить общее представление о том, как выглядит по шагам верстка на bootstrap .
http://habrahabr.ru/post/211032/

Видео урок верстки шаблона на BOOTSTRAP+LESS с самого нуля. Язык английский, но очень понятный. Очень мало сложных фраз и неизвестных слов:
http://thefreecourses.blogspot.ru/2013/09/psd-to-html-for-designers.html

===========================
Официальное обращение к тем, кто выкладывает свой говнокод в архивах и файлообменниках:
>Идите нахуй.
или
>Используйте блять cssdesk или jsfiddle. Делать тут нам больше нехуй, кроме как выкачивать css
===========================

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

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.

5.Ультралевел.

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

Такие дела.

ПРЕДЫДУЩЕИЕ ТРЕДЫ В АРХИВАЧЕ:

1. http://arhivach.org/thread/3525/
2. http://arhivach.org/thread/8593/
3. http://arhivach.org/thread/13819/
4. http://arhivach.org/thread/17750/
5. http://arhivach.org/thread/21221/
6. http://arhivach.org/thread/25633/
7. http://arhivach.org/thread/26319/

10.http://arhivach.org/thread/37973/
11.http://arhivach.org/thread/42209/



P.S. Куча рандома от доброго анонаса, лень разбирать что там, смотрите сами

Завезу вам две пачки макетов.
Макеты от почтовой рассылки HA прошлого месяца:
1. Moose - http://yadi.sk/d/g74XxFDUPyrob - корпоративный сайт
2. Hotel - http://yadi.sk/d/5VEeZriDPyroK - туристический сайт
3. Seabird - http://yadi.sk/d/XVt_w-TrPyrp4 - корпоративный сайт

Макеты июня:
1. Appmo - https://yadi.sk/d/Ofaah1ZsTNrLf - лендинг приложения
2. Cleanwhite - https://yadi.sk/d/b05MLaKITNrLy - корпоративный сайт
3. Shoes - https://yadi.sk/d/Cp7qki0yTNrM4 - интернет-магазин обуви.

Видосы могу выложить уже завтра, сегодня будет последний вебинар.
Готовы ли верстаны самолично выкачать и заторентить видосы 4 интенсива? Самому качать 1080p с ютуба впадлу.

Так же, с каждым видосом в интерфейсе интенсива имеются разные полезные ссылки напочитать, интересуют?

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

Неделя 1.
Вводный
Создаём скелет проекта: структуру папок и файлы-заготовки
Почитать:
http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/
Видеозапись вебинара:
http://www.youtube.com/watch?v=_nBLvIoJTGE

2/8
Разметка
Создаём базовую HTML-разметку страниц проекта
Почитать:
http://mdo.github.io/code-guide/ — стайлгайд по форматированию HTML и CSS
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

https://github.com/necolas/idiomatic-css/tree/master/translations/ru-RU — перевод на русский
https://github.com/matmuchrapna/CSS-Guidelines/blob/master/README%20Russian.md — перевод на русский
CSS Style Guides http://css-tricks.com/css-style-guides/ — Статья со списком стайлгайдов
Ставить или не ставить закрывающий слэш? (англ.) http://www.colorglare.com/2014/02/03/to-close-or-not-to-close.html — статья-рассуждение по поводу закрывающего слэша в одиночных тэгах

Видеозапись второго вебинара:
http://www.youtube.com/watch?v=B9ZiDS6zlQc

3/8
Сетки
Создаём модульные сетки страниц проекта

Почитать:
Флоаты:

Старая, но подробная статья про флоаты: Раскладка в 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-block-elements/

Видеозапись:
http://www.youtube.com/watch?v=d7bSGc6SZSw

4/8
Фотошоп для верстальщика
Изучаем Фотошоп, оформляем крупные блоки макетов

Почитать Николай Громов 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

Прошу прощения, не было времени.
6/8
Оформление контента
Оформляем содержание. Завершаем вёрстку внутренних страниц

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

Видео:
http://www.youtube.com/watch?v=TS_xfAsaswc



7/8
Полировка и оптимизация
Оптимизируем и «доводим до блеска» верстку

Презентации вебинара:
Прогрессивное улучшение https://docs.google.com/file/d/0B91ZkUGZ3u30TG90b3Y0dlVKZnM/edit
HTML5 и CSS3 https://drive.google.com/file/d/0B7jBzyOyIfwYa0Nsc2ZnYWRMbTg/edit?usp=sharing
Адаптивный дизайн https://drive.google.com/file/d/0B_NbFm8OOjC4d2JxWWlqWEVfaWc/edit?usp=sharing

Статьи
Progressive Enhancement или всё-таки Graceful Degradation - http://habrahabr.ru/post/157115/
Так ли дорого прогрессивное улучшение? - http://habrahabr.ru/post/163877/
Graceful Degradation - http://serenity.su/blog/post/3026847774
Туториал: 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://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
css3 tag @support

Вспомогательные букмарклеты
http://mir.aculo.us/dom-monster/
http://responsive.victorcoulon.fr

Стартовый шаблон страницы
http://html5boilerplate.com

Наборы веб шрифтов
http://www.google.com/fonts
http://typekit.com
http://webfont.ru/

Работа с префиксами
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

Замеры скорости работы сайта
http://gtmetrix.com

Таблица UTF-8 символов
http://copypastecharacter.com

Паттерны для фонов
http://subtlepatterns.com
http://noisepng.com

Фреймворки
http://getbootstrap.com
http://getpreboot.com

Видео:
1 часть http://www.youtube.com/watch?v=7nUPn3k0g38
2 часть http://www.youtube.com/watch?v=lpbcWfyYGtc

8/8
Введение в JavaScript
Введение JavaScript, написание простейших скриптов с помощью фреймфорка VanillaJS

Сайты
Обучение 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_geolocation
History API - http://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
Web Notifications API - http://developer.mozilla.org/en-US/docs/WebAPI/Using_Web_Notifications
Full Screen API - http://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
Device Orientation API - http://www.html5rocks.com/en/tutorials/device/orientation/
Ambient Light API - http://developer.mozilla.org/en-US/docs/WebAPI/Using_Light_Events
Vibration API - http://davidwalsh.name/vibration-api
Gamepad API - http://developer.mozilla.org/en-US/docs/Web/Guide/API/Gamepad
Battery Status API - http://developer.mozilla.org/en-US/docs/WebAPI/Battery_Status
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/

Видео:
http://www.youtube.com/watch?v=f4uxp05AZrU

Как бонус, для того, чтобы верстанон с двача стал хорошим версталой и будущим элитфронтендером, завожу толькопоявившуюся годноту:

Библия и 9 заповедей начинающего версталы от господа бога Гугла
https://developers.google.com/web/fundamentals/

Видео с последнего интенсива скачать бесплатно без смс одним торрентом.
http://rghost.ru/56518222

Полный учебнк Ильи Кантора в формате pdf в одном файле и все это большими буквами(кто покупал, тот поймет)http://rghost.ru/56491416
пароль как обычно