login form

لا توجد أخطاء كثيرة لكن فيما يخص وضع:

id="center"

يجب وضعه على العنصر الخارجي <div> الذي يحتوي على عناصر النموذج بأكملها، وليس على العنصر الداخلي وهذا سيتيح تطبيق قواعد CSS بشكل صحيح كما يمكن إضافة action للنموذج على عنصر <form> لتحديد وجهة إرسال بيانات النموذج على سبيل المثال:

<form action="/login" method="POST">.

وينصح أيضا باستخدام سمة placeholder بدلا من value لتقديم نص تعبئة افتراضي في حقول الإدخال على سبيل المثال:

<input type="username" id="username" placeholder="Type your user name">
<input type="password" id="password" placeholder="Type your password">

في حال كان سؤالك متعلقا بإحدى الدروس في إحدى الدورات أرجو وضع تعليقك في المرات القادمة في أسفل الدرس في صندوق التعليقات المخصص لذلك.

بالإضافة إلى النصائح التي وضحها لك المدرب عبدالوهاب توجد بعض النصائح الأخرى .

لاحظ عندما تقوم بالكتابة في الحقول تظهر حولها ال outline وهي تعطي منظر غير جيد حيث يظهر الحقل صغيرا بالنسبة للعنصر الذي بداخله وأسهل طريقة لحل تلك المشكلة هي إضافة الخاصية outline لذلك بعد سطر 71 مباشرة في ملف style.css إضافة التالي :

outline: 0;

وأيضا بالنسبة للزر input يفضل جعله كزر button وليس حقل input و لكن لا مشكلة يمكنك إضافة خاصية cursor لتغير المؤشر عن الوقوف على الزر لذلك بعد سطر 92 مباشرة في ملف style.css يرجى إضافة السطر التالي :

cursor: pointer;

وأيضا يفضل وضع تنسيقات لل hover حتي يظهر تأثير على الزر عند محاولة الوقوف عليه .

وأيضا بالنسبة للأيقونات يفضل وضعها بداخل عنصر a حتي تشير إلى مكان الرابط كالتالي في ملف index.html :

<div class="socialmedia">
  <a href="#"><i class="fa-brands fa-facebook"></i></a>
  <a href="#"><i class="fa-brands fa-instagram"></i></a>
  <a href="#"><i class="fa-brands fa-google"></i></a>
</div>