كورس أساسيات الويب Front-End بالعربي | HTML & CSS & JavaScript

ليه الكورس ده

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

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

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

قبل ما تدفع

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

الكورس ليك لو

بتبدأ من الصفر ومش عارف تبدأ منين.
اتفرجت على كورسات كتير بس لسه متقدرش تبني حاجة لوحدك.
عارف 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 — الصورة الكاملة اللي بتفرق في الإنترفيوهات.

المنهج

9 موديولز • أكثر من 85 فيديو

حوالي 10 ساعات محتوى، ولكل موديول ملخص PDF، ومعاهم 4 كويزات تقيس فهمك.

01 البداية الصح: تجهيز نفسك وبيئتك 9 دروس

الترحيب وخريطة الطريق، والأدوات اللي هتسطّبها.
ليه الكود بتاع الكورس جاهز، وإزاي تذاكر الكورس ده عشان تطلع منه بأكبر فايدة.
إضافات VS Code اللي بتفرق، والـ Chrome DevTools كمحرّر تاني ليك.
عقلية المطوّر: تتعلم إزاي، تعمل Debug إزاي، وتبني إزاي.
الـ AI والكورس ده: تستخدمه يسرّع فهمك مش يلغيه، ومعاه دليل Prompts جاهزة.
Checklist قبل ما تبدأ تكتب كود.

02 يعني إيه Front-End؟ 6 دروس

يعني إيه Front-End، وليه تتعلمه.
ليه HTML وCSS وJavaScript بالذات، ومبدأ الـ Separation of Concerns.
خرافات وحقائق عن المجال: أسئلة وأجوبة على جزئين.

03 HTML Fundamentals: الأساس 10 دروس

تشريح المستند: DOCTYPE، head، body والـ metadata.
النصوص والـ Semantics: العناوين والفقرات والوسوم الدلالية وأنواع العناصر.
الصور والقوائم، والفورمز والـ Inputs.
الـ Accessibility والـ Meta tags وأساسيات الـ SEO.
وسوم HTML الحديثة والأداء، وأفضل الممارسات والأخطاء الشائعة.
المشروع الأول: Semantic Landing Page + فيديو شرح الكود

04 CSS Fundamentals: تصميم الويب الحديث 13 درس

الـ Selectors والـ Specificity، والـ Pseudo-classes والـ Pseudo-elements.
الألوان والخطوط وتنسيق النصوص، والـ Box Model.
الـ Display والـ Positioning، والـ Layouts الحديثة: Flexbox وCSS Grid.
الخلفيات والحدود والظلال، والـ Transitions والـ Animations.
الـ Responsive Design والـ Media Queries، وإزاي تعمل Debug للـ CSS.
المشروع التاني: Personal Portfolio + فيديو شرح الكود

05 JavaScript Foundations: الأساسيات 17 درس

المتغيرات وأنواع البيانات، والـ Operators والفرق بين == و===.
الشروط واللوبات والدوال، والـ Scope والـ Hoisting.
الـ Arrays والـ Objects، والـ Array Methods على جزئين: map وfilter وfind وreduce وsort وغيرهم.
الـ String Methods والـ Math Methods والـ Regular Expressions.
الـ DOM والـ Events والفورمز والـ Validation.
المشروع التالت: Modern Calculator + فيديو شرح الكود

06 JavaScript Advanced: المستوى المتقدم 13 درس

الـ Execution Context والـ Call Stack، والـ Scope Chain والـ Closures.
الـ Async JS والـ Promises، والـ Event Loop.
كلمة this: bind وcall وapply.
الـ Prototypes والوراثة، والـ Modules: import وexport.
الـ Debugging زي المحترفين.
الـ APIs والـ CRUD: GET وPOST وPATCH وPUT وDELETE.
المشروع الرابع: Weather Dashboard: استهلاك API حقيقي + فيديو شرح الكود
المشروع الخامس: Task Manager: تحدّي تبنيه بنفسك، ومعاك السورس كود وملف الأخطاء الشائعة

07 VS Code في الشغل الحقيقي 3 دروس

تفتح مشروع وتقرا الواجهة.
الإضافات: Live Server وPrettier.
التعديل والـ Shortcuts والـ Terminal.

08 إضافي: الـ Frameworks وتختار منهم إزاي 6 دروس

الـ Framework يعني إيه: Vanilla JS مقابل Framework، وليه الـ Frameworks أصلاً موجودة.
الـ DNA المشترك: الـ Components والـ State والـ Reactivity.
الثلاثة الكبار: React وAngular وVue: نقاط القوة والمقايضات.
تختار إزاي: توفيق الأداة مع الفريق ومع نوع الشغل.

09 إضافي: الويب بيشتغل إزاي؟ 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

Task Manager

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

ES6 Classes Private Fields Pub/Sub Serialization Optional Chaining

مع كل مشروع

