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