Перевод статьи «5 Javascript Projects You Should Build as Junior Frontend Developer».
При поиске первой работы начинающему фронтенд-разработчику (джуниору) трудно продемонстрировать свой опыт. Проекты, на которых вы приобретали новые навыки, редко могут похвастаться хорошим качеством кода. Когда пишешь что-то впервые, попросту невозможно написать идеальный код! В результате ваш публичный репозиторий состоит из «букета» незавершенных проектов. Вряд ли вам вообще захочется, чтобы потенциальные работодатели туда заглядывали.
Вот почему мы призываем вас дополнительно попрактиковаться и использовать полученные навыки, только на этот раз уделяя особое внимание качеству кода. Вот список проектов, которые вы вполне можете создать, чтобы продемонстрировать свои знания и умения.
1. Шаблон блога, созданный при помощи HTML и CSS
Когда вы начинаете осваивать фронтенд-разработку, важно собрать воедино все свои знания по теме HTML и CSS. Создание шаблона блога — хорошая идея для первого крупного проекта. Не беспокойтесь о дизайне, для этого есть множество доступных онлайн-ресурсов.
Требования:
- создать домашнюю страницу, страницу для отдельного поста и страницу с контактами,
- попытаться использовать CSS Grid,
- ваша страница должна быть отзывчивой.
Желательно:
- добавить слайдер;
- использовать настоящий контент, а не Lorem Ipsum.
2. Игра «крестики-нолики» на чистом JavaScript
Создание браузерной игры — отличный способ проверить свои навыки JavaScript. Вам придется реагировать на действия пользователя, взаимодействовать с DOM, хранить данные. Это также отличный проект, которым можно похвастаться перед друзьями и родственниками!
Требования:
- экран приветствия с именем игрока и возможностью ввода символа (крестика или нолика),
- рендеринг символа, когда пользователь кликает по пустой клетке,
- верификация победы.
Желательно:
- создать таблицу результатов с сохранением данных в локальном хранилище;
- реализовать игру с компьютером, используя алгоритм минимакс или ваше собственное решение.
3. Приложение для сообщения о местонахождении, созданное на чистом JavaScript при помощи сервиса карт
Простое приложение, при помощи которого вы сможете поделиться своим местонахождением с другом. Для реализации этого проекта вам придется напрячься, но зато вы получите полезный инструмент. Взаимодействие со внешними картографическими сервисами (например Google Maps или OpenStreetMap) обеспечивается при помощи JavaScript.
Требования:
- на карте должно отображаться ваше текущее местоположение,
- должна быть кнопка «Поделиться», создающая ссылку на вашу текущую локацию,
- нужно создать страницу, на которой будет отображаться местоположение при вставке URL.
Желательно:
- реализовать возможность делиться своим местоположением в реальном времени. То есть чтобы можно было сохранять его и читать каждые несколько секунд из внешней базы данных (например Firebase);
- отображать местоположение вашего друга (в реальном времени), когда он пользуется страницей.
4. Трекер сериалов, созданный при помощи какого-нибудь JS-фреймворка (React, Vue, Angular или др.)
Этот проект понравится любому поклоннику сериалов. Трекер должен отслеживать выход новых серий. Это отличная возможность использовать ваш любимый JavaScript-фреймворк.
Требования:
- поиск сериалов при помощи внешнего API (например TVMaze API),
- добавление сериалов в список отслеживаемых,
- отображение списка отслеживаемых сериалов с датами последних вышедших серий,
- возможность перехода на страницу сериала для чтения подробностей,
- сохранение списка сериалов в локальное хранилище.
Желательно:
- реализовать отсылку электронных писем или всплывающих уведомлений при получении информации о выходе новых серий.
5. Приложение для планирования семейного бюджета, созданное помощи JS-фреймворка (React, Vue, Angular или др.)
Создание такого приложения будет отличной проверкой для ваших навыков фронтенд-разработчика. Вы продемонстрируете свое умение создавать формы и сохранять информацию, а кроме того сможете сами пользоваться этим инструментом и экономить деньги!
Требования:
- возможность добавлять категории,
- добавление новых расходов — с названием, потраченной суммой и категорией,
- суммирование ежемесячных расходов с разбивкой по категориям,
- сохранение данных во внешней базе данных (например Firebase).
Желательно:
- регистрация, вход в приложение, управление несколькими пользователями.
Итоги
Личные проекты — прекрасный способ показать ваши навыки, чтобы получить первую работу фронтенд-разработчика. Покажите потенциальному работодателю свои работы. Учтите, что работодатели смотрят не только функционал приложений, но и их код тоже оценивают, так что следите за качеством и чистотой.
Прежде чем приступать к созданию чего-либо, составляйте себе список требований для минимально жизнеспособного продукта. В ходе работ вы обнаружите, что в вашем приложении может быть и другой интересный функционал. Добавляйте его в список. Такое упорядочивание работы позволит вам закончить проект в назначенные сроки.
Помните, что не стоит в точности реализовывать идеи проектов из этой (да и любой другой) статьи. Меняйте что-нибудь, убирайте и добавляйте функционал по вкусу. Если у вас сохранились старые проекты, на которых вы отрабатывали навыки программирования, их тоже можно творчески переосмыслить, доработать и включить в портфолио.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]