Так чем на самом деле занимаются веб-разработчики

  • Перевод
  • 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% из всех, кто подаёт заявки, и этот процесс очень сложен, но если вы попадёте туда – у вас будет доступ к хорошо оплачиваемым работам, над которыми вы сможете трудиться удалённо.

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

Запрос «сайт» перенаправляется сюда; см. также другие значения. Веб сайт (от англ. website: web «паутина», «сеть» и site «место», букв. «место в сети») или просто сайт в компьютерной сети объединённая под одним адресом (доменным … Википедия

Веб разработка процесс создания веб сайта или веб приложения. Термин включает разработку приложений электронной коммерции, веб дизайн, программирование для веб на стороне клиента и сервера, а также конфигурирование веб сервера. Содержание 1… … Википедия

Может означать: Процесс проектирования и конструирования изделия (см. Разработка нового продукта и Разработка с общедоступными наработками) Итеративная разработка Разработка алгоритмов Разработка программного обеспечения Разработка приложений для … Википедия

У этого термина существуют и другие значения, см. Портфолио. Веб портфолио (веб портфель, web portfolio) это веб базированный ресурс, который отражает рост учебных или профессиональных достижений владельца. Веб портфолио школьника и… … Википедия

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

Веб приложение клиент серверное приложение, в котором клиентом выступает браузер, а сервером веб сервер. Логика веб приложения распределена между сервером и клиентом, хранение данных осуществляется, преимущественно, на сервере, обмен… … Википедия

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

Является инструментом для отделения содержимого от визуального представления в веб дизайне, для массового создания веб документов. Это основной компонент системы веб шаблонов (англ.)русск.. Веб шаблоны используют для создания сайтов любого… … Википедия

Веб мастер человек, занимающийся разработкой веб сайтов в Интернете или корпоративных приложений в интернете. Веб мастер это «управляющий» сайтом. В зависимости от размера коллектива разработчиков, он может объединять в себе… … Википедия

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

Что входит в основные обязанности?

В обязанности разработчика web приложений входит достаточно широкий круг обязанностей. Помимо процесса разработки сайтов или приложений, сотруднику придется также общаться с клиентами, понимать и воплощать в жизнь их желания. После того, как специалист уточнил все пожелания клиента, он приступает к подготовке технического задания. Чем тщательнее составлено тех.задание, тем насыщенней будет воплощенный в жизнь ресурс. Далее следует непосредственно процесс разработки сайта. На этом этапе веб разработчик должен применить свои навыки владения языками программирования. Стоит упомянуть также о том, что дизайн сайта веб разработчик зачастую создает самостоятельно, хотя можно и прибегнуть к помощи web дизайнеров. Итак, сайт готов к использованию, теперь специалист должен презентовать его своему клиенту, для этого требуется продемонстрировать заказчику, что готовый продукт полностью соответствует его изначальным требованиям. И, в заключение, можно сказать о том, что в обязанности разработчика также входит поддержание актуальности сайта, путем постоянных его модификаций.

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

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

Где работают представители этой профессии

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

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

Как стать веб разработчиком

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

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

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

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

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

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

Фаза 1 - Нюб

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

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

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

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

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

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

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

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

Фаза 4 - Ага!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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