eFusion 22 декабря 2019

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

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

Хочешь уверенно проходить IT-интервью?

Готовься к IT-собеседованиям уверенно с AI-тренажёром T1!

Мы понимаем, как сложно подготовиться: стресс, алгоритмы, вопросы, от которых голова идёт кругом. Но с AI тренажёром всё гораздо проще.

💡 Почему Т1 тренажёр — это мастхэв?

  • Получишь настоящую обратную связь: где затык, что подтянуть и как стать лучше
  • Научишься не только решать задачи, но и объяснять своё решение так, чтобы интервьюер сказал: "Вау!".
  • Освоишь все этапы собеседования, от вопросов по алгоритмам до диалога о твоих целях.

Зачем листать миллион туториалов? Просто зайди в Т1 тренажёр, потренируйся и уверенно удиви интервьюеров. Мы не обещаем лёгкой прогулки, но обещаем, что будешь готов!

Реклама. ООО «Смарт Гико», ИНН 7743264341. Erid 2VtzqwP8vqy


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источники

Комментарии

ВАКАНСИИ

Добавить вакансию
Golang-разработчик
Пермь, по итогам собеседования
Hotel Search Team Lead (Golang)
по итогам собеседования

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