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, మరియు స్నేహపూర్వక మనిషిని చేరుకునే మార్గాలు ఉన్నాయి. మరియు ఏదైనా ట్యుటోరియల్ మరింత స్పష్టంగా ఉండగలిగితే, మాకు చెప్పండి — మేము సంతోషంగా మెరుగుపరుస్తాము.