אתגר סיכום

חלק מהיחידה פיתוח Frontend מעשי במסלול ה-HTML של Coddy. שיעור 11 מתוך 35.

אתגר

קל

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

1. ניווט בגישת מובייל תחילה

במסכים גדולים יותר, הצג את רשימת הניווט והסתר את כפתור התפריט.

2. טיפוגרפיה בגישת מובייל תחילה

צור משתנה CSS בשם --body-font-size: 16px והחל אותו על גוף הדף. זה יהיה גודל הגופן הבסיסי במסכים קטנים.

3. תמונות בגישת מובייל תחילה

השתמש בתג <picture> כדי לספק גדלי תמונה שונים למכשירים ניידים ולמסכים גדולים יותר.
השתמש בתג <source> עם srcset שמצביע על תמונה גדולה יותר, לדוגמה: https://upload.wikimedia.org/wikipedia/commons/1/1f/Woman_1.jpg.
הוסף media="(min-width: 768px)" כדי להחיל אותה במסכים גדולים יותר.
ודא שתמונת הפרופיל מותאמת כראוי בהתאם לרוחב המסך.

4. טפסים בגישת מובייל תחילה

הגדר את הרוחב של כל שדות הקלט ושל כפתור השליחה ל-100%, כדי שימלאו את כל הרוחב ויהיה קל להקיש עליהם.

הדף צריך להיות נקי, קריא וידידותי למשתמש גם במסכים ניידים וגם במסכי מחשב. השתמש בריווח, ביישור ובגדלים רספונסיביים כך שהכול ייראה מאוזן.

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
  <title>Mobile-First Profile</title>
  <style>
    :root {
      --primary-font: Arial, sans-serif;
      --heading-font: 'Helvetica', sans-serif;
      --h1-size: 2rem;
      --h2-size: 1.5rem;
      --primary-color: #4a90e2;
      --secondary-color: #f0f4f8;
    }

    body {
      font-family: var(--primary-font);
      margin: 0;
      padding: 20px;
      background-color: var(--secondary-color);
    }

    h1 {
      font-family: var(--heading-font);
      font-size: var(--h1-size);
      color: var(--primary-color);
      margin-bottom: 5px;
    }

    h2 {
      font-family: var(--heading-font);
      font-size: var(--h2-size);
      color: #333;
      margin-top: 0;
    }

    nav {
      margin-bottom: 20px;
    }

    .menu-button {
      display: block;
      padding: 10px 15px;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin-bottom: 10px;
    }

    .nav-list {
      display: none;
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .nav-list li {
      margin-bottom: 10px;
    }

    .nav-list li a {
      text-decoration: none;
      color: var(--primary-color);
    }

    .profile-img {
      width: 100%;
      max-width: 250px;
      border-radius: 50%;
      margin-bottom: 20px;
      display: block;
    }

    section p {
      line-height: 1.6;
      margin-bottom: 20px;
    }
    
    form {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    input, textarea, button {
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 1rem;
    }

    button {
      background-color: var(--primary-color);
      color: white;
      cursor: pointer;
    }

    /* Media queries for larger screens */
    @media (min-width: 768px) {
      .nav-list {
        gap: 20px;
      }

      .nav-list li {
        margin-bottom: 0;
      }

      form {
        max-width: 500px;
      }
    }
  </style>
</head>
<body>
  <nav>
    <button class="menu-button">Menu</button>
    <ul class="nav-list">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <header>
    <h1>Jane Doe</h1>
    <h2>Web Developer & Designer</h2>
  </header>

  <section>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Woman_1.jpg/250px-Woman_1.jpg" alt="Profile Image" class="profile-img">
  </section>

  <section>
    <p>Welcome to my profile! I specialize in creating mobile-first, responsive websites that look great on any device. My focus is on performance, accessibility, and clean design.</p>
  </section>

  <section>
    <form>
      <input type="text" placeholder="Your Name">
      <input type="email" placeholder="Your Email">
      <textarea placeholder="Your Message"></textarea>
      <button type="submit">Send Message</button>
    </form>
  </section>
</body>
</html>