• Главная
  •  > 
  • Новости
  •  > 
  • Профессия "веб-разработчик": особенности и интересные факты. Он не воспринимает всерьез мобильные приложения на HTML

Профессия "веб-разработчик": особенности и интересные факты. Он не воспринимает всерьез мобильные приложения на HTML

Этапы разработки веб-сайта

На сегодняшний день существуют несколько этапов разработки веб-сайта:

  • Проектирование сайта или веб-приложения (сбор и анализ требований, разработка технического задания , проектирование интерфейсов);
  • Разработка креативной концепции сайта;
  • Создание дизайн-концепции сайта;
  • Создание макетов страниц;
  • Создание мультимедиа и FLASH -элементов;
  • Вёрстка страниц и шаблонов ;
  • Программирование (разработка функциональных инструментов) или интеграция в систему управления содержимым (CMS);
  • Оптимизация и размещение [ ] материалов сайта;
  • Тестирование и внесение корректировок;
  • Публикация проекта на хостинге ;
  • Обслуживание работающего сайта или его программной основы.

В зависимости от текущей задачи, какие-то из этапов могут отсутствовать.

Создание технического задания Составлением технического задания могут заниматься проектировщик , аналитик, веб-архитектор , менеджер проекта вместе или по отдельности.:В случае, когда сайт разрабатывается фрилансером, техническое задание может быть составлено со стороны компании заказчика). Работа с заказчиком начинается с заполнения брифа , в котором заказчик излагает свои пожелания относительно визуального представления и структуры сайта, указывает на ошибки в старой версии сайта, приводит примеры сайтов конкурентов. Исходя из брифа, менеджер составляет техническое задание, учитывая возможности программных и дизайнерских средств. Этап заканчивается после утверждения технического задания заказчиком. Важно сразу отметить, что этапы проектирования веб-сайтов зависят от многих факторов, таких как объём сайта, функциональность, задачи, которые должен выполнять будущий ресурс и многое другое. Однако, есть несколько этапов, которые в обязательном порядке присутствуют в планировании любого проекта.:В результате в документе, где описано техническое задание, могут быть следующие основные разделы:

  1. Цели и назначение сайта;
  2. Аудитория сайта;
  3. Технические характеристики;
  4. Содержание сайта (структура сайта с подробным описанием элементов и функционала каждой страницы);
  5. Интерактивные элементы и сервисы (формы обратной связи, поиск на сайте, форум на сайте);
  6. Формы (отправки на почту, подписки на рассылку, обратной связи);
  7. Система управления контентом;
  8. Требования к материалам;
  9. Перенос на хостинг.
