HTML பயிற்சி

நீங்கள் என்ன உருவாக்குவீர்கள்

ஒரு சிறிய தொடர்புப் படிவம் — லேபிள்களுடன் கூடிய புலங்கள், ஒரு சமர்ப்பிக்கும் பொத்தான், உண்மையான விசைப்பலகை மற்றும் திரை வாசிப்பான் நடத்தை — முதலில் வெறுமையாக, பிறகு பாணியுடன், சுமார் 10 நிமிடங்களில்.

தொடங்குவதற்கு முன்

உங்களுக்கு ஒரு உலாவியும் ஒரு உரைத் திருத்தியும் தேவை. அவ்வளவுதான். (கூறுக் கோப்புகளைப் பெற git உதவும், ஆனால் உலாவியில் GitHub இலிருந்தும் நகலெடுக்கலாம்.)

படி 1 — குறியீட்டைப் பெறுங்கள்

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-html-headless

ஒவ்வொரு கூறும் இங்கே ஒரு தனிக் கோப்பு: components/ — button.html, text-input.htmlமற்றும் பல — அதன் HTML குறிச்சொல், வகுப்புக் கொக்கி, விசைப்பலகை நடத்தை மற்றும் அணுகல் ஒப்பந்தத்தை ஆவணப்படுத்தும் தலைப்புக் குறிப்புடன். கோப்புகளே அந்த நூலகம் — தேவையானதை நகலெடுத்துச் செல்லுங்கள்.

படி 2 — உங்கள் முதல் கூறு

திறக்கவும் components/button.html, அல்லது மார்க்அப்பை எழுதுங்கள் — வகுப்புக் கொக்கியே ஒப்பந்தம்:

<button class="button" type="button">
  Save
</button>

இது உண்மையான <button>என்பதால், விசைப்பலகைக் குவியம், Enter மற்றும் Space மூலம் செயல்படுத்தல், மறைமுகப் பொத்தான் பங்கு ஏற்கனவே சரியாக உள்ளன.

படி 3 — ஒரு சிறிய படிவத்தை உருவாக்குங்கள்

<form class="form">
  <div class="field">
    <label class="label" for="name">Full name</label>
    <input class="text-input" type="text" id="name" name="name" required />
  </div>
  <div class="field">
    <label class="label" for="email">Email</label>
    <input class="email-input" type="email" id="email" name="email" required />
  </div>
  <button class="button" type="submit">Save</button>
</form>

முறையைக் கவனியுங்கள்: ஒவ்வொரு கட்டுப்பாடும் தன் <label for>ஐ இணைக்கிறது, மிகவும் குறிப்பிட்ட input வகையைப் பயன்படுத்துகிறது, சரியாக ஒரு kebab-case வகுப்புக் கொக்கியைக் கொண்டுள்ளது.

படி 4 — பாணியிடுங்கள்

கொக்கிகளுக்கு எதிராக CSS எழுதுங்கள்:

.button {
  background: #2563eb;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 0.5rem;
}
.text-input,
.email-input {
  padding: 0.5rem 0.75rem;
  border: 2px solid #6b7280;
  border-radius: 0.25rem;
}
.label { display: block; font-weight: 600; margin-bottom: 0.25rem; }

அல்லது கையால் CSS எழுதுவதை முற்றிலும் தவிர்க்கவும் — 45 தயார் தீம்களில் ஒன்றை இணைக்கவும், அதே மார்க்அப் ஒளிர்கிறது:

<link rel="stylesheet" href="/themes/united-kingdom-national-health-service-england-for-patients.css" />

படி 5 — மேலும் ஆராயுங்கள்

• களஞ்சியத்தின் சோதனைகள் உண்மையான உலாவிகளில் இயங்குகின்றன: pnpm install && pnpm test (WebDriverIO).
• ஒவ்வொரு கூறுக்கும் Storybook: pnpm run storybook.
• HTML+CSS+JS எடுத்துக்காட்டுப் பயன்பாடு அனைத்து 571 கூறுகளையும் பாணியுடனும், தேடக்கூடியதாகவும், செயல்விளக்கத்துடனும் காட்டுகிறது.

அடுத்த படிகள்

• தீம்கள் — theme-picker உடன் இயங்கும் போதே தீம் மாற்றுதல்.
• விருப்ப உதவியாளர்கள் — மொழி மற்றும் உரை அளவு.
• கூறுப் பட்டியல் — முழு குறிப்பு.

வழியில் கேள்விகளா? உதவிப் பக்கம் பதில்களால் நிறைந்தது — ஒரு படி இன்னும் தெளிவாக இருக்க முடிந்தால், எங்களிடம் சொல்லுங்கள் நாங்கள் மகிழ்ச்சியுடன் பயிற்சியை மேம்படுத்துவோம்.