All resources
خرائط التعلّم15 دقايق قراءة

خارطة طريق Frontend Developer من الصفر لأول شغل

دليلك لتعلّم Frontend Development بالترتيب الصحيح، من فهم كيف الـWeb بيشتغل إلى HTML وCSS وJavaScript وReact وNext.js، مع مشاريع عملية ومهارات بتحتاجها لتصير جاهز لسوق العمل.

إذا بدك تصير Frontend Developer، مش مطلوب منك تتعلّم كل Framework وكل Tool بتشوفها على الإنترنت. المشكلة إن كتير طلاب بيبلّشوا بـReact أو Next.js قبل ما يفهموا JavaScript منيح، أو بيتعلّموا يبنوا واجهات من دون ما يعرفوا كيف الـBrowser والـServer بيتواصلوا. بهيدي الـRoadmap، رح نمشي مرحلة مرحلة، من أساسيات الـWeb لحد بناء Applications حقيقية، مع توضيح شو لازم تتعلّم، ليه هالمهارة مهمة، وشو لازم تكون قادر تبني قبل ما تنتقل للمرحلة اللي بعدها. الهدف مش تجمع أسماء Technologies على الـCV. الهدف تبني فهم تقني بيسمحلك تشتغل على مشاريع حقيقية، تتعامل مع المشاكل، وتكمّل تتعلّم تقنيات جديدة من دون ما ترجع كل مرة للصفر.

كيف تستعمل هيدي الخارطة؟

  1. 1حدّد المرحلة اللي إنت موجود فيها حالياً.
  • 2راجع المفاهيم الأساسية المطلوبة بكل مرحلة.
  • 3اشتغل على المشروع العملي المقترح قبل ما تنتقل للمرحلة التالية. Project
  • 4احفظ الخارطة وارجعلها كل ما بدك تختار شو تتعلّم بعدين. Roadmap
  • 5استخدم قائمة الجاهزية قبل ما تضيف أي مشروع لملف أعمالك. Production Checklist & Portfolio

    • 01

    01 — افهم كيف الـWeb بيشتغل

    قبل ما تكتب أول Component، لازم تفهم وين الكود تبعك رح يشتغل وكيف المستخدم بيوصل للتطبيق. لما تكتب URL بالـBrowser، بيصير DNS Lookup لتحديد عنوان الـServer، وبعدها بينبعت HTTP Request وبيرجع HTTP Response. الـBrowser بيستقبل الموارد المطلوبة وبيبلّش يعالج HTML وCSS وJavaScript ليعرض الصفحة ويسمح للمستخدم يتفاعل معها. ركّز على فهم Browser & Server، Client Side & Server Side، DNS، HTTP / HTTPS، Request & Response، HTTP Methods، Status Codes، معالجة HTML وCSS وJavaScript، وBrowser Developer Tools. هيدا الفهم رح يساعدك لاحقاً تفهم مشاكل الـAPIs والـRendering والـDeployment بدل ما تتعامل معها كتقنيات منفصلة.

    PRACTICE
    Open a website and inspect its Network tab.

Identify:
1. The initial document request.
2. The HTTP response status.
3. The HTML, CSS, and JavaScript resources.
4. The requests triggered by user interactions.
5. The difference between document and API responses.

    02

    02 — HTML & CSS: تعلّم تبني واجهة من الصفر

    قبل ما تعتمد على React أو أي UI Library، لازم تكون قادر تحوّل تصميم لصفحة شغّالة باستخدام HTML وCSS. تعلّم كيف تنظّم محتوى الصفحة بطريقة صحيحة، كيف تبني Layouts، وكيف تخلي التصميم يتناسب مع الموبايل والـDesktop. ركّز على Semantic HTML، Forms & Inputs، CSS Box Model، Flexbox، CSS Grid، Responsive Design، Media Queries، Accessibility، CSS Variables، Basic Animations، وBrowser DevTools. مش مطلوب تحفظ كل HTML Tag أو CSS Property. المهم تعرف كيف تفتّش وتستخدم الأدوات المناسبة لتحل مشكلة بالـLayout.

    خطوتك الجايي

    كمّل التعلّم مع TechTalks

    طبّق اللي قرأته بكورسات عملية ومشاريع بتساعدك تطوّر مهاراتك بالبرمجة.

    كل الكورسات

    Ultimate Next.js 16 Course

    من أساسيات الـWeb للتعمّق بـNext.js وبناء Full-Stack Developer Community Platform.

    اكتشف الكورس

    Full Stack Web Dev Bootcamp

    مسار تأسيسي لتعلّم React وNext.js والـBackend والـDatabase وبناء مشروع Full-Stack.

    اكتشف الكورس

    كمّل القراءة

    مصادر ممكن تفيدك كمان

    Career PreparationFree

    Free Project Ideas for Developers — Beginner to Advanced

    A practical collection of websites and resources for finding project ideas by skill level, with tips for stronger portfolio work.

    8 min readOpen resource
    PROJECT — RESPONSIVE LANDING PAGE
    Requirements:
- Semantic HTML
- Responsive navigation
- Hero section
- Reusable layout patterns
- Accessible form
- Mobile and desktop layouts
- No CSS framework

Challenge:
Recreate a Figma design using HTML and CSS.

    03

    03 — JavaScript: خلّي الصفحة تتفاعل

    HTML بيعطي الصفحة Structure، وCSS بيعطيها الشكل، أما JavaScript فبيسمحلك تضيف Behavior وتفاعل. هون بتنتقل من بناء صفحات ثابتة إلى تطبيقات بتتغير حسب تصرف المستخدم والـData اللي عم توصلها. تعلّم Variables & Data Types، Functions، Arrays & Objects، Scope & Closures، DOM Manipulation، Events، ES Modules، Promises، Async / Await، Fetch API، Error Handling، Local Storage، وArray Methods. قبل ما تنتقل لـReact، لازم تكون مرتاح بالتعامل مع الـDOM والـEvents والـAPIs والـAsynchronous JavaScript.

    PROJECT — SEARCHABLE PRODUCT CATALOG
    Requirements:
- Fetch data from a public API
- Display products dynamically
- Search and filter products
- Loading state
- Error state
- Empty state
- Product details
- Responsive design

Use Vanilla JavaScript.
Do not use React.

    04

    04 — Git, GitHub & TypeScript

    هول مش مهارات بتضيفها بآخر الطريق كرمال تزيّن الـCV. Git وGitHub لازم يصيروا جزء من طريقة شغلك من أول ما تبلّش تعمل مشاريع، لأن بالشركات غالباً رح تشتغل على Codebase مشتركة مع مبرمجين غيرك. تعلّم Repository Management، Commits، Branches، Pull Requests، Merge Conflicts، Code Reviews، و.gitignore. أما TypeScript، فبيساعدك تعبّر عن شكل الـData وتكتشف أنواع معيّنة من الأخطاء قبل تشغيل التطبيق. ركّز على Basic Types، Interfaces، Type Aliases، Unions، Generics، Type Narrowing، Optional Properties، Type Inference، وTyping API Responses.

    PROJECT — TYPESCRIPT MIGRATION
    Take an existing JavaScript project and:
1. Convert it to TypeScript.
2. Define types for API responses.
3. Remove unnecessary any types.
4. Create a feature branch.
5. Implement a new feature.
6. Open a pull request.
7. Review and merge the changes.

    05

    05 — React: تعلّم تبني Applications من Components

    لما يصير عندك واجهة كبيرة فيها أجزاء بتتغيّر حسب تفاعل المستخدم، React بيساعدك تقسّم التطبيق لـComponents وتنظّم الـState والـData Flow. هون ما بدك تحفظ Hooks وتستخدمها عشوائياً. بدك تفهم كيف React بيفكّر، إمتى الـComponent بيعمل Render، وكيف الـState بتأثر على الواجهة. ركّز على Components، JSX، Props، State، Events، Conditional Rendering، Lists & Keys، Forms، Hooks، useEffect، Component Composition، Custom Hooks، Context، وReact DevTools. تعلّم كمان كيف تتجنب الـunnecessary effects، وكيف تميّز بين الـState اللي لازم تخزّنها والـData اللي فيك تشتقها من State موجودة.

    PROJECT — INTERACTIVE DASHBOARD
    Requirements:
- Reusable components
- Search and filtering
- Forms with validation
- Loading and error states
- Shared state
- Custom hooks
- Responsive interface
- API integration

Explain why each major component owns its state.

    06

    06 — Next.js: انتقل من React إلى بناء Full-Stack Applications

    React بيساعدك تبني User Interfaces، أما Next.js فبيعطيك Framework وأدوات إضافية لبناء Web Applications فيها Rendering Strategies، Routing، Server-side Logic، وData Fetching. هون بتصير تفهم ليه في Code لازم يشتغل على الـServer، وليه أجزاء تانية لازم تشتغل داخل الـBrowser. المطلوب ما يكون بس إنك تعرف تستخدم Next.js، بل إنك تفهم القرارات التقنية ورا كل Feature. ركّز على App Router، Pages & Layouts، Server Components، Client Components، Dynamic Routes، Data Fetching، Server Actions، Route Handlers، Rendering Strategies، Caching & Revalidation، Streaming، Authentication، Database Integration، وDeployment.

    PROJECT — FULL-STACK BUSINESS DASHBOARD
    Requirements:
- Authentication
- User roles
- Protected routes
- Database integration
- CRUD operations
- Form validation
- Server-side data fetching
- Route Handlers
- Server Actions
- Loading and error states
- Deployment

