Full Code of urboifox/frontend-roadmap for AI

Repository: urboifox/frontend-roadmap
Branch: main
Commit: 3ad284534a79
Files: 1
Total size: 16.3 KB

Directory structure:
gitextract_4tjt3x76/

└── README.md

================================================
FILE CONTENTS
================================================

================================================
FILE: README.md
================================================
الفرونت اند هو من اكتر مجالات البرمجه انتشارا بسبب سهوله تعلمه في البدايه
و معظمنا اصلا هنا نعرف بعض بسببه. لكن فيه ناس كتير مشتته و مش عارف الخريطه بظبط و تتعلم ازاي. و ايه الطريق السليم.

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

هحاول يكون فيه كل المعلومات و الطرق اللي انت محتاجها و انت بتتعلم بالتفصيل
يعني مش هقولك ايه هي التقنيات اللي انت هتتعلمها بس، لكن هقولك كمان ايه التطبيقات اللي هتعملها و امتى تعرف انك خلصت و تقدر تروح على الخطوه اللي بعدها.

هتعامل معاك انك شخص مذاكر الاساسيات، زي الخوارزميات و هياكل البيانات الخ
و لو مذاكرتش الاساسيات و محتاج تعرف عنها اكتر او تعرف تتعلمها منين، ف ده [بوست عظيم عن الأساسيات](https://foregoing-sunshine-22c.notion.site/Programming-Fundamentals-11dabbeedc95807da767d185884d6aab) اللي لازم تعرفها قبل ما تبدأ تتعلم الفرونت إند.

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

---

أهم نقطه بقا

`"يَا أَيُّهَا الَّذِينَ آمَنُوا اصْبِرُوا وَصَابِرُوا وَرَابِطُوا وَاتَّقُوا اللَّهَ لَعَلَّكُمْ تُفْلِحُونَ"`

بما انك اختارت مجال السوفتوير عموما لازم تبقا مقتنع ان المجال العائد بتاعه حلو اه، لكن طويل، و لازم يبقا نفسك انت كمان طويل و تصبر على طلب العلم عشان ربنا يكرمك و يوفقك.


كل تقنيه هتكون متقسمه الى مجموعة من الاجزاء
- جزء اسم التقنيه
- جزء فيه الوصف
- جزء فيه المصادر
- جزء فيه التطبيقات
- جزء فيه الادوات الاضافيه
- جزء هقولك فيه امتى تعرف انك جاهز تدخل على الخطوه الجايه
و كل تقنيه و التانيه هيكون فيه بينهم فاصل 

---

## مقدمة عن الويب و الانترنت

قبل ما تبدأ في اي مجال ليه علاقة بالويب لازم يكون عندك خلفيه ازاي الانترنت و المتصفح بيشتغلو عشان 99% من شغلك هيكون معاهم

### المصادر

بالعربية: [الانترنت - كيف يعمل الانترنت؟ من الذي اخترع الانترنت؟ من يملك الانترنت؟](https://www.youtube.com/watch?v=99yxGabo-XE)

بالانجليزية: [How does the internet work? (Full Course)](https://youtu.be/zN8YNNHcaZc?si=bgsd7qIS_15MzWQ6)

### هتعرف انك خلصت لو

- فهمت الفرق بين ال http و ال https
- عرفت انواع ال requests المختلفه زي get, put, delete الخ
- عرفت يعني ايه DNS
- عرفت يعني ايه IP
- عرفت عناصر الرابط زي sub-domain, domain, routes, query parameter الخ
---
## HTML 
دي بداية الطريق، باستخدام ال html هتقدر انك تبني هيكل الموقع و البنية بتاعته

### المصادر

بالعربية: [Learn HTML In Arabic 2021](https://www.youtube.com/watch?v=6QAELgirvjs&list=PLDoPjvoNmBAw_t_XWUFbBX-c9MafPk9ji)

بالانجليزية: [HTML Tutorial – Full Course for Beginners](https://www.youtube.com/watch?v=kUMe1FH4CHE)

### التطبيقات

[تكليفات على html](https://elzero.org/category/assignments/html-assignments)

### هتعرف انك خلصت لو

- فاهم الفرق ما بين العناصر المختلفه زي head, body, section الخ
- فاهم ال semantic elements
- عارف الفرق مابين ال class و ال id
- عارف ال best practices و ازاي تبني structure بطريقة سليمة

---

## CSS 

بأستخدام ال css هتقدر انك تتحكم في شكل و تصرفات الموقع بتاعك و تضيف اكتر من effect و transition على اي عنصر
ال css هي المسئولة عن تحويل هيكل الموقع (html) الى موقع ملفت و جذاب للمستخدم

### المصادر

بالعربية: [Learn CSS In Arabic 2021](https://www.youtube.com/watch?v=X1ulCwyhCVM&list=PLDoPjvoNmBAzjsz06gkzlSrlev53MGIKe)

بالانجليزية: [CSS Tutorial – Full Course for Beginners](https://www.youtube.com/watch?v=OXGznpKZ_sA)

### التطبيقات

[تكليفات على css](https://elzero.org/category/assignments/css-assignments)

ال 4 تطبيقات على html, css من قناة م اسامة الزيرو بالترتيب

[تطبيق 1](https://www.youtube.com/watch?v=MBq8ZFEIIaQ&list=PLDoPjvoNmBAzHSjcR-HnW9tnxyuye8KbF)

[تطبيق 2](https://www.youtube.com/watch?v=7_USXxmn7DM&list=PLDoPjvoNmBAy1l-2A21ng3gxEyocruT0t)

[تطبيق 3](https://www.youtube.com/watch?v=lXVP3rDH9EU&list=PLDoPjvoNmBAxuCSp2_-9LurPqRVwketnc)

[تطبيق 4](https://www.youtube.com/watch?v=4OGWPn-Q__I&list=PLDoPjvoNmBAyGaRGzPVZCkYx5L7Mo9Tbh)


### أدوات اضافية

[لعبة flexbox zombies](https://mastery.games/flexboxzombies)

[تحديات متنوعة على css](https://cssbattle.dev)

[لعبة grid garden](https://cssgridgarden.com)

### هتعرف انك خلصت لو

- عرفت ازاي تختار عناصر ال html ب اكتر من طريقة زي ال class, id و custom attribute
- فاهم ال box model و الفرق ما بين ال margin و ال padding الخ
- فاهم الفرق ما بين positions المختلفه زي relative, absolute, fixed الخ
- فاهم الفرق ما بين طرق ال dispaly المختلفه زي block, flex الخ
- فاهم ال media queries و تعرف تعمل responsive design
- تعرف تستخدم ال flexbox و ال grid بطريقة سليمة
---

## Git & Github

هو version control system هتستخدمه في جميع مراحل التعلم الجايه
و اساسي جدا انك تتعلمه عشان من خلاله هتقدر تحفظ و تتعامل مع الكود بتاعك بطريقه احترافيه و كمان تشتغل على نفس الكود مع اكتر من شخص
و هتستخدمه في الخطوه الجايه و انت بتطبق من موقع frontend mentor

### المصادر

بالعربية: [[Arabic] Learn Git & GitHub](https://www.youtube.com/watch?v=ACOiGZoqC8w&list=PLDoPjvoNmBAw4eOj58MZPakHjaO3frVMF)

بالانجليزية: [Git and GitHub for Beginners](https://www.youtube.com/watch?v=RGOj5yH7evk)


### أدوات اضافية

[برنامج Github Desktop](https://desktop.github.com/download/)


### هتعرف انك خلصت لو

- عرفت اوامر ال git الأساسية زي add, commit, push, branch, checkout, status, merge, stash الخ
- عرفت ازاي تقدر ترفع الكود بتاعك على github و تنزله على الجهاز بتاعك من اي مكان
- عرفت ازاي تقدر تربط ال terminal او ال command line بتاعك ب github باستخدام ال ssh key
---


هنا مفيش تقنية عشان انت مش هتتعلم حاجه جديد
انت هتوظف اللي انت اتعلمته في التطبيق على اللي فات كله
هتعمل تطبيقين من على frontend mentor ف هتطبق على html و css
و في نفس الوقت هتحتاج ترفع الموقع على github ف هتطبق على git

### المصادر

[ازاي تطبق على frontend mentor](https://www.youtube.com/watch?v=fm2yTd3hJHc)

### التطبيقات

[التطبيق الاول](https://www.frontendmentor.io/challenges/clipboard-landing-page-5cc9bccd6c4c91111378ecb9)

[التطبيق التاني](https://www.frontendmentor.io/challenges/recipe-page-KiTsR8QQKm)


### هتعرف انك خلصت لو

- عرفت تعمل submit للموقعين على frontend mentor
- الموقعين متشابهين جدا للصورة الاصل
- لو محتاج تطبق اكتر خد وقتك و اعمل اكتر من تطبيق عادي، كل ما تطبق هنا بالذات اكتر كل ما يكون افضل
---



## Javascript

دي اهم و اطول مرحلة بالنسبالك، بيتم استخدام javascript في اضفافة functionality او وظائف للموقع بتاعك
يعني مثلا لما اضغط على الزرار ده هعمل كذا، او لما المستخدم يدخل على الصفحه دي هعمل كذا.

### المصادر

بالعربية: [Learn JavaScript In Arabic 2021](https://www.youtube.com/watch?v=GM6dQBmc-Xg&list=PLDoPjvoNmBAx3kiplQR_oeDqLDBUDYwVv)

بالانجليزية: [JavaScript](https://www.youtube.com/watch?v=1uYQRG5csT8&list=PLOmL3sL-afbRVTvedkIrQcDwg2UY0JGTF)

### التطبيقات

[تكليفات javascript](https://elzero.org/category/assignments/javascript-bootcamp-assignments)

موقعين مختلفين باستخدام ال javascript بالترتيب

[الموقع الاول](https://www.youtube.com/watch?v=vedT2jk3hi4&list=PLDoPjvoNmBAzvmpzF-6l3tAviiCPbwkB8)

[الموقع الثاني](https://www.frontendmentor.io/challenges/space-tourism-multipage-website-gRWj1URZ3)

### أدوات اضافية

[افضل مصدر لمعلوماتك عن ال javascript](https://developer.mozilla.org/en-US/docs/Learn)


### هتعرف انك خلصت لو

- فاهم ال promises و الفرق فين ال try catch و ال then keywork
- فاهم ال dom و ال dom manipulation
- فاهم ال async function
- فاهم ال event loop
- تقدر تشوف الحاجات التانيه اللي ممكن تعرفها من [هنا](https://roadmap.sh/javascript)
---

مبروك خلصت اهم خطوة في التراك
الخطوة الجايه انك تقوي نفسك في كام نقطه لازم يبقو معاك ك مطور عموما مش بس مطور فرونت اند
و من النقط دي هي استخدام ال cli او ال terminal بطريقة احترافيه اكتر
و الكتابة على الكيبورد بدون النظر
صدقني دي حاجات هتضرب مستواك في خمس اضعاف، ممكن تزود معاهم انك تتعلم linux مثلا و تستخدم حاجه زي wsl على ويندوز


### المصادر
- terminal / CLI

بالعربية: [[Arabic] Learn Command Line](https://www.youtube.com/watch?v=JVs2Ywy7wGQ&list=PLDoPjvoNmBAxzNO8ixW83Sf8FnLy_MkUT)

بالانجليزية: [Command Line Crash Course](https://www.youtube.com/watch?v=uwAqEzhyjtw)

- touch typing

[Typing club](https://www.typingclub.com)

[Monkey type](https://www.monkeytype.com)

- Linux (اختياري)

بالعربية: [Linux in Arabic](https://www.youtube.com/watch?v=zBV5Gl0iihI&list=PLgCu8TiZE3OZcKIqypbqIU9pG4mZjKP5C)

بالانجليزية: [Linux for Beginners](https://www.youtube.com/watch?v=VbEx7B_PTOE&list=PLIhvC56v63IJIujb5cyE13oLuyORZpdkL)


### أدوات اضافية

[أداة wsl لاستخدام linux على الويندوز](https://learn.microsoft.com/en-us/windows/wsl/install)


### هتعرف انك خلصت لو

- عرفت تتنقل في ملفات جهازك باستخدام ال command line
- عرفت تنشيء ملفت و مجلدات من خلال ال command line
- وصلت على الاقل 30 wpm على monkey type
---

## Tailwind

انت كدا ماشي مستريح جدا و على الطريق السليم و هتدخل على ال react بأريحية

بأختصار tailwind هي framework لل css بتخليك تعمل style للعناصر بتاعتك باستخدام ال html class names
هتستخدمها كتير جدا في react ان شاء الله و في معظم مشاريعك عموما

انت هنا ممكن تسالني ليه مش bootstrap مثلا

انا برشحلك التقنيات الموجوده اكتر في التطبيقات و في الشغل

لكن انت ممكن تتعلم tailwind + bootstrap + scss مع بعض 

و زود اي تقنيه تانيه انت حاببها، متربطش نفسك بالتقنيات اللي هنا بس

حاول توسع مهاراتك عادي

### المصادر

بالعربية: [تعلم Tailwind CSS في مقطع واحد](https://www.youtube.com/watch?v=Pk3hhCJG2Dk)

بالانجليزية: [Learn Tailwind CSS](https://www.youtube.com/watch?v=ft30zcMlFao)

### التطبيقات

[تطبيق باللغه العربية](https://www.youtube.com/watch?v=9Px2cwdQ8PM)

[تطبيق باللفة الانجليزية](https://www.youtube.com/watch?v=8eQwgc9nc64)


### أدوات اضافية

[اضافة tailwind ل vscode](https://v1.tailwindcss.com/docs/intellisense)



### هتعرف انك خلصت لو

- عرفت ازاي ت extend ملف tailwind.config.js
- عارف ازاي تستخدم tailwind في css باستخدام @apply
---

## React.js

أشهر javascript framework من هنا هتبدأ تميز الفرونت اند الشاطر من الضعيف

حاول على قد ما تقدر تكون ملم بمفاهيم ال framework مش بس ال syntax

يعني ازاي بيشتغل و ايه فايدته، ايه هي ال virtual dom و ليه react بيستخدمها و ليه مش موجوده في frameworks تانيه الخ

هتقولي ياعم ما اتعلم ال framework و خلاص و اشتغل هقولك انا جي من المستقبل و مريت ب كل ده و بقولك المفيد

ملحوظه: بفضل جدا انك تشوف الكورس الانجليزي هنا بالذات، مشوفتش زيه في اي مكان حتى الان

ده اللي انا كنت متعلم منه اول ما نزل و يا سلام لو شوفته على scrimba هتتبسط

### المصادر

بالعربية: [كورس رياكت بالعربي](https://youtube.com/playlist?list=PLpr1Lg_f0v3ojNKR4WzZ_SEXhiKBHDQmB&si=QbVNVkCkD_smEv35)

بالانجليزية: [Beginner's tutorial for React](https://www.youtube.com/watch?v=bMknfKXIFA8&t=29s)

### التطبيقات

[تطبيق 1](https://www.youtube.com/watch?v=_oO4Qi5aVZs)

[تطبيق 2](https://www.youtube.com/watch?v=B91wc5dCEBA)


### أدوات اضافية

[اضافه للمتصفح ل react](https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?pli=1)


### هتعرف انك خلصت لو

- عارف ايه هي ال virtual dom و ايه فايدتها
- فهمت مفهوم ال components و ال props
- فهمت ازاي تتعامل مع ال state
- عرفت ازاي تستخدم react router للتنقل بين الصفحات
- فهمت الhooks المختلفه زي useState, useEffect, useCallback
-  فهمت ال context و ازاي تستخدمه
-  عرفت ازاي تعمل reusable component بطريقه سليمه و ايه هي ال rest props
-  فهمت فكرة ال children
-  عرفت تعمل custom hook و امتى تعمل واحد
-  اختياري: عندك خلفيه عن ال compound components
---

## Redux / Recoil / Zustand / Jotai

ايوه زي ما خدت بالك كدا مش حاجه واحده بس حاول متتعاملش مع redux انها مكتبة ال state management الوحيدة في العالم

لكنها يمكن تكون اكتر واحده تعتمد عليها في المشاريع الكبيره و لكن خد عن الباقيين خلفيه برضه كل واحده فيهم ليهم مشروع مناسب تستخدمها فيه
اتعلم redux و ركز فيها

لكن خلي معاك اختيار كمان من التانيين لمشاريعك الشخصيه او الصغيره بحيث تقدر تستخدمها بسرعه

### المصادر

بالعربية: [شرح ريدكس بالعربي](https://www.youtube.com/watch?v=Qsog_cjp7ug&list=PLejc1JbD4ZFREfrBoSl8tjAPZOY6HNqZv)

بالانجليزية: [Learn modern redux](https://www.youtube.com/watch?v=u3KlatzB7GM&list=PL0Zuz27SZ-6M1J5I1w2-uZx36Qp6qhjKo)

### التطبيقات

ممكن تعمل موقع كمان باستخدام redux عادي كدا كدا انت في الغالب هتستخدم state management في كل مشاريعك الجايه ان شاء الله


### هتعرف انك خلصت لو

- فهمت مفهوم Store, Actions, Reducers
- عرفت ازاي تبني تطبيق شغال ب Redux أو Recoil من البداية للنهاية
- فهمت مفهوم الـ Middlewares زي Redux Thunk
---

خد بريك شويه هنا، عاش يا بطل انك كملت كل ده

انت كدا .
frontend developer
بس تقليدي!

شوية الخطوات الجايه هي اللي هتميزك عن غيرك و تخليك فعلا ديناصور زي ما بقول

فيهم كام نقطه اختياريه هقولك عليهم، لكن لو اتعلمتهم صدقني هتبقا شخص تاني ان شاء الله

المصادر في الحاجات اللي جايه ممكن تكون انجليزي بس علشان مفيش ناس كتير بتقدم محتوى في الحاجات دي بالعربي

## framer motion & gsap

دي مكتبات animations هتغير شكل المواقع بتاعتك تماما

فيه منها كتير طبعا و فيه مكتبات بتقدملك حاجات جاهزه، و لكن دول الاكثر انتشارا و ال community بتاعهم كبير

و بصراحه كدا، مفيش اجمد من الاتنين دول


### المصادر

[Framer motion](https://www.youtube.com/watch?v=2V1WK-3HQNk&list=PL4cUxeGkcC9iHDnQfTHEVVceOEBsOf07i)

[Gsap](https://www.youtube.com/watch?v=wo6KNvBlA6k&list=PLSkIx8U0TMvgH2PEokYLIxofdb1L9cJjz)

[Gsap scroll trigger](https://www.youtube.com/watch?v=WEky7V490Rs&list=PLMPgoZdlPumexxtvuPUB3TY7LExI1N_Xp)


### أدوات اضافية

لازم تتابع الناس دي و تخلي دي الفيديوهات اللي في ال feed بتاعك، طريقة تفكيرك في الفرونت اند هتتغير

[Oliver larose](https://www.youtube.com/@olivierlarose1)

[Tom is loading](https://www.youtube.com/@tomisloading)

[Frontend tribe](https://www.youtube.com/@frontend-tribe)

---

## Typescript

اتبسطت في ال 
animations
من هنا و رايح التقنيات هيكون كل هدفها الاحترافيه في الشغل

لازم متشتغلش غير ب 
typescript
و بعد ما تتعود عليها، صدقني مش هتعرف تسيبها

### المصادر

بالعربية: [Learn Typescript In Arabic 2022](https://www.youtube.com/watch?v=yUndnE-2osg&list=PLDoPjvoNmBAy532K9M_fjiAmrJ0gkCyLJ)

بالانجليزية: [Typescript Course](https://www.youtube.com/watch?v=VGu1vDAWNTg&list=PL4cUxeGkcC9gNhFQgS4edYLqP7LkZcFMN)

### التطبيقات

حاول تبني اي موقع بسيط باستخدام react + typescript


### هتعرف انك خلصت لو

- عرفت ال generic props في react باستخدام typescript
- عرفت الفرق بين ال types و ال interfaces
- عرفت ايه هي ال defenition files
- عرفت ازاي تستخدم typescript في react و ايه ال best practices

---

بص بقا

انت عندك طريقين دلوقتي

- اول طريق انك تتعلم nodejs + express و بعدين تدخل على next.js
- تاني طريق انك تدخل على next.js على طول

  
عايز نصيحتي؟ انا مفهمتش next.js الا لما اتعلمت nodejs

هتخليك شخص تاني، تقريبا انا الوحيد في مصر اللي بقول للناس اتعلم nodejs من ضمن التراك بس صدقني فرقت معايا و مع اي حد جرب جدا

و nodejs سهله مش هتاخد معاك اسبوعين ك basics

هتبقا شايف الباك اند بيفكر ازاي و ازاي تتعامل معاه بطريقه عمرك ما تخيلتها، و ممكن كمان تعمل انت مشروع full stack و تكمل و تبقا mern stack مين عارف


## nodejs + express

وصف

### المصادر

بالعربية: [Nodejs + Express](https://www.youtube.com/watch?v=Bzzp0q0T5oM&list=PLQtNtS-WfRa8OF9juY3k6WUWayMfDKHK2)

ده الكورس الوحيد المناسب و اللي وقته مناسب للي احنا عايزينه ك اساسيات

الكورسات التانيه طويله جدا و تفصيليه، شوف اللي انت حابب تتفرج عليه عادي براحتك

### التطبيقات

simple todo api with authentication



### هتعرف انك خلصت لو

- عرفت تتعامل مع postman و ايه هو و ايه البرامج اللي زيه
- عرفت ايه هو ال middleware و ركز اوي في ال middleware
---

## Next.js

بأختصار Next.js هي framework كامل ل React فيه مزايا كتير جدا

في الغالب اغلب شكلك بعد ما تتعلمه هيكون بيه و اتمنى تفهمه بسهوله بالذات من ناحية الباك اند بعد ما اتعلمت 

ملاحظه: ارشحلك الكورس الانجليزي بتاع dave grey

### المصادر

بالعربية: [Nextjs crash course بالعربي](https://www.youtube.com/watch?v=_t4c-vxalp4)

بالانجليزية: [Nextjs full course for beginners](https://www.youtube.com/watch?v=843nec-IvW0&t=14929s)

### التطبيقات

full stack notes application with next.js + tailwind + state management + typescript
بحيث تطبق على اللي فات كله


### هتعرف انك خلصت لو

- عرفت تستخدم ال middleware في next.js
- فهمت ال routing و اسماء الملفات المميزة
- عرفت ازاي تعمل api route و page route
- عرفت ال server actions و ازاي تتعامل معاها
---

## Unit testing

مبروك يا صديقي انت الان يطلق عليك لقب ديناصور

و واثق انك هتقدر تشتغل في وظيفه احلامك

وظيفة احلامك اكيد في شركه كبيره، و الشركات الكبيره كلها بتشتغل ب unit testing عشان تقدر دايما تضمن ان بعد اي تعديل كل حاجه تمشي كما هو متوقع

دي مهاره مهمه جدا و يمكن اكتر واحده ممكن تميزك عن غيرك انك تكون عارف تشتغل ب unit testing

ممكن تبص على unit testing في react او في javascript العاديه

و لكن انا هحطلك مصادر react عشان ده اللي احنا عايزينه

فيه مكتبات كتير لكن يفضل تستخدم Jest او Vitest

### المصادر

[Unit testing with Vitest](https://www.youtube.com/watch?v=8Xwq35cPwYg)


---

من هنا انا واثق انك تقدر تعتمد على نفسك في اللي جاي كله، عندك تقنيات كتيير جدا الويب مجال بيتوسع بسرعه جدا

و برا الويب كمان ممكن تزود مهاراتك في حاجات تانيه، ممكن تتعلم docker, graphql الخ

توكل على الله و انطلق في الطريق المناسب لشغلك، و لكن ده كان الاساس او الخريطه اللي ممكن توصلك لبر الامان

اتمنى تكون استفدت و لو بحاجه بسيطه او على الاقل يبقا الطريق واضح قدامك، متنساش تقولي لو فيه حاجه ممكن اضيفها او تتعدل