5 проектов на JavaScript для начинающего Front-end разработчика | Журнал "Вольт"
Чт. Ноя 26th, 2020


Перевод статьи «5 проектов Javascript, которые вы должны создать как младший Frontend-разработчик».

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

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

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

Желательно:

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

Результат

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

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

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



Source link

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *