Pixel Perfect - что это? Как верстать четко в макет?

[@luxarmiger5729]

Привет! Спасибо, я увидел пример крутой верстки. Я только учусь, но теперь увидел ориентир качества верстки. Возьму за эталон. Легче начать правильно, чем переучиваться.

[@maxgraph]

Круто)) удачи!

[@kopoba8830]

Классный канал! Всё очень качественно и красиво подано. Спасибо! С нетерпением жду новых видео :)))

[@maxgraph]

Спасибо! :)

[@blackcelebration3588]

Спасибо, что четко и красиво все объяснили. Все понятно, лучшего и желать нельзя.

[@maxgraph]

Пожалуйста)

[@032vanya]

Привет. Спасибо за классный урок! Хочу про переменные))

[@maxgraph]

Спасибо) они будут частично в верстке сайта, если будет мало - добавлю еще и отдельное видео)

[@alexandy1344]

Макс ты лучший! Самый офигенный канал, что я когда либо видел на RU просторах. Я теперь самый преданный подписчик.

[@maxgraph]

Спасибо)

[@user-jh5pw6lv9k]

Короткие видео лучше, а чаще - тем более. Еще бы ссылочки на макетики))) для тренировки. По переменным тоже видео будет в тему!

[@maxgraph]

Макет вот прямо сейчас сижу готовлю уже, нашел красивый (на мой взгляд). А макеты для тренировки есть в блоге blog.maxgraph.ru, одна из последних статей :) Переменные, я думаю, прям на верстке и затронем.

[@user-jh5pw6lv9k]

@@maxgraph супер! Ждём-с

[@андреймаслов-е2й]

Спасибо Вам огромное, начал проходить 12 модуль базовой вёрстки, слушаю Вас с удовольствием, успехов и удачи Вам👍👍👍

[@maxgraph]

Пожалуйста)

[@user-kh2hz9oc3w]

Спасибо огромное искала информацию и нашла вас, кратко четко и понятно)))

[@maxgraph]

Пожалуйста)

[@llwebstylell242]

Благодарочка и низкий поклон за инфу)

[@maxgraph]

пожалуйста )

[@yankafunka1344]

Спасибо! буду ждать видео про верстку. Думаю, лучше разбить на две части.

[@maxgraph]

Пока что большинство за большее кол-во частей) ну будем думать, макет уже нашел даже.

[@arshavin0309]

круто показал и рассказал! спасибо видео лучше по частям, чем на несколько часов

[@maxgraph]

Учту)

[@dobrMAV]

Спасибо за уроки!Лучше короткие видео.

[@maxgraph]

Спасибо, принял к сведению)

[@dobrMAV]

@@maxgraph Смотрю ваши уроки по насадке верстки на WP мне как начинающему очень интересно.Жду продолжения)Надеюсь расскажите как создавать группу полей в WP при насадке верстки и все подключить,для дальнейшей возможности вносить изменения на сайте ,пока для меня сложно.Спасибо!

[@maxgraph]

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

[@yura_8952]

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

[@maxgraph]

Отлично)

[@MoNa-yq2nw]

Спасибо за уроки! Хотелось бы чтобы код вы показывали крупнее.

[@bezmazbl]

Огонь!

[@Grey8260]

Лучше короткие, потому что в длинных видео редко кто делает тайм-лайны.

[@maxgraph]

Ну я бы сделал) но да, скорее будут короткие.

[@Alexus1504]

Круто!!!

[@maxgraph]

спасибо )

[@AntonioBenderas]

14:18 все хотят урок по переменным!)

[@maxgraph]

Давно уж есть))

[@truedivan]

Спасибо за видео!Хорошее и спокойное объяснение. Хотелось бы понять по какому принципу присваиваешь классы - наверное БЭМ 1 - Не понял зачем дополнительно добавляешь классы. Например: "header__nav" и ещё добавляешь "nav" "header__social" и ещё добавляешь "social" 2 - Ещё почему решил социальные сети иконки описать в backfround а не вставкой img тэгов в разметку? Было бы интересно посмотреть видео про принципы названия классов, БЭМ, ну и вышеуказанные вопросы пояснить. 3 - Также вижу не пользуешься препроцессорами (SASS например), и не используешь liveReload для автоперезагрузки страницы . Это же существенно ускоряет процесс

[@maxgraph]

Рад помочь) По классам - уже привычка. класс без __ задан для того, чтоб данный блок можно было бы переиспользовать. а с __ - чтобы задать стили конкретно для данных соцсетей По поводу иконок - потому что это декоративные изображения, их не должно быть в html По поводу БЭМ видео на канале есть уже) Препроцессоры не использую на видео, чтобы людям было проще. Но и с ним видео будут)

[@truedivan]

