Технічна співбесіда з HTML CSS – основне що треба повторити

Я для себе підготувала документ в Google Docs, в якому я збирала різні поширені питання і відповіді для технічної співбесіди на вебмайстра. В цій статті я ділюсь з вами своєю шпаргалкою.

HTML

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

HTML (англ. HyperText Markup Language -мова розмітки гіпертексту) це стандартизована мова розмітки документів для перегляду вебсторінок у браузері

Що таке теги, атрибути та елементи в HTML?

Тег – елемент мови розмітки гіпертексту, записаний у кутових дужках. Атрибути надають додаткову інформацію про html елементи (href, width, height, alt, src, lang, etc). HTML елемент – це все від початкового тегу до кінцевого тегу.

Яка різниця між блоковими та рядковими елементами?

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

Яка структура базового HTML-документу?

Що таке таке <div> та <span> і в чому різниця між ними?

span представляє вбудовану (інлайн) частину документа, наприклад, слова в реченні. div представляє частину документа на рівні блоку, наприклад, кілька абзаців, або зображення з підписом.

Для чого використовуються теги <header>, <footer>, <section>, <article>

Ці теги використовуються для структурування HTML-документів, що допомагає організувати контент на веб-сторінці, допомагають зробити структуру веб-сторінки більш зрозумілою як для користувачів, так і для пошукових систем.
<header>: Використовується для визначення заголовка розділу або сторінки. Зазвичай містить логотип, назву сайту, навігаційні посилання та інші вступні елементи1.
<footer>: Використовується для визначення нижнього колонтитулу розділу або сторінки. Зазвичай містить інформацію про авторські права, посилання на політику конфіденційності, контактну інформацію та інші заключні елементи1.
<section>: Використовується для визначення розділу документа. Кожен зазвичай має свій заголовок і використовується для групування тематично пов’язаного контенту1.
<article>: Використовується для визначення самостійного фрагмента контенту, який може бути незалежним від решти сторінки. Це може бути стаття, блог-пост, новинний матеріал або інший самостійний блок контенту.

Як правильно використовувати теги для створення таблиць (<table>, <tr>, <td>)?

<table> – перший тег в якому верстається вся таблиця, <tr> – table raw, табличний рядок в якому поміщаються чарунки, <td> – table data – теги чарунок в яких безпосередньо поміщається табличнй контент

Що таке семантичні елементи HTML і навіщо вони потрібні?

Семантичні елементи HTML — це теги, які надають змістовне значення контенту на веб-сторінці, а не просто визначають його зовнішній вигляд. Вони допомагають браузерам, пошуковим системам та допоміжним технологіям краще розуміти структуру та зміст веб-сторінки.
Основні семантичні елементи HTML : Визначає заголовок розділу або сторінки.
<header>: Визначає нижній колонтитул розділу або сторінки.
<footer>: Використовується для групування тематично пов’язаного контенту.
<article>: Визначає самостійний фрагмент контенту, який може бути незалежним від решти сторінки.
<nav>: Визначає набір навігаційних посилань.
<aside>: Використовується для контенту, який пов’язаний з основним, але може існувати окремо, наприклад, бічна панель.

Навіщо потрібні семантичні елементи:

Які основні теги використовуються для створення форм (<form>, <input>, <label>, <select>, <textarea>)?

<form>: Основний контейнер для всіх елементів форми. Він визначає, куди будуть відправлятися дані форми.

<input>: Використовується для створення різних типів полів введення, таких як текстові поля, паролі, радіокнопки, прапорці тощо.

<label>: Використовується для зв’язування текстових міток з відповідними полями введення, що покращує доступність форми.

<button>: Використовується для створення кнопок, які можуть відправляти форму або виконувати інші дії.

<select> та <option>: Використовуються для створення випадаючих списків.

<textarea>: Використовується для створення багаторядкових текстових полів.

Як працює атрибут action у тегу <form>?

Атрибут action у тегу <form> визначає URL-адресу, куди будуть відправлені дані форми після її відправлення. Це може бути серверний скрипт, який обробляє дані, або інша веб-сторінка.

Як вставляти зображення допомогою тегів <img>?

1. <img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(max-width: 640px) 100vw, 50vw" alt="Опис зображення">
2. <img src="image.jpg" alt="Опис зображення" loading="lazy">
3. <img src="image.jpg" alt="Опис зображення" class="responsive-img">
4. <img src="image.jpg" alt="Опис зображення" width="300" height="200">
5. <figure>
    <img src="image.jpg" alt="Опис зображення">
    <figcaption>Підпис під зображенням</figcaption>
