Вкатывание в веб разработку [Гайд]

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

Спойлер: "Обо мне"

Fullstack middle (почти сеньёр) веб разработчик, 3 года коммерческого опыта работы. На данный момент веду команду из 3 джунов, проводил десятки собеседований.

Учился самостоятельно по видео гайдам, курсам, документации и т.д.

Мой основной стэк по бэку - php (symfony, laravel), по фронту - vue js.
Успел поработать много с чем и имею довольно таки большую базу.
Общий список - PHP 5.6/7.x, laravel, symfony, opencart, wordpress, joomla, 1c erp, html5, css (препроцессоры sass/less), js (vuejs, angular), jquery, bootstrap 4/5, всевозможные сервисы и модули - retailCRM, AmoCRM, платежные кассы Yandex, Webmoney, аналитика Google Analytics, Яндекс Метрики, различные чаты, гугл и яндекс карты, json, git, linux, photoshop, figma, postman и многое-многое другое

Спойлер: "Почему именно веб"

Считаю, что вкатиться в веб как в программирование проще всего - меньший порог входа, первые деньги за свою работу можно получить довольно быстро, теорию на практике можно применять сразу же и видеть результат.
После освоения бэка в вебе (php/python) можно легко переключиться в другую область разработки - компьютерные игры, разработка приложений для ios/andoird и т.д.

Спойлер: "Сколько времени займет стать стажером/джуном"

У всех по разному, но у меня заняло вместе с php освоить стэк для верстки около 5 месяцев. Если без php только верстать на первое время - за 3 месяца можно вполне управиться

Спойлер: "Что нужно начинающему верстальщику"

Сейчас уже 2020г и нужно понимать, что совсем с голыми знаниями в виде html5 + css + jquery вас никуда не возьмут, как это было 3+ года назад.
Поэтому даю список что надо выучить поэтапно:

1. Учим базовые понятие в вебе - http/https протоколы, что такое сервер, как он работает, что такое домен. Как вообще работает сайт, что происходит со стороны браузера и сервера сайта, когда вы вбиваете доменное имя в вашей адресной строке. Узнаем о запросах GET/POST и т.д.
2. Узнаем как запустить сервер у себя на локалке (OpenServer для винды например).
3. Ставим нормальный IDE - советую PHPStorm
4. Изучаем базово Figma/Photoshop
5. Узнаем что такое git, создаем первый репозиторий в github и пробуем сделать базовые операции
6. Учим html5 - базовые тэги и атрибуты, запоминать всё не нужно, для этого есть справочники и документация.
7. Знакомимся с консолью разработчика в браузере - откладка, просмотр html элементов, css стилей, консоль для js и многое другое - всё это понадобится при верстке страниц
8. Изучаем css - как разберетесь с css, рекомендую сразу же перейти на препроцессоры
9. Изучаем js - не рекомендую уже jquery, только нативный
10. Изучаем flex верстку либо bootstrap 5
11. Верстаем первый не сложный макет, скачанный из интернета.
12. Собираем js/css через webpack/gulp - выгружаем первый свой макет на github
13. Верстаем дальше, придется сверстать порядка 20-30 макетов с нуля, чтобы потом получить 10 идеальных страниц, которые можно поместить в резюме/портфолио

Спойлер: "Рекомендуемые мной курсы"

Список уроков на ютуб, по которым я учился.Документацию никто не отменял, 90% информации берется из неё, лучше всего читать на английском

Спойлер: "Где искать первую работу"

Итак, вы сверстали первые 10 макетов - пора найти работу, ищем объявления в вк, довольно часто люди ищут себе помощников/стажеров или джунов в проекте. Ваша задача - набраться опыта, понять изнутри как ведется разработка. Каждые 4-6 месяцев у вас будут расти скиллы и опыт и можете менять направление и место работы.
З/п будет расти в зависимости от вашего опыта и стэка знаний.

Группы вк с вакансиями
https://vk.com/echo_php
https://vk.com/verstka_html
https://vk.com/php2all

Спойлер: "О фреймворках и CMS в php"

Если вы начали изучать бэкэнд - рекомендую сразу начинать с фреймворков типа Symfony/Laravel - это даст понимание как не писать говнокод. Всякие CMS по типу Opencart/Worpress годятся только на первое время или для фриланса

Круто как раз что нужно

maksmoney87 сказал(а):↑

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

Спойлер: "Обо мне"

Fullstack middle (почти сеньёр) веб разработчик, 3 года коммерческого опыта работы. На данный момент веду команду из 3 джунов, проводил десятки собеседований.

