Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ВЕРСТКА ТРЕД ГАЙД 1.2 ПЕРЕРАБОТАННЫЙ И ОБНОВЛЕННЫЙ
- Итак, ты прочел ОП-пост и заинтересовался. Сейчас я немного сумбурно, но все же введу тебя в курс дела, если ты совсем нихуя в «в этом вашем вебе» не понимаешь.
- ВВЕДЕНИЕ.
- Что же такое верстка?
- Если вкратце, то это процесс создания страницы сайта. Заметьте, статичной страницы, без каких либо скриптов. Верстальщик использует языки разметки, в данном случае подразумевается 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 - интернет-магазин обуви.
- Крупный пак с псдшками для практики - https://mega.nz/#!CtYGSCbB!3Y6fDxxL_N_LstGFPGjHrhXbIoNqk4BzmNjjEmk2jPc
- http://dbfreebies.co/templates http://freebiesbug.com/psd-freebies/website-template/ - cайты с макетами.
- http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/ как работают браузеры.
- Гайды по форматированию кода:
- 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 — статья-рассуждение по поводу закрывающего слэша в одиночных тэгах
- https://htmlacademy.github.io/codeguide/?utm_source=%D0%9F%D0%BE%D0%BB%D0%B5%D0%B7%D0%BD%D0%B0%D1%8F+%D1%80%D0%B0%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B0&utm_campaign=c202ba4b5b-hamail_15102015&utm_medium=email&utm_term=0_a75c235315-c202ba4b5b-162022465 гайд от 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-block-elements/
- Флексбокс:
- 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-formatirovaniya.html
- 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_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/
- Библия и 9 заповедей начинающего версталы от господа бога Гугла
- https://developers.google.com/web/fundamentals/
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement