رئيس مجلس الإدارة ورئيس التحرير أحمد حمدي
الرئيسية‹ الكورسات ‹برمجة وتطوير المواقع

Full Stack Web Development Tutorial Course

👤 WB Web Development Solutions 🎬 132 درس ⏱️ 26 ساعة 16 دقيقة 📶 مبتدئ 🇺🇸 English
Introduction to Web Development | Full Stack Web D
🏆أوائل أكاديمية مصر 24اتعلّم كل يوم ونافس على التاج 👑الترتيب ←
EG-24 ACADEMY
EG24
EG-24ACADEMY
— أكاديمية مصر 24 —
CERTIFICATE
OF COMPLETION
THISCERTIFICATE IS PROUDLY PRESENTED TO
اسمك هنا
FOR SUCCESSFULLY COMPLETING THE COURSE
Full Stack Web Development Tutorial Course
ISSUED ON
08 أكتوبر 2026
Ahmed Hamdy
AHMED HAMDY
FOUNDER
VERIFY CERTIFICATE
CERTIFICATE ID
PREVIEW
رقم تحقق الشهادة
EG24
ACADEMY
LEARN GROW
🔒

شاهد 50% من الكورس واحصل على شهادة إتمام باسمك

✅ تتبع تقدمك في الكورس
🏆 شهادة مجانية عند الإتمام
📊 إحصائياتك محفوظة دائماً
🔖 استكمل من حيث توقفت

إنشاء حساب مجاني يأخذ ثوانٍ فقط

