تعلم برمجة المواقع🚀
6.64K subscribers
55 photos
2 videos
19 files
545 links
قناة للبرمجة والمبرمجين ...
تحتوي على مقالات للمبرمجين.
كتب وملفات pdf مجانية للمبرمجين.
نصائح للمبتدئين والمحترفين في البرمجة ...
أفضل الدورات في مجال البرمجة مجانا..
Download Telegram
لو لسه جديد في البرمجة أو شغال بقالك فترة، أكيد سمعت عن Git! طيب إيه قصته وليه كل الناس بتعتمد عليه؟ تعال نشرح الموضوع من الصفر بخطوات بسيطة. 🚀💻

في البداية، يعني إيه Version Control؟
بكل بساطة، هو نظام بيحفظ لك كل نسخة من شغلك على الكود. يعني لو عملت خطأ أو احتجت ترجع لتعديل معين، هتلاقي كل حاجة محفوظة وموجودة. 🔄📝

طيب ليه Git بالذات؟
لأنه أشهر أداة في مجال Version Control. مجاني ومفتوح المصدر، وكمان بيسمح لك تعمل Branches بحيث تجرب أفكار جديدة من غير ما تأثر على النسخة الأساسية من الكود. بيسجل كل حاجة وبيسهل التعاون مع فريقك بدون ما يحصل تضارب في الملفات. 💡👥

طيب إزاي تبدأ؟
خلينا نوضحها بخطوات عملية:

1- تنزيل Git: أول حاجة لازم تنزل Git على جهازك من هنا:
https://lnkd.in/d9CH6sAv

2- إعداد المشروع: افتح الـ terminal أو cmd واكتب:
git init
كده بتطلب من Git يتابع مشروعك. 👀

3- متابعة الملفات: لما تعدل في الأكواد، استخدم:
git add .
النقطة هنا معناها “كل الملفات”. لو عايز تضيف ملف معين، استبدل النقطة باسم الملف. 📂

4- حفظ التعديلات (Commit): لما تتأكد إن كل حاجة تمام، احفظ التعديلات كده:
git commit -m "first commit"
الكومنت ده مهم عشان تعرف إيه اللي اتغير. 📝

5- رفع المشروع (Push): ارفع الكود على GitHub عشان تحفظ شغلك أو تشتغل مع الفريق:
git push origin main 🌐🚀

مصطلحات لازم تعرفها:
Repository: المكان اللي Git بيخزن فيه كل التغييرات اللي بتحصل في المشروع. 🗂️
Branch: نسخة مستقلة تقدر تجرب فيها أفكار جديدة بدون التأثير على النسخة الأصلية. 🌱
Merge: دمج التعديلات من فرع فرعي للفرع الأساسي. 🔗
Pull Request: طلب مراجعة التعديلات قبل دمجها مع الكود الأساسي. 👀🔍

مع الوقت، هتتعلم حاجات متقدمة زي:
حل التضارب (Conflict Resolution): لما يحصل تعديلين متعارضين، هتحتاج تحل المشكلة يدويًا. 🛠️
Rebase: طريقة أنيقة لدمج الفروع بتنظيم التاريخ.
Git Workflows: طرق مختلفة لتنظيم العمل مع فريقك زي Gitflow أو Feature Branch. ⚙️🔄

الخلاصة:
سواء كنت مبتدئ أو عندك خبرة، Git هيساعدك تنظم شغلك، ترجع لأي نقطة في الكود، وتشتغل مع فريقك من غير مشاكل. هتبدأ بالأساسيات زي Add و Commit، وبعدها تتعمق في الأدوات المتقدمة زي Rebase وتنظيم الفروع بشكل أفضل. 🎯💪
🔥53👍2
‏ازاي تبقي محترف في CSS؟ 🌐

‏1- ابدأ بالأساسيات:
‏- اتعلم الـ Box Model، أنواع الخصائص المختلفة، وازاي تستخدم الفئات والأيديهات بشكل صحيح. 📦

‏2- فهم الـ Layout:
‏- افهم Flexbox و CSS Grid بعمق، دي أدوات هتسهل عليك تصميمات متقدمة. 🏗️

‏3- استخدم متغيرات CSS:
‏- المتغيرات هتساعدك في تنظيم الكود وتقليل التكرار. ♻️

