|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
|
|
|
"translation_date": "2025-10-03T09:44:46+00:00",
|
|
|
"source_file": "3-terrarium/2-intro-to-css/assignment.md",
|
|
|
"language_code": "tr"
|
|
|
}
|
|
|
-->
|
|
|
# CSS Yeniden Düzenleme Görevi
|
|
|
|
|
|
## Amaç
|
|
|
|
|
|
Terrarium projesini **Flexbox** veya **CSS Grid** kullanarak yeniden düzenleyin. Modern ve duyarlı bir tasarım elde etmek için HTML ve CSS'i gerektiği gibi güncelleyin. Sürüklenebilir öğeleri uygulamanıza gerek yok—yalnızca düzen ve stil üzerine odaklanın.
|
|
|
|
|
|
## Talimatlar
|
|
|
|
|
|
1. **Terrarium uygulamasının yeni bir versiyonunu oluşturun.** Düzeni oluşturmak için Flexbox veya CSS Grid kullanarak işaretleme ve CSS'i güncelleyin.
|
|
|
2. **Sanat eserlerinin ve öğelerin yerinde olduğundan emin olun,** tıpkı orijinal versiyondaki gibi.
|
|
|
3. **Tasarımınızı en az iki farklı tarayıcıda test edin** (örneğin, Chrome, Firefox, Edge).
|
|
|
4. **Terrarium'unuzun ekran görüntülerini alın** ve tarayıcılar arası uyumluluğu göstermek için paylaşın.
|
|
|
5. **Güncellenmiş kodunuzu ve ekran görüntülerinizi gönderin.**
|
|
|
|
|
|
## Değerlendirme Ölçütleri
|
|
|
|
|
|
| Kriter | Örnek Düzeyde | Yeterli | Geliştirme Gerekiyor |
|
|
|
|------------|------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
|
|
|
| Düzen | Flexbox veya CSS Grid kullanılarak tamamen yeniden düzenlenmiş; görsel olarak çekici ve duyarlı | Bazı öğeler yeniden düzenlenmiş; kısmen Flexbox veya Grid kullanılmış | Flexbox veya Grid çok az kullanılmış veya hiç kullanılmamış; düzen değişmemiş |
|
|
|
| Tarayıcılar Arası | Birden fazla tarayıcı için ekran görüntüleri sağlanmış; tutarlı görünüm | Bir tarayıcı için ekran görüntüleri; küçük tutarsızlıklar | Ekran görüntüsü yok veya büyük tutarsızlıklar |
|
|
|
| Kod Kalitesi | Temiz, iyi organize edilmiş HTML/CSS; açık yorumlar | Biraz organize; az sayıda yorum | Dağınık kod; yorum eksikliği |
|
|
|
|
|
|
## İpuçları
|
|
|
|
|
|
- [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) ve [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) rehberlerini inceleyin.
|
|
|
- Duyarlılığı test etmek için tarayıcı geliştirici araçlarını kullanın.
|
|
|
- Kodunuzu açıklık için yorumlayın.
|
|
|
|
|
|
---
|
|
|
|
|
|
**Feragatname**:
|
|
|
Bu belge, AI çeviri hizmeti [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlık içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yanlış yorumlamalar için sorumluluk kabul etmiyoruz. |
