تعلم برمجة المواقع🚀

افضل كورس قواعد بيانات من الصفر إلى الاحتراف🔥🔥🔥 https://youtube.com/playlist?list=PLMTdZ61eBnyoQoEmLOcgTBdrAOVT-GFju&si=bU__V0VqdewTYmWM

شوية مصادر مجانية تقدروا تستخدموها لو حد عاوز يعمل ابليكشن اسلامي. سواء كان التطبيق بتاعك بيحتاج مواقيت الصلاة، تحويل التاريخ الهجري، أو نصوص القرآن الكريم، هتلاقي هنا اللي انت محتاجه! ‏📌Api شامل :  https://documenter.getpostman.com/view/7929737/TzkyMfPc ‏📌 Aladhan Prayer Times API: عشان تعرف مواقيت الصلاة لأي مكان. ‏🔗 [Aladhan API]( https://aladhan.com/prayer-times-api) ‏📌 IslamicFinder API: عشان مواقيت الصلاة، التقويم الهجري، وموارد قرآنية. ‏🔗 [IslamicFinder API]( https://www.islamicfinder.us/index.php/api/) ‏📌 Quran API: نصوص وترجمات القرآن الكريم مع الصوتيات. ‏🔗 [Quran API]( https://alquran.cloud/api) ‏📌 Hijri Date API: تحويل التاريخ من الميلادي للهجري والعكس. ‏🔗 [Hijri Date API]( https://hijriapi.com/) ‏📌 Muslim Salat API: مواقيت الصلاة مع موارد إسلامية أخرى. ‏🔗 [Muslim Salat API]( https://muslimsalat.com/) ‏📌 Hadith API: عشان توصل لمجموعة الأحاديث. ‏🔗 [Hadith API]( https://api.sunnah.com/) ‏📌  Tanzil.net API: نصوص وترجمات القرآن مع التلاوات. ‏🔗 [ Tanzil.net API]( http://tanzil.net/docs/api)

7 أدوات ل Frontend  لتصبح مطورًا أفضل 1- Uiverse عبارة عن منصة مفتوحة المصدر تقدم مجموعة من عناصر واجهة المستخدم الجميلة التي تم إنشاؤها باستخدام CSS وTailwind. -------------------------------- 2-Figma Plugin: Motion هو إضافة لبرنامج Figma بتبسط عملية إنشاء الرسوم المتحركة. الأداة دي بتخلي مطوري الواجهة الأمامية يقدروا يصمموا الرسوم المتحركة ويعملوا نماذج أولية مباشرة جوه Figma، من غير ما يحتاجوا للبرمجة المعقدة. -------------------------------- 3-CSSFX يوفر مجموعة من الرسوم المتحركة CSS الجاهزة للاستخدام والتي يمكن دمجها بسهولة في أي مشروع ويب. -------------------------------- 4-Frontend Mentor هي منصة ممتازة ل Frontend  الذين يتطلعون عن تحسين مهاراتهم من خلال مشروعات واقعية. -------------------------------- 5- Greensock Animation Platform (GSAP) هي مكتبة جافا سكريبت قوية لإنشاء رسوم متحركة عالية الأداء. يقدم GSAP مجموعة من الميزات، بما في ذلك الرسوم المتحركة السلسة والتوافق عبر المتصفحات. -------------------------------- 6-CodePen هي بيئة تطوير اجتماعي لمطوري الواجهة الأمامية لعرض أعمالهم وتجربة التعليمات البرمجية واكتشاف الإلهام. -------------------------------- 7-Polypane هو متصفح معمول مخصوص لمطورين ومصممي الويب. بتقدم ميزات زي التمرير المتزامن والمعاينات السريعة الاستجابة وفحص سهولة الوصول --------------------------------

📌نصائح للمبتدئين بمجال FrontEnd 👨‍💻 ابدأ بتعلم كيف يعمل الويب Web . ابدأ وتعلم HTML و CSS جيدا . لاتتعلم اطر العمل Bootstrap  و Tailwind قبل معرفتك ل CSS . ❌ استخدم أطر العمل مثل React و Next Js لانها تسهل وتختصر عليك الكثير من الوقت✅   لاتنسى الاهتمام بمعرض اعمالك✅