Дизайн основной и типовых страниц сайта Начинается работа с создания дизайна , обычно в графическом редакторе . Дизайнер создаёт один или несколько вариантов дизайна, в соответствии с техническим заданием. При этом отдельно создаётся дизайн главной страницы, и дизайны типовых страниц (например: статьи, новости, каталог продукции). Собственно «дизайн страницы» представляет собой графический файл, слоеный рисунок, состоящий из наиболее мелких картинок-слоев элементов общего рисунка.
При этом дизайнер должен учитывать ограничения стандартов HTML (не создавать дизайн, который затем не сможет быть реализован стандартными средствами HTML). Исключение составляет Flash -дизайн.
Количество эскизов и порядок их предоставления оговаривается с проект-менеджером. Также менеджер проекта осуществляет контроль сроков. В больших веб-студиях в процессе участвует арт-директор, который контролирует качество графики. Этап также заканчивается утверждением эскиза заказчиком. HTML-верстка Утверждённый дизайн передаётся HTML-верстальщику , который «нарезает» графическую картинку на отдельные рисунки, из которых впоследствии складывает HTML-страницу. В результате создаётся код, который можно просматривать с помощью браузера. А типовые страницы впоследствии будут использоваться как шаблоны . Программирование Далее готовые HTML-файлы передают программисту. Программирование сайта может осуществляться как «с нуля», так и на основе CMS - системы управления сайтом. Веб-разработчики часто называют CMS «движком ».
В случае с CMS надо сказать, что сама «CMS» в некотором смысле это готовый сайт, состоящий из заменяемых частей. «Программист» - в данном случае правильно будет назвать его просто специалистом по CMS - должен заменить стандартный шаблон, поставлявшийся с CMS, на оригинальный шаблон. Этот оригинальный шаблон он и должен создать на основе исходного «веб-дизайна».
При программировании сайта специалисту назначаются контрольные точки сроков. Завершающим этапом разработки сайта является тестирование Процесс тестирования может включать в себя самые разнообразные проверки: вид страницы с увеличенными шрифтами, при разных размерах окна браузера , при отсутствии флэш-плеера и многие другие. Также - юзабилити-тестирование .
Обнаруженные ошибки отправляются на исправление до тех пор, пока не будут устранены. Сроки контролирует менеджер проекта. Также, на этом этапе привлекают к работе дизайнера, чтобы он провёл авторский надзор . Размещение сайта в Интернет Файлы сайта размещают на сервере провайдера (хостинга) и производят нужные настройки. На этом этапе сайт пока закрыт для посетителей. Наполнение контентом и публикация Сайт наполняют контентом - текстами, изображениями, файлами для скачивания и т. д. Иногда тексты составляются специалистом студии, иногда контентом занимается ответственное лицо со стороны заказчика. Это решается на этапе составления технического задания. В случае если контент составляется представителем студии, то это происходит и утверждается параллельно с другими этапами проекта.:На каждой странице находятся текстовые блоки, они могут быть типовыми (стандартные) и не типовыми. Как правило нетиповой текстовый блок расположен на странице 404. К стандартным текстовым блокам относятся:
  • header сайта;
  • footer сайта;
  • навигационная цепочка, или "хлебные крошки".
Основные элементы текстового блока:
  1. заголовки 1, 2 и 3 уровней;
  2. изображения;
  3. изображения в тексте;
  4. галереи;
  5. текст;
  6. раскрывающийся блок текста, который содержит заголовок;
  7. нумерованные и ненумерованные списки;
  8. таблицы;
  9. файлы для скачивания;
  10. видео.
Внутренняя SEO-оптимизация Связана с некоторыми изменениями самого сайта. SEO-оптимизация начинается с определения семантического ядра. Здесь определяются такие ключевые слова, которые привлекут наиболее заинтересованных посетителей, по которым выиграть конкуренцию проще. Затем эти слова вносятся на сайт. Тексты, ссылки, другие теги адаптируются так, чтобы поисковые системы могли их успешно находить по ключевым словам. Внешняя SEO-оптимизация Сводится, как правило, к построению структуры входящих ссылок. Это собственно и есть раскрутка сайта . К разработке сайта внешняя SEO-оптимизация не имеет отношения. SEO-оптимизация классифицируется на «белую» и «черную» (такую, после которой сайт за две недели попадает в топ, а потом в бан поисковиков). Настоящая, «белая» SEO-оптимизация, это трудоёмкий и долгий процесс, стоимость которого может в несколько раз превышать расходы на создание сайта. Сдача проекта Заказчик или его доверенное лицо просматривают готовый проект и в случае, если все устраивает, то подписывают документы о сдаче проекта.
Также, на этом этапе производится обучение представителя заказчика навыкам работы в администраторской зоне сайта.

Интернет - это почти 3,5 миллиарда пользователей и свыше миллиарда сайтов. Стремительное развитие информационных технологий привело к появлению профессий, о которых 10 лет назад никто даже не думал. Верхние строчки в рейтингах самых востребованных и высокооплачиваемых IT-специальностей занимает профессия .

В мире более 11 миллионов веб-разработчиков разного профиля и уровня. Однако, по данным CMS Magazine и «Рейтинга Рунета», 62% компаний и веб-студий остро ощущают нехватку кадров. Вот как они ответили на вопрос о дефиците сотрудников в сфере веб-разработки.

На сегодняшний день только четверть всех веб-студий устраивает количество их штатных сотрудников. Получается, программистов много, но всё равно не хватает. Почему?

