Как стать веб-разработчиком? Самый полный гид

Популярность профессии веб-разработчика в эпоху IT трудно переоценить. Согласно исследованию сервиса Glassdoor, который позволяет оставлять отзыв о текущем или бывшем работодателе анонимно, средняя зарплата веб-разработчика в США составила 75 тысяч долларов в год и варьируется от 50 до 115 тысяч долларов. Согласно калькулятору зарплат от «Моего круга», средняя зарплата в разработке на второе полугодие 2018 года составила 98 тысяч рублей. Из отчёта о зарплатах за этот период: «В целом по всем регионам рост медианной зарплаты наблюдается в сфере разработки, администрирования, дизайна, менеджмента, аналитики и кадров; особенно сильный рост в сфере администрирования. Без изменений зарплаты в тестировании и поддержке. Снижение наблюдается только в маркетинге». А среди компаний с самыми высокими зарплатами в разработке исследование выделяет крупных игроков рынка: Яндекс, Лаборатория Касперского, Mail.ru, Luxoft и Альфа Банк.

В связи с большим разнообразием языков программирования среди веб-разработчиков есть «подвиды», которые специализируются на Python, SQL, JavaScript, PHP или другом языке. У каждого свои особенности работы в зависимости от выбранного языка.

В зависимости от области ответственности веб-разработчика Python, можно выделить три разные позиции:

• фронтенд,
• бэкенд,
• фулстек.

Фронтенд

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

Три составляющие фронтенда:

• Содержание и разметка — HTML.
• Логика — JavaScript.
• Внешний вид — CSS.

[course id=1052]

HTML

Он же HyperText Markup Language — язык разметки документов. С помощью него строится структура страницы: абзацы, заголовки, списки, таблицы, расположение рисунков.

HTML описывает содержание страницы и состоит из простых команд — тегов. Теги управляют представлением информации на экране при отображении HTML-документа. Они заключаются в угловые скобки и выглядят примерно вот так: <table></table>.

Документ HTML — это текстовый файл с расширением .html или .htm, который содержит набор тегов. Браузер — программа для просмотра веб-страниц. При получении документа HTML браузер выполняет его анализ и строит объектную модель документа, а затем отображает результат на мониторе. Согласно данным портала PCWorld, в 2019 году наибольшая популярность у браузеров Google Chrome, Firefox, Opera, и Edge.

С помощью языка HTML можно организовать структуру страницы, установить параметры шрифта и отформатировать символы. Например:

<B>полужирный шрифт</B>

<I>курсивный шрифт</I>

<U>подчеркнутый шрифт</U>

<SUB>нижний индекс</SUB>

<SUP>верхний индекс</SUP>

Текст, который заключён в тегах <FONT [attributes]>…</FONT>, имеет заданный размер, цвет и гарнитуру. Чтобы их задать, нужно использовать атрибуты: SIZE = размер со значением от 1 до 7, COLOR = aqua, black, blue, fuchsia, gray, green, lime и другие.

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

• В статье HTML basics довольно подробно раскрывается суть HTML, основы работы с тегами, а также рассматриваются элементы интерфейса, с которыми приходится работать разработчику.
• Чтобы освоить HTML самостоятельно, можно попробовать бесплатный курс от Codecademy, в нем есть теория и много упражнений для закрепления.

Список интернет-ресурсов на русском можно взять здесь:

• http://htmlbook.ru — Мержевич Влад. Краткий, но ёмкий учебник по технологии создания сайтов, HTML, CSS, дизайну, графике и др.
• http://html.manual.ru — Городулин Владимир. HTML-справочник.
• https://soft-arhiv.com/load/75-1-0-288 — А. Климов. Краткий справочник по тегам HTML-языка.

Для любителей печатных книг мы собрали отдельный список:

• Усенков Д., Уроки Web-мастера.
• Смирнова И., Начала Web-дизайна.
• Томас А.Пауэлл, Web-дизайн. Наиболее полное руководство.
• Браун М. HTML 3.2 в подлиннике.

[course id=1056]

JavaScript

Он описывает логику веб-сайта или приложения, сообщает браузеру, как действовать в ответ на те или иные взаимодействия. Проще говоря, его задача — реагировать на действия пользователя, клики, движения курсора и нажатия клавиш. Он создавался, чтобы оживить веб-страницы. Изначально язык был слишком простой, но со временем он усложнился, оброс своими особенностями и продолжает развиваться сегодня. Его основная версия ES5 работает во всех браузерах. В 2015 году была создана его обновлённая версия JavaScript ES2015, которая не так активно дружит с браузерами. Однако её можно компилировать в ES5 с помощью препроцессора Babel. Таким образом, код вы пишете с помощью современного синтаксиса ES2015, а чтобы он заработал в браузере, его нужно компилировать в ES5. Версия ES2015 легче в использовании, она предлагает новые инструменты упрощённого описания логики сайта или приложения.

