├── .DS_Store
├── .github
    ├── CONTRIBUTING.md
    ├── FUNDING.yml
    └── PULL_REQUEST_TEMPLATE.md
├── CODE_OF_CONDUCT.md
├── LICENSE.txt
├── README.md
├── SECURITY.md
└── assets
    ├── code.png
    └── css.svg


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevLoversTeam/css-interview-questions/eb2413582b9b3cb19ddb967593fe9a16a446cdbf/.DS_Store


--------------------------------------------------------------------------------
/.github/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # 🧠 Як зробити внесок у Frontend Lovers
 2 | 
 3 | Дякуємо, що хочете зробити внесок у наш проєкт! Нижче описано кілька простих правил, які допоможуть вам підготувати якісний pull request.
 4 | 
 5 | ## 🔧 Формат доповнення
 6 | 
 7 | - Кожне питання повинне бути оформлене в HTML-елементі `<details>` зі структурою:
 8 | 
 9 | ![Code](../assets/code.png)
10 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # FUNDING.yml
2 | # Налаштування можливостей підтримки проєкту
3 | 
4 | github: ViktorSvertoka
5 | buy_me_a_coffee: viktor.svertoka
6 | 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!-- Дякуємо за ваш внесок у Frontend Lovers 🎉 -->
 2 | 
 3 | <!-- Ці коментарі є лише підказкою — вони не будуть видимі у створеному pull request -->
 4 | 
 5 | Чекліст:
 6 | 
 7 | - [ ] Я ознайомився з [CONTRIBUTING.md](CONTRIBUTING.md) і дотримувався вказівок.
 8 | - [ ] Моє доповнення не дублює вже існуюче питання чи відповідь.
 9 | - [ ] Я додав(ла) нове запитання у відповідному форматі (див. існуючі приклади).
