تعلم CSS Flexbox على موقع Lynda.com

• أبريل 25, 2024

بعد عشر سنوات ، وهو عمر على الويب ، قررنا أن نعطي موقع MUSED Literary Review نظرة جديدة. بالطبع ، أردنا استخدام أحدث HTML و CSS وهذا يعني استخدام Flexbox و CSS Grid و Design Web Design.

بفضل موقع Lynda.com ، لم يستغرق الأمر وقتًا طويلاً للوصول إلى السرعة. فيما يلي بعض من أفضل برامج الفيديو التعليمية التي ساعدتني في تصميم المظهر الجديد لـ MUSED.

تخطيطات استجابة متقدمة مع CSS Flexbox
مورتن راند هندريكسن
في هذه الدورة التدريبية القائمة على المشاريع ، يأخذك المؤلف خطوة بخطوة أثناء قيامه بإنشاء قوائم Flexbox وتخطيطات بطاقة استجابة وتخطيط Holy Grail ومكونات تفاعلية.

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

CSS التدريب الأساسي 3
كريستينا ترونج
في هذه الدورة ، سوف تتعلم استخدام CSS Grid و Flexbox لإنشاء تخطيطات سريعة الاستجابة. سوف تتعرف أيضًا على كيفية إعداد صور الويب الخاصة بك لشاشات Retina وصور SVG vector. ينتقل المؤلف بعد ذلك إلى الرسوم المتحركة البسيطة لـ CSS ، والطباعة التفاعلية وإمكانية الوصول.

المغلق فليكس بوكس ​​أول نظرة
جيمس ويليامسون
تأخذك هذه الدورة التدريبية خطوة بخطوة عندما تتعلم كل بناء الجملة لوحدة تخطيط CSS Flexbox. يناقش المؤلف ما يمكن أن يفعله Flexbox ودعم المتصفح الحالي. ثم يناقش بدقة موضوعات مثل تدفق العناصر ومحتوى الالتفاف ومحاذاة العناصر وتداخل حاويات مرنة.

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

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

الصور المستجيبة
مورتن راند هندريكسن
إذا كنت تستخدم Wordpress ، فأنت تعلم أنه سيؤدي تلقائيًا إلى إنشاء عدة صور مختلفة الحجم لكل صورة تقوم بتحميلها على النظام. لماذا ا؟ تشرح هذه الدورة المفهوم الكامن وراء الصور المستجيبة وكيفية استخدامها على موقع الويب الخاص بك.

تعليمات الفيديو: 10-تعلم استخدام ال padding في صفحه الويب. (أبريل 2024).