• В книге Speaking JavaScript вы найдете подробное описание этого языка программирования, его функций, области применения и оценку его будущей популярности.
• А узнать об истории развития JavaScript можно в статье History and evolution of JavaScript.

CSS

Cascading Style Sheets, язык описания и стилизации внешнего вида. Код языка CSS делает так, чтобы браузер понимал как отображать элементы интерфейса. Он определяет местоположение разных блоков сайта, параметры используемого шрифта и задаёт цвет. Например, «после третьего параграфа нужен отступ 30 пикселей» или «текст в элементе body должен быть светло-желтым и исполнен шрифтом Roboto». Чтобы упростить жизнь разработчикам, были созданы препроцессоры для CSS: они обогащают синтаксис и содержат новые опции. Например, позволяют использовать вложенные блоки, переменные и циклы. Существует несколько инструментов, среди них Stylus, LESS, SASS. Чтобы выбрать свой, нужно пробовать.

Также есть и постпроцессоры, с помощью которых можно изменить уже созданный CSS. Например, PostCSS, который добавляет дополнительные свойства к имеющимся. Более подробно о пре- и постпроцессорах можно узнать из статьи фронтендера, Михаила Левшина. В ней вас ждет обзор пре- и постпроцессоров, она больше подойдет для тех, кто уже знаком с CSS, но если вы новичок, то для вас автор привёл ссылки на некоторые технические вещи, которые он не объясняет сам.

Помимо трёх основных составляющих, есть ещё много всего, чем нужно владеть фронтендеру:

• CSS-фреймворки;
• библиотеки JQuery, Angular.JS, React.JS, Backbone.js;
• графические редакторы (Photoshop, Illustrator);
• инструменты контроля версий (Git, GitHub, CVS);
• базы данных и языки запросов (SQL, MySql, NoSQL, MongoDB);
• инструменты дебаггинга (Chrome Dev Tools, Firebug);
• популярные CMS (WordPress, Drupal, Joomla);
• OOCSS / BEM / SMACSS.

Да, много, но не нужно бояться объёма информации. Освоив базу, вы постепенно сами начнёте интересоваться более сложными вещами. И простой интерес со временем перерастёт в потребность совершенствоваться и развиваться для достижения поставленных целей.

О трёх составляющих фронтенда и о других элементах и особенностях этой профессии можно также узнать в статье веб-разработчика Романа Латкина Хочу стать frontend-разработчиком: базовые знания и план обучения.   

[read id=797]

Бэкенд

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

• Java (и другие языки JVM, например, Scala, Groovy, Clojure);
• PHP;
• .NET (C#, VB);
• Ruby;
• Python;
• Perl;
• Javascript (Node JS);
• Actionscript (Flash Media Server);
• CoffeeScript;
• C (CGI);
• Erlang;
• SQL.

О самых популярных языках программирования можно почитать в удобной подборке от Лоренс Брэдфорд, разработчицы-самоучки с образованием экономиста, которая горит идеей сделать образование доступным каждому. Статья раскроет тему многообразия языков программирования, которыми пользуются бэкендеры. Вы найдете описание и характеристику каждого из них, узнаете, где их можно применять, сколько платят специалисту, владеющему тем или иным языком, а ещё — какие компании используют тот или иной язык. Например, программисты Uber, Pinterest, Mozilla, Spotify, Quora, Pandora, Netflix и Asana используют Python.

Кстати, Python — очень популярный среди бэкендеров язык, он становится популярным и развивается с необыкновенной скоростью. И это неслучайно: язык используется в вебе, мобильных устройствах, приложениях, а также сервисах, использующих машинное обучение. У него простой синтаксис, и по сравнению с другими языками, он окажется более понятным, особенно для новичков. Изучить его можно разными способами: как самостоятельно, так и с помощью экспертов. Например, можно окончить курс по Python для веб-разработки полного цикла. Он длится 6 месяцев, и после его прохождения вы сможете выполнять заказы по Python на фриланс-биржах. А Игорь Мосягин, R&D разработчик Lamoda с опытом программирования на Python более 10 лет, вместе с другими преподавателями помогут не только с освоением теории, но и дадут массу практических заданий.

Можно попутно почитать что-нибудь полезное, взгляните на нашу подборку:

• Python Cookbook, Brian Jones, David Beazley.
• Learning Python, Mark Lutz.
• Programming Python, Mark Lutz.
• Python Pocket Reference, Mark Lutz.

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

Фулстек

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

текст: Любицкая Дарья