🌐 Собираем портфолио начинающему веб-разработчику

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

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

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

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

Что нужно учесть приступая к работе

1. Проект должен отражать востребованные навыки и быть действительно нужным для клиента или компании. Решайте реальные проблемы через свои проекты. Объясняйте и показывайте – какие.
2. Показывайте, чем вы хотели бы заниматься в дальнейшем.
3. Постарайтесь, чтобы ваши работы выглядели оригинально, добавьте что-то необычное.
4. 5-7 проектов для начала – это неплохо, но если вы делали что-то объемное, может хватить и 3.

Где брать работы для портфолио

1. Вы наверняка делали какие-то проекты в процессе или после обучения. Бесплатные курсы иногда включают их в программу. Такое практикуется, например, в сертификации Free Code Camp или в недорогом курсе Bootcamp от Udemy. Он пропитан практикой, предоставляет возможность общаться с другими студентами и получать фидбек.

2. Сделайте сайт-визитку и реализуйте там интересные фичи:

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

3. Участвуйте в конкурсах и хакатонах. Даже если вы делали проект в команде, его можно положить в портфолио, указав свой вклад с доказательствами в виде скриншотов.

4. Загляните в генераторы челленджей. Например, на Sharpen или Briefz. Просто замените design на develop и пробуйте создавать то, что там предлагается.

5. Стажировки. Если вас не возьмут на работу, вы все равно успеете «прикоснуться к великому» и пополнить портфолио проектом, над которым работали в компании. Даже если не попадете на саму стажировку, скорее всего останется сделанное вами тестовое задание. Его можно доработать и тоже приложить к портфолио (о некоторых других вариантах мы уже писали). Также можно посмотреть вакансии для начинающих на форуме DOU и стажировки в их дайджестах.

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

7. Создайте сайт по бартеру. Можно, например, помочь начинающему дизайнеру с разработкой, чтобы он помог вам с дизайном. Если таких знакомых на примете нет, предлагайте свои услуги на разных платформах: ищите людей, которые предлагают что-то в обмен на разработку. Вот несколько вариантов:

• группа ВК «По бартеру»;
• Simbi;
• Trade Made (приложение, правда только под Android);
• Swap Right (сразу из объявления понятно, что нужно человеку и что он может дать взамен).

8. Попробуйте себя в волонтерском проекте. Представьте, что новичку можно получить международный опыт, не выходя из дома! Искать интересные варианты стоит на разных платформах:

• IT-волонтер – здесь некоммерческие организации публикуют «вакансии» по IT-профессиям.
• Social Coder пишут, что опыт не важен (но начинающие участники проекта будут помогать более опытным) и ищут именно ИТ-специалистов. Списка задач на выбор здесь нет: для участия нужно зарегистрироваться, рассказать о своем опыте и чем хотите заниматься. После этого вас соединяют с некоммерческой организацией, которая ищет как раз такого человека. В среднем проекты длятся 2 месяца, но бывает по-разному.
• Volunteermatch – программа, которая специализируется на волонтерских вакансиях.
• Волонтерские программы ООН для разработчиков.
• В Free UK Genealogy можно присоединиться к команде разработчиков открытых проектов. Найти совпадающий с вашими интересами несложно.

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

9. Можно помогать и проектам на краудфандинговых платформах. Для этого выбираем любую из них и ищем в Google: создание сайта site:(адрес выбранной вами платформы). Находим какой-нибудь интересный проект, которому требуется разработка сайта, и предлагаем помощь ее создателю. Несколько примеров: на Kickstarter, а также на Mola Mola – раз и два.

10. Копируйте несложные сайты, что-нибудь добавляя, изменяя и улучшая. Попробуйте решить некую проблему или сделать какой-то элемент более удобным. Для вдохновения: Jake Dow-Smith Studio, MCA, TRA, Jonty Davies, Глущенкоиздат, The Storytellers.

11. Есть ряд несложных проектов, которые новичку стоит иметь у себя в портфолио: простые игры, листы To-Do, страницы поисковиков. Представьте, что это ваше практическое задание, но помните – нужно внести в него свое оригинальное видение и решение. Остальные идеи можно посмотреть здесь и здесь.

12. Поработайте над уже существующим открытым проектом. Свое участие в виде скриншотов тоже можно добавлять в портфолио.

На Code Triage собраны проекты c GitHub, которые нуждаются в помощи. Лучше отсортировать их по языку программирования.

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

На First Timers Only можно посмотреть и другие ресурсы по open source.

Показываем, как выглядят портфолио начинающих веб-разработчиков

1. Fatma Sümer
2. Pritika Roy
3. Ronald, например, добавляет свои работы с курсов.
4. Ritika Soni
5. Портфолио Chigbogu на GitHub

Проекты есть. Что дальше?

1. Регулярно пополняйте портфолио свежими работами.

2. Включайте в описание проекта ссылку на репозиторий GitHub, где клиент или работодатель смогут посмотреть ваше решение задачи через код, а не только красивую картинку. Давайте ссылки на Link to your CodePen projects.

3. Опишите, когда и для кого вы делали этот проект (даже если для мамы или в качестве эксперимента), и какие требования предъявлялись к продукту. Читателю нужно понимать, в каком контексте реализовывалось решение.

4. Самые удачные проекты ставьте в начало портфолио.

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

Мне нужно оперативно погрузиться во фронтенд. Какой вариант самый быстрый и качественный?

Если 15 лет назад для того, чтобы называть себя фронтенд-разработчиком достаточно было знать HTML, CSS и JavaScript, то сейчас фронтенд-разработка почти не отстает от бэкенд-разработки по количеству фреймворков и сложности стеков. Самый быстрый и качественный вариант — получить знания из первых рук от преподавателей со стажем. Поэтому мы запустили курс «Frontend Basic: принцип работы современного веба», на котором вы:

• освоите стек технологий, который позволит начать работать в любой компании на любом проекте;
• сверстаете свой первый адаптивный макет с учетом семантики и множества декоративных элементов на HTML и CSS;
• поймете, как с помощью JavaScript разрабатывать пользовательские интерфейсы;
• разберетесь, как JavaScript используется в работе с backend и создадите свой первый обмен данными сервером;
• углубитесь в более сложную разработку на React.js и напишете свой интернет-магазин;
• изучите основные команды для работы с GIT, важнейшего инструмента для работы в любой команде.