0Pricing
Frontend Academy icon

Frontend Academy

HTMLFrontendWebBeginner

طوّر مواقع ويب مذهلة وسريعة الاستجابة مع Frontend Development Academy.

🤖 مدعوم بالذكاء الاصطناعي📚 41 دورة👥 100,000+ متعلم⭐ تقييم 4.9
نظرة عامة على الدورة

بناء الطيف الكامل للـ Frontend الحديث

Frontend development هو تخصص تحويل الكود إلى كل ما يراه المستخدم ويتفاعل معه في المتصفح — بنية HTML وتقديم CSS وسلوك JavaScript والأطر والأدوات التي تجمعها معاً على مستوى الإنتاج. يغطي هذا المسار المجموعة الكاملة: من كيفية تسليم الويب لصفحة ما إلى كتابة تطبيقات React و Vue آمنة النوع وتحسين الأداء والنشر عبر خط أنابيب CI/CD.

ما ستتعلمه

ستبدأ بـ أساسيات HTML و CSS و JavaScript، ثم تكتسب طلاقة في TypeScript وـ DOM و Browser APIs والتصميم سريع الاستجابة وأنماط ES6+ بما فيها البرمجة غير المتزامنة والوحدات. من هناك ستنتقل إلى React (hooks والأنماط المتقدمة و Next.js SSR) و Vue 3 (Composition API و Nuxt 3 SSR) وإدارة الحالة والاختبار الأمامي وعمارة CSS والواجهات الحقيقية مع WebSockets. ينهي المسار تحسين أداء الويب وأمان Frontend وأنظمة التصميم و Frontend CI/CD و DevOps.

مسار التعلم

تمتد واحد وأربعون دورة عبر المستويات A1 إلى C2. تضع دورات A1 و A2 الأساسيات — كيفية عمل الويب والترميز الدلالي وحركات CSS و Git ومقدمة TypeScript. تبني دورات B1 و B2 الكفاءة المهنية: CSS Layout Mastery و JavaScript Modules and Build Tools و React و Vue 3 أساسيات و API integration و Progressive Web Apps و Server-Side Rendering مع كل من Next.js و Nuxt 3. تتعامل دورات C1 مع الاهتمامات على مستوى أعلى: Advanced TypeScript for Frontend و React Advanced Patterns و Vue Advanced Patterns و Frontend Architecture و Design Systems and Component Libraries و Frontend Security و Frontend CI/CD and DevOps. ينتهي المسار عند C2 بـ Senior Frontend Engineering، الذي يدمج كل شيء في الممارسة بدرجة الإنتاج.

كيف يعمل

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

ابدأ التعلم →

كيف ستتعلم

🎯
دروس تفاعلية
تمارين برمجة عملية مع ردود فعل فورية
🤖
معلم الذكاء الاصطناعي
احصل على مساعدة فورية من معلمنا الذكي عندما تعلق
💻
محرر مدمج
اكتب وشغّل الأكواد مباشرة في متصفحك
🏆
الشهادة
احصل على شهادة عند إكمالك للدورة
المنهج الدراسي

41 دورة

كل الدورات في مسار تعلم Frontend Academy.

01

مرحبًا بكم في تطوير الواجهات الأمامية

A13 دروس

افهموا ما يفعله مطوّرو الواجهات الأمامية فعليًا، ولماذا يُعد هذا أحد أكثر المسارات المهنية التقنية طلبًا وإبداعًا، وكيف تعمل HTML وCSS وJav…

02

كيف يعمل الويب

A14 دروسPRO

افهم أسس الويب: كيف تطلب المتصفحات الصفحات، وما الذي يفعله DNS، وكيف يعمل HTTP، وماذا يحدث عند كتابة عنوان URL. ستنهي الدرس وأنت تعرف بدقة…

03

أساسيات HTML للواجهة الأمامية

A14 دروسPRO

تعلّم اللبنات الأساسية لكل صفحة ويب. اكتب مستندات HTML5 صالحة باستخدام العناصر الدلالية، ونظّم المحتوى بالعناوين والقوائم، وضمّن الصور والر…

04

أساسيات CSS للواجهة الأمامية

A14 دروسPRO

نسّق HTML بثقة. تعلّم كيفية عمل التسلسل والأولوية، وطبّق الألوان والطباعة، وأتقن نموذج الصندوق، وتحكّم في التخطيط باستخدام خصائص العرض والت…

05

أساسيات JavaScript

A14 دروسPRO

اكتب أولى برامجك بلغة JavaScript. تعلّم التصريح عن المتغيرات، والتعامل مع أنواع البيانات البدائية، وتعريف الدوال، والتحكم في تدفق البرنامج…

06

أدوات المطوّرين وسير العمل

A14 دروسPRO

اعمل مثل مطوّر frontend محترف. أتقن Chrome DevTools للفحص وتصحيح الأخطاء، واضبط VSCode باستخدام الإضافات المفيدة، وأعدّ أدوات جودة الشيفرة…

07

مقدمة إلى TypeScript

A24 دروسPRO

أضف الأنواع إلى JavaScript واكتشف الأخطاء قبل وصولها إلى المتصفح. تعلّم نظام الأنواع في TypeScript، وصرّح بأنواع المتغيرات والدوال، وعرّف ا…

08

نموذج DOM وواجهات المتصفح البرمجية

A24 دروسPRO

اجعل HTML تفاعلية باستخدام JavaScript. حدّد العناصر، واستمع إلى الأحداث، واقرأ المحتوى وغيّره، وأنشئ العناصر أو أزلها ديناميكيًا باستخدام ن…

09

أساسيات التصميم المتجاوب

A24 دروسPRO

أنشئ تخطيطات تعمل على أي حجم شاشة. تعلّم وسم viewport meta، واستخدم Flexbox وGrid لإنشاء تخطيطات مرنة، واكتب media queries باتباع نهج البدء…

10

نماذج HTML والترميز الدلالي

A24 دروسPRO

عمّق معرفتك بـ HTML. أنشئ نماذج ميسّرة بالكامل باستخدام سمات ARIA، واستخدم المجموعة الكاملة من أنواع الإدخال في HTML5، واستفد من التحقّق ال…

11

JavaScript: المصفوفات والكائنات وES6+

A24 دروسPRO

طوّر مهاراتك في JavaScript باستخدام الصياغة الحديثة والطرائق المضمّنة القوية. عالج المصفوفات باستخدام map وfilter وreduce، وفكّك الكائنات،…

12

سير عمل Git والتعاون

A24 دروسPRO

استخدم Git بفاعلية كمطوّر frontend. تعلّم الأوامر الأساسية لحفظ العمل، وافهم الفروع لتطوير الميزات، وادفع الشيفرة إلى GitHub، وتعاون من خلا…

13

متغيرات CSS والانتقالات والحركات

A24 دروسPRO

أضف الحيوية إلى الواجهات باستخدام الحركة في CSS. استخدم الخصائص المخصّصة لرموز التصميم القابلة للصيانة، وأضف انتقالات سلسة إلى تغيّرات الحا…

14

إتقان تخطيط CSS

B14 دروسPRO

تجاوز الأساسيات لإتقان تخطيط CSS فعلًا. استكشف المحاذاة والالتفاف في Flexbox بعمق، واستفد من مناطق قوالب CSS Grid وauto-fit، واجمع بين التق…

15

وحدات JavaScript وأدوات البناء

B14 دروسPRO

افهم سلسلة أدوات JavaScript الحديثة. استخدم صياغة وحدات ES، وأدر الحزم باستخدام npm، وشغّل خوادم تطوير فورية باستخدام Vite، وتعلّم مفاهيم ا…

16

تعمّق في أنواع TypeScript وواجهاته

B14 دروسPRO

تعمّق في نظام الأنواع في TypeScript. اكتب دوال عامة قابلة لإعادة الاستخدام، واستخدم أنواع الأدوات لتحويل الواجهات، وأنشئ أنواعًا مُحوّلة وم…

17

أساسيات React

B14 دروسPRO

أنشئ أولى تطبيقات React. افهم صياغة JSX، وركّب واجهات المستخدم من مكوّنات وظيفية، ومرّر البيانات باستخدام props، وأدر الحالة المحلية باستخد…

18

React: ‏useEffect وجلب البيانات

B14 دروسPRO

زامن مكوّنات React مع الأنظمة الخارجية. تعلّم كيفية عمل useEffect، واجلب البيانات من واجهات API عند التحميل، واعرض حالات التحميل والأخطاء،…

