5 JavaScript-проектов, которые стоит создать начинающему фронтенд-разработчику

0
1851
views

Перевод статьи «5 Javascript Projects You Should Build as Junior Frontend Developer».

Photo by Zan on Unsplash

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

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

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).

Желательно:

  • регистрация, вход в приложение, управление несколькими пользователями.

Итоги

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

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

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

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here