Фронтенд и моё первое тестовое задание - прожарка, анализ ошибок.

[@AleksanderLamkov]

📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

[@Dany1245-c2h]

Спасибо, очень полезно! Хочется больше таких разборов 👍👍

[@vadim_romanov]

красава, прожарил этого молодого с его абсолютным позиционированием))))

[@Shibayan42]

АХАХАХАХАХ

[@williamaftonaugusternstvon2108]

Это видео даже смотивировало меня довольно сильно. Мне 19, в прошлом , лет с 14 до 16 очень хотел стать фронтенд разработчиком, но таких каналов как ваш просто не было, были огромные сложные туториалы по реакту или гайд как перекрасить кнопку, в итоге из-за несистемности и экзаменов на 2 года пришлось все планы отложить, но в этом году я вернулся к своей мечте, не в последнюю очередь благодаря вашему каналу- ибо так понятно, доступно и с объяснением нафига оно надо просто вдолбили некоторые базовые вещи в меня, а главное я понял примерно свой план изучения и освоения информации, прям хочется учиться, пытаться и тд, спасибо вам огромное за это!!

[@mouri_san]

спасибо за мотивационную речь в конце, бегу смотреть следующее видео :D

[@sigmo_blo]

Спасибо большое за столь понятный разбор! Некоторые моменты начну применять на практике)

[@alialiev4667]

Очень много полезной информации, спасибо Вам, добрый человек ❤

[@bort_num_370]

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

[@NeoCoding]

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

[@amphetyze]

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

[@amphetyze]

мы как бы увидели что есть плохо, а было бы классно еще увидеть что есть хорошо)

[@AleksanderLamkov]

Да, хорошая идея, спасибо! Поищу ещё тестовые задания, которые делал в первые месяцы и сделаю из этого небольшой мастер-класс :)

[@amphetyze]

@@AleksanderLamkov ждем!

[@romanpit4you361]

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

[@МеньшиковАлександр-п8ы]

Спасибо за видео. Я изучаю верстку чуть более полгода. Благодаря этому видео почувствовал себя профи))

[@mouri_san]

познавательно и даже позабавило, спасибо! :) было бы круто увидеть ещё видео на эту тему

[@NIkFreedomForce]

Спасибо, Александр! Ты нащупал хорошую нишу там, где , казалось бы, уже ниче нельзя добавить ))) больше таких разборов!! Концентрата полезности в разы больше, чем простой пошаговой верстки макета))

[@tatianovnafrutti8982]

Спасибо за супер контент! за уроки и все остальное! Очень помогает обучаться и может вскоре найду наконец-то работу)) Супер!!!

[@gign_141]

Это было не просто смело. Это было ##здец как смело! Значит я тоже смогу устроиться куда нибудь😂

[@justdude2599]

4 года назад был совсем другой рынок, щас вряд ли так легко будет

[@GeniusGS-ko4nt]

Да фиг ты сейчас зная язык разметки, css и js, устроишься на frontend, максимум верстальщиком, для фронтенд как минимум знать React, redux toolkit и тд, даже уже сейчас большинство требуют что бы на TS писали, ну и конечно же работа с api

[@AleksanderLamkov]

Ребят, никто ж не спорит, что сейчас рынок другой 🙃 Посыл видео был в другом: если вы на старте обучения пишете плохой код, совершенно не понимая как всё работает, то не ставьте на себе крест, продолжайте практиковаться, скилл разработчика прокачается, как ни крути.

[@walcermelodia]

​​@@GeniusGS-ko4ntсмотря куда устраиваться) Если в местную веб студию, то велком) Если хочешь быть смузи фронтенд разработчиком, то конешно не достаточно голой верстки) за что там такие бабки платить) В последнее время поражают коменты по типу "куда ты устроишься с такими навыками" Да, рынок сейчас немного жесток к джунам, но если хотите работать в бигтехе или аля местный фаанг, то будьте добры соответствовать ожиданию работодателя) а не мечтать о 300к/наносекунду после полугодичных курсов кек

[@videoSSS_741]

​@@GeniusGS-ko4ntчел, ты шиз

[@-Barny]

Большое спасибо за видео. Первый месяц как учу css / html и я для себя подчеркнул много нового. Делая такие видео, возможно ты уберег себя от моего малограмотного кода :)

[@mit7871]

У нас такой же был верстальщик, мы его называли "Ваня Абсолют")