19

أساسيات Vue 3

B14 دروسPRO

أنشئ أولى تطبيقات Vue 3 باستخدام المكوّنات أحادية الملف. تعلّم Options API والتوجيهات الأساسية، وكيفية التواصل بين المكوّنات الأب والابن با…

20

إتاحة الواجهات الأمامية

B14 دروسPRO

أنشئ واجهات يمكن للجميع استخدامها. افهم مستويات توافق WCAG، واستخدم HTML الدلالية أساسًا للإتاحة، وطبّق أدوار وسمات ARIA بطريقة صحيحة، واضم…

21

JavaScript: البرمجة غير المتزامنة

B24 دروسPRO

أتقن JavaScript غير المتزامنة من الأساس. افهم حلقة الأحداث، وانتقل من أنماط callback إلى Promises، واكتب شيفرة نظيفة باستخدام async/await م…

22

React: Hooks متقدمة

B24 دروسPRO

أتقن واجهة React hooks البرمجية بالكامل. شارك البيانات دون تمريرها عبر سلسلة props باستخدام useContext، وأدر الحالات المعقدة باستخدام useRe…

23

Vue 3: ‏Composition API والتفاعلية

B24 دروسPRO

اكتشف الإمكانات الكاملة لـ Vue 3 باستخدام Composition API. استخدم ref وreactive للحالة التفاعلية، وcomputed وwatch للقيم المشتقة والآثار ال…

24

إدارة الحالة

B24 دروسPRO

أدر حالة التطبيق على مستوى النظام بفاعلية. تعلّم Redux Toolkit لـ React، وZustand خفيف الوزن كبديل أبسط، وPinia لـ Vue، والمبادئ التي تساعد…

25

اختبار الواجهات الأمامية

B24 دروسPRO

اكتب اختبارات آلية لشيفرة الواجهة الأمامية. أعدّ Jest، واختبر مكوّنات React باستخدام Testing Library، واختبر مكوّنات Vue، وحاكِ الوحدات واس…

26

معمارية CSS

B24 دروسPRO

اكتب CSS قابلة للتوسّع. تعلّم اصطلاح التسمية BEM للحصول على محددات يمكن توقّعها، وقيّد نطاق الأنماط باستخدام CSS Modules، وأضف CSS مباشرةً…

27

تكامل API وREST

B24 دروسPRO

صِل واجهتك الأمامية بواجهات API الخلفية. استخدم Fetch API الأصلية لجميع طرائق HTTP، وأضف Axios للتقاطعات وعناوين URL الأساسية، وتعامل مع أخ…

28

العرض من جهة الخادم: Next.js

B24 دروسPRO

أنشئ تطبيقات React جاهزة للإنتاج باستخدام Next.js. افهم كلًا من Pages Router وApp Router الحديثة، وميّز بين Server Components وClient Compo…

29

العرض من جهة الخادم: Nuxt 3

B24 دروسPRO

أنشئ تطبيقات Vue متكاملة باستخدام Nuxt 3. استخدم التوجيه القائم على الملفات والاستيرادات التلقائية للتخلص من الشيفرة التكرارية، واجلب بيانا…

30

تطبيقات الويب التقدمية

B24 دروسPRO

حوّل المواقع إلى تجارب شبيهة بالتطبيقات. اكتب Web App Manifest لإتاحة التثبيت، وسجّل Service Workers لدعم العمل دون اتصال، ونفّذ استراتيجيا…

31

WebSockets والواجهات الآنية

B24 دروسPRO

أنشئ واجهات مستخدم آنية. استخدم WebSocket API الأصلية، وادمج مكتبة عميل Socket.io، واستقبل الأحداث المرسلة من الخادم لبث البيانات في اتجاه…

32

أدوات الواجهات الأمامية الحديثة

B24 دروسPRO

أتقن سلسلة أدوات JavaScript سريعة التطوّر. وسّع Vite باستخدام الإضافات واستخدمه لـ SSR، وافهم كيف يحقق esbuild سرعته، وأدر مساحات العمل باس…

33

تحسين أداء الويب

C14 دروسPRO

اجعل مواقعك سريعة وقِس التحسّن. افهم Core Web Vitals، وأجرِ عمليات تدقيق باستخدام Lighthouse، وحسّن الصور للويب، وقلّل حجم حمولة JavaScript…