Причин несколько:

  • 15,9% работодателей считают, что уровень образования потенциальных сотрудников не соответствует требованиям рынка (нет достойного портфолио, отсутствует опыт командной работы).
  • 15% компаний полагают, что на рынке в принципе мало квалифицированных веб-программистов, способных разрабатывать сложные проекты (особенно в регионах).
  • 7,3% компаний замечают, что многие специалисты веб-разработки предпочитают фриланс работе в штате.
  • 6,3% веб-студий полагают, что сотрудничества не получается из-за несовпадения зарплатных ожиданий соискателей с возможностями работодателей.

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

Взгляните, например, вот на этот график «Рейтинга Рунета».


Из статьи «Рынок веб-разработки остаётся рынком „ручного“ труда»

Разработчики-фрилансеры занимают довольно крупную нишу в дорогих проектах. Им достаётся 6% проектов стоимостью от 100 до 300 тысяч рублей и 8,3% проектов дороже 300 тысяч рублей.

Требуется веб-разработчик

Убедиться в востребованности профессии веб-программиста легко. Достаточно зайти на любой онлайн-сервис по трудоустройству.

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

28,4% компаний ищут сотрудников с помощью job-ресурсов, 21,4% - через социальные сети и по рекомендациям, 16,2% признают достаточно эффективным раздел с вакансиями на собственном сайте и 12,7% хантят сотрудников «со школьной скамьи», то есть приглашают на стажировку талантливых студентов, отслеживают медалистов и олимпиадников, устраивают конкурсы для студентов и так далее.

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

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

Владимир Завертайлов, основатель и руководитель интернет-студии «Сибирикс»

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

Квалификация

Под веб-разработчиком работодатель обычно понимает универсального специалиста full-stack.

Full-stack состоит из front-end- и back-end-разработки. Разработчики front-end обеспечивают создание внешнего вида сайта (портала, проекта). Back-end-разработка включает в себя теневую сторону ресурса, то, чего не видно пользователю, изнанку сайта. Но, независимо от специализации, веб-программист должен знать полный цикл. Без этого невозможно представить, как тот кусок задачи, который ты реализуешь, будет интегрироваться с общим проектом.

На сегодняшний день стандартом веб-разработки (full-stack) является следующий комплекс знаний.

Вёрстка + браузерный язык программирования + серверный язык + язык для работы с базами данных + фреймворк(и).

Получить такой комплекс знаний можно на . Это образовательная площадка, где собраны лекции и вебинары для тех, кто хочет изучать программирование. Специализация «веб-разработчик» рассчитана на 11 месяцев (плюс стажировка) и состоит из нескольких курсов.

  1. HTML / CSS . Это основы создания сайтов. Обучение идёт через практику: студенты разрабатывают сайт интернет-магазина, изучая параллельно свойства и возможности HTML / CSS.
  2. JavaScript - первый и второй уровни. Этот язык программирования призван сделать сайт живым: он взаимодействует с посетителем ресурса, реагирует на движения курсора, клики мыши и нажатия на клавиши. В первом курсе по JavaScript даются азы, во втором полученные знания закрепляются.
  3. Основы баз данных . Это 20 интенсивных видеоуроков о системах хранения и обработки данных, для доступа к которым используется язык SQL (Structured Query Language).
  4. PHP - первый и второй уровни. Этот язык программирования входит в тройку самых популярных. На первом уровне студенты изучают принципы объектно-ориентированного программирования и учатся правильно использовать основные конструкции языка. Второй уровень позволяет отточить владение PHP до виртуозности.
  5. HTML5 и CSS3 . Эта связка даёт возможность верстать макеты, создавать и редактировать статические сайты. На курсе студенты проходят все этапы создания рекламного сайта для коммерческой организации.
  6. AngularJS / D3.js . Здесь студенты учатся работать с D3.js в симбиозе с мощнейшим фреймворком построения одностраничных веб-приложений Angular.js.
  7. Yii framework . Это один из самых популярных и востребованных фреймворков на PHP. На лекциях рассматривается базовый и продвинутый шаблоны приложения и разрабатывается аналог программы Evernote. В качестве домашнего задания студентам предлагается создать программу-календарь, которую впоследствии можно использовать в портфолио.

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

