Вопросы/ответы html верстальщику на собеседовании

Некоторые работодатели задают эти вопросы устно, другие же присылают гугл-форму. Второе, конечно, проще - ведь есть время загуглить:)

Итак, вопросы с краткими ответами:

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

Семантический html это элементы, по названию которых четко можно понять, что в них содержится. Например: form, article, table

Что такое адаптивная верстка? И какими способами она достигается?

Адаптивная верстка это верстка, которая смотрится хорошо на любых устройствах и разрешениях экрана. Реализовать ее можно с помощью медиа-запросов

В чем разница между строчными и блочными элементами (inline, block, inline-block)?

1. элементу inline ширина высота определяется содержимым, им нельзя задать ширину и высоту.
2. элементу block можно задать ширину и высоту. Высота определяется содержимым.
3. элементу inline-block также можно задать ширину и высоту. Ширина определяется содержимым.

Какие ещё бывают значения display и кратко расскажи о каждом?

1. table, table-row, table-cell - блоки ведут себя как табличке.
2. list-item - используется доя элементов списка. Правда обычно для этого используют ul>li.
3. flex - гибкий блок, в основе которого лежит построение по осям.
4. none - скрывает блок.
5. grid - расположение элементов в виде таблицы

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

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

Расскажи о приоритете селекторов?

Условно можно расставить селекторы в следующем порядке по приоритету:

1. Селектор по идентификатору ( #blue ).
2. Селектор по классу ( .red ).
3. Селектор по тегу ( p ).

Где 1 — самый высокий приоритет, а 3 — самый низкий.

Что такое Flexbox и какие у него преимущества?

Это способ отображение сетки блоков на странице. Благодаря ей веб-страницы выглядят понятно и аккуратно

Что такое псевдоклассы в CSS? Приведи пару основных псевдоклассов.

Это селекторы, которые позволяют стилизовать определенные состояния или части элементов. Например: hover, before, after

Какие свойства position ты знаешь?

1. Static — значение по умолчанию, элемент позиционируется в соответствии с его местом в потоке документа.
2. Relative — элемент позиционируется относительно своего исходного положения в потоке документа.
3. Absolute — элемент позиционируется относительно ближайшего родительского элемента, который имеет позиционирование, отличное от static.
4. Fixed — элемент позиционируется относительно окна браузера.
5. Sticky — элемент остаётся на месте при прокрутке страницы, но при этом может быть отодвинут от своей стандартной позиции.

Какая разница между элементами <span> и <div>?

1. div — это элемент уровня блока, занимающий всю доступную ширину;
2. span — это элемент строчного уровня, занимающий только необходимое пространство вокруг своего содержимого.

Из чего состоит размер элемента

• height, width — высота и ширина;
• max-height, max-width — высота и ширина, больше которых элемент не может быть (а меньше — может);
• min-height, min-width — минимальная высота и ширина;
• margin — размер поля вокруг элемента. Другие элементы не должны влезать в это поле;
• padding — отступы внутри элемента, например, если внутри будет написан текст.

В чём разница между padding и margin?

• margin — размер поля вокруг элемента. Другие элементы не должны влезать в это поле;
• padding — отступы внутри элемента, например, если внутри будет написан текст.

Можно ли изменить строчный тег на блочный?

Можно, задав ему display: block

Назови несколько способов отцентрировать блок по высоте и ширине.

1. margin: 0 auto; - центрирует блочный элемент по горизонтали. Также можно использовать text-align;center для родителя элемента, но если у "ребенка" не задана высота и ширина.
2. выравнивание элемента по горизонтали и вертикали position: absolute; left: 50%; top; 50%; margin-left: -(половина ширины блока), margin-top: -(половина высоты блока). также для выравнивания можно использовать transfrom, вместо margin.
3. Выравнивание с помощью таблицы. Display: table. Vertival-align; middle; text-align: center. Здесь необходимо использовать вложенность

Что такое vh и vw

• vh и vw — это относительные единицы измерения, которые используются в CSS3. Они вычисляются относительно размеров окна браузера.
• vh эквивалентен 1% высоты окна браузера.
• vw эквивалентен 1% ширины окна браузера.

Что за свойство overflow?

Свойство overflow определяет, что делать с содержимым элемента, если оно не помещается в установленные размеры

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

• Кликабельна почта с открытием в новом окне: <a href="mailto:guliza@yandex.ru" target="_blank"></a>
• Телефон < a href=" tel:+1112233"></a>

Дальше предлагают пройти тестовое задание.

Я, конечно, не считаю, что ответы на данные вопросы показывают уровень верстальщик, но надо так надо.

А какие вам задавали вопросы на собеседовании?