كيف تتعلم الويب وتجد عمل في 90 يوم

هذا الدليل هو خطة مفصلة خطوة بخطوة للبدأ في تعلم تطوير الويب Web development و ايجاد عمل حقيقي كمطور خلال 3 اشهر.

# الخريطة

# حاسب نفسك

شارك تقدمك مع اصدقائك ومع العالم في فيس بوك وتويتر او من خلال مدونتك باستخدام هاشتاق #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: صمم اول صفحة لك

# كمل تطبيق على الذي تعلمته من اليوم السابق

🏗️ اعد بناء وتصميم هذه الصفحات في الاسفل او اي صفحتين من اختيارك:

• wise.com (opens new window)
• AirBnB (opens new window)

باستخدام CSS's flexbox و html فقط, يمكنك تجنب الاجزاء التفاعلية او المعقدة جدا ركز على ان تبني الصفحة بدقة على قدر المستطاع.

# الايام 15 - 16: CSS Grid

• 🎨 What is CSS grid.
• 🎨 Difference between grid and flexbox.
• 🎨 CSS grid basics.

🏗️ ابني الصفحة ادناه باستخدام ال css grid و flexbox:

• https://marvel-grid.webflow.io (opens new window) (مهم)

# الخطوة 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: اجعل اخر يوم اهم يوم

في هذا اليوم ابحث عن وظائف على لينكدان او تويتر او اي موقع توظيف, حاول البحث عن وظائف المبتدئين هذه الروابط قد تساعدك:

• Vuejs Jobs (opens new window)
• Tailwindcss jobs (opens new window)

# تهانيي 🔥🎉🥳

بعد رحلتك العظيمة لمدة 3 اشهر لقد خدشت سطح ال frontend development ولكنك لاتزال قادر على ايجاد وظيفة بكل سهولة.

استخدم المرتب والوقت في اكمال رحلة تعليمك وترقيك للمستوى الاعلى

بالتوفيق