16 مرحلة · 68 درساً 16 stages · 68 lessons
مسار Frontend Frontend track بناء واجهات الويب: الهيكل والتنسيق والتفاعل، ثم أطر العمل الحديثة. Building web interfaces: structure, styling and interaction, then modern frameworks.
يبدأ المسار من طريقة عمل الويب نفسه، ثم HTML وCSS وJavaScript، وبعدها الأدوات وأطر العمل التي تُبنى بها التطبيقات اليوم. في النهاية: الاختبار والأمان والأداء. The track starts with how the web itself works, then HTML, CSS and JavaScript, followed by the tools and frameworks applications are built with today. It ends with testing, security and performance.
ترتيب هذا المسار مستوحى من خارطة Frontend (يفتح في تبويب جديد) (opens in a new tab) roadmap.sh . العناوين والملخّصات والدروس مكتوبة بصياغتنا، وليست منسوخة منها. This track's order is inspired by the Frontend roadmap (يفتح في تبويب جديد) (opens in a new tab) on roadmap.sh. Titles, summaries and lessons are written in our own words, not copied from it.
01
كيف يعمل الويب How the web works 5 دروس 5 lessons الإنترنت The internet شبكة من الشبكات: كيف تنتقل البيانات بين جهازك والخوادم على شكل حزم، وما دور IP وTCP في ذلك. A network of networks: how data travels between your device and servers as packets, and what IP and TCP do along the way. أساسي Required قريباً Coming soon بروتوكول HTTP HTTP لغة الطلب والاستجابة بين المتصفح والخادم: الـ methods والـ headers ورموز الحالة. The request/response language between browser and server: methods, headers and status codes. أساسي Required قريباً Coming soon أسماء النطاقات وDNS Domain names and DNS كيف يتحوّل اسم مثل example.com إلى عنوان IP، ومن يدير هذه الأسماء. How a name like example.com resolves to an IP address, and who manages those names. أساسي Required قريباً Coming soon الاستضافة Hosting أين يعيش الموقع فعلياً: الخوادم المشتركة والـ VPS والمنصّات السحابية، ومتى يناسب كل منها. Where a site actually lives: shared servers, VPSs and cloud platforms, and when each one fits. أساسي Required قريباً Coming soon المتصفحات Browsers من استلام HTML إلى رسم البكسلات: التحليل، شجرة الـ DOM، التنسيق والرسم. From receiving HTML to painting pixels: parsing, the DOM tree, layout and paint. أساسي Required قريباً Coming soon 02
أساسيات HTML HTML basics العناصر والسمات وهيكل الصفحة: الأساس الذي يقوم عليه كل ما يُعرض في المتصفح. Elements, attributes and page structure: the foundation of everything a browser shows. أساسي Required قريباً Coming soon HTML الدلالي Semantic HTML اختيار العنصر حسب معناه لا شكله، لتفهم الصفحة المتصفحاتُ وقارئات الشاشة ومحركات البحث. Choosing elements for their meaning, not their look, so browsers, screen readers and search engines understand the page. أساسي Required قريباً Coming soon النماذج والتحقق Forms and validation حقول الإدخال وأنواعها، والتحقق المدمج في المتصفح قبل إرسال البيانات. Input fields and their types, and the browser's built-in validation before data is sent. أساسي Required قريباً Coming soon الوصولية Accessibility صفحات يستخدمها الجميع: الكيبورد، قارئات الشاشة، التباين، وسمات ARIA عند الحاجة. Pages everyone can use: keyboard, screen readers, contrast, and ARIA attributes when needed. أساسي Required قريباً Coming soon أساسيات SEO SEO basics ما الذي يساعد محركات البحث على فهم الصفحة: العناوين، الـ meta، والروابط الواضحة. What helps search engines understand a page: headings, meta tags and clear links. اختياري Optional قريباً Coming soon 03
أساسيات CSS CSS basics المحدِّدات والخصائص والتتالي (cascade)، ونموذج الصندوق الذي يحكم حجم كل عنصر. Selectors, properties and the cascade, plus the box model that sizes every element. أساسي Required قريباً Coming soon التخطيط: Flexbox وGrid Layout: Flexbox and Grid ترتيب العناصر في صفوف وأعمدة وشبكات، ومتى نستخدم كل أداة. Arranging elements in rows, columns and grids, and when to reach for each tool. أساسي Required قريباً Coming soon التصميم المتجاوب Responsive design صفحة واحدة تعمل على كل الشاشات: الوحدات المرنة، والـ media queries، والبدء من الموبايل. One page for every screen: fluid units, media queries and a mobile-first approach. أساسي Required قريباً Coming soon 04
JavaScript 5 دروس 5 lessons أساسيات JavaScript JavaScript basics المتغيرات والأنواع والدوال والكائنات والمصفوفات: لغة البرمجة الوحيدة التي يشغّلها المتصفح مباشرة. Variables, types, functions, objects and arrays: the one programming language browsers run natively. أساسي Required قريباً Coming soon التعامل مع الـ DOM Working with the DOM قراءة عناصر الصفحة وتعديلها من JavaScript، والاستجابة للأحداث مثل النقر والكتابة. Reading and changing page elements from JavaScript, and responding to events like clicks and typing. أساسي Required قريباً Coming soon البرمجة غير المتزامنة Asynchronous JavaScript الـ event loop والـ Promises و async/await: كيف تنتظر JavaScript دون أن تتجمّد الصفحة. The event loop, Promises and async/await: how JavaScript waits without freezing the page. أساسي Required قريباً Coming soon جلب البيانات بـ Fetch Fetching data with Fetch طلب البيانات من الخادم وعرضها دون إعادة تحميل الصفحة، ومعالجة الأخطاء. Requesting data from a server and showing it without reloading the page, including error handling. أساسي Required قريباً Coming soon الوحدات (Modules) Modules تقسيم الكود إلى ملفات بـ import وexport، وهو أساس كل الأدوات الحديثة. Splitting code into files with import and export, the basis of every modern tool. أساسي Required قريباً Coming soon 05
إدارة النسخ Version control 3 دروس 3 lessons Git تتبّع كل تغيير في الكود: الـ commits والفروع والدمج، والرجوع عن الأخطاء بأمان. Tracking every change to your code: commits, branches and merges, and safely undoing mistakes. أساسي Required قريباً Coming soon GitHub استضافة المستودعات والتعاون عليها: الـ pull requests والمراجعة والـ issues. Hosting repositories and collaborating on them: pull requests, reviews and issues. أساسي Required قريباً Coming soon GitLab بديل لـ GitHub يجمع المستودع والـ CI/CD وإدارة المشروع في مكان واحد. A GitHub alternative that bundles repository, CI/CD and project management in one place. بديل Alternative قريباً Coming soon 06
مديرو الحزم Package managers 3 دروس 3 lessons npm تثبيت المكتبات وإدارة إصداراتها عبر package.json، وتشغيل السكربتات. Installing libraries and managing their versions through package.json, and running scripts. أساسي Required قريباً Coming soon pnpm مدير حزم أسرع وأوفر للمساحة، يشارك الملفات بين المشاريع بدل نسخها. A faster, space-saving package manager that shares files across projects instead of copying them. بديل Alternative قريباً Coming soon Yarn بديل لـ npm بأوامر مختلفة قليلاً، وما زال شائعاً في مشاريع كثيرة. An npm alternative with slightly different commands, still common in many projects. بديل Alternative قريباً Coming soon 07
أطر العمل Frameworks 4 دروس 4 lessons React بناء الواجهات من مكوّنات صغيرة قابلة لإعادة الاستخدام، مع الحالة (state) والـ hooks. Building interfaces from small reusable components, with state and hooks. أساسي Required قريباً Coming soon Vue.js إطار تدريجي بقوالب قريبة من HTML ونظام تفاعلية مدمج. A progressive framework with HTML-like templates and built-in reactivity. بديل Alternative قريباً Coming soon Angular إطار متكامل مبني على TypeScript، يأتي بالتوجيه والنماذج وحقن التبعيات جاهزة. A complete TypeScript-based framework that ships routing, forms and dependency injection. بديل Alternative قريباً Coming soon Svelte إطار يعمل وقت البناء: يحوّل المكوّنات إلى JavaScript بسيط دون مكتبة ثقيلة في المتصفح. A compile-time framework: turns components into plain JavaScript with no heavy runtime in the browser. بديل Alternative قريباً Coming soon 08
التنسيق في المشاريع الكبيرة Styling at scale 5 دروس 5 lessons Tailwind CSS التنسيق بكلاسات صغيرة جاهزة مباشرة في الـ markup، ضمن نظام تصميم ثابت. Styling with small ready-made classes right in the markup, inside a consistent design system. أساسي Required قريباً Coming soon CSS Modules ملفات CSS محصورة بمكوّن واحد، فلا تتصادم أسماء الكلاسات. CSS files scoped to a single component, so class names never collide. بديل Alternative قريباً Coming soon تسمية BEM BEM naming اصطلاح لتسمية الكلاسات (block و element و modifier) يجعل الـ CSS الكبير مقروءاً. A class-naming convention (block, element, modifier) that keeps large stylesheets readable. اختياري Optional قريباً Coming soon Sass امتداد لـ CSS يضيف المتغيرات والتداخل والدوال، ويُترجَم إلى CSS عادي. A CSS extension adding variables, nesting and functions, compiled down to plain CSS. اختياري Optional قريباً Coming soon PostCSS أداة تمرّر الـ CSS عبر إضافات: بادئات المتصفحات، والتصغير، وميزات CSS الجديدة. A tool that runs CSS through plugins: vendor prefixes, minification and upcoming CSS features. اختياري Optional قريباً Coming soon 09
أدوات البناء وجودة الكود Build tools and code quality 4 دروس 4 lessons Vite خادم تطوير سريع وأداة بناء للإنتاج: تجمع الملفات وتصغّرها وتقسّمها. A fast dev server and production build tool: bundles, minifies and splits your files. أساسي Required قريباً Coming soon webpack أداة تجميع مرنة جداً عبر الإعدادات والإضافات، وما زالت في مشاريع كثيرة قائمة. A highly configurable bundler driven by loaders and plugins, still found in many existing projects. بديل Alternative قريباً Coming soon ESLint فحص الكود آلياً لاكتشاف الأخطاء والأنماط الخطرة قبل تشغيله. Automatically checks code for bugs and risky patterns before it runs. أساسي Required قريباً Coming soon Prettier تنسيق الكود تلقائياً بأسلوب واحد، فتنتهي نقاشات المسافات والفواصل. Formats code automatically in one style, ending debates about spacing and commas. أساسي Required قريباً Coming soon 10
TypeScript JavaScript مع أنواع ثابتة: أخطاء تُكتشف أثناء الكتابة، ومحرر يفهم الكود. JavaScript with static types: errors caught while you type, and an editor that understands your code. أساسي Required قريباً Coming soon TypeScript مع React TypeScript with React تحديد أنواع الـ props والحالة والأحداث في المكوّنات. Typing props, state and events in components. أساسي Required قريباً Coming soon 11
الاختبار Testing 5 دروس 5 lessons أنواع الاختبارات Kinds of tests اختبارات الوحدة والتكامل والنهاية للنهاية: ماذا يختبر كل نوع، وكم نحتاج من كل منها. Unit, integration and end-to-end tests: what each one checks, and how much of each you need. أساسي Required قريباً Coming soon Vitest إطار اختبار سريع مبني على Vite، لاختبار الدوال والمكوّنات. A fast test runner built on Vite, for testing functions and components. أساسي Required قريباً Coming soon Jest إطار اختبار شامل ومنتشر، بواجهة قريبة جداً من Vitest. A widespread all-in-one test framework with an API very close to Vitest's. بديل Alternative قريباً Coming soon Playwright يشغّل متصفحات حقيقية ويتصرف كمستخدم: ينقر ويكتب ويتحقق من النتيجة. Drives real browsers like a user would: clicking, typing and checking the result. أساسي Required قريباً Coming soon Cypress بديل لـ Playwright لاختبارات النهاية للنهاية، بواجهة تفاعلية لمتابعة كل خطوة. A Playwright alternative for end-to-end tests, with an interactive runner that shows every step. بديل Alternative قريباً Coming soon 12
الأمان والمصادقة Security and authentication 6 دروس 6 lessons HTTPS تشفير الاتصال بين المتصفح والخادم بـ TLS، ولماذا صار إلزامياً لكل موقع. Encrypting the browser–server connection with TLS, and why every site now needs it. أساسي Required قريباً Coming soon CORS قواعد المتصفح للطلبات بين نطاقات مختلفة، وكيف يسمح الخادم بها صراحة. The browser's rules for cross-origin requests, and how a server explicitly allows them. أساسي Required قريباً Coming soon سياسة أمان المحتوى (CSP) Content Security Policy إخبار المتصفح بالمصادر المسموح تحميلها، للحد من هجمات حقن السكربتات. Telling the browser which sources may load, to limit script-injection attacks. اختياري Optional قريباً Coming soon الثغرات الشائعة Common vulnerabilities XSS وCSRF وأخواتها: كيف تحدث، وما الذي يمنعها في كود الواجهة. XSS, CSRF and friends: how they happen, and what prevents them in frontend code. أساسي Required قريباً Coming soon المصادقة في الواجهة Authentication on the frontend الجلسات والـ cookies مقابل الـ tokens: أين تُحفظ هوية المستخدم ومخاطر كل طريقة. Sessions and cookies versus tokens: where the user's identity is kept and the risks of each. أساسي Required قريباً Coming soon OAuth وتسجيل الدخول الخارجي OAuth and social sign-in تسجيل الدخول بحساب من خدمة أخرى دون مشاركة كلمة المرور معك. Signing in with an account from another service without sharing the password with you. اختياري Optional قريباً Coming soon 13
أنماط العرض Rendering strategies 5 دروس 5 lessons CSR وSSR وSSG CSR, SSR and SSG أين تُبنى الصفحة: في المتصفح، أو على الخادم عند كل طلب، أو مسبقاً وقت البناء. Where a page is built: in the browser, on the server per request, or ahead of time at build. أساسي Required قريباً Coming soon Next.js إطار فوق React: التوجيه بالملفات، ومكوّنات الخادم، وكل أنماط العرض في مشروع واحد. A framework on top of React: file-based routing, Server Components and every rendering mode in one project. أساسي Required قريباً Coming soon Nuxt ما يقدّمه Next.js لـ React، يقدّمه Nuxt لـ Vue. What Next.js is to React, Nuxt is to Vue. بديل Alternative قريباً Coming soon SvelteKit إطار التطبيقات الكاملة لـ Svelte، مع العرض على الخادم والتوجيه. Svelte's full application framework, with server rendering and routing. بديل Alternative قريباً Coming soon Astro لمواقع المحتوى: صفحات HTML ثابتة افتراضياً، وJavaScript فقط للأجزاء التفاعلية. For content sites: static HTML by default, JavaScript only for the interactive parts. اختياري Optional قريباً Coming soon 14
واجهات المتصفح Browser APIs 6 دروس 6 lessons التخزين في المتصفح Browser storage localStorage وsessionStorage وIndexedDB: حفظ البيانات على جهاز المستخدم وحدود كل منها. localStorage, sessionStorage and IndexedDB: keeping data on the user's device, and each one's limits. أساسي Required قريباً Coming soon WebSockets اتصال مفتوح باتجاهين بين المتصفح والخادم، للدردشة والتحديثات الفورية. A persistent two-way connection between browser and server, for chat and live updates. اختياري Optional قريباً Coming soon Server-Sent Events بثّ تحديثات من الخادم إلى المتصفح باتجاه واحد، فوق HTTP عادي. One-way streaming of updates from server to browser over plain HTTP. اختياري Optional قريباً Coming soon Service Workers سكربت يعمل بين الصفحة والشبكة: التخزين المؤقت والعمل دون اتصال. A script sitting between the page and the network: caching and working offline. اختياري Optional قريباً Coming soon تطبيقات الويب التقدّمية (PWA) Progressive Web Apps موقع يُثبَّت كتطبيق ويعمل دون اتصال، عبر manifest وservice worker. A site that installs like an app and works offline, through a manifest and a service worker. اختياري Optional قريباً Coming soon Web Components عناصر HTML مخصّصة بـ Custom Elements وShadow DOM، تعمل دون أي إطار. Custom HTML elements built with Custom Elements and Shadow DOM, working without any framework. اختياري Optional قريباً Coming soon 15
الأداء Performance 4 دروس 4 lessons Core Web Vitals مقاييس تجربة المستخدم الأساسية: سرعة ظهور المحتوى، والاستجابة، وثبات التخطيط. The core user-experience metrics: how fast content appears, how quickly the page responds, and layout stability. أساسي Required قريباً Coming soon أدوات المطوّر Browser DevTools فحص الشبكة والذاكرة والرسم لمعرفة ما يبطئ الصفحة فعلاً. Inspecting network, memory and rendering to find what actually slows a page down. أساسي Required قريباً Coming soon Lighthouse تدقيق آلي للأداء والوصولية وSEO، مع اقتراحات قابلة للتنفيذ. An automated audit of performance, accessibility and SEO, with actionable suggestions. أساسي Required قريباً Coming soon تحسين التحميل Loading performance التحميل الكسول، وتقسيم الكود، وتحسين الصور والخطوط، والتخزين المؤقت. Lazy loading, code splitting, optimized images and fonts, and caching. أساسي Required قريباً Coming soon 16
خارج المتصفح Beyond the browser 3 دروس 3 lessons React Native تطبيقات موبايل أصلية بنفس مفاهيم React. Native mobile apps using the same ideas as React. اختياري Optional قريباً Coming soon Electron تطبيقات سطح مكتب بتقنيات الويب، مع متصفح Chromium مدمج. Desktop apps built with web technologies, bundling a Chromium browser. اختياري Optional قريباً Coming soon Tauri بديل أخف لـ Electron: واجهة ويب فوق نواة مكتوبة بـ Rust ومتصفح النظام. A lighter Electron alternative: a web UI on a Rust core and the system's own webview. بديل Alternative قريباً Coming soon 
