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
சிக்னல் உள்ளீடுகளுடன் 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 மற்றும் நட்பான மனிதரை அடையும் வழிகள் உள்ளன. ஒரு பயிற்சி இன்னும் தெளிவாக இருக்கலாம் என்றால், எங்களிடம் சொல்லுங்கள் — மகிழ்ச்சியுடன் மேம்படுத்துவோம்.