‏4- التمرين العملي:
‏- حاول تنسخ تصميمات من Dribbble أو Behance للتمرن وتحسين مهاراتك. 🎨

‏5- استكشاف الـ Pseudo-classes & Elements:
‏- زي :hover, :nth-child, و ::before, ::after، عشان تضيف ديناميكية للتصميم. 🎯

‏6- التجاوب (Responsiveness):
‏- اتعلم ازاي تعمل تصميمات متجاوبة باستخدام الـ media queries. 📱

‏7- جرب Preprocessors:
‏- زي SASS أو LESS عشان تكتب CSS بشكل أكتر كفاءة. 🛠️

‏8- تحسين الأداء:
‏- اتجنب الكود الغير ضروري واتباع أفضل الممارسات. 🚀

‏9- تابع التطورات الجديدة:
‏- ابقى مطّلع على أحدث خصائص CSS. 📰

‏10- التحديات:
‏- اشترك في تحديات زي Frontend Mentor أو CSS Battle. 🏆
🥰7👍32
أهم اختصارات VS Code اللي هتوفر عليك وقت وجهد كبير! 🚀🔥
8👍1
من أفضل التقنيات المطلوبة في سوق العمل دورة شاملة لتعلم مكتبة رياكت من تحت الصفر إلى الاحتراف 🔥🔥

https://youtube.com/playlist?list=PLpr1Lg_f0v3ojNKR4WzZ_SEXhiKBHDQmB&si=xvO008Gn5fz2xQA1
🔥5
لو عايز تطور مهاراتك في حل مسائل البرمجة (Problem Solving) وتستعد لمقابلات العمل أو المسابقات البرمجية، دي أفضل المواقع اللي لازم تزورها:

1- Codewars ⚔️
منصة مليانة تحديات برمجية بمستويات متنوعة، مناسبة للتدريب اليومي.
رابط: codewars.com

2- LeetCode 💡
أفضل خيار للتدريب على مقابلات العمل في شركات زي Google و Facebook.
رابط: leetcode.com

3- HackerRank 🧑‍💻
موقع ممتاز للمبتدئين يغطي مفاهيم البرمجة بشكل تدريجي وممتع.
رابط: hackerrank.com

4- TopCoder 🏆
وجهتك الأولى للمسابقات البرمجية العالمية مع مجتمع قوي ومنافسات قوية.
رابط: topcoder.com

5- Coderbyte 🎯
منصة مثالية لتحسين مهاراتك في حل المشكلات البرمجية.
رابط: coderbyte.com

6- Codeforces 🚀
الأشهر في المسابقات البرمجية الحية، مثالي للمحترفين والمبدعين في البرمجة.
رابط: codeforces.com

ابدأ التحدي دلوقتي، واختر الموقع المناسب لمستواك وطموحك! 💪
3👍1🔥1
من أكتر التحديات اللي بتواجه أي حد بيبدأ في تعلم الفرونت إند هي البحث عن الـ API المناسب للمشروع. والموضوع ده ممكن يضيع وقت كبير جدًا!

‏علشان كده، لازم أشارك معاكم واحد من أفضل المواقع اللي اكتشفتها، وهو بمثابة كنز لأي مطور فرونت إند. الموقع ده بيجمع كل الـ APIs اللي ممكن تحتاجها لأي فكرة مشروع تخطر في بالك.

‏لو بتفكر تعمل أي مشروع، سواء كان بسيط أو معقد، الموقع ده هو وجهتك الأولى
‏جربوه، وهتشوفوا الفرق بنفسكم!


‏رابط الموقع :

‏⁦ rapidapi.com
🔥41
📌 مواقع مساعدة

🔸 موقع Animista بيقدم أداة رائعة جداً للمطورين بتساعدك في عمل انميشن مميز للعناصر الموجودة في مشروعك.

🔸 بعد اختيار وضبط الانميشن بتقدر تنسخ كود CSS وتأخذه لمشروعك بكل سهولة.

🔹 رابط الموقع:
https://animista.net/play/basic
🔥1
🚨 لو بتتعلم CSS أو عايز تفهمها بطريقة ممتعة وجديدة، يبقى ده ليك! 🚨

تخيّل لعبة بتطلب منك “اختار الطبق الصح” باستخدام CSS Selectors!
موقع ممتع يعلمك الأساسيات بخطوات بسيطة وتحديات مسلية.

جاهز تكسب كل الجولات؟
📌 الرابط: https://flukeout.github.io/
1
‏GET، POST، PUT، DELETE... دي قائمة بأشهر "الأفعال" في HTTP في مخطط واحد. هتلاقي الطريقة لتحميل ملف PDF عالي الدقة في الآخر.

‏HTTP GET
الطلب ده بيجيب مورد من السيرفر. مفيش مشكلة لو طلبته كذا مرة، النتيجة بتبقى هي هي.

‏HTTP PUT
الطلب ده بيحدث أو ينشئ مورد. يعني لو طلبته كذا مرة، هيحدث نفس المورد ومش هيعمله مرتين.

‏HTTP POST
الطلب ده بيتعمل لإنشاء موارد جديدة. ممكن لو طلبته مرتين، يعمل نفس المورد مرتين.

‏HTTP DELETE
الطلب ده بيمسح مورد. حتى لو طلبته كذا مرة، هيمسح نفس المورد.

‏HTTP PATCH
الطلب ده بيعمل تعديلات جزئية على مورد معين.

‏HTTP HEAD
الطلب ده بيطلب استجابة شبه GET بس من غير جسم الاستجابة.

‏HTTP CONNECT
الطلب ده بيعمل قناة اتصال (نفق) للسيرفر اللي اتحدد بواسطة المورد المستهدف.

‏HTTP OPTIONS
الطلب ده بيشرح الخيارات المتاحة للتواصل مع المورد المستهدف.

‏HTTP TRACE
الطلب ده بيعمل اختبار رجوع للرسالة على طول المسار للمورد المستهدف.
🔥31
- أفضل مواقع خاصة بالتحديات البرمجية
================================================
https://www.topcoder.com/
================================================
https://www.codewars.com/
================================================
https://www.hackerrank.com/interview/preparation-kits
================================================
https://exercism.org/
================================================
https://www.spoj.com/
================================================
🔥2
‏تعالو نعرف يعنى ايه API ؟

‏كلنا عارفين انه اختصار ل Application Programing Interface

‏وفى اغلب الاحيان بنسمعه دايما لما بنكون بن develope backend و بالتالى فى frontend بيعمل call لل API دة

‏بص المصطلح دة اشمل من كدة. باختصار اى مستخدم عادى وليس مطور برمجيات مش هيقدر يتعامل مع اى جزء من البرنامج بشكل تقنى وبالتالى هو محتاج وسيط او واجهة يقدر يتعامل مع البرنامج من خلاله.

‏خلينا نقول مثال بسيط بعيدا دلوقتى عن ال software
‏اى عميل بيروح بنك وبيقف على شباك علشان يتكلم مع موظف يساعده فى طلبه. السؤال هنا هو ليه الموظف دة موجود ؟! وليه العميل ميقدرش بنفسه يدخل المكتب وينفذ بنفسه طلبه ؟

‏لان اولا العميل معندوش ولا المهارة ولا المعرفة الى تقدر يخليه يعمل كدة، ولو افترضنا انه يقدر فمش المفروض اى حد يدخل على اى نظام يعمل فى اى حاجه.

‏لو قولنا أن نظام البنك هو ال Application و الموظف هو ال Interface فكدة اى عميل يقدر يتعامل مع ال system بشكل غير مباشر عن طريق الموظف.
‏ودة يخلينا نقول ان ال Interface مش مفهومها هنا "واجهة رسومية" مش شرط تبقى frontend خلينا نقول بشكل أدق انها مجرد اداة بتعمل كوسيط.

‏هو دة بالضبط الى بيحصل فى اى مرة هتسمع فيها API

‏لو اتكلمنا عن مثال تانى ونقول اننا عندنا web application و فيه database مستخدمة.
‏هو ليه المستخدم الطبيعى ميقدرش يدخل على ال database بشكل مباشر ويقدر ينقذ عليها ال queries الى هو محتاجها ؟؟
‏لنفس السبب ،تقنيا مش هيعرف ولو هيعرف لازم ال database دى تبقى secured
‏وبالتالى ال developers بيكتبوا شوية code يقدروا هما يتعاملوا مع ال database .. وبعد كدة اى action ال user هياخدوا .. ال code دة هيتنفذ ويرجعله الداتا الى هو محتاجها .. وبكده ال user اتعامل مع ال database بشكل غير مباشر.
5👍2🔥1🤝1