Lærðu Lily, skref fyrir skref
Velkomin! Hvert kennsluefni byrjar frá grunni og byggir sama litla hlutinn — aðgengilegt, stílað eyðublað — á um 10 mínútum, svo þú getir borið saman ramma á jafnréttisgrundvelli. Farðu svo dýpra með þemu og notendastillingar.
Áður en þú byrjar
Þú þarft undrafátt:
- Fyrir HTML-kennsluefnið — bara vafra og textaritil. Það eru öll verkfærin.
- Fyrir Svelte, React, Vue, Angular eða Nunjucks — git, Node 26 og pnpm 10 eða nýrra.
- Fyrir Blazor — git og .NET SDK 8 eða nýrra.
Nýbyrjuð(að) með höfuðlausa íhluti? Þú ert á réttum stað — hvert kennsluefni útskýrir hvað er að gerast jafnóðum og hvert skref sýnir nákvæmlega kóðann sem á að afrita.
Fjögur skref frá núlli að útgáfu
- Fyrsti íhluturinn þinn (~5 mínútur) — veldu ramma hér að neðan, náðu í kóðann og birtu Button.
- Settu saman og stílaðu (~5 mínútur) — byggðu eyðublað með merkimiðum og stílaðu það gegn kebab-case klasakrókunum (hluti af hverju rammakennsluefni).
- Settu þema á það (~15 mínútur) — skiptu handskrifuðu CSS út fyrir eitt af 57 tilbúnu þemunum og leyfðu svo notendum að skipta á keyrslutíma: þemakennsluefni.
- Virtu stillingar (~15 mínútur) — bættu við vali á tungumáli og textastærð með stillingahjálpartækjunum: hjálpartækjakennsluefni.
Veldu rammann þinn
HTML
Afritaðu merkingarfræðilegt HTML með klasakrókunum og byrjaðu — vafri og ritill er allt sem þarf.
Svelte
Svelte 5 runes, snippets og bind:value tvíátta bindingu.
React
Fallaíhlutir með value + onChange og dreifingu rest-prop.
Vue
Vue 3 einskrárhlutir með stuðningi við v-model .
Angular
Sjálfstæðir Angular-íhlutir með merkjainntökum og [(value)].
Blazor
Razor-íhlutir með færibreytum, ChildContent, og bUnit-prófum.
Nunjucks
Miðlaraútgefin makró fyrir Eleventy og hvaða Node-sniðmátsferli sem er.
Áttu erfitt með að velja? Byrjaðu á HTML — það kennir klasakróksamninginn sem allir aðrir rammar deila og keyrir beint úr skrá.
Farðu dýpra
Þemu
Tengdu eitt af 57 tilbúnum þemum — NHS, GOV.UK, USWDS, ljóst, dökkt og fleiri — hnekktu því með þínu eigin CSS og bættu við þemaskiptum á keyrslutíma með theme-picker hjálpartækinu.
Stillingahjálpartæki
Gefðu notendum stjórn á þema, tungumáli, textastærð, hreyfingu, leit, síðutenglum, deilingu og dagsetninga-/tímainnslætti með theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker og date-time-picker: höfuðlausar stýringar með þrautseigju, SSR-öryggi og sjálfvirkri RTL-greiningu.
Eftir kennsluefnin
- Skoðaðu íhlutasafnið — hver íhlutur skjalfestir eiginleika sína, ARIA-samning og lyklaborðshegðun.
- Afritaðu dæmaforrit til að sjá alla 571 íhlutina stílaða og vinna saman — CSS-ið miðar á sömu klasakróka og þú varst að nota, svo afritaðu hvaða hluta sem er í verkefnið þitt og aðlagaðu að vild.
- Spurningar? hjálparsíðan hefur svör, algengar spurningar og leiðir til að ná í vingjarnlega manneskju. Og ef kennsluefni gæti verið skýrara, segðu okkur — við bætum það með ánægju.