📋 محتوى الكورس 132 درس · 26 ساعة 16 دقيقة
  • 1 Introduction to Web Development | Full Stack Web Development Tutorial 7:59
  • 2 2. What is an IDE? | Installing an IDE | Full Stack Web Development Tutorial 5:37
  • 3 3. Building Your First Website | Learn HTML | Full stack web development Tutorial Course 12:48
  • 4 4. Intro to HTML, HEAD, BODY, and HEADER | Full stack web development Tutorial Course 2022 10:33
  • 5 5. Lists, Paragraphs, and Text Styling - Full stack web development Tutorial Course 8:00
  • 6 6. Displaying Data With Table - Full stack web development Tutorial Course 7:39
  • 7 7. Learn HTML Forms, Img and Iframe Tags - Full stack web development Tutorial Course 12:22
  • 8 8. What is CSS ? - Full stack web development Tutorial Course 3:23
  • 9 9. How to use Inline, Internal and External CSS - Full stack web development Tutorial Course 8:58
  • 10 10. Element, ID and Class Selectors - Full stack web development Tutorial Course 10:37
  • 11 11. CSS Colors and Shadows - Full stack web development Tutorial Course 14:19
  • 12 12. CSS Backgrounds And Borders - Full stack web development Tutorial Course 10:35
  • 13 13. Using browser inspector tools - Full stack web development Tutorial Course 13:32
  • 14 14. Combinators in CSS - Full stack web development Tutorial Course 5:32
  • 15 15. Grouping in CSS - Full stack web development Tutorial Course 5:33
  • 16 16. Specificity in CSS - Full stack web development Tutorial Course 15:17
  • 17 17. Text Styling And Formatting - Full stack web development Tutorial Course 20:15
  • 18 18. Google Fonts API - Full stack web development Tutorial Course 8:16
  • 19 19. Responsive CSS Images - Full stack web development Tutorial Course 9:50
  • 20 20. CSS Padding And Margin - Full stack web development Tutorial Course 9:43
  • 21 21. CSS Rows And Columns - Full stack web development Tutorial Course 13:07
  • 22 22. Intro to building your first CSS for website - Full stack web development Tutorial Course 1:16
  • 23 23. Building the Navbar - Full stack web development Tutorial Course 22:49
  • 24 24. Making the Navbar Mobile Responsive, Part 1 - Full stack web development Tutorial Course 11:01
  • 25 25. Making the Navbar Mobile Responsive Part 2 - Full stack web development Tutorial Course 23:45
  • 26 26. Creating the Form Group - Full stack web development Tutorial Course 30:48
  • 27 27. Working with CSS iframes - Full stack web development Tutorial Course 22:18
  • 28 28. Working with CSS images and box shadows - Full stack web development Tutorial Course 42:36
  • 29 29. Working with text and image spacing - Full stack web development Tutorial Course 28:26
  • 30 30. Building the footer using CSS - Full stack web development Tutorial Course 18:02
  • 31 31. Introduction to JavaScript Tutorial For Beginners - Full stack web development Tutorial Course 8:51
  • 32 32. Javascript Quick References for faster learning - Full stack web development Course 4:22
  • 33 33. Javascript Comments And How to Link Scripts - Full stack web development Course 7:45
  • 34 34. Javascript Variables And Strings - Full stack web development Course 12:58
  • 35 35. Javascript Numbers and Operators - Full stack web development Course 8:04
  • 36 36. Javascript comparison operators and conditional operators - Full stack web development Course 15:41
  • 37 37. Javascript Logical Operators - Full stack web development Course 15:20
  • 38 38. Javascript Arrays - Full stack web development Course 16:17
  • 39 39. Javascript Loops (for, while, do while) - Full stack web development Course 14:23
  • 40 40. Javascript Functions and methods - Full stack web development Course 22:20
  • 41 41. Javascript Objects - Full stack web development Course 27:06
  • 42 42. Javascript Bind - Full stack web development Course 8:31
  • 43 43. Percentage Calculator & Setting Up the Form with JavaScript - Full stack web development Course 7:57
  • 44 44. Percentage Calculator And Grabbing Elements With JavaScript - Full stack web development Course 10:39
  • 45 45. Percentage Calculator using Event Listeners in JavaScript - Full stack web development Course 12:55
  • 46 46. Percentage Calculator Algorithm And Prevent Default with JS - Full stack web development Course 8:10
  • 47 47. How Version Control Works - Full stack web development Course 12:00
  • 48 48. Basic macOS Terminal Commands to learn Git CLI - Full stack web development Course 14:24
  • 49 49. Learn Git Basics and Github CLI Commands - Full stack web development Course 16:21
  • 50 50. Setting up Github on macOS - Full stack web development Course 5:36
  • 51 51. Github vs Bitbucket - Full stack web development Course 3:07
  • 52 52. Git Local & Remote Repositories - Full stack web development Course 17:33
  • 53 53. Working Through Git Merge Conflicts - Full stack web development Course 11:18
  • 54 54. What is Bootstrap ? - Full stack web development Tutorial Course 3:13
  • 55 55. Downloading Bootstrap 4 - Full stack web development Tutorial Course 3:05
  • 56 56. Bootstrap 4 Project Setup - Full stack web development Tutorial Course 7:16
  • 57 57. Overview of Bootstrap 4 Components - Full stack web development Tutorial Course 5:58
  • 58 58. Understanding Bootstrap 4 Classes - Full stack web development Tutorial Course 3:16
  • 59 59. Using the Grid System in Bootstrap 4 - Full stack web development Tutorial Course 18:48
  • 60 60. Bootstrap 4 Cards & Creating a Sign-in Portal Box - Full stack web development Tutorial Course 19:37
  • 61 61. Bootstrap 4 Forms | Adding an image & input fields - Full stack web development Tutorial Course 16:39
  • 62 62. Bootstrap 4 Adding button and labels in login form - Full stack web development Tutorial Course 18:32
  • 63 63. Bootstrap 4 Grids | Finishing Mobile Compatibility - Full stack web development Tutorial Course 8:30
  • 64 64. Bootstrap 4 Skate or Die Intro - Full stack web development Tutorial Course 1:17
  • 65 65. Bootstrap 4 Working with Navbars - Full stack web development Tutorial Course 10:33
  • 66 66. Bootstrap 4 Jumbotron and Carousels - Full stack web development Tutorial Course 23:16
  • 67 67. Bootstrap 4 Nesting rows and columns - Full stack web development Tutorial Course 20:56
  • 68 68. Bootstrap 4 Modals and PopUp - Full stack web development Tutorial Course 16:12
  • 69 69. Bootstrap 4 Adding images and buttons - Full stack web development Tutorial Course 18:59
  • 70 70. Bootstrap 4 Sizing Modals - Full stack web development Tutorial Course 18:20
  • 71 71. Bootstrap 4 Building the Footer - Full stack web development Tutorial Course 7:35
  • 72 72. Bootstrap 4 Working with Font Awesome Favicons - Full stack web development Tutorial Course 15:34
  • 73 73. How to use SCSS in HTML - Intro to Sass - Full stack web development Tutorial Course 1:11
  • 74 74.  What is Sass? - SASS Tutorial - Full stack web development Tutorial Course 8:03
  • 75 75 . How to install Sass and compile it to CSS - Full stack web development Tutorial Course 11:47
  • 76 76.  Your FIRST Sass Website! - Full stack web development Tutorial Course 29:48
  • 77 77.  Different tools to compile Sass - Full stack web development Tutorial Course 6:45
  • 78 78.  How to structure your Sass ? - Full stack web development Tutorial Course 14:45
  • 79 79.  Sass Partials Maintainable Styles Rules - Full stack web development Tutorial Course 7:17
  • 80 80.  Sass Variables and Imports | Create a clean Scalable Stylesheet - Full stack web development 20:54
  • 81 81. Sass Mixins Save time & recycle styles - Full stack web development Tutorial Course 11:57
  • 82 82.  Sass Extends Share style properties between other selectors - Full stack web development 6:19
  • 83 83. Final Project Intro to our Landing Page using SASS - Full stack web development Tutorial 1:01
  • 84 84 . Final Project Setting up our Variables With Sass - Full stack web development Tutorial Course 15:23
  • 85 85.  Final Project Styling our Navbar with Sass - Full stack web development Tutorial Course 11:06
  • 86 86. Final Project Creating the Banner Container - Full stack web development Tutorial Course 3:20
  • 87 87. Final Project Adding Content to our Banner Container - Full stack web development Tutorial 10:26
  • 88 88. Final Project Doing some quick cleanup in our Sass files - Full stack web development Tutorial 4:26
  • 89 89.  Final Project Using the Extend method - Full stack web development Tutorial Course 5:04
  • 90 90. Final Project Styling a section splitter with Sass - Full stack web development Tutorial Course 5:03
  • 91 91.  Final Project Using advanced Mixings - Full stack web development Tutorial Course 21:16
  • 92 92.  Final Project Styling the next Container with Sass - Full stack web development Tutorial Course 5:51
  • 93 93.  Final Project Finishing our Landing Page Congrats! - Full stack web development Tutorial Course 10:42
  • 94 94. Set Up Hosting For Your Web App 1:15
  • 95 95. Creating a server 5:28
  • 96 96. Accessing your server 2:13
  • 97 97. Installing Nginx 4:08
  • 98 98. Creating server SSH Keys 4:03
  • 99 99. Uploading files to your server 2:32
  • 100 100. Setting up a domain 5:30
  • 101 101. Final Step Configuring Nginx 7:52
  • 102 102. Understanding Web Requests 17:14
  • 103 103. Installing Node on macOS 7:50
  • 104 104. Basics of Node 10:41
  • 105 105. Node Modules 9:24
  • 106 106. Building Your First API 5:40
  • 107 107. Postman, GET & POST Requests 17:00
  • 108 108. URL Parameters & Delete Requests 19:25
  • 109 109. Installing MongoDB on macOS 18:17
  • 110 110. Working With the Mongo Shell 5:43
  • 111 111. Working on Mongo Shell 12:19
  • 112 112. Searching for Documents 8:06
  • 113 Full stack web development Course | 113. DELETION AND DOCUMENTATION 4:25
  • 114 Full stack web development Course | 114. SWAG SHOP API: PROJECT CREATION 10:10
  • 115 Full stack web development Course | 115. SWAG SHOP API: CREATING MODELS 14:43
  • 116 Full stack web development Course | 116. Swag Shop API: Posting Products 12:56
  • 117 Full stack web development Course | 117. Swag Shop API: Fetching Products 9:57
  • 118 Full stack web development Course | 118. Swag Shop API: Populating Data 19:22
  • 119 Full stack web development Course | 119. Swag Shop: Setting Up React Tooling 18:59
  • 120 Full stack web development Course | 120. Swag Shop: Installing Bootstrap React 11:29
  • 121 Full stack web development Course | 121. Swag Shop: Setting Up the React API 6:27
  • 122 Full stack web development Course | 122. Swag Shop - Creating a HTTP Service 19:03
  • 123 Full stack web development Course | 123. Swag Shop: Promises With ES6 & React 12:21
  • 124 Full stack web development Course | 124. Swag Shop: Components in React - Website Product 13:49
  • 125 Full stack web development Course | 125. Swag Shop: Props in React 11:02
  • 126 Full stack web development Course | 126. Swag Shop: Working With State in React 13:47
  • 127 Full stack web development Course | 127. Swag Shop: Creating a WishList Component 24:51
  • 128 Full stack web development Course | 128. Swag Shop: Building a Singleton Data Service 11:24
  • 129 Full stack web development Course | 129. Swag Shop: Creating a Notification Service 13:10
  • 130 Full stack web development Course | 130. Swag Shop: Posting Notifications to React Components 7:32
  • 131 Full stack web development Course | 131. Swag Shop: Observing Notifications in React 13:48
  • 132 Full stack web development Course | 132. Swag Shop: Finishing Our Full Stack React App 16:15
