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

معلم الواجهة الواجهة - حل صفحة الوصفة

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

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

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

ملخص

التحدي

كان موجز هذا المشروع هو إنشاء صفحة الوصفة والحصول عليها على مقربة من التصميم قدر الإمكان ، بدءًا من الأصول التالية:

  • ملفات تصميم JPEG لتخطيطات الأجهزة المحمولة وسطح المكتب
  • دليل النمط للخطوط والألوان ، إلخ.
  • أصول الصورة الأمثل
  • ملفات الخط المتغيرة والثابتة
  • ملف HTML مع محتويات مكتوبة مسبقًا

لقطة شاشة

الروابط

  • حل المعلم الواجهة
  • مستودع جيثب
  • موقع مباشر

عملي

بنيت مع

  • علامة HTML5 الدلالية
  • خصائص CSS المخصصة
  • سير العمل عبر الهاتف المحمول

ما تعلمته

يتضمن هذا الحل ثلاثة أشياء جديدة بالنسبة لي:

  • علامات قائمة التصميم
  • طاولات HTML
  • باستخدام استفسارات الوسائط

تحتوي صفحة الوصفة على قائمتين غير مرتبة مع وقت التحضير والمكونات ، على التوالي ، وقائمة مرتبة مع التعليمات.

For the ordered list, I styled the counters using the ::marker pseudo-element: 

. instructions li :: marker {
  font-weight : 700 ;
  color : var ( --brown-800 );
}

كان تصميم علامات القائمة للقوائم غير المرتبة أكثر تحديًا. في ملف تصميم JPEG لتخطيط الهاتف المحمول ، لا تجلس العلامات بجوار السطر الأول من النص ولكن يتمحورها رأسياً إذا كان المحتوى النصي لعنصر القائمة يلتف على سطرين. لقد استخدمت علامات مخصصة مع ::before العناصر الزائفة لوضع العلامات مع Flexbox: 

. unordered {
  list-style : none;
  padding-left : 0 ;
}

. unordered li {
  display : flex;
  align-items : center;
  gap : 1.75 rem ;
  padding-left : 0.25 rem ;
}

. unordered li :: before {
  content : "•" ;
  font-weight : 700 ;
}

For better accessibility, I used role="list" on the <ul> elements in the HTML. Without it, list-style: none would causes the Safari browser to no longer recognize the lists in the accessibility tree, and screen reader would no longer announce information such as the number of items.

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

أحتاج إلى تعلم تحسين الصورة! حاليًا ، فإن أكبر ملف في هذا المشروع هو لقطة الشاشة التي التقطتها لهذا ReadMe. لقد تعلمت كيفية تحسين ملفات الخطوط. الآن يكون حجم ملف لقطة الشاشة أكبر من حجم جميع ملفات الخطوط مجتمعة.

موارد مفيدة

  • تصميم القائمة الإبداعية من قبل Michelle Barker for Web.de - ساعدتني هذه المقالة على معرفة كيفية تصميم علامات القائمة لكل من القوائم المرتبة وغير المرتبة.
  • طاولات التصميم على MDN - هذه المقالة عبارة عن تجديد جيد لتقنيات تصميم الجدول الأساسية.

مؤلف

  • معلم الواجهة - Sabineemden
  • Mastodon - sabineemden

شكر وتقدير

يستخدم هذا المشروع إعادة تعيين Josh Comeau's CSS.

أسر الخط المستخدمة في هذا المشروع هي شباب وزي. الخطوط مرخصة بموجب ترخيص الخط المفتوح.

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