Веб-разработка: с чего начать, и какое направление выбрать. Веб-программисты: описание профессии, плюсы и минусы

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

Первый шаг

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

Конечно, на теории дело не закончится, все полученные знания нужно пару десятков раз применить на практике — тогда они вобьются в вашу голову намного лучше, так что, даже есть после этого разбудить вас ночью, и спросить: «а как работает в css @keyframes?» — вы все подробно расскажете.

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

Тут в самом низу вы можете увидеть то, что будете изучать, если оплатите обучение.

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

Что должен знать веб-программист?

Итак, как видите, это:

HTML/CSS — базовые языки разметки и оформления веб-страниц, без них невозможно представить себе сайтостроение. Это — основа, самые простые технологии, которые вы должны изучить в первую очередь.
PHP — основное оружие веб-программиста. С помощью этого языка создаются социальные сети, интернет-магазины, фреймворки, движки и много чего другого. Именно благодаря нему работает большинство онлайн-сервисов, формы комментариев, регистрации на сайтах и т.д.
JavaScript — язык программирования специально для веб, с его помощью страницу можно программировать так, чтобы при различных событиях ее дизайн менялся. Например, при клике по окну оно расширялось и т.д. Примеров можно привести очень много.

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

Где все это выучить?

В моем понимании есть 3 основных способа обучаться на веб-программиста:

Читать бесплатные статьи и материалы в интернете, смотреть бесплатные видеоуроки и курсы. Так вы можете получить базу, но дальше начального уровня не продвинетесь!
Покупать платные курсы. Этот вариант избрал я, так как сайтостроение я изучаю не для работы на компанию, а на самого себя, поэтому меня устраивает обучение по курсам. 1 толковый курс в рунете стоит от 3 до 7 тысяч рублей. Лично я потратил на курс всего около 40-50 тысяч рублей и не жалею, т.к. уже получил много знаний, которые смог применить на практике и начать зарабатывать.
Купить полноценное удаленное обучение с наставником. Это самый дорогой вариант, который обойдется в 40-150 тысяч рублей. Конечно, в плане эффективности он является самым лучшим. Такое обучение, к примеру, можно купить в онлайн университете Geekbrains .

Хорошими площадками для получения базовых знаний по html, css, php и js будут Magisters.org , HtmlAcademy.ru и премиум раздел Web4myself.com (хоть он и платный, но доступ в него всего 500+ рублей в месяц, а уроков там тьма).

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

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

По итогу можно получить такое приличное резюме:

И такие навыки:

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

Например, за одиннадцать месяцев Geekbrains обещает вас обучить таким технологиям: HTML/CSS, PHP, JS, NodeJS, AngularJS, Yii . С другой стороны, для того, чтобы найти простую работу или начать делать сайты для себя, вам необязательно знать все это. Я уже говорил, что является базой. Это html, css, php, javascript. Но дело в том, что с каждым годом требования к веб-разработчикам растут и если вы хотите серьезных результатов, так или иначе придется изучать современные технологии и тенденции.

Курсы по PHP и фреймворкам

На данный момент есть замечательный курс PHP7 и MySQL с нуля до гуру , который я прошел лично и даже написал о нем отдельный отзыв. Я считаю этот курс замечательным, в нем дается большая база по современному php.

Книги тоже имеют право на жизнь. Для расширения своих знаний в любой сфере читать их полезно. И по php почитать можно много чего. Например, такое.

Необязательно знать все

Если вы изучили только javascript (а php — нет), то сможете работать front-end разработчиком, а если наоборот — попробуете свои силы в back-end . В общем-то, даже имея небольшие знания, уже можно что-то заработать на сайтостроении, но чем больше вы будете знать, тем больше ваш потенциал.

В этой статье я разберу не только то, что должен веб-дизайнер, но и также то, чего НЕ должен.

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

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

Каждый веб-дизайнер должен уметь «гуглить» 🙂
Это значит что если вы что-то ищите в поисковике, то вам нужно посмотреть не первые 5-10 сайтов, а если потребуется — то все 100-200, потому что рунет сейчас стал копипастной помойкой и найти стоящее очень тяжело. Либо если у вас нет времени — покупайте книги, курсы, обучение.

Что должен уметь и знать веб-дизайнер фрилансер:

Вам нужно в совершенстве владеть программой фотошоп.
Вы должны уметь:
— Собирать и структурировать информацию
— Уметь выделять главное и второстепенное
— Создавать прототип сайта
— Уметь не «изобретать велосипед», а моделировать уже успешное
— Подбирать подходящую цветовую гамму под цели сайта и для целевой аудитории
— Уметь работать со шрифтами
— Уметь работать с сетками
— У меть пользоваться фотобанками и обрабатывать графику
— Уметь сделать сайт удобным и привычным для целевой аудитории
Уметь рисовать разные типы сайтов (лендинги, сайты-визитки, интернет-магазины, промо-сайты, порталы)
Уметь рисовать в стилях flat, material, минимализм, техдизайн
Уметь делать адаптивный дизайн сайта

Этого вполне достаточно чтобы вы стали веб-дизайнером хорошим веб-дизайнером и зарабатывали 30-45 000 руб в месяц. через 6-12 месяцев после старта.

Если вы зайдете на сайты с работой, где публикуются вакансии для веб-дизайнеров и посмотрите что там требуют от вас — вы просто ужаснетесь. От вас будут требовать владеть сразу 2-6 профессиями, владеть 3-10 программами и иметь кучу обязанностей.

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

Что НЕ должен знать и уметь веб-дизайнер:

Верстку (html, css и т.д) — тот кто этим занимается называется верстальщик, а не веб-дизайнер.
Программирование (php, mysql, javascript и т.д.) — этим занимается веб-программист.
Seo и раскрутка сайта — этим занимается se0-специалист
Наполнять сайт. Этим занимается контент-менеджер
Продвигать сайт в соц.сетях и работать с пабликами. Этим занимаются SMM и SMO специалисты.
Владеть всеми графическими программами на свете. Это нафиг не нужно веб-дизайнеру. 99% всего можно сделать в фотошопе. Веб-дизайнер, не иллюстратор, не работник полиграфии — ему не нужно знать coreldrow, illustrator или indesign и прочие программы
программы 3D-моделирования. Этим занимаются 3d-проектировщики, архитекторы, но не веб-дизайнеры
Маркетинг и конверсия. Этим должны заниматься маркетологи и тестеры.
Брендинг. Често — не знаю кто этим должен заниматься 🙂
Владение всеми CMS (Worppress, joompa, DLE и т.п) — этим обычно занимаются веб-мастера
копирайтинг. Статьи писать должен копирайтер, а не веб-дизайнер.
Рисовать от руки. Веб-дизайнер — это не художник.
Рисовать на планшете. Этим занимается графический дизайнер.

Это не весь список того что от вас могут требовать в резюме. Если вы нашли что-то, что от вас требуют и этого нет в — то смело относите новое требование к тому что вы НЕ должны 😉

Если с вам и требуют все это, то пусть и платят за каждую профессию отдельно — в сумме хорошо наберется 🙂

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

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

«Я решил научиться программированию. Мне нравится веб, но я не знаю, с чего начать»

Как и в любой другой дисциплине, изучение программирования нужно начать с основ всех областей веб-разработки - часто это называют «full stack». «Это поможет определить область, в которой вам интереснее обучаться, и даст базовые знания для старта», - пишет Сорор.

Основы HTML

Разработчик советует начать с изучения основ HTML. «Начав с этого вы освоите разработку пользовательских интерфейсов и взаимодействие с ними. Кроме того, вы сразу увидите результат работы вашего кода», - отмечает преподаватель.

«Я знаю основы HTML»

Основы JavaScript

«JavaScript - язык веба, все популярные браузеры (Chrome, Firefox, Safari, IE) имеют встроенную поддержку JavaScript. Каждый сайт или веб-приложение, которым вы пользуетесь, наверняка имеет большое количество JavaScript-кода внутри. Кроме того: язык сейчас становится популярным и на других платформах - например, серверах, рабочих столах и устройствах».

«Я знаю основы JavaScript и HTML»

CSS

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

Бэкенд

«К этому моменты вы получили знания для так называемой "фронтэнд-разработки". Теперь можно переключиться на "бэкенд". Это код, которые работает на сервере», - пишет Сорор. - Существует множество бэкенд-языков, но так как вы уже знакомы с JavaScript, я рекомендую изучить Node JS (программная платформа - прим. ред.). В дополнение к Node JS можно изучить Express и Mongo DB».

Express - библиотека, которая позволяет облегчить взаимодействие Node JS с веб-сервером. Mongo DB - база данных для хранения и получения информации.

jQuery

JS-фреймворки

