6 проектов для улучшения навыков фронтенд-разработчика

0
2716
views
javascript logo

Хочешь проверить свои знания по JS?

Подпишись на наш канал с тестами по JS в Telegram!

×

Перевод статьи «Here Are 6 Front-End Challenges to Code».

Проекты для фронтенд-разработчика

Фронтенд-разработка это дело сложное, но постоянная практика позволит вам превратиться в настоящего мастера. То есть, чтобы стать эффективным «решателем проблем» в сфере фронтенда, нужно просто постоянно что-то строить и решать как можно больше задач.

Представляем вам 6 небольших проектов для отработки навыков фронтенд-разработки, взяться за которые можно хоть сегодня.

1. Форма для кредитной карты

Фантастическая форма для кредитной карты с плавным и приятным взаимодействием. Функционал включает форматирование номера, валидацию и автоматическое определение типа карты. Пример с отзывчивым дизайном создан на Vue.js.

Посмотреть код можно здесь.

Отрабатываемые навыки

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

2. Гистограмма с нуля

Гистограмма (или столбчатая диаграмма) это диаграмма, в которой данные представлены в виде столбцов, причем длина или высота столбцов пропорциональна величинам, которые они отображают.

Столбцы могут располагаться как вертикально, так и горизонтально.

Гистограмма

Отрабатываемые навыки

  • Отображение данных структурированным и легким для понимания образом.
  • Опционально: использование элемента <canvas> и отрисовка элементов с его помощью.

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

3. Анимированное сердечко Twitter

Twitter представил эту прекрасную анимацию еще в 2016 году. И поскольку сегодня она все еще радует глаз, почему бы не попробовать создать такую самостоятельно?

Отрабатываемые навыки

  • Изучение работы атрибута CSS keyframes.
  • Манипуляции с HTML-элементами, анимация элементов.
  • Сочетание в работе JavaScript, HTML и CSS.

4. GitHub-репозитории с функционалом поиска

Не открою Америку, если скажу, что GitHub-репозитории это в общем-то просто разрекламированный список.

Наша задача — отобразить репозитории и дать возможность пользователю отфильтровать их. Для извлечения репозиториев пользователя используйте официальный GitHub API.

GitHub profile page — https://github.com/indreklasn

Отрабатываемые навыки

  • Получение данных из API.
  • Отображение данных, полученных через API.
  • Фильтрация и вывод релевантных данных в соответствии с условиями поиска.
  • Опционально: используйте v4 API, созданный с применением GraphQL.

5. Чат в стиле Reddit

Чаты это эффективный способ коммуникации, простой в использовании. Но что на самом деле стоит за современными чатами? WebSockets!

Чаты

Отрабатываемые навыки

  • Использование WebSockets, обеспечение возможности коммуникации в режиме реального времени и обновление данных.
  • Изучение разных уровней прав пользователя (например, собственник канала чата играет роль админа (admin), а другие люди в чате это простые пользователи (user)).
  • Валидация форм и их обработка. Помните, что chat box для отсылки сообщений это элемент input.
  • Обеспечение возможности для пользователя создавать чат или присоединяться к чату.
  • Изучение работы системы личных сообщений. Пользователи должны иметь возможность общаться друг с другом приватно. То есть, вам нужно будет устанавливать WebSocket-соединение между двумя пользователями.

6. Навигация, как на Stripe.com

Уникальной эту навигацию делает то, что всплывающий контейнер подгоняется под его содержимое.

Отрабатываемые навыки

  • Комбинирование CSS-анимаций и переходов.
  • Перекрестно затухающий контент (сross-fading) и применение класса active к элементу, в отношении которого выполняется наведение мыши.

Попробуйте сделать это самостоятельно, но если вам все же пригодилась бы помощь, вот пошаговое руководство.

Заключение

Спасибо за внимание! Надеюсь, вы найдете в этом списке задачу по своему вкусу. Помните, что нет никакого короткого пути к тому чтобы стать хорошим программистом. Единственный способ приобрести и отточить нужные навыки — создавать как можно больше всего.

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

Please enter your comment!
Please enter your name here