10 | - [ ] Я додав(ла) нове запитання **в кінець файлу** з **наступним за порядком номером**.
11 | 
12 | ---
13 | 
14 | <!-- Будь ласка, коротко опишіть, що саме ви додаєте або змінюєте, і чому це варте включення. -->
15 | 
16 | ...
17 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
  1 | # Contributor Covenant Code of Conduct
  2 | 
  3 | ## Our Pledge
  4 | 
  5 | We as members, contributors, and leaders pledge to make participation in our
  6 | community a harassment-free experience for everyone, regardless of age, body
  7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
  8 | identity and expression, level of experience, education, socio-economic status,
  9 | nationality, personal appearance, race, religion, or sexual identity
 10 | and orientation.
 11 | 
 12 | We pledge to act and interact in ways that contribute to an open, welcoming,
 13 | diverse, inclusive, and healthy community.
 14 | 
 15 | ## Our Standards
 16 | 
 17 | Examples of behavior that contributes to a positive environment for our
 18 | community include:
 19 | 
 20 | - Demonstrating empathy and kindness toward other people
 21 | - Being respectful of differing opinions, viewpoints, and experiences
 22 | - Giving and gracefully accepting constructive feedback
 23 | - Accepting responsibility and apologizing to those affected by our mistakes,
 24 |   and learning from the experience
 25 | - Focusing on what is best not just for us as individuals, but for the
 26 |   overall community
 27 | 
 28 | Examples of unacceptable behavior include:
 29 | 
 30 | - The use of sexualized language or imagery, and sexual attention or
 31 |   advances of any kind
 32 | - Trolling, insulting or derogatory comments, and personal or political attacks
 33 | - Public or private harassment
 34 | - Publishing others' private information, such as a physical or email
 35 |   address, without their explicit permission
 36 | - Other conduct which could reasonably be considered inappropriate in a
 37 |   professional setting
 38 | 
 39 | ## Enforcement Responsibilities
 40 | 
 41 | Community leaders are responsible for clarifying and enforcing our standards of
 42 | acceptable behavior and will take appropriate and fair corrective action in
 43 | response to any behavior that they deem inappropriate, threatening, offensive,
 44 | or harmful.
 45 | 
 46 | Community leaders have the right and responsibility to remove, edit, or reject
 47 | comments, commits, code, wiki edits, issues, and other contributions that are
 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
 49 | decisions when appropriate.
 50 | 
 51 | ## Scope
 52 | 
 53 | This Code of Conduct applies within all community spaces, and also applies when
 54 | an individual is officially representing the community in public spaces.
 55 | Examples of representing our community include using an official e-mail address,
 56 | posting via an official social media account, or acting as an appointed
 57 | representative at an online or offline event.
 58 | 
 59 | ## Enforcement
 60 | 
 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
 62 | reported to the community leaders responsible for enforcement at
 63 | [frontendlovers@gmail.com](mailto:frontendlovers@gmail.com).
 64 | All complaints will be reviewed and investigated promptly and fairly.
 65 | 
 66 | All community leaders are obligated to respect the privacy and security of the
 67 | reporter of any incident.
 68 | 
 69 | ## Enforcement Guidelines
 70 | 
 71 | Community leaders will follow these Community Impact Guidelines in determining
 72 | the consequences for any action they deem in violation of this Code of Conduct:
 73 | 
 74 | ### 1. Correction
 75 | 
 76 | **Community Impact**: Use of inappropriate language or other behavior deemed
 77 | unprofessional or unwelcome in the community.
 78 | 
 79 | **Consequence**: A private, written warning from community leaders, providing
 80 | clarity around the nature of the violation and an explanation of why the
 81 | behavior was inappropriate. A public apology may be requested.
 82 | 
 83 | ### 2. Warning
 84 | 
 85 | **Community Impact**: A violation through a single incident or series
 86 | of actions.
 87 | 
 88 | **Consequence**: A warning with consequences for continued behavior. No
 89 | interaction with the people involved, including unsolicited interaction with
 90 | those enforcing the Code of Conduct, for a specified period of time. This
 91 | includes avoiding interactions in community spaces as well as external channels
 92 | like social media. Violating these terms may lead to a temporary or
 93 | permanent ban.
 94 | 
 95 | ### 3. Temporary Ban
 96 | 
 97 | **Community Impact**: A serious violation of community standards, including
 98 | sustained inappropriate behavior.
 99 | 
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 | 
106 | ### 4. Permanent Ban
107 | 
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior, harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 | 
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 | 
115 | ## Attribution
116 | 
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 | 
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 | 
124 | [homepage]: https://www.contributor-covenant.org
125 | 
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
129 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Frontend Lovers
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
   1 | <h1>
   2 |   CSS <img src="./assets/css.svg" width="40" height="40" alt="CSS logo"/>
   3 | </h1>
   4 | 
   5 | <h2>Найпопулярніші запитання та відповіді на співбесіді з CSS</h2>
   6 | 
   7 | <details>
   8 | <summary>1. Що таке CSS? І навіщо він використовується?</summary>
   9 | 
  10 | #### CSS
  11 | 
  12 | - CSS (Cascading Style Sheets) — це мова стилів для опису вигляду веб-сторінок. Використовується для розмітки елементів на сторінці, таких як шрифти, кольори, відступи, позиціонування та інші візуальні аспекти. CSS дозволяє відокремити контент (HTML) від стилів, що полегшує підтримку та зміну вигляду сайту.
  13 | 
  14 | </details>
  15 | 
  16 | <details>
  17 | <summary>2. Що таке каскадність у CSS??</summary>
  18 | 
  19 | #### CSS
  20 | 
  21 | - Каскадність у CSS — це механізм, який визначає, як застосовуються стилі до елементів веб-сторінки, якщо для одного елемента задано кілька різних стилів із різних джерел або рівнів. Вона дозволяє браузеру вирішити, які стилі будуть мати вищий пріоритет і застосовуватися в кінцевому результаті.
  22 | </details>
  23 | 
  24 | <details>
  25 | <summary>3. Які є способи підключення CSS до HTML-документу?</summary>
  26 | 
  27 | #### CSS
  28 | 
  29 | - Вбудовані стилі (inline) — напряму в HTML-тегах через атрибут `style`.
  30 | - Внутрішні стилі — у секції `<style>...</style> ` всередині HTML-документа.
  31 | - Зовнішні стилі — у CSS-файлах, підключених через `<link rel=”stylesheet” href=”styles.css”>` або `@import`.
  32 | 
  33 | </details>
  34 | 
  35 | <details>
  36 | <summary>4. Що таке CSS-селектори? Наведіть приклади.</summary>
  37 | 
  38 | #### CSS
  39 | 
  40 | - CSS-селектори використовуються для вибору HTML-елементів, до яких застосовуються стилі.
  41 | 
  42 | - **Приклади:**
  43 | 
  44 |   - За тегом: `h1 { color: red; }`
  45 |   - За класом: `.button { background: blue; }`
  46 |   - За ID: `#header { padding: 10px; }`
  47 | 
  48 | - **Комбіновані:**
  49 | 
  50 |   - Дочірні: `ul > li { margin: 5px; }`
  51 |   - Нащадки: `div p { font-size: 14px; }`
  52 |   - Атрибути: `[type="text"] { border: 1px solid gray; }`
  53 | 
  54 | - **Псевдокласи:**
  55 | 
  56 |   - `a:hover { color: green; }`
  57 |   - `:nth-child(2) { font-weight: bold; }`
  58 | 
  59 | - **Псевдоелементи:**
  60 | 
  61 |   - `p::first-line { text-transform: uppercase; }`
  62 | 
  63 | </details>
  64 | 
  65 | <details>
  66 | <summary>5. Як працює наслідування в CSS?</summary>
  67 | 
  68 | #### CSS
  69 | 
  70 | - Наслідування в CSS дозволяє деяким властивостям автоматично передаватися від батьківського елемента до дочірніх.
  71 | 
  72 | - **Особливості:**
  73 | 
  74 | 1. Автоматично наслідуються тільки текстові та декоративні властивості:
  75 | 
  76 | - `color`, `font`, `visibility`, `line-height` тощо.
  77 | 
  78 | 2. Не наслідуються автоматично властивості, що впливають на коробку (box model):
  79 | 
  80 | - `margin`, `padding`, `border`, `width`, `heigh`t тощо.
  81 | 
  82 | - **Контроль наслідування:**
  83 | 
  84 | 1. **Примусове наслідування:** використовуйте значення inherit.
  85 | 
  86 |    ```css
  87 |    p {
  88 |      border: inherit;
  89 |    }
  90 |    ```
  91 | 
  92 | 2. **Відміна наслідування:** значення initial скидає властивість до початкового (згідно стандарту).
  93 | 
  94 |    ```css
  95 |    p {
  96 |      color: initial;
  97 |    }
  98 |    ```
  99 | 
 100 | </details>
 101 | 
 102 | <details>
 103 | 
 104 | <summary>6. Що таке «модель коробки» (box model) в CSS і як її можна змінити?</summary>
 105 | 
 106 | #### CSS
 107 | 
 108 | - «Модель коробки» (box model) визначає, як розміри елемента розраховуються в CSS. Вона складається з:
 109 | 
 110 |   - **Content:** Вміст елемента (текст, зображення).
 111 |   - **Padding:** Внутрішній відступ між вмістом і рамкою.
 112 |   - **Border:** Рамка навколо padding.
 113 |   - **Margin:** Зовнішній відступ між елементом і сусідніми елементами.
 114 | 
 115 | - Розрахунок ширини та висоти:
 116 | 
 117 |   - За замовчуванням:
 118 | 
 119 |   ```css
 120 |   Width/Height = Content + Padding + Border
 121 |   ```
 122 | 
 123 | - Зміна моделі коробки:
 124 | 
 125 |   - Використовуйте властивість box-sizing:
 126 | 
 127 | 1. content-box (за замовчуванням):
 128 | 
 129 | - Ширина/висота включає лише вміст. Padding і border додаються до загального розміру.
 130 | 
 131 |   ```css
 132 |   box-sizing: content-box;
 133 |   ```
 134 | 
 135 | 2. border-box:
 136 | 
 137 | - Ширина/висота включають вміст, padding і border (зручніше для макетів).
 138 | 
 139 |   ```css
 140 |   box-sizing: border-box;
 141 |   ```
 142 | 
 143 | - Приклад:
 144 | 
 145 |   ```css
 146 |   * {
 147 |     box-sizing: border-box;
 148 |   }
 149 |   ```
 150 | 
 151 |   - Це допомагає уникнути помилок у розмітці.
 152 | 
 153 | </details>
 154 | 
 155 | <details>
 156 | <summary>7. У чому різниця між margin і padding?</summary>
 157 | 
 158 | #### CSS
 159 | 
 160 | - Різниця між margin і padding:
 161 | 
 162 | 1. Розташування:
 163 | 
 164 |    - `margin` створює зовнішній відступ між елементом і сусідніми елементами.
 165 |    - `padding` створює внутрішній відступ між вмістом елемента і його рамкою (border).
 166 | 
 167 | 2. Вплив на фон:
 168 | 
 169 |    - `margin` не впливає на фон елемента; простір залишається прозорим.
 170 |    - `padding` є частиною елемента, тому фон розтягується на область padding.
 171 | 
 172 | 3. Колізія (margin collapsing):
 173 | 
 174 |    - `margin` сусідніх блоків може "зливатися" в один (найбільший).
 175 |    - `padding` не зливається; завжди додається до внутрішнього простору.
 176 | 
 177 | - Приклад:
 178 | 
 179 |   ```css
 180 |   div {
 181 |     margin: 20px; /* Відступ від інших елементів */
 182 |     padding: 20px; /* Відступ між вмістом і рамкою */
 183 |     background-color: lightblue;
 184 |   }
 185 |   ```
 186 | 
 187 | </details>
 188 | 
 189 | <details>
 190 | <summary>8. Що таке Flexbox?</summary>
 191 | 
 192 | #### CSS
 193 | 
 194 | - Flexbox (Flexible Box Layout) — це CSS-модель розташування елементів, яка забезпечує гнучке вирівнювання та розподіл простору в межах контейнера, навіть якщо розміри елементів невідомі або змінюються.
 195 | 
 196 | - **Основні поняття:**
 197 | 
 198 |   - **Flex-контейнер:** Батьківський елемент, на який застосовується `display: flex;`.
 199 |   - **Flex-елементи:** Дочірні елементи flex-контейнера.
 200 | 
 201 | - **Основні властивості Flexbox:**
 202 | 
 203 | 1. Для контейнера:
 204 | 
 205 |    - `flex-direction`: Напрямок розташування елементів (`row`, `row-reverse`, `column`, `column-reverse`).
 206 |    - `justify-content`: Горизонтальне вирівнювання елементів (`flex-start`, `center`, `space-between`, `space-around`, `space-evenly`).
 207 |    - `align-items`: Вертикальне вирівнювання елементів (`stretch`, `center`, `flex-start`, `flex-end`, `baseline`).
 208 |    - `align-content`: Вирівнювання рядків у багаторядковому контейнері (`stretch`, `center`, `space-between`).
 209 |    - `flex-wrap`: Дозволяє елементам переноситися (`nowrap`, `wrap`, `wrap-reverse`).
 210 | 
 211 | 2. Для елементів:
 212 | 
 213 |    - `flex-grow`: Як елемент збільшується вільним простором.
 214 |    - `flex-shrink`: Як елемент зменшується при нестачі простору.
 215 |    - `flex-basis`: Базовий розмір елемента перед розподілом простору.
 216 |    - `align-self`: Вирівнювання конкретного елемента всередині контейнера.
 217 | 
 218 | - Приклад:
 219 | 
 220 |   ```css
 221 |   .container {
 222 |     display: flex;
 223 |     justify-content: center;
 224 |     align-items: center;
 225 |   }
 226 | 
 227 |   .item {
 228 |     flex: 1; /* Рівний розподіл простору */
 229 |   }
 230 |   ```
 231 | 
 232 | </details>
 233 | 
 234 | <details>
 235 | <summary>9. Що таке Grid?</summary>
 236 | 
 237 | #### CSS
 238 | 
 239 | - CSS Grid — це потужна система розмітки, яка дозволяє створювати двовимірні сітки для розташування елементів як по горизонталі, так і по вертикалі.
 240 | 
 241 | - **Основні поняття:**
 242 | 
 243 |   - **Grid-контейнер:** Елемент, на який застосовується `display: grid;`.
 244 |   - **Grid-елементи:** Дочірні елементи grid-контейнера.
 245 |   - **Лінії сітки:** Вертикальні та горизонтальні межі, що ділять сітку на осередки.
 246 |   - **Треки:** Рядки (`rows`) і колонки (`columns`).
 247 |   - **Області:** Прямокутні зони, об'єднані з кількох осередків.
 248 | 
 249 | - **Основні властивості Grid:**
 250 | 
 251 | 1. Для контейнера:
 252 | 
 253 | - `grid-template-rows`, `grid-template-columns`: Задають кількість і розміри рядків та колонок.
 254 | - `grid-template-areas`: Іменовані області для організації елементів.
 255 | - `gap` (або `row-gap/column-gap`): Відступи між рядками та колонками.
 256 | - `justify-items`, `align-items`: Вирівнювання елементів у клітинках.
 257 | - `justify-content`, `align-content`: Вирівнювання всієї сітки в контейнері.
 258 | 
 259 | 2. Для елементів:
 260 | 
 261 | - `grid-column`, `grid-row`: Позиціювання по колонках і рядках.
 262 | - `grid-area`: Розміщення в іменованій області.
 263 | - `place-self`: Індивідуальне вирівнювання елемента.
 264 | 
 265 | - Приклад:
 266 | 
 267 |   ```css
 268 |   .container {
 269 |     display: grid;
 270 |     grid-template-columns: 1fr 2fr; /* Дві колонки: 1 частина та 2 частини */
 271 |     grid-template-rows: 100px auto; /* Рядок фіксованої висоти і автоматичний */
 272 |     gap: 10px;
 273 |   }
 274 | 
 275 |   .item1 {
 276 |     grid-column: 1 / 3; /* Займає дві колонки */
 277 |   }
 278 | 
 279 |   .item2 {
 280 |     grid-row: 2; /* Розташований у другому рядку */
 281 |   }
 282 |   ```
 283 | 
 284 | </details>
 285 | 
 286 | <details>
 287 | <summary>10. Що таке медіазапити та як їх використовувати?</summary>
 288 | 
 289 | #### CSS
 290 | 
 291 | - Медіазапити — це умови, які дозволяють застосовувати різні стилі в залежності від характеристик пристрою (наприклад, розміру екрану, орієнтації). Вони використовуються в CSS через правило @media.
 292 | 
 293 | - Приклад медіазапиту для адаптивного дизайну:
 294 | 
 295 |   ```css
 296 |   /* Стилі для мобільних пристроїв */
 297 |   @media (max-width: 768px) {
 298 |     body {
 299 |       background-color: lightblue;
 300 |     }
 301 |   }
 302 | 
 303 |   /* Стилі для десктопів */
 304 |   @media (min-width: 769px) {
 305 |     body {
 306 |       background-color: lightgreen;
 307 |     }
 308 |   }
 309 |   ```
 310 | 
 311 | </details>
 312 | 
 313 | <details>
 314 | <summary>11. Як можна приховати елемент за допомогою CSS?</summary>
 315 | 
 316 | #### CSS
 317 | 
 318 | - Щоб приховати елемент за допомогою CSS, можна використовувати:
 319 |   - `display: none;` — видаляє елемент з потоку документа. Він не займає місця на сторінці і з ним не можна взаємодіяти.
 320 |   - `visibility: hidden;` — елемент стає невидимим, але зберігає своє місце на сторінці.
 321 |   - `opacity: 0;` — робить елемент прозорим, але він залишається видимим і займає місце на сторінці.
 322 | 
 323 | </details>
 324 | 
 325 | <details>
 326 | <summary>12. Як можна зробити лого посередині екрана?</summary>
 327 | 
 328 | #### CSS
 329 | 
 330 | - Щоб розмістити лого посередині екрана, можна використати такі способи:
 331 | 
 332 | 1. Flexbox:
 333 | 
 334 |    ```css
 335 |    body,
 336 |    html {
 337 |      height: 100%;
 338 |      margin: 0;
 339 |      display: flex;
 340 |      justify-content: center;
 341 |      align-items: center;
 342 |    }
 343 | 
 344 |    .logo {
 345 |      /* стилі лого */
 346 |    }
 347 |    ```
 348 | 
 349 | 2. Grid:
 350 | 
 351 |    ```css
 352 |    body,
 353 |    html {
 354 |      height: 100%;
 355 |      margin: 0;
 356 |      display: grid;
 357 |      place-items: center;
 358 |    }
 359 | 
 360 |    .logo {
 361 |      /* стилі лого */
 362 |    }
 363 |    ```
 364 | 
 365 | 3. Absolute позиціювання:
 366 | 
 367 |    ```css
 368 |    body,
 369 |    html {
 370 |      height: 100%;
 371 |      margin: 0;
 372 |      position: relative;
 373 |    }
 374 | 
 375 |    .logo {
 376 |      position: absolute;
 377 |      top: 50%;
 378 |      left: 50%;
 379 |      transform: translate(-50%, -50%);
 380 |    }
 381 |    ```
 382 | 
 383 | </details>
 384 | 
 385 | <details>
 386 | <summary>13. Як розмістити хрестик для закриття справа зверху елемента?</summary>
 387 | 
 388 | #### CSS
 389 | 
 390 | - Щоб розмістити хрестик для закриття в правому верхньому куті елемента, можна використати абсолютне позиціювання:
 391 | 
 392 |   ```css
 393 |   .container {
 394 |     position: relative; /* щоб хрестик позиціонувався відносно контейнера */
 395 |   }
 396 | 
 397 |   .close-btn {
 398 |     position: absolute;
 399 |     top: 10px; /* відстань від верхнього краю */
 400 |     right: 10px; /* відстань від правого краю */
 401 |     cursor: pointer; /* щоб курсор змінювався при наведенні */
 402 |   }
 403 |   ```
 404 | 
 405 |   ```html
 406 |   <div class="container">
 407 |     <div class="close-btn">&times;</div>
 408 |     <!-- інший контент -->
 409 |   </div>
 410 |   ```
 411 | 
 412 | </details>
 413 | 
 414 | <details>
 415 | <summary>14. Як зробити останній елемент списку червоним, незалежно від довжини списку без JS?</summary>
 416 | 
 417 | #### CSS
 418 | 
 419 | - Щоб зробити останній елемент списку червоним без JavaScript, можна використати псевдоклас `:last-child:`.
 420 | - Це правило зробить останній елемент у будь-якому списку (незалежно від його довжини) червоним.
 421 | 
 422 |   ```css
 423 |   ul li:last-child {
 424 |     color: red;
 425 |   }
 426 |   ```
 427 | 
 428 | - Це правило зробить останній елемент у будь-якому списку (незалежно від його довжини) червоним.
 429 | 
 430 | </details>
 431 | 
 432 | <details>
 433 | <summary>15. Які є можливості задати колір?</summary>
 434 | 
 435 | #### CSS
 436 | 
 437 | - У CSS є кілька способів задати колір:
 438 | 
 439 | 1. Ім’я кольору:
 440 | 
 441 |    ```css
 442 |    color: red;
 443 |    ```
 444 | 
 445 | 2. Шістнадцятковий код:
 446 | 
 447 |    ```css
 448 |    color: #ff0000; /* червоний */
 449 |    ```
 450 | 
 451 | 3. RGB (Red, Green, Blue):
 452 | 
 453 |    ```css
 454 |    color: rgb(255, 0, 0); /* червоний */
 455 |    ```
 456 | 
 457 | 4. RGBA (Red, Green, Blue, Alpha):
 458 | 
 459 |    ```css
 460 |    color: rgba(255, 0, 0, 0.5); /* червоний з прозорістю */
 461 |    ```
 462 | 
 463 | 5. HSL (Hue, Saturation, Lightness):
 464 | 
 465 |    ```css
 466 |    color: hsl(0, 100%, 50%); /* червоний */
 467 |    ```
 468 | 
 469 | 6. HSLA (Hue, Saturation, Lightness, Alpha):
 470 | 
 471 |    ```css
 472 |    color: hsla(0, 100%, 50%, 0.5); /* червоний з прозорістю */
 473 |    ```
 474 | 
 475 | 7. Ключові слова прозорості:
 476 | 
 477 |    ```css
 478 |    color: transparent; /* прозорий */
 479 |    ```
 480 | 
 481 | - Ці способи дозволяють вибирати колір за різними параметрами: від прямого опису кольору до використання прозорості або відтінків.
 482 | 
 483 | </details>
 484 | 
 485 | <details>
 486 | <summary>16. Що таке z-index? Чи кожен елемент його має?</summary>
 487 | 
 488 | #### CSS
 489 | 
 490 | - `z-index` — це властивість CSS, яка визначає порядок накладання елементів по осі Z (глибина, перетин елементів). Елементи з більшим `z-index` накладаються поверх елементів з меншим значенням.
 491 | 
 492 | - **Особливості:**
 493 | 
 494 | 1. Тільки для позиційованих елементів: `z-index` працює, якщо елемент має `position`: `relative`, `absolute`, `fixed` або `sticky`. Без цього `z-index` ігнорується.
 495 | 
 496 | 2. Значення за замовчуванням: Якщо `z-index` не задано, значення за замовчуванням — `auto`. У такому випадку порядок накладання визначається порядком у DOM.
 497 | 
 498 | 3. Може бути від’ємним: Елементи з від’ємним `z-index` можуть накладатися позаду батьківських елементів.
 499 | 
 500 | - Приклад:
 501 | 
 502 |   ```css
 503 |   .div1 {
 504 |     position: relative;
 505 |     z-index: 10; /* цей елемент буде поверх */
 506 |   }
 507 | 
 508 |   .div2 {
 509 |     position: relative;
 510 |     z-index: 5; /* цей елемент буде під div1 */
 511 |   }
 512 |   ```
 513 | 
 514 | </details>
 515 | 
 516 | <details>
 517 | <summary>17. Які переваги і недоліки використання CSS-препроцесорів?</summary>
 518 | 
 519 | #### CSS
 520 | 
 521 | - **Переваги CSS-препроцесорів:**
 522 | 
 523 | 1. **Змінні:** Легко створювати глобальні змінні для кольорів, шрифтів, розмірів.
 524 | 
 525 |    ```css
 526 |    $primary-color: #3498db;
 527 | 
 528 |    body {
 529 |      color: $primary-color;
 530 |    }
 531 |    ```
 532 | 
 533 | 2. **Вкладеність:** Зручний запис стилів для вкладених елементів.
 534 | 
 535 |    ```css
 536 |    nav {
 537 |      ul {
 538 |        li {
 539 |          a {
 540 |            color: #000;
 541 |          }
 542 |        }
 543 |      }
 544 |    }
 545 |    ```
 546 | 
 547 | 3. **Міксіни:** Повторно використовувані блоки коду.
 548 | 
 549 |    ```css
 550 |    @mixin flex-center {
 551 |      display: flex;
 552 |      justify-content: center;
 553 |      align-items: center;
 554 |    }
 555 | 
 556 |    div {
 557 |      @include flex-center;
 558 |    }
 559 |    ```
 560 | 
 561 | 4. **Функції:** Обчислення прямо в стилях.
 562 | 
 563 |    ```css
 564 |    width: calc(100% - 50px);
 565 |    ```
 566 | 
 567 | 5. **Управління кодом:** Імпорт окремих файлів (`@import`), що полегшує підтримку великого проекту.
 568 | 
 569 | - **Недоліки CSS-препроцесорів:**
 570 | 
 571 | 1. **Складність налаштування:** Потрібно встановлювати додаткові інструменти (наприклад, компілятор для SCSS або LESS).
 572 | 
 573 | 2. **Продуктивність:** Велика кількість вкладеностей або міксінів може ускладнити генерований CSS і вплинути на швидкість.
 574 | 
 575 | 3. **Залежність:** Знання синтаксису препроцесора необов'язково підтримується усіма розробниками в команді.
 576 | 
 577 | 4. **Дебагінг:** Згенерований CSS може бути складніше дебажити, якщо немає source maps.
 578 | 
 579 | - Використання залежить від розміру проекту та необхідності складних стилів. Для великих проектів переваги переважують недоліки.
 580 | 
 581 | </details>
 582 | 
 583 | <details>
 584 | <summary>18. Для чого існують різні рівні заголовків, якщо розмір можна встановити стилями?</summary>
 585 | 
 586 | #### CSS
 587 | 
 588 | - Рівні заголовків (`<h1> – <h6>`) мають інше призначення, окрім визначення розміру. Їхня основна функція — структуризація контенту для семантики та доступності:
 589 | 
 590 | 1. **Семантика:** Заголовки формують ієрархію документа. Наприклад:
 591 | 
 592 | `<h1>` — головна тема сторінки.
 593 | `<h2>` — підрозділ теми `<h1>`.
 594 | `<h3>` — підрозділ `<h2>`, і так далі.
 595 | 
 596 | 2. **SEO:** Пошукові системи (Google, Bing) використовують заголовки для розуміння структури і змісту сторінки. Коректна ієрархія заголовків підвищує релевантність сторінки.
 597 | 
 598 | 3. **Доступність:** Екранні читачі для людей із порушеннями зору використовують заголовки для навігації по сторінці.
 599 | 
 600 | 4. **Стандарти:** Використання заголовків за призначенням робить код зрозумілим для інших розробників.
 601 | 
 602 | - Розмір заголовків можна стилізувати за допомогою CSS, але правильне використання тегів забезпечує краще розуміння і роботу сторінки.
 603 | 
 604 | </details>
 605 | 
 606 | <details>
 607 | <summary>19. Які є варіанти позиціонування елемента на сторінці?</summary>
 608 | 
 609 | #### CSS
 610 | 
 611 | - У CSS є кілька варіантів позиціонування елементів:
 612 | 
 613 | 1. `static` (за замовчуванням):
 614 |    Елемент розташовується в потоці документа відповідно до порядку в HTML. Немає можливості змінювати його положення через властивості top, right, bottom, left.
 615 | 
 616 | 2. `relative`:
 617 |    Елемент залишається в потоці документа, але його положення можна змінити відносно початкової позиції за допомогою top, right, bottom, left.
 618 | 
 619 | 3. `absolute`:
 620 |    Елемент вилучається з потоку і позиціонується відносно найближчого батьківського елемента з позиціюванням (relative, absolute, fixed). Якщо такого немає, то відносно всього документа.
 621 | 
 622 | 4. `fixed`:
 623 |    Елемент вилучається з потоку і закріплюється відносно вікна браузера. Його положення не змінюється при прокручуванні сторінки.
 624 | 
 625 | 5. `sticky`:
 626 |    Комбінація relative і fixed. Елемент позиціонується відносно потоку документа, поки не досягне заданого порогу (top, bottom тощо), після чого "прилипає" до цього порогу при прокручуванні.
 627 | 
 628 | 6. `inherit`, `initial`, `unset`:
 629 | 
 630 | - inherit — наслідує значення від батьківського елемента.
 631 | - initial — скидає до значення за замовчуванням (static).
 632 | - unset — застосовує inherit або initial залежно від контексту.
 633 | 
 634 | - Кожен варіант використовується залежно від завдання: від базового розташування до складного позиціонування в макетах.
 635 | 
 636 | </details>
 637 | 
 638 | <details>
 639 | <summary>20. Які бувають види display? Який використовуєте найчастіше? У чому особливість inline-block?</summary>
 640 | 
 641 | #### CSS
 642 | 
 643 | - Основні види display в CSS:
 644 | 
 645 | 1. `block`:
 646 | 
 647 |    - Елемент займає всю ширину батьківського контейнера.
 648 |    - Починається з нового рядка.
 649 |    - Можна задавати ширину, висоту, внутрішні/зовнішні відступи.
 650 |    - Приклад: `<div>`, `<p>`.
 651 | 
 652 | 2. `inline`:
 653 | 
 654 |    - Елемент розташовується в одному рядку з іншими елементами.
 655 |    - Неможливо задавати ширину та висоту.
 656 |    - Відступи (margin/padding) впливають лише на внутрішній простір.
 657 |    - Приклад: `<span>`, `<a>`.
 658 | 
 659 | 3. `inline-block`:
 660 | 
 661 |    - Поєднує особливості block і inline.
 662 |    - Елемент розташовується в рядку, але дозволяє задавати ширину, висоту, відступи.
 663 |    - Зручний для створення кнопок, тегів.
 664 | 
 665 | 4. `flex`:
 666 | 
 667 |    - Відображає елемент як контейнер для гнучкого компонування дочірніх елементів.
 668 |    - Використовується для вирівнювання та розподілу простору між елементами.
 669 | 
 670 | 5. `grid`:
 671 | 
 672 |    - Задає контейнер для компонування в двовимірній сітці.
 673 |    - Зручний для складних макетів.
 674 | 
 675 | 6. `none`:
 676 | 
 677 |    - Елемент не відображається на сторінці.
 678 | 
 679 | 7. `inline-flex` / `inline-grid`:
 680 | 
 681 |    - Аналогічні flex і grid, але зберігають властивості inline.
 682 | 
 683 | 8. `table` / `table-row` / `table-cell`:
 684 | 
 685 |    - Елементи імітують поведінку таблиць HTML.
 686 | 
 687 | - **Найчастіше використовується:**
 688 | 
 689 |   - block, inline-block, flex, і grid — залежно від завдань.
 690 |   - inline-block популярний для створення кнопок або елементів меню, які потрібно розташувати в рядок, але контролювати їх розміри.
 691 | 
 692 | - **Особливість inline-block:**
 693 | 
 694 |   - Елементи розташовуються в рядок, як inline, але поводяться як block, дозволяючи задавати ширину, висоту, та всі відступи.
 695 |   - Проблема: між елементами може з’явитися проміжок (через пробіли в HTML).
 696 | 
 697 | - Виправляється:
 698 |   - Видаленням пробілів у коді.
 699 |   - Встановленням font-size: 0 для батьківського контейнера.
 700 | 
 701 | </details>
 702 | 
 703 | <details>
 704 | <summary>21. Що таке CSS-правило?</summary>
 705 | 
 706 | #### CSS
 707 | 
 708 | - CSS-правило складається з селектора та блоку декларацій. Селектор визначає, до яких елементів на сторінці застосовуються стилі, а блок декларацій містить властивості та їх значення, що визначають вигляд цих елементів. Наприклад:
 709 | 
 710 | ```css
 711 | p {
 712 |   color: red;
 713 |   font-size: 16px;
 714 | }
 715 | ```
 716 | 
 717 | - Тут `p` — селектор (вибирає всі абзаци), а в блоці декларацій вказано, що текст буде червоним і розмір шрифту 16px.
 718 | 
 719 | </details>
 720 | 
 721 | <details>
 722 | <summary>22. Варіанти додавання CSS стилів на сторінку?</summary>
 723 | 
 724 | #### CSS
 725 | 
 726 | 1. **Inline CSS:** Стилі додаються безпосередньо до HTML елементів через атрибут `style`.
 727 | 
 728 | ```html
 729 | <p style="color: red; font-size: 16px;">Text</p>
 730 | ```
 731 | 
 732 | 2. **Internal CSS:** Стилі додаються в `<style>` тег в межах `<head>` секції HTML документа.
 733 | 
 734 | ```html
 735 | <style>
 736 |   p {
 737 |     color: red;
 738 |     font-size: 16px;
 739 |   }
 740 | </style>
 741 | ```
 742 | 
 743 | 3. **External CSS:** Стилі прописуються в окремому CSS файлі, який підключається до HTML через тег `<link>`.
 744 | 
 745 | ```html
 746 | <link rel="stylesheet" href="styles.css" />
 747 | ```
 748 | 
 749 | - Ці варіанти відрізняються за пріоритетом і зручністю для масштабування проектів.
 750 | 
 751 | </details>
 752 | 
 753 | <details>
 754 | <summary>23. Типи позиціонування у CSS?</summary>
 755 | 
 756 | #### CSS
 757 | 
 758 | 1. **static:** За замовчуванням для всіх елементів. Елементи розташовуються в нормальному потоці документа (тобто, згідно з їх порядком у HTML).
 759 | 
 760 | 2. **relative:** Елемент розташовується відносно його початкового положення в потоці. Можна використовувати властивості `top`, `right`, `bottom`, `left`.
 761 | 
 762 | 3. **absolute:** Елемент позиціонується відносно найближчого батьківського елемента з позиціонуванням (не `static`). Якщо такого немає, то відносно документа.
 763 | 
 764 | 4. **fixed:** Елемент позиціонується відносно вікна браузера, тобто він залишатиметься на тому ж місці при прокручуванні сторінки.
 765 | 
 766 | 5. **sticky:** Елемент поводиться як relative до певного моменту, після чого стає fixed, коли прокручують сторінку до заданого порогу.
 767 | 
 768 | </details>
 769 | 
 770 | <details>
 771 | <summary>24. Блокова модель CSS?</summary>
 772 | 
 773 | #### CSS
 774 | 
 775 | - Блокова модель CSS (Box Model) описує, як елементи розташовуються на веб-сторінці та як обчислюються їх розміри. Вона включає такі компоненти:
 776 | 
 777 | 1. **Content (Контент):** Це основна частина елемента, де міститься текст або інші медіа. Розміри контенту визначаються властивостями `width` і `height`.
 778 | 
 779 | 2. **Padding (Відступи):** Простір між контентом і межами елемента (border). Відступи додаються всередині елемента. Властивості: `padding-top`, `padding-right`, `padding-bottom`, `padding-left`.
 780 | 
 781 | 3. **Border (Межа):** Лінія, яка оточує елемент. Може мати товщину, стиль та колір. Властивості: `border-width`, `border-style`, `border-color`.
 782 | 
 783 | 4. **Margin (Зовнішній відступ):** Простір між елементом і його сусідніми елементами. Відступи додаються зовні елемента. Властивості: `margin-top`, `margin-right`, `margin-bottom`, `margin-left`.
 784 | 
 785 | - Коли вказуються розміри елемента через `width` і `height`, вони зазвичай враховують тільки `content`, але при додаванні `padding`, `border` і `margin`, розміри елемента змінюються.
 786 | 
 787 | - Важливо знати, що властивість `box-sizing` дозволяє визначати, як враховуються ці величини при обчисленні розмірів елемента:
 788 | 
 789 |   - `content-box` (за замовчуванням): розміри елемента — це тільки контент.
 790 | 
 791 |   - `border-box`: розміри елемента враховують також `padding` та `border`.
 792 | 
 793 | </details>
 794 | 
 795 | <details>
 796 | <summary>25. Що таке селектор? І які селектори є?</summary>
 797 | 
 798 | #### CSS
 799 | 
 800 | - **Селектор** у CSS — це частина правила, яка визначає, до яких елементів на сторінці застосовуються стилі. Селектори дозволяють вибирати HTML елементи для застосування стилів.
 801 | 
 802 | #### Основні типи селекторів:
 803 | 
 804 | 1. **Типовий селектор (Type selector):** Вибирає елементи за їх тегом.
 805 | 
 806 | ```css
 807 | p {
 808 |   color: red;
 809 | }
 810 | ```
 811 | 
 812 | 2. **Класовий селектор (Class selector):** Вибирає елементи за класом, починається з крапки.
 813 | 
 814 | ```css
 815 | .my-class {
 816 |   color: blue;
 817 | }
 818 | ```
 819 | 
 820 | 3. **Ідентифікатор (ID selector):** Вибирає елементи за ідентифікатором, починається з решітки.
 821 | 
 822 | ```css
 823 | #my-id {
 824 |   color: green;
 825 | }
 826 | ```
 827 | 
 828 | 4. **Атрибутний селектор (Attribute selector):** Вибирає елементи за значенням їх атрибутів.
 829 | 
 830 | ```css
 831 | input[type="text"] {
 832 |   border: 1px solid black;
 833 | }
 834 | ```
 835 | 
 836 | 5. **Псевдоклас (Pseudo-class selector):** Вибирає елементи, що знаходяться в певному стані.
 837 | 
 838 | ```css
 839 | a:hover {
 840 |   color: red;
 841 | }
 842 | ```
 843 | 
 844 | 6. **Псевдоелемент (Pseudo-element selector):** Вибирає частини елементів, наприклад, перший рядок або першу літеру.
 845 | 
 846 | ```css
 847 | p::first-letter {
 848 |   font-size: 2em;
 849 | }
 850 | ```
 851 | 
 852 | 7. **Комбінатори (Combinators):**
 853 | 
 854 | - **_Descendant_** (потомок): Вибирає елементи, які є нащадками іншого елемента.
 855 | 
 856 | ```css
 857 | div p {
 858 |   color: purple;
 859 | }
 860 | ```
 861 | 
 862 | - **_Child_** (прямий нащадок): Вибирає елементи, що є прямими дітьми іншого елемента.
 863 | 
 864 | ```css
 865 | div > p {
 866 |   color: yellow;
 867 | }
 868 | ```
 869 | 
 870 | - **_Adjacent sibling_** (сусід): Вибирає елемент, який йде безпосередньо після іншого.
 871 | 
 872 | ```css
 873 | h1 + p {
 874 |   margin-top: 0;
 875 | }
 876 | ```
 877 | 
 878 | - **_General sibling_** (загальний сусід): Вибирає елементи, які є сусідами певного елемента.
 879 | 
 880 | ```css
 881 | h1 ~ p {
 882 |   color: orange;
 883 | }
 884 | ```
 885 | 
 886 | Це основні типи селекторів, що використовуються для вибору та стилізації елементів.
 887 | 
 888 | </details>
 889 | 
 890 | <details>
 891 | <summary>26. Різниця між Reset.css та Normalize.css?</summary>
 892 | 
 893 | #### CSS
 894 | 
 895 | - **Reset.css** і **Normalize.css** — це два різні підходи до управління стилями за замовчуванням у браузерах, але з різними цілями:
 896 | 
 897 | 1. **Reset.css:**
 898 | 
 899 | - **Мета:** Видалити всі стилі браузера (включаючи відступи, поля, шрифти тощо), щоб почати з "чистого аркуша".
 900 | 
 901 | - **Результат:** Все, що за замовчуванням задається браузером, скидається, і елементи стають однаковими в усіх браузерах. Це часто призводить до того, що потрібно вручну додавати стилі для базових елементів.
 902 | 
 903 | - **Приклад:**
 904 | 
 905 | ```css
 906 | * {
 907 |   margin: 0;
 908 |   padding: 0;
 909 |   border: 0;
 910 | }
 911 | ```
 912 | 
 913 | 2. **Normalize.css:**
 914 | 
 915 | - **Мета:** Зробити стилі браузерів більш однаковими, але не скидаючи їх повністю. Підтримує стандартні стилі для елементів, щоб забезпечити однаковий вигляд у всіх браузерах.
 916 | 
 917 | - **Результат:** Зберігаються деякі стилі за замовчуванням, але вони нормалізуються для забезпечення консистентності між різними браузерами (наприклад, вирівнювання шрифтів, списки, таблиці).
 918 | 
 919 | - **Приклад:**
 920 | 
 921 | ```css
 922 | h1 {
 923 |   font-size: 2em;
 924 |   margin: 0.67em 0;
 925 | }
 926 | ```
 927 | 
 928 | - **Основна різниця:** Reset.css скидає всі стилі браузера до мінімуму, тоді як Normalize.css підтримує базові стилі, але нормалізує їх для більшої узгодженості між браузерами.
 929 | 
 930 | </details>
 931 | 
 932 | <details>
 933 | <summary>27. Різниця між display: none та visibility: hidden?</summary>
 934 | 
 935 | #### CSS
 936 | 
 937 | `display: none` і `visibility: hidden` приховують елементи, але працюють по-різному:
 938 | 
 939 | - `display: none`
 940 | 
 941 |   - Елемент зникає повністю зі сторінки.
 942 |   - Він не займає місця в макеті.
 943 |   - Інші елементи зміщуються так, ніби його не існувало.
 944 |   - Події (наприклад, кліки) не спрацьовують на ньому.
 945 |   - Використовується для повного приховування елементів.
 946 | 
 947 | ```css
 948 | .hidden {
 949 |   display: none;
 950 | }
 951 | ```
 952 | 
 953 | - `visibility: hidden`
 954 | 
 955 |   - Елемент залишається на сторінці, але стає невидимим.
 956 |   - Він продовжує займати місце в макеті.
 957 |   - Інші елементи не зміщуються.
 958 |   - Події (наприклад, кліки) не спрацьовують, хоча елемент все ще є в DOM.
 959 | 
 960 | ```css
 961 | .hidden {
 962 |   visibility: hidden;
 963 | }
 964 | ```
 965 | 
 966 | **Різниця:** `display: none` прибирає елемент повністю, а `visibility: hidden` залишає його місце, але робить невидимим.
 967 | 
 968 | </details>
 969 | 
 970 | <details>
 971 | <summary>28. Різниця між блоковим та інлайновим елементами?</summary>
 972 | 
 973 | #### CSS
 974 | 
 975 | - **Блокові (block) та інлайнові (inline) елементи** відрізняються способом відображення та впливом на структуру сторінки.
 976 | 
 977 | #### Блокові елементи (display: block)
 978 | 
 979 | - Починаються з нового рядка.
 980 | - Автоматично займають всю доступну ширину (по горизонталі).
 981 | - Можуть містити як інші блокові, так і інлайнові елементи.
 982 | - Підтримують width, height, margin, padding.
 983 | 
 984 | **Приклади:** `<div>`, `<p>`, `<h1>-<h6>`, `<section>`, `<article>`, `<form>`, `<header>`, `<footer>`
 985 | 
 986 | ```css
 987 | div {
 988 |   display: block;
 989 |   width: 100%;
 990 | }
 991 | ```
 992 | 
 993 | #### Інлайнові елементи (display: inline)
 994 | 
 995 | - Не починаються з нового рядка, розташовуються "в потоці" тексту.
 996 | - Ширина та висота залежать від вмісту.
 997 | - width і height ігноруються (не можна змінювати вручну).
 998 | - margin та padding працюють тільки по горизонталі.
 999 | 
