Евгений Левада 22 декабря 2019

Задачи для оттачивания скиллов фронтендера

Есть только один способ стать хорошим программистом – постоянно кодить. Держи чуток задачек для тренировки скиллов во фронте.

Динамическое меню с контентом

Смотри, как содержимое сжимается, когда кликаешь по кнопке меню. Крутой эффект, не так ли? Если хочешь вооружиться дополнительными крутыми плюшками для разработки, вот тебе наш материальчик.

Что тебе нужно почитать для выполнения задачи:

  • CSS переходы и анимация;
  • изменение расположения макета и содержимого;
  • совместное использование HTML и JavaScript для достижения интерактивности.

Диаграмма с пузырьками

Это тип диаграммы, которая отображает данные в трех измерениях. Первые два параметра выражаются через расположение пузырька по осям X и Y, а третий – это его размер.

Что тебе нужно почитать для выполнения задачи:

  • как использовать JavaScript для визуализации данных;
  • как использовать CSS с JavaScript для переходов, стилизации и интерактивности.

Форма аутентификации с маской

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

Что тебе нужно почитать для выполнения задачи:

  • как использовать правила для форм и инпутов;
  • как использовать JavaScript для валидации форм;
  • как использовать CSS и JavaScript для создания динамических форм.

Вертикальная гистограмма

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

Что тебе нужно почитать для выполнения задачи:

  • как использовать JavaScript для создания вертикальных гистограмм;
  • как использовать CSS для стилизации диаграмм;
  • как визуализировать данные на JavaScript.

Системные метрики

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

Очень часто твои приложения будут использовать эти диаграммы. Потренироваться в создании системных графиков лучше до “боевого” проекта, ибо создание оных отнимает много времени.

Что тебе нужно почитать для выполнения задачи:

  • использование JS для отрисовки системных диаграмм;
  • как использовать CSS для стилизации;
  • визуализация данных с помощью JavaScript.

Как ты развиваешь свои навыки?

Источники

МЕРОПРИЯТИЯ

Комментарии 0

ВАКАНСИИ

QA-специалист
от 70000 RUB до 90000 RUB
Unity-разработчик
Москва, от 60000 RUB до 100000 RUB
Java-разработчик
Москва, от 180000 RUB до 230000 RUB

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ

BUG