Lily શીખો, પગલું-દર-પગલું
સ્વાગત છે! દરેક ટ્યુટોરિયલ શૂન્યથી શરૂ થાય છે અને એ જ નાની વસ્તુ બનાવે છે — એક સુલભ, શૈલીબદ્ધ ફોર્મ — લગભગ 10 મિનિટમાં, જેથી તમે ફ્રેમવર્કની સરખી રીતે સરખામણી કરી શકો. પછી થીમિંગ અને વપરાશકર્તા પસંદગીઓ સાથે વધુ ઊંડા જાઓ.
શરૂ કરતા પહેલાં
તમને આશ્ચર્યજનક રીતે ઓછું જોઈએ છે:
- HTML ટ્યુટોરિયલ માટે — ફક્ત બ્રાઉઝર અને ટેક્સ્ટ એડિટર. એ જ આખી ટૂલકિટ છે.
- Svelte, React, Vue, Angular અથવા Nunjucks માટે — git, Node 26, અને pnpm 10 અથવા નવું.
- Blazor માટે — git અને .NET SDK 8 અથવા નવું.
હેડલેસ ઘટકોમાં નવા છો? તમે યોગ્ય જગ્યાએ છો — દરેક ટ્યુટોરિયલ શું થઈ રહ્યું છે તે સમજાવે છે, અને દરેક પગલું કૉપિ કરવા માટે ચોક્કસ કોડ બતાવે છે.
શૂન્યથી શિપ સુધી ચાર પગલાં
- તમારો પ્રથમ ઘટક (~5 મિનિટ) — નીચે તમારું ફ્રેમવર્ક પસંદ કરો, કોડ મેળવો અને Button રેન્ડર કરો.
- જોડો અને શૈલી આપો (~5 મિનિટ) — લેબલવાળું ફોર્મ બનાવો અને કબાબ-કેસ ક્લાસ હૂકની સામે શૈલી આપો (દરેક ફ્રેમવર્ક ટ્યુટોરિયલનો ભાગ).
- તેને થીમ આપો (~15 મિનિટ) — તમારું હાથે લખેલું CSS 57 તૈયાર થીમમાંથી એક વડે બદલો, પછી વપરાશકર્તાઓને રનટાઇમ પર બદલવા દો: થીમિંગ ટ્યુટોરિયલ.
- પસંદગીઓનો આદર કરો (~15 મિનિટ) — પસંદગી સહાયકો સાથે ભાષા અને ટેક્સ્ટ-કદ પસંદગી ઉમેરો: સહાયક ટ્યુટોરિયલ.
તમારું ફ્રેમવર્ક પસંદ કરો
HTML
ક્લાસ હૂક સાથે સેમેન્ટિક HTML કૉપિ કરો અને ચાલો — બ્રાઉઝર અને એડિટર પૂરતાં છે.
Svelte
Svelte 5 રૂન, સ્નિપેટ, અને bind:value દ્વિમાર્ગી બાઇન્ડિંગ.
React
ફંક્શન ઘટકો value + onChange અને બાકીના-પ્રોપ ફેલાવા સાથે.
Vue
Vue 3 સિંગલ-ફાઇલ ઘટકો v-model સપોર્ટ સાથે.
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, અને મૈત્રીપૂર્ણ માણસ સુધી પહોંચવાના માર્ગો છે. અને જો કોઈ ટ્યુટોરિયલ વધુ સ્પષ્ટ હોઈ શકે, અમને જણાવો — અમે ખુશીથી સુધારીશું.