Lily ಅನ್ನು ಹಂತ ಹಂತವಾಗಿ ಕಲಿಯಿರಿ
ಸ್ವಾಗತ! ಪ್ರತಿ ಟ್ಯುಟೋರಿಯಲ್ ಶೂನ್ಯದಿಂದ ಆರಂಭವಾಗಿ ಅದೇ ಸಣ್ಣ ವಿಷಯವನ್ನು — ಪ್ರವೇಶಿಸಬಹುದಾದ, ಶೈಲೀಕೃತ ಫಾರ್ಮ್ — ಸುಮಾರು 10 ನಿಮಿಷಗಳಲ್ಲಿ ನಿರ್ಮಿಸುತ್ತದೆ, ಹೀಗಾಗಿ ನೀವು ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳನ್ನು ಸಮಾನವಾಗಿ ಹೋಲಿಸಬಹುದು. ನಂತರ ಥೀಮಿಂಗ್ ಮತ್ತು ಬಳಕೆದಾರ ಆದ್ಯತೆಗಳೊಂದಿಗೆ ಆಳಕ್ಕೆ ಹೋಗಿ.
ಆರಂಭಿಸುವ ಮೊದಲು
ನಿಮಗೆ ಆಶ್ಚರ್ಯಕರವಾಗಿ ಕಡಿಮೆ ಬೇಕು:
- HTML ಟ್ಯುಟೋರಿಯಲ್‌ಗಾಗಿ — ಕೇವಲ ಬ್ರೌಸರ್ ಮತ್ತು ಪಠ್ಯ ಸಂಪಾದಕ. ಅದೇ ಸಂಪೂರ್ಣ ಉಪಕರಣ ಸಂಗ್ರಹ.
- Svelte, React, Vue, Angular, ಅಥವಾ Nunjucks ಗಾಗಿ — git, Node 26, ಮತ್ತು pnpm 10 ಅಥವಾ ನಂತರದ್ದು.
- Blazor ಗಾಗಿ — git ಮತ್ತು .NET SDK 8 ಅಥವಾ ನಂತರದ್ದು.
ಹೆಡ್‌ಲೆಸ್ ಘಟಕಗಳಿಗೆ ಹೊಸಬರೇ? ನೀವು ಸರಿಯಾದ ಸ್ಥಳದಲ್ಲಿದ್ದೀರಿ — ಪ್ರತಿ ಟ್ಯುಟೋರಿಯಲ್ ನೀವು ಮುಂದುವರಿದಂತೆ ಏನಾಗುತ್ತಿದೆ ಎಂದು ವಿವರಿಸುತ್ತದೆ, ಮತ್ತು ಪ್ರತಿ ಹಂತವೂ ನಕಲಿಸಬೇಕಾದ ನಿಖರ ಕೋಡ್ ತೋರಿಸುತ್ತದೆ.
ಶೂನ್ಯದಿಂದ ಪ್ರಕಟಣೆಯವರೆಗೆ ನಾಲ್ಕು ಹಂತಗಳು
- ನಿಮ್ಮ ಮೊದಲ ಘಟಕ (~5 ನಿಮಿಷಗಳು) — ಕೆಳಗೆ ನಿಮ್ಮ ಫ್ರೇಮ್‌ವರ್ಕ್ ಆರಿಸಿ, ಕೋಡ್ ಪಡೆಯಿರಿ, ಮತ್ತು Button ಅನ್ನು ರೆಂಡರ್ ಮಾಡಿ.
- ಸಂಯೋಜಿಸಿ ಮತ್ತು ಶೈಲೀಕರಿಸಿ (~5 ನಿಮಿಷಗಳು) — ಲೇಬಲ್ ಇರುವ ಫಾರ್ಮ್ ನಿರ್ಮಿಸಿ ಮತ್ತು kebab-case ಕ್ಲಾಸ್ ಹುಕ್‌ಗಳ ವಿರುದ್ಧ ಶೈಲೀಕರಿಸಿ (ಪ್ರತಿ ಫ್ರೇಮ್‌ವರ್ಕ್ ಟ್ಯುಟೋರಿಯಲ್‌ನ ಭಾಗ).
- ಥೀಮ್ ಹಾಕಿ (~15 ನಿಮಿಷಗಳು) — ನಿಮ್ಮ ಕೈಬರಹದ CSS ಅನ್ನು 57 ಸಿದ್ಧ ಥೀಮ್‌ಗಳಲ್ಲಿ ಒಂದರಿಂದ ಬದಲಾಯಿಸಿ, ನಂತರ ಬಳಕೆದಾರರು ರನ್‌ಟೈಮ್‌ನಲ್ಲಿ ಬದಲಾಯಿಸಲು ಬಿಡಿ: ಥೀಮಿಂಗ್ ಟ್ಯುಟೋರಿಯಲ್.
- ಆದ್ಯತೆಗಳನ್ನು ಗೌರವಿಸಿ (~15 ನಿಮಿಷಗಳು) — ಆದ್ಯತೆ ಸಹಾಯಕಗಳೊಂದಿಗೆ ಭಾಷೆ ಮತ್ತು ಪಠ್ಯ-ಗಾತ್ರ ಆಯ್ಕೆಯನ್ನು ಸೇರಿಸಿ: ಸಹಾಯಕಗಳ ಟ್ಯುಟೋರಿಯಲ್.
ನಿಮ್ಮ ಫ್ರೇಮ್‌ವರ್ಕ್ ಆರಿಸಿ
HTML
ಕ್ಲಾಸ್ ಹುಕ್‌ಗಳೊಂದಿಗೆ ಶಬ್ದಾರ್ಥ HTML ನಕಲಿಸಿ ಮತ್ತು ಹೋಗಿ — ಬ್ರೌಸರ್ ಮತ್ತು ಸಂಪಾದಕ ಇದ್ದರೆ ಸಾಕು.
Svelte
Svelte 5 runes, snippets, ಮತ್ತು bind:value ಎರಡು-ಮಾರ್ಗ ಬೈಂಡಿಂಗ್.
React
ಫಂಕ್ಷನ್ ಘಟಕಗಳು value + onChange ಮತ್ತು rest-prop ಹರಡುವಿಕೆಯೊಂದಿಗೆ.
Vue
Vue 3 ಏಕ-ಫೈಲ್ ಘಟಕಗಳು v-model ಬೆಂಬಲದೊಂದಿಗೆ.
Angular
Angular ಸ್ವತಂತ್ರ ಘಟಕಗಳು ಸಿಗ್ನಲ್ ಇನ್‌ಪುಟ್‌ಗಳೊಂದಿಗೆ ಮತ್ತು [(value)].
Blazor
ಪ್ಯಾರಾಮೀಟರ್‌ಗಳಿರುವ Razor ಘಟಕಗಳು, ChildContent, ಮತ್ತು bUnit ಪರೀಕ್ಷೆಗಳು.
Nunjucks
Eleventy ಮತ್ತು ಯಾವುದೇ Node ಟೆಂಪ್ಲೇಟಿಂಗ್ ಪೈಪ್‌ಲೈನ್‌ಗಾಗಿ ಸರ್ವರ್-ರೆಂಡರ್ಡ್ ಮ್ಯಾಕ್ರೋಗಳು.
ಇವುಗಳ ನಡುವೆ ಗೊಂದಲವೇ? ಇದರಿಂದ ಆರಂಭಿಸಿ HTML — ಇದು ಇತರ ಎಲ್ಲಾ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳು ಹಂಚಿಕೊಳ್ಳುವ ಕ್ಲಾಸ್-ಹುಕ್ ಒಪ್ಪಂದವನ್ನು ಕಲಿಸುತ್ತದೆ, ಮತ್ತು ಫೈಲ್‌ನಿಂದ ನೇರವಾಗಿ ಚಲಿಸುತ್ತದೆ.
ಇನ್ನೂ ಆಳಕ್ಕೆ ಹೋಗಿ
ಥೀಮಿಂಗ್
57 ಸಿದ್ಧ ಥೀಮ್‌ಗಳಲ್ಲಿ ಒಂದನ್ನು ಲಿಂಕ್ ಮಾಡಿ — NHS, GOV.UK, USWDS, ತಿಳಿ, ಗಾಢ, ಮತ್ತು ಇನ್ನಷ್ಟು — ನಿಮ್ಮದೇ CSS ನಿಂದ ಅದನ್ನು ಮೀರಿಸಿ, ಮತ್ತು theme-picker ಸಹಾಯಕದೊಂದಿಗೆ ರನ್‌ಟೈಮ್ ಥೀಮ್ ಬದಲಾವಣೆಯನ್ನು ಸೇರಿಸಿ.
ಆದ್ಯತೆ ಸಹಾಯಕಗಳು
theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker, ಮತ್ತು date-time-picker ಮೂಲಕ ಬಳಕೆದಾರರಿಗೆ ಥೀಮ್, ಭಾಷೆ, ಪಠ್ಯ ಗಾತ್ರ, ಚಲನೆ, ಹುಡುಕಾಟ, ಪುಟ ಲಿಂಕ್‌ಗಳು, ಹಂಚಿಕೆ ಮತ್ತು ದಿನಾಂಕ/ಸಮಯ ನಮೂದಿನ ನಿಯಂತ್ರಣ ನೀಡಿ: ಪರ್ಸಿಸ್ಟೆನ್ಸ್, SSR ಸುರಕ್ಷತೆ ಮತ್ತು ಸ್ವಯಂಚಾಲಿತ RTL ಪತ್ತೆಯೊಂದಿಗೆ ಹೆಡ್‌ಲೆಸ್ ನಿಯಂತ್ರಣಗಳು.
ಟ್ಯುಟೋರಿಯಲ್‌ಗಳ ನಂತರ
- ಬ್ರೌಸ್ ಮಾಡಿ ಘಟಕ ಕ್ಯಾಟಲಾಗ್ — ಪ್ರತಿ ಘಟಕವೂ ತನ್ನ ಪ್ರಾಪ್‌ಗಳು, ARIA ಒಪ್ಪಂದ ಮತ್ತು ಕೀಬೋರ್ಡ್ ವರ್ತನೆಯನ್ನು ದಾಖಲಿಸುತ್ತದೆ.
- ಕ್ಲೋನ್ ಮಾಡಿ ಒಂದು ಉದಾಹರಣೆ ಅಪ್ಲಿಕೇಶನ್ ಎಲ್ಲಾ 571 ಘಟಕಗಳು ಶೈಲೀಕರಿಸಲ್ಪಟ್ಟು ಒಟ್ಟಿಗೆ ಕೆಲಸ ಮಾಡುವುದನ್ನು ನೋಡಲು — CSS ನೀವು ಈಗಷ್ಟೇ ಬಳಸಿದ ಅದೇ ಕ್ಲಾಸ್ ಹುಕ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ ಅದರ ಯಾವುದೇ ಭಾಗವನ್ನು ನಿಮ್ಮ ಯೋಜನೆಗೆ ನಕಲಿಸಿ ಮತ್ತು ನಿಮಗೆ ಬೇಕಾದಂತೆ ಹೊಂದಿಸಿ.
- ಪ್ರಶ್ನೆಗಳಿವೆಯೇ? ಸಹಾಯ ಪುಟ ಉತ್ತರಗಳು, FAQ, ಮತ್ತು ಸ್ನೇಹಪರ ಮನುಷ್ಯನನ್ನು ತಲುಪುವ ಮಾರ್ಗಗಳನ್ನು ಹೊಂದಿದೆ. ಮತ್ತು ಟ್ಯುಟೋರಿಯಲ್ ಇನ್ನಷ್ಟು ಸ್ಪಷ್ಟವಾಗಬಹುದಾದರೆ, ನಮಗೆ ತಿಳಿಸಿ — ನಾವು ಸಂತೋಷದಿಂದ ಸುಧಾರಿಸುತ್ತೇವೆ.