1.7 עיצוב רספונסיבי תרגול

תרגול עיצוב רספונסיבי

---

תרגיל 1 - הפיכת עמוד דסקטופ לרספונסיבי

קחו את הקוד הבא שעובד רק בדסקטופ, והפכו אותו לרספונסיבי:

<div class="page">
  <header class="header">
    <h1>My Website</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <div class="content">
    <aside class="sidebar">
      <h3>Categories</h3>
      <ul>
        <li>Technology</li>
        <li>Design</li>
        <li>Business</li>
      </ul>
    </aside>
    <main class="main">
      <h2>Welcome</h2>
      <p>This is the main content area with some text.</p>
      <div class="cards">
        <div class="card">Card 1</div>
        <div class="card">Card 2</div>
        <div class="card">Card 3</div>
      </div>
    </main>
  </div>

  <footer class="footer">
    <p>Footer content here</p>
  </footer>
</div>

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background: #2c3e50;
  color: white;
}

.header nav {
  display: flex;
  gap: 30px;
}

.header a {
  color: white;
  text-decoration: none;
}

.content {
  display: flex;
  gap: 30px;
  padding: 40px;
}

.sidebar {
  width: 250px;
  flex-shrink: 0;
  background: #ecf0f1;
  padding: 20px;
}

.main {
  flex: 1;
}

.cards {
  display: flex;
  gap: 20px;
}

.card {
  flex: 1;
  background: #3498db;
  color: white;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
}

.footer {
  background: #2c3e50;
  color: white;
  text-align: center;
  padding: 20px;
}

דרישות:
- הוסיפו את תגית ה-viewport ל-HTML
- בטאבלט (עד 768px): ה-sidebar עובר מעל ה-main, הכרטיסים עוברים ל-2 עמודות
- במובייל (עד 480px): הניווט עובר מאופקי לאנכי, הכרטיסים עוברים לעמודה אחת, ה-padding מצטמצם
- השתמשו בגישת desktop-first (כי ה-CSS הקיים כתוב לדסקטופ)

---

תרגיל 2 - עמוד mobile-first

בנו עמוד מאפס בגישת mobile-first שנראה טוב ב-3 גדלי מסך:

המבנה:
- header עם לוגו וניווט
- hero section עם כותרת גדולה וכפתור
- section עם 4 כרטיסי שירותים
- section עם טקסט + תמונה (זה ליד זה בדסקטופ)
- footer עם 3 עמודות

דרישות:
- מובייל (ברירת מחדל): הכל בעמודה אחת, ניווט אנכי
- טאבלט (מעל 600px): כרטיסים ב-2 עמודות, ניווט אופקי
- דסקטופ (מעל 1024px): כרטיסים ב-4 עמודות, footer ב-3 עמודות, טקסט + תמונה זה ליד זה
- השתמשו ב-min-width בלבד ב-media queries
- הגדירו max-width: 100% על כל התמונות

---

תרגיל 3 - רשת כרטיסים רספונסיבית

בנו רשת של 6 כרטיסים שמתאימה את מספר העמודות לגודל המסך:
- מובייל - עמודה אחת
- טאבלט - 2 עמודות
- דסקטופ - 3 עמודות

דרישות:
- כל כרטיס צריך להכיל: תמונה, כותרת, פסקה קצרה, וכפתור
- הכפתור תמיד צמוד לתחתית הכרטיס (טיפ: השתמשו בפלקסבוקס אנכי עם flex-grow על הפסקה)
- כל הכרטיסים בגובה שווה באותה שורה
- השתמשו ב-CSS Grid עם media queries
- הוסיפו max-width ו-margin: 0 auto על המיכל כדי שלא יהיה רחב מדי בדסקטופ

---

תרגיל 4 - ניווט רספונסיבי

בנו navbar שמתנהג אחרת בכל גודל מסך:

דרישות:
- במובייל: לוגו בלבד, לינקים מוסתרים, כפתור hamburger מוצג
- לחיצה על ה-hamburger מציגה את הלינקים בצורה אנכית (השתמשו בטריק ה-checkbox)
- בדסקטופ (מעל 768px): לוגו בשמאל, לינקים בימין, כפתור hamburger מוסתר
- הניווט צריך להכיל: לוגו, 5 לינקים, וכפתור CTA (call to action)
- הוסיפו רקע כהה לניווט וצבע hover על הלינקים

---

תרגיל 5 - בדיקה ב-DevTools

קחו את אחד התרגילים הקודמים ובדקו אותו ב-DevTools Device Mode:

דרישות:
- פתחו את DevTools (F12) ועברו ל-Device Mode
- בדקו את האתר ב-iPhone SE, iPhone 12, iPad, ו-laptop
- ודאו שאין overflow אופקי באף גודל מסך
- ודאו שכל הטקסט קריא (לא קטן מדי)
- ודאו שכל הכפתורים גדולים מספיק ללחיצה באצבע (לפחות 44px * 44px)
- תקנו בעיות שמוצאים

---

תרגיל 6 - טיפוגרפיה רספונסיבית עם clamp

בנו עמוד עם מערכת טיפוגרפיה רספונסיבית:

דרישות:
- הגדירו CSS variables ב-root עם clamp() לגדלי פונט:
- --heading-1: בין 2rem ל-4rem
- --heading-2: בין 1.5rem ל-2.5rem
- --heading-3: בין 1.2rem ל-1.8rem
- --text-body: בין 1rem ל-1.2rem
- --text-small: בין 0.8rem ל-0.9rem
- השתמשו ב-clamp() גם ל-padding ול-gap
- בנו עמוד עם כותרת ראשית, כותרת משנית, פסקאות, וטקסט קטן
- שנו את גודל הדפדפן וודאו שהגדלים משתנים בצורה חלקה
- אין להשתמש באף media query בתרגיל הזה - רק clamp()