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, ਅਤੇ ਕਿਸੇ ਮਿੱਤਰਤਾ ਭਰੇ ਇਨਸਾਨ ਤੱਕ ਪਹੁੰਚਣ ਦੇ ਤਰੀਕੇ ਹਨ। ਅਤੇ ਜੇ ਕੋਈ ਟਿਊਟੋਰਿਅਲ ਹੋਰ ਸਪੱਸ਼ਟ ਹੋ ਸਕਦਾ ਹੈ, ਸਾਨੂੰ ਦੱਸੋ — ਅਸੀਂ ਖ਼ੁਸ਼ੀ ਨਾਲ ਇਸ ਨੂੰ ਸੁਧਾਰਾਂਗੇ।