ال flex هو تقنية في css لترتيب العناصر على خط واحد، أفقي (الوضع الإفتراضي) أوعامودي.

- يتم وضع display:flex للعنصر الاب الذي يحتوي العناصر المراد ترتيبها.
- الوضع الإفتراضي، إنه العناصر تقرب من بعضها وتصير على الجهة اليسار من الcontainer.
- الآن تبدأ بالتحكم في الاب والابناء لوضع الترتيب اللي يناسبك.

📍في خصائص يجب وضعها هلى container مثل:
flex-direction: column;
اذا كنت تحتاج ترتيب الابناء بوضع عامودي. لكن سيكون الابناء برضو ملاصقين لبعض في الأعلى.
- الا اذا استخدمت احد الخصائص المحددة لتغيير هذا الترتيب.
مثلاً:
justify-content: center;
هذه مثلاً ستحعل الابناء في منتصف الcontainer بالعرض
وايضا:
align-items: center;
ستجعل الابناء في منتصف الاب عامودياً
وهذه الخصائص لها قيم أخرى مثل
flex-end, space-between, space-around, space-evenly

توجد ايضاً خاصية أخرى للcontainer وهي:
Align-content
وهي تتحكم بوضع كل العناصر الابناء ككتلة واحدة. وليس كل عنصر على حدة.
وتقبل قيم مثل:
flex-start, flex-end, center, stretch, space-between, space-around

📍خصائص الأبناء:
مجموعك من الخصائص يتم وضعها على الابناء للتحكم في سلوكهم داخل الاب.

Order
للتحكم في ترتيب الابناء داخل العنصر الاب.

flex-grow
للتحكم في كل عنصر، هل يتمدد او لا مع زيادة مساحة الاب

flex-shrink
للتحكم في كل عنصر، هل يتقلص او لا مع تناقص مساحة الاب.

flex-basis
للتحكم في عرض العنصر الابن واعطاؤه عرض معين.

align-self
هنا يمكنك تغيير القيمة المحددة مسبقاً في align-items لعنصر معين دون بقية الابناء.


هذه خلاصة اوامر الflex
بتحتاج انك تعطي القيم المناسبة في المكان المناسب لتحصل على الترتيب اللي بدك ياه.

لو ترسل شو بالضبط اللي بدك تعمله، ممكن اساعدك في اكواد مخصصة لحل المشكلة.

مواقع مهمه لمصممين المواقع ❤

موقع تختار منه نوع الخط
⁦ https://fonts.google.com⁩

موقع تختار منه صور الموقع
⁦ https://www.pexels.com/⁩

موقع تختار منه ألوان التصميم
⁦ https://coolors.co/⁩

موقع تختار منه الأيقونات
⁦ https://fontawesome.com⁩

موقع تتعلم منه تريكات تعملها بال CSS
https://css-tricks.com/

لو اي حاجه وقفت معاك وانت بتشتغل روح على الموقع هذا هتلاقي الاجابه
stackoverflow.com

طبعا وارد انك تنسى syntax خاص بكود معين ف تروح بقا على الموقع ده وهتلاقي بنية الكود الصحيحة
https://syntaxdb.com

موقع هتلاقي فيه كل الادوات اللي تحتاجها ک فرونت اند
http://frontendtools.com/

هذا موقع في ملخصات للغات برمجة كتير ممكن تحتاجه ف حطيته معاهم
http://overapi.com/

هذا موقع تعرف منه سرعة الموقع بتاعك
https://gtmetrix.com/


@codedevelopment

لمن يريد يتعلم React js بسهولة
ليش بدك تتعلمها ؟ لأن سوق العمل طالبها و لأن شركة الفيسبوك عاملة هاي الغة و الي هي عبارة عن مكتبة جافاسكربت تقدر تتعلمها من قنوات اليوتيوب في ناس كتير شرحتها و لكن موقع لغة داعم لغة العربية يعني تقدر تدرسها و تابع تحديثاتها و اي شي عن لغة ب ( لغة العربية )
رابط لغة بلعربي : هنا

@codedevelopment

مواقع تهم كل مبرمج 😉

1- stackoverflow.com
طبعا دا اهمهم ودا لان اي سؤال او اي مشكله تقف معاك فمجال البرمجة خصوصا هتلاقيها وقفت مع كزا حد قبلك وهتلاقي ناس كتير مجاوبين عليها وطبعا بيجيبلك افضل الاجابات بالترتيب، ولو عندزم سؤال محدش سأله قبل كدا ممكن تكتبه وناس تجاوب عليك
2- codeacademy.com
من أهم وأشهر المواقع اللى بتقدم محتوى كبير لتعلم البرمجة والتكويد والموقع درس عليه أكتر من 45 مليون شخص لغات كتيرة مثل HTML & CSS, JavaScript and SQL حتى Bash/Shell, Python, Ruby and C++
3- teamtreehouse.com
موقع يقدم محتوى رائع فى مجال تصميم المواقع والبرمجة. الموقع بيقدملك فترة تجريبية لمدة 7 أيام وبعدها الدراسة بتكون ب 25 دولار شهريا
4- github.com
أكتر من 3 مليون مطور حول العالم موجودين ع الموقع بيناقشوا ويديروها مشروعات ويعدلوا أخطاء وبيشتغلوا مع بعض
5- codewars.com
التعلم ع الموقع بيكون مختلف وممتع لانه بيكون عبارة عن تحديات اسمها.
6- codeavengers.com
موقع رائع عليه كورسات لمراحل مختلفة حتى الأطفال من سن 5 سنوات ومافوق
7- khanacademy.org
من أهم المواقع اللى بتقدم محتوى مجانى رائع فى مجالات مختلفة
8- codeanywhere.com
الموقع يحتوى على أكثر من 350 مليون من ملفات الأكواد مفتوحة المصدر
9- codota.com
موقع مفيد جدا لمطورى تطبيقات الأندرويد تقدر تأخد أكواد التطبيقات وكل حاجة تحتاجها تخص تطبيقات الأندرويد من عليه
10- https://codepen.io/
الموقع عبارة عن شبكة تواصل اجتماعى بين المبرمجين من خلاله يتم التواصل بينهم ومشاركة الأكواد ومناقشتها
11- codeproject.com
موقع تابع لشركة مايكروسوفت للمبرمجين موجود عليه الآف المبرمجين.

@codedevelopment

نلقي نظرة اليوم على اساسيات اي موقع و التي هي
HTML و CSS و JavaScript

HTML
هو الهيكل العظمي لموقع الويب الخاص بك
CSS
هو مظهر موقعك هذا يحدد كيف سيبدو موقعك
JavaScript
هو العقل المدبر لموقعك

@codedevelopment

موقع خاص لاختيار بالالوان :
https://flatuicolors.com/

@codedevelopment

I updated it to show you the correct time in your country 🖤

Dropdown menu
#css

@codedevelopment