fylo dark theme landing page تنزيل - fylo dark theme landing page تنزيل كود المصدر

fylo dark theme landing page

مكونات الطرف الثالث

1.0.0

تنزيل

fylo dark theme landing page - Frontend Mentor

أهلاً! شكرا للتحقق من هذا المشروع!

يعد هذا حلاً لتحدي Frontend Mentor الذي يتكون من إنشاء صفحة مقصودة تبدو قريبة من التصميم المحدد قدر الإمكان. الهدف هو تحسين مهاراتي في تخطيط الويب من خلال بناء مشروع واقعي.

1. جدول المحتويات ✒️

fylo dark theme landing page - Frontend Mentor
- 1. جدول المحتويات ✒️
- 2. نظرة عامة
  - التحدي
  - كيفية تشغيل المشروع:
  - روابط
- 3. عمليتي؟
  - بنيت مع
  - ما تعلمته
  - موارد مفيدة
- 4. المؤلف ؟؟

2. نظرة عامة

التحدي

يجب أن يكون المستخدمون قادرين على:

عرض التصميم الأمثل للموقع اعتمادًا على حجم شاشة أجهزتهم
راجع حالات التمرير لجميع العناصر التفاعلية الموجودة على الصفحة

معاينة التصميم لـ <span class= تحدي الصفحة المقصودة ذات المظهر الداكن لـ fylo" style="max-width: 100%;">

يمكنك الاطلاع على تفاصيل التحدي في صفحة Frontend Mentor.

كيفية تشغيل المشروع:

لقد اخترت استخدام Adalab Starter Kit للعمل في هذا المشروع، الذي تم إنشاؤه باستخدام Node وGulp. لذا، فمن الضروري أولاً تثبيت Node JS لتشغيله.

افتح المحطة في المجلد الجذر للريبو.
قم بتثبيت التبعيات المحلية باستخدام الأمر التالي في المحطة:

npm install

ابدأ تشغيل المشروع باستخدام الأمر التالي الذي سيفتح نافذة متصفح تعرض نسخة حية من الصفحة.

npm start

روابط

عنوان URL المباشر للموقع: https://leireomadina.github.io/fylo-dark-theme-landing-page/
عنوان URL للحل: قريبًا

3. عمليتي؟

بنيت مع

ترميز HTML5 الدلالي
نظام قوالب HTML
خصائص CSS3 المخصصة
فليكس بوكس
شبكة CSS
SASS مع منهجية BEM
بلع
تصميم سريع الاستجابة مع سير العمل على الهاتف المحمول أولاً

ما تعلمته

استخدم @for لإنشاء حلقات في SCSS : في هذه الحالة أردت تحديد البطاقة الثانية والثالثة فقط من قسم الشهادات.

 .card {
  @for $i from 2 through 3 {
    & -#{$i} {
      margin-top : 1.8 rem ;
      @media all and ( min-width : 768 px ) {
        margin-top : 0 ;
      }
    }
  }
}

استخدام ملفات svg وإدارتها: استخدم سمة viewBox لتعديل موضعها وأبعادها، وإضافة عنوان وعلامة desc لتحسين إمكانية الوصول، والتصميم المضمن وCSS، وتخصيص الألوان باستخدام التعبئة أو الحد...
استخدم أدوار ARIA لتحسين إمكانية الوصول إلى الويب : على سبيل المثال، قم بإلقاء نظرة على أدوار قائمة التنقل هذه.

 < nav class =" header-menu " role =" navigation " >
  < ul class =" header-menu__list " role =" list " >
    < li class =" header-menu__list-item " role =" list-item " >
      < a class =" header-menu__link " href =" # " role =" link " >
        Features
      < a >
    </ li >
    ...
  </ ul >
</ nav >

موارد مفيدة

كيفية استخدام @for لإنشاء حلقة Sass: https://www.youtube.com/watch?v=6CbsNFXMYgs. يمكنك أيضًا إلقاء نظرة على وثائق SASS الرسمية.
قائمة أدوار ARIA وحالاتها وخصائصها (MDN): https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
تصميم SVG المضمّن: https://www.youtube.com/watch?v=af4ZQJ14yu8&t=844s
المزيد من الموارد قريبا ..