Общее 2

Question 1

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

Answer 1

1. обернуть дополнительным блоком каждую карточку.
2. задать этой дополнительной оболочке display:flex;
   Сама карточка станет высотой с новую оболочку.
3. кнопка “купить” и, мб, цена - пришиты абсолютом ко дну
4. Высоту считать с помощью js (складывать высоту всех объектов)

Question 2

Почему блокам всегда желательно задавать display: inline-block?

Answer 2

Тогда его ширина будет зависеть от содержимого и её не нужно будет ограничивать, что плохо для адаптивности не только к ширине экрана, но и к изменениям от пользователя.

Question 3

Почему и когда картинки лучше оборачивать отдельным блоком?

Answer 3

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

Question 4

Чему может мешать event.preventDefault();?

Answer 4

Это может мешать переходу по ссылке, если на неё повешено какое-то действие и эта команда event.preventDefault();

Question 5

Почему нельзя писать так и что писать вместо?

<p>текст<span>ещё текст</span>снова текст</p>

Answer 5

Нельзя, так как придётся перебивать с помощью !important; текст в спане и в результате использования вордпресса (например, p style=text-align) вёрстка может конкретно поплыть. Лечение: если внутри <p> нужен <span>, то добавлять оставшемуся тексту в параграфе также свой спан и всем спанам задавть свои классы.</span></p>

Question 6

Если нужно добавить новый элемент внутрь flex-контейнера и не нарушать уже созданное позиционирование внутри него, что делать?

Answer 6

Юзать absolute, так как он выпадает из общего потока. И передавать его высоту в паддинг секции.

Question 7

Какие дополнительные инструменты использовать в разработке?

Answer 7

Обязательно юзать встроенную лупу - Magnifier, особенно с подложенным в корень макетом. Она умеет следить за курсором.
Юзать линейку-программу mySize + лупу для измерения отступов. Для линейки есть инструкция в корне HTML после курсов

Question 8

Что лучше использовать для Pixel Perfect?

Answer 8

Не брезговать TranslateX для достижения соответствия макету. Можно вместе с марджинами, можно вместо. Если будут анимации, лучше потом скопировать и подкорректировать конец анимации под отдельный элемент.

Question 9

Всегда, когда есть желание подсчитать и передать ширину через JS…

Answer 9

Подумать, а нельзя ли что-то просто поместить в общий контейнер илиразные контейнеры с одним классом?

Question 10

Добавляя иконки через псевдоэлементы…

Answer 10

Делать им background-position: center center;

Question 11

Если нужно задать <br></br> display:none; а на медиа -запросе - display:block или наоборот, что добавлять переносам?

Answer 11

Переносам всегда задавать классы!

Question 12

Какая ширина должна быть у inner’ов outer’ов?

Answer 12

У outer’ов - либо inline-flex (поддерживает ишак 8), либо в пикселях - если есть строгие макеты на разные экраны. У inner’ов - строго по макету в пикселях, если заказчик не скажет, что хочет менять со временем ширину таких блоков. Предупреждать: это может портить дизайн и вообще все иннеры будут выравниваться по высоте, даже если количество строк у них разное.

Question 13

Ширина элемента с position: absolute

Answer 13

Устанавливается по содержимому

Question 14

Как дополнительно готовиться к вёрстке, где есть макеты на разные экраны?

Answer 14

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

Question 15

Что всегда добавлять заголовкам?

Answer 15

h1-h6 всегда должны быть с классами, так как SEO могут их менять

Question 16

Что проверять перед началом вёрстки?

Answer 16

Проверять перед работой все отступы слева, справа, что по центру, что параллельно чему. На всех макетах

Question 17

В каких единицах лучше задавать марджин для текста?

Answer 17

Марджин для текста лучше всего задавать в em: тогда его не нужно будет подбирать в vw для больших экранов, но следить, чтобы соответствовало всем макетам.

Question 18

С чем внимательно быть при вёрстке?

Answer 18

Внимательно с треугольниками и разделителями, иконками, отступами и выравниваниями, лого если оно просто в левом углу- только абсолютом, если где-то по центру, справа или хз где - в списке.

Question 19

Какая особенность display inline-flex?

Answer 19

display inline-flex не реагирует ни на какие justify-content, потому что его ширина всегда соответствует содержимому.

Question 20

Приоритетность стилей

Answer 20

Свойство, записанное в разметке важнее того же свойства, записанного в стилях.

Question 21

Кроссбраузерные изображения: что делать с WEBP?

Answer 21

Если юзать Webp, чтобы работало эксплорере, нужно в стилях прописывать сначала jpg/png, затем - Webp, тогда новые браузеры загрузят в кеш и отрисуют новый формат, а ишак - старые. Порядок:     
background-image: url('.jpg');
background-image: url('.webp');
Для разметки юзать:
src=".jpg"
srcset=".webp"

Question 22

Проверять сайт в ишаке после натяжки. Почему?

Answer 22

Чтобы знать, какие изображения пропущены при адаптации к ишаку (webp, jpg/png)

Question 23

Какой селектор имеет приоритет, если статичному классу (класс-1) добавить динамический (класс-2) через JS?

Answer 23

.класс-1.класс-2 имеет приоритет над статичным классом. А одинокий селектор .класс-2 может быть проигнорирован (перечёркнут в консоли) в пользу статичного.