كيف تتعلم الويب وتجد عمل في 90 يوم
هذا الدليل هو خطة مفصلة خطوة بخطوة للبدأ في تعلم تطوير الويب Web development و ايجاد عمل حقيقي كمطور خلال 3 اشهر.
# الخريطة
- الخريطة
- حاسب نفسك
- الخطوة 1: افعل هذه الامور بشكل مستمر
- الخطوة 2: تعلم اساسيات الاساسيات
- الخطوة 3: انشئ صفحات بينما تتعلم CSS
- الخطوة 4: اختصر مشوار ال CSS
- الخطوة 5: Javascript
- الخطوة 6: اختصر مشوار الجافاسكربت
- Step 7: Database
- الخطوة 8: ابني مشروع واحد كبير فقط
- الخطوة 9: ابني موقعك الشخصي وضع فيه ال CV
- الخطوة 10: ابحث عن وظائف ال entry level
- تهانيي 🔥🎉🥳
# حاسب نفسك
شارك تقدمك مع اصدقائك ومع العالم في فيس بوك وتويتر او من خلال مدونتك باستخدام هاشتاق #90الايامChallange
حاسب نفسك واجبرها على العمل والدراسة لمدة 12 ساعة يوميا لمدة 90 يوما
# الخطوة 1: افعل هذه الامور بشكل مستمر
اذا كنت جاد في مسعاك في التعلم ابدأ بفعل هذه الامور التي قد تكون ليس لها علاقة بالويب ولكنها فعالة جدا:
- 🛌 نام على الاقل 7 ساعات في اليوم, استيقظ مبكرا في حدود الساعة 6 صباحا كل يوم.
- 🥤 اشرب الكثير من الماء, مخك يسبح حرفيا في الماء وهو يحتاج ال الماء ليعمل بشكل فعال.
- 🍎 ابتعد عن الحلوى وخذ السكريات من مصادر طبيعية مثل الفواكه.
- 🤸♂️ اعمل بعض التمارين الخفيفة لتحريك الدورة الدموية في الصباح.
- 🔥 اهم شيء هوا العمل على الاقل 12 ساعة في اليوم لمدة 90 يوم, يمكنك اخذ يوم الجمعة اجازة ان اردت.
# الخطوة 2: تعلم اساسيات الاساسيات
قبل التعمق في HTML/CSS/JS يجب ان تعرف اساسيات الويب اولا:
# الايام 1 - 2: اساسية الويب
نصيحة: لا تشاهد الفديوهات الطويلة 45 دقيقة يكفيك فيديو قصير او قراءة مدونة عن الموضوع لانها كلها مبادئ عامة.
- 🌐 ماهو الويب.
- 🖱️ What is a HTTP request.
- ✅ What is HTTP methods and headers.
- ✅ كيف يعمل المتصفح.
- 🧱 ماهو ال HTML وكيف يعمل.
# الايام 3 - 5: اساسيات ال HTML
- 🧱 تعلم اساسيات ال HTML بالاضافة الى (ما الفرق بين ال id و class)
- 🧱 Why some HTML elements doesn't have closing tag.
- 🌳 Basics of HTML DOM tree. (مهم جدا!)
# تطبيق على ما تعلمته
🏗️ ابني صفحة HTML بسيطة جدا واستخدم فيها كل ما تعلمته.
# الايام 6 - 10: اساسيات CSS
- ✅ Learn VS Code basics. كورس بسيط سوف يفي بالغرض
- ✅ Learn about Chrome dev-tools.
- 🎨 What is CSS.
- 🎨 CSS basics.
- 🎨 What is CSS media query.
- 🎨 CSS selectors.
- 🎨 CSS basic best practices.
# الخطوة 3: انشئ صفحات بينما تتعلم CSS
# الايام 11 - 12: Flexbox
- 📶 تعلم Flexbox من كورس wesbos's https://flexbox.io او اي كورس مجاني على يوتيوب.
# طبق على Flexbox
🏗️ انشئ صفحة جوجل الرئيسية وصفحة نتائج البحث باستخدام css flexbox.
# الايام 13 - 14: صمم اول صفحة لك
# كمل تطبيق على الذي تعلمته من اليوم السابق
🏗️ اعد بناء وتصميم هذه الصفحات في الاسفل او اي صفحتين من اختيارك:
باستخدام CSS's flexbox و html فقط, يمكنك تجنب الاجزاء التفاعلية او المعقدة جدا ركز على ان تبني الصفحة بدقة على قدر المستطاع.
# الايام 15 - 16: CSS Grid
- 🎨 What is CSS grid.
- 🎨 Difference between grid and flexbox.
- 🎨 CSS grid basics.
🏗️ ابني الصفحة ادناه باستخدام ال css grid و flexbox:
# الخطوة 4: اختصر مشوار ال CSS
# اليوم 17: تعلم اطار عمل CSS
- 🎨 What is a CSS framework.
- 🎨 Why do we need a framework.
- 🎨 What is Tailwind css.
- 🎨 What is uitlity first approach.
- 🎨 Why we design for mobile first then for large screens.
# اليوم 18 - 22: تعلم اساسيات TailwindCSS
- 🎨 Tailwind CSS basics.
- 🎨 Read https://tailwindcss.com (opens new window) docs.
- 🎨 Watch Tailwindcss (opens new window) youtube channel.
🏗️ ابني نفس الصفحتين اللي بنيتهم في الايام الايام 10 - 11. ولكن هذه المرة باستخدام Tailwindcss لا تستخدم CSS صافي.
💥 بعد هذه النقطة سوف تشعر كانك تعبت زهقت ولاتريد ان تكمل ولكن مفتاح النجاح في الاستمرارية
# الخطوة 5: Javascript
# الايام 23-25: قبل ان تتعلم Javascript
- 🔌 What is Javascript.
- 🔌 Why do we need it.
- 🔌 How browsers read and parse javascript.
- 🔌 Where do javascript works and run.
- 🔌 Why there's so many javascript developers.
- 🔌 Why do we need a javascript framework.
- 🔌 What is modals.
# الايام 25 - 35: تعلم اساسيات Javascript
- 🔌 Javascript basics.
- 🔌 Javascript DOM manipulations.
# الايام 26 - 30:طبق ما تعلمته على Javascript
- 🏗️ Build Dropdown menus, modals, tab navigation باستخدام الجافاسكربت.
- 🎨 استخدم Tailwindcss في ال style
# الايام 36 - 41: Advanced Javascript
- 🔌 #javascript Event Listeners.
- 🔌 ES6 features and syntax.
- 🔌 Promises, Async/Await.
- 🔌 "this" scopes.
- 🔌 Import/Export modules.
# الخطوة 6: اختصر مشوار الجافاسكربت
# الايام 42 - 44: تعلم اطار عمل جافاسكربت صغير
- 🔌 What is a javascript framework.
- 🔌 Why do we need a framework.
- 🔌 Introduction to Alpine.js from https://github.com/alpinejs/alpine (opens new window)
🏗️ Build models, menu drop-downs, taps and basic navigation using Alpinejs
# الايام 45 - 50: طبق على ما تعلمته
🏗️ اعد بناء هذه الصفحات الرئيسية من تويتر و سبوتيفاي باستخدام Tailwindcss و Alpinejs
- Twitter (opens new window) الصفحة الرئيسية مع القوائم و الازرار والتفاعليات
- Spotify (opens new window) اعد بناء صفحة المشغل الخاصة بسبوتيفاي
# الايام 51: ماهوا ال Vuejs
- ⚡️ What is vuejs.
- ⚡️ vuejs vs alpinejs.
- ⚡️ Introduction to reactivity.
- ⚡️ vuejs use cases.
- ⚡️ Try some examples from https://vuejs.org (opens new window)
# الايام 52 - 59: Vuejs اساسيات
- ⚡️ Vuejs crash course (basics)
- ⚡️ Vuejs advance course
- ⚡️ Build simple Todo list app
- ⚡️ Build any simple API-based fetch app like wether app
- ⚡️ Style your apps using Tailwindcss
# Step 7: Database
# Day 60: Database مفاهيم
- 🛢️ What is database.
- 🛢️ Why we need database.
- 🛢️ SQL vs NoSQL.
- 🛢️ What is sqlite databases.
- 🔥 What is firebase.
- 🔥 Introduction to Firebase.
# الايام 61-70: طبق على Vuejs و firebase
🔥 ابني Todo app باستخدام vuejs/tailwindcss/firebase.
# الخطوة 8: ابني مشروع واحد كبير فقط
# الايام 70 - 85
هذه الخطوة اساسية للحصول على الوظيفة
- 🏗️ ابني هاذا المشروع (bug tracker app) متتبع الاخطاء مثل Github issues
- 🛢️ Database/Backend using Firebase.
- 🎨 Frontend using vuejs and Tailwindcss.
# الخطوة 9: ابني موقعك الشخصي وضع فيه ال CV
# الايام 85 - 89
- 🏗️ ابني موقعك الشخصي وضع فيه ال CV اجعله بسيط ولكن جميل.
# الخطوة 10: ابحث عن وظائف ال entry level
# اليوم 90: اجعل اخر يوم اهم يوم
في هذا اليوم ابحث عن وظائف على لينكدان او تويتر او اي موقع توظيف, حاول البحث عن وظائف المبتدئين هذه الروابط قد تساعدك:
# تهانيي 🔥🎉🥳
بعد رحلتك العظيمة لمدة 3 اشهر لقد خدشت سطح ال frontend development ولكنك لاتزال قادر على ايجاد وظيفة بكل سهولة.
استخدم المرتب والوقت في اكمال رحلة تعليمك وترقيك للمستوى الاعلى
بالتوفيق