ما هي بيئة التطوير المتكاملة (IDE)؟ بيئة التطوير المتكاملة (IDE) هي تطبيق برمجي يوفر للمبرمجين أدوات شاملة لتطوير البرمجيات. تتضمن IDE عادةً محرر شيفرات برمجية، مصحح أخطاء (Debugger)، أدوات بناء (Build Tools)، وميزات لإدارة المشاريع. يهدف IDE إلى تسهيل عملية البرمجة من خلال توفير بيئة متكاملة تساعد المبرمجين في كتابة الشيفرة، تصحيح الأخطاء، وتجميع التطبيقات. ومن اشهر بيئات العمل الموجودة والمتعارف عليها عند المطورين : 1- VSCode : مفتوح المصدر ومجاني: يمكن للجميع استخدامه وتعديله. دعم للغات متعددة: يدعم لغات برمجة متعددة مثل JavaScript, Python, C++, PHP، وغيرها. الإضافات (Extensions): مكتبة ضخمة من الإضافات التي تزيد من وظائفه وتدعم أدوات تطوير متعددة. تصحيح الأخطاء (Debugging): يحتوي على أدوات قوية لتصحيح الأخطاء. تكامل مع Git: دعم مدمج لأنظمة التحكم في الإصدار مثل Git. الاستخدامات: تطوير تطبيقات الويب. تطوير تطبيقات الهواتف المحمولة. تطوير البرمجيات المكتبية. رابط التحميل : https://code.visualstudio.com/ 2- IntelliJ IDEA : ذكي وذو كفاءة عالية: يقدم ميزات متقدمة مثل إكمال الشيفرة التلقائي (Auto Complete) والتحليل الذكي للأكواد. دعم للغات متعددة: يدعم لغات مثل Java, Kotlin, Groovy, Scala، وغيرها. أدوات مدمجة: يحتوي على أدوات لتكامل البناء، تشغيل التطبيقات، وتصحيح الأخطاء. تكامل مع أدوات إدارة المشاريع: يدعم تكاملًا مباشرًا مع Maven, Gradle، وغيرها. الاستخدامات: تطوير تطبيقات Java. تطوير تطبيقات Android. تطوير تطبيقات الويب والمكتبية. رابط التحميل :https://www.jetbrains.com/idea/download/?section=windows 3- PyCharm خصص في لغة Python: مصمم خصيصًا لتطوير تطبيقات Python. إكمال الشيفرة التلقائي: يوفر ميزة إكمال الشيفرة الذكي وتلميحات الأكواد. أدوات مدمجة: يحتوي على أدوات لتصحيح الأخطاء وإدارة قواعد البيانات. تكامل مع أدوات تطوير الويب: يدعم تكاملًا مع أدوات مثل Django و Flask. الاستخدامات: تطوير تطبيقات Python. تطوير تطبيقات الويب باستخدام Django و Flask. تحليل البيانات ومعالجة النصوص. رابط التحميل :https://www.jetbrains.com/pycharm/download/?section=windows 4-Android Studio خصص في تطوير تطبيقات Android: بيئة تطوير متكاملة مخصصة لتطوير تطبيقات Android باستخدام Java أو Kotlin أو Flutter. مصمم واجهات مستخدم: يحتوي على مصمم واجهات GUI . أدوات تصحيح الأخطاء: أدوات قوية لتصحيح الأخطاء وتحليل الأداء. تكامل مع خدمات Google: يدعم تكاملًا مباشرًا مع خدمات Google . الاستخدامات: تطوير تطبيقات Android. تحليل وتحسين أداء التطبيقات. تصميم واجهات مستخدم لتطبيقات Android. رابط التحميل:https://developer.android.com/studio 5-Xcode تخصص في تطوير تطبيقات iOS و macOS: بيئة تطوير متكاملة مخصصة لتطوير تطبيقات Apple المكتوبة بلغة Swift او C. مصمم واجهات مستخدم: يحتوي على مصمم واجهات GUI. أدوات تصحيح الأخطاء: أدوات قوية لتصحيح الأخطاء وتحليل الأداء. محاكي iOS مدمج: يحتوي على محاكي لاختبار التطبيقات على أجهزة iOS. الاستخدامات: تطوير تطبيقات iOS. تطوير تطبيقات macOS. تصميم واجهات مستخدم لتطبيقات Apple. ولا يعمل الا على اجهزة Apple تعتمد أفضل بيئة تطوير متكاملة (IDE) للمبرمجين على نوع المشاريع التي يعملون عليها ولغات البرمجة التي يستخدمونها. سواء كنت تعمل على تطوير تطبيقات الويب، تطبيقات الهواتف المحمولة، أو البرمجيات المكتبية،  اختر ما يناسبك وابدأ بالقيام بما هو صحيح .

من أفضل التقنيات المطلوبة في سوق العمل دورة شاملة لتعلم مكتبة رياكت من تحت الصفر إلى الاحتراف 🔥🔥 https://youtube.com/playlist?list=PLpr1Lg_f0v3ojNKR4WzZ_SEXhiKBHDQmB&si=xvO008Gn5fz2xQA1

