تعلم برمجة المواقع🚀
6.63K subscribers
55 photos
2 videos
19 files
545 links
قناة للبرمجة والمبرمجين ...
تحتوي على مقالات للمبرمجين.
كتب وملفات pdf مجانية للمبرمجين.
نصائح للمبتدئين والمحترفين في البرمجة ...
أفضل الدورات في مجال البرمجة مجانا..
Download Telegram
جبتلكم كنز لكل اللي بيتعلموا برمجة!
موقع فيه أكتر من 10,000 صفحة ملاحظات وكتب في لغات البرمجة:
‏ - Python
‏ - Java
‏ - JavaScript
‏ - SQL
‏ - PHP
وحوالي 40 مادة تانية.

والمفاجأة؟ كله مجاني للأبد!

الرابط : https://books.goalkicker.com/
🔥41
‏إيه اللي مانعك تتعلم؟

‏- ‌ youtube.com⁩ مجاني
‏- ‌ w3schools.com⁩ مجاني
‏- ‌ tutorialspoint.com⁩ مجاني
‏- ‌ geeksforgeeks.org⁩ مجاني
‏- ‌ programiz.com⁩ مجاني
‏- ‌ tutsplus.com⁩ مجاني
‏- ‌ freecodecamp.org/learn⁩ مجاني
‏- ‌ kaggle.com/learn⁩ مجاني
‏- ‌ openclassrooms.com/courses⁩ مجاني
‏- ‌ learn.microsoft.com/training/⁩ مجاني
‏- ‌ developers.google.com/learn⁩ مجاني
‏- ‌ netacad.com⁩ مجاني
‏- ‌ cognitiveclass.ai/courses/⁩ مجاني
‏- ‌ learn.saylor.org⁩ مجاني
‏- ‌ alison.com/courses⁩ مجاني
‏- ‌ simplilearn.com/skillup-free-o⁩… مجاني
‏- ‌ mygreatlearning.com/academy⁩ مجاني
‏- ‌ scaler.com/topics/courses/⁩ مجاني
‏- ‌ learn.mongodb.com⁩ مجاني
‏- ‌ graphacademy.neo4j.com⁩ مجاني
‏- ‌ university.redis.io⁩ مجاني
‏- ‌ tableau.com/learn/training⁩ مجاني
‏- ‌ khanacademy.org⁩ مجاني

‏الخلاصة: مفيش أي عذر!
🔥7
❯ أفضل قنوات اليوتيوب اللي لازم تشترك فيها قبل 2025 لتطوير نفسك في البرمجة والتقنية:

❯ لغات البرمجة:

C ➟ Jacob Sorber
C++ ➟ TheCherno
Python ➟ Corey Schafer
JavaScript ➟ developedbyed
Java ➟ Telusko
Golang ➟ Jon Calhoun
Rust ➟ NoBoilerplate
C# ➟ kudvenkat
PHP ➟ ProgramWithGio
Ruby ➟ DriftingRuby
SQL ➟ Joey Blue
Lua ➟ Steve’s Teacher
Scala ➟ DevInsideYou
Julia ➟ TheJuliaLanguage
MATLAB ➟ Joseph Delgadillo
R ➟ marinstatlectures

❯ هياكل البيانات والخوارزميات:

❯ Abdul Bari
❯ take U forward
❯ Aryan Mittal
❯ NeetCode
❯ Kunal Kushwaha
❯ mycodeschool
❯ Jenny’s Lectures CS IT
❯ codestorywithMIK
❯ CodeWithHarry
❯ CodeHelp - by Babbar

❯ تطوير الويب وتطوير كامل (Full Stack):

HTML ➟ SuperSimpleDev
CSS ➟ Kevin Powell
Node.js ➟ codevolution
Express.js ➟ Anson the Developer
TypeScript ➟ basarat
React ➟ Dave Gray
Next.js ➟ Lama Dev
Vue.js ➟ Vue Mastery
Angular ➟ Angular University
Svelte ➟ Joy of Code
Spring ➟ SpringSourceDev
SpringBoot ➟ amigoscode
Django ➟ CodingEntrepreneurs
Laravel ➟ LaravelDaily
Blazor ➟ James Montemagno
Ruby on Rails ➟ Gorails TV

