codeZoneتابع القناة

19 مرحلة

رود ماب الـ Frontend

من إزاي الإنترنت شغال لحد ما تبني تطبيقات ويب كاملة بـ React. امشي على المراحل بالترتيب، وابني مشاريع وانت ماشي.

  1. 1

    الإنترنت

    قبل ما تكتب سطر كود، افهم الصفحة بتوصل لك إزاي: الـ request بيروح فين، ومين بيرد عليه.

    • How does the internet work?
    • What is HTTP?
    • What is a Domain Name?
    • What is hosting?
    • DNS and how it works
    • Browsers and how they work
  2. 2

    HTML

    هيكل الصفحة. اكتب HTML صح من الأول: عناصر بمعنى، فورمز سليمة، وصفحة يقدر أي حد يستخدمها.

    • Learn the basics
    • Semantic HTML
    • Forms and Validations
    • Accessibility
    • SEO Basics
  3. 3

    CSS

    شكل الصفحة. اتعلم الـ layout بـ Flexbox وGrid، وخلي الصفحة تظبط على أي شاشة.

    • Learn the basics
    • Making Layouts
    • Responsive Design
  4. 4

    JavaScript

    أهم مرحلة في الرود ماب. اتعلم اللغة كويس، وبعدين اتحكم في الصفحة بالـ DOM وهات داتا بالـ Fetch API.

    • Learn the basics
    • DOM Manipulation
    • Fetch API / Ajax
  5. 5

    Version Control

    احفظ تاريخ شغلك وارجع لأي نسخة، واشتغل مع فريق من غير ما حد يمسح شغل التاني.

    Version Control Systems

    • Git

    VCS Hosting

    • ✓GitHub
    • GitLab
  6. 6

    Package Managers

    نزّل مكتبات غيرك وحدّثها بأمر واحد بدل ما تنسخ ملفات بإيدك.

    • ✓npm
    • pnpm
    • yarn
    • bun
  7. 7

    اختار Framework

    اختار واحد بس واتعمق فيه. React هو الأكتر طلبًا في سوق الشغل.

    • ✓React
    • Vue.js
    • Angular
    • Svelte
    • Solid JS
  8. 8

    كتابة CSS

    طرق تنظم بيها الـ CSS في المشاريع الكبيرة بدل ما يبقى ملف واحد ضخم.

    CSS Frameworks

    • ✓Tailwind
    • Design Systems
  9. 9

    Build Tools

    الأدوات اللي بتجهز الكود للإنتاج، وبتمسك الأخطاء وتظبط شكل الكود قبل ما يوصل للمستخدم.

    Module Bundlers

    • ✓Vite
    • esbuild
    • Rollup
    • Rolldown
    • Parcel

    Linters & Formatters

    • ✓ESLint
    • ✓Prettier
    • Biome
  10. 10

    Testing

    اكتب اختبارات تتأكد إن الكود شغال، وإن أي تعديل جديد ما كسرش حاجة قديمة.

    • ✓Vitest
    • Jest
    • ✓Playwright
    • Cypress
  11. 11

    Type Checkers

    TypeScript بيمسك أخطاء كتير قبل ما الكود يشتغل، وبقى أساسي في أغلب الشركات.

    • TypeScript
  12. 12

    Web Security

    اعرف إزاي المستخدم بيسجل دخول، وإزاي تحمي موقعك ومستخدمينك من أشهر الهجمات.

    Authentication Strategies

    • JWT
    • OAuth
    • Session Auth
    • SSO

    Security Basics

    • HTTPS
    • CORS
    • Content Security Policy
    • OWASP Risks
  13. 13

    Web Components

    مكونات بتتعمل بالمتصفح نفسه من غير framework، وتشتغل في أي مشروع.

    • HTML Templates
    • Custom Elements
    • Shadow DOM
  14. 14

    SSR و Static Sites

    اعرض الصفحة من السيرفر عشان تفتح أسرع ومحركات البحث تقراها، أو ابنيها مرة واحدة كملفات ثابتة.

    Server Side Rendering

    • ✓Next.js
    • React Router
    • TanStack Start
    • Nuxt.js
    • SvelteKit

    Static Site Generators

    • ✓Astro
    • Eleventy
    • VuePress
  15. 15

    GraphQL

    طريقة تانية تكلم بيها الـ API، بتطلب فيها الداتا اللي محتاجها بالظبط.

    • ✓Apollo
    • Relay Modern
  16. 16

    Performance و PWAs

    قيس سرعة موقعك وحسّنها، وخليه يشتغل حتى من غير إنترنت ويتسطب زي التطبيقات.

    Performance

    • Lighthouse
    • DevTools Usage
    • Core Web Vitals

    PWAs

    • Service Workers
    • Web APIs
  17. 17

    Deployment

    انشر مشروعك على الإنترنت واديله دومين، عشان أي حد يقدر يفتحه.

    • ✓Vercel
    • ✓Cloudflare
    • Netlify
    • GitHub Pages
    • Render
    • Railway
  18. 18

    AI-Assisted Coding

    استخدم أدوات الـ AI عشان تشتغل أسرع، بس افهم الكود اللي بتطلعه وراجعه قبل ما تعتمد عليه.

    • How LLMs work
    • Prompting Techniques
    • ✓Claude Code
    • Cursor
    • GitHub Copilot
    • MCP
  19. 19

    خطوات بعد كده

    لو حابب تكمل بنفس مهارات الـ Frontend، تقدر تعمل تطبيقات موبايل وديسكتوب.

    Mobile Apps

    • ✓React Native
    • Flutter
    • Ionic

    Desktop Apps

    • ✓Electron
    • Tauri

مبنية على roadmap.sh/frontend.