😎 Pixel Perfect верстка сайтов на практике

🔥3 дня действует скидка 30% на Базовый курс 3.0 tpverstak.ru/training/
Старт обучения 8 июня (для учеников предыдущего потока действует скидка 40%)
Расскажу на практике, на какие моменты стоит обращать внимание при работе с плагином PerfectPixel или Pix to Pix для того, чтобы верстка соответствовала пиксель перфект.
Тайм-коды:
00:00 - Вступление
00:32 - Демонстрация блока и разметки для практики
01:59 - Плагины для работы с пиксель перфект
03:37 - Скидка 30% на Базовый Курс 3.0
06:37 - Верстка блока
17:57 - Использование плагина PerfectPixel
29:48 - Итоги
Шпаргалка Grid CSS - tpverstak.ru/grid/
Видео про единицы измерения:
• Единицы измерения CSS ...
• Единицы измерения CSS ...
Видео о методах верстки: • Video
Видео о Dev Tools: • Обзор DevTools за 30 м...
Купить ежедневник Frontend Book - tpverstak.ru/frontendbook
Задать вопрос про фронтенд или верстку - frontendhelp.me/ru
✅Поддержать канал - / @annblok_webdev
✅Сайт - tpverstak.ru
✅ВК - tpverstak
✅Instagram - / annblok
✅Telegram - t.me/tpverstak
✅Чат Telegram - t.me/tpverstakchat
Курсы и марафоны - tpverstak.ru/courses/
Отзывы - topic-77986122_40115279

[@stanislavosipkin]

Спасибо за полезную информацию, узнал много интересного о сетке и pixel-perfect.

[@nadhit87]

Полезный урок! Аня, спасибо!!!

[@antonmaklakov]

Спасибо большое за разъяснение того, что такое pixel perfect! В требованиях на работу обычно висит этот пункт и не всегда понимаешь,что он означает.😅

[@yuliyamakeyeva1252]

Спасибо! Очень подробно ♥️

[@wolshebstvo]

Спасибо за урок! У плагина perfectpixel есть функция lock (кнопочка с замочком). Если ей воспользоваться, то можно инспектировать элементы не включая плагин.

[@annblok_webdev]

Отличное дополнение 👍🏻 Жаль только двигать часто приходится

[@bogdankryzhniy5047]

За "в общем и целом" отдельный плюсик ))

[@yurok1991]

Спасибо за пример!

[@Faradau]

Спасибо за видео! А в плагине Perfect Pixel можно ещё нажать на значок замка (рядом со значком глаза), и тогда картинка макета не будет мешать инспектировать элемент.

[@user-to4ke3df3v]

Подскажите, пожалуйста, начинающему верстальщику. В ролике все размеры задаются в пикселях. Нужно ли при pixel prfect вёрстке реального заказа переводить единицы измерения в адаптивные, такие как vw? Пытаюсь сверстать пробный макет в pixel perfect с адаптивными значениями margin и padding, но расстраивает тот факт, что точного попадания в макет нет.

[@chaatGPT]

Такая милаха) жду следующий видео ролик.

[@user-cm7bk8go5y]

о господи не теки..

[@trevortorn5240]

Какой масштаб нужно указывать в плагине? У меня сейчас макет который отображается при масштабе 0.8 так как он должен выглядеть, но верстка ложится только при масштабе 1 и получается увеличенной по сравнению с макетом.

[@user-tc9ml2mu5k]

Аня,скажи,а макет из Фигмы какой ширины скачивать нужно,если работаешь на ноуте? Или прямо какой он есть ширины,такой и скачиваем, а Хром сам его подстроит под мое разрешение ноута??

[@annblok_webdev]

Скачивать таким, какой есть

[@arch7880]

Подскажите как бороться с отступами у шрифтов сверху и снизу? Если выставить line-height: 1 это все равно не спасает, будет 2-3 "паразитных" пикселя у текста, как будто отсупы. Как в таком случае вообще верстать pixelperfect?

[@asgard1428]

Анна добрый день. Вы не подскажете в чем дело? Переустановил хром и теперь не устанавливается pixel perfect. Пишет что ошибка и все.

[@nikn6244]

тег label ничего не оборачивает и не привязан по id ?

[@artyrdanilov2791]

Анна добрый день ! У меня к вам небольшая просьба. Не могли бы вы накидать примерный план изучения CSS ? Очень надо для самоконтроля !!!

[@annblok_webdev]

Добрый день, можете ориентироваться на программу базового курса docs.google.com/document/d/1c6eQqrwGuxv1ZStsmOB2HMMzDKWUcl6LYoRnd8BWBNY/edit?usp=sharing

[@artyrdanilov2791]

Спасибо !!!

[@user-mr7ho1bi7s]

Спасибо)

[@user-yw6bj5oe9w]

А можно ли было это сделать на ФЛЕКСАХ? ....или лучше Grid?

[@user-dv9fk1hd3s]

Можно было и на флексах, хоть на таблицах. Дело только в удобстве

[@romanco8952]

Круто! Теперь мне всё понятно, спасибо 😊

[@userAlex97]

Спасибо !

[@adeptussilicium2821]

Я извиняюсь, а почему вы в IDE используете пропорциональный шрифт? Это же лютая bad practice!

[@user-pt8ru9um9k]

куча рекламы и сам принцип работы не раскрыт

[@user-js3sy2qv7m]

а если адаптивность делать с помощью вот этого? win_w = $(window).width(); win_h = $(window).height(); что вы по этому поводу думаете?