قنوات تطوير كامل:
❯ Traversy Media
❯ NetNinja
❯ Dave Gray

مشاريع:
❯ WebDevSimplified

تصميم واجهات المستخدم:
❯ developedbyed
❯ DesignCourse

❯ DevOps والحوسبة السحابية:

Git ➟ The Modern Coder
Linux ➟ Learn Linux TV
DevOps ➟ DevOpsToolkit
CI/CD ➟ TechWorld with Nana
Docker ➟ Bret Fisher
Kubernetes ➟ Kubesimplify
Microservices ➟ freeCodeCamp
Selenium ➟ edureka!
Playwright ➟ Jaydeep Karale

AWS ➟ amazonwebservices
Azure ➟ Adam Marczak
GCP ➟ edureka!
Serverless ➟ Serverless
Jenkins ➟ DevOps Journey
Puppet ➟ simplilearn
Chef ➟ simplilearn
Ansible ➟ Learn Linux TV

❯ علم البيانات وتحليلها:

الرياضيات:
❯ 3Blue1Brown
❯ ProfRobBob
❯ Ghrist Math

الذكاء الاصطناعي والتعلم الآلي:
❯ Andrew Ng (via Stanford Online)
❯ MIT OpenCourseWare
❯ sentdex
❯ Krish Naik
❯ StatQuest
❯ CampusX

Excel ➟ ExcelIsFun
Tableau ➟ Tableau Tim
PowerBI ➟ Guy in a Cube

❯ قنوات تعليم مجاني وقنوات قيمة:

تعليم مجاني:
❯ freeCodeCamp
❯ Simplilearn
❯ edureka!

قنوات قيمة:
❯ NetNinja
❯ ProgrammingWithMosh
❯ Traversy Media
❯ BroCode
❯ Codevolution
❯ TechWithTim
❯ thenewboston
❯ Telusko
❯ Derek Banas
❯ CodeWithHarry
❯ MySirG .com
❯ Leila Gharani
❯ TechWorld with Nana
❯ Hitesh Choudhary

ابدأ الاشتراك واستثمر في مستقبلك التقني من النهارده!
🔥43👍3
كـ Frontend Developers، كتير مننا بيحس بملل 😩 وإحباط لما نيجي نكتب أكواد CSS، لأنها بتستهلك وقت كبير وبتبقى مملة أحيانًا.

كنت بدور من فترة على أدوات تسهل عملية كتابة الـ CSS وتوفر وقتي ، لحد ما لقيت موقع CSS Portals، وفعلاً حسيت إنه الحل المثالي 🚀.

الموقع بيقدملك مكتبة ضخمة من الأدوات اللي بتساعدك في تصميم الـ CSS بسرعة وسهولة . تقدر تعدل على أي تصميم أو ألوان عايزها 🎨، وفي ثواني تاخد الكود كوبي وتحطه في موقعك 🖥️.

ده رابط الموقع: https://www.cssportal.com/
🔥4
⛔️🔥 فرصة لا تعوض!

دورة تدريبية في الذكاء الاصطناعي مقدمة من Microsoft مجاناً 🌟📘
المدة: 160 دقيقة
الجهة المقدمة: مايكروسوفت
التكلفة: مجانية 100٪ عبر الموقع الرسمي

📌 رابط التسجيل:
https://learn.microsoft.com/en-us/training/modules/get-started-ai-fundamentals/
🔥1🥰1
♻️ ما هو الفرق بين "مُصمم الويب" و مُطور الويب ؟

"مُصمم الويب" و "مُطور الويب" هما اثنان من الأدوار الرئيسية في صناعة تطوير الويب، وعلى الرغم من أن هناك تداخل في بعض الأحيان بين الأدوار، إلا أن كل واحد لديه مجموعة مهام ومسؤوليات مميزة. إليك الفرق بينهم:

مصمم الويب (Web Designer):
- يركز على التصميم الجمالي وتجربة المستخدم للمواقع الإلكترونية.
- يستخدم أدوات التصميم مثل Adobe Photoshop، Adobe Illustrator، Sketch، أو Figma لتصميم وتجسيم المواقع.
- يعمل على تصميم العناصر البصرية مثل الواجهات، الألوان، الخطوط، والصور.
- يتعاون مع مطوري الويب لتحويل التصاميم إلى كود HTML/CSS.

