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

Как видно из схемы, есть несколько блоков:  это верстка, серверное программирование и базы данных.
Web-программисту, по-хорошему, нужно уметь разбираться в этом хотя бы поверхностно. Даже узкоспециализированному верстальщику пригодились бы знания в области баз данных, потому что тогда ему будет понятнее, откуда берутся данные для отрисовки его красивой странички. А без знаний основ серверного программирования он не сможет создать в полной мере интерактивную страницу, использующую технологию ajax (общение с сервером, без необходимости перезапуска страницы). На практике бывает невозможно предугадать, с чем придется работать . Например, несколько недель подряд могут попадаться задачи только на верстку, или появится очень важный проект со сложной серверной частью. Поэтому уметь делать больше, «чем надо», полезно и для работы отдела в целом и для каждого программиста лично, т.к. повышает персональную конкурентоспособность. Если есть желание развиваться в программировании и ты совсем новичок, то проще всего начать с верстки.  Верстка — это создание внешнего вида web-приложения. То, что вы сейчас читаете — тоже сверстано кем-то с использованием следующих технологий.

НTML

HTML — язык разметки страницы. Это собственно каркас любой страницы (если вы нажмете в вашем браузере Ctrl+U, то вы увидите весь html код этой статьи. Этот язык разметки выглядит пугающе, но он крайне прост. Чтобы его освоить, достаточно пройти короткий интерактивный самоучитель (htmlbook.ru, htmlacademy.ru, w3schools.com ) или что-то аналогичное. Главное, что нужно запомнить про html — это каркас страницы, его не стоит использовать для придания внешнего вида (хотя так получилось, что он это умеет делать).

CSS

Следующая технология это CSS — каскадные таблицы стилей. Вот CSS как раз и занимается приданием вашей страничке хорошего внешнего вида. С его помощью можно располагать элементы, закрашивать фон, придавать тексту различный размер и т.д. Структура css еще проще, чем html — он состоит из селекторов (для чего применяется правило) и правил (собственно само оформление). Например, чтобы сделать текст всех абзацев текста (а это html тег <p>) красным, достаточно написать такое правило: p { color: red; }.

JavaScript

И последняя технология в верстке — это полноценный клиентский язык программирования — JavaScript. Современные тенденции web-разработки подталкивают к тому, чтобы использовать его чаще, но мы пока остановимся на его базовом использовании — приданию интерактивности странице. Если вы хотите, чтобы блок раскрывался по клику, или добавлялся по нажатию кнопки “добавить” — это все js. Чаще всего он отвечает за обработку каких-то событий (нажатие, наведение,…) и запуск определенных изменений вслед за этим. Также немаловажную роль играет технология ajax — которая позволяет делать запросы на сервер, без необходимости перезагрузки страницы.

На счет CSS и JavaScript я бы сказал так — прочитать про них нужно, но не надо вдаваться в детали. Дело в том, что на чистом js и css приходится писать не так часто. Для решения типичных задач уже давно были придуманы библиотеки и фреймворки, которые значительно упрощают работу.

Bootstrap

И первый фреймворк это Bootstrap. Он включает в себя css и js компоненты. Посмотреть список всего, что в нем есть можно тут. Да, страницы сверстанные с его помощью выглядят одинаково, и на реальном сайте вы, скорее всего, будете его сильно дорабатывать. Но есть большой класс web-приложений, которые используются внутри организаций, а значит внешний вид не является ключевым моментом. В них акцент делается на функционале и удобстве использования — а bootstrap-а для этого вполне достаточно. Кроме того, выбирая какую-нибудь готовую красивую тему для сайта, вы с удивлением обнаружите, что большинство хороших тем сделаны с использованием этого фреймворка. А значит bootstrap нужно как минимум знать и уметь им пользоваться.

На этом этапе вы сможете сверстать страницы с использованием bootstrap-а или разобраться в купленной красивой теме для сайта. Но это “мертвые” страницы, т.к. они не реализуют никакого функционала.

PHP

Вся логика приложения, чаще всего, делается на сервере. Для этого нужно использовать серверный язык программирования. Их огромное число, но мы в своей работе используем php. Если вы когда-либо работали с с/с++ или подобными языками — то освоить php будет легко. Если же нет — не расстраивайтесь, он достаточно прост. Для работы на базовом уровне достаточно знать синтаксис языка и иметь общие представления об объектно-ориентированном программировании (ооп).
В синтаксис обычно включают работу с переменными, массивами, функциями, условными операторами, циклами. А в области ООП надо знать что такое классы, объекты, поля и методы, модификаторы доступа (публичный, приватный, …), наследование и статичные поля и методы. Это может показаться излишним, но фреймворки, по большей части, все объектно-ориентированные. И если вы пропустите этот блок, то не сможете ими воспользоваться в своей работе. Кстати почти все, что нужно знать по основам php можно увидеть в этой шпаргалке.

Базы данных

Последний блок — это базы данных. Конечно, web-приложение может быть написано и без их использования, но именно БД позволяет решать некоторые задачи крайне быстро и эффективно. Так если у вас есть список студентов, и вам надо выбрать всех, кто родился до 2000 года, у кого день рождения в феврале, кто учится на “4 и 5” по математике, посещает кружок “Вышивание” и свободен после 6 вечера — их всех можно найти за доли секунды, при условии, что эта информация хранится в базе данных. Чтобы работать с БД нужно знать, что такое: база данных, таблица, поля в таблице, типы полей, что такое запись. Ну и несколько наиболее распространенных запросов, которые для простоты называют CRUD — Create Read Update Delete, т.е. добавление записей в базу, поиск нужных данных, изменение данных и удаление их.

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

Выводы

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

1. HTML-самоучитель (основные теги и структура страницы).
2. CSS + JS на базовом уровне (общие моменты, не вдаваясь в подробности)
3. Bootstrap (css/js фреймворк, который достаточно прост и функционален)
4. Основы PHP и объектно-ориентированного программирования, на уровне шпаргалки.
5. Основные понятия баз данных.

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