Name: HTML5, CSS, JS: مقدمة إلى تصميم مواقع الويب مع مشروع متكامل
Rating: 4.5 (23 reviews)

Udemy Business

Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Created byMohamed Elgharabawy

Last updated 2/2019

Arabic

What you'll learn

HTML5: أساسيات اللغة و كيف تستعمل في تصميم المواقع
CSS: أساسيات اللغة و كيف تستعمل لإضفاء شكل جمالي للمواقع
JavaScript: أساسيات اللغة و كيف تستعمل لإضفاء تفاعل بين المستخدم و الموقع
مثال عملي لكل درس
مشروع تخرج على تصميم لصفحة كاملة في آخر الدورة

Course content

6 sections • 44 lectures • 7h 35m total length

تمهيد و إجابة لبعض الأسئلة الشائعة6:59
في هذا الدرس نجيب عن بعض الأسئلة الشائعة المتعلقة بتصميم و تطوير المواقع
تركيب البرامج المطلوبة و تجهيز بيئة العمل - نظام تشغيل ماك5:33
Visual Studio Code: في هذه الدورة سنستعمل برنامج
في هذا الدرس نقوم بتركيب البرنامج على جهاز الماك و في الدرس القادم نقوم بتركيب نفس البرنامج على جهاز بنظام تشغيل ويندوز
إذا كنت تستعمل نظام تشغيل و يندوز, بإمكانك التقدم للدرس التالي لاتباع الخطوات الخاصة بنظام الويندوز
تركيب البرامج المطلوبة و تجهيز بيئة العمل - نظام تشغيل ويندوز3:50
Visual Studio Code: في هذه الدورة سنستعمل برنامج
في هذا الدرس نقوم بتركيب البرنامج على جهاز بنظام تشغيل ويندوز
إذا كنت تستعمل نظام تشغيل ماك و قمت بتركيب البرنامج في الدرس الماضي, بإمكانك التقدم للدرس التالي

HTML5: أول برنامج و التعرف على التراكيب الأساسية للغة8:57
في هذا الدرس نتعرف على التراكيب الأساسية لأي صفحة ويب و نقوم بكتابة أول برنامج لنا في هذه الدورة
HTML5: <body>, <h> التعرف على عناصر8:06
في هذا الدرس نتعرف على العناصر التالية
<body>
<h1> - <h6>
HTML5: <p> تغيير اتجاه الصفحة للغة العربية و التعرف على عنصر6:56
التعرف على طريقة تغيير اتجاه صفحة الويب لتصبح من اليمين إلى اليسار
<p> نتعرف كذلك على عنصر جديد و هو عنصر
HTML5: <ul>, <ol> التعرف على القوائم المرقمة و الغير مرقمة5:12
في هذا الدرس نتعرف على كيفية إضافة قوائم مرقمة و غير مرقمة إلى صفحات الويب باستعمال عنصرين جديدين
<ul>
<ol>
<li> نتعرف كذلك على عنصر القائمة
HTML5: الجزء الأول - <img> إضافة صور إلى صفحة الويب باستخدام عنصر6:15
في هذا الدرس نتعرف على طريقة إضافة الصور للموقع
HTML5: الجزء الثاني - <img> إضافة صور إلى صفحة الويب باستخدام عنصر9:20
في هذا الدرس نتعرف على خصائص أكثر للصور و كيفية التعامل معها في صفحات الويب
HTML5: الجزء الأول - <a> إنشاء الروابط في صفحة الويب باستخدام عنصر6:42
<a> في هذا الدرس نتعرف على طريقة إضافة الروابط لصفحات الويب باستخدام عنصر
HTML5: الجزء الثاني - <a> إنشاء الروابط في صفحة الويب باستخدام عنصر10:40
في هذا الدرس نتعرف على خواص جديدة متعلقة بالروابط و كيفية عملها
HTML5: <hr />, <br /> العناصر ذاتية الغلق8:38
في هذا الدرس سنتعلم كيفية استعمال العناصر ذاتية الغلق
<hr />
<br />
HTML5: <table> الجداول - الجزء الأول6:41
في هذا الدرس سنتعلم كيفية عمل جداول البيانات في صفحات الويب
HTML5: <table> الجداول - الجزء الثاني6:56
في هذا الدرس نتعرف على خواص أكثر للجداول
HTML5: <table> الجداول - الجزء الثالث7:31
في هذا الدرس نتعرف على خواص أكثر للجداول
HTML5: و معانيها و الفروق بينها <del>, <s>, <em>, <i> التعرف على عناصر11:25
في هذا الدرس سنتعرف على العناصر التالية و التي قد تؤدي نفس الغرض بعض الأحيان لكن كل واحد منها له استعمال خاص
<del>, <s>, <em>, <i>
HTML5: <form> عناصر إدخال البيانات من المستخدم - الجزء الأول10:47
في هذا الدرس نتعرف على طرق جمع البيانات من المستخدم باستخدام عناصر إدخال البيانات
HTML5: <form> عناصر إدخال البيانات من المستخدم - الجزء الثاني10:23
في هذا الدرس نتعرف على طرق جمع البيانات من المستخدم باستخدام عناصر إدخال البيانات
HTML5: <form> عناصر إدخال البيانات من المستخدم - الجزء الثالث12:50
في هذا الدرس نتعرف على طرق جمع البيانات من المستخدم باستخدام عناصر إدخال البيانات
HTML5: <form> عناصر إدخال البيانات من المستخدم - الجزء الرابع6:19
في هذا الدرس نتعرف على طرق جمع البيانات من المستخدم باستخدام عناصر إدخال البيانات
HTML5: <video>, <audio> إضافة ملفات صوتية و فيديو لصفحة الويب10:10
في هذا الدرس نتعرف على طريقة إضافة ملفات الصوت و الفيديو لصفحة الويب باستخدام عنصرين جديدين
<video>
<audio>
HTML5: YouTube, Vimeo إضافة فيديو من مواقع خارجية مثل7:48
في هذا الدرس سنتعلم كيفية إضافة مقاطع من اليوتيوب أو الفيميو إلى صفحة الويب الخاصة بنا
HTML5: اختبر معلوماتك