Фреймворки позволяют упростить работу с языком разработки и решать крупные проблемы используя готовую технологию. На рынке существует огромное количество фреймворков из-за чрезмерной популярности JavaScript, пишет Сорор.

React JS

React был разработан Facebook и работает с архитектурой Flux . Это JavaScript-библиотека для создания интерфейсов. Недавно React обошел по популярности другую распространенную библиотеку Angular, поэтому лучше начать изучение фреймворков именно с него, отмечает Сорор. Бесплатный курс для изучения React.

Angular и

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

Фреймворк Angular 1 можно изучить бесплатно на Code School . Познакомиться с Angular 2 можно при помощи бесплатных видео .

Ember JS

Фреймворк не такой мощный, как разработки Google и Facebook, однако он набирает популярность среди разработчиков. Официальная документация Ember JS.

«Я хочу стать бэкенд-разработчиком»

«В бэкенд-разработке существует множество языков, у каждого есть свои минусы и плюсы», - пишет преподаватель. Он также приводит график их популярности за последние 10 лет:

Языки программирования, обозначенные зеленой рамкой, - те, на которых стоит сфокусировать своё внимание, считает Сорор.

Java

Очень популярный язык программирования, разработанный компанией Sun Microsystems (сейчас принадлежит Oracle). Java используется для разработки приложений для Android. Его также можно использовать для создания компьютерных и веб-приложений.

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

C#

Язык разработан компанией Microsoft как альтернатива Java. Как и Java, C# является объектно-ориентированным языком программирования и может использоваться не только для разработки веб-приложений, но и программ для настольных операционных систем. Бесплатный курс по изучению C# от Microsoft Virtual Academy.

Python

За Python нет никакого крупного бренда. Однако этот язык позволяет вести быструю разработку. Сайт с бесплатными уроками для изучения Python.

Ruby

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

Лучшее место для изучения Ruby - RubyMonk , считает разработчик.

Практика

Перед выполнением практических задач Сорор рекомендует сразу создать профиль на сайте GitHub - онлайн-репозитории для хранения, управления и публикации кода. Знакомство с платформой можно начать с инструкции “Hello World" или интерактивного курса .

