8.2 מודולי CSS וטיילווינד תרגול

תרגול - מודולי CSS וטיילווינד

תרגיל 1

צרו קומפוננטת Sidebar עם CSS Modules.

הסיידבר צריך לכלול:
- לוגו בחלק העליון
- רשימת קישורי ניווט
- כל קישור מכיל אייקון (טקסט) ותיאור
- קישור פעיל מודגש עם צבע רקע שונה וגבול שמאלי צבעוני
- הסיידבר מתכווץ בהעברת עכבר (הצגת אייקונים בלבד) ומתרחב ב-hover

השתמשו ב-composes לשיתוף סגנונות בסיסיים בין מצבים.

תרגיל 2

צרו דף פרופיל משתמש שלם עם Tailwind בלבד.

הדף צריך לכלול:
- כותרת (header) עם תמונת כיסוי ותמונת פרופיל עגולה שחופפת
- שם המשתמש ותיאור קצר
- סטטיסטיקות (פוסטים, עוקבים, עוקב אחרי) בשורה אחת
- רשת (grid) של כרטיסיות פוסטים - 1 בעמודה בטלפון, 2 בטאבלט, 3 בדסקטופ
- כל כרטיסייה כוללת כותרת, תיאור קצר, ותאריך

כל הדף צריך להיות רספונסיבי ולתמוך במצב כהה.

תרגיל 3

צרו מערכת כרטיסי מחירים (Pricing Cards) עם Tailwind.

• שלושה כרטיסים: בסיסי, פרו, ארגוני
• כרטיס הפרו מודגש (גדול יותר, גבול צבעוני, תגית "פופולרי")
• כל כרטיס כולל: שם תוכנית, מחיר, רשימת תכונות עם V/X, כפתור
• בטלפון - כרטיס אחד ברוחב מלא, בדסקטופ - שלושה זה ליד זה
• אפקט hover על כל כרטיס

תרגיל 4

צרו קומפוננטת טבלה רספונסיבית עם CSS Modules.

• בדסקטופ: טבלה רגילה עם שורות ועמודות
• בטלפון: כל שורה הופכת לכרטיס עם תוויות (labels)
• השתמשו ב-media queries בתוך ה-CSS Module
• הוסיפו hover על שורות בדסקטופ
• הוסיפו striped rows (שורות מפוספסות)

נתוני דוגמה: טבלת עובדים עם שם, תפקיד, מחלקה, תאריך הצטרפות

תרגיל 5

צרו קומפוננטת טופס יצירת קשר עם Tailwind.

הטופס צריך לכלול:
- שדות: שם מלא, אימייל, נושא (select), הודעה (textarea)
- ולידציה ויזואלית - גבול אדום ושגיאה מתחת לשדה כשיש שגיאה
- גבול ירוק כשהשדה תקין
- כפתור שליחה שמשתנה ל-disabled כשהטופס לא מלא
- עיצוב רספונסיבי - שדות ברוחב מלא בטלפון, שניים בשורה בדסקטופ
- תמיכה במצב כהה

תרגיל 6

צרו Layout מלא של אפליקציה עם שילוב CSS Modules ו-Tailwind.

הלייאוט כולל:
- Header קבוע עם CSS Modules (אנימציית כניסה, לוגו, ניווט)
- Sidebar עם CSS Modules (אנימציית פתיחה/סגירה)
- תוכן ראשי עם Tailwind (grid של כרטיסיות)
- Footer עם Tailwind

דרישות:
- ה-Header וה-Sidebar משתמשים ב-CSS Modules בגלל האנימציות
- התוכן הראשי וה-Footer משתמשים ב-Tailwind בגלל הפשטות
- הכל רספונסיבי - בטלפון ה-Sidebar הופך להמבורגר

שאלות

1. מה קורה כשמשתמשים ב-composes ומייבאים מקובץ CSS Module אחר? האם זה יוצר כפילות CSS?
2. מה ההבדל בין הגישות sm: (mobile-first) ו-max-sm: ב-Tailwind? מתי נשתמש בכל אחת?
3. איך Tailwind מצליח לייצר קובץ CSS קטן למרות שיש אלפי מחלקות אפשריות?
4. מתי עדיף להשתמש ב-CSS Module ומתי ב-Tailwind באותו פרויקט?
5. מה היתרון של group-hover: על פני כתיבת CSS רגיל עם selector של הורה?