​Pixel Perfect — техника, при которой вёрстка совпадает с макетом, который нарисовал дизайнер. Как правило, допускается разница между конечным результатом и макетом максимум в 5 пикселей.

Проверка по Pixel Perfect была раньше более популярной, но сейчас подавляющее количество компаний отказывается от неё. Тем не менее, есть заказчики, которые не понимают, как проверять работу верстальщика, и Pixel Perfect им кажется оптимальным способом.

На профессиональных курсах мы проверяем проекты по Pixel Perfect, но в будущем планируем отказаться от этого. Сейчас мы оставляем это требование, так как некоторые заказчики всё ещё используют Pixel Perfect, а для новичка это опыт пребывания в условиях, приближенных к реальности.

Но насколько актуален Pixel Perfect на самом деле? Можно ли без него обойтись и как?

В реальности Pixel Perfect используется всё реже, так как он имеет много недостатков. Это достаточно сложный и трудозатратный процесс. Потраченное время можно посвятить созданию хорошего интерфейса. Макет может совпадать с дизайнерским, но если сайт будет загружаться долго и иметь ошибки, то это, очевидно, будет ещё хуже.

Из преимуществ — Pixel Perfect помогает найти ошибки по макету. Так легче обратить внимание на несоответствия по шрифтам или отступам.

Основная проблема, которая приводит к необходимости использования Pixel Perfect — плохо выстроенная коммуникация между верстальщиком и дизайнером. Очень часто при вёрстке опускаются многие моменты. Яркий пример — дизайнер заранее предусмотрел лёгкую асимметрию — слева отступ 20, справа — 23. Однако верстальщик совершает ошибку и делает так, как удобнее ему — отступы со всех сторон по 20. Ничего хорошего из этого не выходит.

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

​Делимся отзывом выпускницы курса «HTML и CSS. Профессиональная вёрстка сайтов» #29 Татьяны Ясюченя.

Пришла на курс после прохождения тренажёров от Академии. На интенсиве очень понравилась атмосфера, приближенная к реальной рабочей, и то, что всё изученное закрепляется на проекте, который делаешь с нуля, а потом кладёшь в портфолио.

Важно сразу понимать, что вы пришли на интенсив — работы будет много, материала для самостоятельного освоения — ещё больше. На лекциях разбираются не основы, а нюансы практики — остальное нужно изучать в рамках домашнего задания.

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

Особенно понравилось, что Академия готовит небезразличных верстальщиков: много внимания уделяется доступности вёрстки для незрячих людей, качественному юзабилити. Главный плюс интенсива — ты не просто заучиваешь теги и копируешь готовый макет, а начинаешь понимать, как будет лучше для пользователя. И, конечно, это укрепляет желание учиться, развиваться дальше.

​Импорты в CSS и препроцессорах отличаются. В препроцессорах файлы «склеиваются» в один файл, а в CSS нет. Поэтому в случае с препроцессорами пользователь сайта скачает один итоговый склеенный style.css, а c CSS пользователь скачает каждый импортируемый файл, который добавили с помощью @ import.

Например, если вы добавили 15-20 файлов, что реально для среднестатистического проекта, то для каждого этого файла будет открыто HTTP-соединение. Это накладные ресурсы, которые откладывают загрузку последующих ресурсов.

Также проблема заключается в том, что каждый стилевой файл будет загружаться последовательно. Это значит, что второй файл даже не начнёт загружаться, пока не загрузится первый. Если файлов 15-20, то цепочка становится длинной, а ведь мы даже не дошли до картинок и скриптов в контенте сайта.

По последней спецификации к @ import стало возможно добавлять @ supports-директиву.

@ import url("narrow.css") supports(display: grid);

Но это правило не говорит «Загрузи narrow.css, если браузер понимает гриды», оно говорит «Загрузи narrow.css и, если браузер поддерживает гриды, примени стили внутри стилевого файла к сайту». То есть проблемы с загрузкой никуда не ушли.

Поэтому использовать @ import в современной разработке не принято. Используйте препроцессоры или системы сборки, которые будут объединять стилевые файлы.

Скидка на кошачьи проекты и навыки до 90%!

Мы долго вели переговоры с нашим боссом Кексом, дождались, пока он будет в хорошем настроении, и уговорили его устроить распродажу профессиональных проектов и навыков. Кошачьих, конечно же.

С помощью навыка «Создание семантической разметки по макету» вы узнаете, как спроектировать информационную архитектуру страниц и написать корректную, семантичную и выразительную HTML-разметку.

А в проекте «Кошачий питомник» вы создадите сайт по макету. В комплект входит макет, подробная инструкция по вёрстке и эталонный код для каждого этапа.

Акция продлится до 9-го декабря включительно.

​Решили спросить наших наставников о том, какие советы они могут дать по организации процесса обучения.

Мнением поделилась наставница Ольга Вадясова.

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

Здесь, наверное, ещё есть важный нюанс в виде того, чтобы понять, а это цель твоя или нет, и возможно ли её реализовать конкретно на этом курсе. Мне в подобных ситуациях помогают вопросы. Даже банальное «А я точно именно этого хочу?», и внутренняя реакция на этот вопрос помогает. Хоуп зис мейкс сенс.

🔹 Дополнительный совет — чуть менее формально подходить к учебе. Возможно, снизить градус серьезности — позволять себе ошибаться, пробовать и экспериментировать с новыми знаниями. Или, например, учиться не только строго по часам, но и когда «потянуло», и есть такая возможность. В общем, здесь много чего можно придумать, но нужно исходить из личных особенностей.

🔹 Царь-совет — ОТДЫХАТЬ. Для качественной работы, а учёба — отчасти тоже работа, нужно не менее качественно восстанавливаться. Это может быть сон, либо пятиминутка на отдых и созерцание облаков.

Раз в неделю Женя отправляет письма с новыми статьями из блога.

Делает он это не просто так, а с душой: то полезной подборкой поделится, то целый стих сочинит. Но, конечно, не забывает, что мы тут про обучение веб-разработке.

Чтобы получать такие письма, подпишитесь на редакторскую рассылку.

Кому и зачем нужна вёрстка рассылок в 2021 году? Какие навыки необходимы для создания красивых и адаптивных писем?

Эти и многие другие вопросы обсудим на лайве 16 декабря. Ведущий: директор по развитию HTML Academy Лёша Симоненко. Специальный гость: Серёжа Зубов — веб-разработчик Reg.ru и автор профессионального курса «Вёрстка email-рассылок».

Вышел в релиз новый проект на JavaScript высокой сложности «Прогноз погоды».

Вам предстоит запрограммировать приложение на JavaScipt, которое будет работать в браузере — прогноз погоды в городах. Приложение позволяет выбрать города из списка и посмотреть погоду для избранных городов в списке и на карте.

Интерфейс включает два списка городов и карту. Кроме отображения информации вам нужно будет запрограммировать и загрузку данных. В эталонной реализации используются нативные браузерные API.

В комплект проекта входит: техническое задание, готовая вёрстка и примеры эталонной реализации.

В операционной системе Microsoft Windows есть предустановленный терминал, который называется cmd.exe. Использовать его в качестве основного терминала не рекомендуется, так как он слабее аналогов. Однако есть альтернатива в виде эмулятора консоли под названием cmder.

В этой статье рассказываем, как скачать и установить терминал.