Познакомьтесь с основными направлениями
В разработке сайтов обычно участвуют фронтенд-, бэкенд- и фулстек-разработчик. Быстро пробежимся по основным отличиям и расскажем, кто чем занимается. Если вы уже знакомы с этим направлениями, можете пропустить блок.
Фронтенд-разработчик. Отвечает за видимую часть сайта. Получает макет от дизайнера и превращает его в готовую страницу — расставляет на места все элементы и проверяет, что всё правильно работает на разных экранах. Вёрстку пишет на языках HTML и CSS, оживляет страницу и делает так, чтобы кнопки работали на JavaScript, а с макетами работает в Figma.
Бэкенд-разработчик. Занимается той частью сайта, которую не видно. Он работает с информацией, которую сохраняют пользователи, и делает так, чтобы всё это сохранилось, где нужно, а потом отобразилось, где попросят. Бэкенд может быть «тяжёлым» — его пишут на PHP, Python или Ruby, или «лёгким» — его пишут на JavaScript с помощью Node.js.
Фулстек-разработчик. Так или иначе умеет всё — он работает и с фронтендом, и с бэкендом. То есть нужны навыки из двух профессий. Но за это и платят больше — в небольших компаниях такой человек может заменить нескольких специалистов, а в компаниях покрупнее берёт ответственность за значительную часть проекта.
Теперь вы знаете, что существует три направления: фронтенд, бэкенд и фулстек. Сразу выбирать, кем вы хотите быть не нужно, сначала попробуйте всего понемногу, а там уже станет понятно, какой язык и какие задачи больше нравятся. Дальше расскажем, где вы можете попробовать все направления бесплатно.
Начните с бесплатных материалов
Жаль будет купить курсы и потом их не пройти, благо интернет полон бесплатных обучающих видео и пособий для изучения программирования. Сначала позанимайтесь с ними и если чувствуете, что вам интересно, смотрите в сторону курсов.
У нас в Академии для всех зарегистрировавшихся доступны бесплатные курсы по основам HTML и CSS, JavaScript и PHP, мы называем их тренажёры.
Каждый тренажёр — это практические задания, которые выполняются в редакторе кода, встроенном в браузер. Задание сопровождается кратким блоком теории, а для удобства запоминания ко многим тренажёрам прилагается конспект с основными понятиями и терминами.
Сюжет тренажёров строится вокруг приключений кота Кекса, который ищет себе подрядчиков для работы в веб-студии. Задания максимально приближены к реальным задачам веб-разработчика. Ученики сразу применяют теорию на практике, проходя задания будто уровни в игре. Это мотивирует выполнять все задания и не бросать тренажёр на половине. И потом — кто не любит котиков?
Вот ссылки на бесплатные части:
Тренажёр «Знакомство с HTML и CSS»
Изучаем основы HTML и CSS. На практике разбираемся с семантической разметкой и базовыми механизмами стилизации на примере небольшого сайта.
Тренажёр «Знакомство с JavaScript»
Узнаем, как работает JavaScript в браузере. Научимся оживлять интерфейсы. Будем решать задачи, с которыми регулярно сталкиваются веб-разработчики.
Познакомитесь с основами PHP и разберётесь, как работает внутренняя часть сайта.
Когда изучите основы каждого направления, станет ясно, в каком хочется разбираться глубже. Довести обучение до трудоустройства вам поможет план действий, о том как его составить рассказываем дальше.
Составьте план обучения
План поможет не сбиться с пути и постепенно осваивать новые технологии, к тому же, с ним будет легче планировать время на обучение и нагрузку.
Как составить план
- Найдите роадмап или карту компетенций по выбранной вами специальности. Ищите самый свежий, потому что технологии и требования всё время меняются.
- Посмотрите вакансии, которые сейчас открыты для фронтенд-, бэкенд- или фулстек-джунов, чтобы сверить ваш роадмап с требованиями на рынке. Если видите, что какая-то технология часто появляется в вакансиях, обязательно добавьте её в ваш план.
- Распишите языки и технологии, которые нужно изучить.
- Поставьте себе дедлайны и распределите нагрузку.
Когда план готов, остаётся только начать учиться. Стремиться выучить всё и сразу не рекомендуем, можно быстро выгореть и потерять интерес. Достаточно часа в день, чтобы учиться без боли.
Мы сделали карту компетенций для фронтенд-разработчика, вы можете воспользоваться ей. Карту для фулстека и бэкендера мы пока не успели сделать, но в интернете есть много хороших вариантов.
А ещё у нас есть готовый шаблон развития джуна в Notion, можете воспользоваться им.
С планом разобрались, осталось начать писать код.
Начните практиковаться
Когда приступаете к практике важно осознать одну простую истину: чтобы научиться писать код — нужно писать код. Чем быстрее и чаще вы будете практиковаться, тем больше шансов получить работу.
Мы рекомендуем сразу придумать себе пет-проект, он поможет развиваться и закреплять изученное. Вы можете взять любой макет сайта и сверстать или попробовать сделать аналог Телеграма, если захочется попрограммировать что-то сложное.
Такие проекты можно будет положить в портфолио, что облегчит поиск работы.
Где взять тренировочный макет для практики
Frontend practice — большая библиотека проектов с подсказками. Берёте проект, верстаете, помощь найдёте там же.
Behance или Dribbble — можно вбить в поиск free website/app layouts и выбрать «Веб-дизайн» в разделе «Области творчества».
Figma community — через поиск можно найти много макетов, обычно у всех лицензия CC BY 4.0, но лучше проверить, чтобы потом не было неловко.
Если будете брать макет на Бехнасе, Дрибле или в сообществе Фигмы, проверяйте лицензию, должна быть CC BY 4.0 или можно написать авторам работ, чтобы получить разрешение на использование макета для программирования. Не забудьте объяснить, что вам только для портфолио, а не для коммерческого использования.
В Академии тоже есть макеты для вёрстки
Проекты делятся по уровню сложности и идут в комплекте с пошаговым планом вёрстки, эталонным решением и полезными ссылками для самостоятельного изучения.
Когда вы сделаете первый проект, пора переходить к оформлению портфолио и резюме.
Оформите портфолио
Чтобы начать поиск, достаточно двух-трёх проектов, которые будет не стыдно показать.
Чаще всего разработчики собирают портфолио на GitHub. Так будущий работодатель сразу может посмотреть качество вашего кода и процесс создания проекта.
Инструкция по созданию портфолио на GitHub
- Регистрируйтесь на GitHub;
- В профиле ставите на аватар фотографию, хорошо, если на ней будете вы;
- Указываете контакты для связи;
- Создаёте репозиторий, даёте ему название, например, «projects» или «portfolio»
- В репозиторий пушите проекты.
Готовы начать?
Мир разработки большой, место найдётся для каждого. Главное учиться и качать навыки.
Чтобы сделать первый шаг в айти прямо сейчас — регистрируйтесь и приступайте к первой тренировке.