Учился самостоятельно по видео гайдам, курсам, документации и т.д.

Мой основной стэк по бэку - php (symfony, laravel), по фронту - vue js.
Успел поработать много с чем и имею довольно таки большую базу.
Общий список - PHP 5.6/7.x, laravel, symfony, opencart, wordpress, joomla, 1c erp, html5, css (препроцессоры sass/less), js (vuejs, angular), jquery, bootstrap 4/5, всевозможные сервисы и модули - retailCRM, AmoCRM, платежные кассы Yandex, Webmoney, аналитика Google Analytics, Яндекс Метрики, различные чаты, гугл и яндекс карты, json, git, linux, photoshop, figma, postman и многое-многое другое

Спойлер: "Почему именно веб"

Считаю, что вкатиться в веб как в программирование проще всего - меньший порог входа, первые деньги за свою работу можно получить довольно быстро, теорию на практике можно применять сразу же и видеть результат.
После освоения бэка в вебе (php/python) можно легко переключиться в другую область разработки - компьютерные игры, разработка приложений для ios/andoird и т.д.

Спойлер: "Сколько времени займет стать стажером/джуном"

У всех по разному, но у меня заняло вместе с php освоить стэк для верстки около 5 месяцев. Если без php только верстать на первое время - за 3 месяца можно вполне управиться

Спойлер: "Что нужно начинающему верстальщику"

Сейчас уже 2020г и нужно понимать, что совсем с голыми знаниями в виде html5 + css + jquery вас никуда не возьмут, как это было 3+ года назад.
Поэтому даю список что надо выучить поэтапно:

1. Учим базовые понятие в вебе - http/https протоколы, что такое сервер, как он работает, что такое домен. Как вообще работает сайт, что происходит со стороны браузера и сервера сайта, когда вы вбиваете доменное имя в вашей адресной строке. Узнаем о запросах GET/POST и т.д.
2. Узнаем как запустить сервер у себя на локалке (OpenServer для винды например).
3. Ставим нормальный IDE - советую PHPStorm
4. Изучаем базово Figma/Photoshop
5. Узнаем что такое git, создаем первый репозиторий в github и пробуем сделать базовые операции
6. Учим html5 - базовые тэги и атрибуты, запоминать всё не нужно, для этого есть справочники и документация.
7. Знакомимся с консолью разработчика в браузере - откладка, просмотр html элементов, css стилей, консоль для js и многое другое - всё это понадобится при верстке страниц
8. Изучаем css - как разберетесь с css, рекомендую сразу же перейти на препроцессоры
9. Изучаем js - не рекомендую уже jquery, только нативный
10. Изучаем flex верстку либо bootstrap 5
11. Верстаем первый не сложный макет, скачанный из интернета.
12. Собираем js/css через webpack/gulp - выгружаем первый свой макет на github
13. Верстаем дальше, придется сверстать порядка 20-30 макетов с нуля, чтобы потом получить 10 идеальных страниц, которые можно поместить в резюме/портфолио

Спойлер: "Рекомендуемые мной курсы"

Список уроков на ютуб, по которым я учился.Документацию никто не отменял, 90% информации берется из неё, лучше всего читать на английском

Спойлер: "Где искать первую работу"

Итак, вы сверстали первые 10 макетов - пора найти работу, ищем объявления в вк, довольно часто люди ищут себе помощников/стажеров или джунов в проекте. Ваша задача - набраться опыта, понять изнутри как ведется разработка. Каждые 4-6 месяцев у вас будут расти скиллы и опыт и можете менять направление и место работы.
З/п будет расти в зависимости от вашего опыта и стэка знаний.

Группы вк с вакансиями
https://vk.com/echo_php
https://vk.com/verstka_html
https://vk.com/php2all

Спойлер: "О фреймворках и CMS в php"

Если вы начали изучать бэкэнд - рекомендую сразу начинать с фреймворков типа Symfony/Laravel - это даст понимание как не писать говнокод. Всякие CMS по типу Opencart/Worpress годятся только на первое время или для фриланса

Нажмите, чтобы раскрыть...

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

kosras сказал(а):↑

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

Нажмите, чтобы раскрыть...

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

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

О сегодня как раз проходил тут со знакомой тест на алгоритмиках. У них там в вопросах AMD производитель процессоров. Захотелось прямо таки найти составителя теста и все лицо ему гуглом поисковать.

с хауди хо проорал, подобный мусор лучше не вставлять (про видосы в принципе)

