Dysgwch Lily, cam wrth gam

Croeso! Mae pob tiwtorial yn dechrau o'r dechrau ac yn adeiladu'r un peth bach — ffurflen hygyrch, wedi'i harddullio — mewn tua 10 munud, fel y gallwch gymharu fframweithiau fel y bydd yr afalau'n cymharu ag afalau. Yna ewch yn ddyfnach gyda themâu a dewisiadau defnyddwyr.

Cyn i chi ddechrau

Ychydig iawn sydd ei angen arnoch:

Ar gyfer y tiwtorial HTML — porwr a golygydd testun yn unig. Dyna'r pecyn cyfan.
Ar gyfer Svelte, React, Vue, Angular, neu Nunjucks — git, Node 26, a pnpm 10 neu ddiweddarach.
Ar gyfer Blazor — git a'r .NET SDK 8 neu ddiweddarach.

Yn newydd i gydrannau headless? Rydych chi yn y lle iawn — mae pob tiwtorial yn egluro beth sy'n digwydd wrth i chi fynd, ac mae pob cam yn dangos yr union god i'w gopïo.

Pedwar cam o ddim i fynd yn fyw

Eich cydran gyntaf (~5 munud) — dewiswch eich fframwaith isod, cewch y cod, a rendrwch Botwm.
Cyfansoddi ac arddullio (~5 munud) — adeiladwch ffurflen gyda labeli ac arddulliwch hi yn erbyn y bachau dosbarth kebab-case (rhan o bob tiwtorial fframwaith).
Rhowch thema iddo (~15 munud) — cyfnewidiwch eich CSS llawysgrif am un o'r 45 thema barod, yna gadewch i ddefnyddwyr newid ar amser rhedeg: tiwtorial themâu.
Parchwch ddewisiadau (~15 munud) — ychwanegwch ddewis iaith a maint testun gyda'r cynorthwywyr dewis: tiwtorial cynorthwywyr.

Dewiswch eich fframwaith

HTML

Copïwch HTML semantig gyda'r bachau dosbarth ac ewch — porwr a golygydd yw'r cyfan sydd ei angen.

~10 munud · y dechrau hawsaf

Svelte

Runes Svelte 5, snippets, a rhwymo dwy ffordd bind:value.

~10 munud

React

Cydrannau ffwythiant gyda value + onChange a lledaenu'r propiau gweddill.

~10 munud

Vue

Cydrannau ffeil sengl Vue 3 gyda chefnogaeth v-model.

~10 munud

Angular

Cydrannau annibynnol Angular gyda mewnbynnau signal a [(value)].

~10 munud

Blazor

Cydrannau Razor gyda pharamedrau, ChildContent, a phrofion bUnit.

~10 munud

Nunjucks

Macros wedi'u rendro ar y gweinydd ar gyfer Eleventy ac unrhyw biblinell templedu Node.

~10 munud

Methu penderfynu? Dechreuwch gyda HTML — mae'n dysgu'r contract bachau dosbarth y mae pob fframwaith arall yn ei rannu, ac mae'n rhedeg yn syth o ffeil.

Ewch yn ddyfnach

Themâu

Cysylltwch un o 45 thema barod — GIG, GOV.UK, USWDS, golau, tywyll, a mwy — diystyrrwch hi gyda'ch CSS eich hun, ac ychwanegwch newid thema ar amser rhedeg gyda'r cynorthwyydd theme-picker.

~15 munud

Cynorthwywyr dewis

Rhowch reolaeth i ddefnyddwyr dros thema, iaith, maint testun, symudiad, chwilio, dolenni tudalennau, rhannu, a mewnbynnu dyddiad/amser gyda theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker, a date-time-picker: rheolyddion headless gyda dyfalbarhad, diogelwch SSR, a chanfod de-i-chwith yn awtomatig.

~15 munud

Ar ôl y tiwtorialau

Porwch y catalog cydrannau — mae pob cydran yn dogfennu ei phropiau, ei chontract ARIA, ac ymddygiad y bysellfwrdd.
Clonwch ap enghreifftiol i weld pob un o'r 571 cydran wedi'u harddullio ac yn gweithio gyda'i gilydd — mae'r CSS yn targedu'r un bachau dosbarth ag y gwnaethoch eu defnyddio, felly copïwch unrhyw ran ohono i'ch prosiect a'i addasu fel y mynnwch.
Cwestiynau? Mae gan y dudalen gymorth atebion, cwestiynau cyffredin, a ffyrdd o gysylltu â pherson cyfeillgar. Ac os gallai tiwtorial fod yn gliriach, dywedwch wrthym — byddwn yn falch o'i wella.