# CSS மறுசீரமைப்பு பணிக்கு

## நோக்கு

உங்கள் டெராரியம் திட்டத்தை நவீன CSS விரல் முறைகளைப் பயன்படுத்துவதற்காக மாற்றுங்கள்! தற்போதைய அசல் நிலை அமைவு அணுகுமுறையை மாற்றி **Flexbox** அல்லது **CSS Grid** ஐ எளிமையான, பதிலளிக்கும் வடிவமைப்புக்காக செயல்படுத்தவும். இந்த பணியில் நீங்கள் நவீன CSS நிலைகளையும் உங்கள் டெராரியத்திற்கான காட்சிப்படுத்தல் அழகையும் பராமரிக்க தெரிய வேண்டும்.

வகுத்தல் முறைகளை எப்போது மற்றும் எப்படிப் பயன்படுத்துவது என்பது நவீன வலைவளத்தில் மிகவும் முக்கியமான திறன் ஆகும். இந்த பயிற்சி பாரம்பரிய நிர்ணய முறைகளை நவீன CSS விரல் அமைப்பு முறைகளுடன் இணைக்கிறது.

## பணியின் வழிகாட்டிகள்

### கட்டம் 1: பகுப்பாய்வு மற்றும் திட்டமிடல்
1. **உங்கள் தற்போதைய டெராரியம் குறியீட்டை மதிப்பாய்வு செய்யவும்** - ஏதேனும் துண்டுகளை அசல் நிலை அமைவு பயன்படுத்தவுள்ளனவா என்பதை கண்டறியவும்
2. **உங்கள் விரல் முறையை தேர்வு செய்யவும்** - Flexbox அல்லது CSS Grid எது உங்கள் வடிவமைப்பு நோக்கங்களுக்கு மிகவும் பொருத்தமாக உள்ளது என்பதை தீர்மானிக்கவும்
3. **உங்கள் புதிய விரல் அமைப்பை வரைபடமாக்கவும்** - கன்டெய்னர்கள் மற்றும் செடிகள் எப்படி ஏற்பாடாகும் என்பதை திட்டமிடவும்

### கட்டம் 2: செயல்படுத்தல்
1. **உங்கள் டெராரியம் திட்டத்தின் புதிய பதிப்பை உருவாக்கவும்** தனித்தொரு கோப்பகத்தில்
2. **HTML அமைப்பை தேவையானபடி புதுப்பிக்கவும்** உங்கள் தேர்ந்த விரல் முறையை ஆதரிக்க
3. **அசல் நிலை அமைவினை தவிர Flexbox அல்லது CSS Grid பயன்படுத்த CSS-ஐ மறுசீரமைக்கவும்**
4. **காட்சி ஒருங்கிணைப்பை பராமரிக்கவும்** - உங்கள் செடிகள் மற்றும் டெராரியம் பாட்டில்கள் அதே இடத்தில் தோன்றும்படி உறுதிப்படுத்தவும்
5. **பதிலளிக்கும் நடத்தை செயல்படுத்தவும்** - உங்கள் விரல் வெவ்வேறு திரை அளவுகளுக்கு தழுவக் கூடியதாக இருக்க வேண்டும்

### கட்டம் 3: சோதனை மற்றும் ஆவணப்படுத்தல்
1. **எல்லா உலாவிகளிலும் சோதனை செய்யவும்** - Chrome, Firefox, Edge, Safari இல் உங்கள் வடிவமைப்பு இயங்குவதை உறுதிப்படுத்தவும்
2. **பதிலளிக்கும் சோதனை** - மொபைல், டேப்லெட் மற்றும் டெஸ்க்டாப் திரை அளவுகளில் உங்கள் விரலை சோதனை செய்யவும்
3. **ஆவணப்படுத்தல்** - உங்கள் CSS-ல் உங்கள் விரல் தேர்வுகளை விளக்கும் கருத்துக்களைச் சேர்க்கவும்
4. **திரை பிடிப்புகள்** - வெவ்வேறு உலாவிகளிலும் மற்றும் திரை அளவுகளில் உங்கள் டெராரியத்தைப் படம் பிடிக்கவும்

## தொழில்நுட்ப தேவைகள்

