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

Доброго времени суток, уважаемые пользователи форума! Специально для вас я начинаю новую рубрику – «Практика от MMGP», и это – первая статья из цикла. В его рамках я буду делиться с вами всеми тонкостями и важными моментами, а также показывать на конкретном примере, сколько можно заработать и что для этого нужно уметь. На данный момент планируется публикация материалов по двум направлениям: получение знаний и зарабатывание денег с их помощью. Эта статья нацелена познакомить вас с новым форматом и рассказать об одной профессии в сфере онлайн заработка, и начнем мы с получения знаний в сегменте веб-разработки.

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

Для понимания рынка я всегда анализирую стоимость работ и сроки выполнения. Взяв цены и сроки из одной популярной биржи, я сделал выборку по разным категориям фрилансеров. Например, час работы большинства начинается с 7 долларов, средний показатель по специалистам на бирже – 10-15 долларов. В результате стоимость выполненных работ составляет 30$ и выше. Некоторые же работы могут оцениваться в 500-1000 долларов и выполняться за 7-10 дней. При этом важно учитывать, что полученные на выходе готовые сайты размещаются на хостинге со всеми формами и обработчиками событий, то есть первые заказы для нас будут в категории 30-80 долларов за один лендинг или пять страниц адаптивной верстки. Это достаточно хороший показатель: выполнив один заказ, у меня может получится выполнить и цель.

Что я буду учить?


Это основа основ. Я думаю, многие знают, что это такое, и сталкивались не один раз. Если кратко, то HTML – гипертекстовая разметка текста, а CSS – каскадные таблицы стилей. Более детально об этих технологиях можно почитать на известном ресурсе HTML и CSS. Так как я не собираюсь изучать абсолютно все теги и их особенности, это существенно сокращает время обучения. Главная цель этого блока – понять основные моменты взаимодействия, подключения и совместной работы. А вот сложности и конкретные проблемные ситуации я буду решать с помощью поиска определенных готовых решений. В целом, считаю такой вариант максимально оптимальным и оптимизированным. Для работы я буду использовать такие программы как Sublime Text и Brackets.


Это очень интересный конструктор, который помогает комбинировать HTML и CSS. Более того, на данном ресурсе размещено большое количество готовых работ и вариантов, которые можно использовать как в обучении, так и в разработке, в том числе иконки, шаблоны, слайдеры и многое другое. И все это огромное разнообразие находится в свободном доступе, а значит, его можно дорабатывать и приводить в интересующий вид. Я еще не просмотрел все полностью, но успел быстренько пробежаться взглядом и решить использовать Bootstrap в процессе обучения. Я планирую создать простой сайт, который было бы не стыдно показать друзьям и клиентам. Пока не могу найти достаточное количество материалов, но есть интересный ознакомительный курс на YouTube. А дальше только практика, практика и еще раз практика.


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


Это очень похоже на предыдущий пункт, но уже без каких-либо манулов или кейсов – только готовый макет в формате PSD, собственные знания и опыт. Для работы с макетами я буду использовать традиционный Adobe Photoshop. Для того, чтобы сайт отображался во всех браузерах одинаково, нужно будет хорошо разобраться с отступами, позиционированием и адаптивностью. Набивание руки на верстке макетов позволит в дальнейшем довольно быстро верстать разные страницы и лэндинги. Я пока не уверен, что это будет легко и быстро получаться, но очень хочу попробовать. Возможно, некоторые свои работы я выложу сюда на общее обозрение.


Все, описанное выше, можно объединить словом «верстка». Для веб-разработчика этого не достаточно: ему нужно также изучать JavaScript, так как все сложные анимации и различные сценарии реализованы с помощью именно этой технологии. В начале обучения я собираюсь освоить лишь азы, не запоминая сложных конструкций и выражений. Сейчас я хочу разобраться, что и каким образом работает, а также какие интересные фишки я смогу реализовать на своем сайте. Кроме того, есть некоторые ресурсы, позволяющие найти неплохой готовый вариант, чтобы адаптировать его под свои задачи. Скажу откровенно: если о предыдущих пунктах я мог что-то слышать или сталкивался с технологиями непосредственно, то JavaScript и jQuery – это абсолютно новое для меня.


Это библиотека, которая необходима для построения взаимодействия между JavaScript и HTML. Пока что я ограничусь базовыми принципами и конструкциями. Судя по рейтингу, хорошим материалом для обучения можно назвать книгу «jQuery для начинающих». Кроме того, для лучшего понимания и восприятия я буду смотреть практические советы по jQuery в YouTube. Пройти несколько подобных курсов и усвоить их не составит труда – вопрос только времени. Я разместил этот пункт последним и собираюсь изучать его уже в процессе практики и, возможно, выполнения первых заказов. Именно такой вариант подходит мне больше всего. На этом базовый уровень обучения будет окончен и можно будет приступать к бесконечной практике и набивании руки.

Итоговые выводы

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

------------------------
Автор: VictorSamus
Авторские права на статью принадлежат mmgp.ru

VictorSamus, что это у вас с картинками? Там ведь наверное что-то интересное было.

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

Сейчас нормально) Я рассчитывал там кую-то инфографику увидеть Но все равно, с картинками намного лучше.

Будет любопытно почитать потому что в сети очень часто попадались рекламные объявления где предлагают пройти курс веб-разработчика за пару тысяч рублей и ждут потом обязательно высокие заработки

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

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

Я тоже с Вами! Давно интересовалась данной темой, но не знала с какого боку подходить даже =))) И ещё, для установки всех нужных программ и работы на них достаточно ли будет простого ноутбука? Или здесь нужна техника посерьезней?

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

Вполне достаточно ноутбука. Программы не требуют больших требований. Я работаю на Lenovo v580c.

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

В каких направлениях, кроме непосредственно веб-верстки, пригодятся данные навыки? В каком деле это добавит уникальности и принесёт доход?


Отправлено с моего iPhone используя Tapatalk

И какую же цель Вы преследуете, обучая чайников Web-дизайну?)

Возможные разные направления. Это дизайн, frontend и backend, php-разработка и информационная безопасность.
Я не планирую кого-то обучать. Я буду проходить этот путь и параллельно описывать процесс. Чтобы и для пользователей было интересно и я смог на пратките попроьовать эту професию.

А не было бы лучше, сначала освоить это дело, а потом уже пытаться учить?)

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

Ясно) удачи Вам в своих начинаниях))) но надо учитывать, что не вся литература полезная...) пожно и чего то плохого насоветовать(

интересно будет проследить весь путь с нуля ,
к тому же с ссылками на разного рода ресурсы
Успехов в пути !
(подписался на тему )

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

Как круто! Я подпишусь, мне очень интересна тема веб-разработки. Я программирование и прочие компьютерные радости изучала только в институте. С радостью вспомню навыки.

Хотелось бы узнать, для чистоты эксперимента, каковы исходные знания в области вебдизайна ?