[@user-dv9fk1hd3s]

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

[@user-js3sy2qv7m]

@@user-dv9fk1hd3s Я уже понял что все по возможности нужно на CSS вешать потому что JS не так быстр. К тому же в CSS есть те же переменные и калькулятор и при желании можно логику там делать неслабую.

[@artemstarostyants8368]

Perfect Pixel - шикарный плагин! Советую при работе с ним использовать инвертирование цветов + рассмотреть использование Livestyle от Emmet (позволяет применять изменения в файлах стилей браузер редактор, но работает только с Sublime Text). Мне это сильно помогает в работе)

[@annblok_webdev]

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

[@artemstarostyants8368]

@@annblok_webdev Глаза меньше напрягаются, особенно в попытках свести детали близких к белому цветов. Интересный переход к профессиональной деятельности, хотя не самый удивительный. Мне вот доводилось работать с дизайнером, отучившимся на повара)

[@user-tg8kw6nx6j]

Я новичок опыта только 3 месяца ) . Вопрос : в оси Y -2500 , это нормально) ?

[@annblok_webdev]

В Figma? Это ни на что не влияет

[@user-tg8kw6nx6j]

Figma не чего не знаю . Только фотошоп. Получается что Figma проще ? Или есть тоже свои нюансы ??

[@annblok_webdev]

@@user-tg8kw6nx6j Везде есть свои нюансы, но в целом Figma проще и продуманнее.

[@user-tg8kw6nx6j]

Спасибо !👍 Лайк!👍

[@evgeniyprowork]

@@user-tg8kw6nx6j попробуй Avocode, куда лучше фигмы для верстки

[@user-cb5xj1lg1l]

Работаем

[@AndreiVvedenskii]

Скажите, а насколько вообще реально совпадение текста пиксель в пиксель? Заранее спасибо.

[@annblok_webdev]

На 100% реально

[@eugenia9999]

Анна, здравствуйте !!))) Спасибо за видосик !!!!)))

[@annblok_webdev]

☺️☺️☺️

[@sergey_zatsepin]

А scss как в css переводишь? Ну тут это твой сайт, тут можно и на глаз сделать всё чётенько) А у тебя не было заказчиков, которые хотели, чтоб принципиально максимально точно всё было? Типо вот один блок 600 другой 550 - нет давайте доп. классы, вымеряйте, чтобы всё в пп сходилось.

[@annblok_webdev]

SCSS компилирует файлы в CSS. Проблем с заказчиками не было никогда, потому что всегда можно всё доступным языком объяснить.

[@user-dv9fk1hd3s]

Используешь моноширинный шрифт в макетах, но не в редакторе кода :)

[@user-pb9cb9vg8s]

Я использую обычно инверсию, что бы не мылилось)

[@annblok_webdev]

На практике никогда не инвертировала, все видно, либо у меня глаз хорошо на оттенки натренирован)) В художественной школе училась

[@user-pb9cb9vg8s]

Типичный Верстальщик • Анна Блок все возможно, но можно увидеть ширину, точные отступы и тд. Мой глаз не такой четкий как у тебя значит)

[@onebytesiteit30-75]

Html и css в деле

[@clickabelno]

Ставлю лайк этой умнице!!

[@stazyxtnom4514]

Шпаргалка так себе ,если честно. Там нет ничего про areas или про templates. Советую почитать что-то по-серьезнее. Там лишь методы выравнивания когда у вас уже сетка есть. Это можно и в дебагере узнать, поиграться туда сюда по выравнивать элементы

[@AliaksandrHrankin]

больше 1000 строк в sccs файле. это что такое? О_о

[@user-dv9fk1hd3s]

Это реальная жизнь

[@AliaksandrHrankin]

@@user-dv9fk1hd3s ой, ну нет. где здесь модульность?

[@user-dv9fk1hd3s]

@@AliaksandrHrankin У меня на работе запросто может быть и по 3к строк в стилях, притом css файлов может быть несколько десятков

[@PRAPOR08]

НУ есть один "зашкварный" момент, не нужно изменять через консоль разработчика стили, а потом их копировать в редактор когда (время и дополнительная никому не нужная работа), устанавливайте task runner - если бы мне кто рассказал об этом когда я начинал (для начала gulp "хватит с головой"). Жаль Анна, что выданный момент не прокомментировали...

[@evgeniyprowork]

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

[@evgeniyprowork]

eCSStractor удобней юзать чем писать стили самому как по мне marketplace.visualstudio.com/items?itemName=diz.ecsstractor-port

[@onebytesiteit30-75]

По верстке ооочень актуально. Круто что так подробно. Благодарю. Я тоже пошел в айти и решил с сайтов начать. За пол года сам научился и уже пару работ продал. Пилю видосы на канале для начинающих забегайте в гости. Рад всем.

[@CodeRyzen]

Я первый

[@oktoster1173]

Кросавчик

[@kenigsmann]

ПП - наитупейшее требование к звкзам! ничего кроме удовлетворения эго заказчика: "ряяя у миня сайт в пиксиль-шмиксель-хуиксель ряяя", а также потраченных нервов, времени, увеличения кода css не даёт. Считаю десигнеров не учитывающий данный кейс нужно придавать анафеме и отлучать от компьютера, а заказчиков с такими требованием просто игнорить - нервы дороже!!!

[@Spartfin]

Замужем?☺

[@ITentrepreneur]

Если нет, ты от этого верстать лучше станешь? 😂