└── README.md /README.md: -------------------------------------------------------------------------------- 1 | الفرونت اند هو من اكتر مجالات البرمجه انتشارا بسبب سهوله تعلمه في البدايه 2 | و معظمنا اصلا هنا نعرف بعض بسببه. لكن فيه ناس كتير مشتته و مش عارف الخريطه بظبط و تتعلم ازاي. و ايه الطريق السليم. 3 | 4 | ف الريبو دي هتكون عباره عن رودماب او خريطه لتعلم الفرونت اند باستخدام React من اول ما تبدأ لحد ما تكون مميز عن غيرك ان شاء الله. 5 | 6 | هحاول يكون فيه كل المعلومات و الطرق اللي انت محتاجها و انت بتتعلم بالتفصيل 7 | يعني مش هقولك ايه هي التقنيات اللي انت هتتعلمها بس، لكن هقولك كمان ايه التطبيقات اللي هتعملها و امتى تعرف انك خلصت و تقدر تروح على الخطوه اللي بعدها. 8 | 9 | هتعامل معاك انك شخص مذاكر الاساسيات، زي الخوارزميات و هياكل البيانات الخ 10 | و لو مذاكرتش الاساسيات و محتاج تعرف عنها اكتر او تعرف تتعلمها منين، ف ده [بوست عظيم عن الأساسيات](https://foregoing-sunshine-22c.notion.site/Programming-Fundamentals-11dabbeedc95807da767d185884d6aab) اللي لازم تعرفها قبل ما تبدأ تتعلم الفرونت إند. 11 | 12 | أنصحك تروح تشوفه الأول، وهتلاقي فيه كل اللي محتاجه عشان تأسس نفسك كويس. بعد ما تخلص من الأساسيات، تعال هنا وهتلاقي كل اللي يساعدك تتعلم الفرونت إند خطوة بخطوة 13 | 14 | --- 15 | 16 | أهم نقطه بقا 17 | 18 | `"يَا أَيُّهَا الَّذِينَ آمَنُوا اصْبِرُوا وَصَابِرُوا وَرَابِطُوا وَاتَّقُوا اللَّهَ لَعَلَّكُمْ تُفْلِحُونَ"` 19 | 20 | بما انك اختارت مجال السوفتوير عموما لازم تبقا مقتنع ان المجال العائد بتاعه حلو اه، لكن طويل، و لازم يبقا نفسك انت كمان طويل و تصبر على طلب العلم عشان ربنا يكرمك و يوفقك. 21 | 22 | 23 | كل تقنيه هتكون متقسمه الى مجموعة من الاجزاء 24 | - جزء اسم التقنيه 25 | - جزء فيه الوصف 26 | - جزء فيه المصادر 27 | - جزء فيه التطبيقات 28 | - جزء فيه الادوات الاضافيه 29 | - جزء هقولك فيه امتى تعرف انك جاهز تدخل على الخطوه الجايه 30 | و كل تقنيه و التانيه هيكون فيه بينهم فاصل 31 | 32 | --- 33 | 34 | ## مقدمة عن الويب و الانترنت 35 | 36 | قبل ما تبدأ في اي مجال ليه علاقة بالويب لازم يكون عندك خلفيه ازاي الانترنت و المتصفح بيشتغلو عشان 99% من شغلك هيكون معاهم 37 | 38 | ### المصادر 39 | 40 | بالعربية: [الانترنت - كيف يعمل الانترنت؟ من الذي اخترع الانترنت؟ من يملك الانترنت؟](https://www.youtube.com/watch?v=99yxGabo-XE) 41 | 42 | بالانجليزية: [How does the internet work? (Full Course)](https://youtu.be/zN8YNNHcaZc?si=bgsd7qIS_15MzWQ6) 43 | 44 | ### هتعرف انك خلصت لو 45 | 46 | - فهمت الفرق بين ال http و ال https 47 | - عرفت انواع ال requests المختلفه زي get, put, delete الخ 48 | - عرفت يعني ايه DNS 49 | - عرفت يعني ايه IP 50 | - عرفت عناصر الرابط زي sub-domain, domain, routes, query parameter الخ 51 | --- 52 | ## HTML 53 | دي بداية الطريق، باستخدام ال html هتقدر انك تبني هيكل الموقع و البنية بتاعته 54 | 55 | ### المصادر 56 | 57 | بالعربية: [Learn HTML In Arabic 2021](https://www.youtube.com/watch?v=6QAELgirvjs&list=PLDoPjvoNmBAw_t_XWUFbBX-c9MafPk9ji) 58 | 59 | بالانجليزية: [HTML Tutorial – Full Course for Beginners](https://www.youtube.com/watch?v=kUMe1FH4CHE) 60 | 61 | ### التطبيقات 62 | 63 | [تكليفات على html](https://elzero.org/category/assignments/html-assignments) 64 | 65 | ### هتعرف انك خلصت لو 66 | 67 | - فاهم الفرق ما بين العناصر المختلفه زي head, body, section الخ 68 | - فاهم ال semantic elements 69 | - عارف الفرق مابين ال class و ال id 70 | - عارف ال best practices و ازاي تبني structure بطريقة سليمة 71 | 72 | --- 73 | 74 | ## CSS 75 | 76 | بأستخدام ال css هتقدر انك تتحكم في شكل و تصرفات الموقع بتاعك و تضيف اكتر من effect و transition على اي عنصر 77 | ال css هي المسئولة عن تحويل هيكل الموقع (html) الى موقع ملفت و جذاب للمستخدم 78 | 79 | ### المصادر 80 | 81 | بالعربية: [Learn CSS In Arabic 2021](https://www.youtube.com/watch?v=X1ulCwyhCVM&list=PLDoPjvoNmBAzjsz06gkzlSrlev53MGIKe) 82 | 83 | بالانجليزية: [CSS Tutorial – Full Course for Beginners](https://www.youtube.com/watch?v=OXGznpKZ_sA) 84 | 85 | ### التطبيقات 86 | 87 | [تكليفات على css](https://elzero.org/category/assignments/css-assignments) 88 | 89 | ال 4 تطبيقات على html, css من قناة م اسامة الزيرو بالترتيب 90 | 91 | [تطبيق 1](https://www.youtube.com/watch?v=MBq8ZFEIIaQ&list=PLDoPjvoNmBAzHSjcR-HnW9tnxyuye8KbF) 92 | 93 | [تطبيق 2](https://www.youtube.com/watch?v=7_USXxmn7DM&list=PLDoPjvoNmBAy1l-2A21ng3gxEyocruT0t) 94 | 95 | [تطبيق 3](https://www.youtube.com/watch?v=lXVP3rDH9EU&list=PLDoPjvoNmBAxuCSp2_-9LurPqRVwketnc) 96 | 97 | [تطبيق 4](https://www.youtube.com/watch?v=4OGWPn-Q__I&list=PLDoPjvoNmBAyGaRGzPVZCkYx5L7Mo9Tbh) 98 | 99 | 100 | ### أدوات اضافية 101 | 102 | [لعبة flexbox zombies](https://mastery.games/flexboxzombies) 103 | 104 | [تحديات متنوعة على css](https://cssbattle.dev) 105 | 106 | [لعبة grid garden](https://cssgridgarden.com) 107 | 108 | ### هتعرف انك خلصت لو 109 | 110 | - عرفت ازاي تختار عناصر ال html ب اكتر من طريقة زي ال class, id و custom attribute 111 | - فاهم ال box model و الفرق ما بين ال margin و ال padding الخ 112 | - فاهم الفرق ما بين positions المختلفه زي relative, absolute, fixed الخ 113 | - فاهم الفرق ما بين طرق ال dispaly المختلفه زي block, flex الخ 114 | - فاهم ال media queries و تعرف تعمل responsive design 115 | - تعرف تستخدم ال flexbox و ال grid بطريقة سليمة 116 | --- 117 | 118 | ## Git & Github 119 | 120 | هو version control system هتستخدمه في جميع مراحل التعلم الجايه 121 | و اساسي جدا انك تتعلمه عشان من خلاله هتقدر تحفظ و تتعامل مع الكود بتاعك بطريقه احترافيه و كمان تشتغل على نفس الكود مع اكتر من شخص 122 | و هتستخدمه في الخطوه الجايه و انت بتطبق من موقع frontend mentor 123 | 124 | ### المصادر 125 | 126 | بالعربية: [[Arabic] Learn Git & GitHub](https://www.youtube.com/watch?v=ACOiGZoqC8w&list=PLDoPjvoNmBAw4eOj58MZPakHjaO3frVMF) 127 | 128 | بالانجليزية: [Git and GitHub for Beginners](https://www.youtube.com/watch?v=RGOj5yH7evk) 129 | 130 | 131 | ### أدوات اضافية 132 | 133 | [برنامج Github Desktop](https://desktop.github.com/download/) 134 | 135 | 136 | ### هتعرف انك خلصت لو 137 | 138 | - عرفت اوامر ال git الأساسية زي add, commit, push, branch, checkout, status, merge, stash الخ 139 | - عرفت ازاي تقدر ترفع الكود بتاعك على github و تنزله على الجهاز بتاعك من اي مكان 140 | - عرفت ازاي تقدر تربط ال terminal او ال command line بتاعك ب github باستخدام ال ssh key 141 | --- 142 | 143 | 144 | هنا مفيش تقنية عشان انت مش هتتعلم حاجه جديد 145 | انت هتوظف اللي انت اتعلمته في التطبيق على اللي فات كله 146 | هتعمل تطبيقين من على frontend mentor ف هتطبق على html و css 147 | و في نفس الوقت هتحتاج ترفع الموقع على github ف هتطبق على git 148 | 149 | ### المصادر 150 | 151 | [ازاي تطبق على frontend mentor](https://www.youtube.com/watch?v=fm2yTd3hJHc) 152 | 153 | ### التطبيقات 154 | 155 | [التطبيق الاول](https://www.frontendmentor.io/challenges/clipboard-landing-page-5cc9bccd6c4c91111378ecb9) 156 | 157 | [التطبيق التاني](https://www.frontendmentor.io/challenges/recipe-page-KiTsR8QQKm) 158 | 159 | 160 | ### هتعرف انك خلصت لو 161 | 162 | - عرفت تعمل submit للموقعين على frontend mentor 163 | - الموقعين متشابهين جدا للصورة الاصل 164 | - لو محتاج تطبق اكتر خد وقتك و اعمل اكتر من تطبيق عادي، كل ما تطبق هنا بالذات اكتر كل ما يكون افضل 165 | --- 166 | 167 | 168 | 169 | ## Javascript 170 | 171 | دي اهم و اطول مرحلة بالنسبالك، بيتم استخدام javascript في اضفافة functionality او وظائف للموقع بتاعك 172 | يعني مثلا لما اضغط على الزرار ده هعمل كذا، او لما المستخدم يدخل على الصفحه دي هعمل كذا. 173 | 174 | ### المصادر 175 | 176 | بالعربية: [Learn JavaScript In Arabic 2021](https://www.youtube.com/watch?v=GM6dQBmc-Xg&list=PLDoPjvoNmBAx3kiplQR_oeDqLDBUDYwVv) 177 | 178 | بالانجليزية: [JavaScript](https://www.youtube.com/watch?v=1uYQRG5csT8&list=PLOmL3sL-afbRVTvedkIrQcDwg2UY0JGTF) 179 | 180 | ### التطبيقات 181 | 182 | [تكليفات javascript](https://elzero.org/category/assignments/javascript-bootcamp-assignments) 183 | 184 | موقعين مختلفين باستخدام ال javascript بالترتيب 185 | 186 | [الموقع الاول](https://www.youtube.com/watch?v=vedT2jk3hi4&list=PLDoPjvoNmBAzvmpzF-6l3tAviiCPbwkB8) 187 | 188 | [الموقع الثاني](https://www.frontendmentor.io/challenges/space-tourism-multipage-website-gRWj1URZ3) 189 | 190 | ### أدوات اضافية 191 | 192 | [افضل مصدر لمعلوماتك عن ال javascript](https://developer.mozilla.org/en-US/docs/Learn) 193 | 194 | 195 | ### هتعرف انك خلصت لو 196 | 197 | - فاهم ال promises و الفرق فين ال try catch و ال then keywork 198 | - فاهم ال dom و ال dom manipulation 199 | - فاهم ال async function 200 | - فاهم ال event loop 201 | - تقدر تشوف الحاجات التانيه اللي ممكن تعرفها من [هنا](https://roadmap.sh/javascript) 202 | --- 203 | 204 | مبروك خلصت اهم خطوة في التراك 205 | الخطوة الجايه انك تقوي نفسك في كام نقطه لازم يبقو معاك ك مطور عموما مش بس مطور فرونت اند 206 | و من النقط دي هي استخدام ال cli او ال terminal بطريقة احترافيه اكتر 207 | و الكتابة على الكيبورد بدون النظر 208 | صدقني دي حاجات هتضرب مستواك في خمس اضعاف، ممكن تزود معاهم انك تتعلم linux مثلا و تستخدم حاجه زي wsl على ويندوز 209 | 210 | 211 | ### المصادر 212 | - terminal / CLI 213 | 214 | بالعربية: [[Arabic] Learn Command Line](https://www.youtube.com/watch?v=JVs2Ywy7wGQ&list=PLDoPjvoNmBAxzNO8ixW83Sf8FnLy_MkUT) 215 | 216 | بالانجليزية: [Command Line Crash Course](https://www.youtube.com/watch?v=uwAqEzhyjtw) 217 | 218 | - touch typing 219 | 220 | [Typing club](https://www.typingclub.com) 221 | 222 | [Monkey type](https://www.monkeytype.com) 223 | 224 | - Linux (اختياري) 225 | 226 | بالعربية: [Linux in Arabic](https://www.youtube.com/watch?v=zBV5Gl0iihI&list=PLgCu8TiZE3OZcKIqypbqIU9pG4mZjKP5C) 227 | 228 | بالانجليزية: [Linux for Beginners](https://www.youtube.com/watch?v=VbEx7B_PTOE&list=PLIhvC56v63IJIujb5cyE13oLuyORZpdkL) 229 | 230 | 231 | ### أدوات اضافية 232 | 233 | [أداة wsl لاستخدام linux على الويندوز](https://learn.microsoft.com/en-us/windows/wsl/install) 234 | 235 | 236 | ### هتعرف انك خلصت لو 237 | 238 | - عرفت تتنقل في ملفات جهازك باستخدام ال command line 239 | - عرفت تنشيء ملفت و مجلدات من خلال ال command line 240 | - وصلت على الاقل 30 wpm على monkey type 241 | --- 242 | 243 | ## Tailwind 244 | 245 | انت كدا ماشي مستريح جدا و على الطريق السليم و هتدخل على ال react بأريحية 246 | 247 | بأختصار tailwind هي framework لل css بتخليك تعمل style للعناصر بتاعتك باستخدام ال html class names 248 | هتستخدمها كتير جدا في react ان شاء الله و في معظم مشاريعك عموما 249 | 250 | انت هنا ممكن تسالني ليه مش bootstrap مثلا 251 | 252 | انا برشحلك التقنيات الموجوده اكتر في التطبيقات و في الشغل 253 | 254 | لكن انت ممكن تتعلم tailwind + bootstrap + scss مع بعض 255 | 256 | و زود اي تقنيه تانيه انت حاببها، متربطش نفسك بالتقنيات اللي هنا بس 257 | 258 | حاول توسع مهاراتك عادي 259 | 260 | ### المصادر 261 | 262 | بالعربية: [تعلم Tailwind CSS في مقطع واحد](https://www.youtube.com/watch?v=Pk3hhCJG2Dk) 263 | 264 | بالانجليزية: [Learn Tailwind CSS](https://www.youtube.com/watch?v=ft30zcMlFao) 265 | 266 | ### التطبيقات 267 | 268 | [تطبيق باللغه العربية](https://www.youtube.com/watch?v=9Px2cwdQ8PM) 269 | 270 | [تطبيق باللفة الانجليزية](https://www.youtube.com/watch?v=8eQwgc9nc64) 271 | 272 | 273 | ### أدوات اضافية 274 | 275 | [اضافة tailwind ل vscode](https://v1.tailwindcss.com/docs/intellisense) 276 | 277 | 278 | 279 | ### هتعرف انك خلصت لو 280 | 281 | - عرفت ازاي ت extend ملف tailwind.config.js 282 | - عارف ازاي تستخدم tailwind في css باستخدام @apply 283 | --- 284 | 285 | ## React.js 286 | 287 | أشهر javascript framework من هنا هتبدأ تميز الفرونت اند الشاطر من الضعيف 288 | 289 | حاول على قد ما تقدر تكون ملم بمفاهيم ال framework مش بس ال syntax 290 | 291 | يعني ازاي بيشتغل و ايه فايدته، ايه هي ال virtual dom و ليه react بيستخدمها و ليه مش موجوده في frameworks تانيه الخ 292 | 293 | هتقولي ياعم ما اتعلم ال framework و خلاص و اشتغل هقولك انا جي من المستقبل و مريت ب كل ده و بقولك المفيد 294 | 295 | ملحوظه: بفضل جدا انك تشوف الكورس الانجليزي هنا بالذات، مشوفتش زيه في اي مكان حتى الان 296 | 297 | ده اللي انا كنت متعلم منه اول ما نزل و يا سلام لو شوفته على scrimba هتتبسط 298 | 299 | ### المصادر 300 | 301 | بالعربية: [كورس رياكت بالعربي](https://youtube.com/playlist?list=PLpr1Lg_f0v3ojNKR4WzZ_SEXhiKBHDQmB&si=QbVNVkCkD_smEv35) 302 | 303 | بالانجليزية: [Beginner's tutorial for React](https://www.youtube.com/watch?v=bMknfKXIFA8&t=29s) 304 | 305 | ### التطبيقات 306 | 307 | [تطبيق 1](https://www.youtube.com/watch?v=_oO4Qi5aVZs) 308 | 309 | [تطبيق 2](https://www.youtube.com/watch?v=B91wc5dCEBA) 310 | 311 | 312 | ### أدوات اضافية 313 | 314 | [اضافه للمتصفح ل react](https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?pli=1) 315 | 316 | 317 | ### هتعرف انك خلصت لو 318 | 319 | - عارف ايه هي ال virtual dom و ايه فايدتها 320 | - فهمت مفهوم ال components و ال props 321 | - فهمت ازاي تتعامل مع ال state 322 | - عرفت ازاي تستخدم react router للتنقل بين الصفحات 323 | - فهمت الhooks المختلفه زي useState, useEffect, useCallback 324 | - فهمت ال context و ازاي تستخدمه 325 | - عرفت ازاي تعمل reusable component بطريقه سليمه و ايه هي ال rest props 326 | - فهمت فكرة ال children 327 | - عرفت تعمل custom hook و امتى تعمل واحد 328 | - اختياري: عندك خلفيه عن ال compound components 329 | --- 330 | 331 | ## Redux / Recoil / Zustand / Jotai 332 | 333 | ايوه زي ما خدت بالك كدا مش حاجه واحده بس حاول متتعاملش مع redux انها مكتبة ال state management الوحيدة في العالم 334 | 335 | لكنها يمكن تكون اكتر واحده تعتمد عليها في المشاريع الكبيره و لكن خد عن الباقيين خلفيه برضه كل واحده فيهم ليهم مشروع مناسب تستخدمها فيه 336 | اتعلم redux و ركز فيها 337 | 338 | لكن خلي معاك اختيار كمان من التانيين لمشاريعك الشخصيه او الصغيره بحيث تقدر تستخدمها بسرعه 339 | 340 | ### المصادر 341 | 342 | بالعربية: [شرح ريدكس بالعربي](https://www.youtube.com/watch?v=Qsog_cjp7ug&list=PLejc1JbD4ZFREfrBoSl8tjAPZOY6HNqZv) 343 | 344 | بالانجليزية: [Learn modern redux](https://www.youtube.com/watch?v=u3KlatzB7GM&list=PL0Zuz27SZ-6M1J5I1w2-uZx36Qp6qhjKo) 345 | 346 | ### التطبيقات 347 | 348 | ممكن تعمل موقع كمان باستخدام redux عادي كدا كدا انت في الغالب هتستخدم state management في كل مشاريعك الجايه ان شاء الله 349 | 350 | 351 | ### هتعرف انك خلصت لو 352 | 353 | - فهمت مفهوم Store, Actions, Reducers 354 | - عرفت ازاي تبني تطبيق شغال ب Redux أو Recoil من البداية للنهاية 355 | - فهمت مفهوم الـ Middlewares زي Redux Thunk 356 | --- 357 | 358 | خد بريك شويه هنا، عاش يا بطل انك كملت كل ده 359 | 360 | انت كدا . 361 | frontend developer 362 | بس تقليدي! 363 | 364 | شوية الخطوات الجايه هي اللي هتميزك عن غيرك و تخليك فعلا ديناصور زي ما بقول 365 | 366 | فيهم كام نقطه اختياريه هقولك عليهم، لكن لو اتعلمتهم صدقني هتبقا شخص تاني ان شاء الله 367 | 368 | المصادر في الحاجات اللي جايه ممكن تكون انجليزي بس علشان مفيش ناس كتير بتقدم محتوى في الحاجات دي بالعربي 369 | 370 | ## framer motion & gsap 371 | 372 | دي مكتبات animations هتغير شكل المواقع بتاعتك تماما 373 | 374 | فيه منها كتير طبعا و فيه مكتبات بتقدملك حاجات جاهزه، و لكن دول الاكثر انتشارا و ال community بتاعهم كبير 375 | 376 | و بصراحه كدا، مفيش اجمد من الاتنين دول 377 | 378 | 379 | ### المصادر 380 | 381 | [Framer motion](https://www.youtube.com/watch?v=2V1WK-3HQNk&list=PL4cUxeGkcC9iHDnQfTHEVVceOEBsOf07i) 382 | 383 | [Gsap](https://www.youtube.com/watch?v=wo6KNvBlA6k&list=PLSkIx8U0TMvgH2PEokYLIxofdb1L9cJjz) 384 | 385 | [Gsap scroll trigger](https://www.youtube.com/watch?v=WEky7V490Rs&list=PLMPgoZdlPumexxtvuPUB3TY7LExI1N_Xp) 386 | 387 | 388 | ### أدوات اضافية 389 | 390 | لازم تتابع الناس دي و تخلي دي الفيديوهات اللي في ال feed بتاعك، طريقة تفكيرك في الفرونت اند هتتغير 391 | 392 | [Oliver larose](https://www.youtube.com/@olivierlarose1) 393 | 394 | [Tom is loading](https://www.youtube.com/@tomisloading) 395 | 396 | [Frontend tribe](https://www.youtube.com/@frontend-tribe) 397 | 398 | --- 399 | 400 | ## Typescript 401 | 402 | اتبسطت في ال 403 | animations 404 | من هنا و رايح التقنيات هيكون كل هدفها الاحترافيه في الشغل 405 | 406 | لازم متشتغلش غير ب 407 | typescript 408 | و بعد ما تتعود عليها، صدقني مش هتعرف تسيبها 409 | 410 | ### المصادر 411 | 412 | بالعربية: [Learn Typescript In Arabic 2022](https://www.youtube.com/watch?v=yUndnE-2osg&list=PLDoPjvoNmBAy532K9M_fjiAmrJ0gkCyLJ) 413 | 414 | بالانجليزية: [Typescript Course](https://www.youtube.com/watch?v=VGu1vDAWNTg&list=PL4cUxeGkcC9gNhFQgS4edYLqP7LkZcFMN) 415 | 416 | ### التطبيقات 417 | 418 | حاول تبني اي موقع بسيط باستخدام react + typescript 419 | 420 | 421 | ### هتعرف انك خلصت لو 422 | 423 | - عرفت ال generic props في react باستخدام typescript 424 | - عرفت الفرق بين ال types و ال interfaces 425 | - عرفت ايه هي ال defenition files 426 | - عرفت ازاي تستخدم typescript في react و ايه ال best practices 427 | 428 | --- 429 | 430 | بص بقا 431 | 432 | انت عندك طريقين دلوقتي 433 | 434 | - اول طريق انك تتعلم nodejs + express و بعدين تدخل على next.js 435 | - تاني طريق انك تدخل على next.js على طول 436 | 437 | 438 | عايز نصيحتي؟ انا مفهمتش next.js الا لما اتعلمت nodejs 439 | 440 | هتخليك شخص تاني، تقريبا انا الوحيد في مصر اللي بقول للناس اتعلم nodejs من ضمن التراك بس صدقني فرقت معايا و مع اي حد جرب جدا 441 | 442 | و nodejs سهله مش هتاخد معاك اسبوعين ك basics 443 | 444 | هتبقا شايف الباك اند بيفكر ازاي و ازاي تتعامل معاه بطريقه عمرك ما تخيلتها، و ممكن كمان تعمل انت مشروع full stack و تكمل و تبقا mern stack مين عارف 445 | 446 | 447 | ## nodejs + express 448 | 449 | وصف 450 | 451 | ### المصادر 452 | 453 | بالعربية: [Nodejs + Express](https://www.youtube.com/watch?v=Bzzp0q0T5oM&list=PLQtNtS-WfRa8OF9juY3k6WUWayMfDKHK2) 454 | 455 | ده الكورس الوحيد المناسب و اللي وقته مناسب للي احنا عايزينه ك اساسيات 456 | 457 | الكورسات التانيه طويله جدا و تفصيليه، شوف اللي انت حابب تتفرج عليه عادي براحتك 458 | 459 | ### التطبيقات 460 | 461 | simple todo api with authentication 462 | 463 | 464 | 465 | ### هتعرف انك خلصت لو 466 | 467 | - عرفت تتعامل مع postman و ايه هو و ايه البرامج اللي زيه 468 | - عرفت ايه هو ال middleware و ركز اوي في ال middleware 469 | --- 470 | 471 | ## Next.js 472 | 473 | بأختصار Next.js هي framework كامل ل React فيه مزايا كتير جدا 474 | 475 | في الغالب اغلب شكلك بعد ما تتعلمه هيكون بيه و اتمنى تفهمه بسهوله بالذات من ناحية الباك اند بعد ما اتعلمت 476 | 477 | ملاحظه: ارشحلك الكورس الانجليزي بتاع dave grey 478 | 479 | ### المصادر 480 | 481 | بالعربية: [Nextjs crash course بالعربي](https://www.youtube.com/watch?v=_t4c-vxalp4) 482 | 483 | بالانجليزية: [Nextjs full course for beginners](https://www.youtube.com/watch?v=843nec-IvW0&t=14929s) 484 | 485 | ### التطبيقات 486 | 487 | full stack notes application with next.js + tailwind + state management + typescript 488 | بحيث تطبق على اللي فات كله 489 | 490 | 491 | ### هتعرف انك خلصت لو 492 | 493 | - عرفت تستخدم ال middleware في next.js 494 | - فهمت ال routing و اسماء الملفات المميزة 495 | - عرفت ازاي تعمل api route و page route 496 | - عرفت ال server actions و ازاي تتعامل معاها 497 | --- 498 | 499 | ## Unit testing 500 | 501 | مبروك يا صديقي انت الان يطلق عليك لقب ديناصور 502 | 503 | و واثق انك هتقدر تشتغل في وظيفه احلامك 504 | 505 | وظيفة احلامك اكيد في شركه كبيره، و الشركات الكبيره كلها بتشتغل ب unit testing عشان تقدر دايما تضمن ان بعد اي تعديل كل حاجه تمشي كما هو متوقع 506 | 507 | دي مهاره مهمه جدا و يمكن اكتر واحده ممكن تميزك عن غيرك انك تكون عارف تشتغل ب unit testing 508 | 509 | ممكن تبص على unit testing في react او في javascript العاديه 510 | 511 | و لكن انا هحطلك مصادر react عشان ده اللي احنا عايزينه 512 | 513 | فيه مكتبات كتير لكن يفضل تستخدم Jest او Vitest 514 | 515 | ### المصادر 516 | 517 | [Unit testing with Vitest](https://www.youtube.com/watch?v=8Xwq35cPwYg) 518 | 519 | 520 | --- 521 | 522 | من هنا انا واثق انك تقدر تعتمد على نفسك في اللي جاي كله، عندك تقنيات كتيير جدا الويب مجال بيتوسع بسرعه جدا 523 | 524 | و برا الويب كمان ممكن تزود مهاراتك في حاجات تانيه، ممكن تتعلم docker, graphql الخ 525 | 526 | توكل على الله و انطلق في الطريق المناسب لشغلك، و لكن ده كان الاساس او الخريطه اللي ممكن توصلك لبر الامان 527 | 528 | اتمنى تكون استفدت و لو بحاجه بسيطه او على الاقل يبقا الطريق واضح قدامك، متنساش تقولي لو فيه حاجه ممكن اضيفها او تتعدل 529 | --------------------------------------------------------------------------------