1000 | **Приклади:** `<span>`, `<a>`, `<strong>`, `<em>`, `<b>`, `<i>`
1001 | 
1002 | ```css
1003 | span {
1004 |   display: inline;
1005 |   color: red;
1006 | }
1007 | ```
1008 | 
1009 | #### Різниця
1010 | 
1011 | - Блокові елементи займають всю ширину і формують окремий рядок.
1012 | - Інлайнові елементи залишаються в потоці тексту та займають рівно стільки місця, скільки потрібно їх вмісту.
1013 | 
1014 | </details>
1015 | 
1016 | <details>
1017 | <summary>29. Різниця між класом та ідентифікатором у CSS?</summary>
1018 | 
1019 | #### CSS
1020 | 
1021 | #### Клас (`class`) vs Ідентифікатор (`id`) у CSS
1022 | 
1023 | | Параметр              | Клас (`class`)                            | Ідентифікатор (`id`)                      |
1024 | | --------------------- | ----------------------------------------- | ----------------------------------------- |
1025 | | Синтаксис             | Починається з `.`                         | Починається з `#`                         |
1026 | | Призначення           | Використовується для групи елементів      | Призначається одному унікальному елементу |
1027 | | Повторне використання | Може застосовуватися до кількох елементів | Повинен бути унікальним на сторінці       |
1028 | | Пріоритет у CSS       | Менший (0,0,1,0)                          | Вищий (0,1,0,0)                           |
1029 | | HTML приклад          | `<div class="box"></div>`                 | `<div id="unique-box"></div>`             |
1030 | | CSS приклад           | `.box { color: red; }`                    | `#unique-box { color: blue; }`            |
1031 | 
1032 | #### Різниця
1033 | 
1034 | - Класи використовуються для стилізації кількох елементів.
1035 | - ID застосовується до одного унікального елемента (але можна порушити це правило).
1036 | - ID має вищий пріоритет, тому його важко перевизначити.
1037 | - Класи краще використовувати для стилізації, ID — для JavaScript або унікальної ідентифікації.
1038 | 
1039 | </details>
1040 | 
1041 | <details>
1042 | <summary>30. Що таке CSS спрайт? І для чого він використовується?</summary>
1043 | 
1044 | #### CSS
1045 | 
1046 | - CSS спрайт — це техніка, де кілька зображень об'єднуються в одне велике зображення, а потім через CSS задаються позиції фону для відображення різних частин цього зображення.
1047 | 
1048 | Використовується для зменшення кількості HTTP-запитів, що підвищує швидкість завантаження сторінки. Зазвичай застосовується для іконок, кнопок або інших маленьких зображень, що використовуються на сайті.
1049 | 
1050 | #### Ось приклад використання CSS спрайту:
1051 | 
1052 | 1. **Створення спрайта:** У вас є декілька маленьких зображень (наприклад, іконки), які ви об'єднуєте в один великий файл sprite.png.
1053 | 
1054 | 2. **CSS для використання спрайта:**
1055 | 
1056 | ```css
1057 | .icon {
1058 |   width: 50px;
1059 |   height: 50px;
1060 |   background-image: url("sprite.png");
1061 |   display: inline-block;
1062 | }
1063 | 
1064 | .icon-facebook {
1065 |   background-position: 0 0; /* Перша іконка в спрайті */
1066 | }
1067 | 
1068 | .icon-twitter {
1069 |   background-position: -50px 0; /* Друга іконка в спрайті */
1070 | }
1071 | 
1072 | .icon-linkedin {
1073 |   background-position: -100px 0; /* Третя іконка в спрайті */
1074 | }
1075 | ```
1076 | 
1077 | 3. **HTML для іконок:**
1078 | 
1079 | ```html
1080 | <div class="icon icon-facebook"></div>
1081 | <div class="icon icon-twitter"></div>
1082 | <div class="icon icon-linkedin"></div>
1083 | ```
1084 | 
1085 | У цьому прикладі всі іконки завантажуються з одного файлу sprite.png, і за допомогою CSS background-position визначається, яка частина спрайту відображатиметься для кожної іконки.
1086 | 
1087 | - Цей підхід вже не використовуеться в CSS, але для себе знати треба. 📝
1088 | 
1089 | </details>
1090 | 
1091 | <details>
1092 | <summary>31. Що таке вендорні префікси? І навіщо вони використовуються?</summary>
1093 | 
1094 | #### CSS
1095 | 
1096 | - Вендорні префікси — це спеціальні префікси, які додаються до CSS властивостей для забезпечення підтримки нових або експериментальних функцій у різних браузерах. Вони використовуються, коли властивість або функція ще не є стандартом або коли браузери реалізують їх по-своєму.
1097 | 
1098 | #### Приклад вендорних префіксів:
1099 | 
1100 | ```css
1101 | .element {
1102 |   -webkit-transform: rotate(
1103 |     45deg
1104 |   ); /* для браузерів на WebKit, таких як Chrome, Safari */
1105 |   -moz-transform: rotate(45deg); /* для Firefox */
1106 |   -ms-transform: rotate(45deg); /* для Internet Explorer */
1107 |   transform: rotate(45deg); /* стандартна властивість */
1108 | }
1109 | ```
1110 | 
1111 | - Вендорні префікси використовуються для забезпечення сумісності з різними браузерами, поки властивість не стане частиною офіційного стандарту CSS. Вони допомагають тестувати нові функції та забезпечують їх роботу на більшій кількості браузерів, поки всі вони не впровадять підтримку стандартних властивостей.
1112 | 
1113 | </details>
1114 | 
1115 | <details>
1116 | <summary>32. Що таке псевдоелементи? І навіщо вони використовуються?</summary>
1117 | 
1118 | #### CSS
1119 | 
1120 | - Псевдоелементи — це конструкції в CSS, які дозволяють стилізувати частини елементів, які не мають власного HTML представлення. Вони дозволяють додавати стилі до таких частин елементів, як перший рядок тексту, вміст перед або після елемента, або створення декоративних елементів без необхідності змінювати HTML.
1121 | 
1122 | #### Основні псевдоелементи:
1123 | 
1124 | - `::before` — додає вміст перед елементом.
1125 | - `::after` — додає вміст після елемента.
1126 | - `::first-letter` — стилізує першу букву тексту в елементі.
1127 | - `::first-line` — стилізує перший рядок тексту в елементі.
1128 | 
1129 | **Приклад використання:**
1130 | 
1131 | ```css
1132 | p::before {
1133 |   content: "🔹 ";
1134 | }
1135 | 
1136 | p::after {
1137 |   content: " 🔸";
1138 | }
1139 | 
1140 | p::first-letter {
1141 |   font-size: 2em;
1142 |   color: red;
1143 | }
1144 | ```
1145 | 
1146 | **Застосування:** Псевдоелементи використовуються для:
1147 | 
1148 | - Додавання декоративних елементів без зміни HTML.
1149 | - Створення візуальних ефектів (наприклад, стилізація першої літери або першого рядка).
1150 | - Додавання контенту перед або після елемента, наприклад, іконок або текстових маркерів, без необхідності додавати додаткові теги в HTML.
1151 | 
1152 | </details>
1153 | 
1154 | <details>
1155 | <summary>33. Що таке схлопування меж (margin collapsing)?</summary>
1156 | 
1157 | #### CSS
1158 | 
1159 | - Схлопування меж (margin collapsing) — це явище в CSS, коли вертикальні відступи (margins) між сусідніми блоками або елементами "зливаються" в один, замість того, щоб відображатися окремо.
1160 | 
1161 | **Це зазвичай відбувається в таких ситуаціях:**
1162 | 
1163 | 1. Коли два сусідні блоки мають вертикальні відступи (margins).
1164 | 
1165 | 2. Коли один блок має відступ, а наступний блок не має відступу або його margin значення нульове.
1166 | 
1167 | У результаті, між елементами відображається відстань, що дорівнює найбільшому з цих відступів.
1168 | 
1169 | **Приклад:**
1170 | 
1171 | ```html
1172 | <div style="margin-bottom: 20px;">Block 1</div>
1173 | <div style="margin-top: 10px;">Block 2</div>
1174 | ```
1175 | 
1176 | - У цьому випадку схлопування меж призведе до того, що відстань між блоками буде 20px, а не 30px (як можна було б очікувати при додаванні 20px + 10px).
1177 | 
1178 | - **Чому це відбувається?** Схлопування меж застосовується, щоб уникнути зайвих відступів і зробити верстку більш зручною для використання, оскільки зазвичай не має сенсу мати два відступи, що діють на ту саму частину простору.
1179 | 
1180 | **Як уникнути схлопування:**
1181 | 
1182 | - Використовувати `padding`, а не `margin`, якщо потрібно уникнути схлопування.
1183 | - Встановити `overflow` на елементі.
1184 | - Використовувати фонові або градієнтні елементи, щоб блокувати схлопування.
1185 | 
1186 | </details>
1187 | 
1188 | <details>
1189 | <summary>34. Що таке z-index? Як формується контекст накладання?</summary>
1190 | 
1191 | #### CSS
1192 | 
1193 | - `z-index` — це CSS властивість, яка визначає порядок накладання елементів на сторінці. Вона використовується для визначення, який елемент має бути поверх іншого, коли елементи перекривають один одного. Вищий `z-index` означає, що елемент буде накладатися поверх елементів з нижчим значенням `z-index`.
1194 | 
1195 | #### Як працює `z-index`:
1196 | 
1197 | - Значення `z-index` може бути цілим числом (наприклад, 1, 10, -5).
1198 | 
1199 | - За замовчуванням, елементи з однаковим `z-index` або без нього накладаються один на одного в порядку їх появи в HTML.
1200 | 
1201 | - Чим більше значення `z-index`, тим вище елемент буде на сторінці.
1202 | 
1203 | #### Приклад:
1204 | 
1205 | ```css
1206 | div {
1207 |   position: absolute;
1208 | }
1209 | 
1210 | .div1 {
1211 |   z-index: 1;
1212 | }
1213 | 
1214 | .div2 {
1215 |   z-index: 2;
1216 | }
1217 | ```
1218 | 
1219 | - У цьому прикладі `.div2` буде накладатися поверх `.div1`, оскільки у неї вищий `z-index`.
1220 | 
1221 | #### Контекст накладання:
1222 | 
1223 | Контекст накладання — це область, в межах якої визначаються всі значення z-index для елементів. Це стосується елементів з властивістю position (не static), або коли застосовуються інші властивості, які створюють новий контекст накладання.
1224 | 
1225 | - **Контекст накладання формується, коли:**
1226 | 
1227 | 1. Елемент має властивість `position` з одним із значень (`relative`, `absolute`, `fixed`, `sticky`).
1228 | 2. `z-index` встановлено на значення, відмінне від auto.
1229 | 3. Властивість opacity менша за 1.
1230 | 4. Властивість `transform`, `filter`, `perspective`, `clip-path` та інші створюють новий контекст.
1231 | 
1232 | - **Як формується контекст накладання:**
1233 | 
1234 | 1. Вищезгадані умови (наприклад, `position: relative` і `z-index`).
1235 | 2. Ті елементи, які знаходяться в цьому контексті, будуть порівнювати свої z-index тільки в межах цього контексту, а не з іншими елементами на сторінці.
1236 | 3. Якщо елемент знаходиться в різних контекстах накладання, то порівнювати z-index можна лише в межах кожного з контекстів.
1237 | 
1238 | #### Приклад контексту накладання:
1239 | 
1240 | ```html
1241 | <div class="parent" style="position: relative; z-index: 10;">
1242 |   <div class="child" style="position: absolute; z-index: 5;">Child 1</div>
1243 |   <div class="child" style="position: absolute; z-index: 15;">Child 2</div>
1244 | </div>
1245 | 
1246 | <div class="sibling" style="position: absolute; z-index: 20;">Sibling</div>
1247 | ```
1248 | 
1249 | - У цьому прикладі:
1250 | 
1251 |   - `.child 1` і `.child 2` знаходяться в одному контексті накладання всередині `.parent`.
1252 |   - `.sibling` має інший контекст накладання і з'явиться поверх обох `.child`, оскільки має більший `z-index` у своєму контексті.
1253 | 
1254 | </details>
1255 | 
1256 | <details>
1257 | <summary>35. Порядок накладання елементів у CSS (Stacking Order)?</summary>
1258 | 
1259 | #### CSS
1260 | 
1261 | - Порядок накладання елементів у CSS (Stacking Order) визначається порядком, у якому елементи накладаються один на одного на сторінці. Це важливо, коли елементи з різними властивостями (наприклад, `z-index`) можуть перекривати один одного.
1262 | 
1263 | #### Порядок накладання (Stacking Order):
1264 | 
1265 | 1. **Елементи за замовчуванням** (статичні елементи, без позиціонування та без `z-index`):
1266 | 
1267 | - Елементи без позиціонування (`position: static` або без властивості `position`) розташовуються один за одним у порядку їхнього розташування в HTML.
1268 | 
1269 | 2. **Елементи з позиціонуванням** (`relative`, `absolute`, `fixed`, `sticky`):
1270 | 
1271 | - Якщо елемент має будь-яке інше значення `position` (крім `static`), він створює новий контекст накладання. У межах цього контексту елементи з більшим значенням `z-index` будуть накладатися поверх елементів з меншим значенням.
1272 | 
1273 | 3. **Елементи з z-index**:
1274 | 
1275 | - Елементи з більш високим `z-index` будуть розташовуватися поверх елементів з нижчим значенням `z-index` (якщо елементи знаходяться в одному контексті накладання).
1276 | 
1277 | 4. **Невидимі елементи** (з `opacity` менше 1 або з `visibility: hidden`):
1278 | 
1279 | - Елементи, які мають властивість `opacity` менше 1 або `visibility: hidden`, можуть бути розташовані поверх інших елементів, але їх все одно не видно.
1280 | 
1281 | 5. **Елементи з властивістю** `transform`, `filter`, `perspective`, `clip-path` та іншими, що створюють новий контекст накладання:
1282 | 
1283 | - Коли елемент має одну з цих властивостей, це створює новий контекст накладання, і елементи в цьому контексті будуть накладатися згідно з їхніми значеннями `z-index`, незалежно від того, де вони знаходяться на сторінці.
1284 | 
1285 | 6. **Елементи з фонового вмісту** (`backgrounds`, `borders`, etc.):
1286 | 
1287 | - Вміст, такий як фон або бордери, не створює власного контексту накладання, але може бути важливим для визначення, як інші елементи накладаються.
1288 | 
1289 | #### Порядок накладання елементів за замовчуванням:
1290 | 
1291 | 1. **Блоки без позиціонування** (статичні елементи).
1292 | 
1293 | 2. **Елементи з позиціонуванням** `relative` (якщо не визначено `z-index`).
1294 | 
1295 | 3. **Елементи з позиціонуванням** `absolute`, `fixed`, `sticky` (в залежності від `z-index`).
1296 | 
1297 | 4. **Нове контексти накладання** (наприклад, елементи з `transform`, `opacity < 1`, `filter` тощо).
1298 | 
1299 | #### Простіше кажучи:
1300 | 
1301 | - Статичні елементи не створюють контексту накладання і накладаються в порядку їхнього розташування в HTML.
1302 | 
1303 | - Елементи з позиціонуванням `relative`, `absolute`, `fixed`, `sticky` створюють контекст накладання, де `z-index` визначає, які елементи будуть поверх інших.
1304 | 
1305 | - Елементи з новими контекстами накладання (наприклад, з `transform` або `opacity < 1`) накладаються поверх всіх інших елементів із меншим пріоритетом.
1306 | 
1307 | </details>
1308 | 
1309 | <details>
1310 | <summary>36. Як за допомогою CSS визначити, чи підтримується властивість у браузері?</summary>
1311 | 
1312 | #### CSS
1313 | 
1314 | - Для того, щоб перевірити, чи підтримується властивість у браузері, в CSS безпосередньо неможливо це зробити, оскільки CSS сам по собі не має вбудованих механізмів для перевірки підтримки властивостей. Однак, є кілька способів зробити це за допомогою JavaScript та умовних конструкцій у CSS.
1315 | 
1316 | 1. **Використання JavaScript (Modernizr)**
1317 | 
1318 | Один із способів перевірити, чи підтримується CSS властивість у браузері — це використати JavaScript-бібліотеку, наприклад, Modernizr. Modernizr дозволяє перевіряти підтримку різних технологій і властивостей браузером.
1319 | 
1320 | **Приклад використання Modernizr:**
1321 | 
1322 | ```javascript
1323 | if (Modernizr.flexbox) {
1324 |   console.log("Flexbox підтримується!");
1325 | } else {
1326 |   console.log("Flexbox не підтримується.");
1327 | }
1328 | ```
1329 | 
1330 | 2. **Використання умови @supports в CSS**
1331 | 
1332 | CSS має власну конструкцію `@supports`, яка дозволяє перевіряти, чи підтримується певна CSS властивість або її значення в поточному браузері.
1333 | 
1334 | **Приклад:**
1335 | 
1336 | ```css
1337 | /* Перевіряє, чи підтримується flexbox */
1338 | @supports (display: flex) {
1339 |   .container {
1340 |     display: flex;
1341 |   }
1342 | }
1343 | 
1344 | /* Якщо не підтримується flexbox, додається альтернативне значення */
1345 | @supports not (display: flex) {
1346 |   .container {
1347 |     display: block;
1348 |   }
1349 | }
1350 | ```
1351 | 
1352 | У цьому прикладі, якщо браузер підтримує `display: flex`, то він застосує стилі, визначені в першому блоці. Якщо ж не підтримує, застосує стилі з блоку `@supports` not.
1353 | 
1354 | 3. **Використання префіксів для застарілих властивостей**
1355 | 
1356 | Для старих властивостей або експериментальних властивостей браузерів часто використовуються вендорні префікси. Якщо необхідно працювати з такими властивостями, часто можна додавати ці префікси та перевіряти, чи працює код на різних браузерах.
1357 | 
1358 | **Приклад з вендорними префіксами:**
1359 | 
1360 | ```css
1361 | /* Вендорні префікси для трансформацій */
1362 | .element {
1363 |   -webkit-transform: rotate(45deg);
1364 |   -moz-transform: rotate(45deg);
1365 |   transform: rotate(45deg);
1366 | }
1367 | ```
1368 | 
1369 | Це допоможе забезпечити сумісність з різними версіями браузерів.
1370 | 
1371 | #### Висновок
1372 | 
1373 | Найбільш зручним методом перевірки підтримки властивості є використання @supports у CSS або бібліотеки Modernizr для JavaScript, яка дозволяє створити перевірки підтримки за допомогою скриптів.
1374 | 
1375 | </details>
1376 | 
1377 | <details>
1378 | <summary>37. Глобальні ключові слова у CSS?</summary>
1379 | 
1380 | #### CSS
1381 | 
1382 | - Глобальні ключові слова в CSS — це спеціальні значення, які можна задати будь-якій CSS-властивості. Вони не змінюють саме значення властивості, а вказують, як її слід обчислювати.
1383 | 
1384 | #### Список глобальних ключових слів
1385 | 
1386 | 1. `inherit` – успадковує значення від батьківського елемента.
1387 | 2. `initial` – скидає значення до дефолтного (згідно зі специфікацією).
1388 | 3. `unset` – якщо властивість успадковується за замовчуванням (наприклад, color), діє як inherit, інакше – як initial.
1389 | 4. `revert` – повертає значення до того, що визначено у стилях браузера чи користувача.
1390 | 5. `revert-layer` – скидає значення до попереднього рівня каскаду (актуально для @layer).
1391 | 
1392 | #### Приклади використання
1393 | 
1394 | ✅ `inherit` (успадкування значення)
1395 | 
1396 | ```css
1397 | p {
1398 |   color: red;
1399 | }
1400 | span {
1401 |   color: inherit; /* отримає червоний від <p> */
1402 | }
1403 | ```
1404 | 
1405 | ✅ `initial` (повернення до стандартного значення)
1406 | 
1407 | ```css
1408 | button {
1409 |   all: initial; /* скидає всі властивості до дефолтних */
1410 | }
1411 | ```
1412 | 
1413 | ✅ `unset` (залежно від властивості)
1414 | 
1415 | ```css
1416 | div {
1417 |   color: unset; /* успадкує */
1418 |   width: unset; /* повернеться до `auto` */
1419 | }
1420 | ```
1421 | 
1422 | ✅ `revert` (повернення до стандартних стилів браузера)
1423 | 
1424 | ```css
1425 | a {
1426 |   color: green;
1427 | }
1428 | a.special {
1429 |   color: revert; /* поверне синій, якщо його задає браузер */
1430 | }
1431 | ```
1432 | 
1433 | ✅ `revert-layer` (актуально для @layer)
1434 | 
1435 | ```css
1436 | @layer framework {
1437 |   button {
1438 |     background: red;
1439 |   }
1440 | }
1441 | 
1442 | @layer custom {
1443 |   button {
1444 |     background: blue;
1445 |   }
1446 | }
1447 | 
1448 | /* revert-layer поверне червоний із framework, а не дефолтний */
1449 | button {
1450 |   background: revert-layer;
1451 | }
1452 | ```
1453 | 
1454 | #### Висновок
1455 | 
1456 | - `inherit` – для спадкування.
1457 | - `initial` – для скидання до дефолту.
1458 | - `unset` – комбінує inherit та initial.
1459 | - `revert` – повертає значення браузера чи стилів користувача.
1460 | - `revert-layer` – скидає значення до попереднього рівня каскаду.
1461 | 
1462 | </details>
1463 | 
1464 | <details>
1465 | <summary>38. Що таке перерахування селекторів?</summary>
1466 | 
1467 | #### CSS
1468 | 
1469 | - Перерахування селекторів — це використання кількох селекторів, розділених комою, для одночасного застосування стилів до різних елементів.
1470 | 
1471 | #### Синтаксис
1472 | 
1473 | ```css
1474 | selector1,
1475 | selector2,
1476 | selector3 {
1477 |   property: value;
1478 | }
1479 | ```
1480 | 
1481 | #### Приклади
1482 | 
1483 | ✅ Стилізація кількох елементів одночасно
1484 | 
1485 | ```css
1486 | h1,
1487 | h2,
1488 | h3 {
1489 |   color: red;
1490 | }
1491 | ```
1492 | 
1493 | - Усі h1, h2 і h3 стануть червоними.
1494 | 
1495 | ✅ Комбінація класів і тегів
1496 | 
1497 | ```css
1498 | button,
1499 | .btn {
1500 |   padding: 10px;
1501 | }
1502 | ```
1503 | 
1504 | - Застосується до `<button>` і будь-якого елемента з `.btn`.
1505 | 
1506 | ✅ Перерахування складних селекторів
1507 | 
1508 | ```css
1509 | .card .title,
1510 | .box .header {
1511 |   font-weight: bold;
1512 | }
1513 | ```
1514 | 
1515 | - Стилізує `.title` всередині `.card` і `.header` всередині `.box`.
1516 | 
1517 | #### Висновок
1518 | 
1519 | - Коми (`,`) об'єднують селектори, застосовуючи однакові стилі.
1520 | - Дозволяє скорочувати код і зменшувати дублювання.
1521 | - Важливо не плутати з комбінованими селекторами (наприклад, `.class1 .class2`, де `.class2` має бути всередині `.class1`).
1522 | 
1523 | </details>
1524 | 
1525 | <details>
1526 | <summary>39. Для чого використовується ключове слово currentColor у CSS?</summary>
1527 | 
1528 | #### CSS
1529 | 
1530 | - `currentColor` — це ключове слово в CSS, яке задає значення кольору (`color`) для інших властивостей, що підтримують кольори.
1531 | 
1532 | #### Як працює
1533 | 
1534 | - `currentColor` автоматично використовує значення, встановлене у властивості `color`.
1535 | 
1536 | #### Приклади використання
1537 | 
1538 | ✅ Однаковий колір для тексту та рамки
1539 | 
1540 | ```css
1541 | button {
1542 |   color: blue;
1543 |   border: 2px solid currentColor;
1544 | }
1545 | ```
1546 | 
1547 | - Рамка кнопки буде того ж кольору, що й текст (`blue`).
1548 | 
1549 | ✅ SVG-іконки із кольором тексту
1550 | 
1551 | ```css
1552 | .icon {
1553 |   color: red;
1554 |   fill: currentColor;
1555 | }
1556 | ```
1557 | 
1558 | - `fill` у SVG прийме `color` елемента (`red`).
1559 | 
1560 | ✅ Прозорість зі спадкуванням кольору
1561 | 
1562 | ```css
1563 | .link {
1564 |   color: green;
1565 |   background: linear-gradient(currentColor 0%, transparent 100%);
1566 | }
1567 | ```
1568 | 
1569 | - Градієнт стартує від `green`, бо це значення `color`.
1570 | 
1571 | #### Висновок
1572 | 
1573 | - Використовує значення `color`, усуваючи дублювання стилів.
1574 | - Особливо корисно для SVG, `border`, `background`, `box-shadow`.
1575 | - Спрощує темізацію: змінюєш `color`, і все підлаштовується.
1576 | 
1577 | </details>
1578 | 
1579 | <details>
1580 | <summary>40. Які псевдокласи є CSS?</summary>
1581 | 
1582 | #### CSS
1583 | 
1584 | #### Псевдокласи в CSS
1585 | 
1586 | - ✅ Динамічні псевдокласи
1587 | 
1588 | | Псевдоклас | Опис                                         |
1589 | | ---------- | -------------------------------------------- |
1590 | | `:hover`   | При наведенні курсору.                       |
1591 | | `:focus`   | Коли елемент у фокусі (наприклад, `input`).  |
1592 | | `:active`  | Під час натискання.                          |
1593 | | `:visited` | Для відвіданих посилань.                     |
1594 | | `:target`  | Для елемента, що відповідає `#anchor` в URL. |
1595 | 
1596 | - ✅ Структурні псевдокласи
1597 | 
1598 | | Псевдоклас           | Опис                                                   |
1599 | | -------------------- | ------------------------------------------------------ |
1600 | | `:first-child`       | Перший дочірній елемент.                               |
1601 | | `:last-child`        | Останній дочірній елемент.                             |
1602 | | `:nth-child(n)`      | Дочірній елемент за індексом `n` (можна `odd`/`even`). |
1603 | | `:nth-last-child(n)` | Те саме, але з кінця.                                  |
1604 | | `:only-child`        | Якщо елемент єдиний у батьківському контейнері.        |
1605 | 
1606 | - ✅ Типові псевдокласи
1607 | 
1608 | | Псевдоклас             | Опис                                         |
1609 | | ---------------------- | -------------------------------------------- |
1610 | | `:first-of-type`       | Перший елемент певного типу.                 |
1611 | | `:last-of-type`        | Останній елемент певного типу.               |
1612 | | `:nth-of-type(n)`      | N-ий елемент певного типу.                   |
1613 | | `:nth-last-of-type(n)` | N-ий елемент певного типу з кінця.           |
1614 | | `:only-of-type`        | Якщо елемент унікальний серед такого ж типу. |
1615 | 
1616 | - ✅ Логічні псевдокласи
1617 | 
1618 | | Псевдоклас         | Опис                                                 |
1619 | | ------------------ | ---------------------------------------------------- |
1620 | | `:not(selector)`   | Вибирає все, **крім** вказаного селектора.           |
1621 | | `:has(selector)`   | Вибирає елементи, що містять інший елемент (`CSS4`). |
1622 | | `:where(selector)` | Як `:is()`, але без пріоритету.                      |
1623 | | `:is(selector)`    | Спрощує складні селектори.                           |
1624 | 
1625 | - ✅ Псевдокласи для форм
1626 | 
1627 | | Псевдоклас    | Опис                                |
1628 | | ------------- | ----------------------------------- |
1629 | | `:checked`    | Позначений чекбокс або радіокнопка. |
1630 | | `:disabled`   | Вимкнений елемент форми.            |
1631 | | `:enabled`    | Активний елемент форми.             |
1632 | | `:required`   | Поле `input`, що обов’язкове.       |
1633 | | `:optional`   | Поле `input`, що не є обов’язковим. |
1634 | | `:valid`      | Поле форми з коректним значенням.   |
1635 | | `:invalid`    | Поле форми з некоректним значенням. |
1636 | | `:read-only`  | Поле у режимі `readonly`.           |
1637 | | `:read-write` | Поле, що можна редагувати.          |
1638 | 
1639 | **Псевдокласи допомагають стилізувати елементи без додаткових класів або JS. Використовуйте `:is()` та `:has()` для скорочення складних селекторів у CSS4.**
1640 | 
1641 | </details>
1642 | 
1643 | <details>
1644 | <summary>41. Які фільтри є у CSS?</summary>
1645 | 
1646 | #### CSS
1647 | 
1648 | - Фільтри у CSS
1649 | 
1650 | Фільтри (`filter`) дозволяють змінювати вигляд елементів, застосовуючи ефекти до їхнього рендерингу.
1651 | 
1652 | #### 🔹 Основні фільтри
1653 | 
1654 | | Фільтр          | Опис                                                  | Приклад                     |
1655 | | --------------- | ----------------------------------------------------- | --------------------------- |
1656 | | `blur(px)`      | Розмиття з вказаним радіусом у пікселях.              | `filter: blur(5px);`        |
1657 | | `brightness(%)` | Змінює яскравість (100% – без змін).                  | `filter: brightness(150%);` |
1658 | | `contrast(%)`   | Змінює контраст (100% – без змін).                    | `filter: contrast(120%);`   |
1659 | | `grayscale(%)`  | Відтінки сірого (100% – чорно-біле).                  | `filter: grayscale(100%);`  |
1660 | | `invert(%)`     | Інвертує кольори (100% – повністю інвертоване).       | `filter: invert(100%);`     |
1661 | | `opacity(%)`    | Прозорість (0% – повністю прозоре, 100% – непрозоре). | `filter: opacity(50%);`     |
1662 | | `saturate(%)`   | Насиченість (100% – без змін, 0% – ч/б).              | `filter: saturate(200%);`   |
1663 | | `sepia(%)`      | Ефект сепії (100% – повністю сепія).                  | `filter: sepia(80%);`       |
1664 | 
1665 | #### 🔹 Фільтри для тіней та зміщення
1666 | 
1667 | | Фільтр                        | Опис                                                                        | Приклад                                              |
1668 | | ----------------------------- | --------------------------------------------------------------------------- | ---------------------------------------------------- |
1669 | | `drop-shadow(x y blur color)` | Додає тінь до зображення (аналог `box-shadow`, але працює з прозорими PNG). | `filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));` |
1670 | 
1671 | #### 🔹 Комбінування фільтрів
1672 | 
1673 | - Фільтри можна комбінувати, вказуючи їх через пробіл:
1674 | 
1675 | ```css
1676 | filter: brightness(120%) contrast(110%) blur(3px);
1677 | ```
1678 | 
1679 | - Фільтри застосовуються до всіх елементів, але найчастіше – до зображень (img), відео та бекграундів.
1680 | 
1681 | </details>
1682 | 
1683 | <details>
1684 | <summary>42. Навіщо використовується псевдоклас :invalid?</summary>
1685 | 
1686 | #### CSS
1687 | 
1688 | - Псевдоклас `:invalid` використовується для стилізації полів вводу (`<input>`, `<textarea>`, `<select>`), які не відповідають вимогам валідації.
1689 | 
1690 | #### Навіщо це потрібно?
1691 | 
1692 | - Підсвічувати некоректно заповнені поля.
1693 | - Покращити UX, показуючи візуальний зворотний зв’язок.
1694 | - Додати кастомні стилі без JavaScript.
1695 | 
1696 | #### Приклад використання
1697 | 
1698 | ```css
1699 | input:invalid {
1700 |   border: 2px solid red;
1701 |   background-color: #ffe6e6;
1702 | }
1703 | ```
1704 | 
1705 | ```html
1706 | <input type="email" required placeholder="Введіть email" />
1707 | ```
1708 | 
1709 | - Якщо поле буде пустим або міститиме некоректний email, воно підсвітиться червоним.
1710 | 
1711 | </details>
1712 | 
1713 | <details>
1714 | <summary>43. Розкажіть про властивість display в CSS?</summary>
1715 | 
1716 | #### CSS
1717 | 
1718 | #### Властивість `display` у CSS
1719 | 
1720 | - `display` визначає, як елемент відображається на сторінці та як він взаємодіє з іншими елементами.
1721 | 
1722 | #### 🔹 Основні значення
1723 | 
1724 | | Значення       | Опис                                                         |
1725 | | -------------- | ------------------------------------------------------------ |
1726 | | `none`         | Елемент прихований і не займає місця в макеті.               |
1727 | | `block`        | Блочний елемент, займає всю ширину батьківського контейнера. |
1728 | | `inline`       | Вбудований елемент, займає лише необхідну ширину.            |
1729 | | `inline-block` | Вбудований елемент, але можна змінювати ширину/висоту.       |
1730 | 
1731 | #### 🔹 Гнучкі макети
1732 | 
1733 | | Значення      | Опис                                                                |
1734 | | ------------- | ------------------------------------------------------------------- |
1735 | | `flex`        | Активація **Flexbox** для гнучкого розташування дочірніх елементів. |
1736 | | `grid`        | Використання **CSS Grid** для двовимірного макету.                  |
1737 | | `inline-flex` | Flex-контейнер, але поводиться як `inline`.                         |
1738 | | `inline-grid` | Grid-контейнер, але поводиться як `inline`.                         |
1739 | 
1740 | #### 🔹 Табличні макети
1741 | 
1742 | | Значення     | Опис                           |
1743 | | ------------ | ------------------------------ |
1744 | | `table`      | Елемент поводиться як таблиця. |
1745 | | `table-row`  | Імітує рядок таблиці.          |
1746 | | `table-cell` | Імітує комірку таблиці.        |
1747 | 
1748 | #### 🔹 Інші значення
1749 | 
1750 | | Значення    | Опис                                                         |
1751 | | ----------- | ------------------------------------------------------------ |
1752 | | `list-item` | Елемент поводиться як `<li>`, додаючи маркер списку.         |
1753 | | `inherit`   | Наслідує значення `display` від батьківського елемента.      |
1754 | | `initial`   | Встановлює значення `display` за замовчуванням для браузера. |
1755 | 
1756 | **`display: none` повністю прибирає елемент з потоку, на відміну від `visibility: hidden`, який просто приховує його, залишаючи місце.**
1757 | 
1758 | </details>
1759 | 
1760 | <details>
1761 | <summary>44. У якому випадку краще використовувати translate() замість абсолютного позиціонування?</summary>
1762 | 
1763 | #### CSS
1764 | 
1765 | - Використовувати `translate()` краще в таких випадках:
1766 | 
1767 | 1. **Оптимізація продуктивності** – `translate()` використовує GPU для обчислень, що робить анімації та переміщення плавнішими, ніж зміна `top/left`.
1768 | 
1769 | 2. **Збереження потоку документа** – `translate()` не впливає на положення інших елементів, на відміну від `position: absolute`, який змінює розташування елемента відносно найближчого позиціонованого предка.
1770 | 
1771 | 3. **Поліпшення продуктивності рендерингу** – зміна `transform` не викликає рефлоу (`reflow`), тоді як `top/left` змушують браузер перераховувати макет.
1772 | 
1773 | 4. **Гнучке центрування** – `translate(-50%, -50%)` часто використовується для центрування без залежності від розмірів контейнера.
1774 | 
1775 | - Якщо потрібно перемістити елемент без зміни його поточного контексту, `translate()` – кращий вибір.
1776 | 
1777 | </details>
1778 | 
1779 | <details>
1780 | <summary>45. Що таке плаваючі елементи (floats)? Як вони працюють?</summary>
1781 | 
1782 | #### CSS
1783 | 
1784 | - **Плаваючі елементи** (`float`) — це механізм у CSS, який дозволяє елементам "виринати" ліворуч або праворуч усередині контейнера, при цьому текст та інші інлайн-елементи обтікають їх.
1785 | 
1786 | #### Як працюють `float`:
1787 | 
1788 | 1. **Обтікання текстом** – якщо блок має `float: left` або `float: right`, інші елементи (зазвичай текст) обтікають його.
1789 | 
1790 | 2. **Вилучення з потоку** – `float` прибирає елемент із нормального потоку документа, але він все ще займає місце в контейнері.
1791 | 
1792 | 3. **Розриви потоку** (`clearfix`) – якщо всі дочірні елементи контейнера float, він може схлопнутись. Виправляють це додаванням `overflow: hidden` або `.clearfix (::after { content: ""; display: block; clear: both; })`.
1793 | 
1794 | 4. **Обмежена керованість** – `float` застаріває, бо не підходить для складних макетів. Замість нього зараз використовують `flexbox` або `grid`.
1795 | 
1796 | **Висновок:** `float` був основним способом верстки до появи `flexbox` і `grid`, але зараз використовується переважно для обтікання зображень текстом.
1797 | 
1798 | </details>
1799 | 
1800 | <details>
1801 | <summary>46. Способи завдання кольору CSS?</summary>
1802 | 
1803 | #### CSS
1804 | 
1805 | - Існує кілька способів задавати кольори в CSS:
1806 | 
1807 | 1. **Назва кольору:**
1808 | 
1809 | Наприклад:
1810 | 
1811 | ```css
1812 | color: red;
1813 | ```
1814 | 
1815 | 2. **Шістнадцятковий код (Hex):**
1816 | 
1817 | Наприклад:
1818 | 
1819 | ```css
1820 | color: #ff5733; /* Рожевий */
1821 | ```
1822 | 
1823 | 3. **RGB (Red, Green, Blue):**
1824 | 
1825 | - Визначається за допомогою значень для червоного, зеленого і синього каналів від 0 до 255.
1826 | 
1827 | Наприклад:
1828 | 
1829 | ```css
1830 | color: rgb(255, 87, 51);
1831 | ```
1832 | 
1833 | 4. **RGBA (Red, Green, Blue, Alpha):**
1834 | 
1835 | - Подібно до RGB, але з додаванням каналу прозорості (alpha) від 0 (повністю прозорий) до 1 (непрозорий).
1836 | 
1837 | Наприклад:
1838 | 
1839 | ```css
1840 | color: rgba(255, 87, 51, 0.5);
1841 | ```
1842 | 
1843 | 5. **HSL (Hue, Saturation, Lightness):**
1844 | 
1845 | - Визначається за допомогою відтінку (hue), насиченості (saturation) та яскравості (lightness).
1846 | 
1847 | Наприклад:
1848 | 
1849 | ```css
1850 | color: hsl(12, 100%, 60%);
1851 | ```
1852 | 
1853 | 6. **HSLA (Hue, Saturation, Lightness, Alpha):**
1854 | 
1855 | - Як HSL, але з каналом прозорості.
1856 | 
1857 | Наприклад:
1858 | 
1859 | ```css
1860 | color: hsla(12, 100%, 60%, 0.5);
1861 | ```
1862 | 
1863 | 7. **CSS-Gradients:**
1864 | 
1865 | - Колір може бути визначений за допомогою градієнтів.
1866 | 
1867 | Наприклад:
1868 | 
1869 | ```css
1870 | background: linear-gradient(to right, red, yellow);
1871 | ```
1872 | 
1873 | 8. **Прозорі кольори:**
1874 | 
1875 | - Використовуємо ключові слова для заданого рівня прозорості.
1876 | 
1877 | Наприклад:
1878 | 
1879 | ```css
1880 | color: transparent;
1881 | ```
1882 | 
1883 | Ці методи дозволяють задавати кольори на різні випадки та з різними рівнями контролю над прозорістю.
1884 | 
1885 | </details>
1886 | 
1887 | <details>
1888 | <summary>47. Які CSS-властивості використовуються для створення анімацій та плавних переходів?</summary>
1889 | 
1890 | #### CSS
1891 | 
1892 | - Для створення анімацій та плавних переходів у CSS використовуються такі властивості:
1893 | 
1894 | 1. **Плавні переходи (`transition`)**
1895 | 
1896 | - Дозволяють змінювати значення властивостей із плавною анімацією.
1897 | 
1898 | **Основні властивості:**
1899 | 
1900 | - `transition-property` – яка властивість анімується.
1901 | - `transition-duration` – час анімації.
1902 | - `transition-timing-function` – крива прискорення (наприклад, `ease`, `linear`, `ease-in-out`).
1903 | - `transition-delay` – затримка перед анімацією.
1904 | 
1905 | #### Приклад:
1906 | 
1907 | ```css
1908 | button {
1909 |   background-color: blue;
1910 |   transition: background-color 0.3s ease-in-out;
1911 | }
1912 | 
1913 | button:hover {
1914 |   background-color: red;
1915 | }
1916 | ```
1917 | 
1918 | 2. **Анімації (`@keyframes` + `animation`)**
1919 | 
1920 | - Дозволяють створювати складніші анімації зі зміною стилів у ключових точках.
1921 | 
1922 | **Основні властивості:**
1923 | 
1924 | `animation-name` – ім'я анімації (відповідає @keyframes).
1925 | `animation-duration` – тривалість анімації.
1926 | `animation-timing-function` – крива прискорення.
1927 | `animation-delay` – затримка перед початком.
1928 | `animation-iteration-count` – кількість повторень (infinite для безкінечної анімації).
1929 | `animation-direction` – напрям (normal, reverse, alternate).
1930 | `animation-fill-mode` – визначає, чи зберігається стан анімації після завершення.
1931 | 
1932 | #### Приклад:
1933 | 
1934 | ```css
1935 | @keyframes fadeIn {
1936 |   from {
1937 |     opacity: 0;
1938 |   }
1939 |   to {
1940 |     opacity: 1;
1941 |   }
1942 | }
1943 | 
1944 | .element {
1945 |   animation: fadeIn 1s ease-in-out;
1946 | }
1947 | ```
1948 | 
1949 | #### Що використовувати?
1950 | 
1951 | - `transition` – якщо треба просто змінювати стилі при наведенні або зміні класу.
1952 | - `animation` – якщо потрібен складніший ефект з кількома ключовими кадрами.
1953 | 
1954 | </details>
1955 | 
1956 | <details>
1957 | <summary>48. Різниця між псевдокласами та псевдоелементами?</summary>
1958 | 
1959 | #### CSS
1960 | 
1961 | - Різниця між псевдокласами і псевдоелементами полягає у їхньому призначенні та способі застосування:
1962 | 
1963 | #### Псевдокласи
1964 | 
1965 | - Псевдокласи застосовуються для вибору елементів на основі їхнього стану або взаємодії з користувачем, а не через структуру HTML. Вони дозволяють стилізувати елементи в певних умовах.
1966 | 
1967 | **Приклади псевдокласів:**
1968 | 
1969 | - `:hover` — для елементів, на які наводиться курсор.
1970 | 
1971 | ```css
1972 | button:hover {
1973 |   background-color: blue;
1974 | }
1975 | ```
1976 | 
1977 | - `:focus` — для елементів, на які надано фокус (наприклад, поля введення).
1978 | 
1979 | ```css
1980 | input:focus {
1981 |   border-color: green;
1982 | }
1983 | ```
1984 | 
1985 | - `:nth-child()` — для вибору елементів за їхнім порядковим номером серед батьків.
1986 | 
1987 | ```css
1988 | li:nth-child(odd) {
1989 |   background-color: lightgray;
1990 | }
1991 | ```
1992 | 
1993 | #### Псевдоелементи
1994 | 
1995 | - Псевдоелементи дозволяють стилізувати частини елементів або додавати вміст, який не існує в HTML. Вони створюють віртуальні елементи для маніпуляцій із частинами контенту.
1996 | 
1997 | **Приклади псевдоелементів:**
1998 | 
1999 | - `::before`— додає вміст перед вмістом елемента.
2000 | 
2001 | ```css
2002 | p::before {
2003 |   content: "→ ";
2004 |   color: green;
2005 | }
2006 | ```
2007 | 
2008 | - `::after` — додає вміст після вмісту елемента.
2009 | 
2010 | ```css
2011 | p::after {
2012 |   content: " ←";
2013 |   color: red;
2014 | }
2015 | ```
2016 | 
2017 | - `::first-letter` — для стилізації першої літери елемента.
2018 | 
2019 | ```css
2020 | p::first-letter {
2021 |   font-size: 2em;
2022 |   color: blue;
2023 | }
2024 | ```
2025 | 
2026 | #### Ключова різниця:
2027 | 
2028 | - Псевдокласи працюють з станом елементів (наприклад, під час наведеного курсору або фокуса).
2029 | 
2030 | - Псевдоелементи дозволяють додавати вміст до елементів або стилізувати їх частини (наприклад, перша буква чи передвміст).
2031 | 
2032 | #### Важливе зауваження:
2033 | 
2034 | - Псевдокласи використовують один знак двокрапки (:), але для псевдоелементів традиційно використовують два знаки двокрапки (::). Тому сучасні стандарти рекомендують використовувати :: для псевдоелементів (але підтримка : для псевдоелементів залишається).
2035 | 
2036 | </details>
2037 | 
2038 | <details>
2039 | <summary>49. Розкажіть про псевдоклас :has()?</summary>
2040 | 
2041 | #### CSS
2042 | 
2043 | - `:has()` – **потужний CSS-псевдоклас**
2044 |   - `:has()` — це "батьківський селектор", який дозволяє стилізувати елемент, що містить певні дочірні елементи.
2045 | 
2046 | #### Як працює?
2047 | 
2048 | Цей псевдоклас перевіряє, чи містить елемент певний вкладений елемент, і застосовує до нього стилі.
2049 | 
2050 | #### Приклад: змінюємо стиль картки, якщо в ній є зображення
2051 | 
2052 | ```css
2053 | .card:has(img) {
2054 |   border: 2px solid blue;
2055 | }
2056 | ```
2057 | 
2058 | Якщо `.card` містить `<img>`, то отримає синю рамку.
2059 | 
2060 | #### Приклади використання
2061 | 
2062 | 1. Виділення `<input>` в контейнері, що містить кнопку "`submit`"
2063 | 
2064 | ```css
2065 | .form:has(button[type="submit"]) {
2066 |   background-color: lightgray;
2067 | }
2068 | ```
2069 | 
2070 | - Сірий фон застосовується тільки до .form, якщо в ній є кнопка submit.
2071 | 
2072 | 2. Приховуємо кнопку, якщо інпут порожній
2073 | 
2074 | ```css
2075 | button:has(+ input:placeholder-shown) {
2076 |   display: none;
2077 | }
2078 | ```
2079 | 
2080 | - Кнопка буде схована, доки користувач не введе текст в інпут.
2081 | 
2082 | 3. Вибір батьківського елемента списку, якщо він містить активний пункт
2083 | 
2084 | ```css
2085 | .nav:has(.active) {
2086 |   background-color: black;
2087 | }
2088 | ```
2089 | 
2090 | - Якщо .nav містить .active елемент, змінюється фон.
2091 | 
2092 | #### Підтримка браузерами
2093 | 
2094 | ✅ Chrome, Edge, Safari (з 2023 року)
2095 | ❌ Firefox (станом на 2025 рік досі немає підтримки)
2096 | 
2097 | - Поліфілів немає, тому варто перевіряти підтримку перед використанням.
2098 | 
2099 | #### Висновок
2100 | 
2101 | - `:has()` дає можливість змінювати батьківський елемент на основі його вмісту.
2102 | - Робить CSS динамічнішим, замінюючи деякі JavaScript-маніпуляції.
2103 | - Потрібно враховувати обмежену підтримку в Firefox.
2104 | 
2105 | </details>
2106 | 
2107 | <details>
2108 | <summary>50. Проблеми з використанням CSS-in-JS? Як їх вирішити?</summary>
2109 | 
2110 | #### CSS
2111 | 
2112 | - **Проблеми CSS-in-JS і способи їх вирішення**
2113 | 
2114 |   - CSS-in-JS — потужний підхід для стилізації в React та інших фреймворках, але він має серйозні недоліки, які потрібно враховувати.
2115 | 
2116 | 1. Погана продуктивність (перформанс)
2117 | 
2118 | - ❌ Проблема:
2119 | 
2120 |   - Динамічні стилі створюються під час рендеру, що сповільнює завантаження сторінки.
2121 |   - Генерація стилів на клієнті збільшує TTI (Time to Interactive).
2122 | 
2123 | - ✅ Рішення:
2124 | 
2125 |   - Використовувати статичні стилі там, де це можливо (styled-components з as="tag").
2126 |   - Переносити стилі на сервер (SSR) з styled-components або emotion.
2127 | 
2128 | ```tsx
2129 | import { ServerStyleSheet } from "styled-components";
2130 | ```
2131 | 
2132 | - Використовувати CSS Modules або Tailwind для критичних стилів.
2133 | 
2134 | 2. Великі розміри бандлу
2135 | 
2136 | - ❌ Проблема:
2137 | 
2138 |   - CSS-in-JS додає зайвий код у JavaScript-бандл.
2139 |   - Використання бібліотек (styled-components, emotion) збільшує розмір пакета.
2140 | 
2141 | - ✅ Рішення:
2142 | 
2143 |   - Використовувати Linaria або Astro (CSS-in-JS без рантайму).
2144 |   - Використовувати компіляцію під час білду (наприклад, babel-plugin-styled-components).
2145 |   - Використовувати css prop у emotion, який генерує мінімальний CSS.
2146 | 
2147 | 3. Проблеми з специфічністю CSS
2148 | 
2149 | - ❌ Проблема:
2150 | 
2151 |   - CSS-in-JS генерує унікальні класи, але бувають колізії.
2152 |   - Не можна легко перевизначити стилі без !important.
2153 | 
2154 | - ✅ Рішення:
2155 | 
2156 |   - Використовувати theme-based стилі через контекст.
2157 |   - Використовувати as або css для стилізації без перезапису класів.
2158 | 
2159 | ```tsx
2160 | <Button as="a" href="/">
2161 |   Link
2162 | </Button>
2163 | ```
2164 | 
2165 | 4. Відсутність інтуїтивного автодоповнення в IDE
2166 | 
2167 | - ❌ Проблема:
2168 | 
2169 |   - IDE не завжди правильно підказує стилі всередині JS.
2170 |   - Слабка підтримка підсвітки синтаксису в деяких редакторах.
2171 | 
2172 | - ✅ Рішення:
2173 | 
2174 |   - Використовувати VSCode-плагіни для styled-components або emotion.
2175 |   - Використовувати TypeScript + CSS Variables.
2176 | 
2177 | 5. Труднощі з анімаціями
2178 | 
2179 | - ❌ Проблема:
2180 | 
2181 |   - CSS-in-JS не завжди добре працює з keyframes.
2182 |   - Анімації можуть генеруватися кожен рендер.
2183 | 
2184 | - ✅ Рішення:
2185 | 
2186 |   - Використовувати keyframes правильно:
2187 | 
2188 | ```tsx
2189 | import { keyframes } from "styled-components";
2190 | 
2191 | const fadeIn = keyframes`  from { opacity: 0; }
2192 |   to { opacity: 1; }`;
2193 | 
2194 | const AnimatedDiv = styled.div`
2195 |   animation: ${fadeIn} 1s ease-in-out;
2196 | `;
2197 | ```
2198 | 
2199 | - Використовувати Framer Motion або GSAP замість CSS-in-JS анімацій.
2200 | 
2201 | #### Висновок
2202 | 
2203 | - ✅ CSS-in-JS зручно для компонентного підходу, але:
2204 | 
2205 |   - Має проблеми продуктивності → вирішується SSR або компіляцією.
2206 |   - Збільшує розмір бандлу → можна мінімізувати Linaria/Astro.
2207 |   - Проблеми з специфічністю → використовувати as, теми та контекст.
2208 |   - Автодоповнення не завжди працює → плагіни VSCode + TS.
2209 | 
2210 | Для великих проєктів варто комбінувати CSS-in-JS з CSS Modules, Tailwind або ванільним CSS.
2211 | 
2212 | </details>
2213 | 
2214 | <details>
2215 | <summary>51. Що означає CSS і яке його основне використання?</summary>
2216 | 
2217 | #### CSS
2218 | 
2219 | - CSS (Cascading Style Sheets) – це мова стилів, яка використовується для опису зовнішнього вигляду HTML-документів. Основне використання – керування стилями елементів, такими як кольори, шрифти, відступи, розміри та розташування на сторінці.
2220 | 
2221 | </details>
2222 | 
2223 | <details>
2224 | <summary>52. Які способи підключення CSS до HTML ти знаєш?</summary>
2225 | 
2226 | #### CSS
2227 | 
2228 | - Є три способи:
2229 | 
2230 | 1. **Вбудований (Inline CSS)** – через атрибут `style` в HTML-елементі:
2231 | 
2232 | ```html
2233 | <p style="color: red;">Текст</p>
2234 | ```
2235 | 
2236 | 2. **Вбудований блок (Internal CSS)** – у `<style>` всередині `<head>`:
2237 | 
2238 | ```html
2239 | <head>
2240 |   <style>
2241 |     p {
2242 |       color: red;
2243 |     }
2244 |   </style>
2245 | </head>
2246 | ```
2247 | 
2248 | 3. **Зовнішній файл (External CSS)** – підключення окремого `.css` файлу через `<link>`:
2249 | 
2250 | ```html
2251 | <head>
2252 |   <link rel="stylesheet" href="styles.css" />
2253 | </head>
2254 | ```
2255 | 
2256 | </details>
2257 | 
2258 | <details>
2259 | <summary>53. Яка різниця між селекторами класу та ID</summary>
2260 | 
2261 | #### CSS
2262 | 
2263 | - **Селектор класу (`.`)**
2264 | 
2265 |   - Використовується для стилізації групи елементів.
2266 |   - Позначається крапкою (`.`) перед назвою класу.
2267 |   - Один клас можна застосувати до багатьох елементів.
2268 | 
2269 | #### Приклад:
2270 | 
2271 | ```html
2272 | <p class="text">Це параграф</p>
2273 | ```
2274 | 
2275 | ```css
2276 | .text {
2277 |   color: blue;
2278 | }
2279 | ```
2280 | 
2281 | - **Селектор ID (`#`)**
2282 | 
2283 |   - Використовується для унікального елемента на сторінці.
2284 |   - Позначається решіткою (#) перед назвою ID.
2285 |   - Один ID має бути лише в одному елементі.
2286 | 
2287 | #### Приклад:
2288 | 
2289 | ```html
2290 | <p id="unique-text">Це унікальний параграф</p>
2291 | ```
2292 | 
2293 | ```css
2294 | #unique-text {
2295 |   color: red;
2296 | }
2297 | ```
2298 | 
2299 | #### Основні відмінності між селекторами класу та ID
2300 | 
2301 | | Характеристика            | Клас (`.`)      | ID (`#`)                     |
2302 | | ------------------------- | --------------- | ---------------------------- |
2303 | | **Призначення**           | Група елементів | Унікальний елемент           |
2304 | | **Повторне використання** | Так             | Ні (повинен бути унікальним) |
2305 | | **Специфічність**         | Менша           | Вища                         |
2306 | 
2307 | </details>
2308 | 
2309 | <details>
2310 | <summary>54. Що таке псевдокласи в CSS?</summary>
2311 | 
2312 | #### CSS
2313 | 
2314 | - Псевдокласи в CSS – це спеціальні ключові слова, які додаються до селекторів і дозволяють стилізувати елементи в залежності від їхнього стану або положення в DOM.
2315 | 
2316 | #### Приклади псевдокласів:
2317 | 
2318 | - `:hover` – застосовується, коли користувач наводить курсор на елемент.
2319 | - `:focus` – активується, коли елемент отримує фокус.
2320 | - `:nth-child(n)` – вибирає елементи за їхньою позицією серед братніх елементів.
2321 | - `:first-child` – вибирає перший дочірній елемент.
2322 | - `:last-child` – вибирає останній дочірній елемент.
2323 | - `:checked` – застосовується до вибраних чекбоксів або радіокнопок.
2324 | 
2325 | #### Приклад використання:
2326 | 
2327 | ```css
2328 | button:hover {
2329 |   background-color: blue;
2330 |   color: white;
2331 | }
2332 | 
2333 | input:focus {
2334 |   border: 2px solid green;
2335 | }
2336 | 
2337 | li:nth-child(2) {
2338 |   font-weight: bold;
2339 | }
2340 | ```
2341 | 
2342 | #### Важливі особливості:
2343 | 
2344 | - Псевдокласи не змінюють HTML-структуру, а лише впливають на стилізацію.
2345 | - Можна комбінувати кілька псевдокласів для одного елемента.
2346 | 
2347 | </details>
2348 | 
2349 | <details>
2350 | <summary>55. Опишіть, як реалізувати скидання CSS і чому це корисно.</summary>
2351 | 
2352 | #### CSS
2353 | 
2354 | 1. `Normalize.css` — не прибирає все, а уніфікує:
2355 | 
2356 | - Підключаєш файл:
2357 | 
2358 | ```html
2359 | <link
2360 |   rel="stylesheet"
2361 |   href="https://necolas.github.io/normalize.css/latest/normalize.css"
2362 | />
2363 | ```
2364 | 
2365 | - Перевага — зберігає корисні стилі, робить вигляд однаковим у всіх браузерах.
2366 | 
2367 | 2. `Eric Meyer Reset` — агресивне скидання:
2368 | 
2369 | ```css
2370 | html,
2371 | body,
2372 | div,
2373 | span,
2374 | applet,
2375 | object,
2376 | iframe,
2377 | h1,
2378 | h2,
2379 | h3,
2380 | h4,
2381 | h5,
2382 | h6,
2383 | p,
2384 | blockquote,
2385 | pre,
2386 | a,
2387 | abbr,
2388 | acronym,
2389 | address,
2390 | big,
2391 | cite,
2392 | code,
2393 | ... {
2394 |   margin: 0;
2395 |   padding: 0;
2396 |   border: 0;
2397 |   font-size: 100%;
2398 |   font: inherit;
2399 |   vertical-align: baseline;
2400 | }
2401 | ```
2402 | 
2403 | - Мінус: треба переписувати багато стилів з нуля.
2404 | 
2405 | 3. Modern CSS Reset — компактна сучасна версія:
2406 | 
2407 | ```css
2408 | *,
2409 | *::before,
2410 | *::after {
2411 |   box-sizing: border-box;
2412 | }
2413 | 
2414 | html,
2415 | body {
2416 |   margin: 0;
2417 |   padding: 0;
2418 |   height: 100%;
2419 | }
2420 | 
2421 | img,
2422 | picture,
2423 | video,
2424 | canvas,
2425 | svg {
2426 |   display: block;
2427 |   max-width: 100%;
2428 | }
2429 | 
2430 | input,
2431 | button,
2432 | textarea,
2433 | select {
2434 |   font: inherit;
2435 | }
2436 | ```
2437 | 
2438 | - Ціль — контроль. Без скидання різні браузери дають різні стилі. Це зламає дизайн.
2439 | 
2440 | #### Користь:
2441 | 
2442 | - Усуває розбіжності в дефолтних стилях між браузерами. Дає чисту стартову точку. Менше багів, стабільніше верстання.
2443 | 
2444 | </details>
2445 | 
2446 | <details>
2447 | <summary>56. Як ви вибираєте елементи за атрибутами в CSS?</summary>
2448 | 
2449 | #### CSS
2450 | 
2451 | - Звернення до атрибутів пишемо у квадратних дужках:
2452 | 
2453 | ```css
2454 | /* Всі лінки, що відкриваються в новій вкладці */
2455 | a[target="_blank"] {
2456 |   color: red;
2457 | }
2458 | 
2459 | /* Всі інпути з атрибутом required */
2460 | input[required] {
2461 |   border: 2px solid orange;
2462 | }
2463 | 
2464 | /* Всі кнопки зі специфічним типом */
2465 | button[type="submit"] {
2466 |   background-color: green;
2467 | }
2468 | 
2469 | /* Всі зображення з alt, що містить слово "logo" */
2470 | img[alt*="logo"] {
2471 |   width: 150px;
2472 | }
2473 | ```
2474 | 
2475 | </details>
2476 | 
2477 | <details>
2478 | <summary>57. Що таке псевдоелементи і для чого вони використовуються?</summary>
2479 | 
2480 | #### CSS
2481 | 
2482 | - Псевдоелементи — це спецконструкції для стилізації частин елементів, яких нема в HTML.
2483 | 
2484 | **Використовуються для:**
2485 | 
2486 | - додавання контенту (`::before`, `::after`)
2487 | 
2488 | - стилізації першої літери або рядка (`::first-letter`, `::first-line`)
2489 | 
2490 | - кастомізації `::placeholder` в інпутах
2491 | 
2492 | **Приклад:**
2493 | 
2494 | ```css
2495 | p::first-line {
2496 |   font-weight: bold;
2497 | }
2498 | 
2499 | button::after {
2500 |   content: " →";
2501 | }
2502 | ```
2503 | 
2504 | - Це дає гнучкість без зайвого HTML.
2505 | 
2506 | </details>
2507 | 
2508 | <details>
2509 | <summary>58. Поясніть різницю між дочірнім комбінатором і нащадком комбінатора.</summary>
2510 | 
2511 | #### CSS
2512 | 
2513 | - **Дочірній комбінатор** (`>`) — стилізує тільки безпосереднього потомка.
2514 | - **Нащадок комбінатор** (`пробіл`) — стилізує будь-якого нащадка на будь-якій глибині.
2515 | 
2516 | #### Приклад:
2517 | 
2518 | ```css
2519 | /* Дочірній комбінатор */
2520 | div > p {
2521 |   color: blue;
2522 | }
2523 | 
2524 | /* Нащадок комбінатор */
2525 | div p {
2526 |   color: red;
2527 | }
2528 | ```
2529 | 
2530 | - У першому випадку — тільки ті `<p>`, що прямо всередині `<div>`.
2531 | - У другому — всі `<p>`, навіть вкладені через кілька рівнів.
2532 | 
2533 | </details>
2534 | 
2535 | <details>
2536 | <summary>59. Як би ви вибрали всі прямі дочірні елементи певного типу?</summary>
2537 | 
2538 | #### CSS
2539 | 
2540 | - Через дочірній комбінатор `>`.
2541 | 
2542 | #### Приклад:
2543 | 
2544 | ```css
2545 | ul > li {
2546 |   list-style: none;
2547 | }
2548 | ```
2549 | 
2550 | - Вибере тільки ті `<li>`, які безпосередньо всередині `<ul>`.
2551 | 
2552 | </details>
2553 | 
2554 | <details>
2555 | <summary>60. Що таке універсальний селектор і однорідний комбінатор, і коли ви їх використаєте?</summary>
2556 | 
2557 | #### CSS
2558 | 
2559 | - **Універсальний селектор** (`*`) — вибирає всі елементи.
2560 | 
2561 | - **Однорідний комбінатор** (`+`) — вибирає елемент, що безпосередньо слідує за іншим.
2562 | 
2563 | #### Коли використовую:
2564 | 
2565 | `*` — для глобального скидання стилів:
2566 | 
2567 | ```css
2568 | * {
2569 |   margin: 0;
2570 |   padding: 0;
2571 | }
2572 | ```
2573 | 
2574 | `+` — для стилізації сусідніх елементів, наприклад:
2575 | 
2576 | ```css
2577 | h1 + p {
2578 |   margin-top: 0;
2579 | }
2580 | ```
2581 | 
2582 | - Працюють швидко, якщо не зловживати.
2583 | 
2584 | </details>
2585 | 
2586 | <details>
2587 | <summary>61. Що таке CSS Box Model?</summary>
2588 | 
2589 | #### CSS
2590 | 
2591 | - **CSS Box Model** — це структура кожного елемента у вигляді прямокутника, що складається з чотирьох шарів:
2592 | 
2593 | 1. `Content` — сам вміст (текст, зображення).
2594 | 
2595 | 2. `Padding` — відступи всередині рамки, навколо контенту.
2596 | 
2597 | 3. `Border` — рамка навколо паддінгу і контенту.
2598 | 
2599 | 4. `Margin` — зовнішній відступ від інших елементів.
2600 | 
2601 | - Без розуміння **_Box Model_** верстати нормально не вийде.
2602 | 
2603 | </details>
2604 | 
2605 | <details>
2606 | <summary>62. Поясніть що таке Margin Collapsing.</summary>
2607 | 
2608 | #### CSS
2609 | 
2610 | - **Margin Collapsing** — це коли вертикальні зовнішні відступи двох елементів зливаються в один.
2611 | 
2612 | - Бере більший з двох `margin`, а не сумує їх.
2613 | 
2614 | #### Приклад:
2615 | 
2616 | ```html
2617 | <div style="margin-bottom: 20px;"></div>
2618 | <div style="margin-top: 30px;"></div>
2619 | ```
2620 | 
2621 | - Відстань між дивами буде `30px`, а не `50px`.
2622 | 
2623 | - Працює тільки вертикально.
2624 | 
2625 | </details>
2626 | 
2627 | <details>
2628 | <summary>63. Які є значення і властивості box-sizing і що вони роблять?</summary>
2629 | 
2630 | #### CSS
2631 | 
2632 | - **Властивість: box-sizing.**
2633 | 
2634 | - Значення:
2635 | 
2636 |   - `content-box` — ширина і висота враховують тільки контент, `padding` і `border` додаються окремо.
2637 | 
2638 |   - `border-box` — ширина і висота включають контент, `padding` і `border`.
2639 | 
2640 | </details>
2641 | 
2642 | <details>
2643 | <summary>64. Як відцентрувати <div> за допомогою CSS?</summary>
2644 | 
2645 | #### CSS
2646 | 
2647 | - Щоб відцентрувати `<div>` за допомогою `CSS`, можна використовувати кілька підходів. Ось найбільш популярні:
2648 | 
2649 | 1. За допомогою `margin: auto` (для блочних елементів з заданою шириною):
2650 | 
2651 | ```css
2652 | .element {
2653 |   width: 50%;
2654 |   margin: 0 auto;
2655 | }
2656 | ```
2657 | 
2658 | 2. `Flexbox` (центрування в контейнері):
2659 | 
2660 | ```css
2661 | .container {
2662 |   display: flex;
2663 |   justify-content: center;
2664 |   align-items: center;
2665 |   height: 100vh;
2666 | }
2667 | 
2668 | .element {
2669 |   width: 50%;
2670 | }
2671 | ```
2672 | 
2673 | 3. `Grid` (центрування в контейнері):
2674 | 
2675 | ```css
2676 | .container {
2677 |   display: grid;
2678 |   place-items: center;
2679 |   height: 100vh;
2680 | }
2681 | 
2682 | .element {
2683 |   width: 50%;
2684 | }
2685 | ```
2686 | 
2687 | 4. Абсолютне позиціонування з `transform` для точного центрування:
2688 | 
2689 | ```css
2690 | .container {
2691 |   position: relative;
2692 |   height: 100vh;
2693 | }
2694 | 
2695 | .element {
2696 |   position: absolute;
2697 |   top: 50%;
2698 |   left: 50%;
2699 |   transform: translate(-50%, -50%);
2700 |   width: 50%;
2701 | }
2702 | ```
2703 | 
2704 | - Ці методи дозволяють вам відцентрувати `<div>` по горизонталі та/або вертикалі в залежності від вимог.
2705 | 
2706 | </details>
2707 | 
2708 | <details>
2709 | <summary>65. Яка різниця між block, inline, і inline-block  елементами?</summary>
2710 | 
2711 | #### CSS
2712 | 
2713 | - Різниця така:
2714 | 
2715 |   - **block** — займає всю ширину батьківського елемента, починається з нового рядка. Можна задавати `ширину`, `висоту`, `margin`, `padding`.
2716 | 
2717 |   - **inline** — займає тільки ширину свого контенту, не переноситься на новий рядок. Ширину й висоту задавати неможливо (ігноруються).
2718 | 
2719 |   - **inline-block** — поводиться як **inline** (на одному рядку з іншими), але дозволяє задавати `ширину`, `висоту`, `margin`, `padding` як **block**.
2720 | 
2721 | </details>
2722 | 
2723 | <details>
2724 | <summary>66. Поясніть різні значення властивості position.</summary>
2725 | 
2726 | #### CSS
2727 | 
2728 | - Властивість position в CSS визначає метод позиціонування елемента в документі. Вона має кілька значень, кожне з яких поводиться по-різному:
2729 | 
2730 | 🔹 `static` (за замовчуванням)
2731 | Опис: Елемент розташовується у нормальному потоці документу.
2732 | 
2733 | Не працюють: top, right, bottom, left, z-index.
2734 | 
2735 | ```css
2736 | .element {
2737 |   position: static;
2738 | }
2739 | ```
2740 | 
2741 | 🔹 `relative`
2742 | Опис: Елемент залишається у своєму звичному місці, але його можна зсунути відносно цього місця за допомогою top, left, right, bottom.
2743 | 
2744 | Зручно: для створення позиціонованих "контейнерів" для absolute.
2745 | 
2746 | ```css
2747 | .element {
2748 |   position: relative;
2749 |   top: 10px; /* зсувається вниз */
2750 |   left: 20px; /* зсувається вправо */
2751 | }
2752 | ```
2753 | 
2754 | 🔹 `absolute`
2755 | Опис: Елемент вилучається з нормального потоку й позиціонується відносно найближчого предка з position: relative|absolute|fixed|sticky.
2756 | 
2757 | Якщо таких предків нема — позиціонується відносно body.
2758 | 
2759 | ```css
2760 | .wrapper {
2761 |   position: relative;
2762 | }
2763 | 
2764 | .element {
2765 |   position: absolute;
2766 |   top: 0;
2767 |   right: 0;
2768 | }
2769 | ```
2770 | 
2771 | 🔹 `fixed`
2772 | Опис: Елемент фіксується відносно вікна браузера (viewport).
2773 | 
2774 | Залишається на місці при прокручуванні.
2775 | 
2776 | ```css
2777 | .element {
2778 |   position: fixed;
2779 |   bottom: 0;
2780 |   right: 0;
2781 | }
2782 | ```
2783 | 
2784 | 🔹 `sticky`
2785 | Опис: Гібрид relative та fixed.
2786 | 
2787 | Елемент поводиться як relative, поки не досягне певної позиції при прокрутці — після цього стає fixed.
2788 | 
2789 | ```css
2790 | .element {
2791 |   position: sticky;
2792 |   top: 0; /* стане фіксованим, коли дійде до верху */
2793 | }
2794 | ```
2795 | 
2796 | </details>
2797 | 
2798 | <details>
2799 | <summary>67. Опишіть z-індекс і те, як порядок стекування контролюється в CSS.</summary>
2800 | 
2801 | #### CSS
2802 | 
2803 | - В CSS z-індекс (z-index) визначає порядок розташування елементів по осі Z — тобто, хто буде «над» ким на екрані.
2804 | 
2805 | #### 🧱 Основи стекування (stacking)
2806 | 
2807 | Усі елементи на сторінці утворюють stacking context (контекст накладання), де визначається порядок накладання (тобто, що зверху, а що знизу).
2808 | 
2809 | 🔹 `z-index`
2810 | Це числове значення, яке вказує порядок стекування елементів. Чим більше значення — тим вище елемент у візуальному стеку.
2811 | 
2812 | ```css
2813 | .box {
2814 |   position: absolute;
2815 |   z-index: 10;
2816 | }
2817 | ```
2818 | 
2819 | ⚠️ z-index працює тільки на елементах з position значенням relative, absolute, fixed, або sticky.
2820 | 
2821 | #### 🔢 Як формується стек:
2822 | 
2823 | 1. Контекст накладання (stacking context) починається з html, але може створюватись новими елементами за певних умов.
2824 | 
2825 | 2. Новий контекст створюється, коли:
2826 | 
2827 | - Елемент має position (relative, absolute, fixed, sticky) + z-index, відмінний від auto.
2828 | 
2829 | - opacity < 1
2830 | 
2831 | - transform, filter, perspective, will-change, mix-blend-mode і т.д.
2832 | 
2833 | #### 📚 Приклад стекування
2834 | 
2835 | ```html
2836 | <div class="container">
2837 |   <div class="box box--red"></div>
2838 |   <div class="box box--blue"></div>
2839 | </div>
2840 | ```
2841 | 
2842 | ```css
2843 | .container {
2844 |   position: relative;
2845 | }
2846 | 
2847 | .box {
2848 |   position: absolute;
2849 |   width: 100px;
2850 |   height: 100px;
2851 | }
2852 | 
2853 | .box--red {
2854 |   background: red;
2855 |   top: 0;
2856 |   left: 0;
2857 |   z-index: 1;
2858 | }
2859 | 
2860 | .box--blue {
2861 |   background: blue;
2862 |   top: 20px;
2863 |   left: 20px;
2864 |   z-index: 2;
2865 | }
2866 | ```
2867 | 
2868 | 🔎 Тут синій блок буде зверху, бо має більший z-index.
2869 | 
2870 | #### 🪜 Пріоритети стекування (спрощено)
2871 | 
2872 | У межах одного stacking context елементи розташовуються так:
2873 | 
2874 | 1. `z-index`: negative — позаду всіх
2875 | 
2876 | 2. `z-index`: auto (блоки без явного індексу)
2877 | 
2878 | 3. `z-index`: 0 і вище — зверху
2879 | 
2880 | #### 📌 Поради:
2881 | 
2882 | - Уникай зайвого використання високих z-index (типу 9999). Краще керуй контекстом.
2883 | 
2884 | - Створюй окремі stacking context-и для складних компонентів (наприклад, модальних вікон).
2885 | 
2886 | - Використовуй BEM або семантичні класи, щоб зрозуміло керувати елементами в контексті.
2887 | 
2888 | </details>
2889 | 
2890 | <details>
2891 | <summary>68. Як створити sticky footer за допомогою CSS?</summary>
2892 | 
2893 | #### CSS
2894 | 
2895 | - Щоб створити sticky footer (футер, що прилипає до низу сторінки, навіть якщо контенту мало), можна скористатися Flexbox-макетом. Це сучасний, простий і стабільний підхід.
2896 | 
2897 | #### ✅ Готове рішення з поясненням:
2898 | 
2899 | ```html
2900 | <!DOCTYPE html>
2901 | <html lang="uk">
2902 |   <head>
2903 |     <meta charset="UTF-8" />
2904 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
2905 |     <title>Sticky Footer</title>
2906 |     <style>
2907 |       * {
2908 |         margin: 0;
2909 |         padding: 0;
2910 |         box-sizing: border-box;
2911 |       }
2912 | 
2913 |       html,
2914 |       body {
2915 |         height: 100%;
2916 |       }
2917 | 
2918 |       .layout {
2919 |         min-height: 100%;
2920 |         display: flex;
2921 |         flex-direction: column;
2922 |       }
2923 | 
2924 |       .main {
2925 |         flex: 1;
2926 |       }
2927 | 
2928 |       .footer {
2929 |         background-color: #333;
2930 |         color: white;
2931 |         padding: 20px;
2932 |         text-align: center;
2933 |       }
2934 |     </style>
2935 |   </head>
2936 |   <body>
2937 |     <div class="layout">
2938 |       <main class="main">
2939 |         <p>Контент сторінки (може бути короткий)</p>
2940 |       </main>
2941 |       <footer class="footer">
2942 |         <p>Я — футер. Я завжди внизу!</p>
2943 |       </footer>
2944 |     </div>
2945 |   </body>
2946 | </html>
2947 | ```
2948 | 
2949 | #### 🧠 Як це працює:
2950 | 
2951 | - html, body → мають height: 100% — дозволяє контейнеру .layout зайняти всю висоту.
2952 | 
2953 | - .layout → display: flex; flex-direction: column — компоненти йдуть вертикально.
2954 | 
2955 | - .main → flex: 1 — займає всю доступну висоту, «виштовхує» футер вниз.
2956 | 
2957 | - .footer → автоматично лишається внизу, навіть коли мало контенту.
2958 | 
2959 | </details>
2960 | 
2961 | <details>
2962 | <summary>69. ???</summary>
2963 | 
2964 | #### CSS
2965 | 
2966 | - Coming Soon... 😎
2967 | 
2968 | </details>
2969 | 


--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
 1 | # 🔒 Security Policy
 2 | 
 3 | ## Reporting a Vulnerability
 4 | 
 5 | If you discover a security issue in any of my projects, I would greatly appreciate your help in resolving it responsibly. Here's how you can report it:
 6 | 
 7 | 1. **Contact me:**  
 8 |    Please send an email to **[victor.svertoka@icloud.com](mailto:victor.svertoka@icloud.com)** with:
 9 | 
10 |    - A clear description of the issue.
11 |    - Steps to reproduce the vulnerability.
12 |    - Any relevant code or logs for better understanding.
13 | 
14 | 2. **Handling process:**
15 | 
16 |    - I will acknowledge your report within **48 hours**.
17 |    - Together, we will work on resolving the issue as quickly as possible.
18 | 
19 | 3. **Confidentiality:**  
20 |    Please keep the details of the vulnerability private until it has been resolved.
21 | 
22 | Your cooperation helps ensure the safety and security of my work. Thank you for contributing to a safer tech environment! 🙌
23 | 


--------------------------------------------------------------------------------
/assets/code.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevLoversTeam/css-interview-questions/eb2413582b9b3cb19ddb967593fe9a16a446cdbf/assets/code.png


--------------------------------------------------------------------------------
/assets/css.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000" role="img" aria-labelledby="css-logo-title css-logo-description">
2 |   <title id="css-logo-title">CSS Logo</title>
3 |   <desc id="css-logo-description">A purple square with rounded corners and the letters CSS inside in white</desc>
4 |   <path id="bg" fill="#639" d="M0 0H840A160 160 0 0 1 1000 160V840A160 160 0 0 1 840 1000H160A160 160 0 0 1 0 840V0Z" />
5 |   <path id="fg" fill="#fff" d="M253 817V649c0-67 43-103 108-103 64-1 104 41 102 112h-74c2-27-10-47-30-46-25 0-32 17-32 49v146c0 31 10 46 32 47 23 0 32-23 30-49h74c4 73-42 116-107 115-63 0-103-35-103-103Zm237-12h69c1 32 11 52 33 52s30-13 30-43c0-25-11-39-38-52l-26-12c-46-22-65-49-65-103 0-60 38-102 100-102s95 43 96 113h-67c0-29-6-49-28-49-20 0-30 10-30 35s9 35 33 45l24 11c51 24 73 55 73 113 0 69-39 107-103 107s-100-44-101-115Zm226 0h70c0 32 11 52 32 52s30-13 30-43c0-25-10-39-38-52l-26-12c-46-22-64-49-64-103 0-60 37-102 100-102s94 43 96 113h-67c-1-29-7-49-29-49-20 0-29 10-29 35s8 35 32 45l25 11c50 24 72 55 72 113 0 69-39 107-103 107s-100-44-101-115Z" />
6 | </svg>
7 | 


--------------------------------------------------------------------------------