▶ يُشغَّل الآن
Introduction to Web Development | Full Stack Web Development Tutorial

📘 نظرة عامة على الكورس

الكورس من تقديم WB Web Development Solutions، ويضم 132 درسًا بإجمالي مدة 26 ساعة و16 دقيقة. أطول الدروس «Working with CSS images and box shadows - Tutorial» بمدة 42 دقيقة، ومتوسط مدة الدرس 11 دقيقة. تبدأ الرحلة بدرس «Introduction - Tutorial» وتنتهي بدرس «132. Swag Shop - Finishing Our React App». لو خصصت 30 دقيقة يوميًا ستنهي الكورس خلال 53 يومًا تقريبًا. المحتوى موجّه إلى المبتدئين في مجال برمجة وتطوير المواقع.

لماذا تتعلم Full Stack Web Development Tutorial؟

  • DBA مطلوب في كل شركة تملك بيانات — وهذا يعني كل الشركات تقريباً.
  • مجاني بالكامل — ابدأ الآن دون أي رسوم
  • شهادة إتمام باسمك من أكاديمية مصر ٢٤ — أضفها لـ CV وLinkedIn
  • تعلّم في أي وقت — بالسرعة التي تناسبك
  • PostgreSQL أصبح خيار الشركات الكبرى بديلاً مفتوح المصدر لـ Oracle بأداء مماثل.

