شعار JsCripted
JsCriptedBy Mohamed Wahshey اشترك

كورس مسجّل • بالعربي • متاح على Udemy

كورس أساسيات الويب Front-End Focus

برنامج عملي بيبدأ معاك خطوة بخطوة من أول سطر HTML لحد ما تطبّق بإيدك مشاريع حقيقية.

سواء بتبدأ من الصفر أو محتاج تطبّق وتتعلم كود الشركات.

+55

فيديو بالعربي

8

موديولز

5

مشاريع عملية

∞

وصول دائم

ابدأ الكورس شوف الكورس على Udemy تصفّح المنهج
منشور ومعتمد على Udemy

ليه الكورس ده

المشكلة مش في قلة المصادر

المشكلة إنك بتتفرج على عشرات الساعات، وبتفهم وانت بتتفرج، وبعدين تقعد قدام ملف فاضي ومتعرفش تبدأ منين. السبب إنك اتعلمت أكواد، ومااتعلمتش طريقة التفكير اللي وراها.

الكورس ده مبني على العكس: كل موديول بيشرح ليه قبل إزاي، وبينتهي بمشروع بتكتبه بإيدك من الصفر.

قبل ما تدفع

الكورس ده ليك ولا لأ؟

الكورس ليك لو

  • بتبدأ من الصفر ومش عارف تبدأ منين.
  • اتفرجت على كورسات كتير بس لسه متقدرش تبني حاجة لوحدك.
  • عارف HTML، CSS بس الـ JavaScript لسه مش مستوعبها.
  • عايز Portfolio فيه مشاريع كتبتها بنفسك مش نسخ ولصق.
  • ناوي تدخل React أو Angular أو Vue وعايز أساس يخليك تفهمهم بسرعة.

مش ليك لو

  • بتدوّر على شهادة معتمدة من جهة رسمية — Udemy بتديك شهادة إتمام بس، مش شهادة معتمدة. اللي بيفرق هنا المهارة والمشاريع.
  • معتمد كليًا على الـ AI في كتابة الكود من غير ما تفهم اللي بيحصل.
  • محترف بالفعل في JavaScript وبتدوّر على مستوى Senior متقدم.
  • عايز Backend أو Mobile — الكورس ده فرونت اند بس.
  • مش هتلاقي وقت تطبّق. الفرجة لوحدها مش هتنفع.

النتيجة

بعد الكورس هتقدر تعمل إيه؟

تبني صفحة كاملة من الصفر

HTML سليم Semantic، وتصميم Responsive بـ Flexbox، Grid يشتغل على الموبايل والديسكتوب.

تكتب JavaScript وانت فاهم

مش بس Syntax — الـ Scope والـ Closures والـ Event Loop، this والـ Prototypes.

تتعامل مع APIs حقيقية

من خلال مشاريع زي الـ Weather App: تستدعي API وتتعامل مع fetch، async/await، معالجة الأخطاء، وحفظ البيانات في المتصفح.

تنظّم كودك زي الشركات

تقسيم الملفات، فصل الـ UI عن الـ Logic، Classes، Modules وPatterns بتتقابل بيها في الشغل.

تعرف الـ Framework المناسب ليك

موديول كامل يقارن React، Angular، Vue، وإزاي تختار حسب هدفك وسوق شغلك.

تفهم الويب نفسه

من الـ DNS للـ HTTP للـ Rendering — الصورة الكاملة اللي بتفرق في الإنترفيوهات.

المنهج

8 موديولز • +55 فيديو

كل درس حوالي 10 دقائق — مركّز، بدون حشو، وبينتهي كل موديول بتطبيق.

01 البداية الصح: تجهيز نفسك وبيئتك 6 دروس
  • الترحيب وخريطة الطريق: تبني طريقك كمبرمج إزاي.
  • الـ Tech Stack الحديث: ليه HTML، CSS، JavaScript بالذات.
  • تجهيز البيئة: VS Code والإضافات، Chrome DevTools.
  • عقلية المطوّر: تتعلم إزاي، تعمل Debug إزاي، وتبني إزاي.
02 VS Code: تشتغل بكفاءة أعلى 3 دروس
  • الإعدادات والإضافات اللي بتفرق فعلاً في السرعة.
  • Shortcuts، Emmet، Multi-cursor.
  • سير عمل يومي منظّم بدل الشغل العشوائي.
03 HTML Mastery: الأساس 8 دروس
  • تشريح المستند: DOCTYPE، head، body والـ metadata.
  • النصوص والـ Semantics: العناوين والفقرات ووسوم HTML5.
  • التفاعل: الروابط والصور والقوائم والجداول.
  • الفورمز والـ Inputs: بناء واجهات لجمع البيانات.
  • أفضل الممارسات: SEO، Accessibility وبنية نظيفة.
  • المشروع الأول: Semantic Landing Page
