You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
5.2 KiB
5.2 KiB
CSS ਰੀਫੈਕਟਰੀੰਗ ਅਸਾਈਨਮੈਂਟ
ਉਦੇਸ਼
Flexbox ਜਾਂ CSS Grid ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਟੈਰਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਰੀਫੈਕਟਰ ਕਰੋ। ਮਾਡਰਨ ਅਤੇ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਹਾਸਲ ਕਰਨ ਲਈ HTML ਅਤੇ CSS ਨੂੰ ਜ਼ਰੂਰਤ ਅਨੁਸਾਰ ਅਪਡੇਟ ਕਰੋ। ਤੁਹਾਨੂੰ ਡ੍ਰੈਗਗੇਬਲ ਐਲਿਮੈਂਟਸ ਲਾਗੂ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ—ਸਿਰਫ ਲੇਆਉਟ ਅਤੇ ਸਟਾਈਲਿੰਗ 'ਤੇ ਧਿਆਨ ਦਿਓ।
ਹਦਾਇਤਾਂ
- ਟੈਰਰੀਅਮ ਐਪ ਦਾ ਨਵਾਂ ਵਰਜਨ ਬਣਾਓ। ਲੇਆਉਟ ਲਈ Flexbox ਜਾਂ CSS Grid ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਮਾਰਕਅਪ ਅਤੇ CSS ਨੂੰ ਅਪਡੇਟ ਕਰੋ।
- ਸੁਨਿਸ਼ਚਿਤ ਕਰੋ ਕਿ ਕਲਾ ਅਤੇ ਐਲਿਮੈਂਟਸ ਮੂਲ ਵਰਜਨ ਵਾਂਗ ਹੀ ਸਥਿਤ ਹਨ।
- ਆਪਣੇ ਡਿਜ਼ਾਈਨ ਨੂੰ ਘੱਟੋ-ਘੱਟ ਦੋ ਵੱਖ-ਵੱਖ ਬ੍ਰਾਊਜ਼ਰਾਂ (ਜਿਵੇਂ ਕਿ Chrome, Firefox, Edge) ਵਿੱਚ ਟੈਸਟ ਕਰੋ।
- ਹਰ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਆਪਣੇ ਟੈਰਰੀਅਮ ਦੇ ਸਕ੍ਰੀਨਸ਼ਾਟ ਲਓ ਤਾਂ ਜੋ ਕ੍ਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਕਾਮਪੈਟਿਬਿਲਿਟੀ ਦਿਖਾਈ ਜਾ ਸਕੇ।
- ਆਪਣਾ ਅਪਡੇਟ ਕੀਤਾ ਕੋਡ ਅਤੇ ਸਕ੍ਰੀਨਸ਼ਾਟਸ ਸਬਮਿਟ ਕਰੋ।
ਰੂਬ੍ਰਿਕ
| ਮਾਪਦੰਡ | ਸ਼ਾਨਦਾਰ | ਯੋਗ | ਸੁਧਾਰ ਦੀ ਲੋੜ |
|---|---|---|---|
| ਲੇਆਉਟ | Flexbox ਜਾਂ CSS Grid ਦੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਰੀਫੈਕਟਿੰਗ; ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੌਰ 'ਤੇ ਆਕਰਸ਼ਕ ਅਤੇ ਰਿਸਪਾਂਸਿਵ | ਕੁਝ ਐਲਿਮੈਂਟਸ ਰੀਫੈਕਟ ਕੀਤੇ; Flexbox ਜਾਂ Grid ਦੀ ਅੰਸ਼ਿਕ ਵਰਤੋਂ | Flexbox ਜਾਂ Grid ਦੀ ਘੱਟ ਜਾਂ ਕੋਈ ਵਰਤੋਂ; ਲੇਆਉਟ ਅਣਬਦਲਿਆ |
| ਕ੍ਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ | ਕਈ ਬ੍ਰਾਊਜ਼ਰਾਂ ਲਈ ਸਕ੍ਰੀਨਸ਼ਾਟਸ ਪ੍ਰਦਾਨ ਕੀਤੇ; ਸਥਿਰ ਦਿੱਖ | ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਲਈ ਸਕ੍ਰੀਨਸ਼ਾਟਸ; ਥੋੜ੍ਹੀਆਂ ਅਸਥਿਰਤਾਵਾਂ | ਕੋਈ ਸਕ੍ਰੀਨਸ਼ਾਟਸ ਨਹੀਂ ਜਾਂ ਵੱਡੀਆਂ ਅਸਥਿਰਤਾਵਾਂ |
| ਕੋਡ ਗੁਣਵੱਤਾ | ਸਾਫ, ਚੰਗੀ ਤਰ੍ਹਾਂ ਸੰਗਠਿਤ HTML/CSS; ਸਪਸ਼ਟ ਟਿੱਪਣੀਆਂ | ਕੁਝ ਸੰਗਠਨ; ਥੋੜ੍ਹੀਆਂ ਟਿੱਪਣੀਆਂ | ਅਸੰਗਠਿਤ ਕੋਡ; ਟਿੱਪਣੀਆਂ ਦੀ ਘਾਟ |
ਸੁਝਾਅ
- Flexbox ਅਤੇ CSS Grid ਗਾਈਡਸ ਦੀ ਸਮੀਖਿਆ ਕਰੋ।
- ਰਿਸਪਾਂਸਿਵਨੈਸ ਟੈਸਟ ਕਰਨ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਦੀ ਵਰਤੋਂ ਕਰੋ।
- ਆਪਣੇ ਕੋਡ ਨੂੰ ਸਪਸ਼ਟਤਾ ਲਈ ਟਿੱਪਣੀ ਕਰੋ।
ਅਸਵੀਕਰਤੀ:
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ Co-op Translator ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਹਾਲਾਂਕਿ ਅਸੀਂ ਸਹੀਤਾ ਲਈ ਯਤਨਸ਼ੀਲ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚਨਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੌਜੂਦ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।