@@maxgraph спасибо за ответ!) А принцип про "декоративные изображения" это какая-то методология тоже?) Хотелось бы почитать

[@maxgraph]

погуглите про "контентные и декоративные изображения")

[@truedivan]

@@maxgraph ок спасибо!)

[@flatronkujo]

Здравствуйте! У меня есть вопрос. У меня ширина экрана тоже ,но когда я ставляю в 1920 у меня там зоом 75% prnt.sc/10oyzgt а мне надо чтобы было 100%.Но когда я оттуда выбираю 100% у меня ширина экрана меняется prnt.sc/10oz008 .

[@nikitajudin7058]

Значит ширина монитора 1920, а вот ширина браузера в этом случае 1500 где то, у меня так на ноутбуке, так что ставьте 1500, и 100%

[@flatronkujo]

@@nikitajudin7058 Спасибо

[@ИгОрЁк-л2з]

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

[@maxgraph]

Да, такое будет :) вот думаю, делать по частям, или один большой мгогочасовой ролик

[@vzhykovskyi6347]

Такого на самом деле очень много на Ютубе. А для среднего и далее уровня очень мало

[@maxgraph]

Вот и я так же думаю. Но пишу что-то новичково-среднее уже, как и обещал.

[@ИгОрЁк-л2з]

@@vzhykovskyi6347, дайте хоть одну ссылку на видео где толково всё это рассказано и показано, что то не разу не встречал где есть поэтапный разбор всего происходящего процесса верстки с толковым объяснением,хотелось бы посмотреть

[@vzhykovskyi6347]

@@maxgraph А есть в планах видео по резиновой верстке? не полный курс, а такое как было по доступности?

[@user-cl8iz4zt3m]

Крутой контент на канале))) Классный макет, если есть возможность дать на него ссылку, было бы здорово)

[@maxgraph]

Тут нужно с автором договариваться, сам у нее просил :)

[@enfllome8830]

Спасибо за крутой разбор PP!) Думаю 4 часа верстки будет запарно... лучше разбить)

[@maxgraph]

Я могу незаметно склеить :) Суть именно в выпуске одного видео общего)

[@ИгОрЁк-л2з]

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

[@maxgraph]

Спасибо

[@brucekhalil1889]

you all probably dont give a shit but does anybody know of a tool to log back into an Instagram account?? I was stupid forgot my account password. I love any help you can give me.

[@areshudson4508]

@Bruce Khalil instablaster :)

[@makona79li2]

Спасибо!

[@maxgraph]

Пожалуйста)

[@IhorVasilchenko]

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

[@maxgraph]

Разное кол-во текста никак не влияет на пиксель перфект верстку. Ваши отступы все равно должны быть идеальны (для этого нужно при верстке двигать макет, чтобы все сделать ровно). Если по какой-то причине плохой макет от дизайнера - лучше с таким и не работать :)

[@ПавелДубин-ь4ы]

кажется, что иногда цели попасть пиксель в пиксель не достичь, либо большими потерями, из за чего можно потерять в адаптивности. Ты задал картинке топ и позишн через nth child, а если навигация расширится еще на 2 элемента?

[@maxgraph]

Если расширится - поправлю

[@thecatwrites9731]

а у тебя есть видео на все модули, которые ты импортируешь в style.css? очень интересно, что там и для чего... и вообще законно будет, если бы ты помог таким как я, и прикрепил их к описанию?))) например про normalize.css я видел в видео которое вышло в мае) ничего не поменялось?) этот опыт бы перенял бы! спасибо еще раз)

[@user-kx3zm9jn7w]

Здравствуйте! Будете снимать про верстку-возьмите макет посложнее, а то легких макетов полно видео в сети и пользы от ещё одного для подписчиков не будет!

[@maxgraph]

Уже снимаю)ну, макет средней сложности :) сложный будет, но позже.

[@user-kx3zm9jn7w]

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

[@maxgraph]

Спасибо)

[@sergey_zatsepin]

Ну ты же мог каждому отдельному пункту меню задать свои отступы для соответствия пп. Тебе разве не попадались такие заказчики, которые требуют 99,99% точности?

[@maxgraph]

Попадались, но адекватные.

[@alexperemey6046]

Вопрос в том, насколько это правильно делать. Дизайнер скорее всего ошибся и сделал неровно. На глаз ему показалось ровно, он посчитал, что ровно. А когда делаешь через автоматическое распределение по флексу, видишь, что на самом деле неровно. И по идее, если ты это просто оставишь ровно, ты исправишь ошибку дизайнера.

[@_Fantom_.]

После просмотра данного урока, во мне погиб перфекционист...Pixel Perfect, не оправдал моих смелых ожиданий...Точность невысокая, а возни хватает...Не в упрек автору, - канал очень хороший..