Сливки

И в конце о самом приятном - о деньгах. Ведь, как упоминалось вначале, профессия универсального веб-разработчика не только востребованная, но и высокооплачиваемая.

По данным агентства «Тэглайн», веб-программисты получают в 1,8 раза большую зарплату, чем среднестатистический житель России.

Средняя зарплата веб-разработчика по стране - 60 310 рублей, в Москве - 75 270 рублей, в регионах - 46 790 рублей.

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

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

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

Он должен знать HTML, JAVA, JAVAScript, РНР, CGI, Perl, иметь опыт работы с такими инструментами web-разработчиков, как Dreamweaver, Flash и ColdFusion. Эти языки и программы расширяют возможности сайтов, помогают вносить разнообразие: элементы анимации, звук, интерактивные игры, онлайновые анкеты и функции Интернет-торговли.

Работа web-программиста непосредственно связана с глобальной сетью Интернет. Такой специалист создает программы, способные функционировать в ее пределах. Без его участия не станет работать ни один интернет-проект. Web-программисты создают динамические страницы, пишут интерфейсы к базам данных, составляют технические задания проектов. Если, к примеру, web-сайты — дома, то web-программисты — архитекторы, которые мыслят новыми, компьютерными категориями.

Особенности профессии

Деятельность web-программиста включает в себя:

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

Плюсы и минусы профессии

Плюсы:

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

Минусы:

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

Место работы

Web-программистов ждут в web-студии, Интернет-компании, организации, деятельность которых связана с интернетом, компании, структура организации которых подразумевает существование такого специалиста.

Важные качества

  • усидчивость;
  • внимательность;
  • хорошая память;
  • способность выдерживать серьезные умственные нагрузки;
  • умение слаженно работать в команде;
  • профессиональные навыки:
  • желательно наличие технического образования;
  • владение языками программирования, такими как PHP/ Perl/ Ruby, JavaScript, реже Java/С/C++ и др.;
  • опыт работы с массивными базами данных;
  • знание протокольной системы и других систем разработки;
  • в профессии web-программиста большую роль играет не наличие образования, а развитые способности в области программирования интернет-сайтов.

Обучение на web-программиста

Чтобы стать веб-программистом, можно получить высшее техническое или математическое образование по специальностям «информатика и вычислительная техника», «программное обеспечение вычислительной техники и автоматизированных систем», «прикладная математика» можно получить в ведущих технических ВУЗах Москвы. Или пройти курсы.

Международное учебное заведение, обучает . Работает с 1999 года. 42 филиала в 16 странах мира. Крупнейший авторизованный учебный центр Microsoft, Cisco, Autodesk. Студенты получают международные сертификаты и международный диплом. Главная цель - трудоустройство каждого выпускника.

Курс . Практический годовой курс для тех, кто хочет стать профессиональным веб‑разработчиком, запустить свой интернет‑проект или веб‑сервис и получить первые заказы на разработку. После прохождения курса и выполнения всех дипломных работ вы получите диплом Веб‑разработчика. Целый год вы будете кодить на разных языках веб-разработки и работать с основными инструментами программирования под руководством кураторов.

Оплата труда

Зарплата на 04.04.2019

Россия 30000—120000 ₽

Москва 60000—250000 ₽

Ступеньки карьеры и перспективы

Успешный начинающий программист в будущем может претендовать на должности: руководитель группы программистов, менеджер проекта, IT-директор.

13 сентября, в 256-й день года, программисты неофициально отмечают свой профессиональный праздник. Число 256 выбрано людьми, вдыхающими в компьютерное железо "душу", потому что это количество целых чисел, которое можно выразить с помощью одного восьмиразрядного байта, а также это максимальная степень числа 2, которая меньше 365 — количества дней в году.

До сих пор в календаре профессиональных российских праздников День программиста не был упомянут. Но в июле 2009 г. года Министерство связи и массовых коммуникаций России подготовило и внесло в правительство проект указа президента РФ "О Дне программиста". Специалисты министерства решили от традиции не отступать и определить День программиста на 256-й день года — 13 сентября, а если год високосный - 12 сентября.

