Веб программист с чего начать обучение
С чего начинается путь в веб-разработку
Юлия Голанцева, редактор-фрилансер, специально для блога Нетологии адаптировала статью Рика Уэста о том, с чего начинать, если вы хотите стать веб-разработчиком.
Итак, вы заинтересовались веб-разработкой и хотите стать веб-разработчиком? Поздравляем вас! Вы сделали отличный выбор.
Возможно, вы уже являетесь активным участником группы в Фейсбуке, сабреддита или другого онлайн-сообщества, посвященного кодированию — это отличные места для старта и поиска поддержки в выбранном вами занятии.
Если вы новичок, вам может быть интересно, с чего начать изучение веб-программирования. Поискав ответ на этот вопрос в Гугле, можно растеряться от обилия информации о языках, фреймворках и учебных ресурсах.
Но не волнуйтесь, вы не одиноки. Гугл может стать вашим лучшим другом, если его правильно использовать.
Начните с конца
Первое, что я рекомендую сделать, когда вы начинаете изучать веб-программирование — это определить чëткую конечную цель и помнить о ней.
Возможно, вы хотите поменять профессию. Или у вас есть интересная идея для создания приложения. Или вы просто хотите учиться ради развлечения.
Какова бы ни была ваша цель, важно понимать, зачем вы это делаете. Это понимание поможет сделать процесс обучения продуктивным и не даст забросить начатое.
Помните, какой сложной и далëкой вам ни казалась бы сейчас ваша цель, добиться ее вполне реально, если много и усердно работать.
Если у вас пока нет опыта, решите, что вам интереснее: бэкенд- или фронтенд-разработка. Позвольте мне кратко объяснить разницу.
Фронтенд — это то, что видит конечный пользователь, с чем взаимодействует на странице. Это весь дизайн, визуальные эффекты, схемы и образы, которые формируют пользовательский интерфейс.
Как правило, фронтенд-разработчиками становятся визуальные креативщики с отличными дизайнерскими навыками и страстью к созданию удобного и понятного пользователям продукта. Технологии, связанные с фронтенд-разработкой: HTML, CSS, jQuery и JavaScript.
Бэкенд — это та часть, которая взаимодействует с данными, хранит их и обрабатывает; это «начинка» сайта или приложения. Бэкенд разработчики, как правило, хорошо умеют решать поставленные задачи, логически мыслят и интересуются внутренней работой сайтов и приложений. Бэкенд-разработка связана с языками PHP, Python и Ruby.
Я сразу понял, что у меня нет склонностей к дизайну, который так привлекает многих во фронтенд-разработке. Однако мне легко принимать решения благодаря опыту в проектировании и строительстве. Решать задачи и выяснять, как всë работает, мне ближе, чем наводить красоту.
В любом случае, что бы вас ни интересовало, считаю, что начинать обучение программированию надо с основ HTML и CSS. Неважно, в какую область разработки вы в конечном подадитесь, вам все равно придется взаимодействовать с веб-страницами.
Так что прежде всего отправляйтесь на курсы «HTML и CSS» и получите представление об этих технологиях.
Вы начали путь в веб-разработку…
…теперь настало время практиковаться. Это может показаться сложным, когда вы работаете полный день, учитесь или заботитесь о семье и детях.
Однако постоянство — это ключ к успеху. Вы узнаете намного больше, практикуясь час в день, чем тратя семь часов на написание кода по субботам.
Люди — существа привычки, так что сделайте кодинг частью вашего ежедневного распорядка.
Изучение кода похоже на попытку стать самым сильным человеком в мире
Вы когда-нибудь смотрели передачу «Самый сильный человек в мире»? Обучение коду очень похоже на номер с грузовиком. Сначала это сложно. Это кажется невыполнимой задачей. Вы движетесь детскими шажками.
Но однажды вы заставите этот грузовик поехать, он будет ехать быстрее и быстрее, пока вы не обнаружите себя убегающим от него. Ок… может и не убегающим! 🙂
Если вам больше нравится учиться по видеоурокам, тогда ищите обучающую информацию на YouTube или иных ресурсах.
Но хочу предупредить вас. Не увлекайтесь покупкой большого количества платных курсов. В начале изучения веб-разработки нет необходимости тратить большие деньги на учебные ресурсы — на раннем этапе вы, вероятно, не будете уверены на 100%, что именно вы хотите изучать.
Одна из прекрасных особенностей сообществ веб-разработки любых направлений — это то, что они не дискриминируют участников в зависимости от их знаний. Для входа туда не существует барьеров. Большинство опытных членов сообщества будут готовы потратить своë время и помочь вам — пользуйтесь этим.
Веб-разработка – с чего начать?
Недавно на сайте stack overflow увидел вопрос, в котором программист C++ спрашивал, что нужно начать изучать для того чтобы впоследствии стать веб-разработчиком. С его слов он начал с изучения php, но по совету знакомых переключился на яву, в какой-то момент открыл для себя ангуляр, в итоге в голове у него образовалась каша, и понимания в какую сторону двигаться не было. Именно для людей, которые только что пришли в веб я и решил поделиться это статьей, чтобы у них было примерное понимание, что тут есть.
Любое веб приложение состоит из двух частей: бекенд и фронтэнд. Соответственно и программистов делят также, по сути это две несвязанные между собой касты разработчиков.
Бекэнд
Бекэнд — серверная часть приложения, которая не видна пользователям. Сюда относится: авторизация, хранение и обработка данных, email рассылки и тому подобное. Скажем так бекэнд это то, что под капотом.
Языков программирования тут множество, вот самые распространенные из них:
• Php
• Asp net
• Java
• Python
• Ruby
• Node js
Советую выбрать один единственный, потому что с текущими требованиями к программистам для достижения уровня middle пройдет не менее нескольких лет. При выборе можно ознакомиться с вакансиями в вашем городе, посмотреть какие больше подходят, где больше платят и смотря из того какой язык в них требуется его и выбрать.
Сервер во многом используется для работы с данными. Поэтому нужно будет выучить как минимум бы одну из реляционных баз данных:
• Oracle
• MSSQL
• MYSQL
• Postgres
По сложности это примерно тоже, что и освоить язык программирования. Во всех перечисленных БД есть часть, которая одинакова везде – так называемый sql (язык запросов), а так же процедурный язык который в каждой базе свой. Так как sql все-таки един, а он основа всему, что связано с обработкой данных, то переход на другую базу данных, не является такой уж и проблемой. Поэтому выбрать для начала можно любую, но и тут бы я пошел по принципу анализа вакансий.
Лично я ставлю плюс в сторону изучения бекенда, так как навыки тут более статичны и изучив, что-то единожды вы сможете проработать на этом длительное время.
Фронтэнд
Фронтэнд – часть, работающая в браузере с которой непосредственно взаимодействует пользователь. Это динамические интерфейсы, меню, события по действию пользователя обмен данными с серверной частью, в общем, то, что происходит на клиенте.
Язык программирования тут один javascript. С одной стороны это несомненный плюс, так как после его изучения вам будут открыты все компании в вашем городе, которые занимаются веб разработкой, а сейчас этим занимаются многие. С другой стороны есть нюансы.
JavaScript на текущий момент времени имеет два стандарта, которые широко используются: ECMAScript 5 и ECMAScript 6. Разница между ними состоит в том, что в ECMAScript 5 отсутствует полноценное ОПП. В ECMAScript 6 оно есть, но поскольку этот стандарт появился относительно недавно, уже большая часть приложений написана на ECMAScript 5, в результате чего нужно будет освоить оба стандарта и как следствие два разных подхода к разработке.
Еще один момент, который нужно учитывать это то что один и тот же код, написанный на javascript может по- разному отрабатывать в разных браузерах и на разных ОС. С текущими требованиями к приложениям как правильно нужно будет писать так называемый кроссбраузерный код, то есть код, результат выполнения которого будет давать везде один и тот же результат. Конкретного манула по написанию такого кода нет, в этом случае в помощь вам форумы и окей гугл.
Описанные мною проблемные моменты решены в современных js фреймворках (например в таких как ангуляр и реакт). Но в проектах, которые написаны без использования фреймворков эти моменты остаются.
Лично для меня еще большим минусом является то, что здесь идет очень быстрое развитие трендов. Постоянно обновляются версии фреймворков, выходят новые библиотеки, и все сразу хотят начать их использовать. В общем, за сообществом не угнаться.
Фулстек
Уже из названия должно быть понятно, что данный тип разработчиков занимается разработкой обоих частей. Пытаться стать таким разработчиком не советую, поскольку выучить все мозгов не хватит в любом случае, да и большинство компаний уже пошли по пути разделения труда. Однако фулстек это то с чего нужно начать, чтобы сделать шаг в сторону бекенда или фронэнда. Разработав пару небольших приложений, вы поймете между ними разницу (а она действительно есть) и сможете определиться, какая из сторон вам ближе.
Я в свое время, чтобы определиться прочитал книгу «Создаем динамические веб-сайты», автор «Робин Никсон». Книга небольшая всего 500 страниц, но благодаря ней у меня сложилось общее представление о веб-разработке и я смело сделал выбор в сторону бекенда о чем до сих пор не жалею. Эту книгу я привел в качестве примера, можно взять любую другую это не принципиально.
Вот в принципе и все чем я хотел поделиться, желаю всем пришедшим в веб удачи и скорейшего освоения.
От «ничего не понятно» до первой работы: как становятся программистами с нуля
⏱ Время прочтения — 7 минут
Шаг 1. Знакомство с веб-разработкой
Начинаем с общего знакомства с направлениями веб-разработки. Вам предстоит определиться, насколько вам подходит программирование и какое направление ближе — фронтенд или бэкенд.
Фронтенд-разработчик отвечает за внешний вид страниц сайта. Он получает от дизайнера макет и превращает в готовую страницу — она подходит под разные экраны, все кнопки работают при нажатии, а схемы или таблицы корректно отображаются.
Бэкенд-разработчик отвечает за работу сайта. Он взаимодействует с сервером — частью сайта, где хранится вся информация. Он создает базы данных и управляет ими, а также проводит интеграции с внешними сервисами.
На этом этапе стоит потренироваться на бесплатных тренажерах. Темы тренажеров и длительность их прохождения могут быть разными. Например, занятия на тренажере «Знакомство с веб-разработкой» займут у вас 4 часа и дадут представление о базовых технологиях веб-разработки. После можно выбрать тренажеры, раскрывающие какое-то из направлений разработки более подробно. Занятия бывают для разного уровня — от новичков до опытных пользователей.
Много информации и базовых уроков есть на «Ютубе». Можно проходить их дома самостоятельно. Еще один вариант — читать книги по разработке для новичков. В обоих случаях нужно следить за тем, чтобы информация была актуальной. ИТ стремительно развивается — и есть риск получить устаревшие знания, а потом долго переучиваться заново.
К чему готовиться: если вы вообще не сталкивались с программированием, на этом этапе вам будет ничего не понятно! Это нормально. Получив первое представление о разработке, вы сможете понять, в какую сторону вам двигаться.
По времени этап займет около месяца.
Шаг 2. Обучение
После того как определились с направлением — начинаем обучение. Можно учиться самостоятельно или записаться на курсы по верстке или программированию.
Самостоятельное обучение
Бесплатно, но сложнее, чем учиться на готовых программах. Чтобы всё удалось, составьте учебный план: распишите темы, подберите упражнения и самостоятельные проекты, которые потом украсят ваше портфолио.
Идеи проектов для тренировки
Обучение на курсах программирования
На рынке много курсов для разных бюджетов, с разной длительностью и дополнительными опциями от школ — например, в HTML Academy во время обучения есть личный наставник, а после — стажировка и помощь в трудоустройстве.
Выбирая школу, важно понять, что информация в программе актуальна и на самом деле пригодится вам при трудоустройстве на работу.
Необходимая база для любого хорошего разработчика/верстальщика
Чтобы получить ее, возможно, понадобится не один, а два или три курса — например, по обычной и адаптивной верстке, а еще по JavaScript.
На курсах должны понятно объяснять базовые вещи из программирования: типы, операторы, алгоритмы, функции, циклы, объекты и структуры данных. Их понимание пригодится, даже если вы в итоге будете учить какой-то другой язык.
Инструменты (для верстки и JavaScript):
К чему готовиться: На этом этапе вы столкнетесь с первыми трудностями и чувством усталости. Делают ошибки и ощущают себя глупыми в процессе обучения практически все. Важно не поддаваться желанию опустить руки и всё бросить. Для этого правильно распределяйте время на учебу и отдых и найдите наставника. Всего изучение основ займет у вас около полугода.
Как найти наставника и что от него ожидать
На этапе обучения наставник практически незаменим. Он может проверить код, ответить на сложный вопрос, поддержать морально с высоты своего программистского опыта.
На хороших курсах за вами закрепят хорошего наставника, которому вы сможете задавать вопросы, который будет отслеживать ваш прогресс. Если вы обучаетесь самостоятельно, не переживайте, что останетесь без поддержки: киньте клич в социальных сетях и попросите кого-то из знакомых помочь вам. Еще один вариант — поискать наставника на форумах для программистов или в сообществе разработчиков. Например, в HTML Academy есть чат сообщества в «Телеграме», где можно задать любой вопрос.
Шаг 3. Углубление навыков, чтобы зарабатывать больше
Первую работу вы можете найти уже на этом этапе. Например, после курсов по верстке можно устроиться младшим верстальщиком. Зарплата в данном случае будет в районе 25–45 тысяч. Те, кто выучил основы JavaScript, смогут зарабатывать до до 40–75 тысяч на начальном этапе.
Чтобы получать больше и не заскучать, стоит продолжать обучение. Вариант для развития — выучить фреймворки, потому что программисты обычно не пишут на чистом JavaScript.
Самые популярные и прибыльные фреймворки для фронтендеров — React, Angular, Vue.js, Ember.js и Meteor. Для бэкендеров — Yii2, Laravel, Symfony, Django и Flask. Если вы знаете JavaScript, но вам понравилось делать бэкенд, попробуйте Express.js — это фреймворк для Node.js.
Знание фреймворков повышает зарплату. Средний заработок React-разработчика — около 100 тысяч. И чем дольше и лучше вы работаете, тем больше получаете.
К чему готовиться: заложите на изучение фреймворков еще от 1 до 3 месяцев.
Шаг 4. Стажировка или первая работа
Изучив основы программирования и какой-то из фреймворков, вы готовы к стажировке или первой работе.
Стажировка. Ее проходить не обязательно, но она помогает посмотреть на все рабочие процессы изнутри, набраться уверенности и легче адаптироваться к смене профессии. Компании со своей стороны заинтересованы в выпускниках и обычно готовы трудоустраивать их на позицию младших разработчиков, если стажировка прошла успешно. Часто школы принимают своих студентов на стажировку.
Трудоустройство. К этому моменту у вас уже будет наработанное портфолио — профиль на «Гитхабе» с вашими проектами. Осталось сделать резюме, указать ваши ключевые компетенции, сослаться на профиль и опубликовать на hh.ru или других сайтах по поиску работы. Пока у вас мало опыта, стоит активно откликаться на вакансии и ходить на собеседования.
Тина Кузьменко — выпускница HTML Academy, живет в Нидерландах. По образованию она журналист, но после переезда в новую страну освоила профессию и устроилась фронтенд-разработчиком в продуктовую компанию:
Еще во время учебы тщательно прорабатывала свое резюме. Позже красиво оформила фриланс-опыт по верстке. Также у меня накопилось немало личных проектов для портфолио, которые я аккуратно оформила на GitHub. Так что меня почти сразу стали приглашать на собеседования.
По итогу собеседований я получила в один день сразу два предложения. Одно из них было на мидла в продуктовую компанию Copernica Marketing Software. Его я и выбрала.
К чему готовиться: поиск работы может занять какое-то время — всё зависит от вашей активности и навыков. Если вы понимаете, что каких-то навыков не хватает и их часто спрашивают на собеседованиях, попробуйте изучить их параллельно с поиском работы.
После трудоустройства несколько месяцев уйдет на адаптацию. Не бойтесь спрашивать совета у коллег, готовьтесь много учиться (опять) теперь уже в реальных условиях. И не забудьте гордиться собой — вы перешли в новую профессию.
Веб-разработка. С чего начать
На старте бывает непонятно, какой язык программирования выбрать первым. На самом деле, нет идеального языка, который раз и навсегда определит вашу карьеру. Освоить новый язык программирования — всё равно что выучить ещё один иностранный. Сначала надо определиться, что вам больше подходит: фронтенд или бэкенд.
Выбираем направление
Фронтенд
Это то, что пользователь видит и с чем взаимодействует на странице. Дизайн, визуальные элементы, схемы — вся лицевая сторона. Задачи фронтендера — сделать сайт, который будет решать задачи владельца, одинаково корректно работать на всех устройствах, независимо от браузера и размера экрана и при этом будет удобен пользователю. Основные инструменты: HTML, CSS и JavaScript. Подойдёт тем, кто педантично относится к деталям и хочет сразу видеть результат своей работы.
Бэкенд
Невидимая часть сайта. Бэкенд-разработчик отвечает за то, что скрыто от глаз пользователя и работает на сервере. Например: создаёт базы данных и программы, которые будут записывать информацию в базу; шифрует пароли и ценную информацию; настраивает доступы и систему резервного копирования данных; пишет программы, обрабатывающие информацию, невидимую пользователю.
Языков программирования для бэкенда несколько: PHP, Ruby, Python или Node.js. Для бэкенд-разработки нужны системы управления базами данных: MySQL, PostgreSQL, SQLite или MongoDB.
Подойдёт для тех, кому интересна работа с данными и решение архитектурных задач.
Вёрстка страниц
Вне зависимости от того, что вы выберете: фронтенд или бэкенд, вам придётся взаимодействовать с веб-страницами. Для этого надо изучить HTML и CSS.
Это язык гипертекстовой разметки. Отвечает за структуру и содержание страницы. Он состоит из тегов, а тег состоит из имени, заключённого между знаками «меньше» и «больше». Например:
Вспомните, как вы работаете с документом в текстовом редакторе. Пишете текст, фрагменты выделяете курсивом или цветом, вставляете картинки или таблицы. Веб-разработчик делает то же самое в редакторе кода с помощью тегов.
Веб-стандарты HTML описаны в спецификациях. Это главный источник знаний и для браузеров, и для разработчиков. Важно следить за их обновлениями.
Это язык, который используется для стилизации вашей разметки. Например: сделать текст красным, выровнять по левую сторону, округлить углы изображения, поиграть со шрифтами, сделать отступы больше или меньше.
отвечает за формирование текстового абзаца. Допустим, нам нужно чтобы все
Знакомство с HTML и CSS
Нажатие на кнопку — согласие на обработку персональных данных
Знание основ HTML и CSS позволит создавать простые сайты с текстовым наполнением. Если хотите что-то посложнее, не обойтись без языков программирования.
Программирование
JavaScript
Браузерный язык программирования для фронтенд-разработки. Его поддерживают все популярные браузеры. Каждый сайт, каждое веб-приложение, которым вы пользовались содержит JavaScript-код. Его часто рекомендуют для изучения новичкам, потому что он достаточно простой, но содержит все фундаментальные вещи: объектно-ориентированную модель и структуры данных.
Применяется, чтобы оживить HTML-страницы: добавить на страницу обработку действий пользователя или интересные визуальные эффекты. С его помощью можно даже писать картины на канвасе. Возможности применения JavaScript ограничиваются только вашей фантазией и поддержкой браузеров. Не путайте его с Java, это совершенно разные языки.
Серверный язык программирования, на котором пишут бэкендеры. Он создан специально для веб-разработки — написанный на нём код можно внедрить в HTML.
Когда вы открываете свою страницу в социальной сети и вводите логин-пароль, компьютер формирует запрос с вашими данными и отправляет на сервер. На стороне сервера PHP получает информацию из базы данных, которая тоже лежит на сервере и формирует вашу страницу: передаёт на фронтенд имя, фотографию, заполняет поля. Результат оформляется в виде готового HTML и отправляется вам в браузер.
PHP не самый сложный язык, но чтобы раскрыть все его возможности, потребуется изучить и другие технологии. Например, работу с базами данных: язык SQL, а также MySQL, PostgreSQL, SQLite или MongoDB.
База данных — это место, в котором хранятся данные сайта. Это могут быть тексты страниц, списки пользователей с их логинами и паролями, каталоги продукции и многое другое. На PHP пишется серверная логика для интернет-магазинов, сервисов бронирования, а также крупных проектов, которыми пользуются миллионы людей: «Википедия», «ВКонтакте» и «Фейсбук».
Основы бэкенда можно изучить на интенсиве «PHP, уровень 1».
React
Библиотека на языке JavaScript, созданная разработчиками «Фейсбука». Используется для создания веб-приложений. Уметь пользоваться библиотеками нужно, чтобы оптимизировать написание кода и не тратить много времени на поиск ошибок. В библиотеке хранятся готовые решения, которые можно использовать для типовых задач. React — лидер в рейтинге разработчиков по удовлетворённости технологиями 2018 года.
Чтобы написать приложение с помощью React, недостаточно знать HTML, CSS и JavaScript. Библиотеку придётся изучить отдельно. Но если у вас уже есть базовые знания JavaScript, проблем с этим не будет.
Вот примеры сайтов, сделанных с помощью React — «Почта России» и «Meduza».
Если хотите разобраться с основами HTML, CSS, программирования на JavaScript и понять, интересна ли вам веб-разработка, начните с интерактивных курсов.
Знакомство с вёрсткой, JavaScript и PHP — бесплатно и прямо в браузере.
Нажатие на кнопку — согласие на обработку персональных данных
Как стать веб-разработчиком с нуля, почему это актуально и что нужно знать
Профессия веб-разработчика жива, пока живы сайты. Разберёмся, как прийти в неё и что нужно знать новичку. От ситуации на рынке до обучающих ресурсов.
Текст подготовлен на основе вебинара «Как стать веб-разработчиком с нуля за три месяца» с участием Михаила Овчинникова из компании Badoo.
Для полного погружения в профессию у Skillbox есть курс «Веб-разработчик», где теория становится знаниями, практика — навыками, а работа — оплачиваемым призванием.
Ведущий инженер-программист в Badoo Development LLC, специалист по разработке высоконагруженных веб-сервисов.
Ситуация на рынке
Рассматривая общую картину рынка, можно выделить наиболее востребованные направления в IT-сфере:
Почему стоит идти в веб
1. Веб-разработка — это интересно
Стоит изучить одну технологию либо фреймворк и начать с ними работать, как через два-три месяца на рынке появится что-то совершенно новое и все начнут использовать именно это. С вебом не соскучитесь.
2. Веб-разработка — это творчество
Веб-разработка постоянно пополняется молодыми специалистами с новыми идеями, а сама сфера — новыми инструментами, возможностями и сервисами.
3. Веб-разработка — это развитие
Senior-программистов с десятью годами стажа можно встретить довольно редко: либо из них вырастают управленцы, либо они учатся новому. Бурный рост профессии формирует широкое информационное поле и крепкое сообщество.
Поэтому, если вы молоды, полны энергии, имеете чувство вкуса, да ещё и с любовью относитесь к программированию, веб-разработка — для вас.
Сколько зарабатывает веб-разработчик
Изучив сайты поиска работы, мы увидим диапазон зарплат веб-разработчиков:
Многое зависит от страны, региона, выбранного языка и компании, предлагающей вакансию.