تعلم تطوير الويب
تعلم تطوير الويب — تطوير الواجهات الأمامية من HTML إلى React، مع معاينة مباشرة
تعلم تطوير الويب هو تطبيق مجاني لنظامي iOS وAndroid للمبتدئين والمصممين ومن يرغبون في تغيير مسارهم المهني ليصبحوا مطوري ويب. تظهر HTML وCSS وJavaScript جنبًا إلى جنب في محرر مباشر، وتتحدث الصفحة أسفلها أثناء الكتابة. تنقلك 41 دورة و163 درسًا قصيرًا من أول وسم إلى التخطيط المتجاوب وTypeScript ثم React وVue، مع 20 مشروعًا إرشاديًا ومهمات لتصحيح الأخطاء ومرشد ذكاء اصطناعي للخلل الذي لا تتمكن من العثور عليه.
- السعر
- مجاني، ترقية Pro
- المنصات
- iOS وAndroid
- اللغات
- 22
- التصنيف العمري
- 4+
- يتطلب
- iOS 15.1 أو أحدث
غيّر سطرًا واحدًا وشاهد الصفحة تتغير.
يعرض المحرر لوحات HTML وCSS وJavaScript جنبًا إلى جنب، مع معاينة مباشرة أسفلها، لتتعلّم بناء الصفحة وتنسيقها وسلوكها معًا بدلًا من تعلّمها كمواد منفصلة.
ما هو
تعلم تطوير الويب هو تطبيق مجاني لنظامي iOS وAndroid يعلّم تطوير الواجهات الأمامية، أي الجزء من الموقع الذي يراه الناس ويلمسونه، باستخدام محرر HTML وCSS وJavaScript مباشر على الهاتف. يقدّم 41 دورة و163 درسًا مرتبة من مستوى المبتدئ إلى مستوى المحترف، وتغطي أساسيات الويب والتخطيط المتجاوب وJavaScript وDOM وTypeScript وReact وVue والاختبار وإتاحة الوصول والأداء، بالإضافة إلى مشاريع إرشادية ومهمات لتصحيح الأخطاء وأسئلة مقابلات ومرشد ذكاء اصطناعي.
داخل التطبيق
كيف يبدو
الدورة
ما الذي تغطيه دورة الواجهات الأمامية
41 دورة و163 درسًا، مأخوذة من قائمة دورات التطبيق نفسه: بدءًا من أول وسم HTML وصولًا إلى بنية الواجهات الأمامية وهندسة البرمجيات على مستوى الخبراء.
الويب والأساسيات الثلاثة
مرحبًا بك في تطوير الواجهات الأمامية، وكيف يعمل الويب، وأساسيات HTML، وأساسيات CSS، وأساسيات JavaScript.
التخطيط والتصميم المتجاوب
أساسيات التصميم المتجاوب، ونماذج HTML والترميز الدلالي، وإتقان تخطيط CSS، ومتغيرات CSS والانتقالات والرسوم المتحركة.
JavaScript في المتصفح
DOM وواجهات برمجة تطبيقات المتصفح، والمصفوفات، والكائنات وES6+، والبرمجة غير المتزامنة، ووحدات JavaScript وأدوات البناء.
سير العمل والأدوات
أدوات المطوّرين وسير العمل، وGit وسير عمل التعاون، وأدوات الواجهات الأمامية الحديثة.
TypeScript
مقدمة إلى TypeScript، وتعمّق في الأنواع والواجهات، وTypeScript المتقدم للواجهات الأمامية.
React وVue
أساسيات React، وuseEffect وجلب البيانات، والخطافات والأنماط المتقدمة، ثم أساسيات Vue 3، وComposition API، والأنماط المتقدمة في Vue.
البيانات والعرض والوقت الفعلي
إدارة الحالة، وتكامل API وREST، والعرض من جانب الخادم باستخدام Next.js وNuxt 3، وتطبيقات الويب التقدمية، وWebSockets والواجهات الأمامية في الوقت الفعلي.
الجودة والبنية
إمكانية الوصول، واختبار الواجهات الأمامية، وتحسين أداء الويب، وأمان الواجهات الأمامية، وبنية CSS، وأنظمة التصميم، والتكامل والنشر المستمران للواجهات الأمامية، وهندسة الواجهات الأمامية على مستوى الخبراء.
كيف يعمل
كيف تتعلّم باستخدامه
يتبع ترتيب التطبيق ترتيب هذه الحرفة: ابنِ صفحة أولًا، ثم اجعلها تتصرف كما ينبغي، ثم تعلّم الأدوات التي تتيح توسيعها.
ابدأ بالدورة الأولى المجانية
تفتح Welcome to Frontend Development الطريق أمامك، ويكون المحرر المباشر مجانيًا منذ البداية. يستغرق كل درس بضع دقائق من الشرح، يتبعه شيء يمكنك تغييره وتشغيله.
عدّل لوحة واقرأ المعاينة
غيّر HTML أو CSS أو JavaScript، وستتبعك المعاينة أدناه. ويمكن بدء المشاريع الجديدة من قالب HTML أو React أو Vue أو Angular أو Node أو TypeScript.
أنشئ المشاريع وأصلح الأخطاء الحقيقية
تساعدك عشرون مشروعًا إرشاديًا على إنشاء صفحة وصفة ونموذج اتصال وشبكة بطاقات وشريط تنقل وجدول بيانات خطوة بخطوة، بينما تضع بين يديك 15 مهمة لتصحيح الأخطاء صفحات معطلة لإصلاحها.
ماذا يتضمن
ما الذي يأتي مع التطبيق
41
دورة، من المبتدئ إلى المحترف
163 درسًا مصنفة من A1 إلى C2، بدءًا من كيفية عمل الويب وأساسيات HTML، وصولًا إلى TypeScript وReact وVue 3 وإدارة الحالة والعرض من جهة الخادم باستخدام Next.js وNuxt 3 وتطبيقات الويب التقدمية.
مباشر
محرر مع معاينة فورية
لوحات HTML وCSS وJavaScript مع معاينة أسفلها، بحيث يظهر التغيير فورًا. ابدأ مشاريع جديدة من عدة قوالب لأطر العمل.
15
مهمات تصحيح الأخطاء
مهمات مبنية على مشكلات حقيقية في الواجهات الأمامية: تخطيط ينهار عند 375 pixels، وصورة تبطئ الصفحة، ونموذج لا يستطيع أحد الوصول إليه باستخدام لوحة المفاتيح، وتسرب للذاكرة في أحد المكونات، واختبار ينجح محليًا لكنه يفشل في CI.
20
مشاريع إرشادية
مشاريع صغيرة مشروحة خطوة بخطوة، مثل صفحة وصفة ونموذج اتصال وشبكة بطاقات وشريط تنقل وجدول بيانات.
الذكاء الاصطناعي
مرشد ذكاء اصطناعي وملعب للتجربة
اسأل عن خطأ أو درس أو شيفرتك الخاصة، أو صِف صفحة في ملعب الذكاء الاصطناعي وشاهد الشيفرة وهي تُكتب. يحصل المستخدمون المجانيون على ثلاثة أسئلة للذكاء الاصطناعي يوميًا.
50
أسئلة مقابلات مع إجابات
خمسون سؤالًا لمقابلات مطوري الواجهات الأمامية والويب مع إجاباتها، بالإضافة إلى قائمة مرجعية تضم 83 مدخلًا من الصياغات والأنماط، ومكتبة من الأمثلة القصيرة التي يمكنك فتحها وتعديلها.
خلفية
ما الذي يتعلّمه مطوّر الواجهات الأمامية فعلًا، وبأي ترتيب؟
يبني مطوّر الواجهات الأمامية ما يعمل داخل المتصفح: بنية الصفحة، ومظهرها على كل أحجام الشاشات، وكيف تستجيب عندما ينقر أحدهم أو يكتب أو يمرر الصفحة. والترتيب المنطقي هو البدء بالبنية (HTML)، ثم المظهر (CSS)، ثم السلوك (JavaScript)، وبعد ذلك فقط أدوات تنظيم المشاريع الأكبر: TypeScript، وإطار عمل مثل React أو Vue، والاختبار، وخطوة البناء. إن القفز إلى إطار عمل قبل إتقان الأساسيات الثلاثة هو السبب الأكثر شيوعًا لتعثر المبتدئين، لأن إطار العمل يخفي في الغالب JavaScript وDOM العاديين خلف صياغته الخاصة.
HTML الدلاليةالمعنى قبل المظهر
إن اختيار عنوان أو قائمة أو تسمية نموذج أو زر بناءً على ماهية المحتوى، لا على مظهره، يمنح قارئات الشاشة ومحركات البحث ولوحات المفاتيح ما يمكنها التعامل معه. كما أنها أسهل خطوة لتحسين إتاحة الوصول في أي صفحة.
التخطيط المتجاوبصفحة واحدة، لكل شاشة
تتيح Flexbox وgrid وmedia queries لتخطيط واحد إعادة ترتيب نفسه من هاتف ضيق إلى شاشة عريضة. ويساعد الاختبار على عرض صغير مثل 375 pixels في وقت مبكر على اكتشاف أخطاء التخطيط التي يصعب إصلاحها لاحقًا.
DOMالصفحة ككائن حي
يحوّل المتصفح HTML إلى شجرة من الكائنات التي يستطيع JavaScript قراءتها وتغييرها. وفي النهاية، كل إطار عمل هو طريقة مريحة لتحديث تلك الشجرة، لذا فإن فهمها يجعل التعامل مع React وVue أسهل بكثير.
Core Web Vitals والأداءسرعة يشعر بها الناس
تبدو الصفحة بطيئة عندما تحمّل صورة كبيرة غير محسّنة في وقت متأخر، أو عندما تتحرك أثناء التحميل، حتى لو كانت الشيفرة صحيحة. ولا يظهر الأداء كمهارة فعلية إلا عند التعامل مع صفحات وصور حقيقية.
الملاءمة
لمن يناسب — ولمن لا يناسب
يناسبك إذا كنت
- تريد أن تصبح مطوّر ويب وتبدأ من الصفر
- أنت مصمم وتريد بناء الصفحات التي تصممها
- لديك بعض المعرفة بـ HTML وCSS وتريد إضافة JavaScript أو TypeScript أو React أو Vue إليها
- تستعد لأول مقابلة في تطوير الواجهات الأمامية وتريد أسئلة مع إجابات
- تفضّل رؤية الصفحة تتغير أثناء الكتابة بدلًا من قراءة شروحات طويلة
ليس الأداة المناسبة لك إذا كنت
- تحتاج إلى بناء موقع كبير متعدد الملفات ونشره، وهذا لا يزال يتطلب حاسوبًا محمولًا ومحررًا متكاملًا
- تتوقع أن يكون كل شيء مجانيًا: الدورة الأولى، والمشروع الأول، ومهمتا تصحيح الأخطاء، والمحرر مجانية، بينما يفتح Pro بقية المحتوى
- تريد دورة في الواجهة الخلفية أو قواعد البيانات، لأن هذا المسار يركّز على ما يعمل داخل المتصفح
- تعمل بالفعل مهندس واجهات أمامية خبيرًا وتريد مرجعًا بدلًا من الدروس
الأسئلة
الأسئلة الشائعة
ما تطوير الواجهات الأمامية؟
تطوير الواجهات الأمامية هو بناء الجزء من موقع الويب أو تطبيق الويب الذي يعمل داخل المتصفح: بنيته باستخدام HTML، ومظهره باستخدام CSS، وسلوكه باستخدام JavaScript، إلى جانب أطر العمل والأدوات المبنية عليها. يعلّمك تعلم تطوير الويب هذه المجموعة بالترتيب نفسه، مع معاينة مباشرة تُظهر كل تغيير فورًا.
هل يمكنني تعلّم تطوير الواجهات الأمامية على هاتفي؟
يمكن تعلّم المفاهيم والصفحات الأولى جيدًا على الهاتف، لأن HTML وCSS وJavaScript صغيرة بما يكفي لتحريرها خلال جلسات قصيرة، كما تعرض المعاينة النتيجة فورًا. يضع التطبيق الأجزاء الثلاثة والمعاينة المباشرة على الشاشة. يصبح الحاسوب المحمول أكثر راحة عند إدارة مشروع أكبر يضم ملفات عديدة، لكنه ليس ضروريًا للبدء.
لمن يناسب التطبيق، ومن أين يبدأ المبتدئ تمامًا؟
يناسب المبتدئين تمامًا، والمصممين الذين يريدون بناء ما يصممونه، والمطوّرين الذين لديهم بعض المعرفة بـ HTML وCSS، ومن يغيّرون مسارهم المهني ويستعدون لأول وظيفة في الواجهات الأمامية. ابدأ بكيفية عمل الويب وHTML البسيطة، ثم CSS، ثم JavaScript. يتبع تعلم تطوير الويب هذا الترتيب، ويبدأ بالدورة المجانية «مرحبًا بك في تطوير الواجهات الأمامية».
هل يعلّم التطبيق React وVue؟
نعم. بعد HTML وCSS وJavaScript وTypeScript، يضم التطبيق دورات React حول الأساسيات وuseEffect وجلب البيانات والخطافات والأنماط المتقدمة، ودورات Vue 3 حول الأساسيات وComposition API والأنماط المتقدمة. كما يغطي إدارة الحالة والعرض من جانب الخادم باستخدام Next.js وNuxt 3.
هل أحتاج إلى تعلّم TypeScript؟
لا تحتاج إليه لبناء صفحة أولى، لكن معظم قواعد برمجيات React وVue الاحترافية تستخدمه، لذا يستحق التعلّم بعد أساسيات JavaScript. يقدّم التطبيق TypeScript من خلال دورة أولى عن الأنواع، ودورة أعمق حول الأنواع والواجهات، ودورة متقدمة لأنماط الواجهات الأمامية.
كيف تعمل مهمات تصحيح الأخطاء؟
تمنحك كل واحدة من مهمات تصحيح الأخطاء البالغ عددها 15 صفحة أو مكوّنًا معطّلًا يحاكي مشكلة حقيقية في الواجهات الأمامية، مثل تخطيط ينهار عند 375 بكسل، أو نموذج لا يمكن استخدامه بلوحة المفاتيح، أو تسرّب للذاكرة في مكوّن، أو اختبار لا يفشل إلا في CI، وعليك إصلاحه. مهمتان مجانيتان.
هل يمكن أن يساعدني في الاستعداد لمقابلة مطوّر واجهات أمامية؟
يمكنه مساعدتك في الجانب المعرفي. يضم تعلم تطوير الويب 50 سؤالًا للمقابلات مع إجاباتها، وورقة غش تحتوي على 83 مدخلًا في الصياغة والأنماط، ودورات حول الاختبار والأداء وإمكانية الوصول والبنية، وهي الموضوعات التي تنتقل إليها المقابلات عادةً بعد الأساسيات. لكنه لا يحل محل بناء ملف أعمال من مشاريعك الخاصة.
كم يستغرق تعلّم تطوير الواجهات الأمامية؟
يمكن للمبتدئ الذي يتدرّب قليلًا كل يوم أن يبني عادةً صفحات متجاوبة بسيطة خلال بضعة أسابيع، بينما يتطلب إتقان JavaScript وإطار عمل عدة أشهر. يقسّم التطبيق المسار إلى دروس تستغرق كل منها بضع دقائق، مع سلاسل تتابع وتذكيرات، لذا يأتي التقدم من الجلسات القصيرة المنتظمة لا من جلسة طويلة واحدة.
هل تعلم تطوير الويب مجاني؟
يمكن تنزيله مجانًا من App Store وGoogle Play. الدورة الأولى، والمشروع الإرشادي الأول، ومهمتا تصحيح الأخطاء، ومحرر الأكواد مجانية، مع ثلاثة أسئلة يومية لمرشد الذكاء الاصطناعي، بينما يعرض الإصدار المجاني الإعلانات. يفتح Pro جميع الدورات والمشاريع والمهمات، واختبار الشهادة، والاستخدام غير المحدود للذكاء الاصطناعي، كما يزيل الإعلانات.
ما المنصات واللغات التي يدعمها، وهل تطبيق App Store هو نفسه؟
يعمل تعلم تطوير الويب على iOS عبر App Store وعلى Android عبر Google Play، ويدعم 22 لغة، مع تصنيف عمري 4+. يحمل التطبيق في App Store اسم Learn Frontend Development، بينما يحمل في Google Play اسم تعلم تطوير الويب، لكنه التطبيق نفسه. يمنح اجتياز الاختبار النهائي شهادة إتمام.
ابدأ الآن
أنشئ أول صفحة ويب لك اليوم
مجاني للبدء على iOS وAndroid، بـ22 لغة.
المزيد من CoddyKit
متاح على iOS.