<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
  "translation_date": "2025-10-03T09:28:58+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "pa"
}
-->
# CSS ਰੀਫੈਕਟਰੀੰਗ ਅਸਾਈਨਮੈਂਟ

## ਉਦੇਸ਼

**Flexbox** ਜਾਂ **CSS Grid** ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਟੈਰਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਰੀਫੈਕਟਰ ਕਰੋ। ਮਾਡਰਨ ਅਤੇ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਹਾਸਲ ਕਰਨ ਲਈ HTML ਅਤੇ CSS ਨੂੰ ਜ਼ਰੂਰਤ ਅਨੁਸਾਰ ਅਪਡੇਟ ਕਰੋ। ਤੁਹਾਨੂੰ ਡ੍ਰੈਗਗੇਬਲ ਐਲਿਮੈਂਟਸ ਲਾਗੂ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ—ਸਿਰਫ ਲੇਆਉਟ ਅਤੇ ਸਟਾਈਲਿੰਗ 'ਤੇ ਧਿਆਨ ਦਿਓ।

## ਹਦਾਇਤਾਂ

1. **ਟੈਰਰੀਅਮ ਐਪ ਦਾ ਨਵਾਂ ਵਰਜਨ ਬਣਾਓ।** ਲੇਆਉਟ ਲਈ Flexbox ਜਾਂ CSS Grid ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਮਾਰਕਅਪ ਅਤੇ CSS ਨੂੰ ਅਪਡੇਟ ਕਰੋ।
2. **ਸੁਨਿਸ਼ਚਿਤ ਕਰੋ ਕਿ ਕਲਾ ਅਤੇ ਐਲਿਮੈਂਟਸ** ਮੂਲ ਵਰਜਨ ਵਾਂਗ ਹੀ ਸਥਿਤ ਹਨ।
3. **ਆਪਣੇ ਡਿਜ਼ਾਈਨ ਨੂੰ ਘੱਟੋ-ਘੱਟ ਦੋ ਵੱਖ-ਵੱਖ ਬ੍ਰਾਊਜ਼ਰਾਂ (ਜਿਵੇਂ ਕਿ Chrome, Firefox, Edge) ਵਿੱਚ ਟੈਸਟ ਕਰੋ।**
4. **ਹਰ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਆਪਣੇ ਟੈਰਰੀਅਮ ਦੇ ਸਕ੍ਰੀਨਸ਼ਾਟ ਲਓ** ਤਾਂ ਜੋ ਕ੍ਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਕਾਮਪੈਟਿਬਿਲਿਟੀ ਦਿਖਾਈ ਜਾ ਸਕੇ।
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/) ਗਾਈਡਸ ਦੀ ਸਮੀਖਿਆ ਕਰੋ।
- ਰਿਸਪਾਂਸਿਵਨੈਸ ਟੈਸਟ ਕਰਨ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਦੀ ਵਰਤੋਂ ਕਰੋ।
- ਆਪਣੇ ਕੋਡ ਨੂੰ ਸਪਸ਼ਟਤਾ ਲਈ ਟਿੱਪਣੀ ਕਰੋ।

---

**ਅਸਵੀਕਰਤੀ**:  
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਹਾਲਾਂਕਿ ਅਸੀਂ ਸਹੀਤਾ ਲਈ ਯਤਨਸ਼ੀਲ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚਨਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੌਜੂਦ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।