CSS: مقدمة و تمهيد12:21
مقدمة إلى هذه اللغة و لماذا نستعملها
CSS: class, color ما هي الكلاس ومقدمة إلى خاصية الألوان9:43
في هذا الدرس نتعرف على استعمال الكلاس في صفحات الويب و كيف نكتب خصائص الستايل لتطبق فقط على كلاس معين
CSS: id استعمال أكثر من كلاس في نفس الوقت و مقدمة إلى9:16
في هذا الدرس نتعرف إلى الفرق بين خاصتين مهمتين
class, id
نتعرف أيضا على طريقة استعمال أكثر من كلاس لعنصر واحد
CSS: color خاصية الألوان13:05
في هذا الدرس نتكلم عن الألوان و مختلف أنواعها بالتفصيل
CSS: margin خاصية المسافات الخارجية9:55
في هذا الدرس نتعرف على طريقة إدراج مسافات بين العناصر
CSS: padding, background-color خاصية المسافات الداخلية و ألوان الخلفيات6:03
في هذا الدرس نتعرف على طريقة إدراج مسافات داخلية بين العناصر
نتعرف كذلك على طريقة إضافة ألوان للخلفيات
CSS: border, border-radius, width, height خواص الحدود و الحواف و الطول و العرض10:26
في هذا الدرس نتعرف على مجموعة من الخصائص المهمة
border, border-radius, width, height
CSS: font خاصية الخطوط11:45
في هذا الدرس نتعرف على طريقة استخدام خطوط مختلفة. نتعرف كذلك على استخدام أحجام و أنماط مختلفة للخطوط
CSS: background-image استعمال الصور كخلفيات للمحتوى7:12
في هذا الدرس نتعلم كيفة استخدام صورة كخلفية لمحتوى الموقع
CSS: hover إضافة خواص تفاعلية مع حركة الماوس فوق العناصر8:24
في هذا الدرس نستعمل خاصية مهمة تعطينا القدرة على إعطاء العنصر مجموعة من الخصائص فقط إذا قمنا بتحريك الماوس فوقه مباشرة
CSS: text-align, line-height تغيير مسار النص و طول الخط و فهم أولويات الترتيب10:24
في هذا الدرس نتعلم طريقة تغيير اتجاه النص و تغيير طول الخط
نتعلم أيضا الأولويات التي تتبعها هذه اللغة و كيف تقرر أي خاصية تطبق إذا أعطينا لعنصر واحد خاصيتين متضادتين
CSS: list القوائم و الأولويات و استخدام عنصر بداخل عنصر آخر9:43
في هذا الدرس نتعلم بعض الخصائص المتعلقة بالقوائم و نراجع ما تعلمناه عن الأولويات
نتعلم كذلك طريقة عمل الخصائص للعناصر الموجودة بداخل عناصر أخرى
CSS: list القوائم و استعمال أكثر من كلاس5:36
نكمل في هذا الدرس ما بدأنا به في موضوع القوائم و نتكلم عن استعمال أكثر من كلاس و أكثر من خاصية في نفس الوقت
CSS: display طريقة استعمال أنواع مختلفة لطرق العرض - الجزء الأول8:59
نتحدث في هذا الدرس عن طرق مختلفة لعرض العناصر باستخدام
inline
inline-block
block
CSS: display طريقة استعمال أنواع مختلفة لطرق العرض - الجزء الثاني8:03
نتحدث في هذا الدرس عن طريقة أخرى لعرض العناصر
flex
CSS: opacity, visibility إخفاء و إظهار العناصر5:36
في هذا الدرس نتعرف على بعض الخواص المستعملة لإظهار و إخفاء العناصر و الفروق بينها
CSS: table كيفية عمل ستايلات للجداول7:02
في هذا الدرس نرجع للجزء الذي تحدثنا فيه عن الجداول و نقوم بتغيير مظهر الجدول باستعمال خصائص معينة
CSS: اختبر معلوماتك