04 CSS Mastery: تصميم الويب الحديث 12 درس
  • الـ Selectors والـ Specificity: تستهدف العناصر وتحل التعارضات.
  • الـ Box Model: المحتوى والـ padding والـ border والـ margin.
  • الـ Layouts الحديثة: Flexbox، CSS Grid بتعمّق.
  • الحركة: Animations، Transitions.
  • الـ Responsive Design: الـ Media Queries ومنهج Mobile-first.
  • المشروع الثاني: Personal Portfolio
05 JavaScript: الأساسيات 11 درس
  • المحرك والذاكرة: الـ JS بيشتغل إزاي جوّه (Call Stack، Heap).
  • الأنواع والمتغيرات: var، let، const والـ Temporal Dead Zone.
  • المنطق والتحكم: الفرق بين المقارنة العادية == والمقارنة الصارمة ===، والـ truthy/falsy، واللوبات.
  • الدوال: Declarations، Expressions، Arrow Functions.
  • الـ Array Methods: map، filter، find وقوة reduce.
  • الـ Objects والـ JSON: نمذجة البيانات والـ Serialization.
  • الـ DOM والـ Events: الاستعلام والتعديل والتفاعل مع المستخدم.
  • المشروع الثالث: Modern Calculator
06 JavaScript Masterclass: المستوى المتقدم 10 دروس
  • المحرك بعمق: الـ Scope Chain والـ Lexical Environment والـ Hoisting.
  • الـ Closures: المتغيرات الخاصة والـ Functional Patterns.
  • الـ Event Loop: الفرق بين الـ Macrotasks والـ Microtasks والتزامن.
  • الـ Async JS: الـ Promises، async/await ومعالجة الأخطاء.
  • كلمة this: الربط الضمني والصريح والـ Lexical.
  • الـ Prototypes والـ Classes: الوراثة الـ Prototypal وكلاسات ES6.
  • الـ Modules: ES Modules وبنية مشروع نظيفة.
  • الـ Defensive Coding: الـ Optional chaining (?.) والـ Nullish coalescing (??).
  • المشروع الرابع: Weather App — استهلاك API حقيقي
  • المشروع الخامس: Pro Task Manager — Classes، State، Modular Logic
07 بونص: أبعد من الأساسيات — الـ Frameworks 6 دروس
  • الـ Framework يعني إيه: Vanilla JS مقابل Framework، وليه الـ Frameworks أصلاً موجودة.
  • الـ DNA المشترك: الـ Components والـ State والـ Reactivity.
  • الثلاثة الكبار: React، Angular، Vue — نقاط القوة والمقايضات.
  • تختار إزاي: توفيق الأداة مع الفريق ومع نوع الشغل.
08 بونص: الويب بيشتغل إزاي؟ 3 دروس
  • من الدومين للـ IP: الـ DNS والاسم بيتحوّل لعنوان إزاي.
  • الطلب والاستجابة: الـ HTTP والـ HTTPS والـ Methods والـ Status Codes.
  • المتصفح بيرسم الصفحة إزاي: الـ DOM والـ CSSOM، Render Tree، Layout، Paint، وفين مكان الـ JS.
  • السرعة والأمان: الـ Caching والـ CDN، والفرق بين الـ Client والـ Server.

التطبيق

5 مشاريع تكتبها بإيدك

كل مشروع بيفتح ويشتغل بدابل-كليك — بدون npm install، بدون Build Tools، وبدون أي Framework. كله Vanilla عشان تفهم الأساس مش تعتمد على أداة.

01

Semantic Landing Page

صفحة أعمال كاملة ببنية احترافية: وسوم HTML5 الدلالية، تسلسل عناوين سليم، فورم مترابط، وSEO، Accessibility من أول يوم.

HTML5 Semantics Forms ARIA Open Graph
02

Personal Portfolio

بورتفوليو Responsive بتصميم حديث: CSS Variables كـ Design Tokens، Grid، Flexbox، Glassmorphism، وخطوط متجاوبة بـ clamp().

CSS Grid Flexbox Media Queries Animations clamp()
03

Modern Calculator

آلة حاسبة بمنطق نظيف: Event Delegation بـ listener واحد بدل زر بزر، إدارة State، ودعم كامل للكيبورد.

DOM Event Delegation Data Attributes State IIFE
04

Weather Dashboard

أول تطبيق بيكلّم سيرفر حقيقي: يجيب إحداثيات المدينة ويعرض الطقس من Open-Meteo API، مع معالجة أخطاء وحفظ آخر عمليات البحث.

fetch async/await try/catch localStorage Open-Meteo API
05

Pro Task Manager

المشروع الختامي وأقربهم لكود الشركات: كلاسات ES6 بـ Private Fields، نمط Observer، فصل الـ Models عن الـ Store عن الـ UI.

ES6 Classes Private Fields Pub/Sub Serialization Optional Chaining

توثيق ودليل بناء

لكل مشروع توثيق وخطوات بناء تفصيلية — تبنيه بإيدك خطوة بخطوة وتضيفه لـ Portfolio بتاعك.

الاشتراك

الكورس متاح على Udemy

مكان واحد للمحتوى كله — تشتريه مرة، ويفضل في حسابك للأبد.

  • أكتر من 55 فيديو بالعربي (8 موديولز)
  • توثيق ودليل بناء الـ 5 مشاريع
  • موديول "الويب بيشتغل إزاي؟"
  • موديول اختيار الـ Framework
  • وصول دائم للمحتوى + الحصول على أي تحديث مجانًا
  • شهادة إتمام من Udemy
  • شراء آمن على Udemy — منصة عالمية موثوقة
السعر بيختلف من بلد لبلد. ده مش تحكّم مننا — دي سياسة تسعير Udemy نفسها، بتحدد سعر كل دولة بعملتها. وكمان Udemy بتعمل عروض بتتغير باستمرار. عشان كده مش بنكتب رقم ثابت هنا؛ ادخل على صفحة الكورس وهتشوف السعر النهائي بعملة بلدك قدامك قبل أي خطوة دفع.
اشترك على Udemy عندك مشكلة في الشراء من Udemy؟ كلّمنا
منشور ومعتمد على Udemy
م. محمد وحشي

المدرّب

م. محمد وحشي

Software Engineer & Mentor

أكتر من 12 سنة في تطوير البرمجيات وقيادة الفرق التقنية وتعليم المبرمجين. الكورس ده مبني على نفس اللي بشوفه في الشغل الحقيقي: الفرق مش في حفظ الأكواد، الفرق في طريقة التفكير وراها.

اعرف أكتر عن JsCripted

الأسئلة الشائعة

أسئلة قبل ما تبدأ

الكورس مسجّل ولا لايف؟
الكورس مسجّل بالكامل، تذاكره في أي وقت يناسبك وبالسرعة اللي تريحك.
محتاج خلفية برمجية عشان أبدأ؟
لأ. الكورس بيبدأ من أول سطر HTML وبيفترض إنك مش عارف حاجة. لو عندك خلفية بسيطة هتعدّي الموديولز الأولى بسرعة وتركّز على الـ JavaScript المتقدمة.
الكورس بيتسلّم إزاي؟
بعد الشراء من Udemy، الكورس بيتضاف لحسابك على طول. تفتحه من أي جهاز — الموقع أو التطبيق — والوصول دائم، تقدر ترجع للمحتوى في أي وقت، ومعاه شهادة إتمام لما تخلّصه.
ليه السعر مش مكتوب في الصفحة؟
لأن Udemy بتحدد سعر مختلف لكل دولة بعملتها المحلية، وده خارج عن تحكّمنا. وكمان بتعمل عروض بتتغير باستمرار. لو كتبنا رقم ثابت هنا هنبقى بنقولك سعر مش حقيقي. السعر النهائي بعملة بلدك هيبان قدامك على صفحة الكورس قبل ما تدخل أي بيانات دفع — تشوفه وتقرر.
طرق الدفع إيه؟ وأنا بره مصر؟
الدفع بيتم على Udemy مباشرة، بالطرق المتاحة في بلدك (فيزا، ماستركارد، PayPal وغيرها حسب الدولة). يعني الشراء متاح من أي مكان في العالم. ولو واجهتك أي مشكلة في الدفع، كلّمنا على واتساب ونساعدك.
ليه على Udemy؟
عشان Udemy منصة عالمية موثوقة بملايين المتعلمين حوالين العالم، وعندها معايير جودة بتراجع المحتوى قبل ما ينشر. الدفع عليها آمن ومتاح من أي بلد من غير تحويلات يدوية، والكورس يفضل في حسابك بوصول دائم من أي جهاز، ومعاه شهادة إتمام.
هل الكورس هيأهّلني لشغل فرونت اند؟
الكورس بيبني الأساس المتين: HTML، CSS، JavaScript لحد المستوى المتقدم، و5 مشاريع تدخل بيهم الـ Portfolio. بعده الخطوة الطبيعية هي Framework (React أو Angular أو Vue) — وفيه موديول كامل يساعدك تختار المناسب ليك.

جاهز تبدأ صح وتأسّس نفسك بكود سليم؟

الكورس كامل على Udemy — تشوف السعر بعملة بلدك، وتبدأ من أول فيديو في نفس اللحظة.

ابدأ الكورس على Udemy
اشترك على Udemy