مُطور الويب (Web Developer):
- يركز على برمجة وتطوير المواقع الإلكترونية.
- يستخدم لغات برمجة مثل #HTML، #CSS، #JavaScript، وغيرها لبناء وتطوير المواقع.
- يعمل على تحسين أداء المواقع، وتحسين تجربة المستخدم، وتوفير الوظائف الديناميكية.
- يمكن أن يكون لديه مهارات في قواعد البيانات وتطوير الخادم (Backend Development)، مثل استخدام PHP، Python، أو Node.js.

بشكل عام، يمكن القول إن مُصمم الويب مسؤول عن التصميم والجماليات، بينما مُطور الويب مسؤول عن برمجة وتطوير المواقع وجعلها تعمل بشكل صحيح وفعّال.
🔥102👍2🥰1
“كـ Front-end Developer وباستخدم React، اختيار الـ Project Structure المناسب لأي مشروع خطوة أساسية لضمان إن المشروع يفضل منظم وسهل في التطوير والصيانة.
حابب أشارك معاكم طريقة التفكير اللي باتبعها، ومعاها مثال بسيط:

1️⃣ افهم طبيعة المشروع
• أول حاجة لازم تسأل نفسك:
• هل المشروع بسيط زي To-Do App؟
• ولا كبير زي Dashboard أو E-commerce Platform؟

2️⃣ اختار طريقة التقسيم المناسبة
• لو المشروع صغير، ممكن تستخدم طريقة Folder-by-type:

src/ 
├── components/ 
├── hooks/ 
├── utils/ 
├── styles/ 
├── assets/ 
└── App.jsx 


• لو المشروع كبير، طريقة Feature-based structure بتكون أنسب:

src/ 
├── features/ 
│   ├── authentication/ 
│   │   ├── components/ 
│   │   ├── hooks/ 
│   │   ├── services/ 
│   │   └── styles/ 
│   ├── dashboard/ 
│   │   ├── components/ 
│   │   ├── hooks/ 
│   │   ├── utils/ 
│   │   └── styles/ 
├── shared/ 
│   ├── components/ 
│   ├── hooks/ 
│   ├── utils/ 
│   └── styles/ 
└── App.jsx 


3️⃣ تنظيم الملفات والمجلدات
• لو عندك مشروع صغير زي To-Do App، ممكن يكون شكله كده:

src/ 
├── components/ 
│   ├── Header.jsx 
│   ├── TodoList.jsx 
│   └── TodoItem.jsx 
├── hooks/ 
│   └── useTodos.js 
├── utils/ 
│   └── dateFormatter.js 
├── styles/ 
│   └── app.css 
├── assets/ 
│   └── logo.svg 
└── App.jsx 


4️⃣ تطبيق Best Practices
• في المشاريع الكبيرة، ممكن تعتمد على Atomic Design:

src/ 
├── components/ 
│   ├── atoms/ 
│   ├── molecules/ 
│   ├── organisms/ 
│   └── templates/ 
└── pages/ 


نصيحة أخيرة:

دايمًا خليك بسيط في البداية، وماتعقدش الأمور. لو المشروع كبر، تقدر تغير الهيكلة بسهولة لو كنت منظم من البداية.
🔥5👍41🥰1
بص يا صاحبي، لو شغال على مشروع وبتفكر تستخدم React.js ولا Next.js، خليني أقولك الفرق عشان تختار اللي يناسبك.

React.js

React.js مكتبة JavaScript مرنة وسهلة جدًا، وممتازة للمشاريع اللي مش معتمد فيها على SEO أو اللي بتحتاج مرونة كبيرة. وخصوصًا لو بتعمل لوحة تحكم (Dashboard):
- الأفضل مع لوحات التحكم: لأنك مش محتاج SEO أو صفحات كتير، وReact بتديك الحرية تتحكم في كل حاجة.
- مناسبة للتطبيقات الديناميكية اللي بتحدث البيانات بشكل مباشر من غير ما تعمل Reload للصفحة.
- بتكون خيار قوي لو شغال على مشروع صغير أو متوسط وعايز تبدأ بسرعة.