### விரல் செயல்படுத்தல்
- **ஒன்றை மட்டும் தேர்வு செய்யவும்**: Flexbox அல்லது CSS Grid (ஒரே துண்டுகளுக்கு இரண்டையும் பயன்படுத்த கூடாது)
- **பதிலளிக்கும் வடிவமைப்பு**: நிலையான பிக்சல்கள் இல்லாமல் வாரியாகிய அலகுகள் (`rem`, `em`, `%`, `vw`, `vh`) பயன்படுத்தவும்
- **அணுகல் வசதி**: சரியான அர்த்தமுள்ள HTML அமைப்பையும் alt உரைகளையும் பராமரிக்கவும்
- **குறியீட்டு தரம்**: ஒரே மாதிரியான பெயரிடல் முறைகள் மற்றும் தூய்மையான CSS ஒழுங்கமைப்பு பயன்படுத்தவும்

### சேர்க்க வேண்டிய நவீன CSS அம்சங்கள்
```css
/* Example Flexbox approach */
.terrarium-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.plant-containers {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
}

/* Example Grid approach */
.terrarium-layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  gap: 1rem;
}
```

### உலாவி ஆதரவு தேவைகள்
- **Chrome/Edge**: சமீபத்திய 2 பதிப்புகள்
- **Firefox**: சமீபத்திய 2 பதிப்புகள்  
- **Safari**: சமீபத்திய 2 பதிப்புகள்
- **மொபைல் உலாவிகள்**: iOS Safari, Chrome Mobile

## வழங்கப்பட வேண்டியவை

1. **மேம்பட்ட அர்த்தமுடைய HTML கோப்பு**
2. **மறுசீரமைக்கப்பட்ட CSS கோப்பு** நவீன விரல் முறைகளைக் கொண்டு
3. **திரை பிடிப்பு தொகுப்பு** குறைந்தது 2 வேறு உலாவிகளின்:
   - டெஸ்க்டாப் பார்வை (1920x1080)
   - டேப்லெட் பார்வை (768x1024) 
   - மொபைல் பார்வை (375x667)
4. **README.md கோப்பு** ஆவணப்படுத்தல்:
   - உங்கள் விரல் தேர்வு (Flexbox அல்லது Grid) மற்றும் காரணங்கள்
   - மறுசீரமைப்பில் சந்தித்த சவால்கள்
   - உலாவி பொருத்தம் குறித்து குறிப்புகள்
   - உங்கள் குறியீட்டை இயக்கும் வழிமுறைகள்

## மதிப்பீடு அட்டவணை

| அளவுரு | சிறந்தது (4) | நிபுணத்துவம் (3) | மேம்பாடு (2) | தொடக்கம் (1) |
|----------|---------------|----------------|---------------|---------------|
| **விரல் செயல்படுத்தல்** | Flexbox/Grid-ஐ திறமையாகவும் முழுமையாக பதிலளிக்கும் வகையில் பயன்படுத்தியது | சரியான செயல்படுத்தல் மற்றும் நல்ல பதிலளிக்கும் நடத்தை | அடிப்படை செயல்படுத்தல் சிறிய பதிலளிக்கும் பிழைபடத்துடன் | முழுமையற்ற அல்லது தவறான விரல் செயல்படுத்தல் |
| **குறியீட்டு தரம்** | நன்றாக ஒழுங்கமைக்கப்பட்ட CSS, கருத்துக்களும் பெயரிடலும் அர்த்தமுள்ளதாக | நல்ல ஒழுங்கமைப்பு மற்றும் சில கருத்துக்கள் | போதுமான ஒழுங்கமைப்பு குறைந்த கருத்துக்களுடன் | மோசமான ஒழுங்கமைப்பு; புரிந்து கொள்வதில் சிக்கல் |
| **எல்லா உலாவிகளிலும் இணக்கம்** | தேவையான அனைத்து உலாவிகளிலும் சிறந்த ஒத்திசைவு மற்றும் திரை பிடிப்புகள் | சில வேறுபாடுகள் இருந்தாலும் நல்ல பொருத்தம் | சில இணக்கமின்மை இருப்பும் செயல்பாட்டில் பிழை இல்லை | பெரிய பொருந்தாமை பிரச்சினைகள் அல்லது சோதனை செய்யப்படாமல் உள்ளது |
| **பதிலளிக்கும் வடிவமைப்பு** | சிறந்த மொபைல் முதலீடு மற்றும் மென்மையான இடைவெளிகள் | நல்ல பதிலளிக்கும் நடத்தை சரியான இடைவெளிகளுடன் | அடிப்படை பதிலளிக்கும் அம்சங்கள் சில பிழைகளுடன் | குறைந்த அல்லது முற்றிலும் முறையாக இல்லாத பதிலளிக்குமுறை |
| **ஆவணப்படுத்தல்** | விரிவான README மிகச் சீரான விளக்கங்களுடன் | தேவையான அனைத்து அம்சங்களையும் உள்ளடக்கிய நல்ல ஆவணம் | அடிப்படையான ஆவணப்படுத்தல் குறைந்த விளக்கங்களுடன் | முழுமையற்ற அல்லது இல்லாத ஆவணப்படுத்தல் |

