Фронтенд и моё первое тестовое задание - прожарка, анализ ошибок.
ฝัง
- เผยแพร่เมื่อ 17 มิ.ย. 2024
- ✏️ Прожарка моего тестового задания на вакансию фронтенд-разработчика, которое я делал ровно четыре года назад, когда вкатывался в профессию.
🔴 Timeline:
▶ 00:00 | Введение
▶ 00:29 | Макет в Figma и ТЗ
▶ 00:50 | Анализ через DevTools
▶ 12:32 | Анализ кода в файле стилей
▶ 15:37 | Анализ папки с изображениями
▶ 16:00 | Заключение
💬 Чат в телеграмме (помощь новичкам):
t.me/friendlyFrontendChat
🔸 Boosty (поддержать канал):
boosty.to/friendly-frontend
🗂️ Бесплатные курсы на канале:
🟠 HTML: • HTML курс 2024
🔵 CSS: • CSS курс 2024
🟡 JS: • JavaScript курс 2024
🟢 A11y: • Accessibility курс 2024
⚪️ Мастер-класс по верстке для новичков: • Верстка Kropp Fitness ...
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Верстка Positivus (HTM...
🗺 Frontend Roadmap 2024 • Frontend Roadmap 2024 ...
📌 Автор:
➖ Личный сайт: aleksanderlamkov.ru/
➖ Telegram: t.me/friendlyFrontend
➖ Boosty: boosty.to/friendly-frontend
➖ GetMentor: getmentor.dev/mentor/aleksand...
➖ Solvery: solvery.io/mentor/aleksanderl...
#frontend #фронтенд
![จังหวะนี้ - เม้ก อภิสิทธิ์ [ Official MV ] จอนนี่มิวสิค](http://i.ytimg.com/vi/4gQRZCkRyiU/mqdefault.jpg)
📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь:
💬 t.me/friendlyFrontendChat
Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
Это было не просто смело. Это было ##здец как смело!
Значит я тоже смогу устроиться куда нибудь😂
4 года назад был совсем другой рынок, щас вряд ли так легко будет
Да фиг ты сейчас зная язык разметки, css и js, устроишься на frontend, максимум верстальщиком, для фронтенд как минимум знать React, redux toolkit и тд, даже уже сейчас большинство требуют что бы на TS писали, ну и конечно же работа с api
Ребят, никто ж не спорит, что сейчас рынок другой 🙃
Посыл видео был в другом: если вы на старте обучения пишете плохой код, совершенно не понимая как всё работает, то не ставьте на себе крест, продолжайте практиковаться, скилл разработчика прокачается, как ни крути.
красава, прожарил этого молодого с его абсолютным позиционированием))))
АХАХАХАХАХ
Спасибо за видео. Я изучаю верстку чуть более полгода. Благодаря этому видео почувствовал себя профи))
Спасибо большое за столь понятный разбор! Некоторые моменты начну применять на практике)
спасибо снова! сколько занимаюсь этим все равно каждый раз что-то новенькое узнаю. очень хорошая идея разбирать ошибки
Спасибо за супер контент! за уроки и все остальное! Очень помогает обучаться и может вскоре найду наконец-то работу)) Супер!!!
Спасибо за видео и советы! 🤩
Спасибо за ролик! Было очень интересно! Давай еще прожарок)
Спасибо, Александр! Ты нащупал хорошую нишу там, где , казалось бы, уже ниче нельзя добавить ))) больше таких разборов!! Концентрата полезности в разы больше, чем простой пошаговой верстки макета))
Большое спасибо за видео. Первый месяц как учу css / html и я для себя подчеркнул много нового. Делая такие видео, возможно ты уберег себя от моего малограмотного кода :)
Спасибо, за видео 👌, проект интересный у вас
Отличный видосик! Посмотрел с кайфом за завтраком)
Ну ты дал, весь лендос на абсолюте держится )) еще и body height задал! )) Я так раньше тоже чудил. Держу свои некоторые работы на память. Учусь до сих пор.
Спасибо большое, было очень интересно!
Спасибо за мотивацию!
Комментарий для продвижения очень терапевтичного и крутого видео!
На самом деле полезный контент сделал. Я сейчас при верстке тоже глупости делаю, пока учусь. Но для себя проговариваю, что лучше я сейчас сам придумаю как это сделать. Не важно как, но чтобы было сильно похоже на результат с макета. Со временем научусь.
Александр 😂😂😂😂😂😂, кошмар как же вы прокачались. Но в вашу защиту скажу, тогда не было таких бесконечных курсов и видео.
саш, я думаю всем было бы очень интересно посмотреть ролик, где ты будешь показывать свою одну из первых работ, так же разбирать ошибки, а потом уже на видео верстать с текущими знаниями, комментируя свои действия) а в конце видео будет сравнение работ.
я в видео сходу увидел ошибки твоей первой работы, я бы сделал лучше гораздо, но не думаю что правильно)
мы как бы увидели что есть плохо, а было бы классно еще увидеть что есть хорошо)
Да, хорошая идея, спасибо! Поищу ещё тестовые задания, которые делал в первые месяцы и сделаю из этого небольшой мастер-класс :)
@@AleksanderLamkov ждем!
Спасибо, полезно! Кое-что новое услышала, сожалею, что слушала без бумаги с ручкой.
хаха такая же фигня была первый раз , 4 года назад)) на абсолютах перевел все с фигмы, думаю, ля каковая красота!)) Призадумался, что-то слишком просто. Глянул адаптив, поугарал. Только разница в том, что за 4 года я так и остался ибл, а ты шагнул практически в Лиды)))
Ооой, я тоже раньше через позиции делала, потом мне чапалаху один человек дал и я использую флексы (ну и алаптивить не умела), а позиции только в особых случаях. Сематикт ещё у меня не было, всё через div. Вообще много схожих ошибок у меня было из этого видео 😅
Красава 👍
Помню своё первое тестовое тоже на абсолютном позиционировании делал, копируя CSS из фигмы😂
Хотя при этом задавался вопросом: зачем дизайнер так сделал?😅
Классный разбор, спасибо, Александр!
Круто, давай теперь с js кодом)
Будет! Обязательно сделаю, но после курса по JS, когда его закончу 🙂
Лично для меня самое трудное - это добавлять сложные визуальные элементы, как линии, связывающие блоки в этом макете. До сих пор не понял, как такое делать...
Александр сказал, что стоило их сделать через псевдоэлементы ::before и ::after, я бы тоже так сделала тащемта. Надеюсь, поможет)
Как раз начал недавно прям с нуля изучать верстку html,css даже такой пример пока кажется недостижимой мечтой😂
Спасибо, смелое и полезное видео:) Как я понимаю нормализация из кода с !important и сейчас используется в твоих проектах? Вроде в ролике по вёрстке, который по БЭМ, было упоминание. important приемлимо использовать в нормализации css?)
В материалах канала (в мастер-классах в частности) используется нормализация без !important, рассказывал о ней в этом видео:
th-cam.com/video/A4Y5VwXGG9g/w-d-xo.htmlsi=IwhQk3TzsSdB5Vwm
!important оправдан лишь в утилитарных классах (visually-hidden, hidden-mobile, visible-mobile и т. д.)
В нормализации important только вред нанесёт.
@@AleksanderLamkov Спасибо! Ничего, если на ты?)
Конечно, без проблем 👌🏻
@@AleksanderLamkov Я, наверное, туплю. Но в css-normalize есть строчки:
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
Это исключение? Я так понимаю, чтобы гарантировать доступность?
Да, всё так.
вопрос на счет тега time, а стоит ли его добавлять к датам тут? вроде он скорее для вещей которые пользователь хочет добавить например в календарь?
Стоит. Это не совсем связано с календарем. Это для семантики и доступности.
Было бы круто, если бы вы брали иногда на разборы небольшие проекты подписчиков
Я делаю проекты с фронтенд ментора, но получить фидбэк мне неоткуда
Я точно знаю, что у меня не получается бэм, но не знаю, что еще делаю плохо
Было бы круто услышать ваше мнение
Да, я планировал подобное реализовать. Буду на стримах разбирать работы подписчиков.
Следите за анонсом в t.me/friendlyFrontend в ближайший месяц.
В посте оставлю ссылку на форму, где можно будет оставить работу на ревью.
Да, когда мне в унике дали задание сверстать макет, я сверстал его на полностью позиции абсолюта, у меня буквально почти все элемент с абсолютом стояли, и последние футер элементы мне пришлось писать top: 7500px тогда я не понимал что такое relative и в чем разница margin - padding, тогда в фигме в окне style в автомате писали позицию и я просто тогда копипастил, так еще при уменьшение размера верстка уходила на лево потому что каждому элементу я давал left с абсолютом, я тогда не слышал что такое container. Это то еще позор...
а ты сам учился или брал курсы какие то? Я просто сам учусь больше месяца, есть один сайт который сверстал по курсу с ютуба, но проверить по коду все ли там ок я хз как. Второй сайт почти полностью сверстал (тоже по курсу с ютуба), остался только адаптив (с ним немного есть проблемы). Попробовал этот сайт еще раз сам сверстать, где помощью мне был только гугл и там возможно тоже с кодом проблемы да и футер пока не удалось нормально сверстать)
Учился сам, на ютубе, материалах из гугла и сайтов по типу htmlbook, w3schools, learnjavascript.
Сейчас бы учился иначе: в начале только ютуб, затем ментор и платные точечные курсы по определенным технологиям.
А почему вы сказали, что иконки лучше через background-image делать, а не img? 4:28
Ну вот иконку слева - просто декоративная, то есть не несет смысловой нагрузки и не интерактивная.
Декоративный контент по-возможности нужно размещать в CSS.
А вот иконка справа может и нуждается в «оживлении», это стрелочка должна поворачиваться на 180 градусов при раскрытии выпадающего меню. В таком случае её допустимо и в разметке в размесить.
Это не брюзжание, но факт - уровень джуна сильно вырос. И сейчас "войти в АйТи" значительно сложнее - с такой вёрсткой сейчас и на порог не пустят... в целом интересно и жизнеутверждающе )
Такие новости не радуют(
Не подскажете, для чего нужно задавать width и height у изображений? Я сейчас только обучаюсь, поэтому не знаю
Чтобы браузер зарезервировал место под отрисовку изображений. Если их не указать, то интерфейс будет дергаться, т. к. изображения загружаются не мгновенно.
@@AleksanderLamkov понятно, большое спасибо)
@@AleksanderLamkov это если мы знаем точный размер вывода изображения на странице в пикселях? А если мы его не знаем? Или имеется в виду, что надо указывать физический размер изображения, даже если на странице оно будет отображаться в ином размере?
Указывать надо те размеры, которые у изображения в макете на десктопной версии.
А если mobile-first? Спасибо за контент
Похоже этот макет часто дают на тестовое , потому что мне он тоже попадался
Интересно… Это я тестовое в одну веб-студию в г. Челябинске делал 🙃
2:50 А в чем собственно говоря проблема в position ? Типа их не надо использовать ?
Не нужно использовать так, как использовал я: вся вёрстка непоточная, все элементы располагаются относительно левого верхнего угла страницы, изменится контент => всё поломается, попытка адаптировать => всё сломается.
@@AleksanderLamkov Я примерно так же первые макеты верстал. Не сказал бы, что сейчас лучше. Но практически не использую position и начал добавлять БЭМ)
Александр, а какой у вас грейд? Вы везде говорите что вы просто фронтенд-инженер. Я предполагаю, что вы сеньор?
Кстати, спасибо за видео, очень полезно!
У меня нет определенного грейда в текущей компании.
Формально я нанимался миддлом около двух лет назад, но по ЗП вырос до Senior уровня, если ориентироваться на открытую статистику на хабре: career.habr.com/salaries?qualification=Senior&spec_aliases[]=frontend
Также в прошлом году я успешно прошел несколько собеседований на Senior позиции в несколько крупных РФ компаний.
Считаю, что исходя из этого могу себя считать синьором.
P. S. Других метрик, кроме ЗП и "могу пройти собес на синьора" я не знаю. Стек и задачи, кажется, те же, что и у миддла.
@@AleksanderLamkov неплохо срубаете, респект😄👍
ну сейчас такое не прокатит . хотя я могу ошибаться , мне кажется что в качестве тз такое не возьмут . я как-то написал по тз компонент на vue который являет собой секундомер и кнопки с добавлением новых экземпляров компонента этого же секундомера и меня завернули потому что секундомер плохо секунды считал , но да это жс но все же
Тестовое не должно быть слишком большим. Лендинг на пару секций с заковыристыми, но не слишком, компонентами - сверстать на сборщике проектов, запрогать на JS. Это наверняка можно и сейчас встретить в качестве тестового. Ну а простой верстки, конечно, уже нет, спору нет.
Скажите, а сколько часов можно это верстать?
Я верстал один вечер, может суммарно часов 5. Но если делать это "правильно", то у новичка может уйти часов 10, как мне кажется.
@@AleksanderLamkov А если 2-3 дня это очень плохо?
Если буквально 48-72 часа, то надо проанализировать возникающие трудности, понять в чём затыки и точечно их проработать.
Конкретно в этом макете я долго возился с баннером, т. к. там фильтры через mix-blend-mode подбирал. Сейчас я уже понимаю что надо было просто выгрузить слой с картинкой целиком и не мучать CSS.
Ещё у меня были сложности с формами. Тогда я их просто не понимал как делать, не осознавал базовую концепцию тега и много раз переделывал. И всё равно по итогу сделал далеко не идеально.
ну для 2007-8 года норм😄
Почему дробные числа стоит избегать?
Ненадежно и неконтролируемо, потому что браузеры всё равно округлят до целого.
Вот статья, хоть и древняя, но объясняющая про эти расчеты дробных значений:
habr.com/ru/articles/31392/
Я че-то не понял, зачем в button, добавлять всегда type button?))) Вроде бы как во фронт-енде не первый день, но такой теории ещё не слышал...
По умолчанию некоторые браузеры выставляют кнопкам неявно type submit, из-за которого нажатие на такую кнопку триггерит отправку формы, в которой эта кнопка может находиться. Чтобы избежать подобного сценария, лучше добавлять type="button".
@@AleksanderLamkov да, но если кнопка не находится в теге form, то такого действия не наблюдается))) Консорциум как бы рекомендует, но это не есть правило...
Я надеюсь вы не из тех фронтов, которые не вставляют блочные элементы в ссылки?) По причине того, что консорциум не рекомендуем вложение блочных элементов в строчные, а конкретно я говорю про ссылки...
А так шорты у вас очень годные) особенно для меня было спасение когда узнал про гаттер скроллбара... Причем, я даже не разу не слышал это от мейнстримовских ютуберов...
А зачем тегу button ещё добавлять такой-же тайп?
По умолчанию некоторые браузеры выставляют кнопкам неявно type submit, из-за которого нажатие на такую кнопку триггерит отправку формы, в которой эта кнопка может находиться. Чтобы избежать подобного сценария, лучше добавлять type="button".
@@AleksanderLamkov понятно. Спасибо!
Ну это как будто бы прожарка не фронтендера, а верстальщика😅
И не спорю. Четыре года назад так это в провинции и называли 🙂
понятно как выглядит первое тз нормального человека. все таки айти не для всех
Больше похоже на какую то шутку)
Ты уверен что это было именно тестовое задание?)
А не твоя первая работа. Обычно тестовое задание делают когда уже хотя бы что то знают, а в любом начале верстке вроде бы всегда говорится что на абсолютах верстать нельзя)
Скажем так - я был слишком уверен в своих силах, когда впервые решил откликнуться на вакансии и попытаться выполнить предлагаемые тестовые задания 😅
@@AleksanderLamkov А ты не прошёл собеседование в итоге?
Нет конечно. Об этом в конце видео упомянул. Нашел работу в другом месте спустя два месяца. Тестовое то выполнил уже гораздо лучше (но я сейчас все равно мог бы его разнести на ревью, недочетов было множество).
Ну у тебя тут основная проблема, что ты просто копировал стили из макета Figma. И структурно слабо, то есть ты изначально не понимал судя по всему какие есть теги и что они делают.
БЭМ 💩
А какие же альтернативы? 😶
@@AleksanderLamkov меня он просто бесит изначально. Альтернатива - CSS nesting. Не благодарите.
Ну так разные ведь вещи.
БЭМ - это не про Sass-like вложенность селекторов и дальнейшую конкатенацию классов в итоговом CSS-файле, это про унификацию селекторов до одинаковой специфичности.
Новенькая фича CSS Nesting крутая, спору нет, но от проблем специфичности не спасает.
@@AleksanderLamkov да, мне один парень рассказывал, что БЭМ - это прям философия построения кода, иерархии папок и т.п.
Но изначально эта дичь была сделана для того, чтобы стили не утекали, без всякой философии. Теперь это можно сделать с помощью наследования. Не приближаясь к изобретениям яндэкса.