GAD Code 💻✨
حد مهتم اعمل رود ماب لل Frontend ؟
متخيلتش ان الاغلبية ممكن تكون مهتمه 😂
عمتاَ كويس
عمتاَ كويس
انهادة هقولك ازاي تبدأ في تراك الفرونت اند وكل الي هتحتاج تذاكرة لحد ما تبقي جاهز للشغل
مبداياً هفترض انك خلصت الاساسيات وخلاص قررت تختار انك تبقي FrontEnd developer
ف انا عايزك تمشي علي الخطوات الي هقولك عليها بالترتيب
0️⃣ Basic Understanding of the Web:
- How the web works (client-server model)
- Understanding URLs, HTTP, and HTTPS
- Basic knowledge of web browsers and how they render pages
- Difference Between Front-End and Back-End
ف الجزء ده هحتاج منك تقرأ عن المواضيع دي كويس قبل ما تبدأ علشان يبقي عندك فهم اوسع انت داخل علي ايه ووظيفتك ايه واهم المفاهيم الي هتسمعها كتير في المجال وهاكذا
الجزء مش هيطول هو كام فيديو علي كام مقاله وخلاص كفاية لدلوقت
___________________________________________________________
تمام لحد هنا كان ده قبل حاجات يفضل تعرفها قبل ما تبدأ
الخطوة الجاية هي انك هتذاكر المواضيع الجاية دي كويس وفي وهقولك امتي تعمل مشاريع
1️⃣ HTML
- HTML structure and syntax
- Common HTML tags and attributes
- Semantic HTML
🔹هتعمل بعدها مشروع صغير تحط فيه كل الي اتعلمته
2️⃣ CSS
- CSS syntax and selectors
- Flexbox
- Grid
- How to make Responsive design
- CSS Animations
🔹هنا انت هتطبق كتير جدا علشان تبقي متمكن من الي اتعلتمه
معل كل مفهوم هتتعلمه هتحتاج تعمل تاسك صغيره فيها تطبيق علي الحاجة الجديدة الي اتعلمتها
وبعد ما تخلص css هتعفضل تعمل مشاريع بأفكار مختلفة ب HTML و CSS بس لحد ما تبقي متمكن منهم
ومتكسلش الجزء ده ضروري
3️⃣ JavaScript
Basic syntax
DOM
BOM
AJAX and Fetch API
◽️ممكن تأخر دول شوية لانهم مواضيع متقدمة
ES6+ features
Asynchronous JavaScript (Promises, async/await)
🔷 طبعاَ مش هوصيك علي المشاريع, كتر اوي اوي في الجزء ده وكل مرة فكرة مختلفه عن الي قبلها
ولو حاسس بصعوبة في تطبيق الافكار شوف الويبسايت الجميل ده
https://javascript30.com/
واعمل المشاريع الي فيه كلها هتبقي متمكن من ال JS
مبداياً هفترض انك خلصت الاساسيات وخلاص قررت تختار انك تبقي FrontEnd developer
ف انا عايزك تمشي علي الخطوات الي هقولك عليها بالترتيب
0️⃣ Basic Understanding of the Web:
- How the web works (client-server model)
- Understanding URLs, HTTP, and HTTPS
- Basic knowledge of web browsers and how they render pages
- Difference Between Front-End and Back-End
ف الجزء ده هحتاج منك تقرأ عن المواضيع دي كويس قبل ما تبدأ علشان يبقي عندك فهم اوسع انت داخل علي ايه ووظيفتك ايه واهم المفاهيم الي هتسمعها كتير في المجال وهاكذا
الجزء مش هيطول هو كام فيديو علي كام مقاله وخلاص كفاية لدلوقت
___________________________________________________________
تمام لحد هنا كان ده قبل حاجات يفضل تعرفها قبل ما تبدأ
الخطوة الجاية هي انك هتذاكر المواضيع الجاية دي كويس وفي وهقولك امتي تعمل مشاريع
1️⃣ HTML
- HTML structure and syntax
- Common HTML tags and attributes
- Semantic HTML
🔹هتعمل بعدها مشروع صغير تحط فيه كل الي اتعلمته
2️⃣ CSS
- CSS syntax and selectors
- Flexbox
- Grid
- How to make Responsive design
- CSS Animations
🔹هنا انت هتطبق كتير جدا علشان تبقي متمكن من الي اتعلتمه
معل كل مفهوم هتتعلمه هتحتاج تعمل تاسك صغيره فيها تطبيق علي الحاجة الجديدة الي اتعلمتها
وبعد ما تخلص css هتعفضل تعمل مشاريع بأفكار مختلفة ب HTML و CSS بس لحد ما تبقي متمكن منهم
ومتكسلش الجزء ده ضروري
3️⃣ JavaScript
Basic syntax
DOM
BOM
AJAX and Fetch API
◽️ممكن تأخر دول شوية لانهم مواضيع متقدمة
ES6+ features
Asynchronous JavaScript (Promises, async/await)
🔷 طبعاَ مش هوصيك علي المشاريع, كتر اوي اوي في الجزء ده وكل مرة فكرة مختلفه عن الي قبلها
ولو حاسس بصعوبة في تطبيق الافكار شوف الويبسايت الجميل ده
https://javascript30.com/
واعمل المشاريع الي فيه كلها هتبقي متمكن من ال JS
JavaScript 30
Build 30 things with vanilla JS in 30 days with 30 tutorials
👍1
لحد هنا كانت الاساسيات والي كل الناس هتقولهولك
المشكله مش في الاجزاء الي فاتت دي
المشكلة ان اغلب الناس بيعطل وبيتوه بعد الجزء الي فات ده ومفيش حد بيتكلم هتعمل ايه في الفتره دي
فعايزك تركز معايا في كل الي جاي
معظم الي هقوله من دلوقت مش هيفرق فيه الترتيب بشكل كبير بس يفضل وفي اجزاء كتير تفضيل شخصي
المشكله مش في الاجزاء الي فاتت دي
المشكلة ان اغلب الناس بيعطل وبيتوه بعد الجزء الي فات ده ومفيش حد بيتكلم هتعمل ايه في الفتره دي
فعايزك تركز معايا في كل الي جاي
معظم الي هقوله من دلوقت مش هيفرق فيه الترتيب بشكل كبير بس يفضل وفي اجزاء كتير تفضيل شخصي
4️⃣ Git & GitHub
علشان ترفع نسخ من الكود وتتبع التغييرات وتشتغل ولو في مشكلة ترجع لأخر نسخة
وكمان علشان تشتغل مع تيم علي نفس البروجيكت وحاجات كتير تانية ملهاش اخر
5️⃣ CSS Preprocessors
ده اشبه بلغة برمجة الفكرة انك هتخلي CSS اقوي وتقدر تعمل بيها حاجات كتير جداً عن طريق انها بتضيف logic لل CSS
بمعني انها بتضيف شوية حاجات موجودة في لغات البرمجة فيها زي (variables, nesting, inheritance, mixins, functions, and mathematical operations)
وبرشحلك تتعلم SASS لأنها الاشهر دلوقت
6️⃣ CSS framework
تمام دلوقت انت خلصت الاساسيات وبدأت تعمل مشاريع ومواقع حقيقة وكدا
بس هتلاقي وانت شغال ان في اجزاء كتير بتتكرر بشكل كبير وحاجات كتير بتلاقيها في كل ويب سايت
ف ل توفير الوقت
بتروح تستخدم حاجات جاهزة بتسرع شغلك وموجود فيها الاجزاء دي فتوفر وقت
برشحلك Bootstrap لأنها مشهورة اوي في الشركات العربيه بس مش المستقبل ليها بصراحة وكدا كدا هتعلم غيرها لما تشتغل ب Framework
والاشهر دلوقت حاجات تانية زي Tailwind - MaterialUI وحاجات كتير ملهاش اخر ف انت ابق اقعد جرب كدا الحاجات دي مش بتاخد وقت
⏺ ممكن لو حابب ابق بص ع السريع jQuery
هي معادتش مهمه بس في شركات كتير مصرية لسة بتستخدمها وبالاخص لو البروجيكت قديم
مش لدرجة كورس يعني بس اخطف بصه عليها ع السريع مش هتضيع فرصه علشان نص ساعة
علشان ترفع نسخ من الكود وتتبع التغييرات وتشتغل ولو في مشكلة ترجع لأخر نسخة
وكمان علشان تشتغل مع تيم علي نفس البروجيكت وحاجات كتير تانية ملهاش اخر
5️⃣ CSS Preprocessors
ده اشبه بلغة برمجة الفكرة انك هتخلي CSS اقوي وتقدر تعمل بيها حاجات كتير جداً عن طريق انها بتضيف logic لل CSS
بمعني انها بتضيف شوية حاجات موجودة في لغات البرمجة فيها زي (variables, nesting, inheritance, mixins, functions, and mathematical operations)
وبرشحلك تتعلم SASS لأنها الاشهر دلوقت
6️⃣ CSS framework
تمام دلوقت انت خلصت الاساسيات وبدأت تعمل مشاريع ومواقع حقيقة وكدا
بس هتلاقي وانت شغال ان في اجزاء كتير بتتكرر بشكل كبير وحاجات كتير بتلاقيها في كل ويب سايت
ف ل توفير الوقت
بتروح تستخدم حاجات جاهزة بتسرع شغلك وموجود فيها الاجزاء دي فتوفر وقت
برشحلك Bootstrap لأنها مشهورة اوي في الشركات العربيه بس مش المستقبل ليها بصراحة وكدا كدا هتعلم غيرها لما تشتغل ب Framework
والاشهر دلوقت حاجات تانية زي Tailwind - MaterialUI وحاجات كتير ملهاش اخر ف انت ابق اقعد جرب كدا الحاجات دي مش بتاخد وقت
⏺ ممكن لو حابب ابق بص ع السريع jQuery
هي معادتش مهمه بس في شركات كتير مصرية لسة بتستخدمها وبالاخص لو البروجيكت قديم
مش لدرجة كورس يعني بس اخطف بصه عليها ع السريع مش هتضيع فرصه علشان نص ساعة
لحد هنا انت ممكن تلاقي شغل عادي
انا نفسي اول شغل ليا كان بعد ال فات ده بس
بس متضيعش وقت كتير هنا لان متطلبات السوق اتغيرت وبقت المنافسة شديدة فركز علي انك تتعلم
ومتعملش غلطتي وتفضل تضيع وقت في التقديم وخلاص
انا نفسي اول شغل ليا كان بعد ال فات ده بس
بس متضيعش وقت كتير هنا لان متطلبات السوق اتغيرت وبقت المنافسة شديدة فركز علي انك تتعلم
ومتعملش غلطتي وتفضل تضيع وقت في التقديم وخلاص
7️⃣TypeScript
وممكن تأخرها علي حسب هتختار ايه في الخطوة الجاية غير كدا مش هتفرق
————————————————-
نيجي بقي للجزء ال الكل بيستعجل عليه وهو ال Framework
8️⃣Pick a Framework
React - Angular - Vue
دول اشهر 3 في السوق اختار واحدة فيهم وهتكمل علي اساسها
في تفاصيل كتير في الجزء ده ف هبقي اعمل رود ماب ليها لواحدها
وممكن تأخرها علي حسب هتختار ايه في الخطوة الجاية غير كدا مش هتفرق
————————————————-
نيجي بقي للجزء ال الكل بيستعجل عليه وهو ال Framework
8️⃣Pick a Framework
React - Angular - Vue
دول اشهر 3 في السوق اختار واحدة فيهم وهتكمل علي اساسها
في تفاصيل كتير في الجزء ده ف هبقي اعمل رود ماب ليها لواحدها
لحد هنا انت بقلب جامد تقول علي نفسك FrontEnd Developer وتحضر ال CV المتين بتاعك بال بالمشاريع الي عملتها
وتقدم علي شغل ك Junior FrontEnd Develpoer
وتقدم علي شغل ك Junior FrontEnd Develpoer
في شوية حاجات بس هتحتاج تذاكرهم في الطريق او تقرأ عنهم وهتديك افضليه
زي انك تعرف ازاي تستخدم Figma
وتقرأ من فترة للتانية عن ال UX UI كنوع من التثقيف مش اكتر
ونفس الكلام مع الباك اند
ابقي خد كراش كورس node.js تفهم الدنيا ماشية ازاي وازاي ال Api بيتعمل والحاجات دي
طبعاً كل ده مش في الرودماب
بس لما يبقي عندك وقت ابقي اعمل كدا الحاجات دي هي الي هتخليك تبقي سينيور مش عدد السنين
زي انك تعرف ازاي تستخدم Figma
وتقرأ من فترة للتانية عن ال UX UI كنوع من التثقيف مش اكتر
ونفس الكلام مع الباك اند
ابقي خد كراش كورس node.js تفهم الدنيا ماشية ازاي وازاي ال Api بيتعمل والحاجات دي
طبعاً كل ده مش في الرودماب
بس لما يبقي عندك وقت ابقي اعمل كدا الحاجات دي هي الي هتخليك تبقي سينيور مش عدد السنين
طبعاَ الرود ماب فيها نواقص
النواقص دي هتعرفها بنفسك لما تدخل السوق وتعرف انت ناقصك ايه والسوق محتاج ايه
وكل شركة ليها احتياج مختلفه عن التانية
وعلي حسب انت ناوي تروح فين
النواقص دي هتعرفها بنفسك لما تدخل السوق وتعرف انت ناقصك ايه والسوق محتاج ايه
وكل شركة ليها احتياج مختلفه عن التانية
وعلي حسب انت ناوي تروح فين
🔹ومش هوصيك تاني بالمشاريع
المشاريع هي الي هتجيبلك شغل مش كتر الكورسات ف اهتم بالجزء ده الله يخليك
وحاول لما تبقي في الفتره الي بتجهز فيها مشاريع علشان تحطهم في ال CV تختار مشاريع بتحل مشكلة بجد او مش متكررة من الكورسات علشان الحركة دي بتخليك متتقبلش
المشاريع دي هتجيبها منين
احسن حاجة في البداية هي انك تقلد مواقع موجودة فعلاَ وتجرب تقلدها
وانت بتذاكر لسة وعايز تعمل افكار كويسة ممكن تقلب في codepen في افكار كتير وحاول تقلدها
و عندك تكليفات الزيرو في البداية هتكون حلوة
وعندك الموقع الجميل ده بيديك التصميم بالملفات وانت تعمله كتدريب
https://www.frontendmentor.io/
واخر حاجة هي figma community وده تصاميم مصممين UX UI عاملينها وناشرينها فتقدر تنفزها حتي علشان تدرب علي استخدام فيجما
بس كدا اختار انسب حل يناسب مستواك واشتغل بيه
المشاريع هي الي هتجيبلك شغل مش كتر الكورسات ف اهتم بالجزء ده الله يخليك
وحاول لما تبقي في الفتره الي بتجهز فيها مشاريع علشان تحطهم في ال CV تختار مشاريع بتحل مشكلة بجد او مش متكررة من الكورسات علشان الحركة دي بتخليك متتقبلش
المشاريع دي هتجيبها منين
احسن حاجة في البداية هي انك تقلد مواقع موجودة فعلاَ وتجرب تقلدها
وانت بتذاكر لسة وعايز تعمل افكار كويسة ممكن تقلب في codepen في افكار كتير وحاول تقلدها
و عندك تكليفات الزيرو في البداية هتكون حلوة
وعندك الموقع الجميل ده بيديك التصميم بالملفات وانت تعمله كتدريب
https://www.frontendmentor.io/
واخر حاجة هي figma community وده تصاميم مصممين UX UI عاملينها وناشرينها فتقدر تنفزها حتي علشان تدرب علي استخدام فيجما
بس كدا اختار انسب حل يناسب مستواك واشتغل بيه
Front-end coding challenges using a real-life workflow | Frontend Mentor
Improve your front-end skills by building real projects. Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs.
تمام لحد هنا اكون الحمد لله خلصت
في ناس كتير طلبت الرودماب دي مني وكان غصب عني مكنش في وقت اجهزها
ف انشاء الله يعني تكون مفيدة لحد ❤️
واقدر اقولك بثقة انك مش هتحتاج تدور علي رود ماب تانيه ان شاء الله
والجروب مفتوح للأسئلة والي عندة اي اي اسئلة يتفضل
سبحانك اللهم وبحمدك، أشهد أن لا إله إلا أنت، أستغفرك وأتوب إليك
في ناس كتير طلبت الرودماب دي مني وكان غصب عني مكنش في وقت اجهزها
ف انشاء الله يعني تكون مفيدة لحد ❤️
واقدر اقولك بثقة انك مش هتحتاج تدور علي رود ماب تانيه ان شاء الله
والجروب مفتوح للأسئلة والي عندة اي اي اسئلة يتفضل
سبحانك اللهم وبحمدك، أشهد أن لا إله إلا أنت، أستغفرك وأتوب إليك
❤6
شباب انا ملاحظ البوستات بدأ تطول اوي وبعت بتاخد وقت كبير في الكتابة
وفي حاجات بقي عايز اتكلم عنها بالتفصيل اكتر وبختصر علشان البوستات متطولش اكتر من كدا
ف ايه رأيكم المواضيع الطويلة والمهمة نعمل فيها فيديو او space علي تويتر علشان لو حد عندة اسئلة؟
وفي حاجات بقي عايز اتكلم عنها بالتفصيل اكتر وبختصر علشان البوستات متطولش اكتر من كدا
ف ايه رأيكم المواضيع الطويلة والمهمة نعمل فيها فيديو او space علي تويتر علشان لو حد عندة اسئلة؟
شوفوا يا شباب الثريد ده جميل جداً
مجمع فيه اهم الثريدز المشهوره الي تخص البرمجة علي توتير
وموجود فيه roadmaps ناس ثقه الي عاملينها
وspaces مسجلة وحاجات كتير مفيدة
مجمع فيه اهم الثريدز المشهوره الي تخص البرمجة علي توتير
وموجود فيه roadmaps ناس ثقه الي عاملينها
وspaces مسجلة وحاجات كتير مفيدة
في حاجة صغيرة حابب افكركم بيها يا شباب
وهي ال fast typing
ضروري جداً تتعلم الكتابه بسرعه علي الكيبورد وب صوابعك ال ١٠
متعرفش الموضوع هيوفر عليك وقت قد ايه في كتابة الكود
والموضوع مش هياخد منك كتير يعني كل يوم ١٠ دقايق تدريب علي الكتابة بالشكل ده
ومع الوقت بيبقي عادي
هو انا كنت مفكر الموضوع من البديهيات
وان اي حد بيستخدم الكمبيوتر بيعرفها
بس الموضوع مطلعش كدا واكتشفت ان ناس كتير قاطعين شوط كويس ولسة بيكتبوا حرف حرف
ف مينفعش يعني تكون مبرمج او علي الاقل CS student ومبتعرفش تكتب علي الكيبورد
دا حتي عيب في حقك 😄
وهي ال fast typing
ضروري جداً تتعلم الكتابه بسرعه علي الكيبورد وب صوابعك ال ١٠
متعرفش الموضوع هيوفر عليك وقت قد ايه في كتابة الكود
والموضوع مش هياخد منك كتير يعني كل يوم ١٠ دقايق تدريب علي الكتابة بالشكل ده
ومع الوقت بيبقي عادي
هو انا كنت مفكر الموضوع من البديهيات
وان اي حد بيستخدم الكمبيوتر بيعرفها
بس الموضوع مطلعش كدا واكتشفت ان ناس كتير قاطعين شوط كويس ولسة بيكتبوا حرف حرف
ف مينفعش يعني تكون مبرمج او علي الاقل CS student ومبتعرفش تكتب علي الكيبورد
دا حتي عيب في حقك 😄
👏3
فهم الداتا ستركتشرز والالجوريزم حاجة مهمة واساسية لاي ديفيلوبر
دي مجموعه من المصادر اللي هتساعدك تفهم الداتا ستركتشرز والالجوريزم بطريقة كويسه
١. موقع https://visualgo.net/en
مجموعه من الدكاتره عاملين الموقع ده للطلبه
٢. موقع https://lnkd.in/eQpdyJgV
طبعا غني عن التعريف
٣. قناة https://lnkd.in/ekxknfiy
٤. قناة https://lnkd.in/etRh7CuB
٥. موقع https://lnkd.in/eZXbefQ4
٦. الكتاب الشهير https://amzn.eu/d/fvs5ljA
جرب تذاكر بالطريقه دي
١. ارسم الداتا ستركتشرز واكتب الخطوات بتاع الالجوريزم علي الورق
٢.جرب الكود بنفسك
٣. حل مسائل كتير علي leetcode
وابدأ بالسهل
دي مجموعه من المصادر اللي هتساعدك تفهم الداتا ستركتشرز والالجوريزم بطريقة كويسه
١. موقع https://visualgo.net/en
مجموعه من الدكاتره عاملين الموقع ده للطلبه
٢. موقع https://lnkd.in/eQpdyJgV
طبعا غني عن التعريف
٣. قناة https://lnkd.in/ekxknfiy
٤. قناة https://lnkd.in/etRh7CuB
٥. موقع https://lnkd.in/eZXbefQ4
٦. الكتاب الشهير https://amzn.eu/d/fvs5ljA
جرب تذاكر بالطريقه دي
١. ارسم الداتا ستركتشرز واكتب الخطوات بتاع الالجوريزم علي الورق
٢.جرب الكود بنفسك
٣. حل مسائل كتير علي leetcode
وابدأ بالسهل
visualgo.net
visualising data structures and algorithms through animation - VisuAlgo
VisuAlgo was conceptualised in 2011 by Associate Professor Steven Halim (NUS School of Computing) as a tool to help his students better understand data structures and algorithms, by allowing them to learn the basics on their own and at their own pace. Together…
👍3
اهلا يا شباب ايه الاخبار ، هشارك معاكم حاجة كويسه يمكن تفيدكم. المعهد القومي للاتصالات NTI فتح تراكات جديدة باسم "I-Lance"، والتراكات دي بتشمل مجالات كتير زي تطوير الويب، تحليل البيانات، الجرافيك، وحاجات تانية حلوة.
بالنسبة للناس اللي مهتمة بالجرافيك ديزاين، زمان كان فيه تراك واحد بيشمل كل حاجة، بس دلوقتي النظام اتغير تماماً. بقى فيه تراك منفصل للجرافيك، وتراك تاني مخصوص للفيديو إيديتينج و ال 2d Motion. كل تراك بيكون فيه 90 ساعة مادة علمية، وكمان 30 ساعة تدريب على الفريلانس على مدار شهرين.
يعني إيه الكلام ده؟ يعني هيكون معاكTechnical mentorو career coach في المجال هيساعدوك تاخد أول فرصة ليك في الفريلانس، و إزاي تشتغل وتجيب شغل بنفسك. هيرد كمان على كل اسئلتك بعد ما يجي لك شغل، ويعلمك إزاي تسعر شغلك وتتعامل مع العملاء بشكل كويس.
النظام الحالي معمول علشان يحاكي الواقع، ومعظم التدريبات عملية والمناهج متحدثه والهدف من المبادره انك تتعلم وتتحط ف شغل حقيقى وقتها التدريب هيكون انتهى ،هبعتلكم صورة من التراكات اللي موجودة حالياً.
لو حد منكم مهتم يقدم أو قدم بالفعل وعايز عملية القبول تكون أسلس ، أنا موجودة أساعدكم أن شاء الله.
بالنسبة للناس اللي مهتمة بالجرافيك ديزاين، زمان كان فيه تراك واحد بيشمل كل حاجة، بس دلوقتي النظام اتغير تماماً. بقى فيه تراك منفصل للجرافيك، وتراك تاني مخصوص للفيديو إيديتينج و ال 2d Motion. كل تراك بيكون فيه 90 ساعة مادة علمية، وكمان 30 ساعة تدريب على الفريلانس على مدار شهرين.
يعني إيه الكلام ده؟ يعني هيكون معاكTechnical mentorو career coach في المجال هيساعدوك تاخد أول فرصة ليك في الفريلانس، و إزاي تشتغل وتجيب شغل بنفسك. هيرد كمان على كل اسئلتك بعد ما يجي لك شغل، ويعلمك إزاي تسعر شغلك وتتعامل مع العملاء بشكل كويس.
النظام الحالي معمول علشان يحاكي الواقع، ومعظم التدريبات عملية والمناهج متحدثه والهدف من المبادره انك تتعلم وتتحط ف شغل حقيقى وقتها التدريب هيكون انتهى ،هبعتلكم صورة من التراكات اللي موجودة حالياً.
لو حد منكم مهتم يقدم أو قدم بالفعل وعايز عملية القبول تكون أسلس ، أنا موجودة أساعدكم أن شاء الله.