تعلم CSS: دورة برمجة — تطبيق لممارسة برمجة CSS مع محرر HTML وCSS مباشر على هاتفك

هناك ثلاثة أسباب لمعظم مشكلات التخطيط لدى المبتدئين. نموذج الصندوق: فالحشو والحدود يُضافان افتراضيًا إلى العرض المحدد للعنصر، لذلك ينتهي الصندوق أعرض من الرقم الذي كتبته. والخصوصية: إذ تتغلب قاعدة أكثر خصوصية في مكان آخر على قاعدتك من دون أن تلاحظ. وأداة التخطيط الخاطئة: محاولة إنشاء صفحة ثنائية الأبعاد باستخدام Flexbox، الذي صُمم لصف واحد. ترتّب تعلم CSS: دورة برمجة دوراتها بحيث تُفهم هذه الأمور الثلاثة بهذا الترتيب، بدلًا من اكتشافها بالتجربة والخطأ.

تحتاج إلى القليل فقط، ويمكنك اكتسابه بالتوازي مع الدروس بدلًا من إنهائه أولًا. يصف CSS طريقة عرض عناصر HTML، لذا يكفي أن تعرف أن الصفحة تتكوّن من عناصر — مثل العناوين والفقرات والقوائم والصور — لتبدأ بأساس مناسب. يعرض المحرر المباشر في التطبيق HTML وCSS معًا، لذلك تصبح الصلة بينهما واضحة منذ الدرس الأول.

يرتّب Flexbox العناصر على سطر واحد — مثل صف من الأزرار أو شريط تنقّل — ويوزّع المساحة المتبقية على ذلك المحور الواحد. أما Grid فيحدّد الصفوف والأعمدة في الوقت نفسه، فتضع العناصر ضمن شبكة ثنائية الأبعاد فعلية بدلًا من دفعها باستخدام الهوامش. عادةً ما يكون تخطيط الصفحة على مستوى الصفحة باستخدام Grid، بينما يكون صف واحد من عناصر التحكم داخلها باستخدام Flexbox، وتعلّمك الدورة كليهما قبل أن تترك لك مهمة تحديد الخيار المناسب.

يعالج CSS القواعد المتعارضة بالخصوصية أولًا، ثم بترتيب ظهورها في المصدر. إذ يتغلب محدِّد المعرّف على محدِّد الصنف، ويتغلب محدِّد الصنف على محدِّد العنصر العادي، بغض النظر عن أيٍّ منها يظهر لاحقًا في ورقة الأنماط. ولهذا قد تخسر قاعدة تبدو صحيحة أمام قاعدة نسيتها في مكان آخر — وقد وُجدت دورة الخصوصية والتسلسل الهرمي في التطبيق تحديدًا لجعل هذا الترتيب متوقعًا بدلًا من أن يكون غامضًا.

نعم، ما زال تعلّمه مباشرةً يستحق العناء. فأطر الأدوات المساعدة مثل Tailwind هي طبقة مبنية على مفاهيم CSS، وليست بديلًا عنها — وعندما لا ينفّذ صنف أداة مساعدة ما تتوقعه، فإن فهم نموذج الصندوق والخصوصية وأنظمة التخطيط الكامنة هو ما يساعدك على تجاوز المشكلة. كما أنه من أسرع المهارات التي يمكنك رؤية نتائجها، إذ يظهر كل تغيير على الصفحة فورًا.

الانتظام أهم من إجمالي عدد الساعات. عند متابعة دروس يومية قصيرة، يستطيع معظم المبتدئين التعامل بثقة مع المحدِّدات والمسافات والطباعة وتخطيط Flexbox أو Grid الأساسي خلال بضعة أسابيع، وقبل الوصول بوقت طويل إلى الجوانب الأصعب مثل حالات الخصوصية الحدّية أو استعلامات الحاويات. وتتيح مشاريع التطبيق الموجّهة وعددها 20 مشروعًا التدرّب على هذه المرحلة تحديدًا، صفحة حقيقية واحدة في كل مرة.

التطبيق مجاني للتنزيل من App Store وGoogle Play. الدورة الأولى، والمشروع الموجّه الأول، ومهمتا البحث عن الأخطاء، والمحرر المباشر مجانية، مع حصة يومية من AI Mentor. يفتح Pro جميع الدورات، والمشاريع العشرين والمهام العشرين، واختبار الشهادة، والاستخدام غير المحدود لـAI Mentor، كما يزيل الإعلانات.

تتوفر تعلم CSS: دورة برمجة على iPhone وiPad في App Store، وعلى Android في Google Play، بواجهة متاحة بـ22 لغة وتصنيف عمري 4+. وهي مخصصة للمبتدئين تمامًا، والمصممين الذين يريدون تنسيق صفحاتهم بأنفسهم، ولمن يغيّرون مسارهم المهني أو الطلاب الذين يستعدون لمقابلات الواجهات الأمامية.

تحتاج المعاينة الفورية تحديدًا إلى اتصال لعرض HTML وCSS، وهو أمر يوضحه التطبيق بدلًا من التراجع بصمت إلى وظيفة أقل. صُمم نصوص الدروس والمواد القرائية لتواصل العمل مع اتصال متقطع، وهو ما يغطي معظم تنقلاتك، لكن جلسة معاينة مباشرة تعمل دون اتصال بالكامل ليست مما يوفّره هذا المحرر.

تعمل تعلم CSS: دورة برمجة على iOS من خلال App Store وعلى Android من خلال Google Play، ويتوفر التطبيق بـ22 لغة. وتصنيفه 4+. عند اجتياز الاختبار النهائي، يصدر التطبيق شهادة إتمام — دليلًا على العمل الذي أنجزته، ويمكن أن تكون مفيدة في سيرتك الذاتية إلى جانب المشاريع الموجّهة التي يمكنك شرحها، لكنها ليست مؤهلًا معتمدًا.