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

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

تُتيح تقنية CSS خيارات سهلة وبسيطة ومميزات عديدة يمكنك إستخدامها للتحكّم كليًا بشكل صفحات الويب المُراد إنشاءها.

ولهذا، جمعت لك في هذا المقال دليلًا شاملًا لتتعلّم CSS من البداية وحتى مرحلة الإحتراف والتمكّن، وسنتعرّف في هذا المقال على كل ما تحتاجه لإحتراف CSS.

ما الذي تحتاجه لتبدأ؟

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

مُحرر CSS

مُحرر CSS هو البرنامج الذي تقوم فيه بكتابة الأكواد والرموز الخاصّة بتقنية CSS، ومنه تتحوّل إلى صفحات ويب بأشكالها المألوفة، ومن أفضل برامج التحرير:

Stylizer

Stylizer محرر فريد من نوعه، يقوم بالتركيز على عملية التحرير الفوري بحيث إنه يعرض النتيجة لكل رمز أو كود CSS تقوم بكتابته على الفور.

يتميّز أيضًا ببساطته وسهولة التعامل معه، كما أنه يتحقّق من صحة الأكواد والرموز التي تدخلها.

Top Style

مُحرر TopStyle بإصداره الجديد TopStyle5 يدعم أحدث خصائص ووسوم CSS3 و HTML5، يحتوي على عدة مزايا فريدة من نوعها منها المُحقّق Validator والذي يقوم بالبحث والتدقيق وتعديل الأخطاء في الأكواد والوسوم، وكذلك يوفّر المعاينة المباشِرة لنتيجة ما تكتبه من رموز وأكواد، وأيضًا يتميّز بالإكمال الذاتي للأكواد مما يقوم بتقليل نسبة الخطأ.

العديد من المزايا الأخرى يوفّرها TopStyle 5، بإمكانك معرفة المزيد من الموقع الرسمي.

Notepad++

من برامج تحرير لغات البرمجة الكلاسيكية وأكثرها إستخدامًا. يتميّز ببساطته وبساطة تصميمه الذي يساعدك على إتمام ما تريد في وقتٍ أسرع وبجهدٍ أقل.

من اللغات التي يدعمها Notepad++: جافا Java وجافا سكريبت JavaScript وروبي Ruby وبايثون Python وغيرها من اللغات بجانب طبعًا HTML و CSS.

يوجد العديد من البرامج الأخرى التي بإمكانك إستخدامها لتحرير رموز وأكواد CSS مثل Rapid CSS و Xyle Scope و Style Sheet Maker و CSS Edit.

مُتصفّح للإنترنت

لتجربة ما قُمت بكتابته من رموز وأكواد ووسوم، ينبغي أن يحتوي جهازك على برنامج مُتصفح الإنترنت، ومن أشهر برامج التصفّح: Google Chrome و Mozilla Firefox و Opera و Safari.

والآن أنت مُهيأ لتبدأ التعلّم، فقد عرفت كل ما يلزمك من برامج لتبدأ رحلتك من التعرّف على أكواد CSS حتى مرحلة الإحتراف، بقي أن تبدأ التعليم. ويجب أن نتعرّف على أفضل طرق للتعلّم، وأفضل المصادر لكل طريقةٍ منهم.

ما هي أفضل طريقة لتعلّم CSS؟

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

بإمكانك التدرّب على كتابة الأكواد والرموز عن طريق برامج التحرير التي تُتيح لك المُعاينة، أو كتابة الأكواد ومعاينتها عن طريق المُتصفّح، أو حتى عن طريق بعض مواقع الإنترنت التي تُمكّنك من ذلك.

أفضل المواقع لتعلّم CSS

أكاديمية حسوب

تُعد أحد أفضل مصادر التعليم العربية بحيث تُتيح الأكاديمية للمستخدم دروسًا وشروحات في مجالاتٍ عديدة منها البرمجة وريادة الأعمال والتصميم والعمل الحر وغيرها من المجالات.

