HTML & CSS • المستوى الرابع • الدرس 2
العودة لفهرس المستوىالمشروع التطبيقي النهائي: بناء صفحة هبوط متكاملة
أهداف المشروع النهائي
- دمج جميع المفاهيم المدروسة بـ HTML5 (الهيكل، الفقرات، العناوين، والروابط).
- تطبيق أدوات التنسيق الحديثة بـ CSS3 (الألوان، Box Model، و Flexbox).
- استخدام CSS Grid لتنفيذ شبكة مشاريع متجاوبة ذكياً عبر
auto-fit. - تطبيق قواعد الاستجابة بـ
@mediaلضمان أداء ورؤية مثالية على الجوال.
دليل اجتياز المشروع النهائي
تهانينا للوصول إلى ختام مسار HTML & CSS! أمامك الآن كود واجهة هبوط شخصية متكاملة. يمكنك تعديل واختبار الشفرة البرمجية ورؤية المخرجات حية على اليسار للتحقق من المظهر النهائي والاستجابة.
html
<!-- هيكل البطاقة الواحدة -->
<div class="card">
<h3>عنوان المشروع</h3>
<p>وصف قصير للمشروع</p>
</div> التطبيق العملي المباشر
تحدي إكمال المشروع النهائي
قم بالتعديل على الكود وإضافة بطاقة مشروع ثالثة داخل قسم.projects-grid تحتوي على:
- عنوان فرعي
<h3>باسم: المشروع الثالث. - فقرة نصية
<p>يكتب فيها: متجر إلكتروني حديث. - اضغط على زر "تشغيل الكود" لمعاينة استجابة وتحديث الصفحة مباشرة!
محرر الأكواد — HTML
14px
جارٍ تهيئة البيئة...
المخرجات — المخرجات
الكونسول (Console)
13px
nahda@runner — html
0 lines
(لا يوجد إخراج)
HTMLLn 86, Col 1UTF-8Spaces: 2
1840 chars