أقوى كتاب لتعلم أساسيات البرمجة باستخدام لغة السي بلس بلس

واخيرا 1k بفضل الله ثم بفضلكم استطعنا الوصول شكرا لكم اخ واخت على ثقتكم ومحبتكم😍 والقادم أجمل ان شاءالله🔥🔥

لية نتعلم چافاسكريبت ؟ 😌

✅ الچافاسكريبت من أكثر لغات البرمجة انتشاراً في العالم و خصوصا في بناء و تطوير المواقع الإلكترونية ..

✅ نسبة كبيرة من ال websites  بتستخدم الچافاسكريبت في بناءها ، شركات كبيرة زى Facebook و Google و Amazon و Netflix و PayPal بتستخدم الچافاسكريبت في بناء ال applications الخاصة بيها .

📌 و زى ما احنا عارفين ان :

☑️   ال HTML  بنستخدمها لبناء ال website structure او هيكل الموقع .

☑️ و ال CSS بنستخدمها عشان يكون شكل الموقع أفضل لانها بتنسق عناصر الHTML و تهتم بال presentation.

☑️  ف الچافاسكريبت بتخلي الموقع بتاعنا dynamic و دا لانها بتسمح لنا بال interactivity ( التفاعلية ) بين المستخدم و الموقع ، و بنقدر نعمل update لجزء من الصفحة بُناءاً على action معين يعمله ال user على الwebsite بتاعنا .

✅ بنقدر نستخدم الچافاسكريبت في اية ؟ 😌

ممكن نستخدمها :

📌   في ال Client Side Interface و دا اللى بيظهر لل user (المستخدم ) من خلال لل Browser(المتصفح) .

📌 في ال Server Side من خلال ال Node.js

📌  في الموبايل ابلكيشن من خلال React Native .

📌  في تطوير الألعاب الإلكترونية عن طريق HTML Game Engine و من أشهرهم phaser.js

📌 فى تطوير ال IOT APPs عن طريق استخدام احد الچافاسكريبت IOT Frameworks  أو الچافاسكريبت IOT platforms  و أشهرهم IOT.js   و  Cylon.js

✅ طبعا ممكن نفكر نتعلم library جاهزة او framework على طول لتطوير ال website بتاعك بس الحقيقة عشان تكون شاطر في الچافاسكريبت و تقدر تحل المشاكل اللى هتواجهك و تقدر تتنقل من framework للتانى ، فأنت محتاج تتعلم اساسيات الچافاسكريبت و اللى بتسمي Native JavaScript او Vanilla JavaScript.

📌اكثر مايشتت اللي يريد يبدأ بتعلم البرمجة انه مايعرف وش يتعلم ⁉️
هذا موقع تحصل فيه خارطة طريق لكل مجال تريد تتعلمه مثلا مطور ويب FrontEnd  و Backend  و Android و Flutter وفيه مجالات كثير ...
كل اللي عليك تختار المسار اللي تبيه ويعطيك كل الأشياء اللي لازم تتعلمها ✅
https://roadmap.sh

الفرق بين لغه JavaScript و مكتبه react Js:

لغه JavaScript و مكتبه ReactJS هما لغة برمجة ومكتبة برمجية على التوالي، ولكنهما يختلفان في الغرض الرئيسي والطريقة التي يستخدمان بها.

لغه JavaScript هي لغة برمجة تستخدم لتطوير تطبيقات الويب وتطبيقات الهاتف المحمول وتطبيقات سطح المكتب. وهي لغة برمجة عالمية وتستخدم في جميع أنواع البرامج التي تعمل على الإنترنت.

مكتبه ReactJS هي مكتبة JavaScript تستخدم لبناء واجهات المستخدم. وتركز ReactJS على العرض والجزء الأمامي للتطبيق. يساعد ReactJS المطورين في إنشاء تطبيقات الويب التفاعلية بسرعة باستخدام العديد من المكونات التي يمكن إعادة استخدامها.

بمعنى آخر، يتم استخدام JavaScript للتحكم في العديد من جوانب التطبيقات، بينما يتم استخدام ReactJS لتطوير الجزء الأمامي للتطبيقات الويب وإنشاء واجهات المستخدم بسرعة وسهولة. يمكن استخدام ReactJS بشكل مستقل أو مع مكتبات وإطارات أخرى في تطوير تطبيقات الويب. ....

