أفضل 20 برنامجًا تعليميًا لـ CSS3 لتحسين مهاراتك في تطوير الويب

أصبحت أوراق الأنماط المتتالية (CSS) أكثر من مجرد لغة لتصميم الويب. إنها تنمو ببطء إلى لغة قادرة تمامًا يمكنها التعامل مع جوانب التصميم الديناميكي. من نواحٍ عديدة ، يمكن أن تحل CSS محل HTML و JavaScript التقليديين لتحقيق التفاعل والاعتماد على الذات من المكتبات الخارجية ومقتطفات التعليمات البرمجية. جميع الأنماط التي نراها على الويب اليوم هي مباشرة من خلال CSS. مع استمرار نمو المعيار وتحسينه ، أصبح البقاء على رأس الأمور أكثر أهمية من أي وقت مضى. قدمت متصفحات الويب CSS ، مثل HTML ، مما قد يعني أحيانًا أن المتصفحات القديمة غير قادرة على دعم الميزات الجديدة.

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

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

تحرير الصور في CSS

استخدام الصور في تصميم الويب منطقي تمامًا ، لكن القصة تصبح تقنية أكثر من ذلك. في حين أنه من الممتع استخدام الصور التي ترضيك في تصميمات الويب الخاصة بك ، في بعض الأحيان هناك أشياء يجب أن نأخذها في الاعتبار. هل حجم ملف الصورة مناسب لمشروعنا؟ هل يمكننا إضافة عوامل تصفية من خلال CSS بدلاً من تطبيقات خارجية مثل Photoshop؟ ما الذي يمكننا فعله حقًا باستخدام CSS لمساعدة صورنا في الظهور بشكل أفضل؟ تأخذنا أونا كرافيتس في رحلة مدتها 15 دقيقة. في ذلك ، ألقت حديثًا حول تحرير صور CSS وكيف يمكننا تحويل CSS لتعمل مثل نظام أساسي لبرامج تحرير الصور ، بدلاً من مجرد طريقة لمعالجة جوانب التصميم.

استخدام CSS الحديث لبناء شبكة صورة سريعة الاستجابة

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

تعلم تخطيط CSS

تصميمات الويب هي كل شيء عن التخطيطات. نقوم بإنشاء تخطيط ثم استخدام العناصر والوظائف الأخرى المتاحة لتصميمه والبناء عليه. ومن الحقائق المعروفة أن الكثير من تخطيطات تصميم الويب تعتمد كليًا على CSS. يتيح لنا تعلم CSS معرفة المزيد حول تخطيطات مواقع الويب وكيفية عملها. ولكن إذا لم تكن لديك المعرفة بالفعل ، فقد كتب Mikito Takada كتابًا عبر الإنترنت مقسمًا إلى 5 فصول مختلفة حول كيفية إنشاء تخطيطات باستخدام CSS3 ، بشكل صحيح. يتحدث عن تحديد المواقع ، وكذلك محاذاة عناصر الصندوق المختلفة لبدء إنشاء عناصر الشبكة ، ويتعمق أكثر في تحديد المواقع والميزات المتاحة في الوقت الحالي. يخصص الفصلين الأخيرين إلى Flexbox (وظيفة CSS). هناك أيضًا كتابة حول أفضل النصائح والحيل المتعلقة بتصميم CSS من رحلته الخاصة كمصمم ويب.

ملاحظات تنشيطية CSS

الملاحظات وأدلة الأسلوب هي القوة الدافعة للعديد من مصممي الويب. من الضروري جدًا أن نتذكر وضع موارد الملاحظات المفضلة لدينا جانبًا لتسهيل الرجوع إليها في المستقبل. وبقدر ما يذهب CSS3 ، فإن CSS Refresh Notes هي من بين المفضلات في مجتمع GitHub ؛ مئات النجوم والكثير من مدخلات المجتمع حول كيفية توسيع هذا المورد ليكون الأفضل على الإطلاق. تركز CSS Refresh Notes على الجوانب الأكثر أهمية في تطوير CSS3. كما يتيح للمصممين الاستفادة بسرعة من الملاحظات المرجعية لمعظم ميزات CSS3. سواء أكنت بحاجة إلى المساعدة في تحديد الموضع أو المحددات ، أو ربما استعلامات الوسائط للتصميم سريع الاستجابة ، أو أفضل طريقة لاستخدام SVG ضمن أنماط تصميم CSS3 - ستكون هذه الملاحظات مفيدة حتى لو لم تشعر بهذه الطريقة على الفور.

المتغيرات: العمود الفقري لبنية CSS

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

تصميم تخطيط صفحة المنتج باستخدام Flexbox

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

كل ما أعرفه عن طباعة الويب سريعة الاستجابة باستخدام CSS

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

أبسط عرض شرائح CSS

عرض شرائح باستخدام CSS3؟ يجب أن يكون ذلك مستحيلاً! عادةً ما تستهدف هذه المفاهيم لغات مثل JavaScript أو jQuery. تسهل هذه اللغات إنشاء محتوى ديناميكي أثناء التنقل. لكن ماذا عن CSS3؟ لا يعدنا Jonathan Snook حقًا بأي شيء جديد ، ولكنه يقدم لنا مثالًا على كيفية استخدام تأثيرات الرسوم المتحركة CSS3 لإنشاء تجارب عرض الشرائح دون الحاجة إلى استخدام أي موارد خارجية ، مثل JavaScript على سبيل المثال. يعد البرنامج التعليمي التمهيدي الصغير الخاص به حول الرسوم المتحركة CSS3 هو المثال المثالي لكيفية تفوق الإبداع على الشك.

وحدات CSS - حل تحديات CSS على نطاق واسع

من المحتم أن تنمو CSS لتتجاوز حدودها الحالية ، تمامًا كما فعلت JavaScript. بالنظر إلى الماضي القديم جدًا لـ CSS ، لقد قطعنا شوطًا طويلاً من القدرة على التعامل مع الألوان ومظاهر العناصر ، توفر CSS في هذه الأيام مجموعة أدوات أكثر تعقيدًا للمطورين الذين يرغبون في الإقامة داخل لغة واحدة للقيام بكل ما لديهم مهام التطوير. تهدف وحدات CSS النمطية إلى مساعدة المطورين على مواءمة كود CSS الخاص بهم بشكل أفضل والذي يمكن بعد ذلك تغيير حجمه عندما يبدأ التطبيق أو المشروع في الخروج عن نطاق السيطرة. في هذا البرنامج التعليمي الرائع ، يشرح لنا Tom Cornilliac كيف يمكننا دمج أوراق الأنماط المختلفة واستخدامها كوحدات نمطية لمشاريعنا التي نطلقها من خلال أطر عمل مثل React. من كان يعلم أن استيراد أوراق الأنماط والوصول إلى وظائفها المحددة مسبقًا سيكون أمرًا سهلاً للغاية.

أنماط عرض المحتوى

المحتوى هو كل شيء. حتى تلك المواقع التي تفتقر إلى مهارات عرض مواقع الويب المناسبة ، ولا تزال قادرة على الحفاظ على جودة عالية للمحتوى ، عادة ما تكون أكثر المواقع التي يشير إليها الأشخاص. ومن الأمثلة الجيدة على ذلك مواقع مثل Reddit و Hacker News - مواقع مليئة بالمحتوى ، مع عدم وجود إجراءات إنفاذ حقيقية داخل تصميم مواقع الويب. لا تتعلق أنماط عرض المحتوى بأنماط العرض ، ولكنها تتعلق بكيفية عمل التصميم العام لعنصر المحتوى معًا لتوفير تجربة تصفح تتكامل بشكل كامل بين عرض المحتوى والمحتوى الفعلي. يعد هذا البرنامج التعليمي من Dan Mall أحد أكثر الأدلة إيجازًا حول أنماط عرض المحتوى ، وتقرير تجربته يتحدث عن نفسه - بعد أن عمل مع مشاريع إعادة تصميم لمواقع مثل TechCrunch ، وحتى علينا أن نعترف بأن تصميم TechCrunch الجديد أنيق للغاية!

تحريك العناصر المقطوعة في SVG

تعد الرسوم المتحركة SVG و CSS3 من بين الموضوعات الأكثر شيوعًا في تطوير الويب في الوقت الحالي. هذا بفضل حقيقة أننا بدأنا في الابتعاد عن الحاجة إلى استخدام الصور الثقيلة وملفات الرسوم المتحركة لعرض المحتوى الخاص بنا ، وبدلاً من ذلك يتعلم المصممون كيفية محاكاة تلك الرسوم المتحركة الدقيقة باستخدام اللغات الأصلية في المتصفح. يعطينا Dennis Gaebel Jr ملخصًا عن استخدام قص CSS لتحقيق تأثيرات رسوم متحركة مذهلة ، بالإضافة إلى استخدام صور متجهية مذهلة.

معبرة CSS

لقد كان Expressive مصطلحًا مبتكرًا في مجتمع المطورين لبعض الوقت. إنه مصطلح مستعار بشكل فضفاض من مفهوم التعبير في لغات البرمجة. تعتبر لغة البرمجة بشكل عام معبرة إذا كانت تسمح لك بالتعبير عن أفكارك بشكل طبيعي في كود يسهل فهمه. بشكل عام ، "التعبيرية" ليست شيئًا جديدًا ، وقد تحدث المطورون عن هذا الأمر لسنوات من قبل ، ولكن في كل مرة يتم إصدار ميزة جديدة في البرية ، يستغرق الأمر بعض الوقت للمطورين وخاصة المصممين للتكيف مع سير عملهم التعبيري ، لذلك في بعض الأحيان يمكن أن تصبح كل المشاريع فوضوية وتعلق في العديد من الوظائف التي تحاول العمل كلها مرة واحدة. التعبيرية هي طريقة خفيفة الوزن لكتابة التعليمات البرمجية التي تعمل بشكل جيد وتبدو جيدة وسهلة الصيانة. استخدم هذا كدليل للأسلوب ، ولا تنس التعبير عن امتنانك للمؤلف ؛ جون بولاسيك.

الرسوم المتحركة في التصميم سريع الاستجابة

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

لماذا أنا متحمس بشأن متغيرات CSS الأصلية

تساعد خصائص CSS المخصصة ، والمعروفة أيضًا باسم المتغيرات ، مطوري CSS3 على ربط عملية تطوير CSS3 من خلال تمكين الوظائف الديناميكية. يقوم المعالجات المسبقة بذلك منذ فترة ، وقد تكيف العديد بالفعل مع فكرة استخدام المعالج المسبق بشكل دائم ، ولكن حتمًا ستجد كل هذه الميزات (المتوفرة في المعيار) طريقها إلى المتصفحات الحديثة ، لأنه لا يوجد شيء أفضل من التطوير في البيئة الأصلية ، لا داعي للقلق بشأن صيانة وموثوقية البرامج الخارجية. استغرق مهندس Google ، Philip Walton وقته الثمين لتجميع عمل ثاقب للغاية حول ميزة CSS الجديدة ، ولماذا يجب على المجتمع تبني مثل هذا التغيير ، وعدم القلق بشأن الأشياء السخيفة مثل مظهر بناء الجملة.

الرسوم المتحركة للقلب على Twitter في CSS الكامل

لقد احتل موقع Twitter كل الأخبار ، ولأسباب وجيهة عديدة. انتهى أحد هذه الأسباب لأن Twitter قرر تبديل زر "المفضلة" بأيقونة "الحب". إنها خطوة جريئة ولكنها ضرورية لإنشاء إحساس أكثر توجهاً نحو المجتمع حول الموقع. تم الإعلان على أحد حسابات تويتر الرسمية ، من خلال صورة متحركة بتنسيق GIF. عرضت الرسوم المتحركة الرائعة "دفقة القلب" مصحوبة بنص. كان نيكولاس إسكوفييه ، المصمم ، مهتمًا بمعرفة ما إذا كان سيكون قادرًا على اختراق رسوم متحركة مماثلة باستخدام CSS3 فقط ، وخمن ماذا - لقد نجح ، ولم يكن المجتمع أكثر سعادة!

على محمل الجد ، استخدم خطوط الرموز

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

تكبير منتج CSS - بدون JavaScript

في التجارة الإلكترونية ، يتم التكبير ، ولكن أيضًا التكبير الذي يسمح للعملاء بالتكبير بشكل أقرب إلى المنتج واستكشاف الجوانب الأقل وضوحًا للعين. إنه بالتأكيد تأثير رائع ، ولكن بالنسبة للكثيرين يعد هذا أمرًا ضروريًا لنجاح أعمالهم. Michael Weaver هو مخترق CSS3 ابتكر فكرة لإنشاء أداة تكبير بدون استخدام أي كود JavaScript ، وهو إنجاز حققه بنجاح ، والآن يمكن لأي شخص تصفح الكود الخاص به وإنشاء أدوات مشابهة على مواقعهم.

جداول مستجيبة حقًا باستخدام CSS3 Flexbox

تساعدنا الجداول في مواءمة معلوماتنا بطريقة أكثر ودية. في بعض الأحيان ، لا يظهر عنصر جدول جيد التصميم كعنصر واحد. ولكن مع قابلية توسيع jQuery و HTML5 و JavaScript ، يمكننا جعل جداولنا تعمل كمستندات Excel أكثر من أي شيء آخر. نشر Vasan Subramanian برنامجًا تعليميًا عميقًا حول كيفية استخدام ميزة Flexbox في CSS3 لإنشاء جداول مذهلة وسريعة الاستجابة لمشروعك التالي على الويب أو التطبيق.

تحسين تسليم CSS

سيتمحور البرنامج التعليمي الأخير لـ CSS3 حول السرعة ، وكيفية ترميز أوراق الأنماط الخاصة بنا بشكل أفضل لضمان بعض السرعة على الأقل إلى ما هو أبعد من المعتاد. يعد Optimize CSS Delivery دليل أسلوب تقني يوضح كيفية كتابة كود CSS أصلي دون المساس بأي موارد. يجب أن تكون كتابة CSS ممتعة ، وهذا ما يدور حوله هذا البرنامج التعليمي.

مصادر التعلم الحديثة CSS3

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

البرنامج التعليمي الكامل لـ CSS3

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

دروس CSS

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

HTML و CSS

لا يمكنك تعلم CSS3 أو HTML5 من الصفر وعدم تجربة Codecademy. حتى قسم testiomonials مليء بالمراجعات حول كيفية تمكن الناس من العثور على وظائف رائعة وذات أجر جيد بعد الانتهاء من تعلمهم مع Codecademy. تقوم العديد من مواقع البرامج التعليمية بتدريس بناء الجملة المباشر من خلال نماذج التعليمات البرمجية. من ناحية أخرى ، فإن Codecademy "تجبرك" على التلاعب بالكود. يتم ذلك من خلال المهام المباشرة والتفاعلية التي يحددها الأشخاص الذين يقفون وراء كل دورة تعليمية. أصبحت مثل هذه المنصات شائعة جدًا ، وهي متاحة الآن لكل لغة برمجة تقريبًا. طريقة فعالة للغاية للتعلم دون سؤال.

تعلم تخطيط CSS

لقد تعلمنا بالفعل في هذا المنشور سابقًا أن التصميم هو أساس CSS3. ولكن الآن حان الوقت لأخذ هذا المفهوم في جولة. دعنا نستفيد من مثال مستقبلي لكيفية عمل خصائص تخطيط CSS3 وما يمكننا فعله بها. خصص لنفسك بضعة أيام لإكمال هذا البرنامج التعليمي. بعد ذلك ، ستكون في مستوى متوسط ​​قوي لفهم خصائص التخطيط واستخداماتها.

CSS - تعلم الويب

تظل شبكة مطوري Mozilla واحدة من المصادر الرائدة لكل ما يتعلق بـ HTML5 و CSS3 و JavaScript. تقدم MDN ، التي تعتمد على المجتمع بالكامل ، أدلة أسلوب لجميع اللغات المذكورة ، بطريقة تناسب وتيرة التعلم الخاصة بك ، والفهم العام لـ CSS3 في المقام الأول.