كتاب تعلم html و css من الصفر الى الاحتراف🔥🔥🔥

‏لو انت Front end فاكيد سمعت عن APi

‏ال API، ده اختصار لـ "Application Programming Interface"، يعني حاجة بتربط بين مكونين
‏بتساعد على نقل البيانات بينهم. يعني لو عايز تجيب معلومات من موقع تاني وتستخدمها في موقعك أو تطبيقك، هتستند على الـ API عشان تجيب البيانات دي.

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

‏الـ API بيرجع بيأخد البيانات دي ويخزنها في قاعدة البيانات. وبعدين الشخص اللي خلف الكواليس بيبعت الـ API للجهة اللي بتعمل الواجهة (الفرونت إند). هنا بيبقى دور الفرونت إند إنه يأخد البيانات من الـ API ويعرضها في الموقع بتاعه.

‏والـ Fetch هو العملية اللي بتخلِّيك تجيب البيانات من الـ API. يعني بتستخدم الـ Fetch عشان تجيب البيانات اللي بتجيلك من الـ API وتستعملها في مشروعك.

‏و اخيرا API من اهم الحاجات اللى هتستخدمها كتير و خصتا فى المشاريع الكبيرة فلازم تكون ملم بيها كويس و تدرب عليها كتير فانك ازاى تعرض البيانات بالشكل المطلوب و تبعت بيانات بشكل صحيح و الاهم من كل ده يكون كود منظم و مرتب مش مجرد تطلع المطلوب و بس

كتاب تعلم لغة ال C بالامثلة العملية الشاملة من الصفر إلى الاحتراف 🔥🔥

🔰    معاني أرقام الأخطاء التي قد تراها على مواقع الإنترنت

🔸 301 : تم نقل تلك الصفحة نهائياً.
🔸 307 : تم نقل تلك الصفحة مؤقتاً.
🔸 401 : رؤية الصفحة تحتاج ترخيص (كلمة سر).
🔸 403 : ممنوع أن تصل لهذه الصفحة.
🔸 404 : صفحة غير موجودة.
🔸 405 : لقد وصلت لتلك الصفحة بطريقة خاطئة.
🔸 408 : إنتهى وقت محاولة وصولك للصفحة قبل أن تصل إليها.
🔸 414 : عنوان الصفحة\الموقع URL أطول من الطبيعي.
🔸 500 : مشكلة في الموقع نفسه.
🔸 503 : الخدمة غير متوفرة ربما بسبب الضغط الكبير على الموقع.
🔸كل أرقام الـ 100 : تعني معلومات إضافية (لن تراها في الغالب).
🔸كل أرقام الـ 200 : تعني النجاح (لن تراها في الغالب).
🔸كل أرقام الـ 300 : تعني إعادة توجيه Redirection.
🔸كل أرقام الـ 400 : تعني فشل من العميل “أنت”.
🔸كل أرقام الـ 500 : تعني فشل من السيرفر (الخادم الذي يستضيف “الموقع نفسه”).

🔰      الفرق بين الـ RAM و ااـ ROM

🔸  الذاكرة العشوائية (RAM)
تقوم هذه الذاكرة بحفظ البيانات والمعلومات التي يقوم المستخدم بإجراء العمليات المختلفة عليها، حيث تصلها البيانات والمعلومات من وحدات الإدخال المختلفة، كما تصلها النتائج من وحدات المعالجة بعد إجراء المطلوب عليها، وتقوم RAM بتخزين كل هذه البيانات بشكلٍ مؤقت، وتتأثر هذه الذاكرة بانفصال التيار الكهربائي عن جهاز الكمبيوتر أو إغلاق الكمبيوتر، حيث تختفي كل المعلومات التي خزَّنتها، وتعتبر هذه الذاكرة أسرع من ذاكرة الـ ROM.

🔸  ذاكرة القراءة فقط (ROM) :
تقوم هذه الذاكرة بتخزين برامج التشغيل والبرامج الأساسيّة التي تقوم بتشغيل جهاز الكمبيوتر، وهذه الذاكرة لا يمكن التعديل عليها أو محوها لأنها مخزَّنة من الشركة المصنّعة الرئيسة، ولا يمكن لجهاز الكمبيوتر أن يعمل من دون هذه الذاكرة، كما أنّها لا تتأثر بانقطاع التيار الكهربائي عن الجِهاز، بل يمكن استعادة بياناتها عند تشغيل.

الكنز دة هينقلك نقلة تانية في جافاسكريبت
هتتعلم كل حاجة وبالأمثلة وكمان هتتعلم تكتب كود نظيف بالمعايير المتبعة في الشركات الكبيرة

كل حاجة بتتشرح بيقولك امثلة للطرق السيئة وامثلة تانية للطرق الصحيحة اللي لازم تكتب الكود بيها

‏ https://github.com/airbnb/javascript

فرق بين 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 دا بس

الخطه الشاملة لتعلم فلاتر
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

لازم قبل ماتدخل معنا سلسلة البرمجة الكائنية تكون متعلم أساسيات سي بلس بلس ع الاقل هاذ الكورس رح يعلمك الاساسيات بشكل مبسط وضروري تحضر هالكورس😍

https://youtube.com/playlist?list=PL3X--QIIK-OFIRbOHbOXbcfSAvw198lUy&si=xS2Y8W3PtWmIXU1g

‏🔥 أدوات ذكاء اصطناعي رهيبة 🔥

ـ موقع (Mixo.io‎)
يصمم لك موقع جاهز في ثواني معدودة

ـ موقع (Tome.app‎)
كل ما عليك استخدام هذه الأداة لإنشاء عرض تقديمي إحترافي بشكل سريع

ـ موقع (Repurpose.io‎)
تدير وتنشر منشوراتك عبر منصات التواصل الاجتماعي

مواقع تتيح لك اختبار موقعك هل هو متجاوب مع مختلف الشاشات ام لا
في هي توفر عليك مجهود و تختصر وقتك لمعالجه مشاكل الموقع الخاص بك علي الشاشات المختلفة

المواقع :
‏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/

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

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

مصادر لتعلم 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/

‎⚡البوست ده للفرونت اند سته مواقع 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⁩

‏🎯 أدوات رائعة باستخدام الذكاء الاصطناعي :

✅ أداة hocoos.com‎ لانشاء مواقع ويب

✅ أداة rytr.me‎ لإنشاء محتوى عالي الجودة

✅ أداة lucidya.com‎ لإنشاء إعلانات مصورة

✅ أداة stability.ai‎ لتوليد المقالات

مهم انك تظبط شكل البروفايل بتاعك علي 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

اعمالي على الووردبريس🔥🔥

https://repairkt.com/
https://repairkwu.com/
https://repierku.com/

اتمنى أن تنال اعجابكم😍😍