مشروع التخرج: الجزء الأول40:00
في هذا الدرس نقوم بالعمل على صفحة متكاملة من الصفر و تحويل تصميم من صورة إلى صفحة ويب كاملة
مشروع التخرج: الجزء الثاني1:01:42
في هذا الدرس نقوم بالعمل على صفحة متكاملة من الصفر و تحويل تصميم من صورة إلى صفحة ويب كاملة

Requirements

لا توجد أي متطلبات خاصة .. فقط جهاز كومبيوتر و الرغبة في التعلم
لا تشترط الخبرة المسبقة بأي لغة برمجة
لا تشترط معرفة اللغة الإنجليزية

Description

في هذه الدورة سنتعرف على أساسيات تطوير و تصميم المواقع من خلال تعلم اللغات التالية

HTML5
CSS
JavaScript

هذه الدورة ستكون دورة تطبيقية و كل درس يحتوي على مثال مسجل لشاشة مقدم الدورة و هو يقوم بعمل الأمثلة

الدورة للجميع بمختلف الأعمار و بدون افتراض أي خلفية مسبقة في أي لغة من لغات البرمجة

حاول أيضا مقدم الدورة أن تكون قدر الإمكان باللغة العربية الفصحى حتى يسهل على الجميع فهمها

أيضا تحتوي الدورة على مشروع متكامل في نهايتها نطبق من خلاله ما تعلمناه في خلال الدورة و يقوم مقدم الدورة بعمل المشروع عبر تسجيل كامل للشاشة مدته أكثر من ساعة و نصف

نتمنى للجميع الاستفادة من هذه الدورة و نعدكم أن نكون متواجدين معكم قدر الإمكان للإجابة عن أسئلتكم و استفساراتكم إن وجدت

Who this course is for:

أي شخص يرغب بتعلم تصميم المواقع و يريد أن يبدأ من الصفر

What you'll learn

Explore related topics

Course content

مقدمة و تمهيد3 lectures • 16min

HTML5: أساسيات لغة البرمجة19 lectures • 2hr 42min

CSS: أساسيات لغة البرمجة17 lectures • 2hr 34min

JavaScript: مقدمة إلى لغة2 lectures • 22min

مشروع التخرج2 lectures • 1hr 42min

ما هي الخطوة التالية؟1 lecture • 1min

Requirements

Description

Who this course is for: