الفرونت اند هو من اكتر مجالات البرمجه انتشارا بسبب سهوله تعلمه في البدايه و معظمنا اصلا هنا نعرف بعض بسببه. لكن فيه ناس كتير مشتته و مش عارف الخريطه بظبط و تتعلم ازاي. و ايه الطريق السليم.
ف الريبو دي هتكون عباره عن رودماب او خريطه لتعلم الفرونت اند باستخدام React من اول ما تبدأ لحد ما تكون مميز عن غيرك ان شاء الله.
هحاول يكون فيه كل المعلومات و الطرق اللي انت محتاجها و انت بتتعلم بالتفصيل يعني مش هقولك ايه هي التقنيات اللي انت هتتعلمها بس، لكن هقولك كمان ايه التطبيقات اللي هتعملها و امتى تعرف انك خلصت و تقدر تروح على الخطوه اللي بعدها.
هتعامل معاك انك شخص مذاكر الاساسيات، زي الخوارزميات و هياكل البيانات الخ و لو مذاكرتش الاساسيات و محتاج تعرف عنها اكتر او تعرف تتعلمها منين، ف ده بوست عظيم عن الأساسيات اللي لازم تعرفها قبل ما تبدأ تتعلم الفرونت إند.
أنصحك تروح تشوفه الأول، وهتلاقي فيه كل اللي محتاجه عشان تأسس نفسك كويس. بعد ما تخلص من الأساسيات، تعال هنا وهتلاقي كل اللي يساعدك تتعلم الفرونت إند خطوة بخطوة
أهم نقطه بقا
"يَا أَيُّهَا الَّذِينَ آمَنُوا اصْبِرُوا وَصَابِرُوا وَرَابِطُوا وَاتَّقُوا اللَّهَ لَعَلَّكُمْ تُفْلِحُونَ"
بما انك اختارت مجال السوفتوير عموما لازم تبقا مقتنع ان المجال العائد بتاعه حلو اه، لكن طويل، و لازم يبقا نفسك انت كمان طويل و تصبر على طلب العلم عشان ربنا يكرمك و يوفقك.
كل تقنيه هتكون متقسمه الى مجموعة من الاجزاء
- جزء اسم التقنيه
- جزء فيه الوصف
- جزء فيه المصادر
- جزء فيه التطبيقات
- جزء فيه الادوات الاضافيه
- جزء هقولك فيه امتى تعرف انك جاهز تدخل على الخطوه الجايه و كل تقنيه و التانيه هيكون فيه بينهم فاصل
قبل ما تبدأ في اي مجال ليه علاقة بالويب لازم يكون عندك خلفيه ازاي الانترنت و المتصفح بيشتغلو عشان 99% من شغلك هيكون معاهم
بالعربية: الانترنت - كيف يعمل الانترنت؟ من الذي اخترع الانترنت؟ من يملك الانترنت؟
بالانجليزية: How does the internet work? (Full Course)
- فهمت الفرق بين ال http و ال https
- عرفت انواع ال requests المختلفه زي get, put, delete الخ
- عرفت يعني ايه DNS
- عرفت يعني ايه IP
- عرفت عناصر الرابط زي sub-domain, domain, routes, query parameter الخ
دي بداية الطريق، باستخدام ال html هتقدر انك تبني هيكل الموقع و البنية بتاعته
بالعربية: Learn HTML In Arabic 2021
بالانجليزية: HTML Tutorial – Full Course for Beginners
- فاهم الفرق ما بين العناصر المختلفه زي head, body, section الخ
- فاهم ال semantic elements
- عارف الفرق مابين ال class و ال id
- عارف ال best practices و ازاي تبني structure بطريقة سليمة
بأستخدام ال css هتقدر انك تتحكم في شكل و تصرفات الموقع بتاعك و تضيف اكتر من effect و transition على اي عنصر ال css هي المسئولة عن تحويل هيكل الموقع (html) الى موقع ملفت و جذاب للمستخدم
بالعربية: Learn CSS In Arabic 2021
بالانجليزية: CSS Tutorial – Full Course for Beginners
ال 4 تطبيقات على html, css من قناة م اسامة الزيرو بالترتيب
- عرفت ازاي تختار عناصر ال html ب اكتر من طريقة زي ال class, id و custom attribute
- فاهم ال box model و الفرق ما بين ال margin و ال padding الخ
- فاهم الفرق ما بين positions المختلفه زي relative, absolute, fixed الخ
- فاهم الفرق ما بين طرق ال dispaly المختلفه زي block, flex الخ
- فاهم ال media queries و تعرف تعمل responsive design
- تعرف تستخدم ال flexbox و ال grid بطريقة سليمة
هو version control system هتستخدمه في جميع مراحل التعلم الجايه و اساسي جدا انك تتعلمه عشان من خلاله هتقدر تحفظ و تتعامل مع الكود بتاعك بطريقه احترافيه و كمان تشتغل على نفس الكود مع اكتر من شخص و هتستخدمه في الخطوه الجايه و انت بتطبق من موقع frontend mentor
بالعربية: [Arabic] Learn Git & GitHub
بالانجليزية: Git and GitHub for Beginners
- عرفت اوامر ال git الأساسية زي add, commit, push, branch, checkout, status, merge, stash الخ
- عرفت ازاي تقدر ترفع الكود بتاعك على github و تنزله على الجهاز بتاعك من اي مكان
- عرفت ازاي تقدر تربط ال terminal او ال command line بتاعك ب github باستخدام ال ssh key
هنا مفيش تقنية عشان انت مش هتتعلم حاجه جديد انت هتوظف اللي انت اتعلمته في التطبيق على اللي فات كله هتعمل تطبيقين من على frontend mentor ف هتطبق على html و css و في نفس الوقت هتحتاج ترفع الموقع على github ف هتطبق على git
- عرفت تعمل submit للموقعين على frontend mentor
- الموقعين متشابهين جدا للصورة الاصل
- لو محتاج تطبق اكتر خد وقتك و اعمل اكتر من تطبيق عادي، كل ما تطبق هنا بالذات اكتر كل ما يكون افضل
دي اهم و اطول مرحلة بالنسبالك، بيتم استخدام javascript في اضفافة functionality او وظائف للموقع بتاعك يعني مثلا لما اضغط على الزرار ده هعمل كذا، او لما المستخدم يدخل على الصفحه دي هعمل كذا.
بالعربية: Learn JavaScript In Arabic 2021
بالانجليزية: JavaScript
موقعين مختلفين باستخدام ال javascript بالترتيب
افضل مصدر لمعلوماتك عن ال javascript
- فاهم ال promises و الفرق فين ال try catch و ال then keywork
- فاهم ال dom و ال dom manipulation
- فاهم ال async function
- فاهم ال event loop
- تقدر تشوف الحاجات التانيه اللي ممكن تعرفها من هنا
مبروك خلصت اهم خطوة في التراك الخطوة الجايه انك تقوي نفسك في كام نقطه لازم يبقو معاك ك مطور عموما مش بس مطور فرونت اند و من النقط دي هي استخدام ال cli او ال terminal بطريقة احترافيه اكتر و الكتابة على الكيبورد بدون النظر صدقني دي حاجات هتضرب مستواك في خمس اضعاف، ممكن تزود معاهم انك تتعلم linux مثلا و تستخدم حاجه زي wsl على ويندوز
- terminal / CLI
بالعربية: [Arabic] Learn Command Line
بالانجليزية: Command Line Crash Course
- touch typing
- Linux (اختياري)
بالعربية: Linux in Arabic
بالانجليزية: Linux for Beginners
أداة wsl لاستخدام linux على الويندوز
- عرفت تتنقل في ملفات جهازك باستخدام ال command line
- عرفت تنشيء ملفت و مجلدات من خلال ال command line
- وصلت على الاقل 30 wpm على monkey type
انت كدا ماشي مستريح جدا و على الطريق السليم و هتدخل على ال react بأريحية
بأختصار tailwind هي framework لل css بتخليك تعمل style للعناصر بتاعتك باستخدام ال html class names هتستخدمها كتير جدا في react ان شاء الله و في معظم مشاريعك عموما
انت هنا ممكن تسالني ليه مش bootstrap مثلا
انا برشحلك التقنيات الموجوده اكتر في التطبيقات و في الشغل
لكن انت ممكن تتعلم tailwind + bootstrap + scss مع بعض
و زود اي تقنيه تانيه انت حاببها، متربطش نفسك بالتقنيات اللي هنا بس
حاول توسع مهاراتك عادي
بالعربية: تعلم Tailwind CSS في مقطع واحد
بالانجليزية: Learn Tailwind CSS
- عرفت ازاي ت extend ملف tailwind.config.js
- عارف ازاي تستخدم tailwind في css باستخدام @apply
أشهر javascript framework من هنا هتبدأ تميز الفرونت اند الشاطر من الضعيف
حاول على قد ما تقدر تكون ملم بمفاهيم ال framework مش بس ال syntax
يعني ازاي بيشتغل و ايه فايدته، ايه هي ال virtual dom و ليه react بيستخدمها و ليه مش موجوده في frameworks تانيه الخ
هتقولي ياعم ما اتعلم ال framework و خلاص و اشتغل هقولك انا جي من المستقبل و مريت ب كل ده و بقولك المفيد
ملحوظه: بفضل جدا انك تشوف الكورس الانجليزي هنا بالذات، مشوفتش زيه في اي مكان حتى الان
ده اللي انا كنت متعلم منه اول ما نزل و يا سلام لو شوفته على scrimba هتتبسط
بالعربية: كورس رياكت بالعربي
بالانجليزية: Beginner's tutorial for React
- عارف ايه هي ال virtual dom و ايه فايدتها
- فهمت مفهوم ال components و ال props
- فهمت ازاي تتعامل مع ال state
- عرفت ازاي تستخدم react router للتنقل بين الصفحات
- فهمت الhooks المختلفه زي useState, useEffect, useCallback
- فهمت ال context و ازاي تستخدمه
- عرفت ازاي تعمل reusable component بطريقه سليمه و ايه هي ال rest props
- فهمت فكرة ال children
- عرفت تعمل custom hook و امتى تعمل واحد
- اختياري: عندك خلفيه عن ال compound components
ايوه زي ما خدت بالك كدا مش حاجه واحده بس حاول متتعاملش مع redux انها مكتبة ال state management الوحيدة في العالم
لكنها يمكن تكون اكتر واحده تعتمد عليها في المشاريع الكبيره و لكن خد عن الباقيين خلفيه برضه كل واحده فيهم ليهم مشروع مناسب تستخدمها فيه اتعلم redux و ركز فيها
لكن خلي معاك اختيار كمان من التانيين لمشاريعك الشخصيه او الصغيره بحيث تقدر تستخدمها بسرعه
بالعربية: شرح ريدكس بالعربي
بالانجليزية: Learn modern redux
ممكن تعمل موقع كمان باستخدام redux عادي كدا كدا انت في الغالب هتستخدم state management في كل مشاريعك الجايه ان شاء الله
- فهمت مفهوم Store, Actions, Reducers
- عرفت ازاي تبني تطبيق شغال ب Redux أو Recoil من البداية للنهاية
- فهمت مفهوم الـ Middlewares زي Redux Thunk
خد بريك شويه هنا، عاش يا بطل انك كملت كل ده
انت كدا . frontend developer بس تقليدي!
شوية الخطوات الجايه هي اللي هتميزك عن غيرك و تخليك فعلا ديناصور زي ما بقول
فيهم كام نقطه اختياريه هقولك عليهم، لكن لو اتعلمتهم صدقني هتبقا شخص تاني ان شاء الله
المصادر في الحاجات اللي جايه ممكن تكون انجليزي بس علشان مفيش ناس كتير بتقدم محتوى في الحاجات دي بالعربي
دي مكتبات animations هتغير شكل المواقع بتاعتك تماما
فيه منها كتير طبعا و فيه مكتبات بتقدملك حاجات جاهزه، و لكن دول الاكثر انتشارا و ال community بتاعهم كبير
و بصراحه كدا، مفيش اجمد من الاتنين دول
لازم تتابع الناس دي و تخلي دي الفيديوهات اللي في ال feed بتاعك، طريقة تفكيرك في الفرونت اند هتتغير
اتبسطت في ال animations من هنا و رايح التقنيات هيكون كل هدفها الاحترافيه في الشغل
لازم متشتغلش غير ب typescript و بعد ما تتعود عليها، صدقني مش هتعرف تسيبها
بالعربية: Learn Typescript In Arabic 2022
بالانجليزية: Typescript Course
حاول تبني اي موقع بسيط باستخدام 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
ده الكورس الوحيد المناسب و اللي وقته مناسب للي احنا عايزينه ك اساسيات
الكورسات التانيه طويله جدا و تفصيليه، شوف اللي انت حابب تتفرج عليه عادي براحتك
simple todo api with authentication
- عرفت تتعامل مع postman و ايه هو و ايه البرامج اللي زيه
- عرفت ايه هو ال middleware و ركز اوي في ال middleware
بأختصار Next.js هي framework كامل ل React فيه مزايا كتير جدا
في الغالب اغلب شكلك بعد ما تتعلمه هيكون بيه و اتمنى تفهمه بسهوله بالذات من ناحية الباك اند بعد ما اتعلمت
ملاحظه: ارشحلك الكورس الانجليزي بتاع dave grey
بالعربية: Nextjs crash course بالعربي
بالانجليزية: Nextjs full course for beginners
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 في react او في javascript العاديه
و لكن انا هحطلك مصادر react عشان ده اللي احنا عايزينه
فيه مكتبات كتير لكن يفضل تستخدم Jest او Vitest
من هنا انا واثق انك تقدر تعتمد على نفسك في اللي جاي كله، عندك تقنيات كتيير جدا الويب مجال بيتوسع بسرعه جدا
و برا الويب كمان ممكن تزود مهاراتك في حاجات تانيه، ممكن تتعلم docker, graphql الخ
توكل على الله و انطلق في الطريق المناسب لشغلك، و لكن ده كان الاساس او الخريطه اللي ممكن توصلك لبر الامان
اتمنى تكون استفدت و لو بحاجه بسيطه او على الاقل يبقا الطريق واضح قدامك، متنساش تقولي لو فيه حاجه ممكن اضيفها او تتعدل