[@mouri_san]

вхвхах

[@localhost666]

Ахах хорош 😂

[@alexasanchobetherestors9962]

Я тоже первый лендинг на абсолютах налепил. 😂😂😂 Потом, при попытке сделать адаптивный дизайн - началось "веселье": все элементы полетели в разные стороны... 😅😂

[@ЭйсВентура-б8д]

Ну ты дал, весь лендос на абсолюте держится )) еще и body height задал! )) Я так раньше тоже чудил. Держу свои некоторые работы на память. Учусь до сих пор.

[@vehiclesport662]

Александр 😂😂😂😂😂😂, кошмар как же вы прокачались. Но в вашу защиту скажу, тогда не было таких бесконечных курсов и видео.

[@YauheniKuntsevich]

Комментарий для продвижения очень терапевтичного и крутого видео!

[@retropiligrim]

Спасибо за ролик! Было очень интересно! Давай еще прожарок)

[@Jdkdkkx78]

Спасибо, за видео 👌, проект интересный у вас

[@kurenu]

Отличное видео, спасибо за труд)

[@akylbekbaizakov]

Спасибо за видео и советы! 🤩

[@РоманЧусовской-ж6ц]

Офигеть! Кажется я себя недооцениваю))

[@miwanjaGR]

Отличный видосик! Посмотрел с кайфом за завтраком)

[@OlesiaOlekhnovich]

Спасибо, полезно! Кое-что новое услышала, сожалею, что слушала без бумаги с ручкой.

[@ivan4486]

Спасибо за мотивацию!

[@Павел-ъ8п9г]

Спасибо большое, было очень интересно!

[@NIkFreedomForce]

хаха такая же фигня была первый раз , 4 года назад)) на абсолютах перевел все с фигмы, думаю, ля каковая красота!)) Призадумался, что-то слишком просто. Глянул адаптив, поугарал. Только разница в том, что за 4 года я так и остался ибл, а ты шагнул практически в Лиды)))

[@markrivenka]

Как раз начал недавно прям с нуля изучать верстку html,css даже такой пример пока кажется недостижимой мечтой😂

[@rbars96]

Даже при ревью допускаете ошибки. На главной странице логотип например не должен быть ссылкой, только на остальных страницах. И поэтому нужна поддержка работы обоих вариантов. width & height задавать не надо, а если где-то приходится, то надо через style, W3C валидатор вам также это подтвердит. Ну и конечно страшно смотреть на верстку многих людей) Когда опыт сильно больше 10-ти лет и при том постоянно изучаются самые эффективные (best practices) и современные решения

[@AleksanderLamkov]

1. Почему логотип не должен быть ссылкой на главной странице? У apple, microsoft и других всем известных компаний на главных страницах лого - всегда ссылка. 2. Почему не нужно для img задавать атрибуты width и height? При чем тут CSS? Атрибутами резервируется место для картинки, чтобы не было коллизий в первые секунды загрузки страницы, т. к. изображения подгружаются не мгновенно. Ну и валидатор на наличие атрибутов width и height у img не ругается, вы что-то напутали.

[@виртуоз_ру]

Красава 👍

[@BBBaychikov]

Ооой, я тоже раньше через позиции делала, потом мне чапалаху один человек дал и я использую флексы (ну и алаптивить не умела), а позиции только в особых случаях. Сематикт ещё у меня не было, всё через div. Вообще много схожих ошибок у меня было из этого видео 😅

[@Js__voL_06]

Ну да все на абсолютах держится вот это да а ведь с абсолютом приблизительно задавать элементам размеры не легкое дело , все же Флексы решают как не крути

[@alexandersoso]

Круто, давай теперь с js кодом)

[@AleksanderLamkov]

Будет! Обязательно сделаю, но после курса по JS, когда его закончу 🙂

[@Kotovar]

Спасибо, смелое и полезное видео:) Как я понимаю нормализация из кода с !important и сейчас используется в твоих проектах? Вроде в ролике по вёрстке, который по БЭМ, было упоминание. important приемлимо использовать в нормализации css?)

[@AleksanderLamkov]

В материалах канала (в мастер-классах в частности) используется нормализация без !important, рассказывал о ней в этом видео: kzbin.info/www/bejne/d2W8Zomtjax6b8ksi=IwhQk3TzsSdB5Vwm !important оправдан лишь в утилитарных классах (visually-hidden, hidden-mobile, visible-mobile и т. д.) В нормализации important только вред нанесёт.