السورس كود كامل، ودليل بناء خطوة بخطوة، وملف بالأخطاء الشائعة. وأول أربع مشاريع ليهم فيديو شرح للكود، والخامس تحدّي تبنيه بنفسك.

الاشتراك

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

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

أكثر من 85 فيديو بالعربي في 9 موديولز، حوالي 10 ساعات
لكل مشروع من الـ 5: السورس كود ودليل بناء وملف الأخطاء الشائعة، وفيديو شرح كود لأول 4
ملخص PDF لكل موديول، وشيتات تمارين، و4 كويزات تقيس فهمك
دليل AI Prompts يخلّي الـ AI يشرحلك بدل ما يكتب بدالك
Playground فيه أمثلة الكورس: تفتحه وتعدّل وتشوف النتيجة
موديولين إضافيين: "الويب بيشتغل إزاي؟" واختيار الـ Framework
وصول دائم للمحتوى + الحصول على أي تحديث مجانًا
شهادة إتمام من Udemy
شراء آمن على Udemy — منصة عالمية موثوقة

السعر على Udemy بيختلف من بلد لبلد، وهتشوفه بعملة بلدك قبل ما تدفع.

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

عندك سؤال قبل ما تشترك؟ كلّمني على واتساب

منشور ومعتمد على Udemy

المدرّب

م. محمد وحشي

Certified Software Architect & Mentor

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

اعرف أكتر عن JsCripted

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

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

الكورس مسجّل ولا لايف؟

الكورس مسجّل بالكامل، تذاكره في أي وقت يناسبك وبالسرعة اللي تريحك.

محتاج خلفية برمجية عشان أبدأ؟

لأ. الكورس بيبدأ من أول سطر HTML وبيفترض إنك مش عارف حاجة. لو عندك خلفية بسيطة هتعدّي الموديولز الأولى بسرعة وتركّز على الـ JavaScript المتقدمة.

الكورس بيتسلّم إزاي؟

بعد الشراء من Udemy، الكورس بيتضاف لحسابك على طول. تفتحه من أي جهاز — الموقع أو التطبيق — والوصول دائم، تقدر ترجع للمحتوى في أي وقت، ومعاه شهادة إتمام لما تخلّصه.

ليه السعر مش مكتوب في الصفحة؟

لأن Udemy بتحدد سعر مختلف لكل دولة بعملتها المحلية، وده خارج عن تحكّمنا. وكمان بتعمل عروض بتتغير باستمرار. لو كتبنا رقم ثابت هنا هنبقى بنقولك سعر مش حقيقي. السعر النهائي بعملة بلدك هيبان قدامك على صفحة الكورس قبل ما تدخل أي بيانات دفع — تشوفه وتقرر.

طرق الدفع إيه؟ وأنا بره مصر؟

الدفع بيتم على Udemy مباشرة، بالطرق المتاحة في بلدك (فيزا، ماستركارد، PayPal وغيرها حسب الدولة). يعني الشراء متاح من أي مكان في العالم. ولو واجهتك أي مشكلة في الدفع، كلّمنا على واتساب ونساعدك.

ليه على Udemy؟

عشان Udemy منصة عالمية موثوقة بملايين المتعلمين حوالين العالم، وعندها معايير جودة بتراجع المحتوى قبل ما ينشر. الدفع عليها آمن ومتاح من أي بلد من غير تحويلات يدوية، والكورس يفضل في حسابك بوصول دائم من أي جهاز، ومعاه شهادة إتمام.

الكورس بيتعامل مع الـ AI إزاي؟

فيه درس في أول الكورس عن الـ AI: إيه اللي اتغيّر في كتابة الكود وإيه اللي متغيّرش، وإزاي تستخدمه عشان يشرحلك مش يكتب بدالك. ومع الكورس دليل Prompts جاهزة لدروس HTML وCSS وJavaScript.

هل الكورس هيأهّلني لشغل فرونت اند؟

الكورس بيبني الأساس المتين: HTML، CSS، JavaScript لحد المستوى المتقدم، و5 مشاريع تدخل بيهم الـ Portfolio. بعده الخطوة الطبيعية هي Framework (React أو Angular أو Vue) — وفيه موديول كامل يساعدك تختار المناسب ليك.

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

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

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

منتجات تانية

الكورس بيعلّمك تكتب كود. دول بيحلّوا حتت تانية في الطريق.

كتاب «من تايه لمبرمج»

لسه مش عارف تبدأ منين ولا هتختار ايه؟ الكتاب بيرتّب دماغك: اختيار التخصص، نظام المذاكرة، والطريق لأول وظيفة.

اعرف تفاصيل الكتاب

قاموس مصطلحات البرمجة

الانجليزي بيوقّفك وانت بتذاكر؟ أكثر من 2000 مصطلح بمعناه بالعربي ونطقه بحروف عربية — مرجع تفتحه وقت الحاجة.

اطلبه على واتساب

كورس أساسيات الويب Frontend Fundamentals