34

TypeScript المتقدمة للواجهات الأمامية

C14 دروسPRO

استفد من TypeScript إلى أقصى حد. أنشئ أنواعًا باستخدام أنواع القوالب النصية، وصرّح بأنواع مكوّنات React وhooks باستخدام أنواع عامة دقيقة، و…

35

أنماط React المتقدمة

C14 دروسPRO

اكتب شيفرة React بالطريقة التي يكتبها مؤلفو المكتبات. أنشئ مكوّنات مركّبة مدعومة بـ Context، وطبّق render props وHOCs لمشاركة الاهتمامات ال…

36

أنماط Vue المتقدمة

C14 دروسPRO

أتقن أنماط Vue 3 المتقدمة المستخدمة في التطبيقات الاحترافية. شارك المنطق عبر شجرة المكوّنات باستخدام provide/inject، وحمّل المكوّنات بشكل غ…

37

معمارية الواجهات الأمامية

C14 دروسPRO

صمّم تطبيقات واجهة أمامية قابلة للتوسّع لتناسب الفرق الكبيرة. طبّق Atomic Design على تسلسلات المكوّنات، وأدر حزمًا متعددة باستخدام مستودعات…

38

أنظمة التصميم ومكتبات المكوّنات

C14 دروسPRO

أنشئ مكتبة مكوّنات مشتركة وحافظ عليها. وثّق المكوّنات في Storybook، وعرّف رموز التصميم باستخدام Style Dictionary، وأنشئ إصدارات وانشرها إلى…

39

أمن الواجهات الأمامية

C14 دروسPRO

احمِ مستخدميك من تهديدات أمن الويب. امنع XSS بترميز المخرجات وContent Security Policy، واحمِ من CSRF باستخدام ملفات تعريف الارتباط SameSite…

40

CI/CD وDevOps للواجهات الأمامية

C14 دروسPRO

أتمت تسليم واجهتك الأمامية. اكتب مسارات عمل GitHub Actions لفحص الشيفرة واختبارها وبنائها عند كل عملية دفع، وانشر تلقائيًا إلى Vercel وNetl…

41

هندسة الواجهات الأمامية للمستوى المتقدم

C24 دروسPRO

اعمل بمستوى مهندس أول. تعامل مع مقابلات تصميم الأنظمة باستخدام أطر عمل خاصة بالواجهات الأمامية، وعزّز ثقافة صحية لمراجعة الشيفرة، وطوّر الم…

الأسئلة الشائعة

الأسئلة الشائعة

هل دورة Frontend Academy مجانية؟

نعم. يمكنك البدء في دورة Frontend Academy مجانًا وإكمال دروسها التفاعلية بلا تكلفة. اشتراك PRO اختياري يفتح لك أدوات ذكاء اصطناعي متقدمة وشهادة قابلة للمشاركة.

هل أحتاج إلى خبرة سابقة لتعلم HTML؟

لا. تبدأ الدورة بالأساسيات وتنتقل تدريجيًا إلى مواضيع أكثر تقدمًا، لذا يمكنك البدء حتى بدون خبرة سابقة في HTML.

كيف ستتعلم HTML على CoddyKit؟

تتعلم من خلال العمل. دروس تفاعلية قصيرة تجمع بين شرح واضح وتمرين برمجة عملي يعمل في الوقت الفعلي، ومعلم ذكاء اصطناعي يعمل 24/7 يقدم مساعدة مخصصة عندما تعلق.

هل أحصل على شهادة عند إكمال Frontend Academy؟

نعم. متعلمو PRO يمكنهم الخضوع لامتحان والحصول على شهادة إكمال قابلة للمشاركة برمز تحقق لدورة Frontend Academy.

هل يمكنني تعلم HTML على هاتفي؟

نعم. CoddyKit متاح على الويب وكتطبيقات iOS و Android أصلية، لذا يمكنك تعلم HTML على أي جهاز وسيتم مزامنة تقدمك عبرها جميعًا.

ابدأ Frontend Academy الآن

انضم إلى آلاف المتعلمين الذين يتقنون البرمجة مع دروس مدعومة بالذكاء الاصطناعي.

ابدأ مجاناً →استعرض جميع الدورات