بورتفوليو HTML Tailwind في يوم واحد مشروح ببساطة (مع مخططات وكود حقيقي)
بورتفوليو HTML Tailwind في يوم واحد: الأساسيات في مقال واحد — كود حقيقي، مخططات وخطوات ملموسة، مقتطفات من دورة مكونة من 46 درسًا.
دليل مباشر وموجز: Portfolio HTML Tailwind 1jour مفكك مع مخططات وأمثلة عملية وأوامر مجربة. كل المحتوى مستمد من دورة منظمة تضم 11 فصلاً — وإليك أفضل ما فيها.
- المقدمة وإعداد Express
- أساسيات HTML5 لموقع Portfolio
- أساسيات Tailwind CSS
- قسم Hero والتنقل
- أقسام About والمهارات والمشاريع
تخصيص tailwind.config.js – الألوان والخطوط
tailwind.config.js: إضافة ألوان علامتك التجارية الخاصة وخطوطك وتوسيع اللوحة دون تعطيل الأدوات الموجودة.الأهداف التعليمية
- فهم الفرق بين
themeوtheme.extend - إضافة لون علامة تجارية مخصص
- تعريف تدرج ألوان (من 50 إلى 900)
- تسجيل خط مخصص في
fontFamily - استخدام هذه القيم المخصصة في أصنافك
theme مقابل theme.extend
جوهر تخصيص Tailwind هو كائن theme. المفتاح الحرج هو الاختيار الصحيح بين الكتابة مباشرة داخل theme (الذي يستبدل كل شيء) أو داخل theme.extend (الذي يضيف دون كسر أي شيء).
| النهج | التأثير | متى تستخدمه |
|---|---|---|
theme: {...} | يستبدل القيمة الافتراضية بالكامل | نادرًا، لنظام تصميم صارم جدًا |
theme.extend: {...} | يضيف إلى القيم الافتراضية | دائمًا تقريبًا |
theme.colors بدون extend، ستفقد كل ألوان Tailwind الافتراضية (red، blue، gray...). استخدم extend دائمًا تقريبًا.إضافة لون علامة تجارية
لنفترض أن علامتك التجارية تستخدم بنفسجيًا محددًا. نضيفه داخل extend.colors.
تدرج كامل
الكائن 50–900 يعطي bg-marque-50 حتى bg-marque-900.
تسجيل خط مخصص
لاستخدام خط مثل Inter أو Poppins، نضيفه داخل fontFamily. يصبح الاسم أداة font-....
تصفية المشاريع باستخدام data-attributes
data-* وسكريبت JavaScript صغير من بضعة أسطر.الأهداف التعليمية
- فهم ما هو سمة
data-*واستخداماتها - تصنيف كل بطاقة مشروع عبر
data-categorie - إنشاء شريط أزرار التصفية
- كتابة JavaScript الذي يظهر/يخفي البطاقات
- إدارة حالة الزر النشط المحدد
ما هو data-attribute؟
data-attribute هو سمة HTML مخصصة تبدأ بـ data-. تستخدم لتخزين معلومات عن عنصر دون التأثير على عرضه. على سبيل المثال، data-categorie="web" يخبر JavaScript أن هذه البطاقة تنتمي إلى فئة "web". إنها طريقة نظيفة ومعيارية لربط بياناتك بعناصرك.
| السمة | المثال | الوصول في JS |
|---|---|---|
data-categorie | data-categorie="web" | el.dataset.categorie |
data-filtre | data-filtre="mobile" | el.dataset.filtre |
data-annee | data-annee="2026" | el.dataset.annee |
data-categorie عبر element.dataset.categorie. يختفي البادئة data- ويتحول الشرطة إلى camelCase إذا كان الاسم مركبًا (data-ma-cle → dataset.maCle).الخطوة 1: تصنيف البطاقات
نضيف data-categorie على كل بطاقة مشروع تم إنشاؤها في الوحدة السابقة.
hidden بمجموعة أصناف opacity-0 scale-95 + transition، وتحكم في الظهور بتأخير صغير. التأثير أكثر أناقة من الاختفاء المفاجئ.<script> مباشرة قبل وسم </body> أو استخدم السمة defer. وإلا سينفذ السكريبت قبل وجود الأزرار ويعيد querySelectorAll قائمة فارغة.الصور المتجاوبة وعنصر picture
srcset ووسم <picture>، لموقع portfolio سريع لا يجبر الهاتف على تحميل صورة 4K.الأهداف التعليمية
- فهم لماذا صورة واحدة لكل الشاشات مشكلة
- استخدام
srcsetوsizesلدقة متعددة - استخدام
<picture>لتوجيه الفن - الحفاظ على نسبة ثابتة بـ Tailwind (
aspect-) - تجنب إزاحة التخطيط (CLS) باستخدام
widthوheight
مشكلة الصورة الوحيدة
إذا قدمت نفس الصورة بعرض 2000 بكسل للجميع، فسيحمل الهاتف ميغابايتات غير ضرورية لعرضها في 375 بكسل. هذا بطيء، ويكلف المستخدم بيانات، ويضر بدرجة Lighthouse.
الحل العصري: تقديم عدة نسخ من نفس الصورة وترك المتصفح يختار الأنسب لحجم العرض الفعلي وكثافة الشاشة.
srcset و sizes: دقة متعددة
تسرد السمة srcset عدة ملفات مع عرضها الجوهري (بـ w). وتشير السمة sizes إلى عرض العرض المتوقع حسب الشاشة.
picture
صور مختلفة حسب استعلام media. لتوجيه الفن (الاقتصاص، الاتجاه).
الحفاظ على نسبة نظيفة بـ Tailwind
لتجنب تشوه صورك، يوفر Tailwind الأدوات aspect- وobject-cover.
تغطي هذه المقالة المقتطفات الأكثر فائدة — الدورة الكاملة Portfolio HTML Tailwind 1jour (11 فصلاً، 46 درسًا، تمارين مصححة ومشروع نهائي) تأخذك إلى النهاية.
./acceder-au-cours-complet cours gratuit : Vibe Codingالأسئلة الشائعة
كم من الوقت يستغرق تعلم Portfolio HTML Tailwind 1jour؟
هل هناك متطلبات سابقة؟
من أين أبدأ عمليًا؟
📬 هل تريد تلقي هذا النوع من الأدلة كل أسبوع؟ اشترك مجانًا — كود حقيقي، بدون كلام زائد.