Özet Meydan Okuması

Coddy'nin HTML Journey'sinin Practical Frontend bölümünün bir parçası — ders 11 / 35.

Görev

Kolay

Bir kullanıcı profili için bir HTML sayfası size verilmiştir. Göreviniz, sayfayı tamamen duyarlı (responsive) hale getirmek için mobil öncelikli (mobile-first) tasarım ilkelerini uygulamaktır. Şu talimatları izleyin:

1. Mobil Öncelikli Navigasyon

Daha büyük ekranlarda, navigasyon listesini gösterin ve menü düğmesini gizleyin.

2. Mobil Öncelikli Tipografi

Bir CSS değişkeni --body-font-size: 16px oluşturun ve bunu body öğesine uygulayın. Bu, küçük ekranlar için temel yazı tipi boyutu olacaktır.

3. Mobil Öncelikli Görseller

Mobil ve daha büyük ekranlar için farklı görsel boyutları sağlamak amacıyla <picture> etiketini kullanın.
Daha büyük bir görsele işaret eden srcset ile <source> etiketini kullanın, örneğin: https://upload.wikimedia.org/wikipedia/commons/1/1f/Woman_1.jpg.
Büyük ekranlarda uygulamak için media="(min-width: 768px)" ekleyin.
Profil görselinin ekran genişliğine bağlı olarak düzgün bir şekilde ölçeklendiğinden emin olun.

4. Mobil Öncelikli Formlar

Tüm giriş alanlarının ve gönder düğmesinin genişliğini 100% olarak ayarlayın, böylece tam genişliği kaplarlar ve dokunmaları kolay olur.

Sayfa hem mobil hem de masaüstü ekranlarda temiz, okunabilir ve kullanıcı dostu görünmelidir. Her şeyin dengeli hissedilmesi için boşluk, hizalama ve duyarlı boyutlandırma uygulayın.

Kendin dene

<!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>