الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

مشروع ODIN - حل النموذج الاشتراك

هذا حل للمشروع: نموذج التسجيل لمشروع ODIN. يوفر مشروع ODIN منهج ترميز مجاني مفتوح المصدر يمكن تناوله بالكامل عبر الإنترنت.

المشروع: الحاسبة هي واحدة من مشروعين في دورة HTML و CSS الوسيطة. يوفر فرصة لممارسة المحتوى الذي تم تغطيته في أقسام الدورة التدريبية مفاهيم HTML الوسيطة ، ومفاهيم CSS الوسيطة ، والأشكال .

جدول المحتويات

  • ملخص
    • لقطة شاشة
    • الروابط
  • عملي
    • بنيت مع
    • ما تعلمته
    • استمرار التطور
    • موارد مفيدة
  • مؤلف
  • شكر وتقدير

ملخص

لقطة شاشة

لقطة شاشة للمشروع: نموذج التسجيل

الروابط

  • مستودع جيثب
  • موقع مباشر

عملي

بناء مع

  • علامة HTML5 الدلالية
  • خصائص CSS المخصصة
  • CSS Flexbox

ما تعلمته

ثلاثة أشياء في هذا الحل لم أستخدمها في المشاريع من قبل:

  • أنواع الإدخال HTML5
  • أشكال التصميم
  • نظام خط المكدس

الميزات الأخرى التي تم تغطيتها لأقسام الدورة التدريبية مفاهيم HTML الوسيطة ، ومفاهيم CSS الوسيطة ، والأشكال التي استخدمتها في حلي هي:

  • إعادة تعيين CSS
  • الوحدات النسبية
  • الخطوط المستضافة ذاتيا
  • أنماط النص
  • صورة الخلفية
  • مربع الظل
  • الفئات الزائفة
  • خصائص مخصصة

استمرار التطور

بالنسبة لحلتي ، استخدمت فقط ميزات HTML و CSS التي تم تغطيتها في منهج مسار التعلم JavaScript الكامل حتى هذا المشروع.

تتم تغطية شبكة CSS في القسم التالي بعد هذا المشروع. سيكون التصميم في ملف التصميم لهذا المشروع مرشحًا جيدًا للتخطيط الأول للتصميم وشبكة CSS.

لا يتم تغطية التصميم المستجيب إلا بعد وقت طويل في المنهج. لقد جعلت الحل الخاص بي مستجيبًا قدر الإمكان مع الأدوات التي كانت متوفرة ، باستخدام CSS Flexbox ولكن لا توجد استعلامات الوسائط.

تتم تغطية إمكانية الوصول إلى الويب أيضًا في وقت لاحق في المناهج الدراسية. لقد استخدمت ما تعلمته عن إمكانية الوصول أثناء العمل على تحديات معلمه في المقدمة.

التحقق من صحة أن حقول كلمة المرور تتطابق مع بعضها البعض يتطلب javaScript. يتم تغطية استخدام JavaScript للتحقق من صحة النموذج في درس مستقبلي. يستخدم الحل الخاص بي فقط التحقق من صحة موقع العميل لعنوان البريد الإلكتروني. لا يحتوي على أي حقول نماذج مطلوبة حيث لم يتم الإشارة إلى أي منها في ملف التصميم.

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

موارد مفيدة

  • ستعمل مكدسات الخطوط هذه على تحسين أداء موقعك بواسطة Kevin Powell - يقدم هذا الفيديو مقدمة جيدة إلى مكدس Font System UI.

مؤلف

تجدني على الإنترنت:

  • Mastodon - sabineemden

شكر وتقدير

بالإضافة إلى مكدس خط النظام ، يستخدم هذا الحل خط النورس Bold by Joël Carrouché. الخط مجاني للاستخدام الشخصي والتجاري ويتضمن الأبجدية الكاملة مع دعم Unicode.

يستخدم هذا الحل أيضًا إعادة تعيين CSS من Josh Comeau ونظام الألوان بالأبيض والأسود تقريبًا.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل