Junior Frontend разработчик - тестовое задание с собеседования

↓↓↓ Тайм-коды в описании под видео ↓↓↓

Выполняю тестовое задание с собеседования, на должность junior frontend разработчика. Верстка интерфейса с разделением на компоненты. Таймкоды и макет ниже в описании.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 05 Августа 2024 года.

Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 12 Августа 2024 года.

💻 Курс "Разработка сайтов на PHP + MySQL":
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.

🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе

💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Таймкоды:

00:00 - Описание тестового задания
06:03 - Анонс курсов в ВебКадеми
08:31 - Приступаем к верстке. HTML и SCSS
13:40 - Верстка модалки на всю высоту окна
21:00 - Шапка, контент и подвал в модалке
25:15 - Скролл внутри модального окна
27:35 - Заголовок в шапке
30:11 - Кнопки в подвале
36:16 - Верстка карточек
47:44 - Радиокнопки для переключения карточек
49:46 - Подсветка выбранной карточки
51:47 - Меняем цвет иконки при выбранной карточке.
53:12 - Создание SVG спрайта
59:50 - Скрываем радиокнопки
1:00:35 - Ховер для карточек
1:01:21 - Правка кнопок на мобилках

[vladislavt]

Тестовое больше похоже на позицию верстальщика, но не как не на позицию frontend developer. Сейчас если кто то хочет устроиться совет, как минимум знание асинхроного js, знать какую либо библиотеку по типу React Angular или Vue, Redux а желательно еще и redux tollkit, TS будет большим плюсом. Умение вытащить данные с api и грамотно ими воспользоваться.

[zmtmjwl]

Очень интересный подход к заданию, спасибо за то, что передаёте нам свой опыт.

[qkghcnt]

Очень понравилось Интересная задумка Приближает к реальным условиям Надеюсь это станет традицией на вашем канале Спасибо )

[yevheniidodiak]

Надеюсь когда меня будут нанимать - дадут такое тестовое задание =) Спасибо, мне было полезно. Всё не зря ! =) Вы с каждым уроком даёте уверенность в себе. Спасибо вам за время =)

[uk-lych_sveta]

Спасибо за контент и интересную подачу, все для меня очень познавательно, как начинающего верстальщика, точнее стремящегося стать им.

[zmtmjwl]

Можете в дальнейшем выложить видеообзор о сниппетах, которыми сами пользуетесь?Для ускорения написания кода.

[xdmvmkc]

было бы интересно посмотреть в будущем видео о том, как верстать всякие графики, личные кабинеты и т.п.

[yuriiveteran]

Уважаемый Юрий! Простите что не по теме. Только что завершил работу над Вашим бонусным занятием "Тема для WordPress". Не скажу что все понятно. Но тему таки создал за Вами. Спасибо за бонусный урок!

[vwylnvw]

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

[ufxwztx]

Это скорее на должность html верстальщика задание, а не на фронта

[XRONIKA]

Бладогарю за урок!
59:55 - почему бы не скрыть радиокнопку с помощью "display: none" ?
Как раз то, о чем вы говорили - чтобы не было лишних пробелов и отступов?

[markd]

Может я что то упустил, но если будет дополнительно не 3, а 2 карточки то при space-between они будут смотреться не так как нужно..

[danielm.]

Почему мне такие задания не попадаются?
То личный кабинет состряпать с системой авторизации, то корзину для магазина на vue через store.

[ncwwzdn]

Юрий, спасибо за интересный урок, но как здесь уже писали, какое-то лёгкое задание. Мне тут на днях прислали тестовое для Джуна, но гораздо сложнее. Основная сложность заключалась во множественных фонах. Я, конечно, нагородил там кода и визуально что надо было, получил, но интересно как бы Вы сделали вёрстку.
И ещё, было бы интересно, если бы Вы попробовали результат данного видео отправить ответом на это тестовое и сделать продолжение с ответом из компании, где они разместили это тестовое.

[McBossRacerSever]

Если добавили класс к диву с заголовком title-1, который по вашим же словам должен соответствовать h1, h2... и тд., так почему "Choose a template" не в теге h1?

[maxzm]

почему мы используем div.header вместо обычного header? Разве с точки зрения семантики это не является ошибкой?

[sharic_afk]

странно, норм компания ищет джуна- задание по сложности ~ начинающий верстальщик. и кажется, что использовать row-gap не норм практика сейчас, у него слишком плохая поддержка

[dmitriystoyanov]

Интересно. Когда я вливался на Джуна дали тестовое с запросами, пагинациями, хитрыми фильтрами и т.д.;)) небо и земля.

[alexandersobiborets]

Подскажите пожалуйста название темы в VS Code 😁💻

[rinatvaliullov]

Перезалейте макет, пожалуйста. Не скачивается