Trash Monster сказал(а):↑

с хауди хо проорал, подобный мусор лучше не вставлять (про видосы в принципе)

Нажмите, чтобы раскрыть...

хз чем он тебе не нравится, даёт норм инфу

Trash Monster сказал(а):↑

с хауди хо проорал, подобный мусор лучше не вставлять (про видосы в принципе)

Нажмите, чтобы раскрыть...

Ты такие вещи не говори

Профессионал2 сказал(а):↑

Ты такие вещи не говори

Нажмите, чтобы раскрыть...

а как тебе: "джс - лучший ЯП эвер"

Trash Monster сказал(а):↑

а как тебе: "джс - лучший ЯП эвер"

Нажмите, чтобы раскрыть...

Нет php лучше

СОветую что то менее ПОПУЛЯРНОЕ среди начинающих, чем веб разработка :)
И посложнее область, чтобы не каждые справился.

Я ваще апворком никогда не пользовался особо, у меня там 0 выполненных заказов. ПРосто профиль заполненный.
но я захожу туда иногда и челы сами инвайты кидают.
Любой знает что там нереальная конкуренция. И челы дерутся за заказы за копейки.
А тут сами, потому что специалистов в области единицы.

maksmoney87 сказал(а):↑

Мой основной стэк по бэку - php (symfony, laravel), по фронту - vue js.
Успел поработать много с чем и имею довольно таки большую базу.
Общий список - PHP 5.6/7.x, laravel, symfony, opencart, wordpress, joomla, 1c erp, html5, css (препроцессоры sass/less), js (vuejs, angular), jquery, bootstrap 4/5, всевозможные сервисы и модули - retailCRM, AmoCRM, платежные кассы Yandex, Webmoney, аналитика Google Analytics, Яндекс Метрики, различные чаты, гугл и яндекс карты, json, git, linux, photoshop, figma, postman и многое-многое другое

Нажмите, чтобы раскрыть...

Ясно короче, нифига ты не знаешь.

• 3 года коммерческой разработки, а уже почти сеньор? За 3 года разработки ты только крепким мидлом становишься. До сеньора тебе еще как минимум столько же пахать. То что на тебя повесили трёх джунов, говорит о том что в компании совсем всё плохо с организацией. Либо они просто решили сэкономить и вместо нормального тимлида сплавить всё мидлу за меньшую зарплату.
• Верстальщику очень важно знать как настроить свой сервер, да.
• Верстальщику от PHPStorm пользы примерно столько же сколько от использование какого-нибудь IntelliJ IDEA. А плюсов на фоне какого-нибудь Visual Studio Code нету.
• Как можно было написать отдельно "учим CSS" и "учим flexbox" - непонятно. Еще более непонятно, почему ты написал "учим flexbox или bootstrap". То есть если я выучил бутстрап, я могу не учить флексбокс? А если мне потом нужно сделать элементарные вещи на флексбоксе внутри какого-то блока на странице, что я буду делать?

Выбор курсов - это отдельный разговор. А почему два курса по HTML? В первом курсе "учим HTML за час" не всё выучил?

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

Incro сказал(а):↑

А если мне потом нужно сделать элементарные вещи на флексбоксе внутри какого-то блока на странице, что я буду делать?

Нажмите, чтобы раскрыть...

Бутстрап пихать в проект.

maksmoney87 сказал(а):↑

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

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

Нажмите, чтобы раскрыть...

А гриды запретили что ли?

зачем вы всегда советуете пользоваться webStorm/Idea/PhpStorm и другими IDE от JetBrains?

Если ты обычный верстальщик и немножко пишешь на php, можно просто взять VS Code и спокойно работать, нет вам надо взять платную IDE, пол дня проискать ключ для активации, а в итоге не получить ничего потому что большинство фич от этих IDE вам просто нафиг не нужны

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

maksmoney87 сказал(а):↑

Узнаем о запросах GET/POST и т.д.

Нажмите, чтобы раскрыть...

Щас бы учить не все методы, чтобы потом когда-нибудь сказать "Ой а что такое OPTIONS?"

HiThere сказал(а):↑

зачем вы всегда советуете пользоваться webStorm/Idea/PhpStorm и другими IDE от JetBrains?

Если ты обычный верстальщик и немножко пишешь на php, можно просто взять VS Code и спокойно работать, нет вам надо взять платную IDE, пол дня проискать ключ для активации, а в итоге не получить ничего потому что большинство фич от этих IDE вам просто нафиг не нужны

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

Нажмите, чтобы раскрыть...