ايه هي ال react ؟

ال react هي عباره عن open-source javascript library بنستخذمها عشان ن build user interfaces

ال عمل react هي شركه facebook وبدأ ال developers يستخدموها عشان يعملوا  dynamic and single page app وكمان بسبب ال performance ال بتقدمها ال react

ال react بتعتمد علي approach مهم جدا وهو ال component-based approach
وال من خلاله ال react بتقسم ال project ل components وكل component بيبقي ليه logic خاص بيه وتقدر تعمل عليه modify و update بشكل مستقل

ال react بتستخدم مبدأ مهم جدا وهو virtual dom وده عشان لو حصل اي تغير ف ال data يحصل update ع طول من غير reload

ال react بتتميز ب reusability و efficiency عاليه جدا وده بسبب ال react component based-architecture ال بيسمح لل developers ان هما يعملوا reusable component تقدر تستخدمه ف كذا مكان ف project وده هيسهل عليك جدا ف ال maintenance

تاني حاجه هتقدمهالك ال react هي ال flexability وده لان انت ممكن تستخدمها ف web developement وكمان تقدر تسخدمها ف mobile development وده عن طريق ال react native
وتقدر كمان تستخدمها ف مجال ال desktop development  عن طريق ال electron. js

تالت حاجه وهي ال performance العاليه ال بتقدمها ال react وده بسبب ان هي بتستخدم virtual dom و efficient rendering system ودول مهمين جدا خصوصا لو انت شغال ع large-scale project

ف هي كويسه جدا لو هتتعلمها وهتساعدك كتير جدا ف شغلك

خطة تعلّم لكل لغة من لغات الـ Frontend من أكاديمية الزيرو.. رهيبة جدًا  🥹👇🏻


1️⃣ خطة دراسة لغة HTML
https://elzero.org/study/html-2021-study-plan/

2️⃣ خطة دراسة لغة CSS
https://elzero.org/study/css-2021-study-plan/

3️⃣ خطة دراسة لغة جافاسكريبت
https://elzero.org/study/javascript-bootcamp-2021-study-plan/

4️⃣ خطة دراسة لغة تايب سكريبت
https://elzero.org/study/typescript-study-plan/

5️⃣ خطة دراسة Sass
https://elzero.org/study/sass-2021-study-plan/

📌موقع Colorhub يساعدك على اختيار الوان متناسقة لتصميمك القادم 👌
اختر Palette جاهز وتقدر تعدل عليه ومن ثم تستخرج اكواد الألوان بسهولة وتصديرها كملف CSS 😍
https://colorhub.vercel.app/

دورة تعلم لغة البرمجة C من الصفر إلى الاحتراف 🔥🔥
https://youtube.com/playlist?list=PLfK5X-fTOAT4-kUfJLKWfcLeYQ_iOI2J4

📌موقع Colorhub يساعدك على اختيار الوان متناسقة لتصميمك القادم 👌
اختر Palette جاهز وتقدر تعدل عليه ومن ثم تستخرج اكواد الألوان بسهولة وتصديرها كملف CSS 😍
https://colorhub.vercel.app/

لو انت شغال او لسه بتتعلم Front end الموقع ده هيفيدك 😀 👇

الموقع هتلاقي عليه  buttons, checkboxes , switches, cards, loaders , Forms جاهزة والي تقدر من خلالها تتعلم منها او تشتغل بيها علي طول

لينك :  https://uiverse.io/all

