ΠΠ°ΠΏΡΡΠ°Π»ΡΡ Π² CSS-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°Ρ ? ΠΡ ΡΠΎΠ±ΡΠ°Π»ΠΈ Π’ΠΠ-10 ΡΠ°ΠΌΡΡ ΠΊΡΡΡΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ΅Π°Π»ΡΠ½ΠΎ ΡΠΊΠΎΠ½ΠΎΠΌΡΡ Π²ΡΠ΅ΠΌΡ Π½Π° ΡΡΠΎΠ½ΡΠ΅Π½Π΄Π΅. ΠΡ ΡΡΠΆΠ΅Π»ΠΎΠ²Π΅ΡΠ° Bootstrap Π΄ΠΎ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½ΠΎΠ³ΠΎ Milligram β ΡΠ°Π·ΠΎΠ±ΡΠ°Π»ΠΈ ΠΏΠ»ΡΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈ ΠΎΠ±ΡΡΡΠ½ΠΈΠ»ΠΈ, ΠΊΠΎΠ³Π΄Π° ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ.
ΠΡΠΎΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π» Π²Π·ΡΡ ΠΈΠ· Π½Π°ΡΠ΅ΠΉ Π΅ΠΆΠ΅Π½Π΅Π΄Π΅Π»ΡΠ½ΠΎΠΉ email-ΡΠ°ΡΡΡΠ»ΠΊΠΈ, ΠΏΠΎΡΠ²ΡΡΠ΅Π½Π½ΠΎΠΉ ΡΡΠΎΠ½ΡΠ΅Π½Π΄Ρ. ΠΠΎΠ΄ΠΏΠΈΡΠΈΡΠ΅ΡΡ, ΡΡΠΎΠ±Ρ Π±ΡΡΡ Π² ΡΠΈΡΠ»Π΅ ΠΏΠ΅ΡΠ²ΡΡ , ΠΊΡΠΎ ΠΏΠΎΠ»ΡΡΠΈΡ Π΄Π°ΠΉΠ΄ΠΆΠ΅ΡΡ.
(function () { let link = document .getElementById ("f4b9db82-676b-4a0d-91f0-00fb2ad53ba2-https://proglib.io/w/c09284c2-2"); if (! link) return; let href = link .getAttribute ("href"); if (! href) return; let prefix = link .dataset .prefix; let action = link .dataset .action; link .addEventListener ("click", function (e) { let data = new FormData (); data .append ("url", href); apiFetch (action, { method: "POST", body: data }) .then (function (res) {}) .catch (function (err) { console .error (err); }); }) })();
1. Bootstrap
Π‘Π°ΠΌΠ°Ρ ΠΏΠΎΠΏΡΠ»ΡΡΠ½Π°Ρ CSS-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°. Π‘ΠΎΠ·Π΄Π°Π½Π° Twitter Π² Π΄Π°Π»Π΅ΠΊΠΎΠΌ 2011 Π³ΠΎΠ΄Ρ, ΠΎΡΠ΅Π½Ρ ΡΠ°ΡΡΠΎ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΡΡΡ ΠΈ ΡΠΎΠ²Π΅ΡΡΠ΅Π½ΡΡΠ²ΡΠ΅ΡΡΡ. ΠΠΊΠ»ΡΡΠ°Π΅Ρ ΠΎΠ±ΡΠΈΡΠ½ΡΠΉ Π½Π°Π±ΠΎΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ, ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΡΠ΅ΡΠΎΠΊ, ΠΊΠ°ΡΡΠΎΡΠ΅ΠΊ ΠΈ Ρ.Π΄. ΠΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π³ΠΎΡΠΎΠ²ΡΠ΅ JavaScript-ΠΏΠ»Π°Π³ΠΈΠ½Ρ Π΄Π»Ρ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΡ ΠΎΠΊΠΎΠ½, ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΎΠΊ ΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠΎΡΠ΅ΠΌΡ ΡΡΠΎΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ: ΠΏΡΠΎΡΡΠΎΡΠ°, Π³ΠΈΠ±ΠΊΠΎΡΡΡ, ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΡΡΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
Π‘Π°ΠΉΡ: getbootstrap.com
2. Tailwind CSS
Π£ΡΠΈΠ»ΠΈΡΠ°ΡΠ½ΡΠΉ CSS-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ, Π²ΡΠΏΡΡΠ΅Π½Π½ΡΠΉ Π² 2015 Π³ΠΎΠ΄Ρ. ΠΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², Π° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠ°ΡΡΠΎΠΌΠ½ΡΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΠ»ΠΈΡΠ°ΡΠ½ΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΏΡΡΠΌΠΎ Π² HTML.
ΠΠΎΡΠ΅ΠΌΡ ΡΡΠΎΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ: ΠΊΡΠ°ΡΠ½ΠΎ ΠΏΠΎΠ²ΡΡΠ°Π΅Ρ ΡΠΊΠΎΡΠΎΡΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΎΡΠ΅Π½Ρ Π²ΡΡΠΎΠΊΡΡ ΡΡΠ΅ΠΏΠ΅Π½Ρ ΠΊΠ°ΡΡΠΎΠΌΠΈΠ·Π°ΡΠΈΠΈ.
Π‘Π°ΠΉΡ: tailwindcss.com
3. Bulma
Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ CSS-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ, ΠΏΠΎΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π½Π° Flexbox, Ρ Π½Π°Π±ΠΎΡΠΎΠΌ Π³ΠΎΡΠΎΠ²ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΠΎΠΉ ΡΡΡΡΠΊΡΡΡΠΎΠΉ. ΠΠ΅Π³ΠΊΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ ΠΈ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π½ΡΠΆΠ½ΡΠ΅ ΡΠ°ΡΡΠΈ.
ΠΠΎΡΠ΅ΠΌΡ ΡΡΠΎΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ: ΠΌΠΎΡΠ½ΠΎΡΡΡ Flexbox ΠΈ Π»Π΅Π³ΠΊΠΎΡΡΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΠΎΡΡΡ.
Π‘Π°ΠΉΡ: bulma.io
Π‘ΡΠ°ΡΡΡ ΠΏΠΎ ΡΠ΅ΠΌΠ΅
π¨ 11 ΠΏΠΎΠ»Π΅Π·Π½ΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ CSS
4. Foundation
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ ΡΠ΅ΡΠΊΠ°ΠΌΠΈ ΠΈ Π³ΠΎΡΠΎΠ²ΡΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ ΡΠΊΡΠ°Π½Ρ ΡΠ°Π·Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°. ΠΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ.
ΠΠΎΡΠ΅ΠΌΡ ΡΡΠΎΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ: ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΠ°Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠ° ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡ.
Π‘Π°ΠΉΡ: get.foundation
5. Materialize
CSS-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ, ΠΏΠΎΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π½Π° ΠΏΡΠΈΠ½ΡΠΈΠΏΠ°Ρ Material Design ΠΎΡ Google, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΡΠΈΠ»ΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΠΎΡΠΌΡ ΠΈ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ JavaScript Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ°.
ΠΠΎΡΠ΅ΠΌΡ ΡΡΠΎΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ: ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ Π²ΠΈΠ΄ ΠΈ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ Material Design.
Π‘Π°ΠΉΡ: materializecss.com
6. Semantic UI
Π€ΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΠΎΠ³ΠΎ HTML-ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ° Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ². Π‘ΠΎΡΡΠ΅Π΄ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΡΡΡ Π½Π° ΡΠ΄ΠΎΠ±ΡΡΠ²Π΅ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΠΊΠΎΠ΄Π° ΠΈ Π²ΡΡΠΎΠΊΠΎΠΉ ΠΊΠ°ΡΡΠΎΠΌΠΈΠ·Π°ΡΠΈΠΈ.
ΠΠΎΡΠ΅ΠΌΡ ΡΡΠΎΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ: ΡΠΈΡΡΡΠΉ HTML ΠΈ ΠΌΠΎΡΠ½ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΊΠ°ΡΡΠΎΠΌΠΈΠ·Π°ΡΠΈΠΈ.
Π‘Π°ΠΉΡ: semantic-ui.com
7. Skeleton
ΠΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° (ΠΎΠΊΠΎΠ»ΠΎ 400 ΡΡΡΠΎΠΊ ΠΊΠΎΠ΄Π°), ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠ°Ρ Π΄Π»Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² Ρ Π±Π°Π·ΠΎΠ²ΠΎΠΉ ΡΠ΅ΡΠΊΠΎΠΉ ΠΈ ΠΏΡΠΎΡΡΡΠΌΠΈ ΡΡΠΈΠ»ΡΠΌΠΈ. ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΎΠ½Π° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π±ΡΡΡΡΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΡΠ°ΠΉΡ.
ΠΠΎΡΠ΅ΠΌΡ ΡΡΠΎΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ: ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌ ΠΈ Π»Π΅Π³ΠΊΠΎΡΡΡ Π΄Π»Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ².
Π‘Π°ΠΉΡ: getskeleton.com
8. Pure CSS
ΠΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΎΡ Yahoo, ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π½Π°Π±ΠΎΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ Π²Π΅Π±-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ½Π° ΠΌΠΎΠ΄ΡΠ»ΡΠ½Π°Ρ, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²ΡΠ±ΠΈΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π½ΡΠΆΠ½ΡΠ΅ ΡΠ°ΡΡΠΈ.
ΠΠΎΡΠ΅ΠΌΡ ΡΡΠΎΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ: Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡ, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌ ΠΈ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΠΎΡΡΡ.
Π‘Π°ΠΉΡ: purecss.io
π¨βπ»π¨ ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΡΡΠΎΠ½ΡΠ΅Π½Π΄Π΅ΡΠ°
ΠΠΎΠ»ΡΡΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ² Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ Π½Π° Π½Π°ΡΠ΅ΠΌ ΡΠ΅Π»Π΅Π³ΡΠ°ΠΌ-ΠΊΠ°Π½Π°Π»Π΅ Β«ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΡΡΠΎΠ½ΡΠ΅Π½Π΄Π΅ΡΠ°Β»
9. UIKit
ΠΠΎΠ΄ΡΠ»ΡΠ½Π°Ρ ΠΈ Π»Π΅Π³ΠΊΠ°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Ρ ΠΏΠΎΠ»Π½ΡΠΌ Π½Π°Π±ΠΎΡΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², Π²ΠΊΠ»ΡΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΠ»Π°ΠΉΠ΄Π΅ΡΡ ΠΈ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΠ΅ ΠΎΠΊΠ½Π°. ΠΠΌΠ΅Π΅Ρ ΠΎΠ±ΡΠΈΡΠ½ΡΡ ΠΈ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π±ΡΡΡΡΠΎ ΠΏΡΠΈΡΡΡΠΏΠΈΡΡ ΠΊ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅.
ΠΠΎΡΠ΅ΠΌΡ ΡΡΠΎΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ: ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π³ΠΎΡΠΎΠ²ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π½Π° Π²ΡΠ΅ ΡΠ»ΡΡΠ°ΠΈ ΠΆΠΈΠ·Π½ΠΈ.
Π‘Π°ΠΉΡ: getuikit.com
10. Milligram
CSS-ΠΌΠΈΠΊΡΠΎΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ, ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΠΉ Ρ ΠΏΡΠΈΡΠ΅Π»ΠΎΠΌ Π½Π° ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ. ΠΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π±Π°Π·ΠΎΠ²ΡΡ Π²Π΅Π±-ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ², ΡΡΠ΅Π±ΡΡΡΠΈΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΈ Π²ΡΡΠΎΠΊΠΎΠΉ ΡΠΊΠΎΡΠΎΡΡΠΈ.
ΠΠΎΡΠ΅ΠΌΡ ΡΡΠΎΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ: ΠΏΡΠΎΡΡΠΎΡΠ° ΠΈ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ.
Π‘Π°ΠΉΡ: milligram.io
Π£ΡΠΊΠΎΡΠ΅Π½Π½Π°Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ°, ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ CSS-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ ΠΈ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠ² Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΏΡΠΎΡΠ°Π΅Ρ ΠΈ ΡΡΠΊΠΎΡΡΠ΅Ρ ΠΏΡΠΎΡΠ΅ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π·Π° ΡΡΠ΅Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΡ Π³ΠΎΡΠΎΠ²ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² β ΡΡΠΈΠ»ΡΠ½ΡΡ ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ . ΠΠ΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΠ°Π±ΠΎΡΠ°Π΅ΡΠ΅ Π»ΠΈ Π²Ρ Π½Π°Π΄ ΠΊΡΡΠΏΠ½ΡΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠΌ ΠΈΠ»ΠΈ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΡΡΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΡΠ°Π±ΠΎΡΡ Π±ΡΡΡΡΠ΅Π΅ ΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½Π΅Π΅.
***
π Frontend Basic: ΠΏΠΎΠ³ΡΡΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ
ΠΠΎΠΌΠ°Π½Π΄Π° Proglib Academy Π·Π°ΠΏΡΡΡΠΈΠ»Π° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΉ ΠΊΡΡΡ Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ Frontend-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ².
ΠΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΌΠΎΠΌΠ΅Π½ΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ:
- HTML/CSS Π²Π΅ΡΡΡΠΊΠ° Ρ Π½ΡΠ»Ρ Π΄ΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ²
- JavaScript ΠΎΡ ΠΎΡΠ½ΠΎΠ² Π΄ΠΎ ΡΠ°Π±ΠΎΡΡ Ρ React.js
- ΠΡΠ°ΠΊΡΠΈΠΊΠ° ΡΠ°Π±ΠΎΡΡ Ρ Git ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΎΠΉ
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°
Π€ΠΎΡΠΌΠ°Ρ ΠΎΠ±ΡΡΠ΅Π½ΠΈΡ:
- 26 ΡΡΡΡΠΊΡΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²ΠΈΠ΄Π΅ΠΎΡΡΠΎΠΊΠΎΠ²
- 28 ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΡ Π·Π°Π΄Π°Π½ΠΈΠΉ Ρ code review
- ΠΠ΅ΡΡΡΠΎΡΠ½ΡΠΉ Π΄ΠΎΡΡΡΠΏ ΠΊ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π°ΠΌ
- ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΡΠΈΡΡΡΡ Π² ΡΠ²ΠΎΠ΅ΠΌ ΡΠ΅ΠΌΠΏΠ΅
ΠΡΠ΅ΠΏΠΎΠ΄Π°Π²Π°ΡΠ΅Π»ΠΈ β ΠΏΡΠ°ΠΊΡΠΈΠΊΡΡΡΠΈΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈΠ· ΠΠ°Π·ΠΏΡΠΎΠΌΠ±Π°Π½ΠΊΠ° ΠΈ ΠΡΡΠΎΡΠ»ΠΎΡΠ°. ΠΠΎΡΡΡΠΏΠ½Ρ ΡΠ°ΡΠΈΡΡ Ρ ΠΏΠ΅ΡΡΠΎΠ½Π°Π»ΡΠ½ΡΠΌ Π½Π°ΡΡΠ°Π²Π½ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ.
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, Ρ ΠΎΡΡ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ
(function () { let link = document .getElementById ("f4b9db82-676b-4a0d-91f0-00fb2ad53ba2-https://proglib.io/w/e9824c8b-65"); if (! link) return; let href = link .getAttribute ("href"); if (! href) return; let prefix = link .dataset .prefix; let action = link .dataset .action; link .addEventListener ("click", function (e) { let data = new FormData (); data .append ("url", href); apiFetch (action, { method: "POST", body: data }) .then (function (res) {}) .catch (function (err) { console .error (err); }); }) })();