ну это так, но там же есть полезные фичи для всех(git например)

Scouser_AK сказал(а):↑

ну это так, но там же есть полезные фичи для всех(git например)

Нажмите, чтобы раскрыть...

удобно конечно, да даже в vs code это можно настроить плагинами, что будет быстрее чем искать ключ активации для jetbrains продуктов в гугле, да и когда пользуешься этими фичами (тыкаешь по интерфейсу вместо того чтобы в консоли все писать), то привыкаешь и в итоге через консоль ты мало что сможешь сделать (на себе проверил)

HiThere сказал(а):↑

удобно конечно, да даже в vs code это можно настроить плагинами, что будет быстрее чем искать ключ активации для jetbrains продуктов в гугле, да и когда пользуешься этими фичами (тыкаешь по интерфейсу вместо того чтобы в консоли все писать), то привыкаешь и в итоге через консоль ты мало что сможешь сделать (на себе проверил)

Нажмите, чтобы раскрыть...

так через пару кнопок можно запушить в репу. А в консоли что-то, что нужно по веткам и тд.

Цитата:

почти сеньёр

Нажмите, чтобы раскрыть...

Цитата:

3 года коммерческого опыта работы

Нажмите, чтобы раскрыть...

Тут в голос прям)

Scouser_AK сказал(а):↑

так через пару кнопок можно запушить в репу. А в консоли что-то, что нужно по веткам и тд.

Нажмите, чтобы раскрыть...

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

Incro сказал(а):↑

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

Нажмите, чтобы раскрыть...

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

ТС вроде многабукаф написал, новички явно сразу загорятся. Только есть некоторые моменты:

1. Самое главное - о себе расписал только опыт и самоучка, но база-то у тебя есть какая-то? направление в школе? дальше, учебки есть какие-то? повар-кондитер там, или кто ты. Мама может математику преподаёт?

Многие не задумываются над базой, которую они получали много-много лет, и делают вывод, что они освоили "за 5мес."

2. PHPStorm для новичков? ну-ну, особенно когда новичок не разбирается, что такое локальная разработка и remote, а ещё некоторые любят новичкам xdebug советовать (с таких советчиков вообще выпадаю)

3. Бэкенд сразу с фрейморков, сразу с Symfony? А может сразу нужно освоить ООП, пространства имён и менеджеры пакетов?

Чтоб выйти на джуна некоторым хватает и 3 месяца, а некоторым и 3 года мало. Некоторых послушать, так 4/5 лет технаря/универа это пустая трата времени. Я конечно согласен, что там много воды, но за счёт воды усваивается важная информация с течением времени.

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

Для примера - у меня был одногруппник (троечник), а у него был друг в IT, и вот этот друг его в течение года натаскивал на вёрстку. Повторяю - в течение года(!), пока он смог самостоятельно работать. И это только вёрстка (html+css) из psd шаблонов.

Всё очень сильно зависит от самоорганизованности и ментора.

AtagaN сказал(а):↑

Тут в голос прям)

Нажмите, чтобы раскрыть...

Я вот тоже сижу и в голос чёт..

maksmoney87 сказал(а):↑

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

Спойлер: "Обо мне"

Fullstack middle (почти сеньёр) веб разработчик, 3 года коммерческого опыта работы. На данный момент веду команду из 3 джунов, проводил десятки собеседований.

Учился самостоятельно по видео гайдам, курсам, документации и т.д.

Мой основной стэк по бэку - php (symfony, laravel), по фронту - vue js.
Успел поработать много с чем и имею довольно таки большую базу.
Общий список - PHP 5.6/7.x, laravel, symfony, opencart, wordpress, joomla, 1c erp, html5, css (препроцессоры sass/less), js (vuejs, angular), jquery, bootstrap 4/5, всевозможные сервисы и модули - retailCRM, AmoCRM, платежные кассы Yandex, Webmoney, аналитика Google Analytics, Яндекс Метрики, различные чаты, гугл и яндекс карты, json, git, linux, photoshop, figma, postman и многое-многое другое

Спойлер: "Почему именно веб"

Считаю, что вкатиться в веб как в программирование проще всего - меньший порог входа, первые деньги за свою работу можно получить довольно быстро, теорию на практике можно применять сразу же и видеть результат.
После освоения бэка в вебе (php/python) можно легко переключиться в другую область разработки - компьютерные игры, разработка приложений для ios/andoird и т.д.

Спойлер: "Сколько времени займет стать стажером/джуном"

