Общее

Question 1

Overflow-x:hidden для и не работает для мобильных. Какое решение?

Answer 1

Обернуть весь документ в потомок body и ему задать Overflow-x:hidden.

Question 2

Почему стоит перезагрузить компъютер перед проверкой PageSpeed?

Answer 2

Иначе данные могут быть неточными процентов на 20-40 из-за перегрузки оперативки;

Question 3

Что иногда делает текст атрибута alt=”” при ленивой загрузке со страницей?

Answer 3

Иногда он может давать скролл

Question 4

Почему лучше делать бургер при ширине экрана менее 900px?

Answer 4

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

Question 5

Как лучше всего позиционировать первый экран?

Answer 5

на абсолютах по центру с трансформом (сверху и слева, либо по-другому, согласно макета) - для родителя всего содержимого (заголовка, текста, кнопки) + верхними марджинами подгонять содержимое.

Question 6

Что делать, если в гугл нет какого-то шрифта? Может, плохо искала?

Answer 6

Нужно поробовать убрать дефис, убрать/добавить пробел и т.д.

Question 7

Как задать псевдоэлементу z-index ниже родителя?

Answer 7

Нужно задать ему -1, а родителю - любой положительный.

Question 8

Зачем привыкать делать дополнительный контейнер с классом bg?

Answer 8

Это нужно для того, чтобы заказчик мог менять фон.

Даже если outer имеет ширину 100% - это может измениться в запросах.

Question 9

Для каких элементов не тегов не работают псевдоэлементы?

Answer 9

img, input, button, textarea, object, select

Question 10

Псевдоэлементы иногда исчезают, если они находятся абсолютом над элементом, к которому применяется CSS filter:brightness(). Как лечить?

Answer 10

Лечится добавлением псевдоэлементу Z-index-а.

Question 11

Как запретить перенос слов?

Answer 11

white-space: nowrap;

Question 12

Паддинги по вертикали и высоты полей заполнения в формах делать только в пикселях! Но ПОЧЕМУ???

Answer 12

Из-за плагина формвалидатор.

Question 13

Если изображения внутри флекс-контейнера растягиваются без причины, как починить?

Answer 13

align-items: baseline; И плевать, что експлорер не может. Его пользователи должны страдать.

Question 14

Как делать горизонтальные таймлайны и прочую витиеватую инфографику?

Answer 14

Для вертикального таймлайна есть сниппет, а остальные - на абсолютах, с указанной шириной и мин-высотой, всё в пикселях, в т.ч. позиционирование. Всем элементам TRANSFORM: translateX(-50%, -50%). Привязывать лучше всего к левой и верхней стороне. Для больших экранов- vw, для маленьких - scale для всего предка и обратный scale для текста (заголовки и картинки пускай уменьшаются), затем
разворот из вертикали в горизонталь внешего родителя, SCALE - уменьшить предка и увеличить потомков, и так на каждые 100-200 пикселей, так всё равно будет быстрее

Question 15

Если нужно сделать 2 фона в одном контейнере, причём один должен накладываться на другой, у какого рисунка условный “z-index” будет больше?

Answer 15

первый рисунок имеет наивысший условный “z-index”

Question 16

Как будет вести себя калькуляция? font-size: calc (12px + 5vw);

Answer 16

означает, что шрифт всегда будет минимум 12 пикселей, а максимум- зависит от экрана. Шрифт не тает на глазах при уменьшении ширины екрана - одновременно текст переносится и шрифт уменьшается совсем понемногу. Всё пропорционально.

Question 17

Если по ховеру меняется фон блока, на котором есть инпуты и формы, а з-индекс не помогает и форму под ховером не видно?

Answer 17

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

Question 18

Создание сниппета: что должна содержать каждая строчка?

Answer 18

каждая строчка кода должна быть обёрнута в “двойные кавычки” и иметь запятую в конце. А кавычки, которые должны быть в тексте при вызове сниппета - делать одинарными и экранировать этим слешем: \

Question 19

Как задать тень тексту?

Answer 19

text-shadow

Question 20

Если псевдоэлемент before/after начинает наезжать на соседний элемент, что делать?

Answer 20

Нужно элементу - предку псевдоэлемента добавить паддинг размером с ширину/высоту псевдоэлемента, в зависимости с какого направления он наезжает на соседа: горизонтального/вертикального. А псевдоэлементу, если это изображение, можно задать background-position: right; или left, смотря какой стороной он наезжает, и ширину такую, чтобы элемент получил дополнительно невидимую ширину, которая и будет наезжать.

Question 21

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

Answer 21

в медиа-запросах удалять тег <br></br>, или, наоборот, показывать при определённой ширине, а в вёрстке - написать <br></br> со свойством display:none

Question 22

Что такое спрайт?

Answer 22

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

Question 23

Если при наведении не работет :hover, причина может быть:

Answer 23

1) неправильно прописан селектор (соседский вместо дочернего или наоборот и т.д)
2) У одного из родителей отрицательный z-index; - c ним даже события jquery не работают (ховер, события мыши, их делегирование)

Question 24

В чём суть этого курса (LP dev)?

Answer 24

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

Question 25

Если при наведении нужно скрыть подложку объекта, который “прилипает” к своему соседу с помощью отрицательного марджина, при этом подложка “наезжает” на соседа на количество отрицательных марджинов, что делать?

Answer 25

Нужно задать изображению столько же отрицательных марджинов на месте “прилипания”;
Будет не идеально, но наименее криво.

Question 26

Чтобы радиокнопки работали правильно, у них должно быть одинаковое ???? и разные ??

Answer 26

одинаковое на всех имя name=”” и разные айдишники

Question 27

Кнопка, содержащая атрибут type=”submit” перезагрузит страницу. Какой атрибут использовать вместо этого?

Answer 27

type=”button”

Question 28

Что подключает атрибут type=”button” в поле с почтой?

Answer 28

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

Question 29

Если нужно сделать изображения, увеличивающиеся внутри себа пор ховеру, но они уже есть в разметке как изображения, что делать?

Answer 29

заменить их на блоки, указать им ширину/высоту, фон, при этом задать ксласс =”img” и везде позаменять юкласс_предка img на .класс_предка .img - РАЗНИЦА В ТОЧКЕ!. + Можно взять селекторы из коносоли. 10 МИНУТ!

Question 30

Что делать, если из-за анимации скачет фиксированный навбар?

Answer 30

Нужно задать ему свойство transform: translate3d(0, 0, 0)!important;, возможно задать ему ширину в vw

Question 31

Как сохранять карточки правильно?

Answer 31

Сохранить, пройти по другим страницам, вернуться в редактирование и сохранить как веб-страницу