Next.js

بقى لو مشروعك بيستهدف جمهور كبير، أو محتاج أداء عالي وتحسين للـ SEO، فـ Next.js هو الإطار المثالي ليك:
- بيتميز بـ Server-Side Rendering (SSR) و Static Site Generation (SSG) اللي بيحسنوا ترتيب موقعك على محركات البحث وبيخلوا تحميل الصفحات أسرع.
- ممتاز للمشاريع الكبيرة زي المتاجر الإلكترونية أو المدونات اللي فيها محتوى متغير باستمرار.
- وكمان بيسهل إضافة واجهات برمجية (APIs) داخل المشروع من غير ما تحتاج باك اند منفصل.

الخلاصة:
- لو مشروعك لوحة تحكم أو تطبيق داخلي، استخدم React.js لأنه الأنسب والأبسط.
- لو مشروعك موقع للجمهور العام أو بيعتمد على SEO، Next.js هي الحل الأفضل.

في الآخر، الموضوع كله بيرجع لطبيعة المشروع اللي شغال عليه. شغال على إيه دلوقتي؟
4🔥2🥰1
لو مهتم بالبرمجة وتطوير مهاراتك، دي مجموعة مستودعات GitHub لازم تكون عندك:

1 - Tech Interview Handbook
دليل شامل لتحضير مقابلات العمل في البرمجة.
https://github.com/yangshun/tech-interview-handbook

2 - The Algorithms
مجموعة ضخمة من الخوارزميات بكل اللغات تقريبًا.
https://github.com/TheAlgorithms

3 - Free Programming Books
آلاف الكتب البرمجية المجانية بجميع المجالات.
https://github.com/EbookFoundation/free-programming-books

4 - 1000+ Free APIs
موسوعة APIs مجانية يمكن استخدامها في مشاريعك.
https://github.com/public-apis/public-apis

5 - Coding Interview University
برنامج كامل لتحضير نفسك لمقابلات البرمجة.
https://github.com/jwasham/coding-interview-university

6 - 30 Seconds of Code
أكواد مختصرة وسريعة للحلول البرمجية الشائعة.
https://github.com/Chalarangelo/30-seconds-of-code

7 - FreeCodeCamp
أحد أفضل الموارد التعليمية البرمجية المفتوحة المصدر.
https://github.com/freeCodeCamp/freeCodeCamp
🔥21🥰1
لو عايز الكود بتاعك يبقى مظبوط من غير ما تستنى حد يراجعه، جرب الأدوات دي! 🤖
دي مواقع بتراجع الكود بتاعك أوتوماتيك، تطلع الأخطاء وتقولك تصلحها إزاي، وكل ده بسرعة ومن غير دوشة.

جرب الحاجات دي:
‏ 1 - Codacy – سريع وسهل.
‏ 2 - SonarQube – مثالي للمشاريع الكبيرة.
‏ 3 - CodeClimate – بيركز على تحسين الجودة.
‏ 4 - DeepSource – أدق التفاصيل في جيبك.
‏ 5 - CodeGuru – اقتراحات ذكية لتحسين الكود.

جرب واحدة منهم وصدقني هتحس بالفرق على طول
9🔥4👎1🥰1
بعد 466 يوماً من الصبر والرباط، قدمت فيها #غزة عشرات آلاف الشهداء الأبرار، أفراح عارمة تعمّ الشوارع فيها بعد التوصل لاتفاق وقف إطلاق النار مع العدو.

اللهم كما أنعمت تمّم، ولمّ شملهم بأحبابهم، واجعلهم منصورين دائماً يا كريم. 💚
26😭1
بص يا صاحبي، جبتلك حاجة حلوة!

جبتلك صورة متجمع فيها معظم أوامر Git اللي بنستخدمها كتير 💻🔥