У всех по разному, но у меня заняло вместе с php освоить стэк для верстки около 5 месяцев. Если без php только верстать на первое время - за 3 месяца можно вполне управиться

Спойлер: "Что нужно начинающему верстальщику"

Сейчас уже 2020г и нужно понимать, что совсем с голыми знаниями в виде html5 + css + jquery вас никуда не возьмут, как это было 3+ года назад.
Поэтому даю список что надо выучить поэтапно:

1. Учим базовые понятие в вебе - http/https протоколы, что такое сервер, как он работает, что такое домен. Как вообще работает сайт, что происходит со стороны браузера и сервера сайта, когда вы вбиваете доменное имя в вашей адресной строке. Узнаем о запросах GET/POST и т.д.
2. Узнаем как запустить сервер у себя на локалке (OpenServer для винды например).
3. Ставим нормальный IDE - советую PHPStorm
4. Изучаем базово Figma/Photoshop
5. Узнаем что такое git, создаем первый репозиторий в github и пробуем сделать базовые операции
6. Учим html5 - базовые тэги и атрибуты, запоминать всё не нужно, для этого есть справочники и документация.
7. Знакомимся с консолью разработчика в браузере - откладка, просмотр html элементов, css стилей, консоль для js и многое другое - всё это понадобится при верстке страниц
8. Изучаем css - как разберетесь с css, рекомендую сразу же перейти на препроцессоры
9. Изучаем js - не рекомендую уже jquery, только нативный
10. Изучаем flex верстку либо bootstrap 5
11. Верстаем первый не сложный макет, скачанный из интернета.
12. Собираем js/css через webpack/gulp - выгружаем первый свой макет на github
13. Верстаем дальше, придется сверстать порядка 20-30 макетов с нуля, чтобы потом получить 10 идеальных страниц, которые можно поместить в резюме/портфолио

Спойлер: "Рекомендуемые мной курсы"

Список уроков на ютуб, по которым я учился.Документацию никто не отменял, 90% информации берется из неё, лучше всего читать на английском

Спойлер: "Где искать первую работу"

Итак, вы сверстали первые 10 макетов - пора найти работу, ищем объявления в вк, довольно часто люди ищут себе помощников/стажеров или джунов в проекте. Ваша задача - набраться опыта, понять изнутри как ведется разработка. Каждые 4-6 месяцев у вас будут расти скиллы и опыт и можете менять направление и место работы.
З/п будет расти в зависимости от вашего опыта и стэка знаний.

Группы вк с вакансиями
https://vk.com/echo_php
https://vk.com/verstka_html
https://vk.com/php2all

Спойлер: "О фреймворках и CMS в php"

Если вы начали изучать бэкэнд - рекомендую сразу начинать с фреймворков типа Symfony/Laravel - это даст понимание как не писать говнокод. Всякие CMS по типу Opencart/Worpress годятся только на первое время или для фриланса

Нажмите, чтобы раскрыть...

Автор, у тебя есть несколько несостыковок. Как сеньёр может быть со стажем в 3 года? На каком этапе ты понял что ты - сеньёр? То что ты ведёшь 3х джунов, это означает что скорее всего ты работаешь в каком-то digital агенстве версталой + натягивальщиком тривиальных лендосов за полтосы, и как бы в этих агенствах любой станет местным 'сеньёром' спустя пару месяцев работы.

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

Incro сказал(а):↑

• 3 года коммерческой разработки, а уже почти сеньор? За 3 года разработки ты только крепким мидлом становишься. До сеньора тебе еще как минимум столько же пахать. То что на тебя повесили трёх джунов, говорит о том что в компании совсем всё плохо с организацией. Либо они просто решили сэкономить и вместо нормального тимлида сплавить всё мидлу за меньшую зарплату.
• Верстальщику очень важно знать как настроить свой сервер, да.
• Верстальщику от PHPStorm пользы примерно столько же сколько от использование какого-нибудь IntelliJ IDEA. А плюсов на фоне какого-нибудь Visual Studio Code нету.
• Как можно было написать отдельно "учим CSS" и "учим flexbox" - непонятно. Еще более непонятно, почему ты написал "учим flexbox или bootstrap". То есть если я выучил бутстрап, я могу не учить флексбокс? А если мне потом нужно сделать элементарные вещи на флексбоксе внутри какого-то блока на странице, что я буду делать?

Выбор курсов - это отдельный разговор. А почему два курса по HTML? В первом курсе "учим HTML за час" не всё выучил?

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

Нажмите, чтобы раскрыть...

если не сложно, скинь пример норм гайда