## உதவித் தகவல்கள்

### விரல் முறை வழிகாட்டிகள்
- 📖 [Flexbox-க்கு முழுமையான வழிகாட்டி](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- 📖 [CSS Grid-க்கு முழுமையான வழிகாட்டி](https://css-tricks.com/snippets/css/complete-guide-grid/)
- 📖 [Flexbox vs Grid - சரியான கருவியைத் தேர்வு செய்யவும்](https://blog.webdevsimplified.com/2022-11/flexbox-vs-grid/)

### உலாவி சோதனை கருவிகள்
- 🛠️ [உலாவி DevTools பதிலளிக்கும் முறை](https://developer.chrome.com/docs/devtools/device-mode/)
- 🛠️ [Can I Use - அம்ச ஆதரவு](https://caniuse.com/)
- 🛠️ [BrowserStack - பல உலாவி சோதனை](https://www.browserstack.com/)

### குறியீட்டு தர கருவிகள்
- ✅ [CSS சரிபார்ப்பான்](https://jigsaw.w3.org/css-validator/)
- ✅ [HTML சரிபார்ப்பான்](https://validator.w3.org/)
- ✅ [WebAIM மாறுபாடு சரிபார்ப்பான்](https://webaim.org/resources/contrastchecker/)

## கூடுதல் சவால்கள்

🌟 **மேம்பட்ட விரல்கள்**: உங்கள் வடிவமைப்பின் வேறு பகுதிகளில் Flexbox மற்றும் Grid இரண்டையும் செயல்படுத்தவும்  
🌟 **அனிமேஷன் ஒருங்கிணைப்பு**: உங்கள் புதிய விரல் அமைப்போடு பொருந்தும் CSS மாற்றங்கள் அல்லது அனிமேஷன்களைச் சேர்க்கவும்  
🌟 **கருப்பு பயன்முறை**: CSS தனிப்பயன் பண்புகளின் அடிப்படையில் தீம் மாற்றியை செயல்படுத்தவும்  
🌟 **கன்டெய்னர் கோரிகள்**: கூறு மட்டத்தில் பதிலளிக்கும் தன்மைக்காக நவீன கன்டெய்னர் கோரி முறைகளை பயன்படுத்தவும்  

> 💡 **நினைவில் வைக்கவும்**: இது வேலை செய்வதையே நோக்கமாகக் கொள்ளாமல், உங்கள் தேர்ந்த விரல் முறை இந்த வடிவமைப்பு சவாலுக்கான மிகச்சிறந்த தீர்வாக ஏன் இருக்க வேண்டும் என்பதை புரிந்து கொள்ளுவதே குறிக்கோள்!

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**வெளிப்படுத்தல்**:  
இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) எனும் ஏஐ மொழி பெயர்ப்பு சேவையை பயன்படுத்தி மொழிபெயர்க்கப்பட்டது. நாங்கள் துல்லியத்திற்காக முயற்சி செய்தாலும், தானாக மொழி மாற்றங்களில் பிழைகள் அல்லது தவறுகள் இருக்கலாம் என்பதை கவனமாக எடுத்துக்கொள்ளவும். உடன்பட்ட மொழியில் உள்ள அசல் ஆவணம் அதிகாரப்பூர்வ மூலமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பை பரிந்துரைக்கிறோம். இந்த மொழிபெயர்ப்பின் பயன்பாட்டால் ஏற்படும் எந்தவொரு புரிதல் தவறும் அல்லது தவறான விளக்கங்களுக்கும் நாங்கள் பொறுப்பாக இல்லை.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->