لو بتشتغل في البرمجة أو التطوير، الأوامر دي هتسهل عليك الحياة جدًا!
شاركها مع حد ممكن يستفيد منها. 😍
🔥62👍2🥰1
بص يا معلم، لو اتعلمت Tailwind بعد Bootstrap وحاسس إنك مضغوط عشان بتعمل كل الـ Components بإيدك، فا الحل سهل جدًا… Flowbite!

الموقع ده: https://flowbite.com/docs

هيخلصك من وجع دماغ الـ Components الجاهزة زي ما كنت متعود مع Bootstrap، وكمان هيشتغل مع أي Framework تقريبًا.
خش اقرأ الـ Documentation، وهتحس إنك راجع تستخدم Bootstrap بس بستايل Tailwind!
🔥3🥰1
أعمل أيه عشان أكون تنين JavaScript ؟ 🐉

✅️ لغة الـ JavaScript واحدة من أهم اللغات البرمجية في العالم اليوم. من تطوير مواقع الويب إلى تطبيقات الهواتف الذكية، الجافاسكريبت تلعب دورًا كبيرًا في كل جانب من جوانب البرمجة الحديثة. لو كنت عايز تكون محترف في الجافاسكريبت.

👈 تعالى نقولك على بعض الخطوات اللي ممكن تساعدك في الوصول للمستوى ده👇

1️⃣ فهم أساسيات الـ JavaScript :
أول حاجة لازم تعملها هي إنك تفهم الأساسيات. ده يشمل قواعد اللغة الأساسية، المتغيرات، الحلقات الشرطية، والحلقات التكرارية. إبدأ بدراسة الجافاسكريبت من مصادر موثوقة زي كتب البرمجة أو المواقع التعليمية المشهورة.

2️⃣ التطبيق اليومي :
زي أي مهارة، البرمجة بالجافاسكريبت بتتطلب ممارسة مستمرة. حاول تكتب أكواد صغيرة كل يوم وتطبيق اللي اتعلمته. التطبيقات العملية دي هتساعدك تفهم المفاهيم بشكل أعمق.

3️⃣ إنشاء مشاريع وتاسكات  :
بعد ما تتقن الأساسيات، ابدأ في تنفيذ مشاريع صغيرة. ممكن تبدأ بمشروع ويب بسيط زي قائمة مهام (To-Do List) أو حاسبة (Calculator). المشاريع دي هتديك خبرة عملية وتساعدك تتغلب على التحديات البرمجية.

4️⃣ التعلم المستمر للغة :
الجافاسكريبت بتتطور بشكل مستمر، فلازم تتابع التحديثات والتقنيات الجديدة. مواقع زي MDN Web Docs و Stack Overflow هتكون مفيدة جدًا في متابعة آخر الأخبار والتطورات.

5️⃣ قراءة الكود المفتوح المصدر:
فيه مشاريع مفتوحة المصدر كتير مكتوبة بالجافاسكريبت. قراءة الكود ده ممكن تساعدك تتعلم طرق جديدة لحل المشاكل وتفهم أفضل الممارسات في البرمجة.

6️⃣ الانضمام للمجتمعات البرمجية :
الانضمام لمجتمعات برمجية زي GitHub و Reddit هيساعدك تتواصل مع مبرمجين آخرين وتستفيد من خبراتهم. ممكن كمان تشارك في مشاريع مفتوحة المصدر وتساهم بكودك.

7️⃣ تعلم إطار عمل أو مكتبة :
بعد ما تتقن اللغة، حاول تتعلم إطار عمل أو مكتبة زي React أو Vue.js. الإطارات دي بتسهل عليك كتير من العمليات وبتخليك تقدر تبني تطبيقات معقدة بشكل أسرع وأسهل.

إنك تكون محترف في لغة الجافاسكريبت مش حاجة سهلة، لكن بالممارسة والتعلم المستمر تقدر توصل للمستوى ده. ابدأ بفهم الأساسيات، وبعدها ابني مشاريع صغيرة، وتابع التطورات، وانضم للمجتمعات البرمجية. والأهم من ده كله، ما توقفش عن التعلم والممارسة🚶‍♂️
🔥53👍3🥰1
📌أفضل IDE والمحررات للغة Python 🔥😍
PyCharm
IDLE
Pydev
VS Code
Spyder
GNU Emacs
🔥6🥰1