ΠΡΠ΄Ρ Π²ΠΊΡΡΡΠ΅ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠ²Π΅ΠΆΠ΅Π³ΠΎ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π°. ΠΠ΄Π΅ ΠΌΡ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌ ΡΡΠ°ΡΡΠΈ, Π²ΠΈΠ΄Π΅ΠΎ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΅Π³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ³ΠΎ.
https://www. youtube.com/embed/Vb3r7XVTPOc
Π Π΄Π°Π½Π½ΠΎΠΌ ΠΊΡΡΡΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠΊΠ°Π·Π°Π½ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠΉ ΠΏΡΠΎΡΠ΅ΡΡ Π²ΡΡΡΡΠΊΠΈ ΡΠ°ΠΉΡΠΎΠ² Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Sass (ΠΌΠ΅ΡΠ°ΡΠ·ΡΠΊ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ CSS). Π ΡΠΎΠΌΡ ΠΆΠ΅ Π°Π²ΡΠΎΡ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ GIT (ΡΠΈΡΡΠ΅ΠΌΠ° ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π²Π΅ΡΡΠΈΡΠΌΠΈ). ΠΡΡΡΡΠΊΠ° ΡΠ°ΠΉΡΠ° ΠΈ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Π°Π²ΡΠΎΡ Π±ΡΠ΄Π΅Ρ Π΄Π΅Π»Π°ΡΡ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ VSΒ Code Π° ΡΠ°Π±ΠΎΡΠ° Ρ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ PSD Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ Π² ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ΅ Avocode.
ΠΠ΅ΡΠ²ΡΠ΅ 2 ΡΡΠΎΠΊΠ° Π±ΡΠ΄ΡΡ ΠΏΠΎΡΠ²ΡΡΠ΅Π½Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ VSΒ CodeΒ ΠΈ Avocode. Π‘ 3 ΠΏΠΎ 9 ΡΡΠΎΠΊ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π·Π°Π½ΡΡΠΈΡ, Π°Π²ΡΠΎΡ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ, ΠΊΠ°ΠΊ ΡΠ²Π΅ΡΡΡΠ°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π»Π΅Π½Π΄ΠΈΠ½Π³ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ Π·Π°ΠΊΠ°Π·Π°. Π¦Π΅Π»Ρ ΠΊΡΡΡΠ° ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΠΏΡΠΎΡΡΠ½Π½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ Π²ΡΡΡΡΠΊΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ
ΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
ΡΠ°ΠΉΡΠΎΠ².
ΠΡΠΎΡΡΡΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ Π²ΡΡΡΡΠΊΠ° (Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈΠ»ΠΈ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½) β ΡΡΠΎ ΠΏΠΎΠ΄ΡΡΡΠΎΠΉΠΊΠ° ΡΠΈΡΠΈΠ½Ρ ΡΠ°ΠΉΡΠ° ΠΏΠΎΠ΄ Π»ΡΠ±ΡΠ΅ Π³Π°Π΄ΠΆΠ΅ΡΡ, Π²ΠΊΠ»ΡΡΠ°Ρ ΠΠ, Π½ΠΎΡΡΠ±ΡΠΊΠΈ, ΠΏΠ»Π°Π½ΡΠ΅ΡΡ ΠΈ ΡΠΌΠ°ΡΡΡΠΎΠ½Ρ. ΠΠ°Π½Π½Π°Ρ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠΈΡΠ°Π±Π΅Π»ΡΠ½ΡΠΌ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
. ΠΡΠΎΡΠ΅ Π³ΠΎΠ²ΠΎΡΡ Π΅ΡΠ»ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π° ΡΠ°ΠΉΡ Π±Π΅Π· Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²ΡΡΡΡΠΊΠΈ ΡΠΎ ΡΠΌΠ°ΡΡΡΠΎΠ½Π° ΠΈΠ»ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°, ΡΠΎ ΡΠ΅ΠΊΡΡ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π±Π΅Π· ΡΡΠ΅Π΄ΡΡΠ² ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΠΎΠ³Π΄Π° ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ² Π²ΠΎΠ·ΡΠΎΡΠ»Π°, ΡΠ²Π΅Π»ΠΈΡΠΈΠ»ΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ ΡΡΠ°ΡΠΈΠΊ, ΡΡΠΎ ΠΏΡΠΈΠ²Π΅Π»ΠΎ ΠΊ ΡΠΎΠΌΡ ΡΡΠΎ ΡΠ°ΠΉΡΡ ΡΡΠ΅Π±ΠΎΠ²Π°Π»ΠΈ ΠΊ ΡΠ΅Π±Π΅ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠΎΠ»Π΅Π΅ ΡΠΎΠ³ΠΎ, Π²ΡΠΊΠΎΡΠ΅ ΠΊΠ°ΠΊ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ ΡΡΠ°ΡΠΈΠΊ ΠΏΡΠ΅Π²ΡΡΠΈΠ» ΠΏΡΠΎΡΠ΅Π½Ρ Π·Π°Ρ
ΠΎΠ΄ΠΎΠ² Ρ ΠΠ, ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΠ΅ ΡΠΈΡΡΠ΅ΠΌΡ GoogleΒ ΠΈ Π―Π½Π΄Π΅ΠΊΡ ΠΏΠΎΡΡΠ°Π²ΠΈΠ»ΠΈ ΠΏΡΠΈΠ²ΠΈΠ»Π΅Π³ΠΈΠΈ Π΄Π»Ρ ΡΠ°ΠΉΡΠΎΠ² Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²ΡΡΡΡΠΊΠΎΠΉ ΠΈ Π±ΡΡΡΡΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΎΠΉ. Π‘ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½Π΅ΠΌ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΡΠ°Π» Π²Π°ΠΆΠ½ΡΠΌ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΡΠ°ΠΉΡΠΎΠ².
ΠΠΎ Π½Π΅ ΡΡΠΎΠΈΡ ΡΠ°ΠΊ ΠΏΡΠ³Π°ΡΡΡΡ ΡΠ»ΠΎΠ²Π° Β«Π’Π΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΡΒ». Π ΡΠ°ΠΌΠΎΠΌ ΠΏΡΠΎΡΠ΅ΡΡΠ΅ Π²ΡΡΡΡΠΊΠΈ ΡΡΠΎ Π»ΠΈΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΡΠ»ΠΎΠ²ΠΈΠΉ Π² CSS-ΠΊΠΎΠ΄Π΅, ΠΊΠΎΡΠΎΡΡΠ΅ Π°ΠΊΡΠΈΠ²ΠΈΡΡΡΡΡΡ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π½ΡΠΆΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π΅ΡΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ Π΄ΠΎΡΡΠΈΠ³Π°Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ. Π ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠ΅ ΠΌΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠ»ΠΎΠ²ΠΈΠΉ ΠΏΠΎΠ΄ ΡΠ°Π·Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΊΡΠ°Π½ΠΎΠ² ΠΈ Π³Π°Π΄ΠΆΠ΅ΡΡ.
Π‘Π°ΠΌΠ° Π²ΡΡΡΡΠΊΠ° Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ ΡΠΊΡΠ°Π½Π° β 1920Ρ
1080px. ΠΠΎΠ³Π΄Π° ΡΠ°ΠΉΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ²ΡΡΡΡΠ°Π½, Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠ° ΠΏΠΎΠ΄ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ ΡΠΊΡΠ°Π½Π°, Π² ΡΡΠΎΠΌ Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠΎΡΡ Π±ΡΠ°ΡΠ·Π΅Ρ GoogleΒ Chrome. Π Π΄Π°Π½Π½ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΊΠΎΠ½ΡΠΎΠ»Ρ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΎΡΡΠ»Π΅Π΄ΠΈΡΡ ΠΊΠ°ΠΊ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΉΡ Π½Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ
ΡΠΊΡΠ°Π½Π°. ΠΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π½Π°ΠΆΠ°ΡΡ ΠΊΠ»Π°Π²ΠΈΡΡ Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΠ΅ F12, Π»ΠΈΠ±ΠΎ Π½Π°ΠΆΠ°ΡΡ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ Π½Π° Π½ΡΠΆΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈ Π²ΡΠ±ΡΠ°ΡΡ Β«ΠΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄Β» ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ Π²ΡΠ²Π΅Π΄Π΅Ρ HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΠΈ CSS-ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ
ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
Π΅ΡΡΡ ΠΊΠΎΠ½ΡΠΎΠ»Ρ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΊΠΎΠ΄Π°, Π³Π΄Π΅ Π²Ρ Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π»ΡΠ±ΡΠ΅ ΡΡΠΈΠ»ΠΈ CSSΒ ΠΈΠ»ΠΈ HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ. ΠΡΠ°ΡΠ·Π΅Ρ Chrome ΠΈ Π―Π½Π΄Π΅ΠΊΡ.ΠΡΠ°ΡΠ·Π΅Ρ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΡΠΈΡΠΎΠΊΠΈΠΉ Π½Π°Π±ΠΎΡ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ², ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ ΠΎΡΠΈΠ±ΠΊΠΈ Π² JS-ΠΊΠΎΠ΄Π΅ ΠΈΠ»ΠΈ Π½Π°ΠΉΡΠΈ Π½ΡΠΆΠ½ΡΠΉ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ.
ΠΡΠΈΠΌΠ΅Ρ ΠΌΠ΅ΡΠ°ΡΠ΅Π³Π°, ΠΊΠΎΡΠΎΡΡΠΉ Π°Π΄Π°ΠΏΡΠΈΡΡΠ΅Ρ ΡΠ°ΠΉΡ ΠΏΠΎΠ΄ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ Π²ΡΡΡΡΠΊΡ:
ΠΠ°Π½Π½ΡΠΉ ΡΠ΅Π³ ΡΡΠ°Π²ΠΈΡΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠ΅Π³Π° <head></head> Π³Π΄Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ HTMLΒ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Ρ
ΡΠ°Π½ΡΡΡΡ Π²Π½ΡΡΡΠΈ Π°ΡΡΠΈΠ±ΡΡΠ° content, Π³Π΄Π΅ widthΒ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π΄ΠΎ ΠΊΠ°ΠΊΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ Π±ΡΠ΄Π΅Ρ ΡΡΠΆΠ°ΡΡΡΡ ΡΠ°ΠΉΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ width=768px ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΡΡΠΎ Π²Π΅ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΡΠ°ΠΉΡΠ° Π±ΡΠ΄Π΅Ρ ΡΠΆΠΈΠΌΠ°ΡΡΡΡ Π΄ΠΎ 768px, Π½ΠΎ Π² ΡΠ»ΡΡΠ°Π΅ Π΅ΡΠ»ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π±ΡΠ΄Π΅Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ 1200px, ΡΠΎ ΠΏΡΠΈ ΡΠΈΡΠΈΠ½Π΅ ΠΎΠΊΠ½Π° 768pxΒ ΠΌΡ ΡΠ²ΠΈΠ΄ΠΈΠΌ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. width=device-widthΒ β ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΡΡΠΎ ΡΠ°ΠΉΡ Π±ΡΠ΄Π΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΏΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°Π΅ΡΡΡ ΠΏΠΎΠ΄ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
Π‘ΡΡΡ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° Π² ΡΠΎΠΌ, ΡΡΠΎ Π΅ΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π΄ΠΎΡΡΠΈΠ³Π½Π΅Ρ 1200pxΒ ΠΈ ΠΌΠ΅Π½ΡΡΠ΅, ΡΠΎΠ³Π΄Π° ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° Π²ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° Π±ΡΠ΄Π΅Ρ ΡΠΎΠ²Π½ΡΡΡΡΡ 14px. ΠΠ°Π½Π½ΡΡ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ Π·Π°ΡΠ°ΡΡΡΡ ΡΡΠ°Π²ΡΡ ΠΏΠΎΡΠ»Π΅ Π²ΡΠ΅Ρ
ΡΠ²ΠΎΠΉΡΡΠ², ΡΡΠΎΠ±Ρ Π΄Π°Π½Π½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΠΈΡΠ°Π»ΠΈ ΡΠΆΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠ΅.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ ΠΈΠ»ΠΈ ΡΠΎΡ
ΡΠ°Π½ΠΈΡΡ Π΄Π»Ρ ΡΠ΅Π±Ρ ΡΡΠΎΡ ΡΡΠΎΠΊ Π² ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ
ΡΠ΅ΡΡΡ
:
ΠΠΎΠ±ΡΠΎ ΠΏΠΎΠΆΠ°Π»ΠΎΠ²Π°ΡΡ Π½Π° Π½Π°Ρ Π²ΠΈΠ΄Π΅ΠΎΠΊΡΡΡ, ΠΏΠΎΡΠ²ΡΡΠ΅Π½Π½ΡΠΉ ΠΎΡΠ΅Π½Ρ Π°ΠΊΡΡΠ°Π»ΡΠ½ΠΎΠΉ Π½Π° ΡΠ΅Π³ΠΎΠ΄Π½ΡΡΠ½ΠΈΠΉ Π΄Π΅Π½Ρ ΡΠ΅ΠΌΠ΅ β Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠ΅ ΡΠ°ΠΉΡΠΎΠ². Π Π½Π°Ρ Π²Π΅ΠΊ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ², ΠΊΠΎΠ³Π΄Π° ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊΠ°, Π½Π°Ρ
ΠΎΠ΄ΡΡΠ΅Π³ΠΎΡΡ Π² ΡΠΎΠ·Π½Π°ΡΠ΅Π»ΡΠ½ΠΎΠΌ Π²ΠΎΠ·ΡΠ°ΡΡΠ΅, Π΅ΡΡΡ ΠΏΠ»Π°Π½ΡΠ΅Ρ, ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ ΡΠ΅Π»Π΅ΡΠΎΠ½ ΠΈ ΠΏΡΠΎΡΠΈΠ΅ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΠ΄Π΅ΡΠ° ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΡΠΈΠ²ΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΡΡ
ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠΎΠ΄ΠΈΡΡ ΠΏΠΎ Π»Π°Π±ΠΈΡΠΈΠ½ΡΠ°ΠΌ Π²ΡΠ΅ΠΌΠΈΡΠ½ΠΎΠΉ ΠΏΠ°ΡΡΠΈΠ½Ρ, ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Ρ
ΠΎΡΠΎΡΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΊΡΠ°Π½Π°, ΡΡΠ°Π»ΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΡΡ.
ΠΠ° ΠΏΠ΅ΡΠ²ΠΎΠΌ Π²Π²ΠΎΠ΄Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅ΠΎΡΡΠΎΠΊΠ΅ ΠΌΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ ΡΠ°ΠΌΠΎΠΌ ΠΏΠΎΠ½ΡΡΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΡΠ·Π½Π°Π΅ΠΌ, ΠΈΠ· ΡΠ΅Π³ΠΎ ΠΎΠ½ ΡΠΎΡΡΠΎΠΈΡ ΠΈ ΡΡΠΎ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅ΡΡΡ ΠΏΠΎΠ΄ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· Π΅Π³ΠΎ ΡΠ°ΡΡΠ΅ΠΉ.
ΠΡΠ°ΠΊ, Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄Π΅ΡΠΆΠΈΡΡΡ Π½Π° ΡΡΠ΅Ρ
ΠΊΠΈΡΠ°Ρ
: ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ (Responsive design), Progressive Enhancement ΠΈ Mobile first.
ΠΠ΅ΡΠ²ΡΠΉ ΡΠ°Π· ΡΠ΅ΡΠΌΠΈΠ½ Β«ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Β» Π±ΡΠ» ΡΠΏΠΎΠΌΡΠ½ΡΡ ΠΡΠ°Π½ΠΎΠΌ ΠΠ°ΡΠΊΠΎΡΠΎΠΌ Π² Π΅Π³ΠΎ ΡΡΠ°ΡΡΠ΅ Π² ΠΌΠ°Π΅ 2010 Π³. Π‘Π°ΠΌΠΎ ΡΡΠΎ ΠΏΠΎΠ½ΡΡΠΈΠ΅ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΡΡΠΈ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ. ΠΠ΅ΡΠ²Π°Ρ ΠΈΠ· Π½ΠΈΡ
β Fluid grid (Π³ΠΈΠ±ΠΊΠ°Ρ ΡΠ΅ΡΠΊΠ° ΠΌΠ°ΠΊΠ΅ΡΠ°), Π²ΡΠΎΡΠ°Ρ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΡ β Flexible Media (Π²Π΅ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΡΠ°ΠΉΡΠ°), ΠΈ ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ ΠΈΠ· ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΠΌΡΡ
ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° β ΡΡΠΎ Media queiries (ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ). ΠΡΠ΅ ΠΎΠ½ΠΈ Π±ΡΠ΄ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°Π·ΠΎΠ±ΡΠ°Π½Ρ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΡ
Π²ΠΈΠ΄Π΅ΠΎΡΡΠΎΠΊΠ°Ρ
Π½Π°ΡΠ΅Π³ΠΎ ΠΊΡΡΡΠ°.
ΠΡΠ°Π²ΠΎ Π°Π²ΡΠΎΡΡΡΠ²Π° ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ½ΡΡΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠ°ΠΊ Progressive Enhancement ΠΏΡΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎΠΌΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ ΠΡΠΎΠ½Ρ ΠΡΡΡΠ°ΡΡΠΎΠ½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΠΏΠ΅ΡΠ²ΡΠ΅ Π²Π²Π΅Π» ΡΡΠΎΡ ΡΠ΅ΡΠΌΠΈΠ½ Π² ΡΠ²ΠΎΠ΅ΠΉ ΠΊΠ½ΠΈΠ³Π΅. ΠΠΎΠ΄ Progressive Enhancement ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅ΡΡΡ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎΠ΅ ΡΠ»ΡΡΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΠ³Π΄Π° Π²Π΅ΡΡΡΠΊΠ° ΠΏΡΠΎΠ΅ΠΊΡΠ° Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΊ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΠΎΠΌΡ, ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΌΡ, ΡΡΠΎΠ±Ρ ΡΠ°ΠΉΡ ΠΌΠΎΠ³ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΡΠ°ΡΠΎΠ³ΠΎ, Π½ΠΎ Π΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ³ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΠΎΠ΄Ρ
ΠΎΠ΄ ΠΊ Π½Π°ΡΠ°Π»Ρ Π²Π΅ΡΡΡΠΊΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² β Π΅ΡΡΡ Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΡΡΠΎΠΉ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΎΡ Π΄ΡΡΠ³ΠΎΠΉ, ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΠΉ β Graceful degradation (ΠΈΠ·ΡΡΠ½Π°Ρ Π΄Π΅Π³ΡΠ°Π΄Π°ΡΠΈΡ). ΠΡΠΈ ΡΠ°ΠΊΠΎΠΉ Π²Π΅ΡΡΡΠΊΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ° ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² ΠΈΠ΄Π΅Ρ ΠΎΡ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎΠ³ΠΎ. Π½Π°Π²ΠΎΡΠΎΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΊ ΠΏΡΠΎΡΡΠΎΠΌΡ.
ΠΠΎΡΠ»Π΅Π΄Π½ΡΡ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΡ, Π²Ρ
ΠΎΠ΄ΡΡΠ°Ρ Π² ΡΠΎΡΡΠ°Π² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° β ΡΡΠΎ Mobile first. ΠΠΎΠ΄ Π½Π΅ΠΉ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΡΡΡ ΠΏΠ΅ΡΠ²ΠΎΠΎΡΠ΅ΡΠ΅Π΄Π½Π°Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ° ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ², Π° Π·Π°ΡΠ΅ΠΌ ΡΠΆΠ΅ Π΄Π»Ρ ΡΡΠ°ΡΠΈΠΎΠ½Π°ΡΠ½ΡΡ
.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π½Π° Π²ΠΈΠ΄Π΅ΠΎΡΡΠΎΠΊΠ΅ Π²Π°ΠΌ ΡΡΠ°Π½Π΅Ρ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎ, ΠΈΠ· ΡΠ΅Π³ΠΎ ΡΠΎΡΡΠΎΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ Π²Π΅ΡΡΡΠΊΠ°. ΠΠ° ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΡΠ΅ Π½Π° ΡΡΠΎΠΌ Π·Π°Π½ΡΡΠΈΠΈ Π·Π½Π°Π½ΠΈΡ Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ ΠΎΠΏΠΈΡΠ°ΡΡΡΡ ΠΏΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠΈΡ
Π²ΠΈΠ΄Π΅ΠΎΡΡΠΎΠΊΠΎΠ².
ΠΡΠΈΡΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°! Π£ΡΠΈΡΠ΅ΡΡ Ρ ΡΠ΄ΠΎΠ²ΠΎΠ»ΡΡΡΠ²ΠΈΠ΅ΠΌ! ΠΡΠ΅Π³Π΄Π° Π²Π°Ρ Loftblog.
ΠΠΎΠ΄ΡΠΎΠ±Π½ΡΠΉ ΠΊΡΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°ΡΡΠΊΠ°ΠΆΠ΅Ρ ΠΎΠ±ΠΎ Π²ΡΠ΅Ρ
ΡΡΠ°ΠΏΠ°Ρ
ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΉΡΠ°: Π½Π°ΡΠΈΠ½Π°Ρ Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² Photoshop, Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°Ρ Π΅Π³ΠΎ Π²Π΅ΡΡΡΠΊΠΎΠΉ ΠΈ Π²Π½Π΅Π΄ΡΠ΅Π½ΠΈΠ΅ΠΌ CMS.
ΠΡΠΈ ΡΡΠΎΠΊΠΈ Π±ΡΠ΄ΡΡ ΠΏΠΎΠ»Π΅Π·Π½Ρ Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ
Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ²: ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ½ΡΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ βΡΠΈΡΡΠΎΠ³ΠΎβ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π½ΠΎ ΠΈ Π½ΡΠ°Π½ΡΡ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΊΠΈ ΠΌΠ°ΠΊΠ΅ΡΠ° Π΄Π»Ρ Π²Π΅ΡΡΡΠΊΠΈ.
Π‘Π΅Π³ΠΎΠ΄Π½Ρ Π²ΡΠ΅ ΡΠ΅ΠΆΠ΅ ΠΈ ΡΠ΅ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΡΠ΅ΡΠΈΡΡ Π½ΠΎΠ²ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π±Ρ Π½Π΅ ΠΈΠΌΠ΅Π» Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π»ΠΈΠ±ΠΎ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΠΎΠΉ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
Π΄Π΅Π²Π°ΠΉΡΠΎΠ². ΠΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ CSS ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Ρ Π»ΡΠ±ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΡΠΊΡΠ°Π½Π°. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½Π°Ρ Π²Π΅ΡΡΠΈΡ ΡΠ°ΠΉΡΠ° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΡΡΠ°Π½Π½ΠΎ Π½Π° ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΡΠΌΠ°ΡΡΡΠΎΠ½Π΅. Π§ΡΠΎΠ±Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ΅ΠΊΡΡ, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΈΡ
ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ. Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, ΡΠ°ΠΉΡ Π² Π²ΠΈΠ΄Π΅ ΠΎΠ΄Π½ΠΎΠΉ ΡΠ·ΠΊΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΡΡΡΠ°Π½Π½ΠΎ Π½Π° ΡΠΈΡΠΎΠΊΠΎΠΌ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΠΎΠΌ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ΅.
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ (Π°Π½Π³Π». responsive web design, RWD)Β β ΡΡΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ ΠΊ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΈΡ
Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ΅ΡΠ΅Π· CSS, ΠΎΡΠ½ΠΎΠ²ΡΠ²Π°ΡΡΡ Π½Π° ΡΠΈΡΠΈΠ½Π΅ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΡΠ΄ΠΎΠ±Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π±Π΅Π· Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΡΠ°Π·Π½ΡΡ
ΡΠ°ΠΉΡΠΎΠ².
Π Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π³ΠΈΠ±ΠΊΠΈΠ΅ grid-ΡΠΈΡΡΠ΅ΠΌΡ, ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ CSS (Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· Π½ΠΈΡ
ΠΌΡ ΡΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ Π² ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΡΠΎΠΊΠ°Ρ
ΡΡΠ΅Π±Π½ΠΈΠΊΠ°).
ΠΠΈΠ±ΠΊΠ°Ρ ΡΠ΅ΡΠΊΠ° ΠΆΠΈΠ·Π½Π΅Π½Π½ΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠ°, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π² Π½Π°ΡΠ΅ΠΌ ΠΌΠΈΡΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ², ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΡΠΎ ΡΠ²ΠΎΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ Π΄ΠΈΡΠΏΠ»Π΅Ρ. ΠΠΎΡΠΎΠΌΡ ΠΏΡΠΎΡΡΠΎ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΌΠ°ΠΊΠ΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π±Ρ ΠΊΡΠ°ΡΠΈΠ²ΠΎ Π²ΠΏΠΈΡΠ°Π»ΡΡ Π² ΡΠΊΡΠ°Π½ Π»ΡΠ±ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ. ΠΡΠΆΠ½Π° ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°ΡΡΠΈΡΡΡΡΡΡ ΠΈ ΡΡΠΆΠ°ΡΡΡΡ (Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ), ΠΏΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡ ΠΏΠΎΠ΄ ΡΠΊΡΠ°Π½ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡΒ β ΡΡΠΎ CSS-ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΡΠ»ΠΎΠ²ΠΈΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅Ρ
ΠΈΠ»ΠΈ ΠΈΠ½ΡΡ
ΡΡΠΈΠ»Π΅ΠΉ. Π ΠΏΡΠΈΠΌΠ΅ΡΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π΄Π°ΡΡ ΠΎΠ΄ΠΈΠ½ Π½Π°Π±ΠΎΡ CSS-ΠΏΡΠ°Π²ΠΈΠ» Π΄Π»Ρ ΡΠΊΡΠ°Π½ΠΎΠ² ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΌΠ΅Π½Π΅Π΅ 768β―ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π²ΡΠΎΡΠΎΠΉ β Π΄Π»Ρ ΡΠΈΡΠΈΠ½Ρ Π±ΠΎΠ»Π΅Π΅ 991 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Ρ.Β Π΄.
Π’Π°ΠΊΠΆΠ΅ ΡΠ΅ΡΠ΅Π· ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠΈΠΏ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (ΡΠΊΡΠ°Π½ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°, ΠΏΡΠΈΠ½ΡΠ΅Ρ, ΡΠ΅ΡΠ΅Π²ΠΎΠΉ ΡΠΈΠ½ΡΠ΅Π·Π°ΡΠΎΡ), ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ ΡΠΊΡΠ°Π½Π°, ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ (Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ ΠΈΠ»ΠΈ ΠΊΠ½ΠΈΠΆΠ½Π°Ρ), ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄ΠΈΡΠΏΠ»Π΅Ρ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅. ΠΡΡ ΡΡΠΎ Π΄Π°Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ, ΡΡΠΈΡΡΠ²Π°Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π½ΡΠ°Π½ΡΠΎΠ².
ΠΠΎΠ³Π΄Π° Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΡΠ°ΠΉΡ Π±Π΅Π· Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅Ρ Π΅Π³ΠΎ Π² ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°. ΠΡΠΈ ΡΡΠΎΠΌ ΠΎΠ½ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ, ΠΊΠ°ΠΊ Π½Π° ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ ΡΠ»Π΅Π²Π°:
ΠΡΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΌΠ°ΡΡΡΠ°Π±Π° ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ Π½Π΅Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΡΠ°ΠΉΡΡ. Π§ΡΠΎΠ±Ρ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠ°ΠΊΠΈΠΌ ΡΠ°ΠΉΡΠΎΠΌ, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡ ΠΌΠ°ΡΡΡΠ°Π± Π²ΡΡΡΠ½ΡΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ.
ΠΡΠ»ΠΈ ΠΆΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° Π°Π΄Π°ΠΏΡΠΈΠ²Π΅Π½, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠΎΠ±ΡΠΈΡΡ ΠΎΠ± ΡΡΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΡ. ΠΠ΅Π»Π°Π΅ΡΡΡ ΡΡΠΎ Π»Π΅Π³ΠΊΠΎΒ β ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π²Π½ΡΡΡΡ ΡΠ΅Π³Π°ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΡΡΠΎΠΊΡ:
ΠΠ°Π½Π½ΡΠΉ ΠΌΠ΅ΡΠ°-ΡΠ΅Π³ Π³ΠΎΠ²ΠΎΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΡΠΎ ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΡΠ°Π²Π½Π° ΡΠΈΡΠΈΠ½Π΅ ΡΠΊΡΠ°Π½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΡΠ°Π²Π½Π° ΡΠΈΡΠΈΠ½Π΅ ΡΠΊΡΠ°Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°. Initial-scale ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΡΠ΅Ρ ΡΡΠΎΠ²Π΅Π½Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ.
Π ΡΠ»ΠΎΠ²Ρ, ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΠ°-ΡΠ΅Π³Π° Π²Π°ΠΆΠ½ΠΎ ΠΈ Π΄Π»Ρ Google: ΠΏΡΠΈ Π΅Π³ΠΎ ΠΎΡΡΡΡΡΡΠ²ΠΈΠΈ ΡΠΈΡΡΠ΅ΠΌΠ° Π½Π΅ Π±ΡΠ΄Π΅Ρ Π²ΠΎΡΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΠΊΠ°ΠΊ ΡΡ, ΡΡΠΎ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°Π½Π° ΠΏΠΎΠ΄ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΌΡΒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎΠ±Β ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ·Β ΡΠ°ΠΌΡΡ
Π½Π΅ΠΏΡΠΎΡΡΡΡ
Π°ΡΠΏΠ΅ΠΊΡΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π°Β β Π°Π΄Π°ΠΏΡΠΈΠ²Π΅.
Π‘Β ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΠ½ΡΡ
Π²Π΅Π±-Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡΡΡ Π²Β ΠΊΠ°ΡΠΌΠ°Π½ (ΡΠ΅ΡΡ ΠΎΒ ΡΠ΅Π»Π΅ΡΠΎΠ½Π°Ρ
, ΠΊΡΠΎ Π½Π΅Β ΠΏΠΎΠ½ΡΠ»), Π²Π΅ΡΡ ΠΏΡΠΎΡΠ΅ΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² ΡΡΠ»ΠΎΠΆΠ½ΠΈΠ»ΡΡ Π²Β ΠΠΠ‘Π―Π’ΠΠ Π ΠΠ. Π Π°Π½ΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΠ΄Π½Ρ ΡΡΠ°ΡΠΈΡΠ½ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π²Β Photoshop, ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Π΅ΡΒ ΠΈΒ ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ, Π°Β ΡΡΠΎ ΡΠ΅ΠΏΠ΅ΡΡ..? ΠΠ²Π΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ? Π’ΡΠΈ? Π§Π΅ΡΡΡΠ΅? Π‘ΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΡ
Β Π½ΡΠΆΠ½ΠΎ? ΠΠ»ΠΈ, ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ, Π½Π°ΠΌ Π²ΠΎΠΎΠ±ΡΠ΅ Π½ΡΠΆΠ½Ρ Π½Π΅Β Π½Π°Π±ΠΎΡΡ ΡΡΠ°ΡΠΈΡΠ½ΡΡ
ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, Π°Β ΡΡΠΎ-ΡΠΎ Π±ΠΎΠ»Π΅Π΅ Π³ΠΈΠ±ΠΊΠΎΠ΅? ΠΠ³Ρ
Ρ
, ΠΊΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ Π·Π½Π°Π΅Ρ ΠΊΠ°ΠΊΠΈΠ΅-Π½ΠΈΠ±ΡΠ΄Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΠΏΡΠΎΡΠΎΡΠΈΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΡ?
ΠΈΒ ΠΈΠ·Π²Π΅ΡΠ½ΡΠΉ Π²ΠΎΠΏΡΠΎΡ: ΠΠΠΠΠΠ« ΠΠΒ ΠΠΠΠΠΠΠΠ Π« Π£ΠΠΠ’Π¬ ΠΠΠΠΠ’Π¬?!
ΠΠ°Π΄ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ Π±ΠΈΠ»ΠΈΡΡ Π½Π°ΡΠΈ Π»ΡΡΡΠΈΠ΅ ΡΠΌΡΒ β ΠΈΒ Π²Β ΠΈΡΠΎΠ³Π΅ ΠΎΠ½ΠΈ Π½Π°ΡΠ»ΠΈ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ ΡΒ ΠΎΠ³ΡΠΎΠΌΠ½ΡΠΌ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΉ ΡΠΊΡΠ°Π½ΠΎΠ². ΠΠΎΠ²ΠΎΡΡΡ, Π½ΡΠΆΠ½ΠΎ Π²Π΅ΡΠ½ΡΡΡΡΡ ΠΊΒ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠΌ Π»Π΅Ρ ΡΡΠΎ Π½Π°Π·Π°Π΄ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ ΠΏΠΎΡΡΠ΅ΡΠΎΠ²,Β β ΠΊΒ ΡΠ΅ΡΠΊΠ΅! Π―Β ΡΠΆΠ΅ ΠΆΠ°Π»ΠΎΠ²Π°Π»ΡΡ Π²Π°ΠΌ Π½Π°Β ΡΠ΅ΡΠΊΠΈ (ΠΈΒ ΡΠΎΠ²Π΅ΡΠΎΠ²Π°Π», ΡΠ΅ΠΌ Π·Π°Π½ΡΡΡΡΡ Π²ΠΌΠ΅ΡΡΠΎ ΡΠ°Π±ΠΎΡΡ ΡΒ Π½ΠΈΠΌΠΈ). ΠΠ΅Β Π²ΠΈΠΆΡ ΡΠΌΡΡΠ»Π° Π·Π΄Π΅ΡΡ ΡΠ½ΠΎΠ²Π° ΠΏΠΎΠ΄Π½ΠΈΠΌΠ°ΡΡ ΡΡΡ ΡΠ΅ΠΌΡ. ΠΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Ρ
Π°ΠΉΠΏΠΎΠ²Π°ΡΡ Π½Π°Β Β«Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ
ΡΠ΅ΡΠΊΠ°Ρ
Β», ΡΒ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΡ Π²Π°ΠΌ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π΄Π²Π° Π΄Π΅ΠΉΡΡΠ²ΠΈΡ:
ΠΠ²ΡΡΠΈΡ Π½Π΅ΠΏΠ»ΠΎΡ
ΠΎ, Π°? ΠΠ°Π²Π°ΠΉΡΠ΅ Π½Π°ΡΠ½ΡΠΌ. ΠΠ΅ΡΠ΅Π΄ Π²Π°ΠΌΠΈ ΡΠ΅ΡΡΡΠ΅ ΡΠ°ΠΌΡΡ
ΠΏΠΎΠ»Π΅Π·Π½ΡΡ
ΠΏΠ°ΡΡΠ΅ΡΠ½Π° Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ
ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ² ΠΈΠ·Β ΡΠ΅Ρ
, ΡΡΠΎ ΡΒ Π·Π½Π°Ρ. ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠΌΠΈ Π²ΡΒ Π½Π΅Β ΠΎΠ±ΠΎΠΉΠ΄Π΅ΡΠ΅ΡΡ. ΠΠΎΒ ΡΡΠΎ Π»ΡΡΡΠ΅Π΅, ΡΒ ΡΠ΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΠ°ΡΡ. ΠΠΌΠ΅ΡΡΠ΅ ΡΡΠΈ ΠΏΠ°ΡΡΠ΅ΡΠ½Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΎΡΠ½ΠΎΠ²Ρ (ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ), ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΡΡΠ»Π΅Π΄ΠΈΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±Π°; ΠΈΒ ΡΠ²ΠΈΠ΄Π΅Π² Π΅Π³ΠΎ, ΡΠ°Π·Π²ΠΈΠ΄Π΅ΡΡ ΡΠΆΠ΅ Π±ΡΠ΄Π΅Ρ Π½Π΅Π»ΡΠ·Ρ.
ΠΡΠΎ ΡΠ°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ Β«Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉΒ» ΠΏΠ°ΡΡΠ΅ΡΠ½, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΡΠ°Π½Π°Β ΠΎΠ½, ΠΏΠΎΒ ΡΡΡΠΈ, ΠΎΡΡΠ°ΡΡΡΡ ΠΏΡΠ΅ΠΆΠ½ΠΈΠΌ (Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, Π½Π΅Β Π°Π΄Π°ΠΏΡΠΈΡΡΠ΅ΡΡΡ). ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅Β ΠΌΠ΅Π½ΡΡΡΡΡ ΡΠΎΠ²ΡΠ΅ΠΌ, ΠΏΠΎΒ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅ ΠΊΠΎΠ³Π΄Π° Π²ΡΡ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΠΎΠΊΡΡΠ³ Π½ΠΈΡ
ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ ΠΈΠ»ΠΈ ΡΠΌΠ΅Π½ΡΡΠ°Π΅ΡΡΡ.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π°Β Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π²Β ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΊΡΡΡΠ° Learn UIΒ Design:
ΠΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΡΒ Π½ΠΈΠΌ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΊΡΠ°Π½Π°?
ΠΡΒ Π»Π°Π΄Π½ΠΎ, Π΅ΡΠ»ΠΈ ΡΠΊΡΠ°Π½ Π±ΡΠ΄Π΅Ρ ΠΎΡΠ΅Π½Ρ ΡΠ·ΠΊΠΈΠΌ, ΠΎΡΒ Π±ΠΎΠΊΠΎΠ²ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ ΠΎΡΡΠ°Π½Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½Π° ΠΈΠΊΠΎΠ½ΠΊΠ°, ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΏΡΡΡΠ΅ΡΡΡ. ΠΠΎΒ Π΅ΡΠ»ΠΈ Π΄Π»Ρ Π±ΠΎΠΊΠΎΠ²ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΌΠ΅ΡΡΠ°, ΠΎΠ½ΠΎ Π½Π΅Β ΡΡΠ°Π½Π΅Ρ ΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ.
ΠΡΠΎ ΡΠ±ΠΈΠ²Π°Π΅Ρ ΡΒ ΡΠΎΠ»ΠΊΡ Π²Β ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ ΠΈΒ ΠΌΠΎΠΈΡ
ΡΡΡΠ΄Π΅Π½ΡΠΎΠ². ΠΠΎΒ ΠΌΠ½Π΅Π½ΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ² Π²Β ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°Ρ
, ΡΠ΅ΡΠΊΠΈ Π²Π°ΠΆΠ½Ρ. ΠΠ°ΠΆΠ΅ ΠΎΡΠ΅Π½Ρ. Β«Π Π°ΡΡΡΠΈΡΠ°ΠΉΡΠ΅ ΡΠ΅ΡΠΊΡ Π΅ΡΡ ΠΏΠ΅ΡΠ΅Π΄ Π½Π°ΡΠ°Π»ΠΎΠΌ ΡΠ°Π±ΠΎΡΡ Π½Π°Π΄ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌΒ»,Β β Π³ΠΎΠ²ΠΎΡΡΡ ΠΎΠ½ΠΈ. ΠΠΎΒ Π΅ΡΠ»ΠΈ ΡΒ Π½Π°Ρ Π΅ΡΡΡ Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΡΡΠΎ ΡΠΎΠ³Π΄Π°? ΠΡΡΡ ΠΏΠ°ΠΈΠ½ΡΠΊΠ°ΠΌΠΈ ΠΈΒ Π΅Π³ΠΎ ΡΠΎΠΆΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡ ΠΏΠΎΒ ΡΠ΅ΡΠΊΠ΅?
ΠΠΎΒ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ, Π΅ΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° Π½Π°ΡΠ΅Π³ΠΎ ΡΠΊΡΠ°Π½Π°Β β Π°Β Π·Π°Β Π½ΠΈΠΌ ΠΈΒ ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ βΡΠ²Π΅Π»ΠΈΡΠΈΡΡΡ?! ΠΡΒ ΡΠΆΠ΅ Π²ΠΈΠ΄Π΅Π»ΠΈ, ΠΊΒ ΡΠ΅ΠΌΡ ΡΡΠΎ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ…
ΠΠ΅Π·ΡΡΠ»ΠΎΠ²Π½ΠΎ, ΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ΡΡ ΡΠ΅ΡΠΊΠΎΠΉ, Π΅ΡΠ»ΠΈ ΠΎΠ½Π° ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π²Π°ΠΌ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠΎΒ ΠΏΠΎΒ Π±ΠΎΠ»ΡΡΠ΅ΠΉ ΡΠ°ΡΡΠΈ, Π²ΡΒ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΠΎ ΠΎΠ±ΠΎΠΉΠ΄ΡΡΠ΅ΡΡ Π²ΡΠ΅Π³ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ Π»ΠΈΠ½Π΅ΠΉΠΊΠ°ΠΌΠΈ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΒ ΡΡΠ΅ΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌ:
ΠΡΒ Π²ΠΎΡ ΠΈΒ Π²ΡΡ. ΠΡΠΎΡΡΠ΅ΠΉΡΠΈΠΉ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ… Π½Π΅Β ΡΠΌΠΎΠΆΠ΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π½ΠΈΡΠ΅Π³ΠΎ. ΠΡΒ ΠΈΠ»ΠΈ, Π²Β Π»ΡΡΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΎΠ½Β Π²ΠΎΠΎΠ±ΡΠ΅ ΠΏΡΠΎΠΏΠ°Π΄ΡΡ Π½Π°Β ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ
ΡΠΊΡΠ°Π½Π°Ρ
.
ΠΡΠΌΠ°Ρ, ΡΠ΅ΠΏΠ΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π°ΡΡ Π²Π°ΠΌ ΠΊΠΎΠ΅-ΡΡΠΎ ΠΏΠΎΡΠ»ΠΎΠΆΠ½Π΅Π΅ π
ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ Π±Π΅Π· ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ ΠΏΠΎΒ ΡΠΈΡΠΈΠ½Π΅ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΡΡ Π²ΡΠ»Π΅Π΄ Π·Π°Β ΡΠΊΡΠ°Π½ΠΎΠΌ, ΠΊΠ°ΠΊΠΈΠΌΒ Π±Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΎΠ½Β Π½ΠΈΒ ΡΡΠ°Π». ΠΠ±ΡΡΠ½ΠΎ ΡΠ°ΠΊΠΎΠ΅ ΡΠ»ΡΡΠ°Π΅ΡΡΡ ΡΒ ΡΠΎΠ½ΠΎΠ²ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ:
ΠΡΡΠ°ΡΠΈ, Π²ΠΎΠΏΡΠΎΡ: Π·Π°ΡΠ΅ΠΌ Π½ΡΠΆΠ΅Π½ ΠΏΠ°ΡΡΠ΅ΡΠ½ ΡΒ Π½Π΅ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ? ΠΠΎΠ²ΡΠΎΡΡΠΉΡΠ΅ Π·Π°Β ΠΌΠ½ΠΎΠΉ: ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΠ°ΠΊ Ρ
ΠΎΡΠ΅Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ.
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ (Π²Β ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π·Π±ΠΈΠ²Π°ΡΡ ΡΠΊΡΠ°Π½ Π½Π°Β ΠΎΠ±Π»Π°ΡΡΠΈ) ΡΡΠ΅Π±ΡΡΡ Π»ΡΠ±ΠΎΠΉ ΡΠ΅Π½ΠΎΠΉ Π±ΡΡΡ ΠΏΠΎΒ ΡΠΈΡΠΈΠ½Π΅ ΡΠΊΡΠ°Π½Π°, Π²Β ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠΌΠΎΡΡΠ΅ΡΡΡΡ ΠΎΠ½ΠΈ Π±ΡΠ΄ΡΡ Π½Π΅ΡΠΊΠ»ΡΠΆΠ΅.
Π―Β ΡΡΡ ΠΏΠΎΠΈΠ³ΡΠ°Π»ΡΡ ΡΒ Π²Π΅ΡΡΡΠΊΠΎΠΉ, ΠΏΡΡΠ°ΡΡΡ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠΎΠ½Π° Π³Π»Π°Π²Π½ΠΎΠΉ ΡΠ°ΠΉΡΠ° Stripe. ΠΡΡ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π·Π΄Π΅ΡΡ Π½Π°Π·Π²Π°ΡΡ Β«ΡΠΎΠ½ΠΎΠΌΒ», ΠΏΠΎΡΠ»Π΅ ΠΌΠΎΠΈΡ
Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΠ°ΠΏΠ΅Ρ ΠΊΠ°ΠΊ ΡΡΡΠ°Π½Π½ΠΎ.
ΠΡΠ±ΠΎΠΏΡΡΠ½ΠΎ, Π½ΠΎΒ ΠΏΠ°ΡΡΠ΅ΡΠ½ ΡΒ Π½Π΅ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ Π½Π΅Β ΡΠ²Π»ΡΠ΅ΡΡΡ Π½ΠΈΒ ΡΠ°ΠΌΡΠΌ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ½Π½ΡΠΌ, Π½ΠΈΒ ΡΠ°ΠΌΡΠΌ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΌ ΠΏΠ°ΡΡΠ΅ΡΠ½ΠΎΠΌ Π΄Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΠΎΒ ΠΎΠ½Β Π½Π΅Π²Π΅ΡΠΎΡΡΠ½ΠΎ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π΅Π½ Π²Β ΠΏΠ°ΡΠ΅ ΡΒ ΡΡΠ΅ΡΡΠΈΠΌ ΠΏΠ°ΡΡΠ΅ΡΠ½ΠΎΠΌ.
ΠΠΌΠ΅Π½Π½ΠΎ ΡΡΠΈΠΌ ΠΏΠ°ΡΡΠ΅ΡΠ½ΠΎΠΌ ΡΒ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΡΡ ΡΠ°ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ
, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΌΠΎΠΈΡ
ΠΌΠ°ΠΊΠ΅ΡΠΎΠ². ΠΒ ΡΠ°ΠΊΠΈΠ΅ ΠΏΠ°ΡΡΠ΅ΡΠ½Ρ ΡΒ Π²Π°Ρ ΠΏΠ΅ΡΠ΅Π΄ Π³Π»Π°Π·Π°ΠΌΠΈ Π²ΡΡ Π²ΡΠ΅ΠΌΡ.
… ΠΈΠ»ΠΈ Π΅ΡΠ»ΠΈ ΡΒ Π²Π°Ρ Π·Π΄ΠΎΡΠΎΠ²Π΅Π½Π½ΡΠΉ ΠΌΠΎΠ½ΠΈΡΠΎΡ, ΠΎΡΠΊΡΠΎΠΉΡΠ΅ Facebook, Π²ΡΒ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΠΏΠ°ΡΡΠ΅ΡΠ½ ΡΒ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ Π²ΠΎΒ Π²ΡΠ΅ΠΉ ΡΠ²ΠΎΠ΅ΠΉ ΠΊΡΠ°ΡΠ΅.
ΠΠ°, ΡΒ ΠΏΠΎΠ»ΡΠ·ΡΡΡΡ adblocker, ΡΡΠΎΠ±Ρ Π½Π΅Β Π²ΠΈΠ΄Π΅ΡΡ ΡΠ²ΠΎΡ Π½ΠΎΠ²ΠΎΡΡΠ½ΡΡ Π»Π΅Π½ΡΡ. ΠΠΎΠ²Π΅ΡΡΡΠ΅, Π΅ΡΠ»ΠΈ Π²Π΄ΡΡΠ³ ΡΒ Π·Π½Π°ΠΊΠΎΠΌ ΡΒ Π²Π°ΠΌΠΈ Π»ΠΈΡΠ½ΠΎ, ΡΡΠΎ Π΅ΡΡ Π½Π΅Β Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ ΠΌΠ½Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ ΡΠΈΡΠ°ΡΡ Π²Π°ΡΠΈ ΠΌΠ½Π΅Π½ΠΈΡ. ΠΠ΅Β Π΄Π»Ρ ΡΡΠΎΠ³ΠΎΒ Π»ΠΈ ΠΏΡΠΈΠ΄ΡΠΌΠ°Π»ΠΈ ΡΠ°ΡΡΡΠ»ΠΊΡ ΠΏΠΎΒ ΠΏΠΎΡΡΠ΅?
ΠΠΊΠ΅ΠΉ, ΡΒ ΠΏΠ΅ΡΠ΅Π±ΠΎΡΡΠΈΠ» ΡΒ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π²ΡΡΠ΅. ΠΠ°ΡΠΎ ΡΒ Π½Π°ΡΡΠ» ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΒ Π²ΡΠ΅ΠΌΠΈ ΠΏΠ°ΡΡΠ΅ΡΠ½Π°ΠΌΠΈ, ΠΎΒ ΠΊΠΎΡΠΎΡΡΡ
Π³ΠΎΠ²ΠΎΡΠΈΠ»! ΠΒ Π²Β ΡΡΠΎΠΌ-ΡΠΎ Π²ΡΡ ΡΡΡΡ… Π²Β ΠΏΠ΅ΡΠ΅ΠΏΠ»Π΅ΡΠ΅Π½ΠΈΠΈ Π²ΡΠ΅Ρ
ΠΏΠ°ΡΡΠ΅ΡΠ½ΠΎΠ². ΠΡΠΎ-ΡΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·Π³Π»ΡΠ΄ΡΠ²Π°ΡΡ Π²Π°Ρ Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π°Β Π½Π΅Π²ΠΎΠΎΠ±ΡΠ°Π·ΠΈΠΌΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΌΠΎΠ½ΠΈΡΠΎΡΠ΅, Π°Β ΠΊΡΠΎ-ΡΠΎΒ β Π½Π°Β ΡΠ²ΠΎΠΈΡ
ΡΠ°ΡΠ°Ρ
, Π½ΠΎΒ Π²ΡΒ ΠΈΡΠ°ΠΊ ΡΡΠΎ ΡΠΆΠ΅ Π·Π½Π°Π΅ΡΠ΅.
ΠΒ ΡΡΠ°ΡΡΡΡ, Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ² ΡΒ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ Π½Π°Β ΠΎΡΠ½ΠΎΠ²Π΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ² ΡΒ Π½Π΅ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π·Π΄ΠΎΡΠΎΠ²ΠΎ Π²Π°ΠΌ ΠΏΠΎΠ΄ΡΠΎΠ±ΠΈΡΡ. ΠΡ
Β Π΄Π°, ΠΈΒ Π΅ΡΡ ΠΎΠ΄ΠΈΠ½ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΡΠΎΠΊΒ β Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΡΠΎ ΠΈΒ ΡΠ°ΠΊ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, Π½ΠΎΒ Π²ΡΡΒ ΠΆΠ΅: ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ ΠΠΠΠΠ―ΠΠΠ’ΠΠΠ¬ΠΠ Π·Π°ΠΏΠΎΠ»Π½ΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ Π²Π΅ΡΡ ΠΌΠ°ΠΊΠ΅Ρ! ΠΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ°Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΡΠΎΠ²Π½ΠΎ ΡΡΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅ΡΡΠ°, ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½ΡΠΆΠ½ΠΎ Π²Π°ΠΌ. ΠΒ Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Bootstrap Π΄Π°Π» Π²Π°ΠΌ 12Β ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, ΡΡΠΎ Π΅ΡΡ Π½Π΅Β Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ΅ ΠΈΡ
Β Π·Π°ΠΏΠΎΠ»Π½ΡΡΡ. ΠΠΎΠ·Π²ΠΎΠ»ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΡ ΡΠ°ΠΌΠΎΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, ΠΊΠ°ΠΊΠ°Ρ ΡΠΈΡΠΈΠ½Π° Π΅ΠΌΡ ΠΏΠΎΠ΄ΠΎΠΉΠ΄ΡΡ, Π²Ρ, Π½Π°Β ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°Π΅ΡΠ΅ ΠΊΒ Π½Π΅ΠΌΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅.
ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΠΊΠΎΠ³Π΄Π° Π²ΡΒ Π²ΠΏΠ΅ΡΠ²ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅Π»ΠΈ Π²ΠΎΡ ΡΡΠΎ? (Π½ΡΒ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ ΡΠ°ΠΌ ΡΡΠ° ΡΡΡΠ°Π½ΠΈΡΠ° ΡΠ°Π½ΡΡΠ΅ Π²ΡΠ³Π»ΡΠ΄Π΅Π»Π°?)
ΠΠ°ΠΆΠ΅ Π½Π΅Β Π³ΠΎΠ²ΠΎΡΠΈΡΠ΅, ΠΊΠ°ΠΊΠΎΠΉ ΡΒ ΡΡΠ°ΡΠΈΠΊΠ°Π½.
ΠΒ Π²ΠΎΡ, Π²Π·Π³Π»ΡΠ½ΠΈΡΠ΅. ΠΠ°ΠΆΠ΅ Π²Β ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Π½Π°Β Google.com Π²ΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΏΠ°ΡΡΠ΅ΡΠ½Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³Π»ΠΈ ΠΏΡΠΈΠ΄ΡΠΌΠ°ΡΡ ΠΈΡΠΎΠ³ΠΎΠ²ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ.
ΠΠ°ΡΠ°ΡΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡ Π²Β ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅ ΡΒ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ Π½Π°Β ΠΎΡΠ½ΠΎΠ²Π΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΡΒ Π½Π΅ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ. Π‘ΡΡΠ»ΠΊΠΈ Π²ΠΎΒ Π²ΡΠ΅Ρ
ΡΠ΅ΡΡΡΠ΅Ρ
ΡΠ³Π»Π°Ρ
ΠΎΡΡΠ°Π½ΡΡΡΡ Π½Π°Β ΠΌΠ΅ΡΡΠ΅, ΠΊΠ°ΠΊ ΡΠΈΠ»ΡΠ½ΠΎΒ Π±Ρ Π½Π΅Β ΡΠ°ΡΡΠΈΡΡΠ»ΡΡ ΡΠΊΡΠ°Π½. ΠΡΠΈΡΠΈΠ½Π°Β ΠΆΠ΅ Π²Β ΡΠΎΠΌ, ΡΡΠΎ ΡΡΠΈ ΡΡΡΠ»ΠΊΠΈΒ β ΠΏΡΠΎΡΡΠΎ Π·Π°ΠΌΠ΅ΡΠΊΠΈ Π½Π°Β ΠΏΠΎΠ»ΡΡ
ΡΡΡΠ°Π½ΠΈΡΡ, Π°Β Π½Π΅Β ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
ΠΡΡ Π·Π°ΠΌΠ΅ΡΠΊΠ°: ΡΡΡΠ°Π½ΠΈΡΠ° Google Π½Π°Β ΡΡΠ΅Π΄Π½Π΅ΠΌ ΡΠΊΡΠ°Π½Π΅ ΡΠΆΠ΅ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΡΡΠ°Π½Π½ΠΎ, Π°Β Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ² ΠΏΡΠ΅Π΄ΡΡΠΌΠΎΡΡΠ΅Π½Π° ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π΄ΡΡΠ³Π°Ρ Π²Π΅ΡΡΠΈΡ ΡΠ°ΠΉΡΠ°. Π’Π΅ΠΌ Π½Π΅Β ΠΌΠ΅Π½Π΅Π΅, Π΅ΡΠ»ΠΈ Π²ΡΒ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ΡΡ ΡΡΠΈΠΌΠΈ ΠΏΠ°ΡΡΠ΅ΡΠ½Π°ΠΌΠΈ Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ
ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ², ΡΠΎΒ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΠΊΠ°ΠΊ Π²ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΈΒ Π±ΠΎΠ»ΡΡΠ΅ ΠΎΡΠΏΠ°Π΄Π°Π΅Ρ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ Π²Β ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ.
Π₯ΠΎΡΠΎΡΠΈΠΉ ΡΠΎΠ²Π΅Ρ: ΡΡΠ°Π²ΡΡΠ΅ ΠΏΠΎΒ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΡΡΡΡΠΏΠΎΠ² Π½Π°Β 0. ΠΠΎΠΆΠ΅ΡΠ΅ Π½Π΅Β Π±Π»Π°Π³ΠΎΠ΄Π°ΡΠΈΡΡ.
Π‘ΡΡΠ΅ΡΡΠ²ΡΡΡ ΠΈΒ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠ°ΡΡΠ΅ΡΠ½Ρ Π΄Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ², Π½ΠΎΒ ΡΠ΅, ΡΡΠΎ ΡΒ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»ΠΈΠ»Β β ΡΠ°ΠΌΡΠ΅ Π²Π°ΠΆΠ½ΡΠ΅. ΠΡΠ»ΠΈ Π²Π°ΠΌ ΠΏΡΠΈΡΠ»ΠΈΡΡ ΠΏΠΎΒ Π΄ΡΡΠ΅ ΡΡΠΈ ΠΌΠΎΠΈ ΡΡΠ΅Π½Π°Π½ΠΈΡ, ΡΠΎΒ ΠΌΠΈΠ»ΠΎΡΡΠΈ ΠΏΡΠΎΡΡ Π½Π°Β Learn UIΒ Design, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΠ°ΠΌ, ΠΊΠ°ΠΊ Π²ΠΎΠ΄ΠΈΡΡΡ, ΡΠΎΠ±ΡΠ°Π½ ΡΠ΅Π»ΡΠΉ ΠΊΡΡΡ.
ΠΠ»Π°Π²Π½ΡΠΉ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΏΡΠΈΡΠΌ β ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π±ΡΠ΅ΠΉΠΊΠΏΠΎΠΈΠ½ΡΠΎΠ², ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌΡΡ
Π²Π°ΡΠΈΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ, Π°Β Π½Π΅Β ΡΠ²ΠΎΠ΅Π½ΡΠ°Π²Π½ΡΠΌΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ Π΄Π΅Π²Π°ΠΉΡΠ°.
Π― Π·Π½Π°Ρ, Π·Π½Π°Ρ. ΠΒ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½-ΡΠΈΡΡΠ΅ΠΌΠ΅ ΡΠΆΠ΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Ρ ΡΠ²ΠΎΠΈ Π±ΡΠ΅ΠΉΠΊΠΏΠΎΠΈΠ½ΡΡ Π²Β ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ ΡΠΎΒ ΡΡΠ°ΡΡΠΌΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΡΠΊΡΠ°Π½ΠΎΠ² iPhone. ΠΡΠΎ ΡΡΠΆΡΠ»Π°Ρ Π±ΠΎΡΡΠ±Π°, Π½ΠΎΒ Π·ΠΎΠ»ΠΎΡΡΠΌ ΠΏΡΠ°Π²ΠΈΠ»ΠΎΠΌ Π΄Π»Ρ Π²Π°Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΡΠ°ΡΡ ΠΌΡΠ΄ΡΡΠ΅ ΡΠ»ΠΎΠ²Π° Π‘ΡΠ΅ΡΠ°Π½Π° Π₯Π΅Ρ (Stephen Hay): Β«Π½Π°ΡΠ½ΠΈΡΠ΅ ΡΒ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠ³ΠΎ ΡΠΊΡΠ°Π½Π° ΠΈΒ ΡΠ°ΡΡΠΈΡΡΠΉΡΠ΅ Π΅Π³ΠΎ. ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠ°ΠΊΠ΅Ρ ΡΡΠ°Π½Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Ρ
ΡΠ΅Π½ΠΎΠ²ΠΎΒ β Π²ΡΠ΅ΠΌΡ Π΄Π»Ρ Π±ΡΠ΅ΠΉΠΊΠΏΠΎΠΈΠ½ΡΠ°!Β»
ΠΠΎΡ ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½Π°Β ΡΠ°ΠΉΡΠ΅ Stripe:
ΠΠ·Π½Π°ΡΠ°Π΅ΡΒ Π»ΠΈ ΡΡΠΎ, ΡΡΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΆΠΎΠ½Π³Π»ΠΈΡΠΎΠ²Π°ΡΡ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΡΡ
Π·Π°ΠΏΡΠΎΡΠΎΠ²? ΠΠ°, ΠΊΒ ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ ΡΠ°ΠΊ. ΠΠΎΡΡΠΎΠΌΡ ΠΈΒ ΠΈΡ
Β ΡΠΏΡΡΠΌΡΡΠ²ΠΎ ΠΌΠ½Π΅ ΠΏΠΎΠ½ΡΡΠ½ΠΎ. ΠΠΎΒ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΡΒ Π²Π°Ρ ΡΠΏΡΠ°ΡΠΈΠ²Π°ΡΡ: Β«ΠΠΉ, Π°Β Π³Π΄Π΅Β Π±Ρ Π½Π°ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π±ΡΠ΅ΠΉΠΊΠΏΠΎΠΈΠ½ΡΡ?Β», ΠΎΡΠ²Π΅ΡΠ°ΠΉΡΠ΅: Β«ΠΠ΄Π΅ ΡΡΠΎΠ³ΠΎ Ρ
ΠΎΡΠ΅Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΡΡΠΏΠΈΡа» β ΠΈΒ Π±Π΅ΠΉΡΠ΅ ΠΏΠΎΒ ΡΠ°ΠΌ.
Π‘ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ Π²Π΅ΡΡΠΈΠ΅ΠΉ Sketch (v.44) ΡΡΠ½ΠΊΡΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π³ΡΡΠΏΠΏΡ Π±ΡΠ»Π° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π°. ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΡΡΠ½Π΄Π°ΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΡ
ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π½Π΅Ρ, Ρ Π½Π°Ρ ΠΏΠΎΡΠ²ΠΈΠ»ΠΎΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ ΡΡΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ.
Π― ΡΠΆΠ΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΏΠΈΡΠ°Π» ΠΎΠ± ΡΡΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ ΡΠ°Π½Π΅Π΅. Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ ΡΠ°ΡΡΠΌΠΎΡΡΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΠΈ Π΄Π°ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½ΠΎΠ²ΡΡ
ΡΠΎΠ²Π΅ΡΠΎΠ². Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ, Ρ ΡΡΠ°Π²Π½Ρ ΡΡΠ½ΠΊΡΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π³ΡΡΠΏΠΏ ΡΒ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ Auto-layout ΠΎΡ Anima.
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΏΡΠΈΡΡΡΠΏΠΈΡΡ ΠΊ ΡΠ°Π·Π±ΠΎΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, Ρ Ρ
ΠΎΡΡ Π±ΡΡΡΡΠΎ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ Π½ΠΎΠ²ΠΈΡΠΊΠ°ΠΌ, ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΡΡΠ½ΠΊΡΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π³ΡΡΠΏΠΏΡ.
Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ, ΡΠΎ ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈ Π½Π΅ ΡΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ ΡΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠΎΠ²Π»ΠΈΡΡΡ Π½Π° ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ. Π’Π΅ΠΏΠ΅ΡΡ Ρ Π½Π°Ρ Π΅ΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ Π΄Π΅ΡΠ°Π»ΡΠΌΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΡΠ»ΠΎΡ ΠΊ Π»ΡΠ±ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Π΅ ΠΏΠΎ ΠΆΠ΅Π»Π°Π½ΠΈΡ. Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΌΠ΅Π½Π΅Π΅ ΠΏΠΎΠ½ΡΡΠ½ΡΠΌΠΈ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, Π²ΠΏΠ΅ΡΠ²ΡΠ΅ ΡΠ°Π±ΠΎΡΠ°ΡΡΠΈΡ
Π² ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ΅, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΏΡΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ ΡΠ΅ΠΆΠΈΠΌΠΎΠ² floating ΠΈ ΡΠ°ΡΡΡΠΆΠ΅Π½ΠΈΡ. ΠΠΎ Π½Π΅ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΉΡΠ΅ΡΡ, ΠΈΡ
Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ½ΡΡΡ!
Π― ΠΌΠΎΠ³Ρ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π΄Π΅Π»Π°ΡΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΡΠΈΡ
Π²Π΅ΡΠ΅ΠΉ ΠΈ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ Π²Π΅ΡΡΠΈΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΡΠΎ ΡΡΠ΅Π±ΠΎΠ²Π°Π»ΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
Ρ
Π°ΠΊΠΎΠ², ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡΡ
ΡΠ»ΠΎΠ΅Π², Π½ΠΎ Π²Ρ Π²ΡΠ΅ ΠΆΠ΅ ΠΌΠΎΠ³Π»ΠΈ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ. ΠΠΎΡΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ Π½Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΊΠ°ΠΊ Π²Π°ΠΆΠ½ΠΎΠ΅ ΠΏΡΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΉ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π’Π°ΠΊ ΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π±ΡΡΡ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ.
ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½Π°Ρ Π΄Π΅ΡΠ°Π»Ρ Π² ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ β Π³ΡΡΠΏΠΏΠ° Π³Π°Π»Π΅ΡΠ΅ΠΈ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ. Π§ΡΠΎΠ±Ρ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΡΡΠΎΡ ΠΌΠ°ΠΊΠ΅Ρ ΡΠ΅ΡΠΊΠΈ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡΠ΅ ΡΠ»ΠΎΠΈ Π² Π³ΡΡΠΏΠΏΠ΅. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΡΠΎΠ±Π΅Π» ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅ΡΠΊΠ°ΠΌΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΡΠΈ ΠΈΠ»ΠΈ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡΡΡ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°.
Π― ΡΠ΄Π΅Π»Π°Π» ΡΠ°Π±Π»ΠΈΡΡ, ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»ΡΡΠ°ΠΈ, ΠΈ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ Π²Π΅ΡΡΠΈΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ. ΠΠΎΠ½Π΅ΡΠ½ΠΎ, Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· Π½ΠΈΡ
Π½Π΅ ΠΌΠΎΠ³Π»ΠΈ Π±ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌΡ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ Π²Π΅ΡΡΠΈΠΈ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π²Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ.
ΠΠ»Ρ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ
ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΠ·ΡΠ²Π°ΡΡ ΡΠΎΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ Sketch ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ RelabelΒ (Ρ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌΒ RunnerΒ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π±ΠΎΠ»Π΅Π΅ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΌ).
Π― Π½Π°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΠΎΡΠΎ ΠΏΠΎΡΠ²ΠΈΡΡΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π²ΡΡΡΠ½ΡΡ ΠΊΠ°ΠΆΠ΅ΡΡΡ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΠΌ!
Π ΡΠΈΠΌΠ²ΠΎΠ»Π°Ρ
ΠΈΠΌΠ΅Π΅ΡΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΡΡΠ½ΠΊΡΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΏΡΠΎΡΠ°Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ². ΠΠΎΠ³Π΄Π° Π²Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΈΡΡΠ²Π°Π΅ΡΠ΅ ΡΠ΅ΠΊΡΡ Π² ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡΠ΅ ΡΠΈΠΌΠ²ΠΎΠ»Π°, Sketch Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅Ρ Π»ΡΠ±ΠΎΠΉ ΠΈΠ· ΡΠ»ΠΎΠ΅Π², ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ
Π²Π±Π»ΠΈΠ·ΠΈ ΡΡΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ³ΠΎ ΡΠ»ΠΎΡ.
Π― Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ Π΅ΡΡΡ ΡΡΠΎ-ΡΠΎ ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΠΎΠ΅, ΠΊ ΡΠ΅ΠΌΡ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΡ Bohemian Coding Π½Π΅ Π±ΡΠ»Π° Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½Π° β ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΠΏΡΠΎΡΠ΅ΡΡΠ°. ΠΠ΅Π΄Π»Π΅Π½Π½ΡΠ΅ ΠΈ Π½Π΅ ΠΏΡΠΎΠ΄ΡΠΌΠ°Π½Π½ΡΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΠΊΠ»ΡΡΠ΅Π²ΡΡ
ΡΡΠ½ΠΊΡΠΈΠΉ Π·Π°ΡΡΠ°Π²ΠΈΠ»ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ² Π½Π°ΠΉΡΠΈ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π½Π΅ΡΡΡΠΎΠΉΡΠΈΠ²ΡΠ΅ ΡΠ°Π±ΠΎΡΠΈΠ΅ ΠΏΡΠΎΡΠ΅ΡΡΡ. ΠΡΠΎΠ±Π΅Π½Π½ΠΎ Π² ΡΡΠΈΠ»ΡΡ
ΡΠ»ΠΎΠ΅Π² ΠΈ ΡΡΠ½ΠΊΡΠΈΡΡ
ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ². ΠΠ΅Ρ
ΠΎΡΠΎΡΠΎ ΠΏΠΎΠ΄ΡΠ°Π»ΠΊΠΈΠ²Π°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ² ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Ρ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎΠ±Ρ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ Π²Π΅ΡΠΈ Ρ Π½ΡΠ»Ρ ΠΈ ΡΠ°ΡΡΠΎ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΊ Π½ΠΈΠΌ. Π― Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°Π·Π΄ΡΠ°ΠΆΠ°Π΅Ρ.
Π ΡΠ΅Π»ΠΎΠΌ, Ρ Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ Ρ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Bohemian Coding Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ Π»ΡΡΡΠ°Ρ Π΄ΠΎΡΠΎΠΆΠ½Π°Ρ ΠΊΠ°ΡΡΠ° ΠΈ ΠΎΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΎΡΡΠΎΡΠΎΠΆΠ½ΠΎΠΉ ΠΏΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΡΡ
ΡΡΠ½ΠΊΡΠΈΠΉ. ΠΡ Π»ΡΠ±ΠΈΠΌ Sketch ΠΈ ΠΌΡ Ρ
ΠΎΡΠΈΠΌ,ΡΡΠΎΠ±Ρ ΠΎΠ½ Π±ΡΠ» Π»ΡΡΡΠΈΠΌ!
Google ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎ ΠΎΠ±ΡΡΠ²ΠΈΠ» Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠ½ΡΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠΌ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
Π²Π΅ΡΡΠΈΠΉ ΡΠ°ΠΉΡΠΎΠ². ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΡΠ°ΠΉΡ ΠΈΠ»ΠΈ Π±Π»ΠΎΠ³, ΠΏΠΎΡΠ° ΡΠ΅ΡΡΡΠ·Π½ΠΎ Π·Π°Π΄ΡΠΌΠ°ΡΡΡΡ ΠΎ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π΅ Π½Π° Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ ΡΠ°ΠΉΡΠ° Π΄Π»Ρ ΡΠ΅Π»Π΅ΡΠΎΠ½ΠΎΠ² ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ².
ΠΡΠ»ΠΈ Π²Ρ Π΅ΡΡ Π½Π΅ ΠΎΡΠΎΠ±ΠΎ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠ΅ΠΉ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Ρ Π²Π°Ρ ΠΌΠΎΠ³ΡΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π²ΠΎΠΏΡΠΎΡΡ, Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΡΠΆΠ΅ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΈΠ»ΠΈ ΠΎΡΠ²Π΅ΡΡ.
ΠΠ°Ρ ΡΠ°ΠΉΡ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΠΎ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π½Π° ΠΌΠΎΠ½ΠΈΡΠΎΡΠ΅ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°, Π½ΠΎ Π΅Π³ΠΎ Π²ΠΈΠ΄ ΠΌΠΎΠΆΠ΅Ρ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π°Ρ
ΡΠ΅Π»Π΅ΡΠΎΠ½ΠΎΠ² ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ². ΠΡΠΈ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π΅ Π½Π° Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°ΠΉΡ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Ρ
ΠΎΡΠΎΡΠΎ Π½Π° Π»ΡΠ±ΡΡ
ΡΠΊΡΠ°Π½Π°Ρ
.
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΡΠΎΠΉ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°ΡΡ Π»ΠΈΡΡ ΠΎΠ΄Π½Ρ Π²Π΅ΡΡΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄Β ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΊΡΠ°Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°. Π£ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄Π° Π΅ΡΡΡ ΡΡΠ°Π·Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²:
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠΈΡΡΡΠΉΒ HTML ΠΈ CSS. ΠΡ Π·Π°Π΄Π°ΡΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° Π² CSS, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠ΅Π½ΡΡΡ ΡΡΠΈΠ»Ρ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΡΠ°Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΏΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅ ΡΠΊΡΠ°Π½Π° ΠΌΠ΅Π½Π΅Π΅ 320px Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ Π±ΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ, ΠΈΠ»ΠΈ ΠΏΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅ ΡΠΊΡΠ°Π½Π° Π±ΠΎΠ»Π΅Π΅ 1920px (ΡΠΈΡΠΎΠΊΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ ΠΌΠΎΠ½ΠΈΡΠΎΡ) ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° Π±ΡΠ΄Π΅Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ Π΄ΠΎ 15px.
ΠΡΡ ΠΏΡΠΎΡΡΠΎ. ΠΡΠΊΡΠΎΠΉΡΠ΅ ΡΡΠΎΡ ΡΠ°ΠΉΡ Π² Π»ΡΠ±ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ. ΠΡΠ»ΠΈ Π²ΠΈΠ΄ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ, Π·Π½Π°ΡΠΈΡ, Π±ΡΠ» ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½.
Π Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² β Π±ΡΠ΄Π΅Ρ. Π Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΡ CSS3 ΠΈ HTML5 (Π΄Π»Ρ ΡΠ»ΡΡΡΠ΅Π½Π½ΠΎΠΉ ΡΠ΅ΠΌΠ°Π½ΡΠΈΠΊΠΈ), ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π² Π±ΠΎΠ»Π΅Π΅ ΡΡΠ°ΡΡΡ
Π²Π΅ΡΡΠΈΡΡ
IE. ΠΠ΄Π½Π°ΠΊΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π²ΡΡ
ΠΎΠ΄, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΡ JavaScript β respond.js ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠ΅Π΄ΡΡΠ²Π° ΠΌΠΎΠ΄Π΅ΡΠ½ΠΈΠ·Π°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π°Π΄Π°ΠΏΡΠΈΡΡΡΡ CSS3 ΠΈ HTML5 ΠΏΠΎΠ΄ Π±ΠΎΠ»Π΅Π΅ ΡΡΠ°ΡΡΠ΅ Π²Π΅ΡΡΠΈΠΈ, Π²ΠΊΠ»ΡΡΠ°Ρ IE6.
ΠΡΠ»ΠΈ Π½Π° Π²Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΡΡ ΡΠ΅ΠΊΠ»Π°ΠΌΠ½ΡΠ΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡΡ ΠΊ Π²ΡΠ±ΠΎΡΡ ΠΈΡ
ΡΠΎΡΠΌΠ°ΡΠΎΠ², ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΠΈΡΠΎΠΊΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π±Π°Π½Π½Π΅ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 728Γ60 px) ΠΌΠΎΠ³ΡΡ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΡΠ΅Π»Π΅ΡΠΎΠ½Π° ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 320px. ΠΡ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, 300Γ250), ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ ΠΊΠ°ΠΊ ΠΏΠΎΠ΄ ΡΠΊΡΠ°Π½Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ², ΡΠ°ΠΊ ΠΈ ΠΏΠΎΠ΄ ΠΌΠΎΠ½ΠΈΡΠΎΡΡ ΠΠ.
ΠΡ Π±Ρ ΠΏΠΎΡΠΎΠ²Π΅ΡΠΎΠ²Π°Π»ΠΈ Π·Π°Π΄Π°ΡΡ ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΠΎΠ² Π² CSS3: 320px (iPhone, Π»Π°Π½Π΄ΡΠ°ΡΡΠ½ΡΠΉ ΡΠ΅ΠΆΠΈΠΌ), 480px (iPhone, ΠΏΠΎΡΡΡΠ΅ΡΠ½ΡΠΉ ΡΠ΅ΠΆΠΈΠΌ), 600px (ΠΏΠ»Π°Π½ΡΠ΅ΡΡ Android), 768px (iPad ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΡ Galaxy Tab) ΠΈ 1024px (Π»Π°Π½Π΄ΡΠ°ΡΡΠ½ΡΠΉΒ ΡΠ΅ΠΆΠΈΠΌ iPad ΠΈ ΡΠ°Π±ΠΎΡΠΈΠΉ ΡΡΠΎΠ» ΠΠ).
ΠΠΈΠΆΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅ΡΡΡΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ.
ΠΡΠ»ΠΈ Π²Π°Ρ Π·Π°ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠΎΠ²Π°Π»Π° ΡΡΠ° ΡΠ΅ΠΌΠ°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ·Π½Π°ΡΡ ΠΎ Π½Π΅ΠΉ ΠΏΠΎΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ Π² Π½Π°ΡΠ΅ΠΌ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π΅, Π³Π΄Π΅Β ΠΎΠ½Π° ΡΠ°Π·Π±ΠΈΡΠ°Π΅ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ Π½Π°ΡΡΡ Π²Π°Ρ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ΠΌΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Ρ ΠΏΡΠΈΠ΅ΠΌΠΎΠ² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π·Π° ΠΏΡΡΡ ΠΌΠΈΠ½ΡΡ. ΠΡΠΎΠ³ΠΎ ΡΠ²Π½ΠΎ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΄Π»Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ, Π½ΠΎ ΠΎΠ½ Π΄Π°ΡΡ Π²Π°ΠΌ ΠΎΠ±Π·ΠΎΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΡΡ
ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Ρ Π»ΠΈΡΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡ ΠΊΠ°ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅:
ΠΡΠ»ΠΈ ΠΏΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Π²Ρ Π·Π°Ρ
ΠΎΡΠΈΡΠ΅ Π³Π»ΡΠ±ΠΆΠ΅ ΠΏΠΎΠ³ΡΡΠ·ΠΈΡΡΡΡ Π² ΡΠ΅ΠΌΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠ΅ΡΠΈΡΡ Π½Π°Ρ ΡΡΠ΅Π±Π½ΡΠΉ ΠΊΡΡΡ Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ
Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² Π½Π° Scrimba, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΡ Π½Π° ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅.
Π ΠΎΡΠ½ΠΎΠ²Π΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π»Π΅ΠΆΠ°Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ CSS. ΠΡΠΎ Π΅Π΄ΠΈΠ½ΠΈΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΡΠ²ΠΎΡ ΡΠ΅Π½Π½ΠΎΡΡΡ ΠΎΡ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠΉ Π΄ΡΡΠ³ΠΎΠΉ Π²Π½Π΅ΡΠ½Π΅ΠΉ ΡΠ΅Π½Π½ΠΎΡΡΠΈ. ΠΡΠΎ ΡΠ΄ΠΎΠ±Π½ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ Π½Π°ΡΠ½Π΅ΠΌ Ρ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠΉ Π΅Π΄ΠΈΠ½ΠΈΡΡ %
, Π° Π·Π°ΡΠ΅ΠΌ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π΅Π΄ΠΈΠ½ΠΈΡΡ rem
.
ΠΠΎΠΏΡΡΡΠΈΠΌ, Ρ Π²Π°Ρ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· GIF Π½ΠΈΠΆΠ΅, Π½Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ:
ΠΡΠΎ Π½Π΅ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎ, ΠΏΠΎΡΡΠΎΠΌΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π° 70 ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ². ΠΡ ΠΏΡΠΎΡΡΠΎ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° 70 ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ² ΠΎΡ ΡΠΈΡΠΈΠ½Ρ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ΅Π³Π°
.ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ΅Π³
Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ 70 ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ² ΡΠΊΡΠ°Π½Π°.
Π Π²ΠΎΡ Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅!
ΠΠ΄Π½Π°ΠΊΠΎ Ρ Π½Π°Ρ Π΅ΡΡΡ ΠΎΠ΄Π½Π° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ Π½Π°ΡΠΈΠΌ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ: ΠΎΠ½ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΡΡΠ°Π½Π½ΠΎ Π½Π° ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ
ΡΠΊΡΠ°Π½Π°Ρ
. Π¨ΠΈΡΠΈΠ½Π° 70% ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π° Π΄Π»Ρ ΡΡΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅. ΠΡΠΎΡΡΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΡΠ°ΠΌΠΈ:
Π‘Π΄Π΅Π»Π°ΡΡ ΡΡΠΎ Π»ΡΡΡΠ΅ Π² ΡΡΠΎΠΉ ΡΠΈΡΡΠ°ΡΠΈΠΈ — ΠΈΠ΄Π΅Π°Π»ΡΠ½Π°Ρ Π·Π°Π΄Π°ΡΠ° Π΄Π»Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ².ΠΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΠΊΠ°Π·Π°ΡΡ , Π΅ΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° ΡΠΊΡΠ°Π½Π° ΠΌΠ΅Π½ΡΡΠ΅ 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΈΠ»Ρ.
ΠΡΠΎΡ Π±Π»ΠΎΠΊ CSS Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° ΡΠΊΡΠ°Π½Π° ΠΌΠ΅Π½ΡΡΠ΅ 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π΅ΡΡΡ ΡΠΎΡΠΊΠ° ΠΎΡΡΠ°Π½ΠΎΠ²Π°, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½Π΅Π·Π°ΠΏΠ½ΠΎ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠΈΡΠ΅.ΠΡΠΎ ΠΊΠΎΠ³Π΄Π° Π±ΡΠ°ΡΠ·Π΅Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ 70%
ΠΈ 100%
.
ΠΠ°Π»Π΅Π΅ ΠΈΠ΄Π΅Ρ Flexbox. ΠΡ ΠΏΡΠΎΡΡΠΎ Π½Π΅ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ·Π½Π°ΡΡ ΠΎ Π±ΡΡΡΡΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠΈ, Π½Π΅ ΠΈΠ·ΡΡΠΈΠ² Flexbox. ΠΠ½ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ» ΠΈΠ³ΡΡ Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° Π±ΡΠ»Π° ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π° ββΠ½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π»Π΅Ρ Π½Π°Π·Π°Π΄, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½Π° Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΏΡΠΎΡΠ°Π΅Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π΄ΠΎΠ»Ρ ΠΎΡΠΈ.
Π§ΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Flexbox, ΠΌΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΠ»ΠΎΠΆΠ½ΠΈΠΌ Π½Π°Ρ ΡΠ°ΠΉΡ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π½Π°Π΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ.ΠΠΎΡ HTML Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ:
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ.
ΠΡΠ΅ Π½Π°ΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π²ΡΠΈΡΠ½ΡΡΡ Π² Π»Π΅Π²ΡΡ ΡΠ°ΡΡΡ, Π° ΡΡΠΎ Π½Π΅ ΡΠΎ, ΡΡΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ. ΠΡ Ρ
ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ Π±ΡΠ»ΠΈ ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ ΠΏΠΎ Π²ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΡ ΠΏΡΠΎΡΡΠΎ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π² Π³ΠΈΠ±ΠΊΠΈΠΉ Π±ΠΎΠΊΡ, Π° Π·Π°ΡΠ΅ΠΌ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π²ΠΎΠ»ΡΠ΅Π±Π½ΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ justify-content
.