Программисты шутят

Программистские приметы:

  • Если новая программа с первого раза компилируется без ошибок, значит, она написана принципиально неправильно.
  • Если к вам перестали поступать жалобы на вашу программу, значит, ею уже никто не пользуется.
  • Чем универсальнее написана программа, тем меньше найдется мест, где можно было бы ее применить.
  • Чем точнее программист выполняет требования заказчика, тем бестолковее получается программа.
  • Чем больше заказчик понимает в программировании, тем больше он мешает работе.
  • Ошибки легче всего делаются и труднее всего обнаруживаются в самых простых местах программы.
  • Нет более живучих программ, чем заплатки, сделанные на скорую руку.
  • Чем чаще программист жалуется на чужой soft, тем хуже он делает свой.

Программист ставит себе на тумбочку перед сном два стакана. Один с водой - на случай, если захочет ночью пить. А второй пустой - на случай, если не захочет.

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

Фаза 1 - Нюб

Мы все с теплотой вспоминаем наше первое знакомство с веб разработкой: период когда мы понятия не имели, что пишем. Каждая новая строчка кода казалась чем-то сверхестественным! Doctype? Чё это ваще?! Зачем нужен

Это было с каждым из нас!

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

Фаза 2 - Первые шаги

Через некоторое время, когда вы накопили достаточное количество знаний, приходит время делать свои первые шаги в мир кодинга. Если на первой фазе мы понятия не имели, как и где можно получить знания, то на второй мы начинаем копить свой первый маленький опыт. Конечно на данном этапе CSS нам кажется ещё чем-то странным, но мы уже можем с горем пополам стилизовать наши страницы и любоваться их видом в браузере. Ах.. это прекрасное чувство!

Фаза 3 - Негодование

Представьте, что вы потерялись в пещере, и ваш фонарик начинает гаснуть, в то время как вы ищите выход. С каждым шагом вы всё больше надеетесь увидеть проблеск света. Процесс обучения нашей профессии похож на эту ситуацию. Мы не выйдем на свет. Нам сначала нужно перелопатить кучу учебников, документации, кода. Тут главное не “перегореть”.

Если сейчас у вас как раз этот период, знайте, что вы не одни. Мы все прошли через это. Будьте настойчивы, и рано или поздно вы найдёте выход и перейдёте к следующей фазе.

Фаза 4 - Ага!

О да! Тот самый момент... прозрения! “Ага! До меня наконец дошло!”. Что может быть лучше этого чувства?! Как правило, большинство из нас ощущали его, сидя в тёмной комнате с красными глазами поздней ночью, когда весь остальной мир тихо спал.

Фаза 5 - Хрупкий код

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

Но вы уже умеете что-то делать! Работа с Github сводится к исправлению мелких недочётов и документации, но это даже очень полезно!

Фаза 6 - Копипаст

Это очень важный этап! На этой стадии мы начинаем больше смотреть на чужой код, перенимать какие-то фишки, ну или копировать чужой пример полностью. Эй! Не раскисай, в каждой профессии наступает подобный период! К счастью, благодаря Github, данный процесс приобрёл легальную форму! Конечно же тупо копируя чужой код, вы далеко не уйдёте. Просто ищите вдохновения от других, и рано или поздно вы создадите своё.

Фаза 7 - Самоуверенность

На данном этапе вы наконец-то уже “в теме”! Вам конечно же ещё есть к чему стремиться, однако скорость вашего развития огромна. Но товарищи по цеху говорят, что вы даже не представляете, как мало вы знаете.

В этот период главное не зазнаваться и не быть слишком самоуверенным. От этого никто не выиграет, а наоборот, в будущем это может вам аукнуться. Если вы вдруг захотите где-то съязвить и написать коммент типа “Эй ты, нюб! Иди учись кодить!” или что-то вроде этого, то воздержитесь. Не так давно вы сами были нюбом. Не унижайте людей. Мы все варимся в одном котле, просто у всех нас разный уровень.

Фаза 8 - Использование Vim

Если вы когда-то случайно взглянули на экран соседа и увидели, что он разрабатывает проекты с бешеной скоростью, то он наверняка использует редактор Vim. Когда вы максимально разовьёте свои навыки и будете умело пользоваться различного рода инструментами, то в глазах начинающих вы будете супер магом!

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

Фаза 9 - Написание кода становится искусством

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

Код является творением искусства, когда он легко читается, и легко понимается его назначение. На данном этапе пишите код для людей, а не для машины.

Фаза 10 - Закалённый разработчик

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

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

Фаза 11 - Супер Звезда

Мало кому удаётся достичь этой высоты. На этой стадии вы помимо основной работы, выступаете на конференциях, выступаете в качестве тимлидера каких-то opensource проектов и находите время, чтобы внести свой вклад в профессии и помочь адаптироваться новичкам. О вас говорят, как о людях, которые создавали компиляторы и парсеры.

О таких, как вы, говорят, что “он звезда” или “ниндзя”, хотя вам не по нраву такие ярлыки. Вам, как никому другому, известно, сколько ещё есть вещей, которые можно узнать!

  • Перевод
  • Tutorial

Дорога длинна и трудна, но интересна и полезна!

Статья задумывалась как практическое руководство для желающих стать профессиональным веб-разработчиком. Я уже более 20 лет пишу код для веба. Я ежедневно работаю с веб-разработчиками и помогаю им. В статье я опишу, что вам нужно выучить, когда вам нужно это выучить и где взять информацию (чаще всего даже бесплатно). Затем я дам совет по получению реального опыта, и что самое важное – по получению денег за написание кода.

По статье разбросано множество ссылок на бесплатные и важные ресурсы. Для простоты я собрал их в PDF и разбил по категориям. Мне не платят за упоминания сайтов, ссылки на которые я привёл – я всего лишь хочу порекомендовать вам лучшие ресурсы, чтобы помочь вам достичь вашей цели.

Что нужно помнить:

1. Статью разрешается пролистывать

Руководство может помочь вам вне зависимости от вашего положения на дороге к профессиональной разработке. Прокрутите его к тому заголовку, который лучше всего описывает ваше сегодняшнее положение, и читайте оттуда. Если вы только начали этот путь, или пока размышляете об этом – последуйте совету Короля из «Алисы в стране чудес»:

Начните с начала, и продолжайте, пока не дойдёте до конца; и там уже остановитесь.

2. Попробуйте всего понемногу, а затем выбирайте специализацию.

Деньги – не самое важное. Вам необходимо ЛЮБИТЬ ваше занятие! Но вы не узнаете, что вам нравится, пока не попробуете.


Найдите свою страсть, а потом монетизируйте её

Руководство поможет вам ознакомиться с как можно большим количеством областей веб-разработки как можно быстрее. А потом поможет вам выбрать специализацию в той области, что вам понравилась. Сначала вы не достигнете совершенства ни в чём – вы выучите основы, и потом продолжите изучение. Найдите свою страсть, и я покажу вам, как двигаться дальше.

Я решил писать код. Мне нравится веб. Я не знаю, с чего начать


У вас всё получится!

Поздравляю! Это серьёзный первый шаг и начало чего-то весьма захватывающего. Но это может оказаться и очень сложным. Не волнуйтесь, я помогу.

Сначала вам нужно быстро познакомиться с основами всех областей веб-разработки («полный цикл»). Обучение будет разнообразным, но неглубоким. Это нужно для того, чтобы найти область, которая вам нравится, а также приобрести основные навыки в разных областях. Тогда вы сможете понимать и работать с большим набором задач, вне зависимости от того, на чём вы остановите свой выбор.

Изучите основы HTML

Язык разметки гипертекста, Hypertext Markup Language (HTML), контролирует содержимое и разметку того, что вы видите в браузере. Начав с него, вы получаете интерфейс пользователя, с которым можно взаимодействовать, и видите результаты работы своего кода. При изучении более сложных языков его важность будет возрастать. Вам ведь не нужно кодить вслепую.

Вот, что вам нужно изучить на тему HTML:

Я уже знаю основы HTML

Круто! Это очень важный шаг. Теперь изучите основы JavaScript.

Изучите основы JavaScript

JavaScript – язык веба, и все основные браузеры (Chrome, Firefox, Safari, IE, множество других) поддерживают его. Каждый сайт, каждое веб-приложение, которым вы пользовались, скорее всего, содержит огромное количество JS-кода. Не говоря уже о том, что язык набирает популяность и на других платформах – сервера, настольные компьютеры, другие устройства.

Пока вам нужны основы, и для этого подойдут следующие ресурсы:

Я знаю основы JavaScript и HTML

Потрясающе! Теперь добавим к вашим навыкам CSS

Изучите CSS

CSS, или Cascading Style Sheets (каскадные таблицы стилей). Используются для настройки внешнего вида элементов HTML на странице. Ознакомьтесь с бесплатным обучающим материалом от Mozilla, а затем обращайтесь к ресурсу CSS-Tricks для решения самых сложных проблем (справа вверху есть поиск).

Переходим к бэкенду

До сих пор мы с вами рассматривали то, что называют «фронтендом» веб-разработки. Вы ознакомились с основными языками, работающими в браузере. Пора переходить к бэкенду – коду, работающему на сервере. Не волнуйтесь, сервер вам не понадобится – ваш компьютер справится с этим.

Языков для бэкенда масса, но поскольку вы знакомы с JavaScript, я порекомендую изучить использование Node.js. Он позволяет запускать JS-код на сервере, а не в браузере.

В дополнение к этому вам необходимо изучить Express и MongoDB.

Express
Это библиотека, с помощью которой Node.JS может работать веб-сервером (слушать запросы от страниц и отправлять им ответы).
MongoDB
Это база данных, позволяющая вам хранить и извлекать информацию.

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

Мне нужно выбрать между «фронтенд», «бэкенд» и разработкой полного цикла

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

К этому моменту вы писали два типа кода. Один предназначен для взаимодействия с пользователем, другой – с данными. Что вы предпочитаете?

Взаимодействие с пользователем? Поздравляю, вы фронтенд-разработчик!

Взаимодействие с данными? Поздравляю, вы бэкенд-разработчик!

Оба? Поздравляю, вы разработчик полного цикла!

Ничего не понравилось? Поздравляю, веб-разработка – это не для вас. Возрадуйтесь, что вы поняли это сейчас, и не потеряли кучу времени и денег. Не готовы сдаваться? Может, вам не попался язык, который пришёлся бы вам по душе? Попробуйте изучить другие языки в разделе «Я хочу быть бэкенд-разработчиком».

Я хочу быть разработчиком полного цикла

Круто. Вам нужно ознакомиться со всем содержимым разделов «Я хочу быть бэкенд-разработчиком» и «Я хочу быть фронтенд-разработчиком».

Я хочу быть фронтенд-разработчиком и я знаю основы JavaScript, HTML и CSS

Для эффективной работы фронтенд-разработчиком вам необходимо в совершенстве овладеть HTML, CSS и клиентским JavaScript. Также вам нужно будет хорошо разобраться в нескольких важных фреймворках. Вы приобретёте навыки, которые работодатели и клиенты ожидают найти в разработчиках фронтенда.

К этому моменту вы уже должны знать основы HTML. В противном случае вернитесь к разделу «Изучите основы HTML».

Изучите промежуточный и продвинутый HTML
Ознакомьтесь с обучающим материалом по промежуточному HTML, а затем – по продвинутому .
Изучите продвинутый клиентский JavaScript


Отличная серия книг по JS, при этом бесплатная

Для поднятия вашего уровня владения JavaScript, я рекомендую серию книг «You Don’t Know JS» за авторством Кайла Симпсона. Автор выложил всю серию в онлайн совершенно бесплатно:

Кроме того, вашим лучшим другом должен стать и MDN JavaScript .

[Также совершенно бесплатно вам доступен превосходный перевод отличной книги "Выразительный JavaScript " - прим.перев.]