مسار التعلم في هذا الكورس

يسير الكورس بترتيب متدرّج: Introduction - Tutorial ← Javascript Numbers and Operators ← Bootstrap Nesting rows and columns - Tutorial ← Setting up a domain ← 132. Swag Shop - Finishing Our React App.

المتطلبات السابقة

لا يحتاج الكورس خبرة سابقة في برمجة وتطوير المواقع؛ يبدأ معك من الأساسيات. كل ما تحتاجه: جهاز متصل بالإنترنت، ووقت ثابت للتطبيق بعد كل درس.

أول درس في الكورس: «Introduction - Tutorial».

أدوات شائعة في مجال برمجة وتطوير المواقع

  • MySQL
  • PostgreSQL
  • MongoDB Compass
  • Oracle
  • SQL
  • DBeaver

ما تحتاجه لتطبيق الكورس

  • لابتوب بمعالج Core i5 أو Ryzen 5 أو أحدث
  • رام 8 جيجا على الأقل، و16 جيجا أفضل
  • قرص SSD لتشغيل أدوات التطوير بسرعة

الوظائف المرتبطة بهذا الكورس

  • مطور واجهات أمامية: بناء واجهات المواقع التفاعلية
  • مطور باك إند: بناء الخوادم وقواعد البيانات وواجهات API
  • مبرمج: كتابة الكود وبناء البرامج وحل المشكلات التقنية