[@maxgraph]

ну уж явно выше, чем брать значения из макета :)

[@_Fantom_.]

Хотел сказать, не Pixel Perfect, это ни фига получается...

[@maxgraph]

Не понял))

[@_Fantom_.]

В смысле, не Pixel Perfect это тогда получается!

[@maxgraph]

почему?) вроде ровно :)

[@АндрейМорозов-ю2х]

Правильно ли я понял, это как обычная вёрстка, только захардкоджена padding-ами margin-ами?

[@maxgraph]

Ну грубо говоря да)

[@_Fantom_.]

В одном из проектов, ты использовал просто накладную картинку сайта для верстки пиксель перфект под классом "overlay", оправдан ли такой вариант верстки или все же лучше использовать приложение Pixel Perfect?

[@maxgraph]

Это я так раньше делал) плагин делает по факту то же самое, но удобнее

[@_Fantom_.]

@@maxgraph Понятно ) Как по мне, так тоже очень удобно.. Только почему, ты в первом случае накладную картинку выравнивал просто по нулям, а макет из приложения Pixel Perfect подгоняешь под первый элемент, например к логотипу?

[@maxgraph]

Просто по разному работаю с изначальной картинкой

[@_Fantom_.]

@@maxgraph Ну я тебе скинул ссылку на макет сайта, можешь сверстать его уже с приложением Pixel Perfect, если есть желание...

[@antonl3910]

А чтобы сделать макет изображением, которое вставляем в расширение, нужно же его в фотошопе просто сохранить отдельно в png?

[@maxgraph]

Можно просто из макета экспорт сделать

[@lisofsky8151]

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

[@thecatwrites9731]

прикольно)))) ну а что? допустим то что получилось? это и есть PP??? то что макет кривой это не означает что надо четко по макету делать?

[@maxgraph]

Ну если явно неровно - лучше отойти от макета

[@thecatwrites9731]

@@maxgraph PP тогда звучал страшнее, чем есть на самом деле, спасибо!

[@andriyholovchak9602]

Спасибо за видео! Не могли бы Вы дать ссылку на макет?

[@maxgraph]

Не могу, ибо он не мой, дизайнер не разрешил :)

[@sashko_sh]

+1 до варіанта пару відео а тиждень

[@maxgraph]

Спасибо, учту)

[@MrReflection540]

Правильно ли я понял, что при использовании PP данное расширение необходимо?

[@maxgraph]

Если вы хотите действительно ровно верстать - без него никуда, надо же как-то сверяться)

[@playxr]

я так и не смог расслышать на 6:10 какой инструмент надо использовать,чтобы не появлялась горизонтальная полоса прокрутки

[@maxgraph]

Просто можно подрезать макет по краям

[@playxr]

@@maxgraph друг подскажи,а можно просто сдвинуть в пикселе перфект макет по оси X на те самые проблемные пиксели? это будет правильно? просто я задал фон для сайта, в пиксель перфект по оси Х если подвинуть макет на -8, то они совпадают, или это не катит?

[@maxgraph]

Там есть кнопка для выравнивания по центру)

[@playxr]

@@maxgraph да я знаю) просто если центровать появляется этот самый горизонтальный скрол, а если потом подвинуть макет в пиксель перфект на 8 пикселей влево то будет совпадение макета с сайтом, так можно делать?

[@maxgraph]

Если при центровке скролл - значит надо ещё макет подрезать А сдвигать на 8 не очень

[@k.o.t.o.f.e.y]

Нет я конечно все понимаю, в каких то точных науках без такого перфекционизма не обойтись, например самолетостроение, ракеты, спутники.... Но вот вы мне объективно назовите причины, зачем мне вымерять эти пиксели и какой такой epic fail может произойти ежели у меня где то отступы, позиционирование или размер блока будет немного отличаться от эталонного в макете, ну скажем на 10-20 или даже 30px? Не ну когда заказчик страдает ФГМ и ему уже не помочь, такое еще в голове укладывается. Здесь выбор за вами.😵 Вы поймите одно, что на глаз такое заметить невозможно, а юзверь который приходит на ваш сверстанный сайт, понятия не имеет о том что где то у вас расхождение верстки с макетом на 30px. Или погодите, а может все таки пользователь заметит эту разницу в 20px и начнет бранить разработчиков за такие косяки? Затем в довесок закроет сайт и напишет жалобу в РКН, гугл и яндекс? Да кстати, еще наверняка от того что у вас не пуксель в шмуксель пострадает юзабилити вашего сайта! Да уж, проблема не из простых....🤔 Если объективно говорить, то есть такая народная мудрость у программистов: "Хороший программист - ленивый программист!". Видимо те кто придумывает такие вот PixelPerfect ярые противники такого утверждения! Вы вот сами задумайтесь, зачем проделывать сомнительную, не дающую никакой ощутимой пользы работу? Мне чота не понятно, сами себе жизнь усложняете идя на поводу такого дэбилизма! А вот то, что многие фрилансеры придерживается правила - заказчик всегда прав и ради денег готовы выполнять все его хотелки и перделки, очень даже понятно. Как и то, что заказчику хочется дешево и со всеми модными стильными молодежными наворотами, даже с такими которыми он пользоваться не будет, но вот он где то услышал что это модно нынче и надо значит ему такое же запилить!😤

