إن بناء المشاريع مهم جداً لتعلم كيفية البرمجة. عندما تقوم بإنشاء مشروع، توسع معرض أعمالك وتتعلم كيفية تطبيق مهاراتك في حالات جديدة。

لقد قمنا للتو بنشر دورة مدتها ساعتين على قناة freeCodeCamp.org الإسبانية على YouTube ستوجيهك خطوة بخطوة خلال بناء ثلاث مشاريع بإستخدام HTML, CSS, و JavaScript. ستمارس مهاراتك ببناء شريط تنقل متجاوب مع قوائم منسدلة، شريط تمرير، و صفحة وصول بنموذج تخصيصي。

إذا كان لديك أصدقاء يتحدثون الإسبانية، فإنك محظوظ لتشاركهم النسخة الإسبانية من هذه المقالة。

يدرّس هذه الدورة جوردان ألكساندر كروز García. إنه مطور ويب يحبّ شراكة معرفته وتعليم الآخرين عن عالم CSS الرائع。

💡 تلميح: لاحظ أن الدورة تركز على HTML و CSS ولكنها تتطلب معرفة أساسية في JavaScript لتطبيق التفاعلية。

HTML, CSS, و JavaScript

HTML تمثل HyperText Markup Language و CSS تمثل Cascading Style Sheets. بينما يوفر HTML الهيكل والمحتوى للموقع، فإن CSS تحدد كيفية عرض المحتوى. يتحكم في الجوانب البصرية للموقع، مثل الخطوط، الألوان، التخطيطات، التباعد، والرسوم المتحركة。

باستعمال CSS، يمكنك بسهولة خلق أنماط وتصميمات مختلفة للأحجام المختلفة للشاشات، مما يجعل موقعك يبدو رائعًا على الأجهزة الحاسوبية، الأجهزة المحمولة، والهواتف المحمولة.

💡 نصيحة: المواقع التي تتكيف مع أحجام الشاشات المختلفة تسمى “مواقع متكيفة”.

نكتشف أننا نكتب CSS عادةً في ملف خارجي ندعوه بـ “معالجة الأسلوب”. ثم نربط هذه المعالجة بالملف الHTML، تطبيق جميع الأسلوبات على العناصر الHTML المتماسكة وفقاً للمحتويات المحددة في الCSS والخصائص.

فإن فصل المحتويات من التصميم مفيد للغاية. إنه يولد بنية مرنة أكثر للمشروع وعملية تصدير أكثر فعالية لأن المتصفحات تقوم بتصدير البنية بسرعة أكبر، بينما تحمل تحميل الأسلوبات الCSS في الخلفية.

بشكل بسيط، يعتبر CSS أداة لا تعجز لخلق المواقع الجميلة والبصرية والمساعدة على المستخدمين اليوم.

JavaScript يضيف التفاعلية إلى الموقع. يحول عناصرًا بسيطةً إلى عناصر تفاعلية لخلق تجارب مع المستخدمين الجذابية.

مشاريع HTML، CSS و JavaScript باللغة الإسبانية

رائع. وبعدما تعرفت أكثر عن HTML، CSS و JavaScript، دعونا نرى المشاريع التي ستبنيها خلال المقرر.

مشروع 1: الشريط التنقلي

سوف تبدأ ببناء شريط تنقلي مع قوائم تنقلية. سيكون هذا الشريط التنقلي متكيفًا، لذلك سي

💡 نصيحة: ستظهر دائمًا الخيارات الرئيسية. عندما ينقر المستخدم على “معلوماتنا” أو “المشاريع”, سيظهر قائمة تنقلية بخيارات إضافية.

نسخة الحاسوب

يمكنك هنا أن ترى نسخة الحاسوب.

نسخة الجهاز المحمول

هذه هي نسخة الجهاز المحمول التي ستراها في الأجهزة الصغيرة.

💡 نصيحة: تقنية إخفاء وتبديل القائمة التوجيهية تستخدم بشكل كبير لتنظيم المساحة للمحتويات بقدر الإمكان.

مشروع 2: المسواك

من ثم, ستقوم ببناء مسواك مع ثلاث مواقع ستتغير عندما ينقر المستخدم على الأسهم اليسرى أو الأيمن. سيكون لكل موقع عنوان، وفقرة قصيرة، وصورة دائرية.

💡نصيحة: المسواك مفيدة لمشاركة معلومات المستخدمين، الأقوال، والمراجعات.

مشروع 3: الصفحة الأولية

في النهاية، ستقوم ببناء صفحة الهبوط خطوة بخطوة بواسطة الشبكة CSS.

عندما ينقر المستخدم على زر “انضم إلينا!”, سيظهر نافذة مخصصة. ستتمكن من تنفيذ هذه النافذة بواسطة HTML، CSS و JavaScript خطوة بخطوة.

إذا كنت جاهزًا للبدء في ممارسة مهاراتك في HTML، CSS و JavaScript، تفقد الدورة على قناة YouTube freeCodeCamp.org الأسبانية:

✍️ الدورة أنشأته جوردان ألكسندر كروز