</figure>
6. <a href="https://example.com">
    <img src="image.jpg" alt="Опис зображення">
</a>
7. <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="Опис зображення">
8. <img src="image.svg" alt="Опис SVG зображення">

Як вставляти відео та аудіо за допомогою тегів <video> та <audio>?

Що таке srcset і як використовувати адаптивні зображення?

Атрибут srcset вказує одну або кілька адрес альтернативних зображень.

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
  <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
</picture>

CSS

Що таке CSS та для чого він використовується?

CSS (Cascading Style Sheets) — це мова стилів, яка використовується для опису зовнішнього вигляду та форматування HTML-документів. CSS дозволяє розробникам контролювати візуальне представлення веб-сторінок, включаючи кольори, шрифти, розміри, розташування елементів та багато іншого.

Як підключити CSS до HTML-документу (внутрішні, зовнішні та inline-стилі)?

1. зовнішні <link rel=”stylesheet” href=”styl es.css”>

2. внутрішні <style>..  </style>

3. inline-стилі <h1 style=”color: #333; text-align: center;”>

Що таке каскадність, успадкування та специфічність у CSS?

Які основні типи селекторів існують?

• Прості селектори (вибір елементів на основі імені, ідентифікатору, класу)
• Комбінаторні селектори (вибір елементів на основі визначених відношень між ними)
• Селектори псевдокласів (вибір елементів на основі визначеного стану)
• Селектори псевдоелементів (вибір і стилізація частини елемента)
• Селектори атрибутів (вибір елементів на основі атрибуту або значення атрибуту)

Як використовувати комбіновані селектори?

Що таке псевдокласи (:hover, :focus, :nth-child) та псевдоелементи (::before, ::after)?

Псевдокласи :hover, :focus, :nth-child використовуються для вибору елементів на основі їх стану, положення в DOM-дереві або взаємодії з користувачем.

Псевдоелементи ::before, ::after використовуються для стилізації певних частин елементів, таких як вставка контенту до або після елементів.

Псевдокласи та псевдоелементи є потужними інструментами CSS, що дозволяють створювати інтерактивні та динамічні інтерфейси, а також покращують можливості стилізації без додаткового HTML-коду.

Як працює модель коробки (box model)?

Це концепція в CSS, яка визначає структуру і розміри елементів на веб-сторінці. Кожен елемент на веб-сторінці розглядається як коробка, яка складається з кількох шарів.

Структура Box Model

Модель коробки складається з чотирьох основних частин (ззовні всередину):

1. Margin (Поле): Зовнішній відступ елемента. Це простір навколо елемента, який відокремлює його від інших елементів.
2. Border (Рамка): Рамка, що оточує внутрішню частину елемента і його відступи. Її можна налаштувати за кольором, товщиною та стилем.
3. Padding (Відступ): Внутрішній відступ елемента. Це простір між вмістом елемента та його рамкою.
4. Content (Вміст): Власне вміст елемента, такий як текст, зображення або інший HTML.

Властивості Box Model

• width та height: Задають ширину і висоту вмісту елемента.
• padding: Внутрішній відступ (padding-top, padding-right, padding-bottom, padding-left).
• border: Рамка (border-width, border-style, border-color).
• margin: Зовнішній відступ (margin-top, margin-right, margin-bottom, margin-left).

За замовчуванням, ширина та висота елемента визначають тільки розміри вмісту. Щоб змінити цю поведінку, можна використовувати властивість box-sizing.

• box-sizing: content-box: Значення за замовчуванням. Властивості width і height задають тільки розміри вмісту.
• box-sizing: border-box: Властивості width і height включають padding і border, що дозволяє легко контролювати загальні розміри елемента.

Як використовувати Flexbox та Grid для створення адаптивних макетів?

Що таке медіа-запити (media queries) і як вони використовуються для адаптивного дизайну?

Медіа-запити (media queries) — це потужний інструмент CSS, який дозволяє застосовувати стилі до елементів веб-сторінки залежно від характеристик пристрою, на якому ця сторінка переглядається. Вони є основним компонентом для створення адаптивного дизайну, який забезпечує оптимальний вигляд і функціональність на різних пристроях, від мобільних телефонів до великих моніторів.

/* Базові стилі, які застосовуються для всіх пристроїв */

body {
    font-size: 16px;
}

/* Стилі для екранів шириною 600px або більше */
@media screen and (min-width: 600px) {
    body {
        font-size: 18px;
    }
}

/* Стилі для екранів шириною 900px або більше */
@media screen and (min-width: 900px) {
    body {
        font-size: 20px;
    }
}

Як використовувати CSS-перемінні (custom properties)?