انهاردة هتكلم عن بعض الادوات اللي بتساعدك تكتب كود CSS بسرعة وسهولة
- موقع https://enjoycss.com/
موقع لتوليد الCSS بشكل ديناميكي وسهل بتبدأ بأختيار العنصر الي محتاج تنسقه
(Blank - input - block - Button) والموقع بيديك شكل العنصر والتنسيقات بتاعته بشكل قوائم منسدلة بتقدر تغير فيها براحتك وبالاخر بيولد كود css جاهز لكل اللي انت عملته
الموقع لذيذ وسهل التعامل والتعلم بسرعة وبيديك خيارات حلوة للتنسيق وبتقدر تغير اسم الكلاس المستعمل بس ممكن مشكلته الوحيدة انه غير مناسب لتنسيق layout
بس هيكون ممتاز بتنسيق العناصر الفردية وممكن بعدها تعمل تنسيق
- موقع https://www.cssmatic.com/
الموقع دا فيه اربع ادوات اساسية هم
(Gradient Generator - Border Radius - Noise Texture - Box Shadow)
المفيد بالموقع دا انك بتشوف التعديل مباشرةً قدام عينك ودا هيسهل عليك تخلص التعديل بسرعة وتنسخ الكود مباشرةً لموقعك
- موقع https://cssgrid.io/
الموقع دا جميل جداً لو عندك مشكلة بتنسيق الGrid
الموقع عبارة عن كورس مجاني بالكامل ٢٥ فيديو لكورس جريد بيشرح فيها كل تفاصيل الجريد وازاي ممكن تنفذها بموقعك بشكل صح
- موقع https://www.cssportal.com/
الموقع دا مفيد جداً وشامل لأغلب الأدوات اللي ممكن تحتاجها بالcss
الموقع مكون من اربع أقسام رئيسية هي
(CSS Generators - CSS Tools - CSS Resources - HTML Resources)
وكل قسم جواه حاجات كتيرة محتاجة مقال لوحدها,
انصحك تجرب الموقع دا وتشوف الادوات المختلفة اللي فيه عشان هتخلي تجربة انشاء الcss اسهل واحلى

كتاب تعلم لغة سي شارب من الصفر الى الاحتراف مجانا😍😍

📌نصائح للمبتدئين بمجال FrontEnd 👨‍💻

ابدأ بتعلم كيف يعمل الويب Web .
ابدأ وتعلم HTML و CSS جيدا .
لاتتعلم اطر العمل Bootstrap  و Tailwind قبل معرفتك ل CSS . ❌

استخدم أطر العمل مثل React و Next Js لانها تسهل وتختصر عليك الكثير من الوقت✅  

لاتنسى الاهتمام بمعرض اعمالك✅

مواقع css لا غني عنها لأي مبرمج 💯

1-أول موقع معنا هو Cssbuttons هتلاقي عليه كمية buttons كتير اوي
https://cssbuttons.app/

2-تاني موقع معانا هو bgjar بيقدم svg backend جاهزة وجميلة 
https://bgjar.com/

3-ثالث موقع معانا هو enjoycss وده موقع بيقدمText جاهزة و input 
https://enjoycss.com/

4-آخر موقع معنا هو bennettfeely بيقدم ليك clip path جاهزة وبيديك الكود جاهز
https://bennettfeely.com/

افضل مكتبات تساعدك في الشغل بالرياكت
متنساش الشير عشان يوصل لغيرك
1 -framer motion
https://lnkd.in/gfEjdG2x...
المكتبه دي بتسمح ليك انك تعمل انيميشن في الموقع بتاعك وهي افضل مكتبه في عمل انيميشن
2- React Hook Form
https://lnkd.in/g2FVv2A4
تاني مكتبه تقدر تعمل بيها فورم و بسهوله و بتشتغل معا الرياكت
3-react.i18next
https://react.i18next.com/
لو انت عايز تعمل موقع بلغات مختلفه فا الموقع ده ليك هيسمح ليك انك تعمل الموقع ب اكتر من لغه
4-swiperjs
https://swiperjs.com/react
نفسك تعمل سلايدر ومش عارف الموقع ده ليك وعليه اشكال كتيرة ممكن تستخدمها
5-react-chartjs
https://lnkd.in/grkszjFR
المكتبه دي من احسن المكتابات اللي ممكن تستعملها في انك تعمل زي شكل بياني في الموقع بتاعك
6-react-toastify
https://lnkd.in/gErMDeJG
المكتبه دي هتفيدك في انك تعمل اشعارات في الموقع
7-fullcalendar
https://fullcalendar.io/
لوعايز تعمل كليندر في الموقع المكتبه دي هتساعدك
8-video-react
https://lnkd.in/gsKp-TXN
لو عامل موقع افلام او عندك فكرة انك تحط فديو بس عايز ادوات التحكم تكون بشكل كويس فا استخدم المكتبه دي
9-react-select
https://lnkd.in/gpChg5eS
لو عايز تعمل سيلكت بشكل حلو فا المكتبه دي ليك