مواقع اكيد هتفيدك لو انت مطور ويب 🥰️👏
CodePen (https://codepen.io/) - الموقع دا بيساعدك تعمل وتشوف وتشارك تطبيقات ومشاريع صغيرة
Dribbble (https://dribbble.com/) - دا موقع للمصممين ومطوري الواجهات الأمامية عشان يشاركوا أعمالهم ويستلهموا أفكار جديدة
Awwwards (https://www.awwwards.com/) - موقع لتقييم وعرض أفضل تصميمات المواقع والتطبيقات الرائعة والمبتكرة هتلاقي افكار كتيرة
Smashing Magazine (https://www.smashingmagazine.com/) - دا موقع للمقالات والأدوات والموارد المفيدة لمطوري الواجهات الأمامية والمصممين
CSS-Tricks (https://css-tricks.com/) - موقع يوفر مقالات ودروس وأمثلة عملية حول CSS و HTML وجافا سكريبت وغيرها
SiteInspire (https://www.siteinspire.com/) - موقع بيعرض مجموعة من المواقع اللي تصميمها جذاب وإبداعي وبيشجع على التأثير منها.
CSS Design Awards (https://www.cssdesignawards.com/) - دا موقع لجوائز تصميم CSS لأفضل التصميمات المواقع والتطبيقات
Webflow (https://webflow.com/) - موقع يسمحلك بإنشاء مواقع وتطبيقات ويب بدون كتابة أي كود
GitHub (https://github.com/) - موقع تقدر من خلاله تشارك وتحمل المشاريع والأكواد المصدرية وتتعاون مع فرق العمل
Frontend Mentor (https://www.frontendmentor.io/) - موقع بيقدم تحديات تصميم وتطوير لمطوري الواجهة الأمامية وبيسمحلهم إنهم يشاركوا حلولهم.

تعلم لغة بايثون من الصفر الى الاحتراف مجانا😍😍
https://youtu.be/pdsc9SVW-S8

‏مجموعة افكار لمن يرغب في التدرب على لغة php

‏1- إنشاء موقع ويب ديناميكي باستخدام PHP وقواعد البيانات MySQL.

‏ 2- إنشاء نظام إدارة المحتوى (CMS) باستخدام PHP وقواعد البيانات MySQL.

‏3- إنشاء منتدى على الإنترنت باستخدام PHP وقواعد البيانات MySQL.

‏4- إنشاء تطبيق ويب للتسوق الإلكتروني باستخدام PHP والدفع الإلكتروني.


‏5- إنشاء تطبيق ويب للتواصل الاجتماعي باستخدام PHP وقواعد البيانات MySQL.

‏6- إنشاء لوحة تحكم للمستخدم باستخدام PHP وقواعد البيانات MySQL.

‏7- إنشاء تطبيق لإدارة المواعيد باستخدام PHP وقواعد البيانات MySQL.

‏8- إنشاء تطبيق لمراقبة الأسهم باستخدام PHP وAPIs المتاحة للأسواق المالية.

🌟 مميزات لغة بايثون (python) عن باقي لغات البرمجة 💻

◐ مادياً
لن تدفع أي مبلغ لتعمل على لغة بايثون, فهي مصدر مفتوح و مجانية و ستبقى مجانية مدى الحياة.

◐ تقنياً
تستطيع البرمجة بها حتى و لو كان حاسوبك ضعيفاً أو قديماً.

◐ سهولة القراءة و التعديل
تعلمها سهل جداً و يمكن قراءة و تعديل الكود المكتوب فيها بسهولة.

◐ العمل على أكثر من منصة
البرنامج الذي تبنيه بواسطة لغة بايثون يعمل على كما على أهم أنظمة التشغيل مثل Windows, Mac OS, Linux, Unix.

◐ كائينة التوجه
تدعم مفهوم الكلاس, الكائن, التغليف, الوراثة إلخ..

◐ تعدد المهام
بايثون توفر لك تقنية الـ Multithreading و التي تسمح لك بجعل برنامجك قادراً على تنفيذ عدة أوامر مع بعض و بنفس الوقت.

◐ قواعد البيانات
بايثون توفر إنترفيسات جاهزة للتعامل مع أهم قواعد البيانات.

◐ واجهة المستخدم
يمكن بناء تطبيقات فيها واجهة مستخدم فيها.

◐ التعامل مع لغات برمجة أخرى
يمكنك التعامل مع لغات برمجة أخرى ( مثل C, C++, Java ) ضمن برنامجك المكتوب في الأساس بلغة بايثون.

◐ تعامل لغات البرمجة الأخرى مع لغة بايثون
أغلب لغات البرمجة تدعم التعامل مع لغة بايثون, أي أنهم يتيحون لك إستخدام كود مكتوب بلغة بايثون في برامج مكتوبة في الأساس بلغات برمجة أخرى ( مثل C, C++, Java ).

◐ المناهج التعليمية
العديد من المعاهد و الجامعات سواء كانت أجنبية أو عربية أصبحت تدرسها للطلاب.

كتاب تعلم لغة php من الصفر إلى الاحتراف 🔥🔥

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

واخيرا 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 اسهل واحلى