Знать «троицу фронтенда», HTML, CSS и JavaScript – это, конечно, здорово. Но для зарабатывания денег придётся вам познакомиться с некоторыми фреймворками.

Изучите jQuery
Это самая популярная библиотека JS всех времён. Хотя из-за некоторых новых фреймворков важность jQuery чуть поуменьшилась, если вы ищете работу, велика вероятность, что jQuery будет присутствовать в описании необходимых навыков (и упоминаться на собеседовании) ещё много лет.

Рекомендую изучить jQuery при помощи материалов FreeCodeCamp – это быстрый и эффективный метод. После этого отправляйтесь на официальный обучающий сайт – там вы найдёте дополнительные инструкции.

Изучите популярный JS-фреймворк
Фреймворки делают работу с определённым языком или технологией легче, поскольку решают наибольшие проблемы, существующие у выбранной технологии. JavaScript очень благотворно повлиял на разработку и популяризацию фреймворков.

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

Во время написания этой статьи следующие фреймворки пользовались популярностью:

Выбрав наиболее подходящий фреймворк и хорошенько ознакомившись с ним, стоит изучить идущий в паре с ним CSS-фреймворк. Два крупнейших игрока на этом рынке сегодня – Bootstrap и Material Design.

Bootstrap
Bootstrap сделали разработчики Twitter, и он уже довольно взрослый и популярный. Версии Bootstrap существуют для Angular, Angular 2 и React.
Material
Material – это набор правил дизайна, разработанный в Google. Он набирает популярность, существуют его версии для Angular и React. Поскольку Angular – это тоже детище Google, сочетается Material с ним превосходно.

Вот вам несколько ссылок:

Поздравляю! У вас есть ключевые навыки фронтенд-разработчика!


Вы только посмотрите на него!

Я хочу быть бэкенд-разработчиком

Прекрасно! Первый шаг – выбор языка. Для работы с бэкендом существует много языков, и у каждого есть свои преимущества и недостатки. Ознакомьтесь с таблицей языков программирования, отсортированных по популярности. Все они уже десять лет входят в десятку лучших. Отмеченные зелёным – это веб-языки, которые с годами набирают популярность.


TIOBE Index of Programming Languages, www.tiobe.com/tiobe_index?page=index

Концентрируйтесь на языках, чьи названия я обвёл зелёной рамкой. Если вы не знаете их, начинайте сверху таблицы и идите вниз. Останавливайтесь, когда найдёте то, что вам нравится, и копайте вглубь!

Если вы знакомы с одним из отмеченных зелёным цветом языков, и он вам нравится – концентрируйтесь на нём.

Подкачайте необходимые для интервью умения
Вам нужно подготовиться не только к написанию кода. В хорошей статье с Life Hacker описано много полезной и ценной информации.
Главное – закрепиться на рынке
Не сильно переживайте насчёт получения работы мечты у работодателя мечты с зарплатой мечты. Сначала просто добейтесь получения работы, где вы будете писать код за деньги. Получив больше опыта, сможете планировать следующий шаг.
Хочу быть фрилансером
Сам себе хозяин – это хорошо, но это одновременно и огромное давление, и большие сложности. Лучший источник информации по фрилансу из всех, что я видел - DoubleYourFreelancing.com . У него есть серия статей , которые помогут вам стать фрилансером лучше, чем это получилось бы у меня. Читайте.

Ещё один вариант, если вы в себе уверены – сервис Toptal . Они принимают лишь 3% из всех, кто подаёт заявки, и этот процесс очень сложен, но если вы попадёте туда – у вас будет доступ к хорошо оплачиваемым работам, над которыми вы сможете трудиться удалённо.

Я начал работу, но чувствую, что зашел в тупик
Понимаю. Это нелегко, и если кто-то говорил вам обратное – он либо этим не занимался, либо пытается выманить у вас деньги. Если вы чувствуете, что зашли в тупик, попробуйте следующие варианты:
Освежите ваше первоначальное намерение
Спросите себя, запишите на бумаге, почему вы решили идти по этому пути. В силе ли всё ещё ваш ответ? Если да – то зачем останавливаться? Вперёд!