Тестовое задание для новичка - junior frontend developer.

Очень простое тестовое задание попалось в этот раз. Вакансия была Junior Frontend Developer. И задание дали еще до собеседования. Нужно было сделать его с использованием любого фреймворка и хотя бы с какой-то анимацией.
Можно сделать еще красивее и добавить в портфолио.

--
Исходный код находится здесь:

- - - - - - - - - - - - - - - - - - - - - -

Подписывайся, чтобы не пропустить новые ролики!

- - - - - - - - - - - - - - - - - - - - - -

[moldovanFreestyler]

Bravo!
Ждём следующих видео.
Нравится как ты всё делаешь поэтапно и всё показываешь. 👍

[yuryitikhonoff]

Классное практическое видео, такого очень не хватает с разбора и популярных usecases из практики. А то везде одно засилье как массивы перебирать или флоаты с флексами юзать.

[_yanaaa]

Ждем такое же видео на JS, интересно увидеть ваш универсальный метод))

[dmitrypopov]

Если я правильно понимаю, линии лучше опускать не через margin, а через align-item: center. Так мы избавимся от зависимости в правильной величине отпупа (18px при диаметре кружков 36px). И при адаптивности меньше кода, и устойчивость к изменениям выше. Я бы еще и размер кружков в rem сразу указывал, так как на телефонах и ПК они могут разительно отличаться.

[ProdStd]

Попробую написать это на чистом js позже скину репозиторий :D Спасибо за видео)

[pmlnowk]

только начал изучать html css (неделю только) а уже что-то да знакомо. в целом понятен алгоритм и логика действий! хорошая речь без воды и в целом крутой ролик

[hamsternik_]

Круто, выглядит несложно и интересно 🙃 сам пишу под iOS, но интересно посмотреть как оно «у других»

[romanryaboshtan]

Очень классная идея, быстро показывать кодирование и объяснять в фоне, я такого нигде не видел, даже у Владилена

[jask]

Все фигня, все должно быть в один клик и один этап! ахаха
Крутое видео, спасибо!

[denyskorotin]

"Конечно, разбивать на компоненты я не буду, это здесь для наглядности", лучше показывать бест пректис, потому что этот код тяжело поддерживать, лучше разбить на компоненты: степпер и в нем каждый степ будет компонентом, то есть, формой, ее тогда проще валидировать, после такого видео джуны на интервью смогут удивить)

[rldjflb]

Я думаю что создавать блоки preline, postline а потом скрывать их и центрировть их с помошью margin да и ктому же на глаз не по феншую

на одном из проекте мне доводилось сделать это на vue и было сделано раз в 2 легче можно было для блока step задать after и не париться

[vladkovalenko]

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

[antonmaklakov]

Какой стек технологий можно было использовать для данной формы? Или в задании было сказано, что надо просто сделать задание?

[merrym]

Почему бы не использовать место pre-line, post-line - before, after. Они созданы для использования в таких фишках. Я очень часто их использую, когда нужно добавить линии, когда бордера маловато становится. Часто их используешь?

[diasyergaliev]

Не могли бы вы по пробовать объяснить, почему использование фреймворков так важно? Было ли возможным сделать всё то же что на видео, используя нативный (на сколько я понимаю - чистый) javaScript?

[denpol]

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

[Happy-wtdy]

М-да)) Я почти ничего не понял) Хорошо знаю css с препроцессарами и адаптивом, верстаю по БЭМ и вот почти месяц назад начал изучать JS, пока что с DOM деревом не работал, мб по этому ничего не понимаю... Сколько у тебя времени ушло изучения с нуля до первой работы? Как ты изучал js, как и где практиковал его? Буду очень признателен, если ответишь)

[viaceslavborodin]

Привет! Можно узнать где вы обучались фронт-енду? Самостоятельно или при помощи курсов? Что бы посоветовали?

[zytfmjw]

задача интересная и я точно не смогу ее решить на ангуляре, мне только только начинает казаться что я понимаю реакт, значит ли это что мне далеко до джуна ? (( итрересно было бы посмотреть на реализацию такой анимации в ввиде постепенного заполнения, на чем можно было бы это реализовать ?

[unicoxrtj]

лайк, подписка
Уважаемый автор, json-server+axios+jwt сможешь посмотреть курсом?