PixelPerfect все что нужно знать

  Рет қаралды 16,110

От 0 до 1

От 0 до 1

Жыл бұрын

Друзья, если бы вы знали, сколько слез пролито из-за слов Perfect Pixel, это слезы наших коллег, они почти как слезы русалок=) Сегодня мы победим страх перед PixelPerfect и научимся правильно его применять
Мой курс по верстке:
from0to1.com.ua/
Телеграм канал - t.me/from0to1com
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

Пікірлер: 101
@BMikel
@BMikel Жыл бұрын
Вадос не перестает нас радовать! Отрываемся на вечеринке по полной!
@musicnotlose643
@musicnotlose643 Жыл бұрын
Сколько было вырвано волос у лысых верстальщиков - ахах, гениально.
@alexbruh230
@alexbruh230 Жыл бұрын
Вадос, спасибо тебе огромное за объяснение насчет Perfect'a. Брал несколько месяцев назад курс по вёрстке у Анны Блок, она ничего не объяснила про эти все нюансы, а стала ровнять все в программе заново(лайн хейтами и марджинами), в итоге я, последовал её примеру, вообще сгорел. У меня верстка просто нахрен поехала. Короче не рекомендую её курсы. Учит абы как, а деньги берёт. Я думал, это реально что-то нереально заоблачное. Начал думать, что вёрстка - это не моё даже(у меня 7 работ в портфолио, но без пикселя все). Кстати про маразм, так она и делала, эта Анна. Спасибо, братишка, за то, что открыл глаза. Глубокий тебе поклон до пола!
@vimvexvimvex8780
@vimvexvimvex8780 Жыл бұрын
Спасибо огромное. Берегите себя. Здоровья вам.
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
спасибо
@front_praxis
@front_praxis 11 ай бұрын
Вадим , спасибо тебе как всегда !
@SergiyPolar
@SergiyPolar Жыл бұрын
Если заказчик требует pp и это его прям главное требование - лучше отказаться от такого проекта, заказчик попросту не понимает как оценивать вашу работу подругому
@WERWOLION
@WERWOLION Жыл бұрын
Зато можно установить позицию релятив и сговёнить ему верстку на левом право и ещё сделать на пикселях... Будет пёртфект!
@imdanteasy
@imdanteasy Жыл бұрын
@@WERWOLION 😆😆😆
@igornewidomsky7240
@igornewidomsky7240 Жыл бұрын
Как всегда, что-то интересное 👍
@J-Lany
@J-Lany 3 ай бұрын
Большое спасибо за видео! Очень полезно 🙏🏾🙏🏾🙏🏾
@user-qw5qt1xt5f
@user-qw5qt1xt5f Жыл бұрын
Вечеринка супер!!!Спасибо!!!
@user-sq9pf4qq8p
@user-sq9pf4qq8p Жыл бұрын
Вадос, ты лучший!!! Спасибо за контент, за твой труд
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
благодарю
@rikenbaker1
@rikenbaker1 29 күн бұрын
Спасибо за видео! Очень полезно.
@j-lewis
@j-lewis Жыл бұрын
Один видос полезнее другого, как из рога изобилия, Вадим жжёшь!!! Спасибо! 🤩👏🙌❤‍🔥
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
=)) спасибо)
@user-vj3cu3wv9l
@user-vj3cu3wv9l Жыл бұрын
в последнее время активничаешь) красава, запускай вечеринку на полную хехехе
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
спасибо
@rinatbogdanov305
@rinatbogdanov305 Жыл бұрын
Ждем продолжения
@acdmilk3870
@acdmilk3870 Жыл бұрын
Только задумалась недавно о том, что нужно подробнее узнать о пиксель перфект и вот те на- рабочая схема субботним утром! Спасибо
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
круть
@user-lr5xn7it8r
@user-lr5xn7it8r Жыл бұрын
Приветствую! Ребята, курс у Вадима зачетный - сама проходила (старт от 21.06.2021). Научилась верстать, пришла уверенность и понимание того, что ты делаешь. Такой бы курс по JS! Вадим, благодарю за видео - сейчас стоит задача сверстать сайтец по PP 🙂
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
Благодарю
@RomanKhassazhirov
@RomanKhassazhirov Жыл бұрын
Низкий поклон!
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
спасибо
@Clever_Web-sites
@Clever_Web-sites Жыл бұрын
класс, спасибо за видосы
@NursAcademy
@NursAcademy 9 ай бұрын
Вадим вы просто супер. У меня есть вопрос внутри строчных елементов можно разместить блочный элементы если строчнымы элмента записан display block? Это мне очень важно.
@user-uo9nx4tz8u
@user-uo9nx4tz8u Жыл бұрын
Спасибо за урок от меня подписка и лайк
@_pheax
@_pheax 5 ай бұрын
понятно, спасибо Вадос
@sezimaz
@sezimaz Жыл бұрын
Вадим супер! Будет ли Ваш курс по верстке летом?
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
спасибо, думаю что будет, всегда можете мне написать в телеграм
@user-ps8xv2hq6j
@user-ps8xv2hq6j Жыл бұрын
Сразу лайк🎉🎉🎉
@user-cy2td3lg8t
@user-cy2td3lg8t Жыл бұрын
Да, иногда пиксель- перфект - боль... Спасибо за видео)
@user-frond-end_dev
@user-frond-end_dev Жыл бұрын
четко все рассказано, крутой контент, и снова мобмическая вечеринка
@vimvexvimvex8780
@vimvexvimvex8780 Жыл бұрын
Я новичек в этом деле, но заметил одну странность. у меня в фигме например некоторые зазоры между элементами отличаются по размеру от тех что в видео. Разве такое может быть? Что же будет при РР )
@Marcus2Cg
@Marcus2Cg Жыл бұрын
Господа, что вы думаете о мнении, что ИИ с ближайшие годы заменит многие направления в программировании? В верстке как минимум. Вижу уже быстрые и готовые решения генерируемые по дизайну. Не перейдет ли верстка из разряда работы в разряд хобби...
@WERWOLION
@WERWOLION Жыл бұрын
ИИ не существует Смотрите лекции Савельева и не слушай бред который несут тебе гуманитатарии без мозга. Всё что будет делать нейросетка это помойную тильду с онлайн стилями, дальше такую верстку бэкенд берет в работу и стоимость бэкенда становится 900$ из 200... Экономияяяя.....
@user-bx4fn8fe3m
@user-bx4fn8fe3m Жыл бұрын
Да всё нормально будет. Про смерть вёрстки говорили когда я первый раз начинал учиться(2017 год), да и до этого наверное тоже так говорили. По итогу, 2023 год, вёрстка всё так же живёт. Человек без нужных знаний не сможет правильно применить то что выдал ему ИИ, не стоит переживать из-за этого
@vladislav.c
@vladislav.c Жыл бұрын
Спасибо
@user-bm6iw6no3u
@user-bm6iw6no3u Жыл бұрын
Спасибо Сэнсэй!!!
@user-pp2oj2jw5k
@user-pp2oj2jw5k 14 күн бұрын
так... я понял, разброс между дивами до 50px, а спанами pixel perfect работаем. Благодарочка!
@sharkman6434
@sharkman6434 11 ай бұрын
спасибо большое за видео, в епамовской школе фронта если больше 10 пикселей расхождение то не сдал блок то есть до 10 ваще болта мона забить но уже накпрягаешься чтоб в след раз точнее ну до 5 точно можно забивать
@unicoxr5tj417
@unicoxr5tj417 Жыл бұрын
тема хорошая. Кстати, пиксель перфект не всегда обязателен) И это в ТЗ обычно или техлидом обозначено. Ибо пиксель-в-пиксель это весьма трудозатратно. Хотя и считается хорошей практикой
@varvara_prokopchuk
@varvara_prokopchuk Жыл бұрын
интересно, а как Вадим рассказывает в видео))))
@unicoxr5tj417
@unicoxr5tj417 Жыл бұрын
@@varvara_prokopchuk не смотрел) девушка на аватарке красивая)
@SergiyPolar
@SergiyPolar Жыл бұрын
Интересно, как же сделать пиксель в пиксель, если банально рендер шрифтов у всех браузеров происходит по-разному, независимо от наших настроек...
@unicoxr5tj417
@unicoxr5tj417 Жыл бұрын
@@SergiyPolar а хз, но многим удается)
@solarvideo636
@solarvideo636 Жыл бұрын
Где же всё таки найти эту работу верстальщика? Куда не кинься на работу, то нужен уже полноценный Frontend разработчик со знанием React или Vue.js. Без этих знаний работу сейчас не найти практически. И ещё понятно что препроцессоры, Gulp, Webpack и ещё Docker. Где же этому всему научиться, да ещё в короткие сроки? Чтоб не 3 года или более изучать.
@WERWOLION
@WERWOLION Жыл бұрын
Проблема PixelPerfect с тем что он не дружит с гридами и флексами - потому что дизайнер не машина и не может точно разбросать блоки. align-items: center === PixelPerfect говорит: Давай, до свиданья... Видео оч полезно т.к его можно показать заказчику... Для чего нужен PP - 1 проверка декоративных элементов выставленных по абсолюту 2 проверка em ,% , vw выставленных через Sass миксин-калькулятор.
@max.denaro262
@max.denaro262 Жыл бұрын
чего вдруг не может то? фигма прекрасно с этим справляется, дизайнеру лишь нужно использовать автолейаут и следить на сеткой. Флексы и гриды НИКАК не влияют на PP
@WERWOLION
@WERWOLION Жыл бұрын
@@max.denaro262 если флексы и гриды не влияют то ты не знаешь не флексов ни гридов
@WERWOLION
@WERWOLION Жыл бұрын
@@max.denaro262 дизайнер не будет ставить автолейаут потому что дизайнер не знает твоего построения блоков. Чтобы знать построение блоков дизайнер должен убить год на вёрстке и сверстать 40 проектов. Нафиг это дизайнеру ХЗ, будет типо тру но смысла ноль . Дайнер просто должен сделать красиво, а верстальщик просто должен перенести красиво в нормальные конструкции, как должно быть! Простой пример дизайнер чертит по центру декоративную линию и по ней как по дереву набросаны элементы, при этом он разбрасывает на глаз и вроде должена быть центровка. Потом в блоках есть текст. Потом мы заполняем текст после верстки и все блоки плывут, ну т.е не плывут, но эта структура не сходится и не может сходится с дизайном. Потому что просто блоки на гридах и флексах плавают от шрифта, и если у тебя браузер считает межстрочный интервал шрифта по другому то по шрифту твой блок прыгает и вся верстка прыгает потому что у тебя центровочка. И текст у тебя в 30% от блока не влезает как в дизайне, а значит провал текста и всё поплыло.
@max.denaro262
@max.denaro262 Жыл бұрын
@@WERWOLION боюсь, это ты не в курсе. А я этому учу людей, и весьма успешно :)
@max.denaro262
@max.denaro262 Жыл бұрын
​@@WERWOLION Как это дизайнер не знает?) Знает. А если не знает - я ему скажу. Видимо ты работал с дизайнерами хренового уровня) Дизайнер не должен делать красиво, он должен делать красиво и удобно. Это основная задача ЛЮБОГО веб-дизайнера, как дизайнер тебе и говорю. Так что просто поработай с дизайнерами уровня выше хренового.
@Kuba-so4tk
@Kuba-so4tk Жыл бұрын
а как сделать линии контейнера в фигме
@user-qu9yl6bv6m
@user-qu9yl6bv6m Жыл бұрын
Владос как обычно ворвался и все по решал)
@nsurviver1460
@nsurviver1460 11 ай бұрын
Это канал о профессиональной Вёрстке? тут 90% о ней ?
@old_dio
@old_dio Жыл бұрын
Спасибо за видео, теперь минус одна фобия)
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
боремся с ними)
@shoguneiraidenbaal359
@shoguneiraidenbaal359 Жыл бұрын
Можно Ф11 нажать и тогда точнее будет
@user-tz2kz7dj6q
@user-tz2kz7dj6q Жыл бұрын
Мне как то с РР даже и проще, в VSC написала блок, потом в дев тулзе все размеры подогнала, и просто скопировала. Да и фигма часто с размерами не дружит
@WERWOLION
@WERWOLION Жыл бұрын
Т.е в rem и % перведить не нужно))? Стыдно товаришь
@user-tz2kz7dj6q
@user-tz2kz7dj6q Жыл бұрын
@@WERWOLION Вы, товарищь, в дев тулзе можете только в пикселях писать? Как по мне все rem и % тем более удобнее именно так
@WERWOLION
@WERWOLION Жыл бұрын
@@user-tz2kz7dj6q нет потому что rem и % уже давно пишутся через функции, спс западному комьюнити.
@nicefellow7929
@nicefellow7929 Жыл бұрын
А можно у ссылки просто убирать href, а не заменять спаном?
@WERWOLION
@WERWOLION Жыл бұрын
Валидатор
@user-pp2oj2jw5k
@user-pp2oj2jw5k 14 күн бұрын
можно дивом же
@MelkoR4111
@MelkoR4111 Жыл бұрын
смысл видео: на все забиваем болтяру!)
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
и не боимся этого =)
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
даже тот кто спрашевает на собесе про PP он уже давно на него забил, просто хочет увидеть страх в глазах джуна =)
@user-mi3gh7ke1m
@user-mi3gh7ke1m Жыл бұрын
такой вопрос : во всех блоках html прописываю контейнер, повторяю css свойства, но на обучающих видео границы контейнера одни, а у меня гораздо шире, будто их вовсе нет. моник фулл хд. как быть ?
@WERWOLION
@WERWOLION Жыл бұрын
Контрол + скролл мыши. Сразу получаешь ещё мобильную версию и 4к
@DmitryYanushkevich
@DmitryYanushkevich Жыл бұрын
Норм, не только по PP знания подтянул, а ещё и про коктейль PornStar узнал))
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
вот вот, больше полезностей)
@abdulla0607
@abdulla0607 Жыл бұрын
Я уж подумал, что люди начнут мнить себя цифрами. Оказалось, что я *ПЕРВЫЙ* такой.
@chip_a
@chip_a 22 күн бұрын
Когда слышу пиксел перфект от клиента дропаю клиента. Пикселперфект придумали менеджеры что бы меньше заплатить клиенту. Для маленьких баннеров может быть но не для целого сайта. Ну еще дизайнеры не делают все нормально, елементы раскадины как попало. Так что однозначно нет
@nugget_sti
@nugget_sti Жыл бұрын
адекватный работодатель вообще не будет указывать пиксель перфект в вакансии))
@user-wk4ku6bl8w
@user-wk4ku6bl8w 7 ай бұрын
ти напевно не чув що таке PixelPerfect
@Agasevi4
@Agasevi4 Жыл бұрын
Главное чтоб не в Worde 😂😂😂
@vadymprokopchuk
@vadymprokopchuk Жыл бұрын
очень важно!)
@user-Pravdarub586
@user-Pravdarub586 Жыл бұрын
КУРС НЕ ДОСТУПЕН РЕЗИДЕНТАМ РФ И РБ! Ну ты даёшь!
@user-zu5gk8ng2p
@user-zu5gk8ng2p Жыл бұрын
Ну а что ты хотел, за поддержку диктаторского режима нужно платить. Так все просрать это еще надо уметь
@user-Pravdarub586
@user-Pravdarub586 Жыл бұрын
@@user-zu5gk8ng2p У тебя в башке диктаторский режим! Что же мы просрали? Наоборот, с каждым годом Республика Беларусь становится всё краше и богаче. Мы, простые белорусы, живем свободно и чувствуем себя прекрасно: читаем, что хотим, смотрим любые ТВ каналы, в том числе украинские, слушаем любую музыку и т.д. и т.п. У нас чистые, ухоженные города, прилавки магазинов ломятся от еды, у нас прекрасная бесплатная медицина (никаких взяток врачам) и сфера социального обслуживания населения, у нас до сих пор существует социальный лифт, когда умные люди сами всего добиваются в жизни. Я за свои 45 лет ни разу не ощутил какого-либо давления со стороны властей!!! Бедные вы люди! Вам засрали мозги ваши телевизоры...
@user-bx7tk4mv3s
@user-bx7tk4mv3s Жыл бұрын
@@user-zu5gk8ng2p В данном случае это проблема для Вадима. Он не сможет продать свои курсы. Значит заинтересованный в обучении заплатит другому. Вадим скорее заложник данной ситуации. И это печально.
@user-zu5gk8ng2p
@user-zu5gk8ng2p Жыл бұрын
@@user-Pravdarub586 Прикинь, то что ты назвал и у нас есть. Это не с вашей ли територии русские войска заходили в Украинку? И не с вашых ли аэродромов взлетали Миги и ракетами бомбили мирняк? И насчет телевизора, я его не смотрю, мне его смотреть не надо, чтобы видеть что происходит, а от вашие пропагандоны азаренко и ко, нормально людям мозги засирает
@user-zu5gk8ng2p
@user-zu5gk8ng2p Жыл бұрын
@@user-bx7tk4mv3s Почему вы считаете что без вас он будет без денег? Помимо вас, есть Казахстан, Украина, Азейрбаджан, Грузия, Молдова и множество других стран.
@Semen_aqw
@Semen_aqw Жыл бұрын
Не люблю pp
@user-mn1yi6mh8v
@user-mn1yi6mh8v 27 күн бұрын
Какая же бесполезная тема этот пиксель перфект, на нормальных проектах настраивается среда автотестирования в которую входит скриншотное тестирование, которое не нужно вручную выполнять и получать респонз по тестам, в зависимости от чего идти дальше, да и вообще пиксель перфект это антипаттерн так как адаптивная верстка с ним не совместима
@_prosto-kuzua_6584
@_prosto-kuzua_6584 11 ай бұрын
піздєц...........
Pokey pokey 🤣🥰❤️ #demariki
00:26
Demariki
Рет қаралды 8 МЛН
100❤️
00:19
Nonomen ノノメン
Рет қаралды 38 МЛН
БЭМ методология. Практический пример
1:39:41
FLEXBOX начало. Флексбокс верстка.
44:38
От 0 до 1
Рет қаралды 45 М.
Семантика, семантическая верстка
1:38:06
От 0 до 1
Рет қаралды 48 М.
Как подключать шрифты в 2024
20:53
От 0 до 1
Рет қаралды 3,5 М.
Pokey pokey 🤣🥰❤️ #demariki
00:26
Demariki
Рет қаралды 8 МЛН