Визначення змінних для повторного використання значень. Наприклад, –mCSS-перемінні (також відомі як кастомні властивості) дозволяють зберігати значення CSS властивостей у змінних і використовувати їх повторно в стилях. Це підвищує зручність і ефективність управління стилями, особливо при створенні великих або складних стилістичних файлів.

Основи CSS-перемінних

Оголошення змінних

Перемінні оголошуються за допомогою синтаксису --ім'я-змінної, і зазвичай їх визначають в рамках селектора (найчастіше :root для глобальних змінних)

:root {
    --main-color: #3498db;
    --main-padding: 10px;
}

Використання змінних

Для використання змінної застосовується функція var(), в яку передається ім’я змінної.

body {
    color: var(--main-color);
    padding: var(--main-padding);
}

Значення за замовчуванням

Функція var() дозволяє встановлювати значення за замовчуванням, яке буде використане, якщо змінна не визначена.

body {
    color: var(--main-color, black); /* Якщо --main-color не визначена, використовується black */
}

Що таке CSS-анімації та переходи (transitions)?

CSS-анімації та переходи (transitions) дозволяють створювати плавні ефекти зміни стилів елементів, покращуючи візуальне сприйняття і користувацький досвід на веб-сторінках.

CSS-переходи (transitions)

CSS-переходи дозволяють плавно змінювати значення CSS-властивостей протягом заданого часу при виникненні певної події, наприклад, при наведенні миші.

Основні властивості

• transition-property: Визначає, які CSS-властивості будуть анімовані.
• transition-duration: Визначає тривалість анімації.
• transition-timing-function: Визначає швидкість зміни анімації (лінійна, кубічна, тощо).
• transition-delay: Визначає затримку перед початком анімації.

Приклад

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Transitions Example</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            transition: background-color 0.5s, transform 0.5s;
        }

        .box:hover {
            background-color: red;
            transform: scale(1.5);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

CSS-анімації (animations)

CSS-анімації дозволяють створювати більш складні та контрольовані анімаційні ефекти, визначаючи серії ключових кадрів (keyframes), між якими відбуваються зміни.

Основні властивості

• animation-name: Визначає ім’я анімації, яке відповідає визначенню @keyframes
• animation-duration: Визначає тривалість анімації.
• animation-timing-function: Визначає швидкість зміни анімації (лінейна, кубічна, тощо).
• animation-delay: Визначає затримку перед початком анімації.
• animation-iteration-count: Визначає кількість повторень анімації.
• animation-direction: Визначає напрямок анімації (нормальний, зворотний, альтернативний).
• animation-fill-mode: Визначає, як будуть застосовуватися стилі до і після виконання анімації.

Приклад

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Animations Example</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: moveAndChangeColor 2s infinite;
        }

        @keyframes moveAndChangeColor {
            0% {
                background-color: blue;
                transform: translateX(0);
            }
            50% {
                background-color: green;
                transform: translateX(100px);
            }
            100% {
                background-color: blue;
                transform: translateX(0);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Висновок

CSS-переходи та анімації значно підвищують динаміку та візуальну привабливість веб-сторінок. Переходи ідеально підходять для простих змін стилів, таких як зміна кольору або розміру при взаємодії з користувачем. Анімації ж дозволяють створювати більш складні ефекти, визначаючи серії ключових кадрів і налаштовуючи різні параметри анімації.

Як використовувати фільтри та тіні (filters, box-shadow, text-shadow)?

• Фільтри: Застосовують графічні ефекти. Наприклад, filter: blur(5px).
• Box-shadow: Додає тінь до елемента. Наприклад, box-shadow: 10px 10px 5px #888888.
• Text-shadow: Додає тінь до тексту. Наприклад, text-shadow: 2px 2px #FF0000.

Як вирівняти елементи по вертикалі та горизонталі?

Використання Flexbox: align-items: center; justify-content: center;.

Додаткові питання з HTML

1. Що таке DOCTYPE і чому він використовується?

DOCTYPE (Document Type Declaration) — це інструкція для веб-браузера, яка вказує тип документа та версію HTML, що використовується. Вона завжди розташовується на першому рядку HTML-документа. Наприклад, для HTML5 використовується <!DOCTYPE html>. Основна мета DOCTYPE — встановити режим сумісності для браузера, забезпечуючи коректне відображення сторінки. Без DOCTYPE браузери можуть перейти в режим сумісності, що може призвести до некоректного відображення сторінки через старіші правила рендерингу.

2. Як правильно використовувати HTML-коментарі?

HTML-коментарі дозволяють залишати в коді примітки, які не відображаються на веб-сторінці. Вони починаються з <!-- і закінчуються -->. Коментарі можуть використовуватися для пояснення коду, відключення частини коду під час налагодження або залишення нагадувань. Наприклад:

 <!-- Це коментар, який не відображається на сторінці -->
<p>Цей текст буде видно користувачам</p>

3. Що таке метадані в HTML і як вони задаються?

Метадані в HTML надають інформацію про сам документ, таку як його автор, опис, ключові слова, налаштування символів тощо. Метадані задаються всередині тегу <head>. Наприклад:

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Опис сторінки">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="Ім'я автора">
    <title>Назва сторінки</title>
</head>

4. Яка різниця між id та class атрибутами?

Атрибути id та class використовуються для призначення ідентифікаторів та класів HTML-елементам:

• id: Унікальний ідентифікатор для елемента на сторінці. Використовується для стилізації CSS та маніпуляцій JavaScript. Кожен id повинен бути унікальним в межах документа.
• <div id="uniqueElement">...</div>
• class: Призначає один або кілька класів для елемента. Використовується для стилізації та JavaScript. Один елемент може мати кілька класів, і один клас може бути застосований до багатьох елементів.
• <div class="commonClass anotherClass">...</div>

5. Що таке атрибути data-* і як їх використовувати?

Атрибут data-* використовується для зберігання настроюваних даних, закритих для сторінки чи програми. Атрибут data-* дає нам можливість вбудовувати власні атрибути даних у всі елементи HTML. Вони є частиною специфікації HTML5 і можуть використовуватися для зберігання даних, які можна використовувати в JavaScript. Наприклад:

<ul>
  <li data-animal-type="bird">Owl</li>
  <li data-animal-type="fish">Salmon</li>
  <li data-animal-type="spider">Tarantula</li>
</ul>

Ці атрибути доступні в JavaScript через dataset:

const userId = document.querySelector('div').dataset.userId;

6. Яка різниця між тегами <b> і <strong>, <i> і <em>?

• <b> і <strong>: Обидва теги роблять текст жирним, але мають різне семантичне значення. <b> використовується для стилізації тексту без особливого значення, тоді як <strong> підкреслює важливість або вагомість тексту. <b>Цей текст просто жирний</b> <strong>Цей текст важливий</strong>
• <i> і <em>: Обидва теги роблять текст курсивом, але також мають різне семантичне значення. <i> використовується для стилізації тексту без особливого значення, тоді як <em> надає тексту наголос або акцент. <i>Цей текст просто курсивний</i> <em>Цей текст виділений</em>

7. Що таке iframe і як його використовувати?

<iframe> (inline frame) — це HTML-тег, який дозволяє вбудовувати інший HTML-документ всередину поточної сторінки. Він часто використовується для вбудовування відео, карт або інших веб-сторінок.

 <iframe src="https://www.example.com" width="600" height="400"></iframe>

Властивості src, width, і height задають URL вбудованого документа і його розміри.

8. Які є способи включення скриптів в HTML-документ?

Існує кілька способів включення JavaScript у HTML-документ:

• Вбудований JavaScript у <script> тегу в межах HTML-документа: <script> alert('Hello, world!'); </script>
• Зовнішній JavaScript через посилання на зовнішній файл: <script src="script.js"></script>
• Атрибут on* для вбудовування обробників подій у HTML-елементи: <button onclick="alert('Clicked!')">Click me</button>

9. Що таке прогресивне покращення та граціозна деградація в контексті веб-розробки?

• Прогресивне покращення (progressive enhancement): Підхід до веб-розробки, що фокусується на забезпеченні базового функціоналу для всіх користувачів, а потім додає покращені функції для тих, хто має доступ до більш сучасних браузерів або швидшого з’єднання.
• Граціозна деградація (graceful degradation): Підхід, коли веб-розробники створюють повнофункціональні веб-сайти для сучасних браузерів, а потім забезпечують прийнятний досвід для старіших або менш потужних браузерів.
  • Приклад прогресивного покращення: <img src="image.jpg" alt="Image description"> <noscript>Зображення недоступне без JavaScript</noscript>
  • Приклад граціозної деградації: <div class="fancy-animation">Контент</div> <style> .fancy-animation { animation: fadeIn 2s; } </style>

10. Що таке microdata і як їх використовувати для структурованих даних?

Microdata — це специфікація HTML, яка дозволяє вкладати структуровані дані безпосередньо в HTML-код за допомогою набору атрибутів. Це допомагає пошуковим системам краще розуміти зміст сторінки та покращує SEO.

Приклад використання microdata:

<div itemscope itemtype="https://schema.org/SoftwareApplication">
  <span itemprop="name">Angry Birds</span> - REQUIRES
  <span itemprop="operatingSystem">ANDROID</span><br />
  <link
    itemprop="applicationCategory"
    href="https://schema.org/SoftwareApplication" />

  <div
    itemprop="aggregateRating"
    itemscope
    itemtype="https://schema.org/AggregateRating">
    RATING:
    <span itemprop="ratingValue">4.6</span> (
    <span itemprop="ratingCount">8864</span> ratings )
  </div>

  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    Price: $<span itemprop="price">1.00</span>
    <meta itemprop="priceCurrency" content="USD" />
  </div>
</div>

Тут використані атрибути itemscope, itemtype, і itemprop, які визначають тип даних та їх властивості відповідно до стандарту Schema.org. Всі види структурованих даних доступних на Schema.org, можна подивитись на офіційному сайті

Додаткові питання з CSS

1. Яка різниця між абсолютним і відносним позиціонуванням?

Відносне позиціонування (position: relative) дозволяє елементу зберігати своє місце в нормальному потоці документа, але дає можливість зміщувати його від початкової позиції за допомогою властивостей top, right, bottom, left. Це зміщення не впливає на розташування сусідніх елементів.

Абсолютне позиціонування (position: absolute) виводить елемент з нормального потоку документа і позиціонує його відносно найближчого батьківського елемента з позиціонуванням, відмінним від static (або відносно html/body, якщо такого немає). Елемент з position: absolute не займає місце в макеті і може бути переміщений в будь-яке місце всередині батьківського контейнера.

2. Що таке z-index і як він працює?

z-index — це властивість CSS, яка визначає порядок накладання елементів по осі Z (глибина). Елементи з більшим значенням z-index будуть відображатися поверх елементів з меншим значенням. Важливо, щоб елементи, до яких застосовується z-index, мали позиціонування відмінне від static (тобто, relative, absolute, fixed, або sticky). Якщо z-index не визначений, елементи з позиціонуванням static розташовуються відповідно до нормального потоку документа.

3. Як зробити елемент невидимим, але доступним для екранних рідерів?

Щоб зробити елемент невидимим для візуального відображення, але доступним для екранних рідерів, можна використовувати CSS властивість opacity з значенням 0 і властивість pointer-events з значенням none:

 .hidden-accessible {
    opacity: 0;
    pointer-events: none;
}

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

4. Що таке специфічність CSS і як вона працює?

Специфічність визначає, які стилі застосовуються до елемента, коли кілька правил CSS застосовуються до одного елемента. Вона обчислюється на основі кількості і типу селекторів у правилі:

• Inline стиль: 1000 балів
• ID селектори: 100 балів
• Класи, атрибути, псевдокласи: 10 балів
• Тегові селектори і псевдоелементи: 1 бал

Правила з вищим значенням специфічності переважають над правилами з нижчим значенням специфічності. Наприклад, правило з селектором #id перевизначить правило з класом .class.

5. Як працює каскадність у CSS?

Каскадність у CSS — це принцип, за яким стилі застосовуються до елементів на основі порядку і специфічності правил. Коли кілька правил застосовуються до одного елемента, CSS використовує наступні критерії для вирішення, які стилі застосовувати:

1. Специфічність: Вища специфічність правила переважає.
2. Порядок правил: Якщо специфічність однакова, правило, яке з’являється пізніше в стилях, переважає.
3. Імпортовані стилі: Стилі, імпортовані з інших файлів, мають менший пріоритет, якщо не використовують вище специфічність.

6. Як використовувати псевдокласи?

:nth-child(n) дозволяє вибрати елементи на основі їх порядкового номера серед батьківських елементів. n може бути конкретним числом, виразом odd (непарний) або even (парний):

 li:nth-child(2) {
    color: red;
}

:nth-of-type(n) вибирає елементи на основі їх порядкового номера серед елементів одного типу в межах батьківського елемента:

 p:nth-of-type(2) {
    color: blue;
}

7. Що таке CSS-перемішування (CSS blending modes)?

CSS-перемішування дозволяє комбінувати кольори між різними елементами або між фоном і текстом за допомогою властивості mix-blend-mode. Ця властивість контролює, як кольори одного елемента змішуються з кольорами фону або іншими елементами.

Приклад:

 .overlay {
    mix-blend-mode: multiply;
}

У цьому прикладі multiply змішує кольори елемента з кольорами фону, створюючи ефект затемнення.

8. Як зробити адаптивні зображення за допомогою CSS?

Для адаптивних зображень можна використовувати властивість max-width разом з width, щоб зображення автоматично змінювало свій розмір відповідно до розміру контейнера:

 img {
    max-width: 100%;
    height: auto;
}

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

9. Що таке box-sizing і як він впливає на розміри елементів?

box-sizing визначає, як розраховуються ширина і висота елементів. Є два основних значення:

• content-box (значення за замовчуванням): Розміри (ширина і висота) визначаються лише вмістом. Додавання відступів (padding) і рамок (border) не враховується в цих розмірах, вони додаються до загальних розмірів.
• border-box: Розміри (ширина і висота) включають в себе вміст, відступи і рамки. Це робить управління розмірами елементів простішим, оскільки вказані розміри вже враховують всі ці компоненти.

 * {
    box-sizing: border-box;
}

10. Яка різниця між display: none та visibility: hidden?

• display: none: Елемент не відображається на сторінці і не займає місце в макеті. Це означає, що його простір у документі відсутній, і він не впливає на розташування інших елементів.
• visibility: hidden: Елемент залишається на сторінці, але його не видно. Його місце в макеті зберігається, але він не відображається. Це може бути корисно, коли потрібно зберегти простір, який елемент займає, але приховати його вміст.

 .hidden {
    display: none;
}

.invisible {
    visibility: hidden;
}

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

Питання по веб-доступності (Web Accessibility)

Що таке веб-доступність (web accessibility) і чому вона важлива?

Веб-доступність (web accessibility) – це практика створення веб-сайтів і додатків, які можуть бути використані всіма людьми, включаючи тих, хто має різні обмеження, такі як зниження зору, слуху, моторики чи когнітивні труднощі. Вона важлива, оскільки забезпечує рівний доступ до інформації та послуг в Інтернеті для всіх користувачів. Це також може допомогти покращити загальну зручність сайту для всіх, не лише для людей з обмеженими можливостями.

Які існують стандартні гайдлайни для веб-доступності (наприклад, WCAG)?

Основним стандартом для веб-доступності є Веб-контентні гайдлайни доступності (WCAG) розроблені W3C. WCAG надає рекомендації для покращення доступності веб-контенту і включає три рівні відповідності: A (основний рівень), AA (середній рівень) та AAA (вищий рівень). Гайдлайни охоплюють чотири основні принципи: Перцептивність (Content must be perceivable), Операбельність (Content must be operable), Зрозумілість (Content must be understandable), і Стійкість (Content must be robust). Виконання цих рекомендацій допомагає забезпечити доступність сайту для максимальної кількості користувачів.

Що таке ARIA і як вона використовується?

ARIA (Accessible Rich Internet Applications) – це набір атрибутів, який дозволяє покращити доступність веб-контенту, особливо для динамічних і складних інтерфейсів, таких як веб-додатки. ARIA дозволяє додавати додаткову семантику та інформацію, яка не може бути надана стандартними HTML-елементами. Вона допомагає екранним рідерам та іншим допоміжним технологіям зрозуміти функціональність і структуру елементів на сторінці.

Які атрибути ARIA є найбільш поширеними і як їх застосовувати?

Найбільш поширені атрибути ARIA включають:

• aria-label: Надає текстовий опис для елементів, які не мають видимого тексту. <button aria-label="Close">X</button>
• aria-labelledby: Вказує на елемент, який надає опис для іншого елемента. <h2 id="section1">Section 1</h2> <div aria-labelledby="section1">Content for section 1</div>
• aria-describedby: Вказує на елемент, який надає додаткову інформацію або пояснення. <input type="text" aria-describedby="info"> <div id="info">Additional information about the input</div>
• aria-live: Інформує про оновлення динамічного контенту. <div aria-live="polite">Loading...</div>

Як забезпечити доступність форм для людей з обмеженими можливостями?

Для забезпечення доступності форм:

1. Використовуйте чіткі та зрозумілі мітки (<label>) для всіх полів форми. <label for="name">Name:</label> <input type="text" id="name" name="name">
2. Вказуйте повідомлення про помилки та їх опис. <span id="error" role="alert">This field is required.</span>
3. Забезпечте можливість навігації по формі за допомогою клавіатури, і переконайтеся, що елементи управління доступні за допомогою табуляції.
4. Використовуйте атрибути ARIA, такі як aria-required для обов’язкових полів та aria-invalid для помилок валідації. <input type="text" aria-required="true">

Як створити доступну навігацію для екранних рідерів?

1. Використовуйте семантичні HTML-елементи, такі як <nav> для навігаційних меню. <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> </ul> </nav>
2. Забезпечте чітку структуру меню з відповідними заголовками та підменю, використовуючи атрибути ARIA, такі як aria-expanded для розширювальних елементів. <button aria-expanded="false" aria-controls="submenu">Menu</button> <ul id="submenu" role="menu"> <li><a href="#item1">Item 1</a></li> </ul>
3. Переконайтеся, що всі посилання і кнопки мають чіткий і зрозумілий текст, який описує їх функцію.

Що таке клавіатурна доступність і як її забезпечити?

Клавіатурна доступність означає, що всі елементи сайту, включаючи форми, кнопки та меню, повинні бути доступні для навігації та взаємодії за допомогою клавіатури. Для забезпечення клавіатурної доступності:

1. Переконайтеся, що всі інтерактивні елементи мають відповідні фокуси (наприклад, tabindex). <button tabindex="0">Click me</button>
2. Використовуйте семантичні HTML-елементи, які за замовчуванням мають фокус, такі як <button>, <a>, <input>, і не використовуйте tabindex для керування фокусом без потреби.
3. Забезпечте можливість взаємодії з усіма елементами без необхідності миші, і перевірте, що функціональність сайту доступна через клавіатурні комбінації.

Як використовувати семантичні HTML-елементи для поліпшення доступності?

Семантичні HTML-елементи допомагають забезпечити правильну структуру документа, що полегшує доступність для користувачів та допоміжних технологій:

1. Використовуйте елементи <header>, <nav>, <main>, <section>, <article>, <footer>, щоб визначити різні секції вашого документа, що робить його зрозумілішим для екранних рідерів.
2. Застосовуйте елементи списків (<ul>, <ol>, <li>) для структурування інформації, такої як навігаційні меню.
3. Використовуйте заголовки <h1>, <h2>, <h3> і т.д. для створення ієрархії інформації, що допомагає користувачам орієнтуватися в контенті.

Як забезпечити контрастність кольорів для користувачів з порушеннями зору?

1. Дотримуйтеся стандартів контрастності, таких як WCAG, які рекомендують мінімальний контраст між текстом і фоном для забезпечення видимості. Рекомендується контрастність не менше 4.5:1 для основного тексту і 3:1 для великих текстів.
2. Використовуйте інструменти для перевірки контрастності, такі як Colour Contrast Analyzer або інші онлайн-інструменти, щоб перевірити, чи відповідають ваші кольори вимогам контрастності.
3. Дайте користувачам можливість змінювати колірну схему або забезпечити варіанти темного/світлого режиму, щоб вони могли вибрати найбільш зручний для себе варіант.

Які інструменти можна використовувати для тестування доступності веб-сайтів?

1. WAVE (Web Accessibility Evaluation Tool): Онлайн-інструмент для перевірки доступності, який надає звіти про потенційні проблеми.
   • WAVE
2. Lighthouse: Інструмент від Google, який входить до складу інструмент

Питання по пошуковій оптимізації (SEO)

Що таке SEO і чому це важливо для веб-сайтів?

SEO (Search Engine Optimization) — це процес оптимізації веб-сайтів для покращення їх видимості в пошукових системах, таких як Google. Основна мета SEO — підвищити рейтинг сторінок у результатах пошуку, що, в свою чергу, збільшує органічний трафік на сайт. Це важливо, оскільки високий рейтинг у пошукових системах забезпечує більше відвідувачів, що може призвести до збільшення конверсій, продажів та загального успіху бізнесу. Правильна оптимізація допомагає сайту бути помітнішим для потенційних клієнтів, що шукають пов’язані продукти чи послуги.

Які HTML-елементи найбільше впливають на SEO?

Основні HTML-елементи, які впливають на SEO, включають:

1. Заголовки (Heading Tags): Теги <h1>, <h2>, <h3>, і так далі, структурують контент і допомагають пошуковим системам зрозуміти основні теми сторінки.
2. Мета-теги: Включаючи <meta name="description"> і <meta name="keywords">, які надають інформацію про вміст сторінки.
3. Атрибути alt для зображень: Атрибут alt описує зображення, що робить його доступнішим для пошукових систем і користувачів з обмеженнями.
4. Посилання (Anchor Tags): Теги <a> використовуються для створення внутрішніх і зовнішніх посилань, що допомагає в навігації та передачі авторитету між сторінками.

Що таке мета-опис (meta description) і як його правильно написати?

Мета-опис — це короткий текстовий фрагмент, який описує вміст веб-сторінки і відображається в результатах пошуку під заголовком. Він не впливає безпосередньо на SEO, але є важливим для залучення користувачів до натискання на посилання. Хороший мета-опис має бути:

• До 160 символів: Щоб не обрізатися в результатах пошуку.
• Чіткий і привабливий: Містити основні ключові слова та бути достатньо переконливим, щоб зацікавити користувача.
• Орієнтований на користувача: Вказувати, що конкретно пропонує сторінка та які вигоди може отримати відвідувач.

Як правильно використовувати заголовки (<h1>, <h2>, і т.д.) для SEO?

Заголовки (<h1>, <h2>, <h3>, і так далі) структурюють контент і допомагають пошуковим системам зрозуміти його ієрархію та тематику. Для правильного використання заголовків:

• <h1>: Використовується для основного заголовка сторінки і повинен містити основні ключові слова. На сторінці має бути лише один <h1>.
• <h2>, <h3>, тощо: Використовуються для підзаголовків, які структурують контент і допомагають в організації інформації. Вони повинні підтримувати тему основного заголовка і бути логічно впорядковані.

Що таке alt-текст для зображень і як він впливає на SEO?

Атрибут alt (альтернативний текст) для зображень описує вміст зображення і використовується пошуковими системами для розуміння того, що зображено. Вплив на SEO включає:

• Покращення доступності: Допомагає користувачам з обмеженнями (наприклад, з екранними зчитувачами) зрозуміти, що зображено.
• Покращення SEO: Описує контент для пошукових систем, що може допомогти в покращенні ранжування зображень у результатах пошуку.
• Контекст: Використовуйте ключові слова в alt-тексті, але уникайте переоптимізації і намагайтеся бути максимально описовим.

Яка різниця між внутрішніми та зовнішніми посиланнями і як вони впливають на SEO?

• Внутрішні посилання: Це посилання, які ведуть на інші сторінки того ж сайту. Вони допомагають пошуковим системам зрозуміти структуру сайту і полегшують навігацію для користувачів. Внутрішні посилання можуть покращити видимість сторінок і розподілити “вагу” сайту.
• Зовнішні посилання: Це посилання, які ведуть на інші веб-сайти. Вони можуть підвищити авторитет сторінки (якщо ссилаються на авторитетні ресурси) і вплинути на ранжування сайту. Зовнішні посилання, що ведуть на ваш сайт, можуть підвищити його довіру та авторитет у пошукових системах.

Як швидкість завантаження сторінки впливає на SEO і як її покращити?

Швидкість завантаження сторінки є важливим фактором для SEO, оскільки пошукові системи враховують її як частину ранжування. Повільні сайти можуть погіршити користувацький досвід і знизити рейтинг у пошукових системах. Для покращення швидкості завантаження:

• Оптимізуйте зображення: Зменште розміри зображень без втрати якості.
• Зменште обсяг коду: Видаліть непотрібний CSS, JavaScript та HTML.
• Використовуйте кешування: Дозволяє зберігати частини сайту у кеші для швидшого завантаження при повторних відвідинах.
• Використовуйте мережі доставки контенту (CDN): Для прискорення завантаження ресурсів з серверів, близьких до користувача.

Що таке канонічний URL і як його використовувати?

Канонічний URL — це тег <link rel="canonical">, який вказує пошуковим системам на основну версію сторінки, якщо є кілька версій з подібним або дубльованим контентом. Це допомагає уникнути проблем з дубльованим контентом і зберігає SEO-вагу однієї сторінки.

Як використовувати:

<link rel="canonical" href="https://example.com/original-page">

Цей тег розміщується в <head> розділі HTML-документа і вказує, що вміст цієї сторінки є канонічним.

Як забезпечити SEO-дружній адаптивний дизайн?

Адаптивний дизайн гарантує, що сайт виглядає та функціонує добре на всіх пристроях. Для забезпечення SEO-дружнього адаптивного дизайну:

• Використовуйте медіа-запити: Для адаптації стилів до різних розмірів екранів.
• Оптимізуйте зображення: Відповідно до розмірів екрана, щоб зменшити час завантаження.
• Перевірте мобільну зручність: Переконайтеся, що сайт зручний для користування на мобільних пристроях.

Що таке XML sitemap і як він використовується для SEO?

XML sitemap — це файл, що містить список всіх важливих сторінок на вашому сайті, щоб пошукові системи могли їх знайти і проіндексувати.

Як використовувати:

• Створіть файл sitemap.xml: Використовуйте інструменти або плагіни для генерації XML-карти сайту.
• Додайте файл у кореневу директорію сайту: Щоб він був доступний для пошукових систем.
• Подавайте sitemap у пошукові системи: Використовуйте інструменти для веб-майстрів (Google Search Console, Bing Webmaster Tools) для подачі карти сайту.

XML sitemap допомагає покращити індексацію сайту і забезпечує, щоб пошукові системи могли знаходити всі важливі сторінки, навіть якщо сайт має