Как стать веб-разработчиком с нуля

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

Программирование необходимо для придания сайту функциональности. Программная часть разделяется на клиентскую и серверную. Первая необходима для создания функционала с внешней оболочкой сайта (front-end), серверное программирование отвечает за обработку данных сайта на стороне сервера (back-end).

Вэб программист должен знать не только язык программирования JavaScript/PHP или оба, но уметь верстать сайты на языках HTML, CSS, а также иметь базовые навыки работы с Photoshop/CorelDraw и другими редакторами.

Что представляет собой вэб-сайт

Вэб сайт или онлайн приложение состоит из файлов в формате HTML или одного файла. Чтобы пользователи могли пользоваться сайтом, HTML файлы должны храниться на сервере. Ввод адреса в поисковой строке — это ввод фактического пути к файлу HTML. К примеру http://myText.ru/index.html — это простой адрес для получения HTML файла index.html, хранящегося на сервере c доменным именем myText.ru. Файлы могут быть не только формата HTML. Стилизированные страницы с программным кодом могут также в своем составе иметь файлы формата css и js.

Сайт может состоять как из одного файла html, так и из их множества. Множество файлов одного вэб-сайта связанны между собой гиперссылками, которые установлены посредством HTML кода. Нажатие на гиперссылку переводит пользователя на другую страницу сайта — то есть, в браузере открывается другой HTML файл, на который указывает эта гиперссылка.

Полный процесс создания сайта или онлайн-приложения

Разработка сайта осуществляется в следующем порядке:

1. Идея (для частных разработчиков), получение заказа (для организаций).
2. Разработка документации, которая описывает общее положение о самом сайте: назначение, архитектура, на какую аудиторию рассчитан и тому подобное.
3. Создание эскиза сайта.
4. Создание дизайна и его утверждение.
5. Создание дизайна для мобильных устройств.
6. Создание макета в графическом формате и нарезка слоев для верстки.
7. Создание технического задания для верстальщиков и программистов, которое описывает механику сайта, а также назначение тех или иных графических и текстовых объектов.
8. Верстка клиентской части сайта по макету.
9. Создание программного кода для объектов страниц.
10. Разработка серверного кода и автоматизации взаимодействия сайта с базой данных.
11. Ручное или автоматизированное тестирование продукта.
12. Выкладывание сайта в глобальную сеть или сдача проекта заказчику.
13. СЕО оптимизация, наполнение сайта текстом через CMS и другие работы по поддержке работоспособности и популярности ресурса.

Стандартные технологии для разработки сайтов и вэб-приложений

Вэб разработчики делятся на два типа: front-end — отвечает за создание внешнего вида сайта (клиентской части) и программирование интерфейса; back-end — программирует функционирование сайта с серверной стороны (серверная часть).

Стандартный набор инструментов, которые должен знать front-end разработчик:

1. Photoshop или другой графический редактор. Уровень знаний должен быть базовый. Нужно уметь работать со слоями, делать смарт-объекты, сохранять из макета графические и текстовые объекты в отдельные папки проекта.
2. Графика и типография. Нужно знать графические форматы и отличать их особенности. Должен умет работать со шрифтами, а также знать их свойства.
3. HTML — язык гипертектовой разметки. Основной инструмент для верстки. С помощью специальных текстовых конструкций программист размещает графические и текстовые элементы на странице сайта.
4. CSS — язык стилей. Без CSS все сайты выглядели бы однообразно. Это язык, дающий огромные возможности по редактированию внешнего вида графических и текстовых объектов на странице.
5. JavaScript — язык программирования клиентской части. С помощью него создается функционал для интерфейса путем написания программных алгоритмов.
6. Адаптивность. Разработчик должен уметь разрабатывать сайты как для ПК, так и мобильных устройств. В одних случаях делается 2 разных дизайна, в других, верстальщик использует возможности CSS для адаптации одного дизайна под все устройства.
7. Кроссбраузерность. Ввиду того, что движки разных браузеров рано или поздно начинают использовать новые стандарты w3c, сайты должны одинаково хорошо работать во всех браузерах. Для этого программист должен адаптировать код сайта по все самые популярные браузеры.

Стандартный набор инструментов для back-end разработчика:

1. PHP/Python/Java/C#/Node JS — это языки программирования предназначенные для написания серверерного кода и создания других приложений для различных устройств.
2. SQL или noSQL — языки запросов для управления базами данных. С помощью языков программирования и запросов можно автоматизировать работу базы данных с конкретным сайтом.
3. MySQL/Mongo DB/pPostgreSQL и другие. Серверы управления базами данных. Сервер позволяет создавать базы данных, визуализировать информацию и таблицы.

Также серверный разработчик должен понимать принцып работы сети, протоколы передачи данных и семиуровневую модель взаимодействия сетей OSI. Сокеты, сессии, куки — все это должен знать серверный разработчик.

