المستوى: مبتدئ · وقت التعلم المتوقع: 17 دقيقة
باختصار: في درس مشروع بطاقة شخصية ستتعلم استخدام CSS في مثال صغير يمكن تجربته بنفسك. CSS لغة تنسيق تتحكم في مظهر عناصر HTML، ولا تنشئ المحتوى بنفسها.
ماذا سنتعلم؟
- مشروع بطاقة شخصية
- قراءة المثال والتنبؤ بالنتيجة
- تغيير جزء من المثال وحفظ النتيجة
قبل التجربة
احفظ المثال داخل صفحة HTML بامتداد .html وافتحها في المتصفح، ثم غيّر كود CSS داخل العنصر style.
مقدمة سهلة
تخيّل أنك تشرح للحاسوب ما تريد أن يظهر أو يحدث، خطوة بعد خطوة. في هذا الدرس سنستخدم مشروع بطاقة شخصية لبناء جزء صغير يمكن فحصه فورًا. لا تحتاج إلى خبرة سابقة؛ نفّذ المثال كما هو أولًا.
شرح الفكرة
اقرأ المثال من بدايته. ابحث عن الكلمات والعناصر المستخدمة في مشروع بطاقة شخصية، ثم لاحظ ترتيبها وعلاقة كل جزء بما يسبقه. لا تغيّر أكثر من جزء واحد في المحاولة الأولى، حتى تستطيع معرفة سبب تغيّر الناتج. CSS لغة تنسيق تتحكم في مظهر عناصر HTML، ولا تنشئ المحتوى بنفسها.
مثال عملي
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>.card{max-width:340px;margin:24px auto;padding:20px;border:1px solid #ddd;border-radius:14px;font-family:sans-serif}.card h1{color:#1d4ed8}</style>
<article class="card"><h1>ليلى</h1><p>أتعلم تصميم الويب</p></article>النتيجة المتوقعة
ستظهر عناصر المثال في صفحة المتصفح؛ قارن ترتيبها ونصها قبل وبعد تغييرك.
تمرين للتطبيق
أضف رابطًا وغيّر لون العنوان والمسافة الداخلية.
تحقق من فهمك
سؤال: ما الجزء الذي يجب تعديله لتنفيذ التمرين؟ حدد السطر أولًا ثم جرب، وقارن النتيجة مع المثال الأصلي.
الخلاصة
تعلمت مشروع بطاقة شخصية، وطبّقت خطوة بنفسك. بعد التأكد من النتيجة انتقل إلى الدرس التالي.
