From 634976a174274e0763a2c09ac3b9d93a20a479ea Mon Sep 17 00:00:00 2001 From: Viktor Svertoka Date: Sun, 28 Dec 2025 22:43:11 +0200 Subject: [PATCH 01/24] feat(ui): add light/dark system favicons --- frontend/app/favicon.ico | Bin 6548 -> 0 bytes frontend/app/layout.tsx | 16 ++++++++++++++++ frontend/public/favicon-dark.svg | 6 ++++++ frontend/public/favicon-light.svg | 6 ++++++ frontend/public/github-logo.svg | 13 ------------- 5 files changed, 28 insertions(+), 13 deletions(-) delete mode 100644 frontend/app/favicon.ico create mode 100644 frontend/public/favicon-dark.svg create mode 100644 frontend/public/favicon-light.svg delete mode 100644 frontend/public/github-logo.svg diff --git a/frontend/app/favicon.ico b/frontend/app/favicon.ico deleted file mode 100644 index 4d903a04b5af7f9b9bba6413a9463d72c32c8a6c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6548 zcmcgx2RB?@7rrxuQKKZf@FIvVdWoJW!6Zs_MkG;&=)H{|go#)5o(Lk!D5EoDyoeCJ zLVF#u-~}Ss0f2=xPJCpnOGnK? zO&Zea>*<*Mo&9@3C`dP3pNbcMpFDkx%|IjX0&@X?T~S|0(=2FiuYmHcZEr?==mQP` z)MxfsLkdP(`y4LXK7^Eg{cEg%{=@`7NK1<*0Y)p|{lbx|uSy&Q?+~mC7?2-;{Y!t_VP0p7P0vo7NfzZ6AhFIOZZ>l{6UcCDiF7}&gK8_pbh{Hcse5kN& z0zp`SN5_J?hQcy`px>*G#J$*!0vQ)+8oJ7sXvd0DE8N)UQ#Dhx3o7&~BZT0qaqY1u zkOSsLhlJ}?P}WX}z6_TUryZ(J zm->8^_H@8IPus)A7#A}oWp&^CqZ46S2no&F;c0Eip<&s17O%&s{chykj3dM0u%lcC&vIj zVCg!8x|UxR?h}4-v5|q_+ylMxDIr+lTXEHs&Nu3NybblhDwpvgS)t+-WEw!dIN+GO zgL@uwA2RDysPC;XD_1!GJoXy?p)^z#i~wTKDwUbCu4Cju%_^ALqgr3TW?g^*5v9oZ zbqAMuO0ggr@hj})S#){|X@7Pe-p4oNq=m3^E0T2E5g}_Ld;nG(B)t8pJFVANfe+?+ zn6-aNS-JY*6#yWwVF}v!*rzoOPcbkJdd!!#eZjEr@2MV;;JZ${`smDX8Qs`@;?CB5 z1S1Hz!vyrGCve9UUnNK0!Drku79+8f9psGTf5pg_4RG;YaFL8y5R$QW>r3ATV&wu) zB#kz|aKzZ@02)aoUzoV}sH`%<-&mMdJ4H_QMy|!(5_>8vQnl%3k7-@j4XDT+h}A#B+6b`;4u)%SECp0F*%QF-Cwv%`udj;eDG*od)$ai{N_dW-cB%H&%Nxd z{R+n>*!zr5jaOBl&P4`aX??G(Gbc&fuuK6wYKSh!hoBd9TFMFJ;!HnXX`7mKd@Z~v zj{gC;t?PP^aG3k29(bSd8FJN>Ht&xOAH1!(D@Vp11V8TPg{=JfukJhXN%EwWCS87{ zVC|JrLb{YL^5CIG%5spIQo2xr*6)Gfs?6&)D^glsD#ocP$g5yoX4w8|7WGW!_wT{E z-TQ7XH4tZ&4wecTR9<(j45Rj>)#{4)v0xnFI%=2S}{qFf$bT6m7hFas}{j9zJilB{nvSc1wKhyKd zLOzeV^{-Lt)Mk{Su>lKpN~0%c2bWyUSj29w zjw6}J5(S;$Bs?B0pP7eV6Qgf z24>%k>uM0wuvH~rOQ!b)>Qd19WT2FmIQ>g(e&aSdnfYssESA;k*0OK-?@LzSeiwS& zTV)zP9)Ss#)*GR8f^jmi!lpFMQ6 z`2npcNyOlO0!3>RjGwaX#>C=Nrmnn`QoB84uftE?m!tXWgKu@3)7TiY?u%degg?$^ zo5(-1ym(O6C8%m0<7^nR*NN+ogWlnpi45$N_bVt)oik5reZTV>+6p>q+0v~&OXSttUVKdaM%ar7yUXKm}DD!b~7ztM#YsIB$FJ$^R+%qYr^hN z`ar9W1H5p2`{5tBCQGd``MC;x!^MrDtiodkVD>|TBBUuhe{Ff%N{oLJYxHzHG!x_h za&}`34TqV@&zsNOsgyQ=^7%HlBz=9mCp4wm|;Gp}0e|P@a}3 z1WRU}N(*wi2CDE+$}pBqP_FbCE!;e^zoh^^RVWhK7^FEua>`b37IOan;_fPanOC0VUrRHHy%pelv=6Z9{O}mSkpoN?lCDZq-M8S+py{Xbl z=M-ON8lyeM_z)zpaHWe(b7zM!Uy0Gvm|SZ8v|bGQxc(Q>#(vBhDlTZMK`NA|D;0YFCG!v9z<4Pamn`^7$L98LaZ|Awr&q}jzksw0hM$r%0OZAsD-O!>x8iHg z?h!M^x!+<^(+}cSxk)p;^dPocW3(&{mNVpLi^%%Y<4N}c$yUW{yZ}VQ@36MYv96b8 zIXx3DEqI1I0^MJ{x#MMN=c+C`EFvP%{4^qh9GP}Exq;s7}mqd&x%u*pq9@T`xV_?CfF3iIM3H|6v=L8M*zHBd>H+B zJ4TEXfq%($W!f#e{@?VA;LE@U+soH|awXk%JwAu8uZ37N|K=3E-QkRCG3geHCcu*A z-P--Xb9S3w0|_e_G|on!t@2KPU-5J|rDUcN<4%jRu`G-<U8D#R*L5Z{C`W~C>N>2_GBIh-~XuSujkkwbhX>K)J zfD`-$jY0pQWk%f8eWVU~;s@=lF22s+Uf?1-MrJ9YqQ*kpn~65gEZPNyHh%a(UHDc? zpkH}}upSj!%)0DiX35g>BmRs8oy~H~JFWMdolUX7&%;}1U%kJ)EmgBU&3vDzKJ{4b zlma(nMY7xqxK>=R*q-$AoIm1`n1ADN;Ej85q}r?dGSY23wUQlr?~82>&*$4r+doq} z7_By2*>1tQUp|2KUPl$KBZ@cmVNY5ngV6_?S=Uv9x>y6`Rv3u9rih=n`_nIJ&hE{T z9azpUVQAwtOnM|`!)K<-0!mhwJgFNC%Z;p+&n+G3W=hvBPcOzva;g4?V0(w)k$Wlh zMMCDFT;Nxh;S|Sl^@@NbZxiY&@elsL8a^YZTz9rb+B5i_VV!S|^J1O1X#SJHrNqJA zo~^w4**EEAl$$iQ*K`d=XE$_x)0l1a;$#UqH+XeLyP3Bbj z;bEiZ=z=%muSL#h@3mIc!fo0a5UsZ&s)A2=EDExXDbww@z#aOAy6TFX!dPQnyXaI% zGS%BW0?1Old!|b43;Xd!ZJH;GddiS z<@bPp<@T|wmTgu*VFfJ+Ug%n2>IxYH0&-OeO@jBai!t7zQA5W45a*d-{g_R*VDSB2 z8I1!$17d9q7((_v<4gw^zlLqHJ^9=lHL6o95|$K~nZmFfk)*NAC2R4T6O;7gh&R*1LDxVoHLw+D4&QKXCH;3d zKvRXgRK+S699{}E!zzXNxwDxC+yU)$a&SqTF8qGE&0wMM8zdz<$&}V}1m6>P9bKam(?d}X)JZuF#gLZ*&epsLw z9|IF&>gX)7H=DMWQQ~ISiMs5;yo*_7Eq-+R8jPE+A^($Zp_Ic!RRso~?arj~&MFoz zlc%rh8=5_6JguoQzrT)gdH`3TO0lIZQ#Pn* zRq@Ifcq`oKmv##*!Q~{A)Vk_JmH3CD8j4?;k6_p@nEmjZ5vmM`%`PY?9dw?o_(9J`FZIk(45 zPfOmtXBi_SiT(YCJZc`t?i0%k!JNwXBAMyoK4wd9XQ4$? z-@xP=6Y&RLZ!GJopk!RB$K#Fbx>lzdPFHvEy$2=Xi!aaejDQ6nh=#eNXPqk6H;ijp zFJP^#&^+C!vTR9~J-tM2G2uvo&Ud*zc(k0k@;VsS{%&}+OT_(i-P;KRgA-@J!#pOR zU-6ViYc3u0TpSjE=s==imGgz2`MtzyR9Qn?#RNqPO;liM1D zvkZo>)uT=wM08KrJ4X=OBwffxTg3+!g-CiFT7!`~pB7Km)k#8d*^jnN=g*g-$}z9% zrc=-H9pn3_7e$AN3#S+)mWeAre9D1T=ESK&3)ZKlT4NA_sOK4U7p zWd41}2m?1s`aurT0RCl9_ri|u-3d6}vlzOmy(Dw*xo;Fn&LyS{9^!2iADT`_3{5`2 zFqr$azz0AOl0qQnROQ);myM1bX>Eor*17rNBvNnUS;0NuVo zi-d`l^m?{Q2TrLSqUVD6Nq#Z$?5~&Rto{7#UngJL;{(tZ>HAN(ok>v>rWE1!REEEo z9k?Vfka6lPHFM)BVvMAyxmN?NCpB9>q<%;)Odf$;AAPi*N%%=Z(-7@q$~JKkvL3o^ zS=@OxJ%X!2l4#xG9=z2`u2O-gFFSeHYQkme|J!KzIo$9s*7x$Lo9MZhkwrADt}44< z`6KQ7`j|+RO_XZz8@TbB&UB8$6~XyWtd)B$zY>41lfEB7j@@^~nsF(AjPit)?4R3A zUS9oVzokwR++^G<8o;Hnt=ccL1ygd`X2wOXJNJ&A@uk}}MTeQ@XeR~R22PK;4dR?^ zCg=(16go(D@pduNx44Gk^{CUO%r<^WU@(xV);IKOC7d4oF`gfoVzO)!UFj0G<<_nV zEUmWM{A6+O;>?ieg!9{m&zwtNKxeEYM8g#!wC2ZJ&t2Z71|I#5=AHMb`!q+G^T9Ab3Ppp0<XRNLvDr)YBW0c4KZn5E? zkr=f!VfUN~uK#MTOy9`UV0kZYGgGh|Ss^!G5EJD>z^5y-sfG8NkLM}aBK5kK^Rwz{6&sM;V~1@CW6p*0kKyx`(7!DlTQKmKh&^<0?0TkV|0mQ!0$ zvv$C=>Ra$P-o=?AnY;GCT@DKY6^D$wJh2BVg|WT4OX0BMzRn4@fw~X%*1R4wUxq_e z!aCa^PH~vTl9`oq4njO2%Mj(5E5fcDn0Lmp{+z>(OJd=PqCsFxNr|bxHrR82zY`@R ztfHXRE}ZgMXld3uXQLr|cdxtHkek!MNpjaQ&Bxr^tL{NqCtsLZQ1Y~Ji%yVcEGzX$ z>GCTDFw6i`@a`8=!KdUni%nBPkM)lWZQT@84(~*J>9rGMr@$Cq!Du`IaTRgnn* zf`tJg6bt7Ah#2bKRbFNqQa-J$h51XZo*iI-HKSHS^OghYf??Oe zfQc{=2^o*5OOJrMOK{{7RY|V|fZ8X%P-+MkE7&Zk0#^usuL~d!z=S5R$lU60oz!cM zsQv~BK(GYtSuXk0-tFtaWU9Fu$w5FN6_$uMb8zoD_lJc^p~|*4ws3)ela~y1s?l)q zM5tZ1DIE*_s@}}H$V)n()Bu=JAXC?Edi*WTD=MwfA$0*r9q?1J7A+`b+uXmao%ejyN;)Dybb;l&Qy|2h5zJ> zsp{GIdldKHp9`I%ukJA2msBiG9Dn>Haz>mljg{YJ zRJUPS=BY-U9^>d7Gr3+nvSPG&S@ajp|MQ1JBgZ9A)6J?ynK~Vbzkc=a8|&0)!J_{M D<{|*t diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx index 9348a9e7..c92fb3b7 100644 --- a/frontend/app/layout.tsx +++ b/frontend/app/layout.tsx @@ -1,6 +1,22 @@ +import type { Metadata } from 'next'; import { Geist, Geist_Mono } from 'next/font/google'; import './globals.css'; +export const metadata: Metadata = { + icons: { + icon: [ + { + media: '(prefers-color-scheme: light)', + url: '/favicon-light.svg', + }, + { + media: '(prefers-color-scheme: dark)', + url: '/favicon-dark.svg', + }, + ], + }, +}; + const geistSans = Geist({ variable: '--font-geist-sans', subsets: ['latin'], diff --git a/frontend/public/favicon-dark.svg b/frontend/public/favicon-dark.svg new file mode 100644 index 00000000..9556091e --- /dev/null +++ b/frontend/public/favicon-dark.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/public/favicon-light.svg b/frontend/public/favicon-light.svg new file mode 100644 index 00000000..4efa52be --- /dev/null +++ b/frontend/public/favicon-light.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/public/github-logo.svg b/frontend/public/github-logo.svg deleted file mode 100644 index 69e6de32..00000000 --- a/frontend/public/github-logo.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - From c8c11a7db107baf76f464d5ee2a42b27732a9c57 Mon Sep 17 00:00:00 2001 From: Andrew Motko Date: Sun, 28 Dec 2025 23:25:39 +0200 Subject: [PATCH 02/24] add: html + react & 1/3CSS translations json --- frontend/parse/README.md | 8430 +++++------ frontend/parse/questions.json | 13419 +++++++++++++++++ frontend/parse/start.json | 22847 ++++++++++++++--------------- json/01-html.json | 17864 +++++++++++++++++++++++ json/05-react.json | 25165 ++++++++++++++++++++++++++++++++ 5 files changed, 70923 insertions(+), 16802 deletions(-) create mode 100644 json/01-html.json create mode 100644 json/05-react.json diff --git a/frontend/parse/README.md b/frontend/parse/README.md index fabf4c7a..14b1d110 100644 --- a/frontend/parse/README.md +++ b/frontend/parse/README.md @@ -1,6793 +1,5827 @@ -

- React -

- -

Найпопулярніші запитання та відповіді на співбесіді з React

-
-1. Що таке React? - -#### React - -React - це JavaScript-бібліотека для створення користувацьких інтерфейсів. -Основні характеристики: +1. Що таке CSS? І навіщо він використовується? -1. **Компонентний підхід:** UI розбивається на окремі компоненти, які можна - повторно використовувати. +#### CSS -2. **Virtual DOM:** Забезпечує ефективне оновлення інтерфейсу, мінімізуючи - маніпуляції з реальним DOM. - -3. **Декларативність:** Ви описуєте, як має виглядати UI в певному стані, а - React забезпечує його відповідність. - -4. **Однонаправлений потік даних:** Дані передаються згори донизу через props, - що спрощує контроль за станом. - -React створений Facebook і широко використовується для розробки SPA (Single Page Applications). +CSS (Cascading Style Sheets) — це мова стилів для опису вигляду веб-сторінок. +Використовується для розмітки елементів на сторінці, таких як шрифти, кольори, +відступи, позиціонування та інші візуальні аспекти. CSS дозволяє відокремити +контент (HTML) від стилів, що полегшує підтримку та зміну вигляду сайту.
-2. Перерахуйте особливості React? - -#### React +2. Що таке каскадність у CSS?? -1. **Компонентний підхід:** Код розділений на багаторазові, незалежні - компоненти. +#### CSS -2. **Віртуальний (Virtual) DOM:** Швидке оновлення інтерфейсу без прямого - маніпулювання DOM. +Каскадність у CSS — це механізм, який визначає, як застосовуються стилі до +елементів веб-сторінки, якщо для одного елемента задано кілька різних стилів із +різних джерел або рівнів. Вона дозволяє браузеру вирішити, які стилі будуть мати +вищий пріоритет і застосовуватися в кінцевому результаті. -3. **Односпрямований потік даних:** Дані передаються з батьківських компонентів - у дочірні через пропси. - -4. **JSX:** Розширення синтаксису JavaScript для написання UI у вигляді - XML-подібного коду. - -5. **Стан і життєвий цикл:** Компоненти можуть зберігати і управляти своїм - станом. - -6. **React Hooks:** Додають можливості роботи зі станом і побічними ефектами у - функціональних компонентах. - -7. **Екосистема:** Підтримує бібліотеки на кшталт React Router, Redux для - розширення функціоналу. +
-8. **SEO-френдлі (з Next.js):** Серверний рендеринг для кращої індексації. +
+3. Які є способи підключення CSS до HTML-документу? -9. **Мобільна розробка:** React Native дозволяє створювати мобільні додатки на - основі React. +#### CSS -10. **Відкритий код:** Активна підтримка спільноти. +- Вбудовані стилі (inline) — напряму в HTML-тегах через атрибут `style`. +- Внутрішні стилі — у секції ` ` всередині HTML-документа. +- Зовнішні стилі — у CSS-файлах, підключених через + `` або `@import`.
-3. Які основні функції React? - -#### React - -#### Основні функції React: +4. Що таке CSS-селектори? Наведіть приклади. -1. **Декларативний підхід:** React дозволяє створювати інтерактивний інтерфейс, описуючи, як він повинен -виглядати, а бібліотека сама оптимізує оновлення DOM. +#### CSS -2. **Компонентна структура:** Додаток будується з незалежних, багаторазових компонентів, які спрощують -розробку, тестування та підтримку. +CSS-селектори використовуються для вибору HTML-елементів, до яких застосовуються +стилі. -3. **Віртуальний DOM:** React використовує Virtual DOM для ефективного оновлення реального DOM, що -значно покращує продуктивність. +**Приклади:** -4. **Односпрямований потік даних:** Дані передаються від батьківських компонентів до дочірніх через props, що -спрощує управління станом. +- За тегом: `h1 { color: red; }` +- За класом: `.button { background: blue; }` +- За ID: `#header { padding: 10px; }` -5. **Хуки (Hooks):** Дозволяють використовувати стан і методи життєвого циклу у функціональних -компонентах. +**Комбіновані:** -6. **JSX:** Розширення JavaScript для опису UI в синтаксисі, схожому на HTML. +- Дочірні: `ul > li { margin: 5px; }` +- Нащадки: `div p { font-size: 14px; }` +- Атрибути: `[type="text"] { border: 1px solid gray; }` -7. **React Native:** Можливість створювати нативні мобільні додатки з використанням тих самих -принципів, що і для вебу. +**Псевдокласи:** -8. **Екосистема:** Великий набір бібліотек та інструментів, таких як React Router, Redux, Context -API. +- `a:hover { color: green; }` +- `:nth-child(2) { font-weight: bold; }` -9. **Підтримка серверного рендерингу (SSR):** Дозволяє оптимізувати SEO та прискорювати початкове завантаження сторінок. +**Псевдоелементи:** -10. **Управління станом:** За допомогою useState, Context API, Redux чи інших бібліотек. - -Ці функції роблять React потужною і гнучкою бібліотекою для створення сучасних додатків. +- `p::first-line { text-transform: uppercase; }`
-4. Які ключові переваги використання React? +5. Як працює наслідування в CSS? -#### React +#### CSS -#### Ключові переваги використання React +Наслідування в CSS дозволяє деяким властивостям автоматично передаватися від +батьківського елемента до дочірніх. -1. **Швидкість**: Завдяки Virtual DOM React мінімізує взаємодії з реальним DOM, - що підвищує продуктивність. +- **Особливості:** -2. **Компонентний підхід**: Код розбивається на багаторазово використовувані - компоненти, що спрощує розробку та підтримку. +1. Автоматично наслідуються тільки текстові та декоративні властивості: -3. **Одностороння передача даних**: Потік даних у React відбувається в одному - напрямку (зверху вниз), що полегшує дебагінг. +`color`, `font`, `visibility`, `line-height` тощо. -4. **Велика спільнота**: React має величезну екосистему бібліотек, інструментів - і розширень. +2. Не наслідуються автоматично властивості, що впливають на коробку (box model): -5. **Сумісність із мобільною розробкою**: Використовуючи React Native, можна - створювати кросплатформені мобільні додатки. +`margin`, `padding`, `border`, `width`, `heigh`t тощо. -6. **JSX**: Синтаксис, який дозволяє писати JavaScript разом із HTML, що - підвищує читабельність коду. +**Контроль наслідування:** -7. **Підтримка хуків**: Спрощення роботи зі станом та життєвим циклом у - функціональних компонентах. +1. **Примусове наслідування:** використовуйте значення inherit. -8. **SEO-дружність**: Серверний рендеринг за допомогою інструментів, таких як - Next.js, покращує SEO-оптимізацію. + ```css + p { + border: inherit; + } + ``` -9. **Гнучкість**: React можна інтегрувати в будь-який проєкт або фреймворк без - значних змін у коді. +2. **Відміна наслідування:** значення initial скидає властивість до початкового + (згідно стандарту). -10. **React DevTools**: Інструмент для налагодження, який дозволяє зручно - аналізувати компоненти та стан додатка. + ```css + p { + color: initial; + } + ```
-5. Що таке JSX? -#### React +6. Що таке «модель коробки» (box model) в CSS і як її можна змінити? -**JSX (JavaScript XML)** - це синтаксис, який дозволяє писати структури UI у вигляді XML-подібного коду всередині JavaScript. JSX є розширенням JavaScript і використовується в React для опису, як виглядає інтерфейс. +#### CSS -#### Основні особливості JSX: +«Модель коробки» (box model) визначає, як розміри елемента розраховуються в CSS. +Вона складається з: -1. **XML-подібний синтаксис:** Нагадує HTML, але використовується у JavaScript. +- **Content:** Вміст елемента (текст, зображення). +- **Padding:** Внутрішній відступ між вмістом і рамкою. +- **Border:** Рамка навколо padding. +- **Margin:** Зовнішній відступ між елементом і сусідніми елементами. -```jsx -const element = Hello, world!; -``` +Розрахунок ширини та висоти: -2. **Вбудований JavaScript:** Ви можете писати JavaScript-код у фігурних дужках - `{}`. +- За замовчуванням: -```jsx -const name = 'Alice'; -const element = Hello, {name}!; +```css +Width/Height = Content + Padding + Border ``` -3. **Трансляція:** JSX компілюється в звичайний JavaScript, використовуючи такі - бібліотеки, як Babel. +- Зміна моделі коробки: -```jsx -const element = Hello; -// Перетворюється в: -const element = React.createElement('h1', null, 'Hello'); -``` + Використовуйте властивість box-sizing: -4. **Атрибути:** Використовуються як у HTML, але замість `class` пишеться - `className`, а замість `for` - `htmlFor`. +1. content-box (за замовчуванням): -```jsx -const input = ; +Ширина/висота включає лише вміст. Padding і border додаються до загального +розміру. + +```css +box-sizing: content-box; ``` -5. **JSX повертає дерево елементів:** JSX-вираз може повертати лише один - кореневий елемент. Використовуйте `` або порожній тег `<>` - для групування. +2. border-box: -```jsx -return <>Title Description; +Ширина/висота включають вміст, padding і border (зручніше для макетів). + +```css +box-sizing: border-box; ``` -#### Переваги: +Приклад: -- Зручне створення UI-компонентів. -- Зрозумілий і читабельний синтаксис. -- Тісна інтеграція з JavaScript-логікою. +```css +* { + box-sizing: border-box; +} +``` -JSX не обов'язковий у React, але широко використовується через зручність і гнучкість. +Це допомагає уникнути помилок у розмітці.
-6. Різниця між станом (state) та пропсами (props)? +7. У чому різниця між margin і padding? -#### React +#### CSS -#### Різниця між станом (state) та пропсами (props) +Різниця між margin і padding: -| Критерій | State | Props | -| -------------------- | --------------------------------------------------------------------- | -------------------------------------------------------- | -| **Призначення** | Зберігає внутрішній стан компонента. | Передає дані від батьківського компонента до дочірнього. | -| **Змінюваність** | Може змінюватися всередині компонента. | Незмінні (read-only). | -| **Доступність** | Доступний тільки в компоненті, де визначений. | Доступний у дочірньому компоненті через атрибути. | -| **Ініціалізація** | Встановлюється в компоненті за допомогою `useState` або конструктора. | Визначається батьківським компонентом. | -| **Область використання** | Для збереження динамічних даних, що можуть змінюватися. | Для передачі фіксованих або динамічних даних. | -| **Хто керує?** | Компонент, у якому state визначений. | Батьківський компонент. | +1. Розташування: -
+ `margin` створює зовнішній відступ між елементом і сусідніми елементами. + `padding` створює внутрішній відступ між вмістом елемента і його рамкою + (border). -
-7. Яка різниця між елементом і компонентом? +2. Вплив на фон: + + `margin` не впливає на фон елемента; простір залишається прозорим. `padding` + є частиною елемента, тому фон розтягується на область padding. -#### React +3. Колізія (margin collapsing): -#### Різниця між елементом і компонентом у React: + `margin` сусідніх блоків може "зливатися" в один (найбільший). `padding` не + зливається; завжди додається до внутрішнього простору. -| Критерій | Елемент | Компонент | -| --------------------------- | ---------------------------------------------------- | -------------------------------------------------------------------------------------------------- | -| **Визначення** | Об'єкт, що описує, як має виглядати інтерфейс. | Функція або клас, який повертає React-елементи. | -| **Тип** | Нероздільний (immutable). | Багаторазовий і може мати стан (state). | -| **Синтаксис створення** | `React.createElement` або JSX (`
`). | Функція або клас (`function MyComponent() {}` або `class MyComponent extends React.Component {}`). | -| **Призначення** | Представляє окремий вузол у DOM. | Інкапсулює логіку та структуру інтерфейсу. | -| **Можливість використання** | Використовується для створення UI на базовому рівні. | Використовується для побудови складних структур із бізнес-логікою. | -| **Приклад** | `

Hello

` | `function Hello() { return

Hello

; }` | +Приклад: -Елемент - це "будівельний блок", а компонент - "конструктор" для створення складних інтерфейсів. +```css +div { + margin: 20px; /* Відступ від інших елементів */ + padding: 20px; /* Відступ між вмістом і рамкою */ + background-color: lightblue; +} +```
-8. Як створити компоненти в React? +8. Що таке Flexbox? -#### React +#### CSS -#### У React компоненти можна створювати двома способами: +Flexbox (Flexible Box Layout) — це CSS-модель розташування елементів, яка +забезпечує гнучке вирівнювання та розподіл простору в межах контейнера, навіть +якщо розміри елементів невідомі або змінюються. -1. **Функціональний компонент:** Це проста функція, яка повертає React-елементи. +**Основні поняття:** -```jsx -function Greeting(props) { - return Hello, {props.name}!; -} +**Flex-контейнер:** Батьківський елемент, на який застосовується +`display: flex;`. **Flex-елементи:** Дочірні елементи flex-контейнера. -// Використання: -; -``` +**Основні властивості Flexbox:** -2. **Класовий компонент:** Це клас, який успадковується від React.Component і обов’язково має метод render. +Для контейнера: -```jsx -class Greeting extends React.Component { - render() { - return Hello, {this.props.name}!; - } -} +- `flex-direction`: Напрямок розташування елементів (`row`, `row-reverse`, + `column`, `column-reverse`). +- `justify-content`: Горизонтальне вирівнювання елементів (`flex-start`, + `center`, `space-between`, `space-around`, `space-evenly`). +- `align-items`: Вертикальне вирівнювання елементів (`stretch`, `center`, + `flex-start`, `flex-end`, `baseline`). +- `align-content`: Вирівнювання рядків у багаторядковому контейнері (`stretch`, + `center`, `space-between`). +- `flex-wrap`: Дозволяє елементам переноситися (`nowrap`, `wrap`, + `wrap-reverse`). -// Використання: -; -``` +Для елементів: -#### Відмінності: +- `flex-grow`: Як елемент збільшується вільним простором. +- `flex-shrink`: Як елемент зменшується при нестачі простору. +- `flex-basis`: Базовий розмір елемента перед розподілом простору. +- `align-self`: Вирівнювання конкретного елемента всередині контейнера. -- Функціональні компоненти простіші та краще підходять для компонентів без стану. +- Приклад: -- Класові компоненти використовуються для складніших компонентів із власним станом або методами життєвого циклу. + ```css + .container { + display: flex; + justify-content: center; + align-items: center; + } -**Примітка:** Сучасний підхід передбачає використання функціональних компонентів із хуками замість класових. + .item { + flex: 1; /* Рівний розподіл простору */ + } + ```
-9. Що таке стан (state) у React? +9. Що таке Grid? -#### React +#### CSS -**Стан (state)** у React - це об'єкт, який використовується для зберігання даних, що можуть змінюватися з часом, і впливають на рендеринг компонента. Стан дозволяє компонентам React бути динамічними і реагувати на події, введення користувача тощо. +CSS Grid — це потужна система розмітки, яка дозволяє створювати двовимірні сітки +для розташування елементів як по горизонталі, так і по вертикалі. -#### Особливості стану: +**Основні поняття:** -1. **Локальний для компонента:** Стан доступний тільки в тому компоненті, де він визначений. +- **Grid-контейнер:** Елемент, на який застосовується `display: grid;`. +- **Grid-елементи:** Дочірні елементи grid-контейнера. +- **Лінії сітки:** Вертикальні та горизонтальні межі, що ділять сітку на + осередки. +- **Треки:** Рядки (`rows`) і колонки (`columns`). +- **Області:** Прямокутні зони, об'єднані з кількох осередків. +- **Основні властивості Grid:** -2. **Змінюється асинхронно:** React об'єднує виклики `setState` для оптимізації рендерингу. +Для контейнера: -3. **Ініціалізується в конструкторі** (для класових компонентів) або через `useState` (у функціональних компонентах). +- `grid-template-rows`, `grid-template-columns`: Задають кількість і розміри + рядків та колонок. +- `grid-template-areas`: Іменовані області для організації елементів. +- `gap` (або `row-gap/column-gap`): Відступи між рядками та колонками. +- `justify-items`, `align-items`: Вирівнювання елементів у клітинках. +- `justify-content`, `align-content`: Вирівнювання всієї сітки в контейнері. -#### У класових компонентах: +Для елементів: -```jsx -class Counter extends React.Component { - constructor(props) { - super(props); - this.state = { count: 0 }; - } +- `grid-column`, `grid-row`: Позиціювання по колонках і рядках. +- `grid-area`: Розміщення в іменованій області. +- `place-self`: Індивідуальне вирівнювання елемента. - increment = () => { - this.setState({ count: this.state.count + 1 }); - }; +Приклад: - render() { - return ( +```css +.container { + display: grid; + grid-template-columns: 1fr 2fr; /* Дві колонки: 1 частина та 2 частини */ + grid-template-rows: 100px auto; /* Рядок фіксованої висоти і автоматичний */ + gap: 10px; +} - Count: {this.state.count} - Increment +.item1 { + grid-column: 1 / 3; /* Займає дві колонки */ +} - ); - } +.item2 { + grid-row: 2; /* Розташований у другому рядку */ } ``` -#### У функціональних компонентах (з хуком `useState`): +
-```jsx -import React, { useState } from 'react'; +
+10. Що таке медіазапити та як їх використовувати? -function Counter() { - const [count, setCount] = useState(0); +#### CSS - return ( +Медіазапити — це умови, які дозволяють застосовувати різні стилі в залежності +від характеристик пристрою (наприклад, розміру екрану, орієнтації). Вони +використовуються в CSS через правило @media. - Count: {count} -
-10. Що таке пропси (props) в React? - -#### React +11. Як можна приховати елемент за допомогою CSS? -**Пропси (props)** в React - це об'єкт, який містить дані, що передаються від - батьківського компонента до дочірнього. Вони використовуються для налаштування - компонентів і є незмінними (immutable). +#### CSS -#### Особливості пропсів: +Щоб приховати елемент за допомогою CSS, можна використовувати: -1. **Передаються зверху вниз** (унідіrectional data flow) - від батьківського - компонента до дочірнього. +- `display: none;` — видаляє елемент з потоку документа. Він не займає місця на + сторінці і з ним не можна взаємодіяти. +- `visibility: hidden;` — елемент стає невидимим, але зберігає своє місце на + сторінці. +- `opacity: 0;` — робить елемент прозорим, але він залишається видимим і займає + місце на сторінці. -2. **Незмінні** - компонент не може змінювати отримані пропси. - -3. **Динамічні** - значення пропсів можуть змінюватися, якщо змінюються дані в - батьківському компоненті. +
-#### Використання пропсів: +
+12. Як можна зробити лого посередині екрана? + +#### CSS + +Щоб розмістити лого посередині екрана, можна використати такі способи: + +1. Flexbox: + + ```css + body, + html { + height: 100%; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + } + + .logo { + /* стилі лого */ + } + ``` + +2. Grid: + + ```css + body, + html { + height: 100%; + margin: 0; + display: grid; + place-items: center; + } + + .logo { + /* стилі лого */ + } + ``` + +3. Absolute позиціювання: + + ```css + body, + html { + height: 100%; + margin: 0; + position: relative; + } + + .logo { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + ``` -1. **У функціональному компоненті:** +
-```jsx -function Welcome(props) { - return Hello, {props.name}!; -} +
+13. Як розмістити хрестик для закриття справа зверху елемента? -// Використання: -; -``` +#### CSS -2. **У класовому компоненті:** +Щоб розмістити хрестик для закриття в правому верхньому куті елемента, можна +використати абсолютне позиціювання: -```jsx -Копіювати; -Редагувати; -class Welcome extends React.Component { - render() { - return Hello, {this.props.name}!; - } +```css +.container { + position: relative; /* щоб хрестик позиціонувався відносно контейнера */ } -// Використання: -; -``` - -#### Передача пропсів: - -```jsx -function App() { - return ( - - ); +.close-btn { + position: absolute; + top: 10px; /* відстань від верхнього краю */ + right: 10px; /* відстань від правого краю */ + cursor: pointer; /* щоб курсор змінювався при наведенні */ } ``` -**Результат:** - -```bash -Hello, Alice! -Hello, Bob! +```html +
+
×
+ +
``` -#### Деструктуризація пропсів: +
-```jsx -function Welcome({ name }) { - return Hello, {name}!; -} -``` +
+14. Як зробити останній елемент списку червоним, незалежно від довжини списку без JS? -#### Значення пропсів за замовчуванням: +#### CSS -```jsx -function Welcome({ name = 'Guest' }) { - return Hello, {name}!; -} +- Щоб зробити останній елемент списку червоним без JavaScript, можна використати + псевдоклас `:last-child:`. +- Це правило зробить останній елемент у будь-якому списку (незалежно від його + довжини) червоним. -// Використання: -; // Виведе: Hello, Guest! -``` + ```css + ul li:last-child { + color: red; + } + ``` -Пропси забезпечують компонентам React гнучкість і можливість повторного використання. +- Це правило зробить останній елемент у будь-якому списку (незалежно від його + довжини) червоним.
-11. Навіщо потрібен атрибут key при рендері списків? +15. Які є можливості задати колір? -#### React +#### CSS -Атрибут `key` використовується для ідентифікації елементів у списках під час рендеру. +У CSS є кілька способів задати колір: -#### Призначення: +1. Ім’я кольору: -1. ***Оптимізація оновлень:*** React використовує `key` для ефективного оновлення інтерфейсу, швидко визначаючи, які елементи змінити, додати або видалити. + ```css + color: red; + ``` -2. ***Запобігання зайвим рендерам:*** `key` допомагає уникнути перерендеру незмінених елементів. +2. Шістнадцятковий код: -3. ***Збереження стану компонентів:*** Наприклад, якщо елемент списку містить форму, `key` дозволяє React зберігати її стан між оновленнями. + ```css + color: #ff0000; /* червоний */ + ``` -#### Правильне використання: +3. RGB (Red, Green, Blue): -- Значення `key` має бути унікальним серед братніх елементів. + ```css + color: rgb(255, 0, 0); /* червоний */ + ``` -- Найкраще підходять стабільні ідентифікатори (наприклад, `id` з бази даних). +4. RGBA (Red, Green, Blue, Alpha): -- Не рекомендується використовувати індекс масиву як `key`, оскільки це може - призвести до помилок при зміні порядку елементів. + ```css + color: rgba(255, 0, 0, 0.5); /* червоний з прозорістю */ + ``` -```jsx -const items = ['Apple', 'Banana', 'Cherry']; -return ( +5. HSL (Hue, Saturation, Lightness): - {items.map((item, index) => ( - {item} // Унікальний key для кожного елемента - ))} + ```css + color: hsl(0, 100%, 50%); /* червоний */ + ``` -); -``` +6. HSLA (Hue, Saturation, Lightness, Alpha): + + ```css + color: hsla(0, 100%, 50%, 0.5); /* червоний з прозорістю */ + ``` + +7. Ключові слова прозорості: + + ```css + color: transparent; /* прозорий */ + ``` + +Ці способи дозволяють вибирати колір за різними параметрами: від прямого опису +кольору до використання прозорості або відтінків.
-12. Як передаються дані між компонентами у React +16. Що таке z-index? Чи кожен елемент його має? -#### React +#### CSS -У React дані передаються між компонентами за ієрархією наступним чином: +`z-index` — це властивість CSS, яка визначає порядок накладання елементів по осі +Z (глибина, перетин елементів). Елементи з більшим `z-index` накладаються поверх +елементів з меншим значенням. -#### Передача даних вниз (від батьківського компонента до дочірнього) +- **Особливості:** -Для передачі даних вниз використовується props. Батьківський компонент передає значення або функції через атрибути дочірньому компоненту. +1. Тільки для позиційованих елементів: `z-index` працює, якщо елемент має + `position`: `relative`, `absolute`, `fixed` або `sticky`. Без цього `z-index` + ігнорується. -**Приклад:** - -```jsx -function ParentComponent() { - const data = 'Hello from Parent'; +2. Значення за замовчуванням: Якщо `z-index` не задано, значення за + замовчуванням — `auto`. У такому випадку порядок накладання визначається + порядком у DOM. - return; -} +3. Може бути від’ємним: Елементи з від’ємним `z-index` можуть накладатися позаду + батьківських елементів. -function ChildComponent({ message }) { - return { message }; -} -``` +- Приклад: -`message` передає значення `data` в дочірній компонент `ChildComponent`. + ```css + .div1 { + position: relative; + z-index: 10; /* цей елемент буде поверх */ + } -У дочірньому компоненті доступ до пропсів відбувається через параметр функції або `this.props` у класовому компоненті. + .div2 { + position: relative; + z-index: 5; /* цей елемент буде під div1 */ + } + ``` -#### Передача даних вгору (від дочірнього компонента до батьківського) +
-Дані передаються вгору за допомогою callback-функцій. Батьківський компонент передає функцію дочірньому, а той викликає її з потрібними даними. +
+17. Які переваги і недоліки використання CSS-препроцесорів? -**Приклад:** +#### CSS -```jsx -function ParentComponent() { - const handleData = childData => { - console.log('Data from child:', childData); - }; +**Переваги CSS-препроцесорів:** - return ; -} +1. **Змінні:** Легко створювати глобальні змінні для кольорів, шрифтів, + розмірів. -function ChildComponent({ sendData }) { - const data = 'Hello from Child'; + ```css + $primary-color: #3498db; - return
-13. Чому React використовує className замість атрибута класу? +18. Для чого існують різні рівні заголовків, якщо розмір можна встановити стилями? -#### React +#### CSS -У React використовується `className` замість `class`, тому що `class` є зарезервованим ключовим словом у JavaScript. +Рівні заголовків (`

–

`) мають інше призначення, окрім визначення +розміру. Їхня основна функція — структуризація контенту для семантики та +доступності: -#### Причини: +1. **Семантика:** Заголовки формують ієрархію документа. Наприклад: -1. **Уникнення конфліктів** – `class` використовується для визначення класів у - JavaScript (`class MyComponent {}`), що могло б викликати синтаксичні - помилки. +`

` — головна тема сторінки. `

` — підрозділ теми `

`. `

` — +підрозділ `

`, і так далі. -2. **Сумісність з JSX** – JSX є синтаксичним розширенням JavaScript, тому - використання `className` допомагає уникнути неоднозначностей. +2. **SEO:** Пошукові системи (Google, Bing) використовують заголовки для + розуміння структури і змісту сторінки. Коректна ієрархія заголовків підвищує + релевантність сторінки. -3. **Пряме відображення** у `document.createElement` – React перетворює JSX у - виклики `React.createElement`, і для встановлення класів у DOM-елементах - використовується `className`. +3. **Доступність:** Екранні читачі для людей із порушеннями зору використовують + заголовки для навігації по сторінці. -#### Приклад: +4. **Стандарти:** Використання заголовків за призначенням робить код зрозумілим + для інших розробників. -```jsx -// Коректний варіант у React +Розмір заголовків можна стилізувати за допомогою CSS, але правильне використання +тегів забезпечує краще розуміння і роботу сторінки. -Hello; +

-// Некоректний варіант (синтаксична помилка) +
+19. Які є варіанти позиціонування елемента на сторінці? -Hello; -``` +#### CSS -Це стандарт React, який гарантує стабільність і узгодженість у коді. +У CSS є кілька варіантів позиціонування елементів: -
+1. `static` (за замовчуванням): Елемент розташовується в потоці документа + відповідно до порядку в HTML. Немає можливості змінювати його положення через + властивості top, right, bottom, left. -
-14. Які є винятки щодо іменування компонентів React? +2. `relative`: Елемент залишається в потоці документа, але його положення можна + змінити відносно початкової позиції за допомогою top, right, bottom, left. + +3. `absolute`: Елемент вилучається з потоку і позиціонується відносно + найближчого батьківського елемента з позиціюванням (relative, absolute, + fixed). Якщо такого немає, то відносно всього документа. + +4. `fixed`: Елемент вилучається з потоку і закріплюється відносно вікна + браузера. Його положення не змінюється при прокручуванні сторінки. -#### React +5. `sticky`: Комбінація relative і fixed. Елемент позиціонується відносно потоку + документа, поки не досягне заданого порогу (top, bottom тощо), після чого + "прилипає" до цього порогу при прокручуванні. -В React є кілька важливих правил і винятків щодо іменування компонентів: +6. `inherit`, `initial`, `unset`: -1. **Великі літери для компонентів:** Імена компонентів повинні починатися з - великої літери. Це обов'язково, щоб React міг відрізнити компоненти від - стандартних HTML-елементів. +- inherit — наслідує значення від батьківського елемента. +- initial — скидає до значення за замовчуванням (static). +- unset — застосовує inherit або initial залежно від контексту. - Наприклад: - - Правильно: `` - - Неправильно: `` +- Кожен варіант використовується залежно від завдання: від базового розташування + до складного позиціонування в макетах. -2. **CamelCase:** Рекомендується використовувати стиль CamelCase для імен - компонентів. Це означає, що кожне нове слово в імені компонента починається з - великої літери: +
-- `MyComponent` -- `UserProfile` +
+20. Які бувають види display? Який використовуєте найчастіше? У чому особливість inline-block? -3. **Назви не повинні співпадати з HTML-елементами:** Не використовуйте імена - компонентів, які співпадають з тегами стандартних HTML-елементів, такими як - `div`, `span`, `button`, тощо. Це може викликати конфлікти та непередбачувану - поведінку: +#### CSS -- Правильно: `` -- Неправильно: `
+- Поєднує особливості block і inline. +- Елемент розташовується в рядку, але дозволяє задавати ширину, висоту, + відступи. +- Зручний для створення кнопок, тегів. -
-15. Як писати коментарі в React? +**`flex`**: -#### React +- Відображає елемент як контейнер для гнучкого компонування дочірніх елементів. +- Використовується для вирівнювання та розподілу простору між елементами. -В React коментарі пишуться так само, як і в JavaScript, але є певні нюанси, коли мова йде про JSX. +**`grid`**: -1. **Коментарі в JavaScript (за межами JSX)** +- Задає контейнер для компонування в двовимірній сітці. +- Зручний для складних макетів. -```javascript -// Однорядковий коментар +**`none`**: -/* -Багаторядковий коментар -*/ -``` +- Елемент не відображається на сторінці. -2. **Коментарі всередині JSX** +**`inline-flex` / `inline-grid`**: -- У JSX необхідно використовувати спеціальний синтаксис, оскільки JSX є частиною - JavaScript. +- Аналогічні flex і grid, але зберігають властивості inline. -- Коментарі в JSX потрібно писати всередині фігурних дужок `{}`: +**`table` / `table-row` / `table-cell`**: -```jsx -function MyComponent() { - return ( +- Елементи імітують поведінку таблиць HTML. - {/_ Це коментар всередині JSX _/} - Hello, world! +**Найчастіше використовується:** - ); -} -``` +- block, inline-block, flex, і grid — залежно від завдань. +- inline-block популярний для створення кнопок або елементів меню, які потрібно + розташувати в рядок, але контролювати їх розміри. -- Коментарі в JSX повинні бути оточені `{/* коментар */}`, інакше вони - викликають помилки. +**Особливість inline-block:** -- Вони можуть бути використані тільки всередині виразів JSX. +- Елементи розташовуються в рядок, як inline, але поводяться як block, + дозволяючи задавати ширину, висоту, та всі відступи. +- Проблема: між елементами може з’явитися проміжок (через пробіли в HTML). -3. **Коментарі в функціях та методах** +- Виправляється: + - Видаленням пробілів у коді. + - Встановленням font-size: 0 для батьківського контейнера. -- Для коментарів всередині функцій або методів можна використовувати стандартні - JavaScript коментарі: +
-```jsx -function MyComponent() { - // Ось тут ми рендеримо компонент - return Hello, world!; -} -``` +
+21. Що таке CSS-правило? -#### Висновок: +#### CSS + +CSS-правило складається з селектора та блоку декларацій. Селектор визначає, до +яких елементів на сторінці застосовуються стилі, а блок декларацій містить +властивості та їх значення, що визначають вигляд цих елементів. Наприклад: -- У JSX використовуйте `{/* коментар */}`. +```css +p { + color: red; + font-size: 16px; +} +``` -- У звичайному JavaScript - `//` для однорядкових і `/* ... */` для - багаторядкових коментарів. +Тут `p` — селектор (вибирає всі абзаци), а в блоці декларацій вказано, що текст +буде червоним і розмір шрифту 16px.
-16. Що таке Virtual DOM в React? +22. Варіанти додавання CSS стилів на сторінку? -#### React +#### CSS -**Virtual DOM** - це віртуальне представлення реального DOM, яке React використовує для ефективного оновлення інтерфейсу. +1. **Inline CSS:** Стилі додаються безпосередньо до HTML елементів через атрибут + `style`. -#### Як працює в React: +```html +

Text

+``` -1. **Рендеринг у Virtual DOM:** При зміні стану або пропсів компонентів React - оновлює Virtual DOM. +2. **Internal CSS:** Стилі додаються в ` +``` -3. **Оновлення реального DOM:** Виявлені зміни застосовуються до реального DOM, - зводячи до мінімуму кількість маніпуляцій. +3. **External CSS:** Стилі прописуються в окремому CSS файлі, який підключається + до HTML через тег ``. -#### Основна перевага: +```html + +``` -Оптимізація оновлень DOM, що значно покращує продуктивність додатків. +Ці варіанти відрізняються за пріоритетом і зручністю для масштабування проектів.
-17. Що таке (key) prop і яка перевага його використання в масивах елементів? +23. Типи позиціонування у CSS? -#### React +#### CSS -У React prop `key` використовується для ідентифікації кожного елементу в списках або масивах, щоб допомогти React ефективно керувати рендерами при зміні або оновленні елементів списку. Це важливо для оптимізації процесу рендерингу, -особливо коли список змінюється (елементи додаються, видаляються або змінюються). +1. **static:** За замовчуванням для всіх елементів. Елементи розташовуються в + нормальному потоці документа (тобто, згідно з їх порядком у HTML). -#### Основні моменти щодо `key`: +2. **relative:** Елемент розташовується відносно його початкового положення в + потоці. Можна використовувати властивості `top`, `right`, `bottom`, `left`. -1. **Унікальність:** Кожен елемент у списку повинен мати унікальний `key`. Це - дозволяє React відстежувати, які елементи змінюються, додаються або - видаляються, а також зберігати їх стан між рендерами. +3. **absolute:** Елемент позиціонується відносно найближчого батьківського + елемента з позиціонуванням (не `static`). Якщо такого немає, то відносно + документа. -2. **Оптимізація рендерингу:** Використання key дозволяє React мінімізувати - кількість ререндерів, виконуючи тільки необхідні зміни в DOM. Без `key`, - React має важчий час для відстеження змін, що призводить до повного - повторного рендерингу списку, навіть якщо тільки один елемент змінився. +4. **fixed:** Елемент позиціонується відносно вікна браузера, тобто він + залишатиметься на тому ж місці при прокручуванні сторінки. -3. **Природа key:** Prop `key` не передається в компонент, тому його не можна - використовувати для відображення значень в UI. Це тільки інтерналізована - властивість, що використовується React для відстеження елементів. +5. **sticky:** Елемент поводиться як relative до певного моменту, після чого + стає fixed, коли прокручують сторінку до заданого порогу. -#### Приклад використання `key` в списку: - -```jsx -const items = ['apple', 'banana', 'cherry']; +
-function FruitList() { - return ( +
+24. Блокова модель CSS? - {items.map((item, index) => ( - {item} // Важливо: використовувати унікальний key - ))} +#### CSS - ); -} -``` +Блокова модель CSS (Box Model) описує, як елементи розташовуються на +веб-сторінці та як обчислюються їх розміри. Вона включає такі компоненти: -#### Важливість унікальності `key`: +1. **Content (Контент):** Це основна частина елемента, де міститься текст або + інші медіа. Розміри контенту визначаються властивостями `width` і `height`. -- **Неправильне використання:** Якщо у якості key використовувати неунікальні значення (наприклад, однаковий index), React не зможе коректно відстежувати зміни, і це призведе до помилок в рендерингу. +2. **Padding (Відступи):** Простір між контентом і межами елемента (border). + Відступи додаються всередині елемента. Властивості: `padding-top`, + `padding-right`, `padding-bottom`, `padding-left`. -- **Ідеальний key:** Зазвичай, якщо є унікальний ідентифікатор елемента (наприклад, id), він повинен бути використаний як key замість індексу масиву. +3. **Border (Межа):** Лінія, яка оточує елемент. Може мати товщину, стиль та + колір. Властивості: `border-width`, `border-style`, `border-color`. -```jsx -const items = [ - { id: 1, name: 'apple' }, - { id: 2, name: 'banana' }, - { id: 3, name: 'cherry' }, -]; +4. **Margin (Зовнішній відступ):** Простір між елементом і його сусідніми + елементами. Відступи додаються зовні елемента. Властивості: `margin-top`, + `margin-right`, `margin-bottom`, `margin-left`. -function FruitList() { - return ( +- Коли вказуються розміри елемента через `width` і `height`, вони зазвичай + враховують тільки `content`, але при додаванні `padding`, `border` і `margin`, + розміри елемента змінюються. - {items.map(item => ( - {item.name} // Краще використовувати унікальні id - ))} +- Важливо знати, що властивість `box-sizing` дозволяє визначати, як враховуються + ці величини при обчисленні розмірів елемента: - ); -} -``` + - `content-box` (за замовчуванням): розміри елемента — це тільки контент. -#### Переваги використання `key`: + - `border-box`: розміри елемента враховують також `padding` та `border`. -- Покращує продуктивність рендерингу. +
-- Дозволяє React оптимально оновлювати тільки змінені елементи, а не весь - список. +
+25. Що таке селектор? І які селектори є? -- Забезпечує коректну обробку стану елементів при їх переміщенні, видаленні або - оновленні. +#### CSS -Таким чином, використання `key` є важливим для ефективної роботи з масивами елементів у React. +**Селектор** у CSS — це частина правила, яка визначає, до яких елементів на +сторінці застосовуються стилі. Селектори дозволяють вибирати HTML елементи для +застосування стилів. -
+#### Основні типи селекторів: -
-18. Що таке умовний рендеринг у React? +1. **Типовий селектор (Type selector):** Вибирає елементи за їх тегом. -#### React +```css +p { + color: red; +} +``` -Умовний рендеринг у React - це процес, при якому компонент рендерить різний вміст залежно від певних умов. Це дозволяє динамічно змінювати відображення компонента на основі стану, пропсів або інших факторів. +2. **Класовий селектор (Class selector):** Вибирає елементи за класом, + починається з крапки. -#### Основні підходи до умовного рендерингу: +```css +.my-class { + color: blue; +} +``` -1. **Оператор `if`:** Можна використовувати стандартний оператор if для - вирішення, що рендерити. +3. **Ідентифікатор (ID selector):** Вибирає елементи за ідентифікатором, + починається з решітки. -```jsx -function Greeting(props) { - if (props.isLoggedIn) { - return Welcome back!; - } - return Please sign up.; +```css +#my-id { + color: green; } ``` -2. **Тернарний оператор:** Часто використовують тернарний оператор для коротших - умовних виразів. +4. **Атрибутний селектор (Attribute selector):** Вибирає елементи за значенням + їх атрибутів. -```jsx -function Greeting(props) { - return {props.isLoggedIn ? 'Welcome back!' : 'Please sign up.'}; +```css +input[type='text'] { + border: 1px solid black; } ``` -3. **Логічне І (&&) для рендерингу:** Можна використати логічний оператор `&&`, - щоб рендерити елемент лише за умови, що вираз зліва від нього є істинним. +5. **Псевдоклас (Pseudo-class selector):** Вибирає елементи, що знаходяться в + певному стані. -```jsx -function Notifications(props) { - return ( +```css +a:hover { + color: red; +} +``` - {props.unreadMessages.length > 0 && ( - You have {props.unreadMessages.length} unread messages. - )} +6. **Псевдоелемент (Pseudo-element selector):** Вибирає частини елементів, + наприклад, перший рядок або першу літеру. - ); +```css +p::first-letter { + font-size: 2em; } ``` -Це працює так: якщо props.unreadMessages.length більше за 0, то відобразиться -повідомлення, інакше нічого не буде відображено. +7. **Комбінатори (Combinators):** -4. **Використання `return` з умовним оператором:** Ви можете використовувати - return для умовного рендерингу на основі різних умов, як в прикладі з `if` - або тернарним оператором. +**_Descendant_** (потомок): Вибирає елементи, які є нащадками іншого елемента. -#### Переваги умовного рендерингу: +```css +div p { + color: purple; +} +``` -- Дозволяє динамічно змінювати вміст залежно від стану або пропсів. +**_Child_** (прямий нащадок): Вибирає елементи, що є прямими дітьми іншого +елемента. -- Покращує гнучкість і можливість відображення різного контенту для різних користувачів або ситуацій. +```css +div > p { + color: yellow; +} +``` -#### Приклад: +**_Adjacent sibling_** (сусід): Вибирає елемент, який йде безпосередньо після +іншого. -```jsx -function UserStatus(props) { - return ( +```css +h1 + p { + margin-top: 0; +} +``` - {props.isLoggedIn ? ( - Log Out - ) : ( - Log In - )} +**_General sibling_** (загальний сусід): Вибирає елементи, які є сусідами +певного елемента. - ); +```css +h1 ~ p { + color: orange; } ``` -Тут кнопка змінюється в залежності від того, чи користувач увійшов в систему. +Це основні типи селекторів, що використовуються для вибору та стилізації +елементів.
-19. Що таке фрагменти (Fragments) у React? +26. Різниця між Reset.css та Normalize.css? -#### React +#### CSS -Фрагменти в React - це спосіб групувати кілька елементів без додавання зайвих елементів в DOM. Вони дозволяють повернути декілька елементів з компонента без обгортки, такої як `div`, що може допомогти уникнути зайвих елементів, що можуть порушити стилі або структуру документа. +**Reset.css** і **Normalize.css** — це два різні підходи до управління стилями +за замовчуванням у браузерах, але з різними цілями: -#### Як використовуються фрагменти? +1. **Reset.css:** -1. **Без фрагментів (з обгорткою):** +**Мета:** Видалити всі стилі браузера (включаючи відступи, поля, шрифти тощо), +щоб почати з "чистого аркуша". -```jsx -function MyComponent() { - return ( +**Результат:** Все, що за замовчуванням задається браузером, скидається, і +елементи стають однаковими в усіх браузерах. Це часто призводить до того, що +потрібно вручну додавати стилі для базових елементів. - Title - Some text +**Приклад:** - ); +```css +* { + margin: 0; + padding: 0; + border: 0; } ``` -У цьому прикладі повертається один `div`, який обгортає `h1` і `p`. +2. **Normalize.css:** -1. **З фрагментами (без обгортки):** +**Мета:** Зробити стилі браузерів більш однаковими, але не скидаючи їх повністю. +Підтримує стандартні стилі для елементів, щоб забезпечити однаковий вигляд у +всіх браузерах. -```jsx -function MyComponent() { - return <>Title Some text; +**Результат:** Зберігаються деякі стилі за замовчуванням, але вони +нормалізуються для забезпечення консистентності між різними браузерами +(наприклад, вирівнювання шрифтів, списки, таблиці). + +**Приклад:** + +```css +h1 { + font-size: 2em; + margin: 0.67em 0; } ``` -Тепер `h1` і `p` рендеряться без додаткового контейнера, що дозволяє зберегти чистоту DOM. +**Основна різниця:** Reset.css скидає всі стилі браузера до мінімуму, тоді як +Normalize.css підтримує базові стилі, але нормалізує їх для більшої узгодженості +між браузерами. -#### Переваги: +
-- **Чистий DOM:** Можна обходитись без зайвих обгорток у DOM. +
+27. Різниця між display: none та visibility: hidden? -- **Зручність для рендерингу кількох елементів:** Повернення кількох елементів з - одного компонента без необхідності використовувати додаткові елементи. +#### CSS -#### Синтаксис: +`display: none` і `visibility: hidden` приховують елементи, але працюють +по-різному: -- Можна використовувати порожні теги `<>` і ``, які є скороченням для ``. +`display: none` -- Також можна використовувати `React.Fragment`, якщо потрібно додавати ключі (наприклад, при рендерингу списків): +- Елемент зникає повністю зі сторінки. +- Він не займає місця в макеті. +- Інші елементи зміщуються так, ніби його не існувало. +- Події (наприклад, кліки) не спрацьовують на ньому. +- Використовується для повного приховування елементів. -```jsx -{ - item.name; -} -{ - item.description; +```css +.hidden { + display: none; } ``` -#### Коли використовувати: +`visibility: hidden` -- Коли потрібно рендерити кілька елементів без додаткової обгортки в DOM. +- Елемент залишається на сторінці, але стає невидимим. +- Він продовжує займати місце в макеті. +- Інші елементи не зміщуються. +- Події (наприклад, кліки) не спрацьовують, хоча елемент все ще є в DOM. -- Коли зберігаєте структуру компонента без порушення стилів чи верстки. +```css +.hidden { + visibility: hidden; +} +``` -Фрагменти є дуже корисними для зменшення зайвих елементів у DOM та покращення продуктивності. +**Різниця:** `display: none` прибирає елемент повністю, а `visibility: hidden` +залишає його місце, але робить невидимим.
-20. Що таке узгодження (Reconciliation)? - -#### React - -**Reconciliation** (узгодження) - це процес, який React використовує для оновлення DOM найефективнішим способом. Коли стан або пропси компонента змінюються, React обчислює мінімальні зміни, які потрібно внести до реального DOM, щоб синхронізувати його зі станом віртуального DOM. +28. Різниця між блоковим та інлайновим елементами? -#### Як працює reconciliation? +#### CSS -1. **Порівняння старого та нового віртуального DOM:** +**Блокові (block) та інлайнові (inline) елементи** відрізняються способом +відображення та впливом на структуру сторінки. -- React зберігає копію попереднього віртуального DOM. -- При зміні стану чи пропсів створюється новий віртуальний DOM. -- React порівнює новий віртуальний DOM із попередньою копією (алгоритм diffing). +#### Блокові елементи (display: block) -2. **Виявлення відмінностей (diffing):** +- Починаються з нового рядка. +- Автоматично займають всю доступну ширину (по горизонталі). +- Можуть містити як інші блокові, так і інлайнові елементи. +- Підтримують width, height, margin, padding. -- React ідентифікує, які частини дерева змінилися (нові елементи, зміни в - атрибутах чи видалення елементів). -- Для цього використовується алгоритм, оптимізований для роботи з - деревоподібними структурами. +**Приклади:** `
`, `

`, `

-

`, `
`, `
`, `
`, +`
`, `
-```jsx +
+29. Різниця між класом та ідентифікатором у CSS? - {items.map(item => ( - {item.text} - ))} +#### CSS -``` +#### Клас (`class`) vs Ідентифікатор (`id`) у CSS -Без унікальних ключів React не зможе точно визначити, які елементи списку змінилися. +| Параметр | Клас (`class`) | Ідентифікатор (`id`) | +| --------------------- | ----------------------------------------- | ----------------------------------------- | +| Синтаксис | Починається з `.` | Починається з `#` | +| Призначення | Використовується для групи елементів | Призначається одному унікальному елементу | +| Повторне використання | Може застосовуватися до кількох елементів | Повинен бути унікальним на сторінці | +| Пріоритет у CSS | Менший (0,0,1,0) | Вищий (0,1,0,0) | +| HTML приклад | `
` | `
` | +| CSS приклад | `.box { color: red; }` | `#unique-box { color: blue; }` | -#### Переваги reconciliation: +#### Різниця -- Зменшення кількості операцій із DOM. -- Підвищення продуктивності додатків. -- Гладке оновлення інтерфейсу користувача. +- Класи використовуються для стилізації кількох елементів. +- ID застосовується до одного унікального елемента (але можна порушити це + правило). +- ID має вищий пріоритет, тому його важко перевизначити. +- Класи краще використовувати для стилізації, ID — для JavaScript або унікальної + ідентифікації.
-21. Як оновити стан компонента? +30. Що таке CSS спрайт? І для чого він використовується? -#### React +#### CSS -У React стан компонента оновлюється за допомогою методу `setState` у класових компонентах або `useState` у функціональних компонентах. +CSS спрайт — це техніка, де кілька зображень об'єднуються в одне велике +зображення, а потім через CSS задаються позиції фону для відображення різних +частин цього зображення. -#### Класові компоненти: +Використовується для зменшення кількості HTTP-запитів, що підвищує швидкість +завантаження сторінки. Зазвичай застосовується для іконок, кнопок або інших +маленьких зображень, що використовуються на сайті. -Стан оновлюється через `this.setState()`. +#### Ось приклад використання CSS спрайту: -#### Приклад: +1. **Створення спрайта:** У вас є декілька маленьких зображень (наприклад, + іконки), які ви об'єднуєте в один великий файл sprite.png. -```jsx -class Counter extends React.Component { - constructor(props) { - super(props); - this.state = { count: 0 }; - } +2. **CSS для використання спрайта:** - increment = () => { - this.setState({ count: this.state.count + 1 }); - }; +```css +.icon { + width: 50px; + height: 50px; + background-image: url('sprite.png'); + display: inline-block; +} - render() { - return ( +.icon-facebook { + background-position: 0 0; /* Перша іконка в спрайті */ +} - Count: {this.state.count} - Increment +.icon-twitter { + background-position: -50px 0; /* Друга іконка в спрайті */ +} - ); - } +.icon-linkedin { + background-position: -100px 0; /* Третя іконка в спрайті */ } ``` -#### Функціональні компоненти: - -Стан оновлюється через функцію, отриману з `useState`. - -#### Приклад: +3. **HTML для іконок:** -```jsx -import React, { useState } from 'react'; +```html +
+
+
+``` -function Counter() { - const [count, setCount] = useState(0); +У цьому прикладі всі іконки завантажуються з одного файлу sprite.png, і за +допомогою CSS background-position визначається, яка частина спрайту +відображатиметься для кожної іконки. - const increment = () => { - setCount(count + 1); - }; +Цей підхід вже не використовуеться в CSS, але для себе знати треба. 📝 - return ( +
- Count: {count} - Increment +
+31. Що таке вендорні префікси? І навіщо вони використовуються? - ); -} -``` +#### CSS -#### Примітки: +Вендорні префікси — це спеціальні префікси, які додаються до CSS властивостей +для забезпечення підтримки нових або експериментальних функцій у різних +браузерах. Вони використовуються, коли властивість або функція ще не є +стандартом або коли браузери реалізують їх по-своєму. -1. **Асинхронність:** `setState` і `useState` працюють асинхронно. Для оновлення - стану на основі попереднього значення використовуйте функціональний підхід: +#### Приклад вендорних префіксів: -```jsx -this.setState(prevState => ({ count: prevState.count + 1 })); -setCount(prevCount => prevCount + 1); +```css +.element { + -webkit-transform: rotate( + 45deg + ); /* для браузерів на WebKit, таких як Chrome, Safari */ + -moz-transform: rotate(45deg); /* для Firefox */ + -ms-transform: rotate(45deg); /* для Internet Explorer */ + transform: rotate(45deg); /* стандартна властивість */ +} ``` -2. **Не оновлюйте стан напряму:** Модифікація стану без використання `setState` - або `useState` не викликає повторний рендеринг. +Вендорні префікси використовуються для забезпечення сумісності з різними +браузерами, поки властивість не стане частиною офіційного стандарту CSS. Вони +допомагають тестувати нові функції та забезпечують їх роботу на більшій +кількості браузерів, поки всі вони не впровадять підтримку стандартних +властивостей.
-22. Що таке вбудовані умовні вирази? +32. Що таке псевдоелементи? І навіщо вони використовуються? -#### React +#### CSS -**Вбудовані умовні вирази** в JavaScript (зокрема у React) - це механізми, що дозволяють вбудовувати умови безпосередньо в JSX для умовного рендерингу елементів або компонентів. Це дозволяє зробити код компактнішим і зручнішим для розуміння. +Псевдоелементи — це конструкції в CSS, які дозволяють стилізувати частини +елементів, які не мають власного HTML представлення. Вони дозволяють додавати +стилі до таких частин елементів, як перший рядок тексту, вміст перед або після +елемента, або створення декоративних елементів без необхідності змінювати HTML. -#### Основні методи: +#### Основні псевдоелементи: -1. **Оператор умови (тернарний оператор):** Це один із найпоширеніших способів для умовного рендерингу елементів в JSX. Він має такий синтаксис: +- `::before` — додає вміст перед елементом. +- `::after` — додає вміст після елемента. +- `::first-letter` — стилізує першу букву тексту в елементі. +- `::first-line` — стилізує перший рядок тексту в елементі. -```jsx -умова ? вираз_якщо_правда : вираз_якщо_неправда; -``` +**Приклад використання:** -**Приклад:** +```css +p::before { + content: '🔹 '; +} -```jsx -const isLoggedIn = true; +p::after { + content: ' 🔸'; +} -function App() { - return {isLoggedIn ? Welcome, User! : Please log in}; +p::first-letter { + font-size: 2em; + color: red; } ``` -2. **Логічний оператор AND (&&):** Цей метод дозволяє відображати компонент або елемент тільки тоді, коли умова є true. Якщо умова не виконується, нічого не буде рендеритись. +**Застосування:** Псевдоелементи використовуються для: -**Приклад:** +- Додавання декоративних елементів без зміни HTML. +- Створення візуальних ефектів (наприклад, стилізація першої літери або першого + рядка). +- Додавання контенту перед або після елемента, наприклад, іконок або текстових + маркерів, без необхідності додавати додаткові теги в HTML. -```jsx -const isUserAdmin = true; +
-function App() { - return {isUserAdmin && You have admin privileges}; -} -``` +
+33. Що таке схлопування меж (margin collapsing)? -У цьому випадку `

You have admin privileges

` буде відображено лише, якщо `isUserAdmin` - це `true`. +#### CSS -3. **IF перед поверненням JSX:** Можна також використовувати звичайні умовні оператори if перед поверненням JSX, коли умова має бути більш складною або коли потрібно виконати декілька умовних дій. +- Схлопування меж (margin collapsing) — це явище в CSS, коли вертикальні + відступи (margins) між сусідніми блоками або елементами "зливаються" в один, + замість того, щоб відображатися окремо. -**Приклад:** +**Це зазвичай відбувається в таких ситуаціях:** -```jsx -function App() { - let content; - if (isLoggedIn) { - content = Welcome back!; - } else { - content = Please sign in.; - } +1. Коли два сусідні блоки мають вертикальні відступи (margins). - return {content}; -} -``` +2. Коли один блок має відступ, а наступний блок не має відступу або його margin + значення нульове. -**Переваги:** +У результаті, між елементами відображається відстань, що дорівнює найбільшому з +цих відступів. -- Вбудовані умовні вирази дозволяють писати більш чистий і компактний код. +**Приклад:** -- Вони покращують читаємість і зменшують використання додаткових умовних - конструкцій. +```html +
Block 1
+
Block 2
+``` -#### Важливо: +- У цьому випадку схлопування меж призведе до того, що відстань між блоками буде + 20px, а не 30px (як можна було б очікувати при додаванні 20px + 10px). -- В React не можна використовувати інструкції `if` безпосередньо в JSX. Однак - можна застосувати їх перед поверненням JSX. +- **Чому це відбувається?** Схлопування меж застосовується, щоб уникнути зайвих + відступів і зробити верстку більш зручною для використання, оскільки зазвичай + не має сенсу мати два відступи, що діють на ту саму частину простору. + +**Як уникнути схлопування:** + +- Використовувати `padding`, а не `margin`, якщо потрібно уникнути схлопування. +- Встановити `overflow` на елементі. +- Використовувати фонові або градієнтні елементи, щоб блокувати схлопування.
-23. Яка різниця між обробкою подій HTML і React? +34. Що таке z-index? Як формується контекст накладання? -#### React +#### CSS -#### Різниця між обробкою подій у HTML та React: +`z-index` — це CSS властивість, яка визначає порядок накладання елементів на +сторінці. Вона використовується для визначення, який елемент має бути поверх +іншого, коли елементи перекривають один одного. Вищий `z-index` означає, що +елемент буде накладатися поверх елементів з нижчим значенням `z-index`. -| Критерій | HTML | React | -| ---------------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | -| **Прив’язка події** | Вказується як атрибут: `
-24. Що таке синтетичні події в React? - -#### React +35. Порядок накладання елементів у CSS (Stacking Order)? -**Синтетичні події (Synthetic Events)** у React - це обгортки для нативних DOM-подій, які надають однаковий інтерфейс для обробки подій на різних браузерах. React створює SyntheticEvent для кожної події, що дозволяє працювати з подіями в уніфікованому вигляді, забезпечуючи кросбраузерну сумісність і покращуючи продуктивність. +#### CSS -#### Основні характеристики: +Порядок накладання елементів у CSS (Stacking Order) визначається порядком, у +якому елементи накладаються один на одного на сторінці. Це важливо, коли +елементи з різними властивостями (наприклад, `z-index`) можуть перекривати один +одного. -1. **Кросбраузерність:** SyntheticEvent абстрагує особливості роботи з подіями в різних браузерах, забезпечуючи однакову поведінку. +#### Порядок накладання (Stacking Order): -2. **Оптимізація:** SyntheticEvent використовує пул об'єктів, що дозволяє зменшити витрати на створення нових об'єктів подій. +**Елементи за замовчуванням** (статичні елементи, без позиціонування та без +`z-index`): -3. **Одноразове використання:** Після обробки події об'єкт SyntheticEvent "повертається" в пул, і його не можна використовувати після цього. Для асинхронних операцій потрібно зберігати подію в окремій змінній. +- Елементи без позиціонування (`position: static` або без властивості + `position`) розташовуються один за одним у порядку їхнього розташування в + HTML. -4. **Інтерфейс:** SyntheticEvent має такі ж методи, як і стандартні нативні події (наприклад, `preventDefault()`, `stopPropagation()`). +**Елементи з позиціонуванням** (`relative`, `absolute`, `fixed`, `sticky`): -#### Приклад використання: +- Якщо елемент має будь-яке інше значення `position` (крім `static`), він + створює новий контекст накладання. У межах цього контексту елементи з більшим + значенням `z-index` будуть накладатися поверх елементів з меншим значенням. -```jsx -function handleClick(event) { - // SyntheticEvent має доступ до методу preventDefault() - event.preventDefault(); - console.log('Button clicked!'); -} +**Елементи з z-index**: -function App() { - return Click me; -} -``` +- Елементи з більш високим `z-index` будуть розташовуватися поверх елементів з + нижчим значенням `z-index` (якщо елементи знаходяться в одному контексті + накладання). -У цьому прикладі event - це SyntheticEvent, який працює аналогічно до нативної події, але з покращеними можливостями. +**Невидимі елементи** (з `opacity` менше 1 або з `visibility: hidden`): -
+- Елементи, які мають властивість `opacity` менше 1 або `visibility: hidden`, + можуть бути розташовані поверх інших елементів, але їх все одно не видно. -
-25. Як обробляти події в React? +**Елементи з властивістю** `transform`, `filter`, `perspective`, `clip-path` та +іншими, що створюють новий контекст накладання: -#### React +- Коли елемент має одну з цих властивостей, це створює новий контекст + накладання, і елементи в цьому контексті будуть накладатися згідно з їхніми + значеннями `z-index`, незалежно від того, де вони знаходяться на сторінці. -В React обробка подій працює схоже на стандартний JavaScript, але з деякими відмінностями. Події в React є синтетичними, що означає, що вони мають абстракцію поверх реальних подій браузера, що забезпечує крос-браузерну -сумісність. +**Елементи з фонового вмісту** (`backgrounds`, `borders`, etc.): -#### Основні принципи обробки подій в React: +- Вміст, такий як фон або бордери, не створює власного контексту накладання, але + може бути важливим для визначення, як інші елементи накладаються. -1. **Синтетичні події:** Всі події в React обгорнуті в об'єкт - **SyntheticEvent**, який є крос-браузерною реалізацією стандартних подій DOM. - Це дозволяє обробляти події однаково в усіх браузерах. +#### Порядок накладання елементів за замовчуванням: -2. **Використання camelCase для подій:** У React події записуються у форматі - camelCase замість стандартного нижнього регістру (наприклад, `onClick` - замість `onclick`). +1. **Блоки без позиціонування** (статичні елементи). -3. **Передача функцій як обробників подій:** Події в React обробляються за - допомогою функцій, які передаються через атрибути компонентів. +2. **Елементи з позиціонуванням** `relative` (якщо не визначено `z-index`). -#### Приклад обробки події `click`: +3. **Елементи з позиціонуванням** `absolute`, `fixed`, `sticky` (в залежності + від `z-index`). -```jsx -import React, { Component } from 'react'; +4. **Нове контексти накладання** (наприклад, елементи з `transform`, + `opacity < 1`, `filter` тощо). -class MyButton extends Component { - handleClick = () => { - alert('Button clicked!'); - }; +#### Простіше кажучи: - render() { - return Click Me; - } -} +Статичні елементи не створюють контексту накладання і накладаються в порядку +їхнього розташування в HTML. -export default MyButton; -``` +Елементи з позиціонуванням `relative`, `absolute`, `fixed`, `sticky` створюють +контекст накладання, де `z-index` визначає, які елементи будуть поверх інших. -#### Приклад з функціональним компонентом: +Елементи з новими контекстами накладання (наприклад, з `transform` або +`opacity < 1`) накладаються поверх всіх інших елементів із меншим пріоритетом. -```jsx -import React, { useState } from 'react'; +
-function MyButton() { - const [count, setCount] = useState(0); +
+36. Як за допомогою CSS визначити, чи підтримується властивість у браузері? - const handleClick = () => { - setCount(count + 1); - }; +#### CSS - return Clicked {count} times; -} +Для того, щоб перевірити, чи підтримується властивість у браузері, в CSS +безпосередньо неможливо це зробити, оскільки CSS сам по собі не має вбудованих +механізмів для перевірки підтримки властивостей. Однак, є кілька способів +зробити це за допомогою JavaScript та умовних конструкцій у CSS. -export default MyButton; -``` +1. **Використання JavaScript (Modernizr)** -#### Особливості обробки подій: +Один із способів перевірити, чи підтримується CSS властивість у браузері — це +використати JavaScript-бібліотеку, наприклад, Modernizr. Modernizr дозволяє +перевіряти підтримку різних технологій і властивостей браузером. -1. **Не потрібно використовувати `addEventListener`:** В React немає необхідності вручну додавати або видаляти обробники подій. Це автоматично керується бібліотекою React. +**Приклад використання Modernizr:** -2. **Збереження контексту в методах класових компонентів:** Якщо методи класових компонентів використовуються як обробники подій, контекст (`this`) потрібно прив'язати або через стрілкові функції, або вручну в конструкторі. +```javascript +if (Modernizr.flexbox) { + console.log('Flexbox підтримується!'); +} else { + console.log('Flexbox не підтримується.'); +} +``` -```jsx -class MyComponent extends React.Component { - constructor(props) { - super(props); - this.state = { count: 0 }; - // Прив'язка методу - this.handleClick = this.handleClick.bind(this); - } +2. **Використання умови @supports в CSS** - handleClick() { - this.setState({ count: this.state.count + 1 }); - } +CSS має власну конструкцію `@supports`, яка дозволяє перевіряти, чи +підтримується певна CSS властивість або її значення в поточному браузері. - render() { - return ( +**Приклад:** - Clicked {this.state.count} times +```css +/* Перевіряє, чи підтримується flexbox */ +@supports (display: flex) { + .container { + display: flex; + } +} - ); +/* Якщо не підтримується flexbox, додається альтернативне значення */ +@supports not (display: flex) { + .container { + display: block; } } ``` -3. **Передача параметрів у функцію обробника:** Якщо потрібно передати додаткові аргументи в обробник події, можна використовувати стрілкові функції або функції з параметрами. +У цьому прикладі, якщо браузер підтримує `display: flex`, то він застосує стилі, +визначені в першому блоці. Якщо ж не підтримує, застосує стилі з блоку +`@supports` not. -```jsx -function MyButton({ label }) { - const handleClick = (event, label) => { - console.log(label); - }; +3. **Використання префіксів для застарілих властивостей** + +Для старих властивостей або експериментальних властивостей браузерів часто +використовуються вендорні префікси. Якщо необхідно працювати з такими +властивостями, часто можна додавати ці префікси та перевіряти, чи працює код на +різних браузерах. - return
-26. Що таке події вказівника (Pointer Events)? +37. Глобальні ключові слова у CSS? -#### React +#### CSS -#### Події вказівника (Pointer Events) у React +Глобальні ключові слова в CSS — це спеціальні значення, які можна задати +будь-якій CSS-властивості. Вони не змінюють саме значення властивості, а +вказують, як її слід обчислювати. -**Pointer Events** - це API, що об'єднує події миші, сенсорного екрану та стилуса в єдину систему обробки подій. +#### Список глобальних ключових слів -#### Основні події Pointer Events +1. `inherit` – успадковує значення від батьківського елемента. +2. `initial` – скидає значення до дефолтного (згідно зі специфікацією). +3. `unset` – якщо властивість успадковується за замовчуванням (наприклад, + color), діє як inherit, інакше – як initial. +4. `revert` – повертає значення до того, що визначено у стилях браузера чи + користувача. +5. `revert-layer` – скидає значення до попереднього рівня каскаду (актуально для + @layer). -| **Подія** | **Опис** | -| ------------------- | ------------------------------------------------------------------------ | -| **onPointerDown** | Спрацьовує при натисканні пальцем, мишею або стилусом. | -| **onPointerUp** | Спрацьовує при відпусканні кнопки миші, пальця або стилуса. | -| **onPointerMove** | Викликається при русі вказівника над елементом. | -| **onPointerEnter** | Спрацьовує, коли вказівник входить у межі елемента. | -| **onPointerLeave** | Спрацьовує, коли вказівник виходить за межі елемента. | -| **onPointerCancel** | Викликається, коли браузер скасовує подію (наприклад, при зміні фокусу). | +#### Приклади використання -#### Приклад використання у React +✅ `inherit` (успадкування значення) -```jsx -const PointerExample = () => { - const handlePointerDown = () => console.log('Вказівник натиснуто'); - - return ( +```css +p { + color: red; +} +span { + color: inherit; /* отримає червоний від

*/ +} +``` - Клікни тут +✅ `initial` (повернення до стандартного значення) - ); -}; +```css +button { + all: initial; /* скидає всі властивості до дефолтних */ +} ``` -Цей код виведе `"Вказівник натиснуто"` у консоль при натисканні будь-яким пристроєм (миша, сенсор, стилус). +✅ `unset` (залежно від властивості) -

+```css +div { + color: unset; /* успадкує */ + width: unset; /* повернеться до `auto` */ +} +``` -
-27. Коли використовувати компонент класу замість функціонального компонента? +✅ `revert` (повернення до стандартних стилів браузера) -#### React +```css +a { + color: green; +} +a.special { + color: revert; /* поверне синій, якщо його задає браузер */ +} +``` -Класові компоненти використовувалися, коли потрібна була одна або кілька з цих функцій: +✅ `revert-layer` (актуально для @layer) -1. **Робота зі станом (state):** Раніше функціональні компоненти не підтримували локальний стан, тому використовували класи для цього. Сьогодні хуки (useState, useReducer) дозволяють функціональним компонентам працювати зі станом. +```css +@layer framework { + button { + background: red; + } +} -2. **Методи життєвого циклу:** Класи забезпечували доступ до методів, таких як `componentDidMount`, `componentDidUpdate`, `componentWillUnmount`, для управління компонентом на різних етапах його існування. Зараз це вирішується хуком `useEffect`. +@layer custom { + button { + background: blue; + } +} -3. **Обробка складної логіки:** Якщо логіка потребувала кількох методів і доступу до властивостей через this, класи виглядали логічним вибором. Сучасний підхід - хуки, які дозволяють інкапсулювати логіку. +/* revert-layer поверне червоний із framework, а не дефолтний */ +button { + background: revert-layer; +} +``` -#### Коли класи більше не потрібні: +#### Висновок -Починаючи з React 16.8, функціональні компоненти з хуками замінили потребу у класових компонентах. Тому в нових проєктах перевагу варто віддавати функціональним компонентам. Класи використовуються лише для підтримки застарілого коду. +- `inherit` – для спадкування. +- `initial` – для скидання до дефолту. +- `unset` – комбінує inherit та initial. +- `revert` – повертає значення браузера чи стилів користувача. +- `revert-layer` – скидає значення до попереднього рівня каскаду.
-28. Що таке компоненти без стану (stateless components)? - -#### React +38. Що таке перерахування селекторів? -Компоненти без стану (stateless components) - це компоненти, які не зберігають і не обробляють жодного внутрішнього стану. Вони лише отримують дані через props і відображають їх у вигляді UI. Зазвичай ці компоненти є функціональними. +#### CSS -#### Особливості: +Перерахування селекторів — це використання кількох селекторів, розділених комою, +для одночасного застосування стилів до різних елементів. -1. **Відсутність стану:** Вони не використовують this.state і не змінюють свій внутрішній стан. +#### Синтаксис -2. **Тільки рендеринг:** Вони просто отримують пропси та відображають їх у вигляді елементів UI. +```css +selector1, +selector2, +selector3 { + property: value; +} +``` -3. **Простота та передбачуваність:** Легше тестувати і підтримувати, оскільки не потрібно слідкувати за змінами стану. +#### Приклади -#### Приклад: +✅ Стилізація кількох елементів одночасно -```jsx -// Stateless component -function Greeting(props) { - return Hello, {props.name}!; +```css +h1, +h2, +h3 { + color: red; } +``` + +Усі h1, h2 і h3 стануть червоними. + +✅ Комбінація класів і тегів -// Використання: -; +```css +button, +.btn { + padding: 10px; +} ``` -#### Переваги: +Застосується до `
-29. Що таке компоненти стану (stateful components)? +39. Для чого використовується ключове слово currentColor у CSS? -#### React +#### CSS -**Компоненти стану** (stateful components) - це компоненти, які зберігають і управляють своїм внутрішнім станом. Вони використовують state для збереження даних, які можуть змінюватися протягом часу, і ці зміни впливають на рендеринг компонента. +`currentColor` — це ключове слово в CSS, яке задає значення кольору (`color`) +для інших властивостей, що підтримують кольори. -#### Особливості: +#### Як працює -1. **Стан (state):** Вони використовують `this.state` для зберігання і управління даними, які можуть змінюватися. +`currentColor` автоматично використовує значення, встановлене у властивості +`color`. -2. **Методи для оновлення стану:** Використовують метод `this.setState()` для оновлення стану. +#### Приклади використання -3. **Життєвий цикл:** Мають доступ до методів життєвого циклу компонента, таких як `componentDidMount()`, `shouldComponentUpdate()`, `componentDidUpdate()` тощо. +✅ Однаковий колір для тексту та рамки -#### Приклад: +```css +button { + color: blue; + border: 2px solid currentColor; +} +``` -```jsx -// Stateful component -class Counter extends React.Component { - constructor(props) { - super(props); - this.state = { - count: 0, - }; - } +Рамка кнопки буде того ж кольору, що й текст (`blue`). - increment = () => { - this.setState({ count: this.state.count + 1 }); - }; +✅ SVG-іконки із кольором тексту - render() { - return ( +```css +.icon { + color: red; + fill: currentColor; +} +``` - {this.state.count} - Increment +`fill` у SVG прийме `color` елемента (`red`). - ); - } +✅ Прозорість зі спадкуванням кольору + +```css +.link { + color: green; + background: linear-gradient(currentColor 0%, transparent 100%); } ``` -#### Переваги: +Градієнт стартує від `green`, бо це значення `color`. -- **Динамічні компоненти:** Можуть змінювати свій вміст і вигляд на основі змін в стані. +#### Висновок -- **Інтерактивність:** Підходять для створення інтерактивних інтерфейсів, де є потреба в оновленні стану при взаємодії з користувачем. +- Використовує значення `color`, усуваючи дублювання стилів. +- Особливо корисно для SVG, `border`, `background`, `box-shadow`. +- Спрощує темізацію: змінюєш `color`, і все підлаштовується. -#### Коли використовувати: +
-Коли компонент потребує управління внутрішнім станом, наприклад, для збереження введених даних у формі, рахунку, вибору тощо. +
+40. Які псевдокласи є CSS? + +#### CSS + +#### Псевдокласи в CSS + +- ✅ Динамічні псевдокласи + +| Псевдоклас | Опис | +| ---------- | -------------------------------------------- | +| `:hover` | При наведенні курсору. | +| `:focus` | Коли елемент у фокусі (наприклад, `input`). | +| `:active` | Під час натискання. | +| `:visited` | Для відвіданих посилань. | +| `:target` | Для елемента, що відповідає `#anchor` в URL. | + +- ✅ Структурні псевдокласи + +| Псевдоклас | Опис | +| -------------------- | ------------------------------------------------------ | +| `:first-child` | Перший дочірній елемент. | +| `:last-child` | Останній дочірній елемент. | +| `:nth-child(n)` | Дочірній елемент за індексом `n` (можна `odd`/`even`). | +| `:nth-last-child(n)` | Те саме, але з кінця. | +| `:only-child` | Якщо елемент єдиний у батьківському контейнері. | + +- ✅ Типові псевдокласи + +| Псевдоклас | Опис | +| ---------------------- | -------------------------------------------- | +| `:first-of-type` | Перший елемент певного типу. | +| `:last-of-type` | Останній елемент певного типу. | +| `:nth-of-type(n)` | N-ий елемент певного типу. | +| `:nth-last-of-type(n)` | N-ий елемент певного типу з кінця. | +| `:only-of-type` | Якщо елемент унікальний серед такого ж типу. | + +- ✅ Логічні псевдокласи + +| Псевдоклас | Опис | +| ------------------ | ---------------------------------------------------- | +| `:not(selector)` | Вибирає все, **крім** вказаного селектора. | +| `:has(selector)` | Вибирає елементи, що містять інший елемент (`CSS4`). | +| `:where(selector)` | Як `:is()`, але без пріоритету. | +| `:is(selector)` | Спрощує складні селектори. | + +- ✅ Псевдокласи для форм + +| Псевдоклас | Опис | +| ------------- | ----------------------------------- | +| `:checked` | Позначений чекбокс або радіокнопка. | +| `:disabled` | Вимкнений елемент форми. | +| `:enabled` | Активний елемент форми. | +| `:required` | Поле `input`, що обов’язкове. | +| `:optional` | Поле `input`, що не є обов’язковим. | +| `:valid` | Поле форми з коректним значенням. | +| `:invalid` | Поле форми з некоректним значенням. | +| `:read-only` | Поле у режимі `readonly`. | +| `:read-write` | Поле, що можна редагувати. | + +**Псевдокласи допомагають стилізувати елементи без додаткових класів або JS. +Використовуйте `:is()` та `:has()` для скорочення складних селекторів у CSS4.**
-30. Що таке чисті компоненти (Pure Components)? +41. Які фільтри є у CSS? -#### React +#### CSS -**Чисті компоненти (Pure Components)** - це спеціальні класові компоненти React, які автоматично оптимізують рендеринг. Вони реалізують поверхневе порівняння пропсів і стану, щоб запобігти зайвим оновленням, якщо значення пропсів або стану не змінилися. +Фільтри у CSS -#### Як створити чистий компонент? +Фільтри (`filter`) дозволяють змінювати вигляд елементів, застосовуючи ефекти до +їхнього рендерингу. -Чистий компонент створюється шляхом успадкування від `React.PureComponent`. +#### 🔹 Основні фільтри -```jsx -import React, { PureComponent } from 'react'; +| Фільтр | Опис | Приклад | +| --------------- | ----------------------------------------------------- | --------------------------- | +| `blur(px)` | Розмиття з вказаним радіусом у пікселях. | `filter: blur(5px);` | +| `brightness(%)` | Змінює яскравість (100% – без змін). | `filter: brightness(150%);` | +| `contrast(%)` | Змінює контраст (100% – без змін). | `filter: contrast(120%);` | +| `grayscale(%)` | Відтінки сірого (100% – чорно-біле). | `filter: grayscale(100%);` | +| `invert(%)` | Інвертує кольори (100% – повністю інвертоване). | `filter: invert(100%);` | +| `opacity(%)` | Прозорість (0% – повністю прозоре, 100% – непрозоре). | `filter: opacity(50%);` | +| `saturate(%)` | Насиченість (100% – без змін, 0% – ч/б). | `filter: saturate(200%);` | +| `sepia(%)` | Ефект сепії (100% – повністю сепія). | `filter: sepia(80%);` | -class MyComponent extends PureComponent { - render() { - return Hello, {this.props.name}!; - } -} +#### 🔹 Фільтри для тіней та зміщення + +| Фільтр | Опис | Приклад | +| ----------------------------- | --------------------------------------------------------------------------- | ---------------------------------------------------- | +| `drop-shadow(x y blur color)` | Додає тінь до зображення (аналог `box-shadow`, але працює з прозорими PNG). | `filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));` | + +#### 🔹 Комбінування фільтрів + +- Фільтри можна комбінувати, вказуючи їх через пробіл: -// Використання: -; +```css +filter: brightness(120%) contrast(110%) blur(3px); ``` -#### Як працює `PureComponent`? +- Фільтри застосовуються до всіх елементів, але найчастіше – до зображень (img), + відео та бекграундів. -- Виконує поверхневе порівняння (`shallow comparison`) пропсів і стану у методі - `shouldComponentUpdate`. +
-- Якщо пропси та стан не змінилися, компонент не рендериться повторно. +
+42. Навіщо використовується псевдоклас :invalid? -#### Коли використовувати `PureComponent`? +#### CSS -- Коли пропси та стан є простими структурами (примітивні значення або неглибокі - об'єкти). +Псевдоклас `:invalid` використовується для стилізації полів вводу (``, +`\r" + }, + { + "type": "paragraph", + "children": [ + { + "text": "Стилізація через CSS:", + "bold": true + } + ] + }, + { + "type": "code", + "language": "css", + "content": "input:required {\r\n border-left: 3px solid red;\r\n}\r\n\r\ninput:valid {\r\n border-left: 3px solid green;\r\n}\r" + } + ] + }, + { + "question": "44. Яке призначення елемента label у формах?", + "category": "html", + "answerBlocks": [ + { + "type": "paragraph", + "children": [ + { + "text": "
", + "code": true + }, + { + "text": " і " + }, + { + "text": "", + "code": true + }, + { + "text": ":" + }, + { + "type": "code", + "language": "html", + "content": "
\r\n Особисті дані\r\n \r\n \r\n\r\n \r\n \r\n
\r" + } + ] + } + ] + }, + { + "type": "heading", + "level": 4, + "children": [ + { + "text": "Навіщо:" + } + ] + }, + { + "type": "bulletList", + "children": [ + { + "type": "listItem", + "children": [ + { + "text": "Візуально та логічно об'єднує пов'язані поля." + } + ] + }, + { + "type": "listItem", + "children": [ + { + "text": "Покращує доступність (скрінрідери читають легенду)." + } + ] + }, + { + "type": "listItem", + "children": [ + { + "text": "Допомагає структурувати великі форми і робить їх зручнішими для користувача." + } + ] + } + ] + }, + { + "type": "heading", + "level": 4, + "children": [ + { + "text": "Розширений приклад:" + } + ] + }, + { + "type": "code", + "language": "html", + "content": "\r\n
\r\n Контактна інформація\r\n \r\n \r\n\r\n \r\n \r\n
\r\n\r\n
\r\n Налаштування акаунту\r\n \r\n\r\n \r\n
\r\n\r\n
\r\n Преміум функції\r\n \r\n \r\n
\r\n\r" + } + ] + }, + { + "question": "46. Як створити форму в HTML і забезпечити її валідацію?", + "category": "html", + "answerBlocks": [ + { + "type": "paragraph", + "children": [ + { + "text": "Створення форми з валідацією включає використання HTML5 атрибутів та JavaScript для розширеної перевірки." + } + ] + }, + { + "type": "heading", + "level": 4, + "children": [ + { + "text": "HTML5 валідація:" + } + ] + }, + { + "type": "code", + "language": "html", + "content": "
\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n\r" + }, + { + "type": "heading", + "level": 4, + "children": [ + { + "text": "Атрибути валідації:" + } + ] + }, + { + "type": "bulletList", + "children": [ + { + "type": "listItem", + "children": [ + { + "text": "required", + "code": true + }, + { + "text": " — обов'язкове поле" + } + ] + }, + { + "type": "listItem", + "children": [ + { + "text": "minlength/maxlength", + "code": true + }, + { + "text": " — мінімальна/максимальна довжина" + } + ] + }, + { + "type": "listItem", + "children": [ + { + "text": "min/max", + "code": true + }, + { + "text": " — мінімальне/максимальне значення для чисел" + } + ] + }, + { + "type": "listItem", + "children": [ + { + "text": "pattern", + "code": true + }, + { + "text": " — регулярний вираз" + } + ] + }, + { + "type": "listItem", + "children": [ + { + "text": "step", + "code": true + }, + { + "text": " — крок для числових полів" + } + ] + } + ] + }, + { + "type": "heading", + "level": 4, + "children": [ + { + "text": "CSS для стилізації:" + } + ] + }, + { + "type": "code", + "language": "css", + "content": "input:valid {\r\n border: 2px solid green;\r\n}\r\n\r\ninput:invalid {\r\n border: 2px solid red;\r\n}\r\n\r\ninput:required {\r\n background-color: #fff8dc;\r\n}\r" + } + ] + }, + { + "question": "47. Які методи відправки даних форми ви знаєте?", + "category": "html", + "answerBlocks": [ + { + "type": "paragraph", + "children": [ + { + "text": "Основні методи HTTP для відправки форм:" + } + ] + }, + { + "type": "heading", + "level": 4, + "children": [ + { + "text": "GET метод:" + } + ] + }, + { + "type": "code", + "language": "html", + "content": "
\r\n \r\n \r\n
\r" + }, + { + "type": "paragraph", + "children": [ + { + "text": "Характеристики GET:", + "bold": true + } + ] + }, + { + "type": "bulletList", + "children": [ + { + "type": "listItem", + "children": [ + { + "text": "Дані додаються до URL як параметри запиту" + } + ] + }, + { + "type": "listItem", + "children": [ + { + "text": "Видимі в адресному рядку" + } + ] + }, + { + "type": "listItem", + "children": [ + { + "text": "Можна додати в закладки" + } + ] + }, + { + "type": "listItem", + "children": [ + { + "text": "Обмеження по розміру даних" + } + ] + }, + { + "type": "listItem", + "children": [ + { + "text": "Використовується для пошуку, фільтрів" + } + ] + } + ] + }, + { + "type": "heading", + "level": 4, + "children": [ + { + "text": "POST метод:" + } + ] + }, + { + "type": "code", + "language": "html", + "content": "
\r\n \r\n \r\n \r\n
\r" + }, + { + "type": "paragraph", + "children": [ + { + "text": "Характеристики POST:", + "bold": true + } + ] + }, + { + "type": "bulletList", + "children": [ + { + "type": "listItem", + "children": [ + { + "text": "Дані відправляються в тілі запиту" + } + ] + }, + { + "type": "listItem", + "children": [ + { + "text": "Не видимі в URL" + } + ] + }, + { + "type": "listItem", + "children": [ + { + "text": "Немає обмежень по розміру" + } + ] + }, + { + "type": "listItem", + "children": [ + { + "text": "Використовується для створення, оновлення даних" + } + ] + } + ] + }, + { + "type": "heading", + "level": 4, + "children": [ + { + "text": "Додаткові атрибути:" + } + ] + }, + { + "type": "code", + "language": "html", + "content": "\r\n
\r\n \r\n \r\n
\r\n\r\n\r\n
\r\n \r\n \r\n
\r" + } + ] + }, + { + "question": "48. Основні атрибути HTML-форм? Як вони впливають на надсилання даних з веб-сторінки?", + "category": "html", + "answerBlocks": [ + { + "type": "heading", + "level": 4, + "children": [ + { + "text": "Атрибути елемента " + }, + { + "text": "
", + "code": true + }, + { + "text": ":" + } + ] + }, + { + "type": "paragraph", + "children": [ + { + "text": "action", + "bold": true + }, + { + "text": " — URL для відправки даних:" + } + ] + }, + { + "type": "code", + "language": "html", + "content": "
\r" + }, + { + "type": "paragraph", + "children": [ + { + "text": "method", + "bold": true + }, + { + "text": " — HTTP метод (GET, POST):" + } + ] + }, + { + "type": "code", + "language": "html", + "content": "
\r\n \r\n
\r\n\r" + }, + { + "type": "paragraph", + "children": [ + { + "text": "enctype", + "bold": true + }, + { + "text": " — кодування даних:" + } + ] + }, + { + "type": "code", + "language": "html", + "content": "\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n\r" + }, + { + "type": "paragraph", + "children": [ + { + "text": "target", + "bold": true + }, + { + "text": " — де відкрити результат:" + } + ] + }, + { + "type": "code", + "language": "html", + "content": "
\r\n \r\n \r\n \r\n
\r\n \r\n\r" + }, + { + "type": "paragraph", + "children": [ + { + "text": "novalidate", + "bold": true + }, + { + "text": " — вимкнути HTML5 валідацію:" + } + ] + }, + { + "type": "code", + "language": "html", + "content": "
\r\n \r\n
\r" + }, + { + "type": "paragraph", + "children": [ + { + "text": "autocomplete", + "bold": true + }, + { + "text": " — автозаповнення:" + } + ] + }, + { + "type": "code", + "language": "html", + "content": "
\r\n \r\n
\r\n\r" + }, + { + "type": "heading", + "level": 4, + "children": [ + { + "text": "Приклад повної форми:" + } + ] + }, + { + "type": "code", + "language": "html", + "content": "\r\n \r\n \r\n \r\n\r\n \r\n\r" + } + ] + }, + { + "question": "49. Для чого використовується елемент datalist?", + "category": "html", + "answerBlocks": [ + { + "type": "paragraph", + "children": [ + { + "text": "", + "code": true + }, + { + "text": " надає список готових варіантів для поля вводу, створюючи автодоповнення (autocomplete dropdown)." + } + ] + }, + { + "type": "heading", + "level": 4, + "children": [ + { + "text": "Основне використання:" + } + ] + }, + { + "type": "code", + "language": "html", + "content": "\r\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n\r" + }, + { + "type": "heading", + "level": 4, + "children": [ + { + "text": "Переваги:" + } + ] + }, + { + "type": "bulletList", + "children": [ + { + "type": "listItem", + "children": [ + { + "text": "Користувач може обрати зі списку або ввести власний варіант" + } + ] + }, + { + "type": "listItem", + "children": [ + { + "text": "Покращує UX через швидкий вибір" + } + ] + }, + { + "type": "listItem", + "children": [ + { + "text": "Працює з різними типами input" + } + ] + } + ] + }, + { + "type": "heading", + "level": 4, + "children": [ + { + "text": "Розширені приклади:" + } + ] + }, + { + "type": "code", + "language": "html", + "content": "\r\n\r\n\r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n\r" + }, + { + "type": "paragraph", + "children": [ + { + "text": "Підтримка браузерів:", + "bold": true + }, + { + "text": " Всі сучасні браузери. У старих браузерах працює як звичайний input." + } + ] + } + ] + }, + { + "question": "50. Що таке елемент output у HTML5?", + "category": "html", + "answerBlocks": [ + { + "type": "paragraph", + "children": [ + { + "text": "", + "code": true + }, + { + "text": " представляє результат обчислення або дії користувача. Зазвичай використовується для відображення результатів форм або динамічних розрахунків." + } + ] + }, + { + "type": "heading", + "level": 4, + "children": [ + { + "text": "Основні атрибути:" + } + ] + }, + { + "type": "bulletList", + "children": [ + { + "type": "listItem", + "children": [ + { + "text": "for", + "code": true + }, + { + "text": " — вказує на елементи, які впливають на результат" + } + ] + }, + { + "type": "listItem", + "children": [ + { + "text": "form", + "code": true + }, + { + "text": " — пов'язує з конкретною формою" + } + ] + }, + { + "type": "listItem", + "children": [ + { + "text": "name", + "code": true + }, + { + "text": " — ім'я для надсилання з формою" + } + ] + } + ] + }, + { + "type": "heading", + "level": 4, + "children": [ + { + "text": "Приклад з обчисленням:" + } + ] + }, + { + "type": "code", + "language": "html", + "content": "
\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n 100\r\n
\r\n\r\n\r" + }, + { + "type": "heading", + "level": 4, + "children": [ + { + "text": "Приклад з прогрес-баром:" + } + ] + }, + { + "type": "code", + "language": "html", + "content": "
\r\n \r\n \r\n\r\n 50%\r\n
\r\n\r\n\r" + }, + { + "type": "paragraph", + "children": [ + { + "text": "Семантика:", + "bold": true + }, + { + "text": " " + }, + { + "text": "", + "code": true + }, + { + "text": " є семантично правильним способом показати результати, на відміну від " + }, + { + "text": "", + "code": true + }, + { + "text": " або " + }, + { + "text": "
", + "code": true + }, + { + "text": "." + } + ] + } + ] + }, + { + "question": "51. Що таке семантичний HTML?", + "category": "html", + "answerBlocks": [ + { + "type": "bulletList", + "children": [ + { + "type": "listItem", + "children": [ + { + "text": "Семантичний HTML — це використання тегів за їхнім змістовим призначенням (" + }, + { + "text": "
", + "code": true + }, + { + "text": ", " + }, + { + "text": "
", + "code": true + }, + { + "text": ", " + }, + { + "text": "
", + "code": true + }, + { + "text": ", " + }, + { + "text": "
", + "code": true + }, + { + "text": ", " + }, + { + "text": "