جميع الكورسات
كل قوائم التشغيل في القناة مرتبة حسب الموضوع. ابحث عن علامة ⭐ ابدأ بهذا في كل قسم، أو اتبع خريطة التعلم إذا لم تكن متأكداً من أين تبدأ.
دورة التأهيل لسوق العمل في مجال الويب
إذا كنت تريد طريقاً واحداً واضحاً من الصفر حتى العمل في الشركات، فهذه الدورة لك. 117 فيديو مرتبة في 9 مراحل، كل مرحلة تبني على التي قبلها.
- 117فيديو
- +1.2Mمشاهدة
- 9مراحل
- مجانيةبالكامل
شاهد الفيديو الأول: مقدمة الدورة
منهج الدورة
اضغط على أي مرحلة لتبدأ مباشرة من أول فيديو فيها.
ابدأ من هنا 4 قوائم
إذا كنت جديداً تماماً، شاهد هذه أولاً لتفهم المجال وتعرف طريقك.
⭐ ابدأ بهذا4 فيديوهاتكيف أبدأ تعلم مجال الويب؟
خطوتك الأولى: ماذا تتعلم وبأي ترتيب.

تعاريف مهمة في عالم الويب
مصطلحات أساسية يجب أن يعرفها كل مطور.
Advanced Definition
8 فيديوهاتفروقات مهمة في عالم الويب
افهم الفرق بين المفاهيم التي تختلط على المبتدئين.
Different In Web
5 فيديوهاتفكّر أولاً ثم اكتب الكود
تعلّم طريقة تفكير المبرمج قبل كتابة أي سطر.
Think Then Codeدورات HTML و CSS 14 قائمة
أساس أي موقع: الهيكل والتنسيق والتجاوب مع الشاشات.
⭐ ابدأ بهذادورة HTML الكاملة
تعلّم بناء هيكل صفحات الويب من الصفر.
Learn HTML Tutorial
دورة HTML5
عناصر وميزات الإصدار الخامس من HTML.
Learn HTML 5 Tutorial
دورة تعلم CSS
نسّق صفحاتك بالألوان والخطوط والمسافات.
CSS Course
دورة CSS3
الإصدار الثالث: الحركات والظلال والتدرجات.
Learn CSS 3 Tutorial
التصميم المتجاوب
اجعل موقعك يعمل على كل الشاشات.
Learn Responsive Web Design
دورة CSS Grid
بناء التخطيطات الحديثة بسهولة.
Learn CSS Grid Tutorial
خاصية Position بالتفصيل
افهم التموضع في CSS مرة واحدة وللأبد.
Css Position Property In Depth
توسيط العناصر في CSS
كل طرق توسيط أي عنصر أفقياً ورأسياً.
Centering CSS Techniques
فيديو واحدرسم الأشكال بـ CSS
أشكال مختلفة باستخدام CSS فقط.
The Shapes of CSS
دورة SVG
رسومات متجهة تبقى واضحة بأي حجم.
Learn SVG Tutorial
3 فيديوهاتمنهجيات كتابة CSS
تنظيم الكود باستخدام BEM و OOCSS و SMACSS.
Css Methodologies
دورة Bootstrap 4
صمّم مواقع متجاوبة بسرعة باستخدام Bootstrap.
Learn Bootstrap 4 Tutorial
أمثلة وتطبيقات HTML و CSS
تمارين عملية لتثبيت ما تعلمته.
Practice on HTML and CSS
حيل ونصائح HTML و CSS
أفكار صغيرة توفّر عليك الوقت.
Tips & Tricks HTML | CSSتصميم القوالب والمواقع الكاملة 12 قائمة
طبّق HTML و CSS في مواقع حقيقية من البداية للنهاية.
⭐ ابدأ بهذامشروع كبير بـ HTML5 و CSS3
موقع كامل تتعلم من خلاله الأساسيات عملياً.
HTML 5 - CSS 3 - Big Project
مشروع كبير مع Git و GitHub
مشروع عملي مع رفع الكود على GitHub.
HTML - CSS - Big Project + Git Github
تصميم قالب بـ HTML و CSS
قالب بسيط مناسب كأول مشروع.
Design Template Using ( HTML - CSS )
قالب متعدد الصفحات
موقع من عدة صفحات مترابطة.
Design Template Multiple Pages
قالب بـ HTML5 و CSS3
تصميم قالب باستخدام أحدث الإصدارات.
Design Template ( HTML 5 - CSS 3 )
17 فيديوقالب متجاوب مع Media Query
قالب يعمل على الهاتف والحاسوب.
Responsive Template ( HTML - CSS - Media Query )
13 فيديوقالب باستخدام Sass
HTML5 و Sass و Media Query في مشروع واحد.
Design Template ( HTML 5 - Sass - Media Query )
قالب باستخدام Bootstrap
تصميم سريع ومتجاوب مع Bootstrap.
Design Template ( HTML 5, CSS 3, Bootstrap )
قالب بـ Bootstrap 3 و jQuery
دمج Bootstrap مع حركات jQuery.
Design Template ( HTML 5 - CSS 3 - Bootstrap 3 - jQuery )
قالب بـ HTML و CSS و jQuery
أضف التفاعل للقالب باستخدام jQuery.
Design Template ( HTML, CSS, jQuery )
قالب بـ HTML5 و CSS3 و jQuery
مشروع قالب تفاعلي متكامل.
Design Template ( HTML 5 - CSS 3 - jQuery )
موقع كامل بـ HTML و CSS و JS
موقع متكامل يجمع الثلاث تقنيات.
Full Website [ HTML - CSS - JS ]سلسلة التصميم من الصفر 3 قوائم
رحلة كاملة من الفكرة إلى الكود. شاهدها بالترتيب.
⭐ ابدأ بهذاالجزء 1: المخطط الأولي
ارسم هيكل الموقع قبل التصميم.
Design Series Part 1 [ Wireframe ]
الجزء 2: التصميم بالفوتوشوب
حوّل المخطط إلى تصميم كامل.
Design Series Part 2 [ Photoshop ]
الجزء 3: من التصميم إلى HTML
حوّل ملف التصميم إلى موقع حقيقي.
Design Series Part 3 [ PSD to HTML ]جافاسكربت 9 قوائم
لغة الويب الأساسية، من الصفر حتى البرمجة الكائنية.
⭐ ابدأ بهذاكورس جافاسكربت الكامل
كل ما تحتاجه في JavaScript من البداية.
JavaScript Complete Tutorial
دورة تعلم جافاسكربت (الأولى)
الدورة الأولى في القناة لتعلم أساسيات اللغة.
Learn JavaScript Tutorial
تطبيقات وأمثلة جافاسكربت
تمارين عملية بعد تعلم الأساسيات.
Practice On JavaScript
البرمجة الكائنية OOP
الكائنات والكلاسات والوراثة بأسلوب مبسط.
JavaScript OOP
التخزين المحلي LocalStorage
احفظ بيانات المستخدم في المتصفح مع تطبيق عملي.
LocalStorage & Application
11 فيديوما ناتج هذا الكود؟
تحديات قصيرة تختبر فهمك العميق للغة.
JS Code Output ?
3 فيديوهاتعجائب جافاسكربت
سلوكيات غريبة في اللغة ولماذا تحدث.
JavaScript Wonders
شرح كتاب Eloquent JavaScript
قراءة وشرح لأحد أشهر كتب جافاسكربت.
Eloquent JS
كورس TypeScript
أضف الأنواع إلى كودك واكتب برامج أكثر أماناً.
TypeScript Tutorialمكتبة jQuery 4 قوائم
حركات وتفاعل بسهولة. مفيدة لفهم المشاريع القديمة.
⭐ ابدأ بهذادورة jQuery الكاملة
تعلّم المكتبة من البداية بالتفصيل.
Learn jQuery Tutorial
فيديوهانتعلّم jQuery في فيديوهين
مقدمة سريعة ومركّزة.
Learn jQuery in 2 Videos
أمثلة وتطبيقات jQuery
تطبيقات شاملة على المكتبة.
jQuery Examples
3 فيديوهاتإضافات jQuery
استخدم إضافات جاهزة في مشاريعك.
jQuery Pluginsمشاريع جافاسكربت 6 قوائم
أفضل طريقة للتعلم: ابنِ شيئاً حقيقياً.
⭐ ابدأ بهذا8 فيديوهاتمشاريع وتطبيقات جافاسكربت
مشاريع صغيرة لتقوية أساسياتك.
JavaScript Projects
5 فيديوهاتتطبيق GitHub
تعامل مع API حقيقي واعرض بيانات المستخدمين.
JS Project [ GitHub App ]
6 فيديوهاتتطبيق وصفات الطعام
مشروع عملي للبحث وعرض الوصفات.
JS Project 2 [ Recipe App ]
3 فيديوهاتتطبيق اختبارات بالـ OOP
Quiz App مبني بأسلوب البرمجة الكائنية.
JavaScript Quiz App [ Using OOP ]
7 فيديوهاتلعبة بالبرمجة الكائنية
اصنع لعبة كاملة وتعلّم OOP بشكل ممتع.
Game Using JS OOP
متجر إلكتروني وسلة مشتريات
سلة مشتريات كاملة بجافاسكربت فقط.
E-commerce ( Shopping Cart ) - Pure JSReact و Next.js 8 قوائم
المكتبة الأكثر طلباً في سوق العمل، مع مشاريع عملية.
⭐ ابدأ بهذاكورس React الكامل
Class Components و Hooks بشرح مفصل.
React Class + Hooks Full Tutorial
دورة React (الأولى)
الدورة الأولى في القناة لتعلم React.
Learn React JS Tutorial
4 فيديوهاتطرق تنسيق مكونات React
كل الطرق لإضافة CSS إلى مكوناتك.
Style React Component Ways
7 فيديوهاتتطبيق قائمة المهام
أول تطبيق React بسيط ومناسب للبداية.
React TodoList App
تطبيق الطقس
اجلب بيانات الطقس من API واعرضها.
React Weather App
تطبيق إدارة الكورسات
تطبيق CRUD كامل للإضافة والتعديل والحذف.
React Crud App [ Courses App ]
تصميم قالب باستخدام React
حوّل قالب موقع إلى مكونات React.
Create Template Using React
Next.js للمبتدئين
ابدأ مع إطار Next.js لبناء مواقع سريعة.
NextJS Tutorial For BeginnersRedux والتطبيقات الكاملة 5 قوائم
إدارة الحالة في التطبيقات الكبيرة وبناء تطبيقات Full Stack.
⭐ ابدأ بهذاكورس Redux الكامل
شرح شامل ومحدّث لإدارة الحالة.
Redux Complete Tutorial
دورة Redux (الأولى)
الدورة الأولى في القناة لتعلم Redux.
Redux Tutorial
8 فيديوهاتتطبيق CRUD مع Redux Toolkit
مثال عملي كامل بالطريقة الحديثة.
CRUD Example [ Redux Toolkit ]
16 فيديوتطبيق التذكيرات
تطبيق كامل باستخدام React و Redux.
Reminder Application [ React - Redux ]
فيديوهانتطبيق MERN
MongoDB و Express و React و Node معاً.
MERN Applicationحل المشكلات 3 قوائم
درّب عقلك على التفكير المنطقي وحل المسائل.
لغات برمجة أخرى قائمتان
توسّع خارج الواجهات الأمامية.
نصائح وأدوات 5 قوائم
معلومات سريعة توفّر وقتك وتحسّن جودة عملك.
⭐ ابدأ بهذا9 فيديوهاتافعل هذا ولا تفعل ذاك
نصائح في دقائق لكتابة كود أفضل.
Do this & Don't do that
كورسات مكثفة
شروحات سريعة ومركّزة لمواضيع مختلفة.
Crash Courses
فيديو واحدمكتبات مفيدة
مكتبات جاهزة تسهّل عملك.
Helpful Libraries
فيديوهانمواقع مفيدة لكتابة الأكواد
محررات وأدوات أونلاين.
Online Websites
3 فيديوهاتإضافات مهمة للمحررات
إضافات تسرّع كتابة الكود.
Editor's Infoسوق العمل والمسار المهني 5 قوائم
جهّز نفسك للمقابلات والوصول إلى أول وظيفة.
⭐ ابدأ بهذادورة التأهيل لسوق العمل
دورة Front End متكاملة تجهّزك للعمل.
Front End Career Course
4 فيديوهاتأسئلة مقابلات Front End
أشهر الأسئلة التقنية وكيف تجيب عليها.
Front End Interview Questions
6 فيديوهاتطريقك للشركات وسوق العمل
كيف تبحث عن عمل وتتقدّم للشركات بثقة.
3 فيديوهاتمناقشات عامة
حوارات حول البرمجة والتعلم والمجال.
9 فيديوهاتدردشة وقصص بسيطة
تجارب شخصية من رحلة المبرمج.




