لو React واقف عند مشروع فاضي
فاهم React؟اتعلم إزاي تحوّل اللي بتعرفهلمشاريع حقيقية.
مسار عملي يساعدك تربط HTML وCSS وJavaScript وTypeScript وReact ببعض، وتفهم إزاي تبني واجهات ومشاريع منظمة، بدل ما تفضل معتمد على شرح خطوة بخطوة.
- 115
- 22:53:58
- 4
السعر الحالي متاح لمدة--:--:--
السعر الحالي١٬٥٠٠ ج.م.٧٩٥ ج.م.
المشكلة
فاهم React…لكن بتقف عند مشروع جديد؟
بعد React Fundamentals فيه TODO من الإضافة للحذف والإكمال، وبعد React Advanced فيه Products Explorer للبحث والفلترة وجلب البيانات.
لو أنت فاهم React، لكن لما تفتح مشروع جديد مش عارف تبدأ منين… فغالبًا مشكلتك مش إنك محتاج تحفظ Hooks أكتر.
01
من Component إلى Feature
TODO React App فيه Setup وAdd Task وDelete وComplete، مش مثال useState لوحده.
02
من القائمة إلى بيانات
Products Explorer فيه useEffect وFetch وuseParams وuseContext.
الحل
مش محتاج تحفظ كل سطر…محتاج تفهم إزاي تبني المشروع.
بدل ما تتعلم كل تقنية بمعزل عن التانية، المسار بيرتّب HTML وCSS وJavaScript وTypeScript وبعدين React، ويوظّف اللي اتعلمته في TODO وProducts Explorer وEcommerce.
src/
- components/ProductCard.tsx
- pages/Products.tsx
- App.tsx
- types.ts
function Products() { return list.map(ProductCard) }
Filter
Search
قبل ما تكمّل
بتتعلم كل حاجةلوحدها؟
بتتعلم HTML وCSS وJavaScript وReact من مصادر كتير، لكن لسه حاسس إن كل حاجة منفصلة عن التانية؟
ترتيب الأقسام المنشورة: الويب، HTML، CSS، JavaScript، TypeScript، React Fundamentals، TODO، React Advanced، Products Explorer، Architecture، Authentication في الواجهة، ثم Ecommerce وLMS.
المسار
المسار من الصفحةإلى المشاريع
دي مراحل المنهج الفعلي، مش قائمة تقنيات عامة. Architecture محاضرة واحدة عن TypeScript مع React.
- 01
الويب وHTML وCSS
الصفحة قبل أي إطار.
- 02
JavaScript وTypeScript
قسم JS هو الأطول، وبعده TypeScript.
- 03
React وTODO
Components وState، ثم تطبيق المهام.
- 04
Products Explorer وAuth
جلب البيانات، ثم Login Form وAuth Context في الواجهة.
- 05
Ecommerce وLMS
Ecommerce على جزئين بمساعدة AI، وLMS محاضرة واحدة.
- 06
Working
Create CV وCompanies وFreelance. أسئلة المقابلة مش قسم دروس.
المشاريع
المشاريع الليهتشتغل عليها
المشروع الأول
TODO App
State وتفاعل مع المستخدم، وFeature كاملة من الأول للآخر.
- Search productsFilter
Notebook
Headphones
Products Explorer
عرض وبحث وفلترة لبيانات المنتجات.
Ceramic cup
Add to cartEcommerce
متجر من الفكرة للتنفيذ بـ Vibe Coding وPrompt Engineering.
- React basics
- Node APIs
- Checkout project
LMS
محاضرة واحدة لبناء منصة تعليم بمساعدة AI. مش مسار LMS طويل لوحده.
بعد الكورس
التعلم خطوة…لكن إزاي تجهّز نفسك للتقديم؟
لو هدفك تتعلم Frontend علشان تشتغل… متخليش هدفك إنك تخلص الكورس.
ممكن تخلص HTML وCSS وJavaScript وReact، وبعدها تكتشف إن عندك أسئلة تانية: أعمل Portfolio إزاي؟ أجهّز CV إزاي؟ أراجع إيه قبل الـ Interview؟ وأبدأ أقدّم منين؟ قسم Working فيه المحاضرات دي، ومفيش محاضرة باسم Portfolio، ومفيش ضمان وظيفة.
Portfolio preview
Products Explorer
Ecommerce
مواد موجودة فعلًا
- Create CV
- Companies
- Freelance
- 100 سؤال Interview في صفحة البيع
المنهج
محتوى الكورس
دي قائمة المحتوى المنشورة: الأقسام والدروس والمدد زي ما هي في صفحة الكورس.
- 15 قسمًا
- 115 محاضرة
- 22 ساعة و53 دقيقة و58 ثانية
01Introduction to the Web
- 1. Welcome9 دقائق و49 ثانية
- 2. How the Web Works12 دقيقة و20 ثانية
- 3. Developer Tools7 دقائق و16 ثانية
- 4. Setting Up the Development Environment6 دقائق و34 ثانية
- 5. Git & GitHub7 دقائق و23 ثانية
- 6. Course Roadmapدقيقتان و20 ثانية
02HTML
- 1. HTML Basics28 دقيقة
- 2. HTML Elements and Tags14 دقيقة و5 ثوانٍ
- 3. HTML Forms14 دقيقة و56 ثانية
- 4. Semantic HTML7 دقائق و47 ثانية
03CSS
- 1. CSS Basics25 دقيقة و9 ثوانٍ
- 2. CSS Selectors59 ثانية
- 3. The CSS Box Model11 دقيقة و55 ثانية
- 4. CSS Colors6 دقائق و34 ثانية
- 5. CSS Flexbox14 دقيقة و48 ثانية
- 6. CSS Grid11 دقيقة و7 ثوانٍ
- 7. Responsive Design6 دقائق و44 ثانية
- 8. CSS Animations and Transitions14 دقيقة و59 ثانية
- 9. Tailwind CSS6 دقائق و40 ثانية
04JS
- 1. Introductionدقيقتان و38 ثانية
- 2. The Node.js Problemدقيقة و17 ثانية
- 3. Getting Started6 دقائق و10 ثوانٍ
- 4. Variables16 دقيقة و3 ثوانٍ
- 5. Data Types11 دقيقة و12 ثانية
- 6. Operators26 دقيقة و27 ثانية
- 7. Conditions11 دقيقة و3 ثوانٍ
- 8. Loopsمعاينة29 دقيقة و52 ثانية
- 9. Nested Loops9 دقائق و43 ثانية
- 10. Functions 111 دقيقة وثانية
- 11. Functions 25 دقائق و4 ثوانٍ
- 12. Scope11 دقيقة و6 ثوانٍ
- 13. Default Parameters4 دقائق و42 ثانية
- 14. IIFE (Immediately Invoked Function Expression)دقيقة و30 ثانية
- 15. Arrays31 دقيقة و26 ثانية
- 16. Objects8 دقائق و58 ثانية
- 17. Looping Through Objects4 دقائق و41 ثانية
- 18. Arrays of Objects10 دقائق و30 ثانية
- 19. The `map()` Method5 دقائق و37 ثانية
- 20. The `filter()` Method4 دقائق و31 ثانية
- 21. The `reduce()` Method7 دقائق و59 ثانية
- 22. Exercises for `map()`, `filter()`, and `reduce()`18 دقيقة و20 ثانية
- 23. Callback Functions9 دقائق و44 ثانية
- 24. Promises7 دقائق و58 ثانية
- 25. Chaining Promises3 دقائق و48 ثانية
- 26. Exercises for Chaining Promises4 دقائق و10 ثوانٍ
- 27. Async/Await7 دقائق و26 ثانية
- 28. Notes on Async/Await41 ثانية
- 29. Try/Catch6 دقائق و39 ثانية
- 30. Banking System Project33 دقيقة و28 ثانية
- 31. DOM 19 دقائق و34 ثانية
- 32. DOM 29 دقائق و15 ثانية
- 33. DOM 39 دقائق و15 ثانية
- 34. DOM 410 دقائق و11 ثانية
- 35. Task Manager Project48 دقيقة وثانية
- 36. Rock Paper Scissors Gameساعة و12 دقيقة و48 ثانية
- 37. OOP 118 دقيقة و23 ثانية
- 38. OOP 2 — Inheritance10 دقائق و24 ثانية
05TS
- 1. Introduction to TypeScript10 دقائق و4 ثوانٍ
- 2. TypeScript Types — Part 110 دقائق و59 ثانية
- 3. TypeScript Types — Part 210 دقائق و20 ثانية
- 4. TypeScript Interfaces and Types9 دقائق و46 ثانية
- 5. TypeScript Classes3 دقائق و27 ثانية
- 6. Private and Public Modifiers4 دقائق و16 ثانية
- 7. Inheritance3 دقائق و51 ثانية
- 8. Generics14 دقيقة و10 ثوانٍ
06React Fundamentals
- 1. What Is React?معاينة10 دقائق و12 ثانية
- 2 - SPA vs MPA9 دقائق و4 ثوانٍ
- 3. Virtual DOM11 دقيقة و31 ثانية
- 4. First React Project14 دقيقة و17 ثانية
- 5. JSX Basics8 دقائق و23 ثانية
- 6. Props19 دقيقة و8 ثوانٍ
- 7. Composition and Children7 دقائق و5 ثوانٍ
- 8. Task Project6 دقائق و31 ثانية
- 9. What Is State?18 دقيقة و4 ثوانٍ
- 10. Render vs. Re-render5 دقائق و14 ثانية
- 11. Updating useState4 دقائق و25 ثانية
- 12. useState with Objects and Arrays10 دقائق و43 ثانية
- 13. Events10 دقائق و21 ثانية
- 14. Controlled Components9 دقائق و36 ثانية
07TODO React App
- 1. Setup11 دقيقة و8 ثوانٍ
- 2. Add Task9 دقائق و6 ثوانٍ
- 3. Show Tasks7 دقائق و8 ثوانٍ
- 4. Convert to Objects4 دقائق و5 ثوانٍ
- 5. Convert to Objects — Part 2دقيقة و46 ثانية
- 6. First Component7 دقائق و12 ثانية
- 7. Delete Task5 دقائق و7 ثوانٍ
- 8. Delete Task — Part 2دقيقة و35 ثانية
- 9. Complete Task10 دقائق و15 ثانية
08React Advanced
- 1. Rules of Hooks20 دقيقة و54 ثانية
- 2. useRef16 دقيقة و17 ثانية
- 3. useMemo13 دقيقة و30 ثانية
- 4. useCallback15 دقيقة و4 ثوانٍ
- 5. Custom Hooks11 دقيقة و46 ثانية
- 6. Styling9 دقائق و14 ثانية
- 7. Routing14 دقيقة و46 ثانية
- 8. React Router14 دقيقة و49 ثانية
- 9. NavLink6 دقائق و28 ثانية
- 10. Nested Routes14 دقيقة و51 ثانية
09Products Explorer Project
- 1. useEffect, useParams & Fetch API35 دقيقة و21 ثانية
- 2. useContext15 دقيقة و59 ثانية
- 3. Performance8 دقائق و21 ثانية
10React Architecture & TypeScript
- 1. TypeScript with React38 دقيقة
11Authentication and Authorization
- 1. Basics — Auth Flow13 دقيقة و18 ثانية
- 2. Login Response15 دقيقة و41 ثانية
- 3. Auth Context17 دقيقة و17 ثانية
- 4. Login Form
12AI E-commerce
- 1. How I Use AI5 دقائق و58 ثانية
- 2. E-commerce AI — Part 115 دقيقة و17 ثانية
- 3. E-commerce AI — Part 222 دقيقة و13 ثانية
13AI LMS
- 1. LMS AI19 دقيقة وثانيتان
14تعلم كيف "تتعلم"
- تعلم كيف "تتعلم"8 دقائق و29 ثانية
15Working
- 1. Create CV8 دقائق و35 ثانية
- 2. Companies7 دقائق و22 ثانية
- 3. Freelance5 دقائق و55 ثانية
- توفيق ربنا 🤲19 دقيقة و42 ثانية
قبل ما تقرر
الكورس دهمناسب لمين؟
هينفعك لو
- تبدأ من غير خبرة Frontend، أو عارف React وعايز تطلع من الشرح الجاهز لمشروع.
- عايز تبني TODO وProducts Explorer وEcommerce، مش تكتفي بأسماء المكتبات.
مش هينفعك لو
- لو عايز ضمان وظيفة أو رقم دخل. فيه تجهيز للتقديم، والنتيجة ترجع لفضل الله واختياره لك ثم اجتهادك.
- لو عايز Node.js وAPIs بس. ده كورس Backend، والباقة بتجمع الاتنين.
- لو بتدور على لايف بمواعيد ثابتة. المحتوى مسجّل.
تفاصيل الوصول والدعم
تعلم كيف تتعلم
نظام مذاكرة، طريقة تمرين، وإزاي تكمّل المسار من غير ما تسيبه في النص.
التطبيق جوه المشاريع
التطبيق على المشاريع المكتوبة في الصفحة دي.
دعم وإنت بتطبّق
تقدر تسأل عن نقطة أو مشكلة تقابلك وإنت بتطبّق.
نوع الوصول
المحتوى كورس مسجّل.
الاسترداد
تقدر تطلب فلوسك خلال 24 ساعة من بداية الكورس لو لقيته مش مناسبك.
مدة الوصول
الوصول للكورس مدى الحياة.
التحديثات
أي تحديث للكورس يوصلك مجانًا.
العرض
السعرواللي جواه
السعر الحالي متاح لمدة--:--:--
السعر الحالي١٬٥٠٠ ج.م.٧٩٥ ج.م.
اللي هتاخده
- HTML وCSS وJavaScript وTypeScript من الصفر
- React.js Fundamentals + Advanced
- مشاريع TODO وProducts Explorer وEcommerce
- Vibe Coding وPrompt Engineering
- قسم Working: CV وCompanies وFreelance
- 100 سؤال Interview في صفحة البيع، ومش قسم دروس
أسئلةقبل ما تشتري
لو سؤالك مش هنا، اسأله بعد ما تبعت الطلب.
هل الكورس مناسب للمبتدئ تمامًا؟
أيوه. بنبدأ من HTML وCSS وJavaScript وTypeScript، وبعدها React Fundamentals خطوة بخطوة. مش مطلوب تكون عارف React قبل بداية الكورس.
هل لازم أكون قوي في JavaScript من البداية؟
لأ. JavaScript وTypeScript متشرحين جوه المسار من الأول، وبعد الأساس بنروح لـ React.
هل المشاريع مجرد نسخ للكود؟
لأ. الهدف إنك تفهم الفكرة وتطبّقها جوه مشروع أكبر: TODO وبعدين Products Explorer وبعدين Ecommerce.
إيه قصة Vibe Coding وPrompt Engineering؟
في المشروع النهائي هتتعلم تكتب Prompts صح، وتستخدم الـ AI وأنت فاهم، وتنفّذ Ecommerce كامل كمنتج حقيقي مش كود عشوائي.
هل أقدر أتابع من الموبايل؟
أكيد. تقدر تتابع الكورس من أي جهاز يناسبك عبر المنصة، سواء موبايل أو تابلت أو كمبيوتر، وتكمّل التعلّم في الوقت والمكان اللي يريحك.
لو عارف جزء من التقنيات دي؟
الكورس بيبدأ من HTML. الأجزاء الأولى ممكن تكون مألوفة، وبعدين React والمشاريع: TODO وبعدين Products Explorer وبعدين Ecommerce.
هل الكورس يضمن لي وظيفة؟
مفيش كورس يقدر يضمنلك وظيفة. اللي بنعمله تجهيز عملي، وخطوات تساعدك تستعد للتقديم وتبدأ تتحرك ناحية الوظيفة أو Freelance.
هل يوجد دعم أثناء الكورس؟
أيوه. تقدر تسأل عن أي نقطة أو مشكلة أثناء التطبيق.
هل يوجد ضمان لاسترداد المبلغ؟
أيوه. لو بدأت الكورس ولقيت في خلال 24 ساعة إنه مش مناسبك، تقدر تطلب فلوسك.
إزاي أدفع؟
الدفع يدوي عن طريق InstaPay أو فودافون كاش على رقم التحويل 01098387705. بعد التحويل ترفع صورة الإثبات مع الطلب. رفع الصورة مش معناه إن الدفع اتأكد. الطلب يفضل تحت المراجعة لحد ما نتأكد من التحويل.
ابدأ لو الناقصهو إنك تبني الواجهة بنفسك
من HTML إلى React، ثم TODO وProducts Explorer، ثم Ecommerce، ثم درس CV وFreelance. من غير ضمان وظيفة.
ابدأ التعلّم الآنكورسات تانية
نفس أسلوب الشرح، ومسار مختلف. السعر الظاهر هنا هو سعر المسار نفسه.
Backend
اتعلم Node.js وابدأ شغلك في الـ Backend من الصفر للاحتراف
اتعلم تبني الـ Backend اللي يخلي تطبيقك يشتغل فعلًا.
السعر الحالي١٬٥٠٠ ج.م.٧٩٥ ج.م.
Full Stack
كورس Full Stack — React + Node.js في مسار واحد
اتعلم تربط أجزاء تطبيق الويب… من الواجهة لحد البيانات.
السعر الحالي٣٬٠٠٠ ج.م.١٬٠٩٩ ج.م.
العرض ينتهي خلال--:--:--
٧٩٥ ج.م.بدل ١٬٥٠٠ ج.م.