Tech Stack:
Next.js 16
TypeScript
Tailwind CSS
MongoDB or PostgreSQL
Auth.js

    07

    07 — من Demo إلى Production

    في فرق كبير بين Application شغّالة على localhost وتطبيق حقيقي في ناس عم تستخدمه. ممكن الـUI تكون ممتازة والـFeatures تشتغل بالـDemo، بس التطبيق يواجه مشاكل أول ما يزيد عدد المستخدمين أو يصير في Requests متزامنة أو تنقطع خدمة خارجية. كرمال هيك، لازم تتعلّم Testing Fundamentals، Unit & Integration Testing، End-to-End Testing، Accessibility، Web Performance، Core Web Vitals، Authentication & Authorization، XSS & CSRF Awareness، Environment Variables، Deployment، Error Monitoring، Logging، وBasic CI/CD. مش مطلوب تتخصّص بكل هالمجالات، بس لازم تكون قادر تعرف وين المشكلة وكيف تتحقق إن التطبيق شغّال خارج جهازك.

    PRODUCTION READINESS CHECKLIST
    [ ] Responsive on mobile and desktop
[ ] Accessible forms and navigation
[ ] Proper loading states
[ ] Clear error handling
[ ] Environment variables configured
[ ] No exposed secrets
[ ] Authentication and authorization checked
[ ] API errors handled
[ ] Critical flows tested
[ ] Performance checked
[ ] Application deployed
[ ] README and setup instructions included

    08

    08 — ابنِ Portfolio بيثبت مهاراتك

    بعد ما تتعلّم التقنيات، ما تكتفي بعرض أسماء الـFrameworks على LinkedIn أو الـCV. لازم يكون عندك مشاريع بتفرجي كيف بتستخدم هالمعرفة لحل مشاكل حقيقية. بدل ما تعمل عشرة Projects صغار وما تكمّلهم، اشتغل على عدد محدود من المشاريع القوية: Responsive Website بيثبت فهمك لـHTML وCSS وResponsive Design، Interactive React Application بيثبت قدرتك تتعامل مع Components وState وAPIs، وFull-Stack Business Application بيثبت فهمك للـAuthentication والـDatabase والـBusiness Logic والـDeployment. لكل مشروع، حضّر GitHub Repository منظّمة، README واضحة، وصور أو Demo بتشرح شو بنيت وليه.

    PORTFOLIO PROJECT CHECKLIST
    - Clear problem statement
- Defined target users
- Live deployed application
- Public GitHub repository
- Clean README
- Screenshots
- Setup instructions
- Technical decisions
- Challenges and solutions
- Known limitations

    09

    الخارطة الكاملة — Frontend Developer Roadmap

    احفظ هيدي الـRoadmap وارجعلها كل ما تحس حالك ضايع بين الـFrameworks والـTools. هيدا ترتيب تعلّم مقترح، مش شرط تخلّص كل مرحلة بنسبة 100% قبل ما تنتقل للي بعدها. مثلاً، Git لازم تستعمله خلال كل المراحل، وAccessibility وTesting لازم يصيروا جزء من طريقة شغلك من وقت مبكر. الأهم إنك تعرف ليه عم تتعلّم كل Technology، وشو لازم تكون قادر تعمل فيها.

    FRONTEND DEVELOPER ROADMAP 2026
    Web Fundamentals
       ↓
HTML & CSS
       ↓
JavaScript
       ↓
Git + GitHub + TypeScript
       ↓
React
       ↓
Next.js
       ↓
Testing + Performance + Security
       ↓
Deployment
       ↓
Portfolio + Real Projects

    10

    بدك تتعلّم Next.js 16 مع TechTalks؟

    إذا وصلت لمرحلة React، أو بدك تفهم كيف تنتقل من أساسيات الـWeb لبناء Full-Stack Applications، فيك تنضم لدورة Ultimate Next.js 16 من TechTalks. الدورة بتشمل Live Sessions، تسجيلات، Assignments، ومشروع نهائي بتطبّق فيه اللي تعلّمته. بتبلّش من فهم كيف الـWeb بيشتغل وبتكمل بمواضيع مثل Rendering، Data Fetching، Server Components، Authentication، Databases وDeployment.

    Explore the Ultimate Next.js 16 Course
    Developer ToolsFree

    Best Developer Tools by Use Case

    A practical guide to choosing the right developer tool based on what you are building, from enterprise applications and full-stack projects to monitoring, databases, hosting, mobile development, and IDEs.

    8 min readOpen resource
    Career PreparationFree

    5 ChatGPT Prompts Before Any Job Interview

    Five practical ChatGPT prompts to simulate a role-specific job interview and improve your preparation.

    8 min readOpen resource