[@maxgraph]

Олег, если вы не хотите делать пиксель перфект - не делайте.

[@alexperemey6046]

20-30px - это как раз отличие красивого от некрасивого. Красота - это тоже математика, довольно точная и сложная наука. Пользователь не поймет почему, но у него создастся впечатление, что сайт неряшливо нарисован, что посеет мысль, что компания несолидная. У меня такое 100 раз было. Другое дело, что нужно отличать задумку дизайнера от некачественного исполнения. Если дизайнер просто на глаз сдвинул меню на 3 пикселя не туда, за ним гнаться не нужно, а нужно исправить.

[@k.o.t.o.f.e.y]

@@alexperemey6046 что ты несешь лол? Да пользователь даже не заметит что у него кнопка лайка по задумке какого то Васи Пупкина дизайнера из Мухосранска имеет отступ на 20px больше. Вот именно что пользователь ни черта не поймет и ему это не нужно то вовсе, потому что у него другие интересы к сайту, а не сидеть и сравнивать пиксели между задумкой дазайна макета от того что сверстано. Ты судишь по своему субъективному мнению и думаешь, что пользователь также думает, но это не так! Я тебе могу сверстать сайт и в нем будет очень много отличий по расстояниям отступов, позиционирования и т.п., но ты даже не поймешь этого, если только не будешь сравнивать с оригиналом с помощью линейки. >"красота - это тоже математика, довольно точная и сложная наука." Ты само то понял чо написал?)) Сидит там дизайнер, рисует макет и по математическим точным и сложным формулам рассчитывает сколько нужно отступ отмерить, какую палитру цвета выбрать или каким размером должен быть шрифт и какой... 🤭 >"Если дизайнер просто на глаз сдвинул меню на 3 пикселя не туда, за ним гнаться не нужно, а нужно исправить." Ты щас серьезно это? На глаз замечаешь разницу в 3px? Да у тебя не глаза, а микроскопы!😁Если серьезно, я пишу о других вещах. Но когда в макете видно какие-то несостыковки и это режет глаз, очевидно что это ошибка и так делать не нужно.

[@user-rz2jd6ex8s]

Уже есть видео с переменными , если есть дайте ссылку?

[@maxgraph]

kzbin.info/www/bejne/gJDHoIiAecqsq9E - держите :)

[@FryFry-rd5sf]

@@maxgraph спасибо за полезности)

[@user-rj6ez1mx6q]

Видео лучше покороче, не больше часа точно

[@maxgraph]

Там части по 30-40 минут идут пока :)

[@vipdeveloper]

Контент топовый, но ютуб тебя не продвигает почему-то. Оплати рекламу месяца 2, потом может и ютуб начнет сам продвигать

[@maxgraph]

какую именно рекламу?)

[@vipdeveloper]

@@maxgraph От других ютуберов такой же тематики (От 0 до 1 или Фрилансер по жизни). Тоже норм типы

[@maxgraph]

а, так это я делал :)

[@vipdeveloper]

@@maxgraph так вот откуда я на тебя попал)

[@programmingerror1444]

Привет, есть ссылка на этот макет?

[@maxgraph]

Привет, нет)

[@DarthVauban]

Можно ссылку на макет?)

[@maxgraph]

Не могу дать, не мой

[@DarthVauban]

@@maxgraph а ссылкуьна копию?)

[@maxgraph]

Вы хотите чтоб я нарушил обещание не отдавать чужой макет?) я так не могу)

[@kerusdc8322]

все хорошо, но не вставляй эту играющую муть на фоне

[@maxgraph]

А ранее писали наоборот вставлять :) Спасибо за мнение, надо подумать)

[@8wave]

И это pixel perfect?) По-моему обычная вёрстка, плюс минус похожая на макет.

[@maxgraph]

Кому как

[@ozimnadius]

Видео "Кодстайл" - нельзя использовать @import в стилях, текущее видео - давайте сверстаем шапку ))))....куча импортов в стилях, бедный мозг новичков )))).....

[@maxgraph]

для быстроты позволил себе. Не вижу проблем)

[@ozimnadius]

@@maxgraph я так и понял ), и да кстати огромное спасибо тебе за очень годный контент.