نظرة عامة
دليلك الشامل لقسم الواجهات الأمامية
خطوة البناء الأولى: الواجهة، أي ما يراه المستخدم ويضغط عليه. ثمانية دروس من الصفر تمامًا: HTML يبني هيكل الصفحة، وCSS يرتّبها ويجعلها تناسب الجوال، وJavaScript يجعلها تتفاعل وتكلّم الخادم، حتى تبني قائمة مهام كاملة وصفحة طلبات. كل مثال تعدّله وتشاهد نتيجته داخل الدرس.
لغير التقني وللتقني معًا. كل جزء يفتح بطريقين: مسار مبسّط بالتشبيه لمن يبدأ من الصفر، ومسار تفصيلي لمن يعرف الأساسيات ويريد العمق. اقرأ الطريق الذي يناسبك ثم أكمل الجزء.
رسم متحرك، ثم ما تحتاجه قبل أن تبدأ، ثم الفكرة بكود تشغّله، ثم مثال محلول، ثم بطاقات مراجعة وأسئلة «اختبر فهمك».
لا تنتقل من جزء قبل أن تحضر أسئلته بلا تخمين. القراءة وحدها لا تثبت شيئًا.
اختر موضوعًا
نظرة على قسم الواجهات الأمامية
الهيكل أولًا (HTML)، ثم الشكل (CSS)، ثم اللغة (JavaScript)، ثم ربط اللغة بالصفحة (DOM)، ثم كلام الصفحة مع الخادم (fetch). كل درس يضيف طبقة فوق الذي قبله على نفس صفحة المقهى، ولكل لغة درسان: الأساسيات من الصفر ثم الاستخدام الحقيقي.
| الجزء | الموضوع | تتعلم |
|---|---|---|
| 1 | أول صفحة ويب: HTML من الصفر | الوسم والعنصر والخاصية، هيكل الملف، النصوص والروابط والصور والقوائم والجداول |
| 2 | HTML الدلالي: هيكل له معنى ونماذج ووصول للجميع | العناصر الدلالية، النماذج والتحقّق، الصور المتجاوبة، إمكانية الوصول، معلومات الصفحة |
| 3 | CSS من الصفر: الألوان والخطوط والصندوق | شكل القاعدة، المحدّدات، الألوان، الخطوط والوحدات، الصندوق، الأولوية |
| 4 | CSS للتخطيط: Flexbox وGrid والتجاوب | Flex وGrid، التجاوب والجوال أولًا، المتغيرات والوضع الليلي، الخصائص المنطقية، الانتقالات |
| 5 | JavaScript من الصفر: القيم والقرارات والتكرار | console.log، const وlet، الأنواع، النصوص والأرقام، ===، if وelse، for وwhile |
| 6 | JavaScript: الدوال والمصفوفات والكائنات | الدوال والسهمية، المصفوفات وmap/filter/reduce، الكائنات، التفكيك والنشر، JSON |
| 7 | JavaScript والـ DOM: صفحة تتفاعل | شجرة DOM، querySelector، textContent وclassList، إنشاء العناصر، الأحداث والتفويض، الحالة ثم الرسم، localStorage |
| 8 | JavaScript غير المتزامن: المؤقّتات وPromise وfetch | حلقة الأحداث، setTimeout، Promise، async/await، try/catch، fetch، حالات التحميل، Promise.all |
خلّصت الدرس؟
سجّل الدخول ليُحفظ تقدّمك.