متوسط رواتب مطور واجهات أمامية في 2026

  • مصر: 9,520 – 45,997 جنيه شهريًا
  • السعودية: 6,493 – 22,019 ريال شهريًا
  • الإمارات: 12,782 – 33,231 درهم شهريًا

وللمقارنة: مطور باك إند في مصر 10,541 – 50,290 جنيه، ومبرمج في مصر 11,248 – 45,108 جنيه.

أرقام شهرية تقريبية من بيانات Paylab، آخر مراجعة سبتمبر 2026. الراتب الفعلي يختلف حسب الخبرة والمدينة والشركة.

كم من الوقت تحتاج لإتقان Full Stack Web Development Tutorial؟

إجمالي مدة الدروس الفعلية: 26 ساعة و16 دقيقة. إذا خصصت 30 دقيقة يوميًا ستنهيه في 53 يومًا، وبساعة يوميًا في 27 يومًا. ومع التطبيق العملي وإعادة المشاهدة احسب ضعف المدة تقريبًا، فالإتقان يأتي من التطبيق وليس من المشاهدة وحدها.

شهادات مهنية يمكنك التقدم لها لاحقًا في مجال برمجة وتطوير المواقع

شهادات دولية مستقلة لا يمنحها هذا الكورس، لكنه خطوة نحوها.

  • Meta Front-End Developer (Coursera)
  • AWS Certified Developer – Associate
  • Oracle Certified Professional: Java SE

مشاريع شائعة في مجال برمجة وتطوير المواقع

  • تصميم قاعدة بيانات ERP
  • تحسين أداء استعلامات بطيئة
  • Migration بين DBs

ماذا بعد هذا الكورس؟

بعد إتمام الكورس، يُوصى بالتعمق في: Data Warehousing، Big Data، NoSQL Advanced، Cloud Databases.

الأقسام الجامعية ذات الصلة

  • كلية الحاسبات والمعلومات
  • كلية الهندسة (قسم الحاسبات)
  • المعاهد العليا لنظم المعلومات

ابدأ مصدر دخلك من المجال

تقدر تشتغل عمل حر وتبني مواقع لعملاء على منصات زي مستقل وUpwork.

W
المدرّس / القناة
WB Web Development Solutions
🎬
عدد الدروس
132 درس
⏱️
المدة الإجمالية
26 ساعة 16 دقيقة
📶
المستوى
مبتدئ
🌍
اللغة
English
🎓
الشهادة
شهادة إتمام باسمك
✅
المتطلبات
لا توجد متطلبات مسبقة
📂
التصنيف
برمجة وتطوير المواقع

🎯 ماذا ستتعلم في هذا الكورس

✓
Introduction - Tutorial
✓
What is an IDE? - Installing an IDE - Tutorial
✓
Building Your First Website - Learn HTML - Tutorial
✓
Intro to HTML, HEAD, BODY, and HEADER - Tutorial
✓
Lists, Paragraphs, and Text Styling - Tutorial
✓
Displaying Data With Table - Tutorial
✓
Learn HTML Forms, Img and Iframe Tags - Tutorial
✓
What is CSS ? - Tutorial
✓
+ 123 موضوعًا آخر داخل الكورس

💼 وظائف مرتبطة بهذا الكورس

💼
مطور واجهات أمامية
بناء واجهات المواقع التفاعلية
💰 مصر: 9.5–46 ألف ج.م · السعودية: 6.5–22 ألف ر.س
💼
مطور باك إند
بناء الخوادم وقواعد البيانات وواجهات API
💰 مصر: 11–50 ألف ج.م · السعودية: 5.6–25 ألف ر.س
💼
مبرمج
كتابة الكود وبناء البرامج وحل المشكلات التقنية
💰 مصر: 11–45 ألف ج.م · السعودية: 3.7–18 ألف ر.س