من المجالات العديدة الموجودة بالأكاديمية CSS، يوجد عشرات الدروس المُفيدة والتي ستجعلك تُتقن CSS وتتعلّم خباياها ومهاراتها.

هل تحمّست لدخول عالم HTML ومجال تطوير المواقع وتطبيقات الويب لكنك اصطدمت بعائق اللغة حين بدأت رحلة التعلُّم؟ الأمر مُشتّت وتحتاج بوصلة صحيحة لرسم طريقك؟ حسناً، تعِدُك الآن أكاديمية حسوب بأنّك ستصبح “مطوّر واجهات مستخدم” دون الحاجة لامتلاك أي معرفة سابقة بالبرمجة بعد إتمامك لدورة (تطوير واجهات المستخدم من الألف للياء) .. فهل أنت مستعد؟

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

CodeCademy

يوفّر الموقع دروس وشروحات ل CSS من مرحلة التعرّف عليها وحتى مرحلة الإحتراف.

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

Saylor.org

بعد المرور بعملية التسجيل البسيطة بالموقع، سيعبر بك Saylor.org عدة مراحل بدايةً من التعريف بأساسيات CSS و HTML عن طريق المواد المقروءة ومقاطع الفيديو وكذلك يوفّر لك بعض التدريب والتمارين للتأكّد من إدراكك للمعلومات بالشكل الصحيح.

بإنتهاء المنهج المُحدد من قبل الموقع ستكون قد حصلت على قدرٍ كبيرٍ من المعلومات، ادركه جيدًا وتأهّب للإمتحان النهائي.

Mozilla Developer Network

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

أفضل قنوات اليوتيوب لتعليم CSS

The New Boston

بوجود أكثر من 4000 فيديو للشروحات في عدة مجالات، تعد من أفضل قنوات يوتيوب لتعليم CSS، ولهذا فإن القناة تحظى بمتابعة أكثر من مليون مشترك بها وقد حصلت على أكثر من 260 مليون مشاهدة.

 تضم القناة شروحات ل HTML و CSS  و Git و Python و SEO و Linux و Windows Command Line وغيرها من التقنيات ولغات البرمجة.

 CodeCourse

بوجود أكثر من 196 ألف مشترك، تضم القناة دروس وشروحات لمجالاتٍ عديدة مُتعلقة بالبرمجة والتقنية وتصميم المواقع، وحصلت القناة على أكثر من 16 مليون مُشاهدة.

DevTips

تضم القناة حوالي 100 ألف مُشترك مُهتم بما تقدمه القناة من دروس وشروحات لمجالاتٍ عديدة، عشرات مقاطع الفيديو تشمل دروس في البرمجة والتقنية وتصميم المواقع.

1st Web Designer

هي وجهة أكثر من 50 ألف مهمتم بشؤون تصميم المواقع وتطويرها، أكثر من 2 مليون مشاهدة للدروس التي تُقدمها في هذا المجال ومُختلف التقنيات مثل HTML و CSS و UI و UX و JavaScript.

Adam Khoury

أكثر من 130 ألف مُتابع للقناة التي تضم مئات الشروحات في مجالاتٍ تقنية عديدة مثل جافا Java وجافا سكريبت JavaScript وHTML و CSS وغيرها من التقنيات.

كما يمكنك مُتابعة بعض القنوات الأخرى والتي ستستفيد منها حتمًا مثل Tuts + Web Design و LevelUpTuts وJream.

والآن، لديك كل ما تحتاجه حتى تُتقن وتحترف CSS، كل ما عليك هو التحلّي بالشغف والمُثابرة وتبدأ التعلّم.

وهذا تلخيص ما ذكرناه في المقال:

  1. ما الذي تحتاجه لتبدأ تعلّم CSS؟
    • برنامج مُحرر.
    • مُتصفّح للإنترنت.
  2. ما هي أفضل طريقة لتعلّم CSS؟
  • أفضل المواقع لتعليم CSS.
  • أفضل قنوات يوتيوب لتعيلم CSS.

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