اعمالي على الووردبريس🔥🔥 https://repairkt.com/ https://repairkwu.com/ https://repierku.com/ اتمنى أن تنال اعجابكم😍😍

اعمالي على الووردبريس🔥🔥 https://repairkt.com/ https://repairkwu.com/https://repierku.com/ اتمنى أن تنال اعجابكم😍😍

مهم انك تظبط شكل البروفايل بتاعك علي Github علشان هيفيدك في الشغل كتير ... وطبعا كلنا عارفين اهميه Github😁 ‏لو عاوز بقا تظبط شكل الحساب بتاعك علي Github و مش فاضي تكتب ملف الـReadMe او مش بتعرف تكتبة🤔 ‏Github ذات نفسها موفرالك موقع drag and drop بكل بساكه عليه بعد كدة بتعملة Generate للأكونت بتاعك ‏الرابط : ⁦ profile-readme-generator.com ⁩ ‏ودي شوية تيمبليت جاهزه ممكن تشوفهم برضه❤️😍: https://github.com/durgeshsamariya/awesome-github-profile-readme-templates/tree/master/templates https://github.com/kautukkundan/Awesome-Profile-README-templates/tree/master/multimedia

‏🎯 أدوات رائعة باستخدام الذكاء الاصطناعي : ✅ أداة hocoos.com‎ لانشاء مواقع ويب ✅ أداة rytr.me‎ لإنشاء محتوى عالي الجودة ✅ أداة lucidya.com‎ لإنشاء إعلانات مصورة ✅ أداة stability.ai‎ لتوليد المقالات

‎⚡البوست ده للفرونت اند سته مواقع API👇 ‎✔️ JSONPlaceholder ‎🔗 ⁦ jsonplaceholder.typicode.com⁩ ‎✒️ Free Fake API for testing and prototyping. ‎✔️ Fake Store API ‎🔗 ⁦ fakestoreapi.com⁩ ‎✒️ Fake Store rest API for your e-commerce or shopping website prototype. ‎✔️ Unsplash API ‎🔗 ⁦ unsplash.com/developers⁩ ‎✒️ The Unsplash API is a modern JSON API that surfaces all of the info you'll need to build any experience for your users. ‎✔️ Quotes API ‎🔗 ⁦ quotes.rest⁩ ‎✔️ RandomUser ‎🔗 ⁦ randomuser.me⁩ ‎✒️ The random user API is beneficial for beginners and provides randomly generated users to be used as placeholders for testing purposes. ‎✔️Coingecko ‎🔗 ⁦ coingecko.com/en/api⁩

مصادر لتعلم Tailwind CSS 1️⃣ التعلم من البداية ‏☑️  https://m.youtube.com/playlist?list=PLnD96kXp-_pMR9cBUmvsz_kIIt9bv2UIP 2️⃣ للتطبيق العملي ‏☑️   https://m.youtube.com/watch?v=bAzPWddA_90&list=PLnD96kXp-_pMR9cBUmvsz_kIIt9bv2UIP&index=23 ‏☑️   https://m.youtube.com/watch?v=9Px2cwdQ8PM  ‏☑️   https://m.youtube.com/watch?v=tT1NhBdn--s&list=PLzBl445W4ieshIswFhOOTwnbvlEhQPc81 3️⃣ رابط Documentation ‏☑️  https://tailwindcss.com/

كورس سي شارب شامل كل شي اكثر من ١٢٠٠ فيديو🔥🔥 https://youtube.com/playlist?list=PLHIfW1KZRIfkDF2xTIB5kX8gdthmLTufx&si=apYgq5v3HEwl7xnG

‏تعالو نعرف يعنى ايه 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 بشكل غير مباشر.

مواقع تتيح لك اختبار موقعك هل هو متجاوب مع مختلف الشاشات ام لا في هي توفر عليك مجهود و تختصر وقتك لمعالجه مشاكل الموقع الخاص بك علي الشاشات المختلفة المواقع : ‏1- responsive design checker ‏ https://responsivedesignchecker.com/ ‏2- responsive test tool ‏  http://responsivetesttool.com/ ‏3- website planet ‏  https://www.websiteplanet.com/ ‏4- website responsive test ‏  https://websiteresponsivetest.com/

‏🔥 أدوات ذكاء اصطناعي رهيبة 🔥 ـ موقع (Mixo.io‎) يصمم لك موقع جاهز في ثواني معدودة ـ موقع (Tome.app‎) كل ما عليك استخدام هذه الأداة لإنشاء عرض تقديمي إحترافي بشكل سريع ـ موقع (Repurpose.io‎) تدير وتنشر منشوراتك عبر منصات التواصل الاجتماعي

