Який тип позиціонування розміщує елемент відносно найближчого позиціонованого предка або document body, якщо такого немає?

Тест перевіряє базові знання HTML і CSS, необхідні для позиції frontend-розробника.

Спеціальний оголошення типу документа, що дає браузеру підказку, у якому режимі інтерпретувати сторінку (стандартному або quirks).

Тег, який визначає кодування сторінки (наприклад UTF-8).

Метатег, що описує авторські права на сторінку.

Атрибут, який встановлює кореневий елемент для CSS-селекторів.

Що таке DOCTYPE і для чого його використовують у HTML?

Визначати структуру документа і відображення блоків на сторінці.

Надавати додаткову інформацію про сторінку (наприклад опис, ключові слова) і розміщуються у <head>.

Забезпечувати прив’язку стилів до конкретних елементів у тілі сторінки.

Визначати порядок завантаження зовнішніх ресурсів, таких як скрипти.

Яка основна роль мета-тегів у HTML-документі?

Блоковий елемент не може містити інших елементів, а рядковий може.

Рядковий елемент завжди займає всю ширину контейнера, блоковий — лише ширину вмісту.

Блоковий елемент починається з нового рядка, за замовчуванням займає всю доступну ширину і може містити блокові та рядкові елементи; рядковий розташовується в одному рядку й має ширину за вмістом.

Рядкові елементи доступні лише у <head>, блокові — у <body>.

У чому відмінність блочного (block) елемента від рядкового (inline) в HTML?

Через некоректно вказаний DOCTYPE.

Через помилку в CSS-селекторі, який не застосовується.

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

Через те, що символи мають некоректний тег, наприклад <span> замість <img>.

Чому деякі символи на веб-сторінці можуть відображатися у вигляді квадратів?

Верстка, що використовує логічно зрозумілі теги для структурування документу, наприклад header, nav, main, section, footer, що покращує доступність і SEO.

Верстка, яка використовує тільки <div> і класові ідентифікатори для оформлення.

Верстка, що орієнтована на максимальну візуальну сумісність у старих браузерах.

Верстка, де стилі підключені лише inline-атрибутами style.

Що називають семантичною версткою і які теги до неї відносять?

HTML підтримує 3 рівні заголовків, і <h1> можна використовувати кілька разів на сторінці.

HTML підтримує 6 рівнів заголовків від h1 до h6, і рекомендується мати лише один <h1> на сторінці.

HTML не має обмежень на рівні заголовків; використовуються лише візуальні стилі.

HTML дозволяє будь-яку кількість рівнів заголовків, але h6 повинен бути головним заголовком.

Скільки рівнів заголовків підтримує HTML і яка рекомендація щодо використання <h1>?

Задає, що ширина і висота елемента будуть відповідати тільки розміру контенту, а поля і рамки додаються зверху.

Повністю відключає застосування margin для елемента.

Включає padding і border у вказану ширину та висоту елемента, завдяки чому зовнішній розмір не збільшується при додаванні відступів і рамок.

Автоматично встановлює ширину елемента у відсотках від контейнера.

Що робить властивість box-sizing: border-box у CSS?

async завжди виконує скрипт після того, як сторінка повністю завантажена, а defer — відразу при появі тега.

defer дозволяє продовжувати парсинг сторінки і відкладає виконання скрипта до кінця парсингу; async також завантажує у фоновому режимі, але виконує скрипт одразу після завантаження незалежно від парсингу.

async використовується тільки для CSS, а defer — тільки для JS.

Обидва атрибути примушують браузер виконувати скрипт синхронно під час парсингу.

У чому ключова відмінність між атрибутами async і defer при підключенні зовнішнього JavaScript?

reset.css обнуляє стилі браузера, зводячи їх до нуля; normalize.css вирівнює та стандартизує початкові стилі між браузерами, зберігаючи корисні дефолтні стилі.

reset.css додає готові стилі для компонентів, normalize.css — видаляє усі стилі.

reset.css працює лише з шрифтами, normalize.css — лише з відступами.

reset.css автоматично генерує responsive-стилі, normalize.css — лише для десктопу.

У чому різниця між reset.css і normalize.css?

Repaint змінює геометрію елемента (ширина/висота), а reflow лише оновлює колір і фон.

Reflow (layout) виникає при зміні розмірів або розташування елементів і потребує перерахунку layout; repaint оновлює візуальне відображення (наприклад колір) без перерахунку розмірів; reflow дорожчий за repaint.

Обидві події — синоніми і завжди відбуваються одночасно при будь-якій зміні DOM.

Reflow викликається тільки під час завантаження сторінки, repaint — лише при зміні шрифта.

Що таке reflow (layout) і repaint у браузері, і яка між ними різниця?

em — відносно поточного шрифту

vw — відсоток від ширини вікна перегляду

rem — відносно розміру шрифту кореневого елемента

Яка одиниця виміру у CSS відносна до розміру шрифту кореневого елемента (<html>)?

Питання 11 з 12