Junior Frontend разработчик - тестовое задание с собеседования
Вставка
- Опубліковано 3 лип 2024
- ↓↓↓ Тайм-коды в описании под видео ↓↓↓
Выполняю тестовое задание с собеседования, на должность junior frontend разработчика. Верстка интерфейса с разделением на компоненты. Таймкоды и макет ниже в описании.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 01 Июля 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 08 Июля 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
Таймкоды:
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 - Правка кнопок на мобилках
Скачать макет: www.figma.com/file/JTeBDr2ccY...
Сайт: webcademy.ru/
Вконтакте: webcademy
Telegram канал: t.me/webcademynews
Тестовое больше похоже на позицию верстальщика, но не как не на позицию frontend developer. Сейчас если кто то хочет устроиться совет, как минимум знание асинхроного js , знать какую либо библиотеку по типу React Angular или Vue , Redux а желательно еще и redux tollkit, TS будет большим плюсом. Умение вытащить данные с api и грамотно ими воспользоваться.
без опыта даже не рассматривают на реакт ! плюс везде пишут , что будет плюсом но подразумевается мидл разработчик а то есть следующее будет плюсом , например : либо sql БД / node.js / agile / redux-hook / ну и тд и тп !! ещё конечно без TS тоже уже не катируется ! пару раз видел на junior пишут что будет плюсом three.js - ну это высший пилотаж конечно, junior! Вы серьёзно ?! иногда хочется так и спросить ! Мне просто хотелось высказаться ! Всем успехом в начинаниях! Ведущему респект , смотрю понравилось
@@alexandrgusletsov2567 как давно учитесь?
Очень интересный подход к заданию, спасибо за то, что передаёте нам свой опыт.
Спасибо вам огромное, очень полезно
Очень понравилось Интересная задумка Приближает к реальным условиям Надеюсь это станет традицией на вашем канале Спасибо )
Спасибо за контент и интересную подачу, все для меня очень познавательно, как начинающего верстальщика, точнее стремящегося стать им.
Сегодня весь день провел на вашем канале, как зомби, не мог остановиться.
Здорово) Рад что контент заходит!)
Можете в дальнейшем выложить видеообзор о сниппетах,которыми сами пользуетесь?Для ускорения написания кода.
было бы интересно посмотреть в будущем видео о том, как верстать всякие графики, личные кабинеты и т.п.
Можно реализовать.
Надеюсь когда меня будут нанимать - дадут такое тестовое задание =) Спасибо , мне было полезно. Всё не зря ! =) Вы с каждым уроком даёте уверенность в себе. Спасибо вам за время =)
GOOD)))
Уважаемый Юрий! Простите что не по теме. Только что завершил работу над Вашим бонусным занятием "Тема для WordPress". Не скажу что все понятно. Но тему таки создал за Вами. Спасибо за бонусный урок!
Юрий, приветствую! Отлично, рад что все получилось! 👍
Это скорее на должность html верстальщика задание ,а не на фронта
Может я что то упустил, но если будет дополнительно не 3, а 2 карточки то при space-between они будут смотреться не так как нужно..
Бладогарю за урок!
59:55 - почему бы не скрыть радиокнопку с помощью "display: none" ?
Как раз то, о чем вы говорили - чтобы не было лишних пробелов и отступов?
а она будет вообще работать в таком случае?
@@user-or1hy4xz8u нет
больше практики
Почему мне такие задания не попадаются?
То личный кабинет состряпать с системой авторизации, то корзину для магазина на vue через store.
Требовать от джуна глубокого понимания архитектуры и просить написать ее с нуля это очень сильно...
почему мы используем div.header вместо обычного header? Разве с точки зрения семантики это не является ошибкой?
Мое понимание такое:
Мы работаем не с главной страницей, а с модальным окном, поэтому такая разметка.
На главной странице обычно у нас есть теги header, main и footer, и если main - это блок с эксклюзивным контентом, то header и footer повторяются на всех последующих.
Т.к. мы работаем не с главной страницей, а с модальным окном, которое не подразумевает дальнейшего перехода в нем же на другие стр, нам нет смысла писать header, main и footer.
Поправьте меня, если я ошибаюсь, погрузился в тему месяц назад и понимание такое пока что.
Юрий, спасибо за интересный урок, но как здесь уже писали, какое-то лёгкое задание. Мне тут на днях прислали тестовое для Джуна, но гораздо сложнее. Основная сложность заключалась во множественных фонах. Я, конечно, нагородил там кода и визуально что надо было, получил, но интересно как бы Вы сделали вёрстку.
И ещё, было бы интересно, если бы Вы попробовали результат данного видео отправить ответом на это тестовое и сделать продолжение с ответом из компании, где они разместили это тестовое.
Андрей, приветствую! Да, тестовое не из сложных, однако это реальный пример. Скидывайте мне в ВК - интересно будет глянуть что вам прислали, может тоже разберу на канале. Насчет этого тестового - оно было сделано "учеником", естественно после собеседования, отправлено и успешно принято, с последующим оффером на трудоустройство. Я делал код ревью тестового, код был примерно таким-же.
Если добавили класс к диву с заголовком title-1, который по вашим же словам должен соответствовать h1, h2... и тд., так почему "Choose a template" не в теге h1?
Скажу прямо. Под каждым видео всегда появляются комментарии и споры касательно семантики. В данном случае я решил исходить из того что модалка - часть более большего интерфейса, и опустил момент с семантикой. Об этом также упомянул. Вижу смысл прописывать семантику от и до когда верстаю полноценную полную страницу, а здесь элемент интерфейса.
Визуальный класс соответствующий первому уровню заголовка и собственно html тег первого уровня вещи разные. Иногда визуально мы хотим что-то отобразить по одному, но не давать ему эту роль по семантике, в таких случаях и можно использовать данный прием.
@@WebCademy Ясно, спасибо за ответ.
Подскажите пожалуйста название темы в VS Code 😁💻
AYU - Mirage Bordered
Эхх макет на скачиваеться(
странно, норм компания ищет джуна- задание по сложности ~ начинающий верстальщик. и кажется, что использовать row-gap не норм практика сейчас, у него слишком плохая поддержка
Я об этом упомянул в видео. 👌
Перезалейте макет, пожалуйста. Не скачивается
Только что проверил. Скачивается, файл wrike-test-task.fig
Не получается скачать макет
vpn поможет
спасибо)
вот это скилл....
Интересно. Когда я вливался на Джуна дали тестовое с запросами, пагинациями, хитрыми фильтрами и т.д.;)) небо и земля.
в каком году?
@@user-or1hy4xz8u 2020
@@dmitriystoyanov933 дык это недавно, я думал в 2014-15....
Юрий, когда у вас скидки будут конкретные типа 90% off)))
Можно поднять цены в 10 раз и сделать скидку в 90%. Но я не сторонник такого способа. Есть рассрочка, от школы либо от банка.
@@WebCademy а рассрочка только для граждан рф? я казах
@@manofsteppe179 На 12 месяцев только РФ, потому что через банк. Есть рассрочка на 2 месяца, она от школы напрямую, для всех.
Юра посмотри пожалуйста ссылку, она не работает пробовал и через v p n
Зухраб, привет. Проверил все ссылки в описании под видео. Работают. Макет также скачивается. Какая именно ссылка не работает?
@@WebCademy макет не открывает
@@web__dev Так его надо перетянуть в Фигму. Или даже после перетаскивания она выдает ошибку?
Какое то изи задание. Я помню такую дичь верстал, когда устраивался
Да, меня тоже немного удивило, но что есть то есть. Вакансия с LinkedIn страницы компании.
макет не доступен.
Обновил ссылку. www.figma.com/file/JTeBDr2ccYkRpUqEDCP4qj
"Обучение с нУля" - так будет правильно.
👌