ধাপে ধাপে Lily শিখুন
স্বাগতম! প্রতিটি টিউটোরিয়াল শূন্য থেকে শুরু হয় এবং প্রায় ১০ মিনিটে একই ছোট জিনিস — একটি অ্যাক্সেসযোগ্য, স্টাইল করা ফর্ম — তৈরি করে, যাতে আপনি ফ্রেমওয়ার্কগুলোর সমান ভিত্তিতে তুলনা করতে পারেন। তারপর থিমিং ও ব্যবহারকারীর পছন্দে আরও গভীরে যান।
শুরু করার আগে
আপনার আশ্চর্যজনকভাবে কমই লাগবে:
- HTML টিউটোরিয়ালের জন্য — শুধু একটি ব্রাউজার আর একটি টেক্সট এডিটর। পুরো সরঞ্জাম এটুকুই।
- Svelte, React, Vue, Angular বা Nunjucks-এর জন্য — git, Node 26 এবং pnpm 10 বা তার পরের সংস্করণ।
- Blazor-এর জন্য — git এবং .NET SDK 8 বা তার পরের সংস্করণ।
headless কম্পোনেন্টে নতুন? আপনি ঠিক জায়গাতেই এসেছেন — প্রতিটি টিউটোরিয়াল চলতে চলতে বুঝিয়ে দেয় কী ঘটছে, আর প্রতিটি ধাপ কপি করার জন্য নির্ভুল কোড দেখায়।
শূন্য থেকে প্রকাশ পর্যন্ত চার ধাপ
- আপনার প্রথম কম্পোনেন্ট (~৫ মিনিট) — নিচে আপনার ফ্রেমওয়ার্ক বেছে নিন, কোড নিন, এবং একটি বোতাম রেন্ডার করুন।
- সাজান ও স্টাইল করুন (~৫ মিনিট) — লেবেলসহ একটি ফর্ম তৈরি করুন এবং kebab-case ক্লাস হুক অনুযায়ী স্টাইল করুন (প্রতিটি ফ্রেমওয়ার্ক টিউটোরিয়ালের অংশ)।
- থিম প্রয়োগ করুন (~১৫ মিনিট) — আপনার হাতে লেখা CSS-কে ৪৫টি তৈরি থিমের একটি দিয়ে বদলে দিন, তারপর ব্যবহারকারীদের রানটাইমে পাল্টাতে দিন: থিমিং টিউটোরিয়াল।
- পছন্দকে সম্মান করুন (~১৫ মিনিট) — পছন্দ সহায়ক দিয়ে ভাষা ও লেখার আকার নির্বাচন যোগ করুন: সহায়ক টিউটোরিয়াল।
আপনার ফ্রেমওয়ার্ক বেছে নিন
HTML
ক্লাস হুকসহ অর্থবহ HTML কপি করুন আর শুরু করে দিন — একটি ব্রাউজার ও একটি এডিটরই যথেষ্ট।
Svelte
Svelte 5 রুন, স্নিপেট এবং bind:value দ্বিমুখী বাঁধন।
React
value + onChange ও বাকি প্রপস ছড়িয়ে দেওয়াসহ ফাংশন কম্পোনেন্ট।
Vue
v-model সমর্থনসহ Vue 3 সিঙ্গেল-ফাইল কম্পোনেন্ট।
Angular
সিগন্যাল ইনপুট ও [(value)]সহ Angular স্ট্যান্ডঅ্যালোন কম্পোনেন্ট।
Blazor
প্যারামিটার, ChildContent ও bUnit পরীক্ষাসহ Razor কম্পোনেন্ট।
Nunjucks
Eleventy ও যেকোনো Node টেমপ্লেট পাইপলাইনের জন্য সার্ভারে রেন্ডার হওয়া ম্যাক্রো।
দ্বিধায় আছেন? HTML দিয়ে শুরু করুন — এটি সেই ক্লাস হুক চুক্তি শেখায় যা বাকি সব ফ্রেমওয়ার্ক ভাগ করে নেয়, আর এটি সরাসরি ফাইল থেকেই চলে।
আরও গভীরে যান
থিমিং
৪৫টি তৈরি থিমের একটি যুক্ত করুন — 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 নিরাপত্তা ও ডান-থেকে-বাম লেখার স্বয়ংক্রিয় শনাক্তকরণসহ headless নিয়ন্ত্রণ।
টিউটোরিয়ালের পর
- কম্পোনেন্ট ক্যাটালগ ঘুরে দেখুন — প্রতিটি কম্পোনেন্ট তার প্রপার্টি, ARIA চুক্তি ও কিবোর্ড আচরণ নথিভুক্ত করে।
- সব ৫৭১টি কম্পোনেন্ট স্টাইল করা অবস্থায় একসঙ্গে কাজ করতে দেখতে একটি উদাহরণ অ্যাপ ক্লোন করুন — এর CSS ঠিক সেই ক্লাস হুকগুলোই লক্ষ্য করে যা আপনি এইমাত্র ব্যবহার করলেন, তাই যা খুশি আপনার প্রকল্পে কপি করুন এবং ইচ্ছামতো বদলে নিন।
- প্রশ্ন আছে? সহায়তা পৃষ্ঠায় রয়েছে উত্তর, সাধারণ প্রশ্নাবলী এবং একজন বন্ধুসুলভ মানুষের কাছে পৌঁছানোর উপায়। আর কোনো টিউটোরিয়াল যদি আরও স্পষ্ট হতে পারে, আমাদের জানান — আমরা সানন্দে তা উন্নত করব।