Web-Dev-For-Beginners/translations/he/3-terrarium/2-intro-to-css/assignment.md

<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "bee6762d4092a13fc7c338814963f980",
  "translation_date": "2025-10-23T01:26:14+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "he"
}
-->
# משימת עיצוב מחדש של CSS

## מטרה

הפוך את פרויקט הטרריום שלך לשימוש בטכניקות עיצוב מודרניות של CSS! עצב מחדש את הגישה הנוכחית של מיקום מוחלט כדי ליישם **Flexbox** או **CSS Grid** לעיצוב רספונסיבי וקל יותר לתחזוקה. משימה זו מאתגרת אותך ליישם סטנדרטים מודרניים של CSS תוך שמירה על האסתטיקה של הטרריום שלך.

הבנה מתי וכיצד להשתמש בשיטות עיצוב שונות היא מיומנות קריטית לפיתוח אתרים מודרני. תרגיל זה מחבר בין טכניקות מיקום מסורתיות לבין מערכות עיצוב CSS עכשוויות.

## הוראות המשימה

### שלב 1: ניתוח ותכנון
1. **סקור את קוד הטרריום הנוכחי שלך** - זיהוי אילו אלמנטים משתמשים כרגע במיקום מוחלט
2. **בחר את שיטת העיצוב שלך** - החלט האם Flexbox או CSS Grid מתאימים יותר למטרות העיצוב שלך
3. **שרטט את מבנה העיצוב החדש שלך** - תכנן כיצד מיכלים ואלמנטים הצמחים יהיו מאורגנים

### שלב 2: יישום
1. **צור גרסה חדשה** של פרויקט הטרריום שלך בתיקייה נפרדת
2. **עדכן את מבנה ה-HTML** לפי הצורך כדי לתמוך בשיטת העיצוב שבחרת
3. **עצב מחדש את ה-CSS** לשימוש ב-Flexbox או CSS Grid במקום מיקום מוחלט
4. **שמור על עקביות ויזואלית** - ודא שהצמחים וצנצנת הטרריום מופיעים באותם מיקומים
5. **יישם התנהגות רספונסיבית** - העיצוב שלך צריך להתאים בצורה חלקה לגדלי מסך שונים

### שלב 3: בדיקות ותיעוד
1. **בדיקות בין דפדפנים** - ודא שהעיצוב שלך עובד ב-Chrome, Firefox, Edge ו-Safari
2. **בדיקות רספונסיביות** - בדוק את העיצוב שלך במובייל, טאבלט ומסכי מחשב
3. **תיעוד** - הוסף הערות ל-CSS שמסבירות את בחירות העיצוב שלך
4. **צילומי מסך** - צלם את הטרריום שלך בדפדפנים ובגדלי מסך שונים

## דרישות טכניות

### יישום עיצוב
- **בחר אחת**: יישם או Flexbox או CSS Grid (לא שניהם עבור אותם אלמנטים)
- **עיצוב רספונסיבי**: השתמש ביחידות יחסיות (`rem`, `em`, `%`, `vw`, `vh`) במקום פיקסלים קבועים
- **נגישות**: שמור על מבנה HTML סמנטי נכון וטקסט חלופי
- **איכות קוד**: השתמש בשמות עקביים וארגן את ה-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. **אוסף צילומי מסך** המציג תאימות בין דפדפנים:
   - תצוגת מחשב (1920x1080)
   - תצוגת טאבלט (768x1024) 
   - תצוגת מובייל (375x667)
   - לפחות 2 דפדפנים שונים
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 מול 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 Contrast Checker](https://webaim.org/resources/contrastchecker/)

## אתגרי בונוס

🌟 **עיצובים מתקדמים**: יישם גם Flexbox וגם Grid בחלקים שונים של העיצוב שלך  
🌟 **שילוב אנימציות**: הוסף מעברים או אנימציות ב-CSS שעובדים עם העיצוב החדש שלך  
🌟 **מצב כהה**: יישם מחליף נושא מבוסס מאפייני CSS מותאמים אישית  
🌟 **שאילתות מיכל**: השתמש בטכניקות שאילתות מיכל מודרניות לרספונסיביות ברמת הרכיב  

> 💡 **זכור**: המטרה היא לא רק לגרום לזה לעבוד, אלא להבין מדוע שיטת העיצוב שבחרת היא הפתרון הטוב ביותר לאתגר העיצובי הספציפי הזה!

---

**הצהרת אחריות**:  
מסמך זה תורגם באמצעות שירות תרגום AI [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. למידע קריטי, מומלץ להשתמש בתרגום מקצועי אנושי. איננו אחראים לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.