لازم قبل ماتدخل معنا سلسلة البرمجة الكائنية تكون متعلم أساسيات سي بلس بلس ع الاقل هاذ الكورس رح يعلمك الاساسيات بشكل مبسط وضروري تحضر هالكورس😍 https://youtube.com/playlist?list=PL3X--QIIK-OFIRbOHbOXbcfSAvw198lUy&si=xS2Y8W3PtWmIXU1g

الخطه الشاملة لتعلم فلاتر Dart 1 - https://www.youtube.com/playlist?list=PL93xoMrxRJIsYc9L0XBSaiiuq01JTMQ_o Flutter 2 - https://www.youtube.com/playlist?list=PL93xoMrxRJIvtIXjAiX15wcyNv-LOWZa9 Firebase 3 - https://www.youtube.com/playlist?list=PL93xoMrxRJIvHhxhB21YzzeimEEzzAz6g Provider 4 - https://www.youtube.com/playlist?list=PL93xoMrxRJIviJiC76oO5aV8bDp2s3OrA Getx 5 - https://www.youtube.com/playlist?list=PL93xoMrxRJIvZHL420f63bWIOrcoM6NU- Sql 6 - https://www.youtube.com/playlist?list=PL93xoMrxRJIuicqcd1UpFUYMfWKGp7JmI Sqflite 7 -  https://www.youtube.com/playlist?list=PL93xoMrxRJIvPg3nW8WG0HDDgpMQtUkag Rest Api With PHP And Flutter 8 - https://www.youtube.com/playlist?list=PL93xoMrxRJItcqJJgyCpA7Wv_YL-ii6Dl Ecommerce App 9 - https://www.youtube.com/playlist?list=PL93xoMrxRJIuvTINf31EZ4S06lPklY-r0 Package Of The Week 10 - https://www.youtube.com/playlist?list=PL93xoMrxRJIuIpCMr4qi2XkOzdEX7PlrU

فرق بين PUT و PATCH في RESTful API: مبدأيا ال REST API هو نوع من أنواع ال API التي تستخدم HTTP بروتوكول  . ومن ضمن ال Verbs ال بستخدمهم عشان اعمل Manipulation او اعمل Retrive لل Data بتاعتى: - GET - POST - PUT - DELETE دى الـ Verbs المتعارف عليها في HTTP. عندنا كمان Verb تانى وهو PATCH، وال بستخدمه عشان اعمل Update لل Data بتاعتى زى PUT. طيب ايه الفرق بين PUT و PATCH طالما الاتنين بيعملوا Update؟ لو عندي Table اسمه users ووعملت Insert فيه ل New User باستخدام POST: POST /User {   "name": "NewUser",   "Email": "NewUser1@gmail.com",   "password": "1234" } لو حبيت أعمل Update لل (name) بتاع ال User دا : لو استخدمت PUT: أنا مضطر أبعت Value لكل الـ Fields بتاعت الـ User في الـ Body حتى اللي مش هعملها Update. وده لأن الـ PUT بتروح تعمل Update للـ Record ده كله فال Database ال هو ال User عندنا حاليا : PUT /User/1 {   "name": "UpdatedName", // update field   "Email": "NewUser1@gmail.com",   "password": "1234" } وإلا لو بعت بس الـ Field اللي عاوز أعملها Update  زى كدا : PUT /User/1 {   "name": "UpdatedName", // update field } فاللي هيحصل إنه هيعتبر باقي الـ Fields حصلها Update برضو بس Values بتاعتها هتبقى Null ده لو بت Allow الـ Null يعني، عشان لو مش بت Allow Null فهو مش هيعمل Update أصلا. أما PATCH ف بتشتغل على الـ Field اللي أنا عاوز أعملها Update بس: PATCH /User/1 {   "name": "UpdatedName", // update field } هنا اللي هيحصله Update هو Field الـ name بس مش الـ entity او ال Record  كله. الخلاصه : - ال PUT: بستخدمها عشان اعمل Update لل Record كله ولازم تبعت كل ال Values. - ال PATCH:  بستخدمها عشان اعمل Update ل Field معين بس فال Record  وببعت بس ال Value بتاعت ال Field دا بس

الكنز دة هينقلك نقلة تانية في جافاسكريبت هتتعلم كل حاجة وبالأمثلة وكمان هتتعلم تكتب كود نظيف بالمعايير المتبعة في الشركات الكبيرة كل حاجة بتتشرح بيقولك امثلة للطرق السيئة وامثلة تانية للطرق الصحيحة اللي لازم تكتب الكود بيها ‏ https://github.com/airbnb/javascript