Начать разработку можно с создания собственного блога (инструкция для программирования блога на React и Node) или календаря (инструкция для программирования календаря на C# и.Net).

Бесплатные уроки можно найти и на Free Code Camp :

Таймер «Помодоро» (фронтэнд).
Трейдинг-клуб (фулстэк).

Сегодня мы расскажем вам о наборе инструментов веб-дизайна, с которых вам нужно будет начать.

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

ВЕБ-ДИЗАЙН И ВЕБ-РАЗРАБОТКА:

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

Веб-разработка , это процесс создания самого сайта. Этот процесс включает в себя программирование (написание кода и скриптов), и вёрстку страниц, для будущего веб-дизайна и информационного контента. Разработчик должен иметь опыт и навыки программирования, чтобы сделать основу сайта, для того чтобы веб-дизайнеру было где творить.

ИНСТРУМЕНТЫ ВЕБ-ДИЗАЙНА:

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

Эскизы и инструменты для рисования:

Как и в любой разновидности Дизайна, веб-дизайн начинается с эскиза (идеи). Его можно нарисовать на бумаге или использовать графический планшет.

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

Карандаш + блокнот: традиционный метод сделать эскиз от руки, и это хороший и простой способ.

ТИПОГРАФИКА:

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

Google Fonts — одно из первых мест, где нужно искать шрифты. Там они бесплатные, и вы можете их легко перенести в Blogger, WordPress или Squarespace.

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

ЦВЕТА:

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

coolors.co — красивый, простой и лёгкий интерфейс для быстрого создания цветовых палитр.

color.adobe.com — Adobe палитра. Кулер имеет массу дополнительных функций, если вы хотите смешивать и сочетать цвета и создавать свои палитры. У них также есть огромная библиотека готовых цветовых палитр для вашего вдохновения.

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

В мире более 11 миллионов веб-разработчиков разного профиля и уровня. Однако, по данным CMS Magazine и «Рейтинга Рунета», 62% компаний и веб-студий остро ощущают нехватку кадров. Вот как они ответили на вопрос о дефиците сотрудников в сфере веб-разработки.

На сегодняшний день только четверть всех веб-студий устраивает количество их штатных сотрудников. Получается, программистов много, но всё равно не хватает. Почему?

Причин несколько:

15,9% работодателей считают, что уровень образования потенциальных сотрудников не соответствует требованиям рынка (нет достойного портфолио, отсутствует опыт командной работы).
15% компаний полагают, что на рынке в принципе мало квалифицированных веб-программистов, способных разрабатывать сложные проекты (особенно в регионах).
7,3% компаний замечают, что многие специалисты веб-разработки предпочитают фриланс работе в штате.
6,3% веб-студий полагают, что сотрудничества не получается из-за несовпадения зарплатных ожиданий соискателей с возможностями работодателей.

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

Взгляните, например, вот на этот график «Рейтинга Рунета».

Из статьи «Рынок веб-разработки остаётся рынком „ручного“ труда»

Разработчики-фрилансеры занимают довольно крупную нишу в дорогих проектах. Им достаётся 6% проектов стоимостью от 100 до 300 тысяч рублей и 8,3% проектов дороже 300 тысяч рублей.

Требуется веб-разработчик

Убедиться в востребованности профессии веб-программиста легко. Достаточно зайти на любой онлайн-сервис по трудоустройству.

Только в Москве почти полторы тысячи вакансий. Среди IT-компаний и веб-студий за хороших разработчиков идёт нешуточная борьба.

28,4% компаний ищут сотрудников с помощью job-ресурсов, 21,4% - через социальные сети и по рекомендациям, 16,2% признают достаточно эффективным раздел с вакансиями на собственном сайте и 12,7% хантят сотрудников «со школьной скамьи», то есть приглашают на стажировку талантливых студентов, отслеживают медалистов и олимпиадников, устраивают конкурсы для студентов и так далее.

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

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

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

Квалификация

Под веб-разработчиком работодатель обычно понимает универсального специалиста full-stack.

Full-stack состоит из front-end- и back-end-разработки. Разработчики front-end обеспечивают создание внешнего вида сайта (портала, проекта). Back-end-разработка включает в себя теневую сторону ресурса, то, чего не видно пользователю, изнанку сайта. Но, независимо от специализации, веб-программист должен знать полный цикл. Без этого невозможно представить, как тот кусок задачи, который ты реализуешь, будет интегрироваться с общим проектом.

На сегодняшний день стандартом веб-разработки (full-stack) является следующий комплекс знаний.

Вёрстка + браузерный язык программирования + серверный язык + язык для работы с базами данных + фреймворк(и).

Получить такой комплекс знаний можно на . Это образовательная площадка, где собраны лекции и вебинары для тех, кто хочет изучать программирование. Специализация «веб-разработчик» рассчитана на 11 месяцев (плюс стажировка) и состоит из нескольких курсов.

HTML / CSS . Это основы создания сайтов. Обучение идёт через практику: студенты разрабатывают сайт интернет-магазина, изучая параллельно свойства и возможности HTML / CSS.
JavaScript - первый и второй уровни. Этот язык программирования призван сделать сайт живым: он взаимодействует с посетителем ресурса, реагирует на движения курсора, клики мыши и нажатия на клавиши. В первом курсе по JavaScript даются азы, во втором полученные знания закрепляются.
Основы баз данных . Это 20 интенсивных видеоуроков о системах хранения и обработки данных, для доступа к которым используется язык SQL (Structured Query Language).
PHP - первый и второй уровни. Этот язык программирования входит в тройку самых популярных. На первом уровне студенты изучают принципы объектно-ориентированного программирования и учатся правильно использовать основные конструкции языка. Второй уровень позволяет отточить владение PHP до виртуозности.
HTML5 и CSS3 . Эта связка даёт возможность верстать макеты, создавать и редактировать статические сайты. На курсе студенты проходят все этапы создания рекламного сайта для коммерческой организации.
AngularJS / D3.js . Здесь студенты учатся работать с D3.js в симбиозе с мощнейшим фреймворком построения одностраничных веб-приложений Angular.js.
Yii framework . Это один из самых популярных и востребованных фреймворков на PHP. На лекциях рассматривается базовый и продвинутый шаблоны приложения и разрабатывается аналог программы Evernote. В качестве домашнего задания студентам предлагается создать программу-календарь, которую впоследствии можно использовать в портфолио.

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

Сливки

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

По данным агентства «Тэглайн», веб-программисты получают в 1,8 раза большую зарплату, чем среднестатистический житель России.

Средняя зарплата веб-разработчика по стране - 60 310 рублей, в Москве - 75 270 рублей, в регионах - 46 790 рублей.

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