Jifunze Lily, hatua kwa hatua

Karibu! Kila somo huanza kutoka mwanzo na hujenga kitu kile kile kidogo — fomu inayofikika na yenye mapambo — kwa takriban dakika 10, ili uweze kulinganisha mifumo ya kazi kwa usawa. Kisha endelea zaidi na mandhari na mapendeleo ya mtumiaji.

Kabla ya kuanza

Unahitaji vitu vichache kwa kushangaza:

Kwa somo la HTML — kivinjari na kihariri cha maandishi tu. Hizo ndizo zana zote.
Kwa Svelte, React, Vue, Angular, au Nunjucks — git, Node 26, na pnpm 10 au zaidi.
Kwa Blazor — git na .NET SDK 8 au zaidi.

Wewe ni mgeni kwa vipengele visivyo na mwonekano? Uko mahali sahihi — kila somo linaeleza kinachoendelea unapoendelea, na kila hatua inaonyesha msimbo halisi wa kunakili.

Hatua nne kutoka sifuri hadi kuchapishwa

Kipengele chako cha kwanza (~dakika 5) — chagua mfumo wako wa kazi hapa chini, pata msimbo, na uonyeshe Button.
Unganisha na pamba (~dakika 5) — jenga fomu yenye lebo na uipambe kwa kutumia vishikio vya darasa vya herufi ndogo zilizotenganishwa kwa kistari (sehemu ya kila somo la mfumo wa kazi).
Ipe mandhari (~dakika 15) — badilisha CSS uliyoandika mwenyewe kwa mojawapo ya mandhari 57 yaliyo tayari, kisha waruhusu watumiaji kubadili wakati wa utekelezaji: somo la mandhari
Heshimu mapendeleo (~dakika 15) — ongeza uchaguzi wa lugha na ukubwa wa maandishi kwa visaidizi vya mapendeleo: somo la visaidizi

Chagua mfumo wako wa kazi

HTML

Nakili HTML ya kisemantiki yenye vishikio vya darasa na uanze — kivinjari na kihariri vinatosha.

~dakika 10 · mwanzo rahisi zaidi

Svelte

Runes za Svelte 5, vijisehemu, na uunganishaji wa pande mbili wa bind:value.

~dakika 10

React

Vipengele vya kazi vyenye value + onChange na usambazaji wa sifa zilizosalia.

~dakika 10

Vue

Vipengele vya faili moja vya Vue 3 vyenye usaidizi wa v-model.

~dakika 10

Angular

Vipengele huru vya Angular vyenye pembejeo za mawimbi na [(value)].

~dakika 10

Blazor

Vipengele vya Razor vyenye vigezo, ChildContent, na majaribio ya bUnit.

~dakika 10

Nunjucks

Makro yanayoonyeshwa na seva kwa Eleventy na mfumo wowote wa violezo wa Node.

~dakika 10

Umeshindwa kuchagua? Anza na HTML — inafundisha mkataba wa vishikio vya darasa unaoshirikiwa na kila mfumo mwingine wa kazi, na inaendeshwa moja kwa moja kutoka kwa faili.

Nenda kwa kina zaidi

Mandhari

Unganisha mojawapo ya mandhari 57 yaliyo tayari — NHS, GOV.UK, USWDS, mwanga, giza, na mengine — ibatilishe kwa CSS yako mwenyewe, na uongeze ubadilishaji wa mandhari wakati wa utekelezaji kwa kisaidizi cha theme-picker.

~dakika 15

Visaidizi vya mapendeleo

Wape watumiaji udhibiti wa mandhari, lugha, ukubwa wa maandishi, mwendo, utafutaji, viungo vya kurasa, kushiriki, na uingizaji wa tarehe/saa kwa theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker, na date-time-picker: vidhibiti visivyo na mwonekano vyenye uhifadhi, usalama wa SSR, na utambuzi wa kiotomatiki wa RTL.

~dakika 15

Baada ya mafunzo

Pitia orodha ya vipengele — kila kipengele kinaeleza sifa zake, mkataba wa ARIA, na tabia ya kibodi.
Nakili programu ya mifano ili kuona vipengele vyote 571 vikiwa na mapambo na vinafanya kazi pamoja — CSS inalenga vishikio vilevile vya darasa ulivyotumia sasa, hivyo nakili sehemu yoyote kwenye mradi wako na uirekebishe upendavyo.
Maswali? Ukurasa wa msaada una majibu, maswali yanayoulizwa mara kwa mara, na njia za kumfikia binadamu rafiki. Na kama somo linaweza kuwa wazi zaidi, tuambie — tutafurahi kuliboresha.