1.9 טכניקות מתקדמות תרגול

תרגול טכניקות מתקדמות¶

תרגיל 1 - מערכת צבעים עם משתני CSS¶

צרו מערכת צבעים שלמה עם CSS variables:

דרישות:
- הגדירו ב-:root לפחות את המשתנים הבאים:
- צבע ראשי (primary), משני (secondary), ו-accent
- צבעי טקסט (ראשי, משני, על רקע כהה)
- צבעי רקע (ראשי, משני)
- צבעי גבולות
- ריווחים (xs, sm, md, lg, xl)
- border-radius (sm, md, lg)
- צללים (sm, md, lg)
- בנו עמוד שמדגים את המערכת: כותרות, פסקאות, כפתורים (primary, secondary, danger), כרטיסים, שדות טופס
- כל אלמנט צריך להשתמש במשתנים בלבד - אין ערכי צבע/ריווח ישירים

תרגיל 2 - מצב כהה/בהיר - Dark/Light Mode¶

הוסיפו dark mode למערכת הצבעים מתרגיל 1:

דרישות:
- הגדירו סט משתנים ל-dark mode תחת [data-theme="dark"]
- ודאו שכל צבעי הרקע, הטקסט, הגבולות והצללים מותאמים
- הוסיפו כפתור toggle ב-HTML שמחליף בין data-theme="light" ל-data-theme="dark"
- ברגע הזה אי אפשר לגרום לכפתור לעבוד בלי JavaScript, אז פשוט שנו ידנית את ה-attribute ב-HTML כדי לבדוק
- הוסיפו גם תמיכה ב-prefers-color-scheme: dark כברירת מחדל למשתמשים עם הגדרת מערכת כהה
- ודאו שהמעבר בין המצבים חלק - הוסיפו transition: background 0.3s, color 0.3s על body

תרגיל 3 - checkboxes מותאמים אישית עם before/after¶

צרו checkboxes בעיצוב מותאם אישית:

דרישות:
- הסתירו את ה-checkbox המקורי (appearance: none או opacity: 0)
- צרו מראה חדש עם ::before על ה-label:
- ריבוע עם border
- כשה-checkbox מסומן, הריבוע מתמלא בצבע
- הוסיפו סימן V (checkmark) עם ::after כשנבחר
- הוסיפו transition חלק על השינוי
- צרו לפחות 3 checkboxes עם labels
- ודאו שלחיצה על ה-label מסמנת את ה-checkbox

טיפ:

<label class="custom-checkbox">
  <input type="checkbox">
  <span class="checkmark"></span>
  Option 1
</label>

תרגיל 4 - tooltips עם פסאודו-אלמנטים¶

צרו מערכת tooltips שעובדת עם CSS בלבד:

דרישות:
- כל אלמנט עם class "tooltip" ו-attribute "data-tooltip" יציג tooltip ב-hover
- ה-tooltip מופיע מעל האלמנט עם חץ קטן שמצביע כלפי מטה
- אנימציית הופעה חלקה (opacity + translateY)
- צרו גם tooltips בכיוונים שונים: למעלה, למטה, שמאלה, ימינה
- השתמשו ב-modifiers: tooltip--top, tooltip--bottom, tooltip--left, tooltip--right
- ה-tooltip צריך להכיל את הטקסט מ-data-tooltip (שימוש ב-attr())

תרגיל 5 - שימוש ב-has לעיצוב הורה¶

צרו דוגמאות לשימוש ב-:has():

דרישות:
- טופס שבו ה-form-group מקבל border אדום כשהinput בתוכו invalid
- כרטיס שנראה שונה אם יש בו תמונה לעומת כרטיס בלי תמונה
- רשימת פריטים - כשpriט מסומן (checkbox checked), כל השורה מקבלת רקע ירוק
- שדה חיפוש - כשהinput ריק, הכפתור disabled (opacity נמוך). כשהinput לא ריק, הכפתור פעיל
- טיפ: השתמשו ב-:has(input:placeholder-shown) לזיהוי שדה "ריק"

תרגיל 6 - שיפוץ CSS למתודולוגיית BEM¶

קחו את ה-CSS הבא שכתוב בצורה רגילה, ושכתבו אותו במתודולוגיית BEM:

<nav class="main-nav">
  <div class="logo">MyBrand</div>
  <ul class="links">
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <button class="cta">Sign Up</button>
</nav>

<div class="hero">
  <h1>Welcome</h1>
  <p>This is the hero section.</p>
  <button class="large-btn">Get Started</button>
</div>

<div class="features">
  <div class="feature-card">
    <h3>Feature 1</h3>
    <p>Description</p>
  </div>
  <div class="feature-card highlighted">
    <h3>Feature 2</h3>
    <p>Description</p>
  </div>
  <div class="feature-card">
    <h3>Feature 3</h3>
    <p>Description</p>
  </div>
</div>

דרישות:
- שנו את שמות ה-classes בHTML ובCSS לפי BEM
- כל רכיב ראשי (nav, hero, features) הוא block
- חלקים פנימיים הם elements (עם __)
- וריאציות הן modifiers (עם --)
- כתבו את ה-CSS המלא בסגנון BEM
- כתבו גם גרסה עם CSS nesting

תרגיל 7 - ערכים רספונסיביים עם calc ו-clamp¶

צרו עמוד שמשתמש ב-calc ו-clamp ליצירת ערכים רספונסיביים:

דרישות:
- layout עם sidebar ו-main: רוחב ה-sidebar קבוע (250px), ורוחב ה-main מחושב עם calc(100% - 250px - gap)
- כותרות עם clamp() - גודל משתנה בצורה חלקה
- padding שמשתנה לפי רוחב המסך עם clamp()
- container עם width: min(90%, 1200px) ו-margin: 0 auto
- גובה hero section עם max(50vh, 400px) - לפחות 400px או חצי מהמסך
- רווחים בין סקשנים עם clamp(30px, 5vw, 80px)
- אין להשתמש באף media query - הכל עם פונקציות CSS