[@Kotovar]

@@AleksanderLamkov Спасибо! Ничего, если на ты?)

[@AleksanderLamkov]

Конечно, без проблем 👌🏻

[@Kotovar]

@@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; } } Это исключение? Я так понимаю, чтобы гарантировать доступность?

[@AleksanderLamkov]

Да, всё так.

[@maximusyusumi6035]

Помню своё первое тестовое тоже на абсолютном позиционировании делал, копируя CSS из фигмы😂 Хотя при этом задавался вопросом: зачем дизайнер так сделал?😅

[@kiminomeha]

Лично для меня самое трудное - это добавлять сложные визуальные элементы, как линии, связывающие блоки в этом макете. До сих пор не понял, как такое делать...

[@Madam_Samogonni]

Александр сказал, что стоило их сделать через псевдоэлементы ::before и ::after, я бы тоже так сделала тащемта. Надеюсь, поможет)

[@alexandraweather4156]

Было бы круто, если бы вы брали иногда на разборы небольшие проекты подписчиков Я делаю проекты с фронтенд ментора, но получить фидбэк мне неоткуда Я точно знаю, что у меня не получается бэм, но не знаю, что еще делаю плохо Было бы круто услышать ваше мнение

[@AleksanderLamkov]

Да, я планировал подобное реализовать. Буду на стримах разбирать работы подписчиков. Следите за анонсом в t.me/friendlyFrontend в ближайший месяц. В посте оставлю ссылку на форму, где можно будет оставить работу на ревью.

[@NeoCoding]

вопрос на счет тега time, а стоит ли его добавлять к датам тут? вроде он скорее для вещей которые пользователь хочет добавить например в календарь?

[@AleksanderLamkov]

Стоит. Это не совсем связано с календарем. Это для семантики и доступности.

[@Ґангсер]

Даа, плюс мотивация, только мне все равно бывает сложно верстать гриды, флексы да и банально топ и лефт, я всё понимаю, но нет практики, на одну задачу могу 10-15 минут потратить

[@alexandergerasimenko3026]

Это не брюзжание, но факт - уровень джуна сильно вырос. И сейчас "войти в АйТи" значительно сложнее - с такой вёрсткой сейчас и на порог не пустят... в целом интересно и жизнеутверждающе )

[@АндрейБушуев-и3г]

Такие новости не радуют(

[@111atlus]

Классный разбор, спасибо, Александр!

[@Almasito]

Да, когда мне в унике дали задание сверстать макет, я сверстал его на полностью позиции абсолюта, у меня буквально почти все элемент с абсолютом стояли, и последние футер элементы мне пришлось писать top: 7500px тогда я не понимал что такое relative и в чем разница margin - padding, тогда в фигме в окне style в автомате писали позицию и я просто тогда копипастил, так еще при уменьшение размера верстка уходила на лево потому что каждому элементу я давал left с абсолютом, я тогда не слышал что такое container. Это то еще позор...

[@MrYurgens]

А почему вы сказали, что иконки лучше через background-image делать, а не img? 4:28

[@AleksanderLamkov]

Ну вот иконку слева - просто декоративная, то есть не несет смысловой нагрузки и не интерактивная. Декоративный контент по-возможности нужно размещать в CSS. А вот иконка справа может и нуждается в «оживлении», это стрелочка должна поворачиваться на 180 градусов при раскрытии выпадающего меню. В таком случае её допустимо и в разметке в размесить.

[@KP-nb2hi]

а ты сам учился или брал курсы какие то? Я просто сам учусь больше месяца, есть один сайт который сверстал по курсу с ютуба, но проверить по коду все ли там ок я хз как. Второй сайт почти полностью сверстал (тоже по курсу с ютуба), остался только адаптив (с ним немного есть проблемы). Попробовал этот сайт еще раз сам сверстать, где помощью мне был только гугл и там возможно тоже с кодом проблемы да и футер пока не удалось нормально сверстать)

[@AleksanderLamkov]

Учился сам, на ютубе, материалах из гугла и сайтов по типу htmlbook, w3schools, learnjavascript. Сейчас бы учился иначе: в начале только ютуб, затем ментор и платные точечные курсы по определенным технологиям.

[@KEMP-ln4dv]

Можешь пожалуйста показать второе своё тестовое задание

[@AleksanderLamkov]

После курса по JS, скорее всего. Там есть что критиковать в плане скриптов)

[@KEMP-ln4dv]

@@AleksanderLamkov Спасибо, будет очень интересно и полезно как всегда)

[@mouri_san]

@@AleksanderLamkov ура! ждём-с

[@vladyslav2779]

Я че-то не понял, зачем в button, добавлять всегда type button?))) Вроде бы как во фронт-енде не первый день, но такой теории ещё не слышал...

[@AleksanderLamkov]

По умолчанию некоторые браузеры выставляют кнопкам неявно type submit, из-за которого нажатие на такую кнопку триггерит отправку формы, в которой эта кнопка может находиться. Чтобы избежать подобного сценария, лучше добавлять type="button".

[@vladyslav2779]

@@AleksanderLamkov да, но если кнопка не находится в теге form, то такого действия не наблюдается))) Консорциум как бы рекомендует, но это не есть правило... Я надеюсь вы не из тех фронтов, которые не вставляют блочные элементы в ссылки?) По причине того, что консорциум не рекомендуем вложение блочных элементов в строчные, а конкретно я говорю про ссылки... А так шорты у вас очень годные) особенно для меня было спасение когда узнал про гаттер скроллбара... Причем, я даже не разу не слышал это от мейнстримовских ютуберов...

[@Dendosha]

Не подскажете, для чего нужно задавать width и height у изображений? Я сейчас только обучаюсь, поэтому не знаю

[@AleksanderLamkov]

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

[@Dendosha]

@@AleksanderLamkov понятно, большое спасибо)

[@alexeynoname114]

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

[@AleksanderLamkov]

Указывать надо те размеры, которые у изображения в макете на десктопной версии.

[@denwolf9159]

А если mobile-first? Спасибо за контент

[@BOOLBOSS]

Как быть с неймингом, незнаю как назвать элементы, блоки

[@AleksanderLamkov]

Посмотри это видео на моем канале: kzbin.info/www/bejne/e4e6hWebrdtnoKM Если ссылка не сработает, найди видос по названию: Имена классов в верстке | Как лучше называть элементы в разметке

[@БУРБОН-с9ж]

2:50 А в чем собственно говоря проблема в position ? Типа их не надо использовать ?

[@AleksanderLamkov]

Не нужно использовать так, как использовал я: вся вёрстка непоточная, все элементы располагаются относительно левого верхнего угла страницы, изменится контент => всё поломается, попытка адаптировать => всё сломается.

[@БУРБОН-с9ж]

@@AleksanderLamkov Я примерно так же первые макеты верстал. Не сказал бы, что сейчас лучше. Но практически не использую position и начал добавлять БЭМ)

[@tagnati5585]

А зачем тегу button ещё добавлять такой-же тайп?

[@AleksanderLamkov]

По умолчанию некоторые браузеры выставляют кнопкам неявно type submit, из-за которого нажатие на такую кнопку триггерит отправку формы, в которой эта кнопка может находиться. Чтобы избежать подобного сценария, лучше добавлять type="button".

[@tagnati5585]

@@AleksanderLamkov понятно. Спасибо!

[@АртемШабанов-р5в]

Похоже этот макет часто дают на тестовое , потому что мне он тоже попадался

[@AleksanderLamkov]

Интересно… Это я тестовое в одну веб-студию в г. Челябинске делал 🙃

[@ДмитрийФедоров-м4ю]

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

[@AleksanderLamkov]

Тестовое не должно быть слишком большим. Лендинг на пару секций с заковыристыми, но не слишком, компонентами - сверстать на сборщике проектов, запрогать на JS. Это наверняка можно и сейчас встретить в качестве тестового. Ну а простой верстки, конечно, уже нет, спору нет.

[@flowcsgo804]

Александр, а какой у вас грейд? Вы везде говорите что вы просто фронтенд-инженер. Я предполагаю, что вы сеньор? Кстати, спасибо за видео, очень полезно!

[@AleksanderLamkov]

У меня нет определенного грейда в текущей компании. Формально я нанимался миддлом около двух лет назад, но по ЗП вырос до Senior уровня, если ориентироваться на открытую статистику на хабре: career.habr.com/salaries?qualification=Senior&spec_aliases[]=frontend Также в прошлом году я успешно прошел несколько собеседований на Senior позиции в несколько крупных РФ компаний. Считаю, что исходя из этого могу себя считать синьором. P. S. Других метрик, кроме ЗП и "могу пройти собес на синьора" я не знаю. Стек и задачи, кажется, те же, что и у миддла.

[@flowcsgo804]

@@AleksanderLamkov неплохо срубаете, респект😄👍

[@alexander_stark]

Я не фротер.. но если прижмет и надо будет сверстать макет он будет лучше за счет просмтра много видео + кпрощает работу тот же chatgpt ...

[@AleksanderLamkov]

Да, соглашусь, сейчас гораздо больше материалов в открытом доступе и всесильные нейронки во многом упрощают процесс разработки 🙂 В моё время тоже были видосы, конечно, но я был нетерпеливым и рвался в бой, потому и полез на амбразуру с околонулевыми знаниями в верстке 😅

[@hyperpocket.]

Почему дробные числа стоит избегать?

[@AleksanderLamkov]

Ненадежно и неконтролируемо, потому что браузеры всё равно округлят до целого. Вот статья, хоть и древняя, но объясняющая про эти расчеты дробных значений: habr.com/ru/articles/31392/

[@Ammele0n]

ну для 2007-8 года норм😄

[@Spluny]

Ну это как будто бы прожарка не фронтендера, а верстальщика😅

[@AleksanderLamkov]

И не спорю. Четыре года назад так это в провинции и называли 🙂

[@MoNa-yq2nw]

Скажите, а сколько часов можно это верстать?

[@AleksanderLamkov]

Я верстал один вечер, может суммарно часов 5. Но если делать это "правильно", то у новичка может уйти часов 10, как мне кажется.

[@MoNa-yq2nw]

@@AleksanderLamkov А если 2-3 дня это очень плохо?

[@AleksanderLamkov]

Если буквально 48-72 часа, то надо проанализировать возникающие трудности, понять в чём затыки и точечно их проработать. Конкретно в этом макете я долго возился с баннером, т. к. там фильтры через mix-blend-mode подбирал. Сейчас я уже понимаю что надо было просто выгрузить слой с картинкой целиком и не мучать CSS. Ещё у меня были сложности с формами. Тогда я их просто не понимал как делать, не осознавал базовую концепцию тега и много раз переделывал. И всё равно по итогу сделал далеко не идеально.

[@SilvarTech]

Было бы лучше, если бы ты переписал и показал как правильно нужно

[@AleksanderLamkov]

Возьму на заметку. Есть ещё парочка плохоньких проектов со старта карьеры :)

[@IvanKeats-q3q]

5:15 7:10

[@СергейИванов-ц8ь6ы]

понятно как выглядит первое тз нормального человека. все таки айти не для всех

[@vladyslavyermolayev8186]

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

[@ShocKKKKKKK]

Больше похоже на какую то шутку) Ты уверен что это было именно тестовое задание?) А не твоя первая работа. Обычно тестовое задание делают когда уже хотя бы что то знают, а в любом начале верстке вроде бы всегда говорится что на абсолютах верстать нельзя)

[@AleksanderLamkov]

Скажем так - я был слишком уверен в своих силах, когда впервые решил откликнуться на вакансии и попытаться выполнить предлагаемые тестовые задания 😅

[@viktoria7281]

@@AleksanderLamkov А ты не прошёл собеседование в итоге?

[@AleksanderLamkov]

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

[@InverserPro]

БЭМ 💩

[@AleksanderLamkov]

А какие же альтернативы? 😶

[@InverserPro]

@@AleksanderLamkov меня он просто бесит изначально. Альтернатива - CSS nesting. Не благодарите.

[@AleksanderLamkov]

Ну так разные ведь вещи. БЭМ - это не про Sass-like вложенность селекторов и дальнейшую конкатенацию классов в итоговом CSS-файле, это про унификацию селекторов до одинаковой специфичности. Новенькая фича CSS Nesting крутая, спору нет, но от проблем специфичности не спасает.

[@InverserPro]

@@AleksanderLamkov да, мне один парень рассказывал, что БЭМ - это прям философия построения кода, иерархии папок и т.п. Но изначально эта дичь была сделана для того, чтобы стили не утекали, без всякой философии. Теперь это можно сделать с помощью наследования. Не приближаясь к изобретениям яндэкса.

[@enterkvas]

Большое спасибо! Оч полезно. Успехов!