❓ أسئلة شائعة عن الكورس

كم عدد دروس كورس Full Stack Web Development Tutorial؟ +
يضم كورس Full Stack Web Development Tutorial 132 درسًا بإجمالي مدة 26 ساعة و16 دقيقة. تتراوح مدة الدرس بين دقيقة و42 دقيقة.
من يقدم كورس Full Stack Web Development Tutorial؟ +
يقدمه WB Web Development Solutions، وتعرض مصر 24 دروسه مرتبة في صفحة واحدة مع حفظ تقدمك درسًا بدرس.
هل الكورس مناسب للمبتدئين؟ +
نعم، الكورس موجّه للمبتدئين ولا يحتاج خبرة سابقة. ويبدأ بدرس «Introduction - Tutorial».
كم يستغرق إتمام الكورس؟ +
إجمالي مدة الدروس 26 ساعة و16 دقيقة. بمعدل 30 دقيقة يوميًا تنهيه في 53 يومًا، وبساعة يوميًا في 27 يومًا.
هل أحصل على شهادة بعد الكورس؟ +
نعم، تحصل على شهادة إتمام باسمك من أكاديمية مصر ٢٤، وتُفتح بعد مشاهدة نصف الدروس على الأقل.
هل الكورس مجاني؟ +
نعم، كل الدروس متاحة للمشاهدة دون أي رسوم أو اشتراك.
ما الذي أحتاجه لتطبيق الكورس؟ +
لابتوب بمعالج Core i5 أو Ryzen 5 أو أحدث، ورام 8 جيجا على الأقل، و16 جيجا أفضل، وقرص SSD لتشغيل أدوات التطوير بسرعة.
هل يمكنني تحقيق دخل من هذا المجال؟ +
تقدر تشتغل عمل حر وتبني مواقع لعملاء على منصات زي مستقل وUpwork.
ما الوظائف المرتبطة بهذا الكورس؟ +
من الوظائف المرتبطة: مطور واجهات أمامية (من 9,520 إلى 45,997 جنيه شهريًا في مصر)، ومطور باك إند (من 10,541 إلى 50,290 جنيه شهريًا في مصر)، ومبرمج (من 11,248 إلى 45,108 جنيه شهريًا في مصر). الأرقام تقريبية من بيانات Paylab لعام 2026.
ما لغة الشرح في الكورس؟ +
الشرح باللغة الإنجليزية.

كورسات مشابهة في برمجة وتطوير المواقع

كورس HTML & CSS التطبيق علي

👤 Mohamed Elkashef🎬 13 درسًا

كورس إمبراطورية جوجل بيزنس : السيطرة، التوثيق، واسترداد الأرباح

👤 جوجل بيزنس - Google Business🎬 15 درسًا

كورس سيو كامل

👤 Dr assem imam🎬 34 درسًا

كورس سيو SEO: دروس تحسين محركات البحث

👤 علمني اب - 3 alemneUP🎬 16 درسًا
✕
🎓 أكاديمية مصر 24
EG24
EG-24 ACADEMY
EG24
EG-24ACADEMY
— أكاديمية مصر 24 —
CERTIFICATE
OF COMPLETION
THISCERTIFICATE IS PROUDLY PRESENTED TO
اسمك هنا
FOR SUCCESSFULLY COMPLETING THE COURSE
اسم الكورس هنا
ISSUED ON
08 أكتوبر 2026
Ahmed Hamdy
AHMED HAMDY
FOUNDER
VERIFY CERTIFICATE
CERTIFICATE ID
PREVIEW
رقم تحقق الشهادة
EG24
ACADEMY
LEARN GROW
أقرب طريق لحلمك — سواء مشروعك الجديد أو وظيفة أحلامك — يبدأ من هنا، بكورسات مجانية 100% للأبد.