Ikasi Lily, pausoz pauso

Ongi etorri! Tutorial bakoitza hutsetik hasten da eta gauza txiki bera eraikitzen du — formulario irisgarri eta estilatu bat — 10 minutu inguruan, framework-ak berdintasunean konparatu ahal izateko. Ondoren, sakondu gaiekin eta erabiltzailearen lehentasunekin.

Hasi aurretik

Gutxi behar duzu, harrigarria bada ere:

HTML tutorialerako — nabigatzaile bat eta testu-editore bat bakarrik. Hori da tresna-multzo osoa.
Svelte, React, Vue, Angular edo Nunjucks-erako — git, Node 26 eta pnpm 10 edo berriagoa.
Blazor-erako — git eta .NET SDK 8 edo berriagoa.

Osagai buru gabeetan berria? Toki egokian zaude — tutorial bakoitzak azaltzen du zer gertatzen den aurrera egin ahala, eta pauso bakoitzak kopiatu beharreko kode zehatza erakusten du.

Lau pauso zerotik argitaratzera

Zure lehen osagaia (~5 minutu) — aukeratu zure framework-a behean, lortu kodea eta errendatu Button bat.
Konposatu eta estilatu (~5 minutu) — eraiki etiketadun formulario bat eta estilatu kebab-case klase-gakoen kontra (framework tutorial bakoitzaren zati).
Jarri gai bat (~15 minutu) — ordezkatu eskuz idatzitako CSSa prest dauden 57 gaietako batekin, eta utzi erabiltzaileei exekuzio-garaian aldatzen: gaien tutoriala.
Errespetatu lehentasunak (~15 minutu) — gehitu hizkuntza eta testu-tamaina aukeratzeko aukera lehentasun-laguntzaileekin: laguntzaileen tutoriala.

Aukeratu zure framework-a

HTML

Kopiatu HTML semantikoa klase-gakoekin eta aurrera — nabigatzailea eta editore bat nahikoa dira.

~10 minutu · hasiera errazena

Svelte

Svelte 5 runes, snippets eta bind:value bi norabideko lotura.

~10 minutu

React

Funtzio-osagaiak value + onChange eta rest-prop hedapenarekin.

~10 minutu

Vue

Vue 3 fitxategi bakarreko osagaiak v-model euskarriarekin.

~10 minutu

Angular

Angular osagai autonomoak seinale-sarrerekin eta [(value)].

~10 minutu

Blazor

Razor osagaiak parametroekin, ChildContent, eta bUnit probekin.

~10 minutu

Nunjucks

Zerbitzarian errendatutako makroak Eleventy-rako eta edozein Node txantiloi-kanalizaziorako.

~10 minutu

Zalantzan? Hasi HTML — rekin; beste framework guztiek partekatzen duten klase-gakoen kontratua irakasten du, eta zuzenean fitxategitik exekutatzen da.

Sakondu

Gaiak

Lotu prest dauden 57 gaietako bat — NHS, GOV.UK, USWDS, argia, iluna eta gehiago — gainidatzi zure CSSarekin, eta gehitu exekuzio-garaiko gai-aldaketa theme-picker laguntzailearekin.

~15 minutu

Lehentasun-laguntzaileak

Eman erabiltzaileei gaia, hizkuntza, testu-tamaina, mugimendua, bilaketa, orri-estekak, partekatzea eta data/ordu sarrera kontrolatzeko aukera theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker eta date-time-picker-ekin: kontrol buru gabeak iraunkortasunarekin, SSR segurtasunarekin eta RTL detekzio automatikoarekin.

~15 minutu

Tutorialen ondoren

Arakatu osagai-katalogoa — osagai bakoitzak bere propak, ARIA kontratua eta teklatuaren portaera dokumentatzen ditu.
Klonatu adibide-aplikazio bat 571 osagaiak estilatuta eta elkarrekin lanean ikusteko — CSSak oraintxe erabili dituzun klase-gako berdinak ditu helburu, beraz kopiatu edozein zati zure proiektura eta egokitu nahi duzun moduan.
Galderarik? Honek laguntza-orria erantzunak, ohiko galderak eta pertsona hurbil bati iristeko bideak ditu. Eta tutorial bat argiagoa izan badaiteke, esan iezaguzu — pozik hobetuko dugu.