1.3 קוד css תרגיל

להלן תרגילים מעשיים ללימוד CSS בהתאם לפרקי ההרצאה:

תרגיל 1: הכרות בסיסית עם CSS

הוראות:
1. צור קובץ HTML עם מבנה בסיסי
2. הוסף קובץ CSS חיצוני (styles.css)
3. עצב את הדף כך ש:
- הרקע יהיה בצבע #f0f0f0
- הכותרות ברמה 1 יהיו בכחול (#0066cc) ומרוכזות
- הפסקאות יהיו בגופן Arial, גודל 16px, בצבע #333

תרגיל 2: עבודה עם סלקטורים

הוראות:
צור דף עם:
1. אלמנט עם id="header" - עצב אותו עם רקע כהה וטקסט לבן
2. 3 אלמנטים עם class="highlight" - עצב אותם עם רקע צהוב ומסגרת מקווקוות
3. עצב כל קישור () כך שיהיה בצבע ירוק ולא עם קו תחתון
4. עצב רק פסקאות שנמצאות בתוך div להיות עם ריווח שורות של 1.5

תרגיל 3: מודל הקופסה

הוראות:
צור 3 divים עם:
1. רוחב 200px וגובה 100px
2. לכל div padding שונה (10px, 20px, 30px)
3. לכל div margin שונה (5px, 10px, 15px)
4. לכל div border בצבע ובסגנון שונים
5. הוסף רקעים בצבעים שונים כדי לראות את ההשפעה של ה-padding

תרגיל 4: Flexbox

הוראות:
צור תפריט אופקי עם:
1. מיכל ראשי עם display: flex
2. 5 פריטי תפריט (אלמנטים בתוך המיכל)
3. יישר את הפריטים במרכז המיכל בציר האנכי
4. חלק את הרווח הפנוי באופן שווה בין הפריטים
5. הוסף ריווח של 10px בין הפריטים

תרגיל 5: Grid

הוראות:
צור גריד של גלריה עם:
1. 6 תמונות (ניתן להשתמש ב-placeholder)
2. המיכל הראשי עם display: grid
3. הגדר 3 עמודות שוות רוחב
4. הגדר ריווח של 15px בין התאים
5. דאג שכל התמונות יתאימו לגודל התא (object-fit: cover)

תרגיל 6: אנימציות

הוראות:
צור דף עם:
1. כפתור מעוגל עם רקע כחול
2. כאשר מרחפים מעל הכפתור (hover):
- הרקע משתנה בהדרגה לירוק
- הכפתור מתרחב מעט
- מופיעה צללית
3. הוסף אנימציה של "קפיצה" כאשר לוחצים על הכפתור

תרגיל 7: עיצוב טופס מתקדם

הוראות:
עצב טופס הרשמה עם:
1. רקע מעודן עם גרדיאנט
2. שדות קלט עם סגנון מודרני (מרווחים, פינות מעוגלות)
3. כפתור הגשה עם מעבר צבע חלק ב-hover
4. הודעות שגיאה באדום (אם מופיעות)
5. תוויות מודגשות עם אנימציית מעבר קלה

תרגיל 8: עיצוב כרטיס מוצר

הוראות:
צור כרטיס מוצר אלגנטי עם:
1. תמונה בראש הכרטיס
2. כותרת ותיאור
3. מחיר והנחה (אם יש)
4. כפתור "הוסף לסל"
5. אפקט צל ומעבר חלק ב-hover
6. מדבקת "חדש" בפינה עם סיבוב קל

תרגיל 9: תפריט צד נפתח

הוראות:
צור תפריט צד (sidebar) עם:
1. אפשרות להסתרה/הצגה (עם מעבר אנימציה)
2. פריטים עם אייקונים
3. אפקט hover לפריטים
4. פריט פעיל מודגש
5. רקע עם שקיפות חלקית

תרגיל 10: דף מלא עם פריסה מורכבת

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

תרגיל אתגרי: גלריית תמונות אינטרקטיבית

הוראות:
צור גלריית תמונות עם:
1. תצוגה מקדימה של תמונות קטנות
2. כאשר לוחצים על תמונה - היא נפתחת בגדול עם רקע שקוף
3. אפשרות לניווט בין התמונות
4. אנימציות מעבר חלקות
5. כפתור סגירה

טיפים לתרגול אפקטיבי:
1. התחל מאלמנטים פשוטים והתקדם למורכבים
2. השתמש בכלי הפיתוח של הדפדפן לניסוי וטעייה
3. נסה לשנות ערכים קיימים כדי להבין את ההשפעה
4. צור וריאציות על התרגילים הבסיסיים
5. התייחס גם לרספונסיביות (התאמה למסכים שונים)