<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
  "translation_date": "2025-10-11T11:59:02+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "ta"
}
-->
# CSS மறுசீரமைப்பு பணிக்கான பணிகள்

## நோக்கம்

**Flexbox** அல்லது **CSS Grid** பயன்படுத்தி terrarium திட்டத்தை மறுசீரமைக்கவும். HTML மற்றும் CSS-ஐ தேவையான அளவு புதுப்பித்து ஒரு நவீன, பதிலளிக்கக்கூடிய வடிவமைப்பை உருவாக்கவும். இழுக்கக்கூடிய கூறுகளை செயல்படுத்த தேவையில்லை—வகைமை மற்றும் அலங்காரத்தில் மட்டும் கவனம் செலுத்தவும்.

## வழிமுறைகள்

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

## மதிப்பீடு

| அளவுகோல்கள்   | சிறந்தது                                                                 | போதுமானது                              | மேம்பாடு தேவை                      |
|------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
| வகைமை     | Flexbox அல்லது CSS Grid முழுமையாக மறுசீரமைக்கப்பட்டது; கண்ணுக்கு அழகாகவும் பதிலளிக்கக்கூடியதாகவும் உள்ளது | சில கூறுகள் மறுசீரமைக்கப்பட்டன; Flexbox அல்லது Grid பகுதியளவில் பயன்படுத்தப்பட்டது | Flexbox அல்லது Grid குறைவாக அல்லது பயன்படுத்தப்படவில்லை; வகைமை மாற்றப்படவில்லை |
| குறுக்குவெளி இணக்கம் | பல உலாவிகளுக்கான திரையிழைகள் வழங்கப்பட்டன; ஒரே மாதிரியான தோற்றம்      | ஒரு உலாவிக்கான திரையிழைகள்; சிறிய முரண்பாடுகள் | திரையிழைகள் இல்லை அல்லது பெரிய முரண்பாடுகள் |
| குறியீட்டு தரம் | சுத்தமான, நன்கு ஒழுங்குபடுத்தப்பட்ட HTML/CSS; தெளிவான கருத்துரைகள்                         | சில ஒழுங்குபடுத்தல்; சில கருத்துரைகள்        | குழப்பமான குறியீடு; கருத்துரைகள் இல்லை      |

## குறிப்புகள்

- [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) மற்றும் [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) வழிகாட்டுதல்களைப் பார்வையிடவும்.
- உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்தி பதிலளிக்கக்கூடிய தன்மையை சோதிக்கவும்.
- தெளிவுக்காக உங்கள் குறியீட்டில் கருத்துரைகளை சேர்க்கவும்.

---

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