Есть более квалифицированные специалисты, объединяющие в себе фронт и бэк-энд. Это full stack разработчики, которые создают сайты как на стороне клиента, так и стороне сервера. Эти специалисты владеют навыками разработки всеми стандартными и дополнительными технологиями разработки.

Что касается дополнительных технологий разработки. Это библиотеки и фреймверки, которые ускоряют написание кода на разных языках. К примеру для JavaScript существуют ReactJS, AngularJS, JQuery, SCSS, Stylus, Bootstrap и другие. Для серверной разработки это Yii2, Laravel, ASP.NET и другие.

Организация рабочего пространства для front-end разработчика

Каждый фрон-энд разработчик должен иметь в арсенале следующее программное обеспечение:

1. Текстовый редактор или IDE. Это как раз те программы, в которых и проходит процесс написания кода. Текcтовый редактор может быть простым — подойдет простой блокнот. Однако большинство разработчиков предпочитают использовать IDE, предназначены как раз для разработки ПО. IDE включает в себя множество инструментов для удобства написания кода, подсветку кода, плагины и синхронизацию с другими технологиями.
2. Графический редактор. Фотошоп или другой известный графический редактор для работы с дизайном сайта.
3. Браузер. Для тестирования кода на кроссбраузерность, желательно установить сразу несколько браузеров.
4. Консоль браузера. Этот модуль является штатным инструментом каждого браузера. Он позволяет отслеживать ошибки программирования, а также тестировать код в реальном времени без перезагрузки окна браузера. В Firefox доступен плагин Firebug, который улучшает работу с консолью.

Дополнительное программное обеспечение для продвинутых фронт-энд разработчиков:

1. GULP. Специальный инструмент, который позволяет минимизировать выполнение рутинных задачи и более комфортно настроить рабочее окружение.
2. GIT. Система контроля версий необходима для командной разработки, а также позволяет контролировать изменения в файлах и возвращаться к старым или измененным версиям редактируемых файлов.
3. Wisywyg редактор. Необязательный инструмент, но подходящий для создания простых страниц.

Редактирование HTML осуществляется путем перетаскивания с панели графических и текстовых объектов. Код разметки формируется автоматически, но не всегда точно. Рекомендуется пользоваться этими редакторами исключительно в учебных целях или при создании простейших страниц. Для серьезных проектов эти инструменты применять крайне не рекомендуется.

Организация рабочего пространства для back-end разработчика

Для серверной разработки необходимо следующее программное обеспечение:

1. Локальный сервер. Программа, которая имитирует удаленный сервер и позволяет тестировать взаимодействие сайта с сервером и базой данных. Есть разные локальные серверы. К примеру: Apache требует установки PHP и MySQL, а также редактирования конфигурационного файла для того, чтобы можно было выполнять разработку; Denver — уже готовый стек из Apache, PHP и MySQL с уже готовыми настройками. Есть отдельные программы сервера WAMP для операционных систем устройств Apple.
2. PHP. Это интерпритатор языка PHP, который устанавливается для взаимодействия с локальным сервером. Он является дополнительным модулем, который подключается к серверу, выполняет программный код и возвращает сформированную страницу пользователю. Также требуется вводить настройки в конфигурационном файле интерпретатора.
3. Сервер базы данных. Это может быть MySQL или другой сервер. Интерпретатор PHP взаимодействует с сервером базы данных, позволяя автоматизировать поток, распределение и хранение данных.
4. Текстовый редактор. Опять таки, для написания программного кода на серверном языке требуется текстовый редактор. Это может быть как простой Notepad, так и IDE для верстальщиков Sublime Text, Atom, VS Code и другие.
5. Также стоит упомянуть, что и серверному разработчику понадобится система контроля версий Git для командной разработки. Для одного разработчика эта программа не несет какой либо пользы.

С чего начать изучение вэб-разработки

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

Любой вэб-разработчик обязан знать и уметь верстать на HTML. Особенно это важно для фронт-энд разработчика, так как верстка это одно из его основных занятий. Серверный программист также работает с HTML, но его задача не верстать сайты а лишь изредка прописывать языковые конструкции для формирования отдельных компонентов страницы. Для него же нужно знание и CSS хотя бы на минимальном уровне.

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

Что дальше?

Связка Phoptoshop, HTML, CSS, JavaScript, кроссбраузерность и адаптивность — знание этого стека делает из вас уже фронт-энд разработчика. Если же вы планируете работать в индустрии создания сайтов и вэб-приложений, то вам не обойтись без знания библиотек, фреймверков, сборщиков, глубокого знания конкретной IDE и конечно же системы контроля версий. Не нужно изучать все библиотеки и фреймверки. Достаточно выбрать те, которые нравятся и искать работу, где требуются навыки, которые у вас есть.

Мало знать только языки

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

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

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

Как обучаться?

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

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

Где обучаться?

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

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

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

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