View difference between Paste ID: 3VAYADCd and fHfx4EE1

 ВЁРСТКА АЛТИМЕЙТ АНРИАЛИ ГАЙД 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/
 
 
 
 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
 пароль как обычно