web_dev_guide

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

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

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

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

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

Фронтенд

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

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

  • Содержание и разметка — HTML.
  • Логика — JavaScript.
  • Внешний вид — CSS.
Курс «Python для анализа данных»
Идет набор в группу 2 700₽ в месяц

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-справочник.
  • http://winchanger.narod.ru — А. Климов. Краткий справочник по тегам HTML-языка.

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

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

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-разработчиком: базовые знания и план обучения.   

Бэкенд

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

  • 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 разработчика.

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

Поделиться:
Опубликовано в рубрике Python, ГидTagged , ,

SkillFactory.Рассылка