📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
Это видео даже смотивировало меня довольно сильно. Мне 19, в прошлом , лет с 14 до 16 очень хотел стать фронтенд разработчиком, но таких каналов как ваш просто не было, были огромные сложные туториалы по реакту или гайд как перекрасить кнопку, в итоге из-за несистемности и экзаменов на 2 года пришлось все планы отложить, но в этом году я вернулся к своей мечте, не в последнюю очередь благодаря вашему каналу- ибо так понятно, доступно и с объяснением нафига оно надо просто вдолбили некоторые базовые вещи в меня, а главное я понял примерно свой план изучения и освоения информации, прям хочется учиться, пытаться и тд, спасибо вам огромное за это!!
саш, я думаю всем было бы очень интересно посмотреть ролик, где ты будешь показывать свою одну из первых работ, так же разбирать ошибки, а потом уже на видео верстать с текущими знаниями, комментируя свои действия) а в конце видео будет сравнение работ. я в видео сходу увидел ошибки твоей первой работы, я бы сделал лучше гораздо, но не думаю что правильно)
На самом деле полезный контент сделал. Я сейчас при верстке тоже глупости делаю, пока учусь. Но для себя проговариваю, что лучше я сейчас сам придумаю как это сделать. Не важно как, но чтобы было сильно похоже на результат с макета. Со временем научусь.
Спасибо за видео, все сказанное в конце верно)) Психологически сравнивать себя с самим собой, что бы отслеживать прогресс верно. Стресс от обучения хорошенько снижается)
Да фиг ты сейчас зная язык разметки, css и js, устроишься на frontend, максимум верстальщиком, для фронтенд как минимум знать React, redux toolkit и тд, даже уже сейчас большинство требуют что бы на TS писали, ну и конечно же работа с api
Ребят, никто ж не спорит, что сейчас рынок другой 🙃 Посыл видео был в другом: если вы на старте обучения пишете плохой код, совершенно не понимая как всё работает, то не ставьте на себе крест, продолжайте практиковаться, скилл разработчика прокачается, как ни крути.
@@GeniusGS-ko4ntсмотря куда устраиваться) Если в местную веб студию, то велком) Если хочешь быть смузи фронтенд разработчиком, то конешно не достаточно голой верстки) за что там такие бабки платить) В последнее время поражают коменты по типу "куда ты устроишься с такими навыками" Да, рынок сейчас немного жесток к джунам, но если хотите работать в бигтехе или аля местный фаанг, то будьте добры соответствовать ожиданию работодателя) а не мечтать о 300к/наносекунду после полугодичных курсов кек
Большое спасибо за видео. Первый месяц как учу css / html и я для себя подчеркнул много нового. Делая такие видео, возможно ты уберег себя от моего малограмотного кода :)
Ну ты дал, весь лендос на абсолюте держится )) еще и body height задал! )) Я так раньше тоже чудил. Держу свои некоторые работы на память. Учусь до сих пор.
Спасибо, Александр! Ты нащупал хорошую нишу там, где , казалось бы, уже ниче нельзя добавить ))) больше таких разборов!! Концентрата полезности в разы больше, чем простой пошаговой верстки макета))
Я тоже первый лендинг на абсолютах налепил. 😂😂😂 Потом, при попытке сделать адаптивный дизайн - началось "веселье": все элементы полетели в разные стороны... 😅😂
хаха такая же фигня была первый раз , 4 года назад)) на абсолютах перевел все с фигмы, думаю, ля каковая красота!)) Призадумался, что-то слишком просто. Глянул адаптив, поугарал. Только разница в том, что за 4 года я так и остался ибл, а ты шагнул практически в Лиды)))
Даже при ревью допускаете ошибки. На главной странице логотип например не должен быть ссылкой, только на остальных страницах. И поэтому нужна поддержка работы обоих вариантов. width & height задавать не надо, а если где-то приходится, то надо через style, W3C валидатор вам также это подтвердит. Ну и конечно страшно смотреть на верстку многих людей) Когда опыт сильно больше 10-ти лет и при том постоянно изучаются самые эффективные (best practices) и современные решения
1. Почему логотип не должен быть ссылкой на главной странице? У apple, microsoft и других всем известных компаний на главных страницах лого - всегда ссылка. 2. Почему не нужно для img задавать атрибуты width и height? При чем тут CSS? Атрибутами резервируется место для картинки, чтобы не было коллизий в первые секунды загрузки страницы, т. к. изображения подгружаются не мгновенно. Ну и валидатор на наличие атрибутов width и height у img не ругается, вы что-то напутали.
Ооой, я тоже раньше через позиции делала, потом мне чапалаху один человек дал и я использую флексы (ну и алаптивить не умела), а позиции только в особых случаях. Сематикт ещё у меня не было, всё через div. Вообще много схожих ошибок у меня было из этого видео 😅
Спасибо, смелое и полезное видео:) Как я понимаю нормализация из кода с !important и сейчас используется в твоих проектах? Вроде в ролике по вёрстке, который по БЭМ, было упоминание. important приемлимо использовать в нормализации css?)
В материалах канала (в мастер-классах в частности) используется нормализация без !important, рассказывал о ней в этом видео: ruclips.net/video/A4Y5VwXGG9g/видео.htmlsi=IwhQk3TzsSdB5Vwm !important оправдан лишь в утилитарных классах (visually-hidden, hidden-mobile, visible-mobile и т. д.) В нормализации important только вред нанесёт.
@@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; } } Это исключение? Я так понимаю, чтобы гарантировать доступность?
Было бы круто, если бы вы брали иногда на разборы небольшие проекты подписчиков Я делаю проекты с фронтенд ментора, но получить фидбэк мне неоткуда Я точно знаю, что у меня не получается бэм, но не знаю, что еще делаю плохо Было бы круто услышать ваше мнение
Да, я планировал подобное реализовать. Буду на стримах разбирать работы подписчиков. Следите за анонсом в t.me/friendlyFrontend в ближайший месяц. В посте оставлю ссылку на форму, где можно будет оставить работу на ревью.
Ну да все на абсолютах держится вот это да а ведь с абсолютом приблизительно задавать элементам размеры не легкое дело , все же Флексы решают как не крути
Помню своё первое тестовое тоже на абсолютном позиционировании делал, копируя CSS из фигмы😂 Хотя при этом задавался вопросом: зачем дизайнер так сделал?😅
Даа, плюс мотивация, только мне все равно бывает сложно верстать гриды, флексы да и банально топ и лефт, я всё понимаю, но нет практики, на одну задачу могу 10-15 минут потратить
Лично для меня самое трудное - это добавлять сложные визуальные элементы, как линии, связывающие блоки в этом макете. До сих пор не понял, как такое делать...
а ты сам учился или брал курсы какие то? Я просто сам учусь больше месяца, есть один сайт который сверстал по курсу с ютуба, но проверить по коду все ли там ок я хз как. Второй сайт почти полностью сверстал (тоже по курсу с ютуба), остался только адаптив (с ним немного есть проблемы). Попробовал этот сайт еще раз сам сверстать, где помощью мне был только гугл и там возможно тоже с кодом проблемы да и футер пока не удалось нормально сверстать)
Учился сам, на ютубе, материалах из гугла и сайтов по типу htmlbook, w3schools, learnjavascript. Сейчас бы учился иначе: в начале только ютуб, затем ментор и платные точечные курсы по определенным технологиям.
Да, когда мне в унике дали задание сверстать макет, я сверстал его на полностью позиции абсолюта, у меня буквально почти все элемент с абсолютом стояли, и последние футер элементы мне пришлось писать top: 7500px тогда я не понимал что такое relative и в чем разница margin - padding, тогда в фигме в окне style в автомате писали позицию и я просто тогда копипастил, так еще при уменьшение размера верстка уходила на лево потому что каждому элементу я давал left с абсолютом, я тогда не слышал что такое container. Это то еще позор...
Это не брюзжание, но факт - уровень джуна сильно вырос. И сейчас "войти в АйТи" значительно сложнее - с такой вёрсткой сейчас и на порог не пустят... в целом интересно и жизнеутверждающе )
Ну вот иконку слева - просто декоративная, то есть не несет смысловой нагрузки и не интерактивная. Декоративный контент по-возможности нужно размещать в CSS. А вот иконка справа может и нуждается в «оживлении», это стрелочка должна поворачиваться на 180 градусов при раскрытии выпадающего меню. В таком случае её допустимо и в разметке в размесить.
Чтобы браузер зарезервировал место под отрисовку изображений. Если их не указать, то интерфейс будет дергаться, т. к. изображения загружаются не мгновенно.
@@AleksanderLamkov это если мы знаем точный размер вывода изображения на странице в пикселях? А если мы его не знаем? Или имеется в виду, что надо указывать физический размер изображения, даже если на странице оно будет отображаться в ином размере?
Не нужно использовать так, как использовал я: вся вёрстка непоточная, все элементы располагаются относительно левого верхнего угла страницы, изменится контент => всё поломается, попытка адаптировать => всё сломается.
@@AleksanderLamkov Я примерно так же первые макеты верстал. Не сказал бы, что сейчас лучше. Но практически не использую position и начал добавлять БЭМ)
Посмотри это видео на моем канале: ruclips.net/video/EVWT4exv4jA/видео.html Если ссылка не сработает, найди видос по названию: Имена классов в верстке | Как лучше называть элементы в разметке
Да, соглашусь, сейчас гораздо больше материалов в открытом доступе и всесильные нейронки во многом упрощают процесс разработки 🙂 В моё время тоже были видосы, конечно, но я был нетерпеливым и рвался в бой, потому и полез на амбразуру с околонулевыми знаниями в верстке 😅
По умолчанию некоторые браузеры выставляют кнопкам неявно type submit, из-за которого нажатие на такую кнопку триггерит отправку формы, в которой эта кнопка может находиться. Чтобы избежать подобного сценария, лучше добавлять type="button".
@@AleksanderLamkov да, но если кнопка не находится в теге form, то такого действия не наблюдается))) Консорциум как бы рекомендует, но это не есть правило... Я надеюсь вы не из тех фронтов, которые не вставляют блочные элементы в ссылки?) По причине того, что консорциум не рекомендуем вложение блочных элементов в строчные, а конкретно я говорю про ссылки... А так шорты у вас очень годные) особенно для меня было спасение когда узнал про гаттер скроллбара... Причем, я даже не разу не слышал это от мейнстримовских ютуберов...
Александр, а какой у вас грейд? Вы везде говорите что вы просто фронтенд-инженер. Я предполагаю, что вы сеньор? Кстати, спасибо за видео, очень полезно!
У меня нет определенного грейда в текущей компании. Формально я нанимался миддлом около двух лет назад, но по ЗП вырос до Senior уровня, если ориентироваться на открытую статистику на хабре: career.habr.com/salaries?qualification=Senior&spec_aliases[]=frontend Также в прошлом году я успешно прошел несколько собеседований на Senior позиции в несколько крупных РФ компаний. Считаю, что исходя из этого могу себя считать синьором. P. S. Других метрик, кроме ЗП и "могу пройти собес на синьора" я не знаю. Стек и задачи, кажется, те же, что и у миддла.
По умолчанию некоторые браузеры выставляют кнопкам неявно type submit, из-за которого нажатие на такую кнопку триггерит отправку формы, в которой эта кнопка может находиться. Чтобы избежать подобного сценария, лучше добавлять type="button".
ну сейчас такое не прокатит . хотя я могу ошибаться , мне кажется что в качестве тз такое не возьмут . я как-то написал по тз компонент на vue который являет собой секундомер и кнопки с добавлением новых экземпляров компонента этого же секундомера и меня завернули потому что секундомер плохо секунды считал , но да это жс но все же
Тестовое не должно быть слишком большим. Лендинг на пару секций с заковыристыми, но не слишком, компонентами - сверстать на сборщике проектов, запрогать на JS. Это наверняка можно и сейчас встретить в качестве тестового. Ну а простой верстки, конечно, уже нет, спору нет.
Ненадежно и неконтролируемо, потому что браузеры всё равно округлят до целого. Вот статья, хоть и древняя, но объясняющая про эти расчеты дробных значений: habr.com/ru/articles/31392/
Если буквально 48-72 часа, то надо проанализировать возникающие трудности, понять в чём затыки и точечно их проработать. Конкретно в этом макете я долго возился с баннером, т. к. там фильтры через mix-blend-mode подбирал. Сейчас я уже понимаю что надо было просто выгрузить слой с картинкой целиком и не мучать CSS. Ещё у меня были сложности с формами. Тогда я их просто не понимал как делать, не осознавал базовую концепцию тега и много раз переделывал. И всё равно по итогу сделал далеко не идеально.
Ну у тебя тут основная проблема, что ты просто копировал стили из макета Figma. И структурно слабо, то есть ты изначально не понимал судя по всему какие есть теги и что они делают.
Больше похоже на какую то шутку) Ты уверен что это было именно тестовое задание?) А не твоя первая работа. Обычно тестовое задание делают когда уже хотя бы что то знают, а в любом начале верстке вроде бы всегда говорится что на абсолютах верстать нельзя)
Нет конечно. Об этом в конце видео упомянул. Нашел работу в другом месте спустя два месяца. Тестовое то выполнил уже гораздо лучше (но я сейчас все равно мог бы его разнести на ревью, недочетов было множество).
Ну так разные ведь вещи. БЭМ - это не про Sass-like вложенность селекторов и дальнейшую конкатенацию классов в итоговом CSS-файле, это про унификацию селекторов до одинаковой специфичности. Новенькая фича CSS Nesting крутая, спору нет, но от проблем специфичности не спасает.
@@AleksanderLamkov да, мне один парень рассказывал, что БЭМ - это прям философия построения кода, иерархии папок и т.п. Но изначально эта дичь была сделана для того, чтобы стили не утекали, без всякой философии. Теперь это можно сделать с помощью наследования. Не приближаясь к изобретениям яндэкса.
📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь:
💬 t.me/friendlyFrontendChat
Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
красава, прожарил этого молодого с его абсолютным позиционированием))))
АХАХАХАХАХ
Это видео даже смотивировало меня довольно сильно. Мне 19, в прошлом , лет с 14 до 16 очень хотел стать фронтенд разработчиком, но таких каналов как ваш просто не было, были огромные сложные туториалы по реакту или гайд как перекрасить кнопку, в итоге из-за несистемности и экзаменов на 2 года пришлось все планы отложить, но в этом году я вернулся к своей мечте, не в последнюю очередь благодаря вашему каналу- ибо так понятно, доступно и с объяснением нафига оно надо просто вдолбили некоторые базовые вещи в меня, а главное я понял примерно свой план изучения и освоения информации, прям хочется учиться, пытаться и тд, спасибо вам огромное за это!!
Спасибо большое за столь понятный разбор! Некоторые моменты начну применять на практике)
спасибо снова! сколько занимаюсь этим все равно каждый раз что-то новенькое узнаю. очень хорошая идея разбирать ошибки
Очень много полезной информации, спасибо Вам, добрый человек ❤
саш, я думаю всем было бы очень интересно посмотреть ролик, где ты будешь показывать свою одну из первых работ, так же разбирать ошибки, а потом уже на видео верстать с текущими знаниями, комментируя свои действия) а в конце видео будет сравнение работ.
я в видео сходу увидел ошибки твоей первой работы, я бы сделал лучше гораздо, но не думаю что правильно)
мы как бы увидели что есть плохо, а было бы классно еще увидеть что есть хорошо)
Да, хорошая идея, спасибо! Поищу ещё тестовые задания, которые делал в первые месяцы и сделаю из этого небольшой мастер-класс :)
@@AleksanderLamkov ждем!
спасибо за мотивационную речь в конце, бегу смотреть следующее видео :D
познавательно и даже позабавило, спасибо! :)
было бы круто увидеть ещё видео на эту тему
На самом деле полезный контент сделал. Я сейчас при верстке тоже глупости делаю, пока учусь. Но для себя проговариваю, что лучше я сейчас сам придумаю как это сделать. Не важно как, но чтобы было сильно похоже на результат с макета. Со временем научусь.
Спасибо за супер контент! за уроки и все остальное! Очень помогает обучаться и может вскоре найду наконец-то работу)) Супер!!!
Спасибо за видео. Я изучаю верстку чуть более полгода. Благодаря этому видео почувствовал себя профи))
Спасибо за видео, все сказанное в конце верно)) Психологически сравнивать себя с самим собой, что бы отслеживать прогресс верно. Стресс от обучения хорошенько снижается)
Это было не просто смело. Это было ##здец как смело!
Значит я тоже смогу устроиться куда нибудь😂
4 года назад был совсем другой рынок, щас вряд ли так легко будет
Да фиг ты сейчас зная язык разметки, css и js, устроишься на frontend, максимум верстальщиком, для фронтенд как минимум знать React, redux toolkit и тд, даже уже сейчас большинство требуют что бы на TS писали, ну и конечно же работа с api
Ребят, никто ж не спорит, что сейчас рынок другой 🙃
Посыл видео был в другом: если вы на старте обучения пишете плохой код, совершенно не понимая как всё работает, то не ставьте на себе крест, продолжайте практиковаться, скилл разработчика прокачается, как ни крути.
@@GeniusGS-ko4ntсмотря куда устраиваться)
Если в местную веб студию, то велком)
Если хочешь быть смузи фронтенд разработчиком, то конешно не достаточно голой верстки) за что там такие бабки платить)
В последнее время поражают коменты по типу "куда ты устроишься с такими навыками"
Да, рынок сейчас немного жесток к джунам, но если хотите работать в бигтехе или аля местный фаанг, то будьте добры соответствовать ожиданию работодателя) а не мечтать о 300к/наносекунду после полугодичных курсов кек
@@GeniusGS-ko4ntчел, ты шиз
Спасибо, за видео 👌, проект интересный у вас
Большое спасибо за видео. Первый месяц как учу css / html и я для себя подчеркнул много нового. Делая такие видео, возможно ты уберег себя от моего малограмотного кода :)
Ну ты дал, весь лендос на абсолюте держится )) еще и body height задал! )) Я так раньше тоже чудил. Держу свои некоторые работы на память. Учусь до сих пор.
Спасибо за ролик! Было очень интересно! Давай еще прожарок)
Спасибо, Александр! Ты нащупал хорошую нишу там, где , казалось бы, уже ниче нельзя добавить ))) больше таких разборов!! Концентрата полезности в разы больше, чем простой пошаговой верстки макета))
Отличное видео, спасибо за труд)
Спасибо за видео и советы! 🤩
Александр 😂😂😂😂😂😂, кошмар как же вы прокачались. Но в вашу защиту скажу, тогда не было таких бесконечных курсов и видео.
Я тоже первый лендинг на абсолютах налепил. 😂😂😂 Потом, при попытке сделать адаптивный дизайн - началось "веселье": все элементы полетели в разные стороны... 😅😂
Комментарий для продвижения очень терапевтичного и крутого видео!
Отличный видосик! Посмотрел с кайфом за завтраком)
Спасибо большое, было очень интересно!
Спасибо за мотивацию!
Офигеть! Кажется я себя недооцениваю))
Спасибо, полезно! Кое-что новое услышала, сожалею, что слушала без бумаги с ручкой.
хаха такая же фигня была первый раз , 4 года назад)) на абсолютах перевел все с фигмы, думаю, ля каковая красота!)) Призадумался, что-то слишком просто. Глянул адаптив, поугарал. Только разница в том, что за 4 года я так и остался ибл, а ты шагнул практически в Лиды)))
Как раз начал недавно прям с нуля изучать верстку html,css даже такой пример пока кажется недостижимой мечтой😂
Даже при ревью допускаете ошибки. На главной странице логотип например не должен быть ссылкой, только на остальных страницах. И поэтому нужна поддержка работы обоих вариантов. width & height задавать не надо, а если где-то приходится, то надо через style, W3C валидатор вам также это подтвердит. Ну и конечно страшно смотреть на верстку многих людей) Когда опыт сильно больше 10-ти лет и при том постоянно изучаются самые эффективные (best practices) и современные решения
1. Почему логотип не должен быть ссылкой на главной странице? У apple, microsoft и других всем известных компаний на главных страницах лого - всегда ссылка.
2. Почему не нужно для img задавать атрибуты width и height? При чем тут CSS? Атрибутами резервируется место для картинки, чтобы не было коллизий в первые секунды загрузки страницы, т. к. изображения подгружаются не мгновенно. Ну и валидатор на наличие атрибутов width и height у img не ругается, вы что-то напутали.
У нас такой же был верстальщик, мы его называли "Ваня Абсолют")
вхвхах
Ахах хорош 😂
Круто, давай теперь с js кодом)
Будет! Обязательно сделаю, но после курса по JS, когда его закончу 🙂
Красава 👍
Ооой, я тоже раньше через позиции делала, потом мне чапалаху один человек дал и я использую флексы (ну и алаптивить не умела), а позиции только в особых случаях. Сематикт ещё у меня не было, всё через div. Вообще много схожих ошибок у меня было из этого видео 😅
Спасибо, смелое и полезное видео:) Как я понимаю нормализация из кода с !important и сейчас используется в твоих проектах? Вроде в ролике по вёрстке, который по БЭМ, было упоминание. important приемлимо использовать в нормализации css?)
В материалах канала (в мастер-классах в частности) используется нормализация без !important, рассказывал о ней в этом видео:
ruclips.net/video/A4Y5VwXGG9g/видео.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;
}
}
Это исключение? Я так понимаю, чтобы гарантировать доступность?
Да, всё так.
Было бы круто, если бы вы брали иногда на разборы небольшие проекты подписчиков
Я делаю проекты с фронтенд ментора, но получить фидбэк мне неоткуда
Я точно знаю, что у меня не получается бэм, но не знаю, что еще делаю плохо
Было бы круто услышать ваше мнение
Да, я планировал подобное реализовать. Буду на стримах разбирать работы подписчиков.
Следите за анонсом в t.me/friendlyFrontend в ближайший месяц.
В посте оставлю ссылку на форму, где можно будет оставить работу на ревью.
Ну да все на абсолютах держится вот это да а ведь с абсолютом приблизительно задавать элементам размеры не легкое дело , все же Флексы решают как не крути
Классный разбор, спасибо, Александр!
Помню своё первое тестовое тоже на абсолютном позиционировании делал, копируя CSS из фигмы😂
Хотя при этом задавался вопросом: зачем дизайнер так сделал?😅
вопрос на счет тега time, а стоит ли его добавлять к датам тут? вроде он скорее для вещей которые пользователь хочет добавить например в календарь?
Стоит. Это не совсем связано с календарем. Это для семантики и доступности.
Даа, плюс мотивация, только мне все равно бывает сложно верстать гриды, флексы да и банально топ и лефт, я всё понимаю, но нет практики, на одну задачу могу 10-15 минут потратить
Лично для меня самое трудное - это добавлять сложные визуальные элементы, как линии, связывающие блоки в этом макете. До сих пор не понял, как такое делать...
Александр сказал, что стоило их сделать через псевдоэлементы ::before и ::after, я бы тоже так сделала тащемта. Надеюсь, поможет)
а ты сам учился или брал курсы какие то? Я просто сам учусь больше месяца, есть один сайт который сверстал по курсу с ютуба, но проверить по коду все ли там ок я хз как. Второй сайт почти полностью сверстал (тоже по курсу с ютуба), остался только адаптив (с ним немного есть проблемы). Попробовал этот сайт еще раз сам сверстать, где помощью мне был только гугл и там возможно тоже с кодом проблемы да и футер пока не удалось нормально сверстать)
Учился сам, на ютубе, материалах из гугла и сайтов по типу htmlbook, w3schools, learnjavascript.
Сейчас бы учился иначе: в начале только ютуб, затем ментор и платные точечные курсы по определенным технологиям.
Да, когда мне в унике дали задание сверстать макет, я сверстал его на полностью позиции абсолюта, у меня буквально почти все элемент с абсолютом стояли, и последние футер элементы мне пришлось писать top: 7500px тогда я не понимал что такое relative и в чем разница margin - padding, тогда в фигме в окне style в автомате писали позицию и я просто тогда копипастил, так еще при уменьшение размера верстка уходила на лево потому что каждому элементу я давал left с абсолютом, я тогда не слышал что такое container. Это то еще позор...
Это не брюзжание, но факт - уровень джуна сильно вырос. И сейчас "войти в АйТи" значительно сложнее - с такой вёрсткой сейчас и на порог не пустят... в целом интересно и жизнеутверждающе )
Такие новости не радуют(
А почему вы сказали, что иконки лучше через background-image делать, а не img? 4:28
Ну вот иконку слева - просто декоративная, то есть не несет смысловой нагрузки и не интерактивная.
Декоративный контент по-возможности нужно размещать в CSS.
А вот иконка справа может и нуждается в «оживлении», это стрелочка должна поворачиваться на 180 градусов при раскрытии выпадающего меню. В таком случае её допустимо и в разметке в размесить.
Не подскажете, для чего нужно задавать width и height у изображений? Я сейчас только обучаюсь, поэтому не знаю
Чтобы браузер зарезервировал место под отрисовку изображений. Если их не указать, то интерфейс будет дергаться, т. к. изображения загружаются не мгновенно.
@@AleksanderLamkov понятно, большое спасибо)
@@AleksanderLamkov это если мы знаем точный размер вывода изображения на странице в пикселях? А если мы его не знаем? Или имеется в виду, что надо указывать физический размер изображения, даже если на странице оно будет отображаться в ином размере?
Указывать надо те размеры, которые у изображения в макете на десктопной версии.
А если mobile-first? Спасибо за контент
2:50 А в чем собственно говоря проблема в position ? Типа их не надо использовать ?
Не нужно использовать так, как использовал я: вся вёрстка непоточная, все элементы располагаются относительно левого верхнего угла страницы, изменится контент => всё поломается, попытка адаптировать => всё сломается.
@@AleksanderLamkov Я примерно так же первые макеты верстал. Не сказал бы, что сейчас лучше. Но практически не использую position и начал добавлять БЭМ)
Похоже этот макет часто дают на тестовое , потому что мне он тоже попадался
Интересно… Это я тестовое в одну веб-студию в г. Челябинске делал 🙃
Как быть с неймингом, незнаю как назвать элементы, блоки
Посмотри это видео на моем канале:
ruclips.net/video/EVWT4exv4jA/видео.html
Если ссылка не сработает, найди видос по названию:
Имена классов в верстке | Как лучше называть элементы в разметке
Я не фротер.. но если прижмет и надо будет сверстать макет он будет лучше за счет просмтра много видео + кпрощает работу тот же chatgpt ...
Да, соглашусь, сейчас гораздо больше материалов в открытом доступе и всесильные нейронки во многом упрощают процесс разработки 🙂
В моё время тоже были видосы, конечно, но я был нетерпеливым и рвался в бой, потому и полез на амбразуру с околонулевыми знаниями в верстке 😅
Я че-то не понял, зачем в button, добавлять всегда type button?))) Вроде бы как во фронт-енде не первый день, но такой теории ещё не слышал...
По умолчанию некоторые браузеры выставляют кнопкам неявно type submit, из-за которого нажатие на такую кнопку триггерит отправку формы, в которой эта кнопка может находиться. Чтобы избежать подобного сценария, лучше добавлять type="button".
@@AleksanderLamkov да, но если кнопка не находится в теге form, то такого действия не наблюдается))) Консорциум как бы рекомендует, но это не есть правило...
Я надеюсь вы не из тех фронтов, которые не вставляют блочные элементы в ссылки?) По причине того, что консорциум не рекомендуем вложение блочных элементов в строчные, а конкретно я говорю про ссылки...
А так шорты у вас очень годные) особенно для меня было спасение когда узнал про гаттер скроллбара... Причем, я даже не разу не слышал это от мейнстримовских ютуберов...
Александр, а какой у вас грейд? Вы везде говорите что вы просто фронтенд-инженер. Я предполагаю, что вы сеньор?
Кстати, спасибо за видео, очень полезно!
У меня нет определенного грейда в текущей компании.
Формально я нанимался миддлом около двух лет назад, но по ЗП вырос до Senior уровня, если ориентироваться на открытую статистику на хабре: career.habr.com/salaries?qualification=Senior&spec_aliases[]=frontend
Также в прошлом году я успешно прошел несколько собеседований на Senior позиции в несколько крупных РФ компаний.
Считаю, что исходя из этого могу себя считать синьором.
P. S. Других метрик, кроме ЗП и "могу пройти собес на синьора" я не знаю. Стек и задачи, кажется, те же, что и у миддла.
@@AleksanderLamkov неплохо срубаете, респект😄👍
А зачем тегу button ещё добавлять такой-же тайп?
По умолчанию некоторые браузеры выставляют кнопкам неявно type submit, из-за которого нажатие на такую кнопку триггерит отправку формы, в которой эта кнопка может находиться. Чтобы избежать подобного сценария, лучше добавлять type="button".
@@AleksanderLamkov понятно. Спасибо!
ну сейчас такое не прокатит . хотя я могу ошибаться , мне кажется что в качестве тз такое не возьмут . я как-то написал по тз компонент на vue который являет собой секундомер и кнопки с добавлением новых экземпляров компонента этого же секундомера и меня завернули потому что секундомер плохо секунды считал , но да это жс но все же
Тестовое не должно быть слишком большим. Лендинг на пару секций с заковыристыми, но не слишком, компонентами - сверстать на сборщике проектов, запрогать на JS. Это наверняка можно и сейчас встретить в качестве тестового. Ну а простой верстки, конечно, уже нет, спору нет.
Можешь пожалуйста показать второе своё тестовое задание
После курса по JS, скорее всего. Там есть что критиковать в плане скриптов)
@@AleksanderLamkov Спасибо, будет очень интересно и полезно как всегда)
@@AleksanderLamkov ура! ждём-с
ну для 2007-8 года норм😄
Почему дробные числа стоит избегать?
Ненадежно и неконтролируемо, потому что браузеры всё равно округлят до целого.
Вот статья, хоть и древняя, но объясняющая про эти расчеты дробных значений:
habr.com/ru/articles/31392/
Скажите, а сколько часов можно это верстать?
Я верстал один вечер, может суммарно часов 5. Но если делать это "правильно", то у новичка может уйти часов 10, как мне кажется.
@@AleksanderLamkov А если 2-3 дня это очень плохо?
Если буквально 48-72 часа, то надо проанализировать возникающие трудности, понять в чём затыки и точечно их проработать.
Конкретно в этом макете я долго возился с баннером, т. к. там фильтры через mix-blend-mode подбирал. Сейчас я уже понимаю что надо было просто выгрузить слой с картинкой целиком и не мучать CSS.
Ещё у меня были сложности с формами. Тогда я их просто не понимал как делать, не осознавал базовую концепцию тега и много раз переделывал. И всё равно по итогу сделал далеко не идеально.
Ну это как будто бы прожарка не фронтендера, а верстальщика😅
И не спорю. Четыре года назад так это в провинции и называли 🙂
Было бы лучше, если бы ты переписал и показал как правильно нужно
Возьму на заметку. Есть ещё парочка плохоньких проектов со старта карьеры :)
понятно как выглядит первое тз нормального человека. все таки айти не для всех
Ну у тебя тут основная проблема, что ты просто копировал стили из макета Figma. И структурно слабо, то есть ты изначально не понимал судя по всему какие есть теги и что они делают.
5:15 7:10
Больше похоже на какую то шутку)
Ты уверен что это было именно тестовое задание?)
А не твоя первая работа. Обычно тестовое задание делают когда уже хотя бы что то знают, а в любом начале верстке вроде бы всегда говорится что на абсолютах верстать нельзя)
Скажем так - я был слишком уверен в своих силах, когда впервые решил откликнуться на вакансии и попытаться выполнить предлагаемые тестовые задания 😅
@@AleksanderLamkov А ты не прошёл собеседование в итоге?
Нет конечно. Об этом в конце видео упомянул. Нашел работу в другом месте спустя два месяца. Тестовое то выполнил уже гораздо лучше (но я сейчас все равно мог бы его разнести на ревью, недочетов было множество).
БЭМ 💩
А какие же альтернативы? 😶
@@AleksanderLamkov меня он просто бесит изначально. Альтернатива - CSS nesting. Не благодарите.
Ну так разные ведь вещи.
БЭМ - это не про Sass-like вложенность селекторов и дальнейшую конкатенацию классов в итоговом CSS-файле, это про унификацию селекторов до одинаковой специфичности.
Новенькая фича CSS Nesting крутая, спору нет, но от проблем специфичности не спасает.
@@AleksanderLamkov да, мне один парень рассказывал, что БЭМ - это прям философия построения кода, иерархии папок и т.п.
Но изначально эта дичь была сделана для того, чтобы стили не утекали, без всякой философии. Теперь это можно сделать с помощью наследования. Не приближаясь к изобретениям яндэкса.
Большое спасибо! Оч полезно. Успехов!