الثريد ده للناس العايزين يتعلموا برمجة تطبيقات ومواقع الويب 2020 @sudev__
ما ضروري تتعلم كل شي في الثريد دي الاساسيات واحدة بعد كده ممكن تتفرع علي حسب الحاجة العايزها/عايزاها
الحاجة الأساسية حيكون جمبها ?
ما ضروري تتعلم كل شي في الثريد دي الاساسيات واحدة بعد كده ممكن تتفرع علي حسب الحاجة العايزها/عايزاها
الحاجة الأساسية حيكون جمبها ?
@sudev__ أول حاجة الـhardware اي لابتوب مواصفاته متوسطة بينفع اما اذا عايز تشتغل في الويب وتطبيقات التلفون بنصح بالمواصفات دي
Processor: core-i5
RAM: 8 GB minimum
Storage: 500 GB Hard Drive or 256 GB Solid State Drive
Graphics: 2 GB Dedicated if possible
Processor: core-i5
RAM: 8 GB minimum
Storage: 500 GB Hard Drive or 256 GB Solid State Drive
Graphics: 2 GB Dedicated if possible
@sudev__ ? ضروريات السوفت وير:
1. نظام التشغيل علي حسب البيريحك ويندوز او ماك او لينكس بالنسبة لي ويندوز ولينكس اريح
2. الـText Editor الحاتستعملو لكتابة الكود بنصحك بـVSCode لأنه فيه extensions كتيرة وبتقدر تستعلمه لأكتر من لغة وتكنولوجيا برمجة
1. نظام التشغيل علي حسب البيريحك ويندوز او ماك او لينكس بالنسبة لي ويندوز ولينكس اريح
2. الـText Editor الحاتستعملو لكتابة الكود بنصحك بـVSCode لأنه فيه extensions كتيرة وبتقدر تستعلمه لأكتر من لغة وتكنولوجيا برمجة
@sudev__ 3. المتصفح بنصحك تستعمل Chrome او firefox ديل الاتنين فيهم احسن developer tools ابعد من اكسبلورر عشان حيجيب ليك الضغط
4. الـterminal ده الـcommand line البتستخدمه عشان تثبت الـpackages واستخداماته كتيرة الشرح ده للتبسيط شخصيا انا بستعمل git bash اما اذا بتستعمل لينكس bash كفاية
4. الـterminal ده الـcommand line البتستخدمه عشان تثبت الـpackages واستخداماته كتيرة الشرح ده للتبسيط شخصيا انا بستعمل git bash اما اذا بتستعمل لينكس bash كفاية
@sudev__ ?أساسيات الويب
1. لغة HTML دي المكون الرئيسي لصفحات الويب لازم تتعلم اساسياته بعدها تتعلم اخر اصدار ليها HTML5
2. لغة CSS ودي بتستعملها عشان تضيف ألوان وخطوط وانيمشن وتطبق بيها التصاميم علي الصفحة ودي حتتعلمها علي مراحل:
1. لغة HTML دي المكون الرئيسي لصفحات الويب لازم تتعلم اساسياته بعدها تتعلم اخر اصدار ليها HTML5
2. لغة CSS ودي بتستعملها عشان تضيف ألوان وخطوط وانيمشن وتطبق بيها التصاميم علي الصفحة ودي حتتعلمها علي مراحل:
@sudev__ 1. الأساسيات
CSS selectors, colors, fonts, typography, postiotioning and box model
2. التصميم Layout
CSS Flexbox and CSS Grid
3. الأنيمشن والتأثيرات البصرية
CSS Transitions and Animations
4. الاصدارات الجديدة CSS3
CSS Custom Properties and Multi Column Layout
CSS selectors, colors, fonts, typography, postiotioning and box model
2. التصميم Layout
CSS Flexbox and CSS Grid
3. الأنيمشن والتأثيرات البصرية
CSS Transitions and Animations
4. الاصدارات الجديدة CSS3
CSS Custom Properties and Multi Column Layout
@sudev__ ?Responsive Web Design
ده بيهتم ان تصميم الموقع يناسب كل الشاشات والـapproach هنا انك تصمم لشاشة الموبايل اول بعد داك للشاشات الكبيرة هنا محتاج تتعلم
Set Viewport in HTML meta tags
Media Queries
Fluid Widths
CSS Relative units
ديل كلهم جزء من CSS
ده بيهتم ان تصميم الموقع يناسب كل الشاشات والـapproach هنا انك تصمم لشاشة الموبايل اول بعد داك للشاشات الكبيرة هنا محتاج تتعلم
Set Viewport in HTML meta tags
Media Queries
Fluid Widths
CSS Relative units
ديل كلهم جزء من CSS
@sudev__ ?SASS
دي كانت اختيارية بس بالنسبة لي في 2020 حتبقي حاجة أساسية لأن بيها بتدر تبني themes وتعدل فيها وبتديك حرية أكبر من CSS طيب هي شنو ؟
هي لغة CSS مع اضافات بتخلي استعمالها أسهل وبتديك functionality أقوي من CSS العادية لأنك بتقدر تبني Reusable Components
دي كانت اختيارية بس بالنسبة لي في 2020 حتبقي حاجة أساسية لأن بيها بتدر تبني themes وتعدل فيها وبتديك حرية أكبر من CSS طيب هي شنو ؟
هي لغة CSS مع اضافات بتخلي استعمالها أسهل وبتديك functionality أقوي من CSS العادية لأنك بتقدر تبني Reusable Components
@sudev__ هنا نصيحتي ليك تقيف شوية وتتمرن علي الانت اتعلمته بأنك تصمم Clone من المواقع البتستخدمه يعني تبدأ تحاكي الواجهات حقت فيسبوك وتويتر وانستغرام ويوتيوب وكل المواقع البتستخدمها عشان تتمرن علي اتقان HTML5/CSS3/SASS ودي براها انجاز كبير ورحلة حلوة حتستفيد منها كتير شديد
@sudev__ CSS Famework [Choose One]
أشهر اتنين في 2019 وحيمشو لـ2020 هم
1. Bootstrap 4
دي بتسهل عليك التصميم شديد وعادة بتستخدمها لما تكون عايز واجهات سريعة بس مشكلتها انها جاهزة يعني شكل موقعك حيكون نفس شكل كل المواقع التانية
أشهر اتنين في 2019 وحيمشو لـ2020 هم
1. Bootstrap 4
دي بتسهل عليك التصميم شديد وعادة بتستخدمها لما تكون عايز واجهات سريعة بس مشكلتها انها جاهزة يعني شكل موقعك حيكون نفس شكل كل المواقع التانية
@sudev__ 2. TailWind CSS
دي حلت مشكلة bootstrap بتديك قوالب بتقدر تطبق عليها تصاميمك بسهولة موقعك حيكون شكلو مختلف وفي نفس الوقت اختصرت علي نفسك زمن
دي حلت مشكلة bootstrap بتديك قوالب بتقدر تطبق عليها تصاميمك بسهولة موقعك حيكون شكلو مختلف وفي نفس الوقت اختصرت علي نفسك زمن
@sudev__ ?Javascript
لغة جافاسكربت هي لغة الويب بتستعملها عشان تطبق المنطق البيخلي المواقع حقتك Dynamic اكتر مثال الأنيمشن ما كل الانيمشن بيتم بـCSS مرات بتضطر تستعمل معاها جافاسكربت وهي كمان حتتعلم علي مراحل:
لغة جافاسكربت هي لغة الويب بتستعملها عشان تطبق المنطق البيخلي المواقع حقتك Dynamic اكتر مثال الأنيمشن ما كل الانيمشن بيتم بـCSS مرات بتضطر تستعمل معاها جافاسكربت وهي كمان حتتعلم علي مراحل:
@sudev__ 1. الاساسيات
Data types, variables, operators, functions, conditionals, arrays, loops and objects
2. Document Object Model DOM
ده بيسمح ليك انك تتلاعب بمكونات الصفحة وتضيف تأثيرات
3. JSON and AJAX (fetch API)
ديل بيسمحوا ليك ان تغيراتك تظهر من دون ما تعمل refresh للصفحة
4. ES6
Data types, variables, operators, functions, conditionals, arrays, loops and objects
2. Document Object Model DOM
ده بيسمح ليك انك تتلاعب بمكونات الصفحة وتضيف تأثيرات
3. JSON and AJAX (fetch API)
ديل بيسمحوا ليك ان تغيراتك تظهر من دون ما تعمل refresh للصفحة
4. ES6
@sudev__ ?Tools
جزء مهم من شغلك كمطور ويب انك تعرف تستعمل الأدوات البتسهل عليك شغلك
Version Control [Git / Github]
ديل بيسهلوا عليك حفظ شغلك ولو في اي وقت حصل اي شي بتقدر ترجع شغلك كامل في اي نقطة انت عايزها
Browser Developer Tools
ديل بيسمحوا ليك تراقب وتحسن الـperformance حق موقعك
جزء مهم من شغلك كمطور ويب انك تعرف تستعمل الأدوات البتسهل عليك شغلك
Version Control [Git / Github]
ديل بيسهلوا عليك حفظ شغلك ولو في اي وقت حصل اي شي بتقدر ترجع شغلك كامل في اي نقطة انت عايزها
Browser Developer Tools
ديل بيسمحوا ليك تراقب وتحسن الـperformance حق موقعك
@sudev__ Emmet
أداة بتسهل عليك كتابة HTML/CSS شديد وبتقلل ليك زمن التطوير
Package Manager [NPM]
سواء انت front او back طالما حتستعمل جافاسكربت فلازم تتعلم تستعمل npm عشان حتحتاج مكتبات خارجية لأنك ما حتبني كل شي من الصفر
ِِAxios
دي مكتبة بتسهل عليك التعامل مع JSON و Ajax
أداة بتسهل عليك كتابة HTML/CSS شديد وبتقلل ليك زمن التطوير
Package Manager [NPM]
سواء انت front او back طالما حتستعمل جافاسكربت فلازم تتعلم تستعمل npm عشان حتحتاج مكتبات خارجية لأنك ما حتبني كل شي من الصفر
ِِAxios
دي مكتبة بتسهل عليك التعامل مع JSON و Ajax
@sudev__ ?Basic Deployment
كمطور ويب لازم تتعلم كيف ترفع المواقع في النت وهنا لازم تتعلم
1. Domain Registeration
كيف تسجل اسم نطاق بتاع موقع مقصود بيهو الاسم بين www. و .com
2. Managed Hosting
دي المساحة البيكون قاعد فيها موقعك في السيرفر وكل حاجة عندها علاقة بيهو
كمطور ويب لازم تتعلم كيف ترفع المواقع في النت وهنا لازم تتعلم
1. Domain Registeration
كيف تسجل اسم نطاق بتاع موقع مقصود بيهو الاسم بين www. و .com
2. Managed Hosting
دي المساحة البيكون قاعد فيها موقعك في السيرفر وكل حاجة عندها علاقة بيهو
@sudev__ 3. Static Hosting [Github Pages / Netlify]
المواقع البسيطة المافيها اي تواصل مع منط في السيرفر وكلها انيمشن وتعريف اسمها static دي ما مضطر تشتري ليها استضافة ممكن تستعمل static hosting مجاني من Github pages او netlify
4. المفاهيم اللازم تعرف معناها هنا هي
SSL , FTP, Git, SSH
المواقع البسيطة المافيها اي تواصل مع منط في السيرفر وكلها انيمشن وتعريف اسمها static دي ما مضطر تشتري ليها استضافة ممكن تستعمل static hosting مجاني من Github pages او netlify
4. المفاهيم اللازم تعرف معناها هنا هي
SSL , FTP, Git, SSH
@sudev__ مبروك بقيت Basic Web Developer ???
من هنا عندك طريقين
?Frontend Framework [Frontend Developer Road]
?Server Side Language [Backend Developer Road]
من هنا الطريق كله اختياري انت بتختار تتعلم شنو
من هنا عندك طريقين
?Frontend Framework [Frontend Developer Road]
?Server Side Language [Backend Developer Road]
من هنا الطريق كله اختياري انت بتختار تتعلم شنو
@sudev__ ?Frontend Road (Sub thread)
ناس الـfrontend ده سبثريد ليكم
ناس الـfrontend ده سبثريد ليكم
@sudev__ ?Backend Road (Sub thread)
ناس الـBackend تابعوا في السبثريد ده
ناس الـBackend تابعوا في السبثريد ده
@sudev__ ?Server Side Language [Choose One]
هنا لازم تتعلم أساسيات اللغة ومفاهيمها وكيف تستعملها ةتبني بيها مشروع صغير واليويتوب احسن مصدر في الحتة دي من وجهة نظري اشهر اللغات والأحسن للـBackend
Nodejs - javascript on the sever
PHP
Python
C#
Java
هنا لازم تتعلم أساسيات اللغة ومفاهيمها وكيف تستعملها ةتبني بيها مشروع صغير واليويتوب احسن مصدر في الحتة دي من وجهة نظري اشهر اللغات والأحسن للـBackend
Nodejs - javascript on the sever
PHP
Python
C#
Java
@sudev__ ? Victoy Lap (Bonus Subthead)
هنا في الـsubthread ده حوريك كيف تستعمل معرفتك بالويب عشان تبرمج تطبيقات للاندرويد والايفون وكمان تطبيقات سطح المكتب
هنا في الـsubthread ده حوريك كيف تستعمل معرفتك بالويب عشان تبرمج تطبيقات للاندرويد والايفون وكمان تطبيقات سطح المكتب
@sudev__ ?Server Side Frame [Choose One]
علي اللغة بتحتاج framework تختصر ليك وتسهل عليك التعامل مع السيرفر والبيانات الطالعة منه وكل لغة عندها framework
Nodejs (Javascript):
Expressjs
بتديك اساسيات التعامل مع السيرفر بعد كده انت بتبني كل شي براك
علي اللغة بتحتاج framework تختصر ليك وتسهل عليك التعامل مع السيرفر والبيانات الطالعة منه وكل لغة عندها framework
Nodejs (Javascript):
Expressjs
بتديك اساسيات التعامل مع السيرفر بعد كده انت بتبني كل شي براك
@sudev__ Adonisjs
دي اتقل وبتديك functions اكتر كل العليك انك تعدلها علي حسب احتياجك بس مشكلتها انك ما بتكون فاهم الحاصل وراء الكواليس شنو فتصحيح الاخطاء اصعب فيها
Featherjs
كويسة شدييييد لتطبيقات الـrealtime زي الشات وهي مبنية فوق expressjs
دي اتقل وبتديك functions اكتر كل العليك انك تعدلها علي حسب احتياجك بس مشكلتها انك ما بتكون فاهم الحاصل وراء الكواليس شنو فتصحيح الاخطاء اصعب فيها
Featherjs
كويسة شدييييد لتطبيقات الـrealtime زي الشات وهي مبنية فوق expressjs
@sudev__ Nestjs
اذا انت جاي من الـfrontend وبتستعمل Angular دي الأنسب ليك لأنها برضو بتستعمل typescript ونظام الـcomponents
?PHP
Laravel
مشابهة لـAdonisjs بس اللغة مختلفة
Symphony
عبارة عن reusable php components بس تعلمها صعب
?Python
Django
زي Laravel بس عندها قواعد معينة لازم تتطبق
اذا انت جاي من الـfrontend وبتستعمل Angular دي الأنسب ليك لأنها برضو بتستعمل typescript ونظام الـcomponents
?PHP
Laravel
مشابهة لـAdonisjs بس اللغة مختلفة
Symphony
عبارة عن reusable php components بس تعلمها صعب
?Python
Django
زي Laravel بس عندها قواعد معينة لازم تتطبق
@sudev__ Flask
بتشبه express بتديك نفس الحرية في البرمجة لكن بتضطر تبني كل شي براك
.NET for C#
Spring for Java
جافا عادة بيستعملوها المؤسسات الكبيرة
بتشبه express بتديك نفس الحرية في البرمجة لكن بتضطر تبني كل شي براك
.NET for C#
Spring for Java
جافا عادة بيستعملوها المؤسسات الكبيرة
@sudev__ عادة بيجو مع بعض 3 حاجات لغة وframework وdatabse عشان يكملو الـBackend
?Databases
Relational Database
ديل بيستعملو الجداول عشان يخزنوا البيانات واشهرهم
MySQL / PostgreSQL
NOSQL Database
ديل بيستعملو الـObjects عشان يخزنوا البيانات زي
MongoDB
?Databases
Relational Database
ديل بيستعملو الجداول عشان يخزنوا البيانات واشهرهم
MySQL / PostgreSQL
NOSQL Database
ديل بيستعملو الـObjects عشان يخزنوا البيانات زي
MongoDB
@sudev__ Cloud Database
دي بتكون مخزنة في سيرفرات بعيدة عنك زي Firebase و AWS
Lightweight
دي بستعملوها للتطبيقات الما بتحتاج مساحة تخزين كبيرة والـcaching مثال ليها
Redis and SQLite
دي بتكون مخزنة في سيرفرات بعيدة عنك زي Firebase و AWS
Lightweight
دي بستعملوها للتطبيقات الما بتحتاج مساحة تخزين كبيرة والـcaching مثال ليها
Redis and SQLite
@sudev__ يلا هنا كل كم تكنولوجيا بستعملهم مع بعض اسمهم stack في الويب عندك الـbackend مع الـfrontend بخليك full stack بس اي واحد فيهم ؟
MEAN Stack
MongoDB + Expess + Nodejs + Angular
MERN Stack
MongoDB + Expess + Nodejs + React
MEVN Stack
MongoDB + Expess + Nodejs + Vue
MEAN Stack
MongoDB + Expess + Nodejs + Angular
MERN Stack
MongoDB + Expess + Nodejs + React
MEVN Stack
MongoDB + Expess + Nodejs + Vue
@sudev__ دي اشهر الـStacks المستعملة اما اذا انت backend بس او لسه ما اتعلمت frontend framework فحتحتاج تتعلم تبني APIs وهنا بتجي
GraphQL + Apollo
هي عبارة عن لغة استرجاع بيانات من database بصورة سريعة لأنها بستعمل الـGraph pattern بتستعمل معاها Apollo للـstate management
GraphQL + Apollo
هي عبارة عن لغة استرجاع بيانات من database بصورة سريعة لأنها بستعمل الـGraph pattern بتستعمل معاها Apollo للـstate management
@sudev__ ?Content Management System
ده نظام مكون بيتيح ليك وللعميل الانت بنيت ليهو الموقع انكم الاتنين تضيفوا او تعدلوا في محتوي الموقع وعنده نوعين
?Traditional CMS
ده بيكون عنده frontend و backend ومثال ليه wordpress و Drupal
ده نظام مكون بيتيح ليك وللعميل الانت بنيت ليهو الموقع انكم الاتنين تضيفوا او تعدلوا في محتوي الموقع وعنده نوعين
?Traditional CMS
ده بيكون عنده frontend و backend ومثال ليه wordpress و Drupal
@sudev__ ?Headless CMS
ده backend بس من غير frontend عادة بتستعمل site generator عشان تبني الـfront حقه ومثال ليهو Wordpress API و Contnetful
ده backend بس من غير frontend عادة بتستعمل site generator عشان تبني الـfront حقه ومثال ليهو Wordpress API و Contnetful
@sudev__ ?Deployment and DevOps
دي الأدوات البتستعملها عشان ترفع الـbackend او الـweb app حقك اونلاين ولازم تعرف المفاهيم دي
SSH - Web Servers - App Hosting - Virtualization - Testing
دي الأدوات البتستعملها عشان ترفع الـbackend او الـweb app حقك اونلاين ولازم تعرف المفاهيم دي
SSH - Web Servers - App Hosting - Virtualization - Testing
@sudev__ Web Server Enviroments
دي البيئة البيشغل فيها المنطق بتاع الموقع ودي اشهرها اتنين
Apache / NGINX
App Hosting
دي بيئةجاهزة تقدر تشغل فيها تطبيقك طوالي واحسنها
Heroku
Virtualization
ده معناه انك بتعمل بيئة عمل افتراضية كل الناس في فريقك يقدروا يستعملوها معاك ودي بتتعمل بـDocker
دي البيئة البيشغل فيها المنطق بتاع الموقع ودي اشهرها اتنين
Apache / NGINX
App Hosting
دي بيئةجاهزة تقدر تشغل فيها تطبيقك طوالي واحسنها
Heroku
Virtualization
ده معناه انك بتعمل بيئة عمل افتراضية كل الناس في فريقك يقدروا يستعملوها معاك ودي بتتعمل بـDocker
@sudev__ لو انت جاي من الـfrontend لما توصل هنا حتكون بقيت fullstack ولو backend انت وصلت خط النهاية بعد كده لازم تتمرن عشان تتقن الاتعلمته وتوثقه بالمشاريع العملية عشان ترسخ المفاهيم
?Congratulaaaations
لو عايز تمشي لحاجة تانية تابع في الثريد الرئيسي حنتكلم عن تطبيقات التلفون
?Congratulaaaations
لو عايز تمشي لحاجة تانية تابع في الثريد الرئيسي حنتكلم عن تطبيقات التلفون
@sudev__ Mobile Development [Choose One]
Flutter
دي تكنولوجيا من غوغل بتساعدك تبني تطبيقات تشتغل في الاندرويد والـios وبتستعمل لغة dart قريبة في تكوينها للغة بايثون
React Native
استعمل معرفتك بـReact عشان تعمل تطبيقات للتلفون عن طريق التكنولوجيا دي وحيشتغل في الاتنين اندرويد وأيفون
Flutter
دي تكنولوجيا من غوغل بتساعدك تبني تطبيقات تشتغل في الاندرويد والـios وبتستعمل لغة dart قريبة في تكوينها للغة بايثون
React Native
استعمل معرفتك بـReact عشان تعمل تطبيقات للتلفون عن طريق التكنولوجيا دي وحيشتغل في الاتنين اندرويد وأيفون
@sudev__ Xamarin
اذا بتستعمل C# دي الخيار الانسب ليك عشان تعمل تطبيقات تشتغل في الاندرويد والأيفون
اذا بتستعمل C# دي الخيار الانسب ليك عشان تعمل تطبيقات تشتغل في الاندرويد والأيفون
جاري تحميل الاقتراحات...