كورس css كامل في فيديو واحد | احترف و تعلم كل شئ عن css
Вставка
- Опубліковано 4 сер 2024
- سنتعلم في هذا الفيديو لغة css بالكامل في فيديو واحد
روابط مهمة:
جميع الروابط هنا :
اختبارات css:
nouvil.net/css-play-ground/
___________________
للتواصل معي على حسابي على instagram :
/ abdelrahman_noufal
___________________
أكاديمية نوفيل لتعليم البرمجة :
nouvil.net/
___________________
جروب الفيسبوك الخاص بنا :
/ 1810581845642171
___________________
حسابي على الفيسبوك للاهمية فقط :
/ abdelrahman.g.nofal
___________________
ما هي CSS ؟
عليك تعلم CSS ان اردت ان تكون مطور واجهات متخصص, كما عليك بالتأكيد تعلم HTML قبل ذلك و لها كورس ايضا على القناة ان اردت ذلك
تعتبر CSS لغة توصيفية تقوم بمنح موقع الويب تصميمه الفريد الذي سيميزه عن غيره من المواقع
تعد لغة ال CSS صديقة للغة ال HTML فهي دائماً مرافقة لها وبجانبها في تصميم وإنشاء صفحات الويب.
تشكل كل من هاتان اللغتان الأساس لكل موقع، فال HTML هي أساس كل عناصر صفحة الويب
أما ال CSS فهي أساس تصميم وشكل الموقع فبدونها ستظل مواقع الويب نصًا عاديًا على خلفيات بيضاء
كيف تعمل CSS ؟
لفهم أساسيات عملها، يجب أولاً فهم القليل عن لغة HTML (الشرح في مقالة منفصلة).
حيث تكون عناصر صفحات الويب عبارة عن وحدات على أشكال مربعة يحتوي كل منها على عناصر عديدة ويتم تخصيص حجمها وشكلها عن طريق لغة ال CSS .
على سبيل المثال: رأس الصفحة عبارة عن مربع، ويحتوي على العديد من الوحدات الأخرى الأصغر التي تضم جميع العناصر التي تشكل رأس الصفحة ، مثل الشعار، و الناف بار، و أيقونات التواصل الاجتماعية وما إلى ذلك.
يقوم المطور باستخدام CSS بتخصيص الشكل والحجم إلى رأس الصفحة.
وفي لغة ال CSS يتم تطبيق الخصائص على كل العناصر التي تحمل ال Class or Id المختار في ال CSS.
مثلا في الHTML لو تم تعيين Selector واحد لأكثر من عنصر في الصفحة وتم تعيين شكل وخصائص لهذا ال Selector فكل العناصر الحاملة له ستاخذ نفس الخصائص .
______________
توقيت الفيديو
00:00 ماذا سنتعلم في كورس css
02:50 css syntax
20:22 css selectors
31:56 Descendant selector
42:15 Box Model
01:03:07 Margin Auto
01:09:39 النسبة المئوية
01:21:16 Max - Min
01:33:26 Border Radius
01:40:40 Inline & Block
01:48:42 Text Align
01:55:21 Direction
01:57:34 Text Transform
02:00:06 Text Spacing
02:03:03 Text Decoration
02:09:01 Text Shadow
02:20:52 Wrapping White Space
02:32:47 css Fonts
02:48:13 Font Size
02:57:12 Font Style
02:58:52 Font Variant
03:01:24 Font Weight
03:16:19 Font Shorthand
03:25:32 Background
03:50:43 Linear Gradient
04:03:41 Radial Gradient
04:09:54 Float
04:21:36 Overflow
04:27:07 Position
04:42:10 Z-index
04:45:44 List Style
04:50:04 Table Style
04:57:12 CSS Units
05:07:18 Pseudo Classes
05:21:35 Pseudo Elements
05:32:17 Sibling Selectors
05:39:39 Attribute Selectors
05:53:23 Transform
06:07:59 Translate - scale - rotate
06:11:23 Transition
06:25:44 Animation
06:47:34 Inline - Block
07:00:09 Display:none - opacity - visibility
07:04:24 CSS Flex Box
07:52:59 CSS Grid
08:47:11 CSS Responsive - Наука та технологія
انا عارف يا شباب ان الفيديو طويل لكن css لغة كبيرة و فيها تفاصيل كتير و الفيديو ده لامم كل التفاصيل دي و فيه كمية معلومات كتيرة جدا تغنيك عن اي مصدر تاني
الفيديو ده هو تجميع لقائمة تشغيل كورس css انا جمعتها في فيديو واحد تسهيلا على الناس مش اكتر
تسلم ❤
اعمل كورس الجافا زي كده 😊
الله يباركلك كم انت عظيم ❤❤❤❤❤❤❤
يعني الي شاف البلايليست بتاعت ال css هوا نفس المحتوا الي في الفديو دا؟
Html?
من لا يشكر الناس لا يشكر الله ، شكرا من القلب على هذا الابداع في الكلام و الشغف في الشرح
اخي عبد الرحمن محتجين كورس javascript في فيديو واحد ❤❤❤❤
بارك الله فيك يا باشمهندس
بصراحة شرحك واضح وضوح الشمس ومفهوم وبسيط
جعله الله في ميزانك إن شاء الله
الله يجعلها في ميزان حسناتك وتبقى صدقة جارية انا تابعت الفيديو من الاول الى الاخير واستفدت جدا جدا. شكرا لك
جزاك الله خير الجزاء على هذا العمل النافع. زادك الله من فضله وكان لك ذخرا فى الآخرة بفضله جل جلاله.
جزاك الله خيرا جعلها في ميزان حسناتك ان شاء الله تعالى محتواك نافع واصل
شكرا جزيلا جعل الله مجهوداتك وجودة شرحك فى ميزان حسناتك وجزاك عنا خير الجزاءز بجد راوعة واتقان ووضوح
الله لايحرمنا منك ولا من علمك استاذ عبد الرحمن طولة الغيبة علينا الله يرزقك من اوسع ابوابه
بارك الله فيك يا بشمهندس
فى ميزان حسناتك ان شاء الله
بصراحه شرح مبسط وسهل ربنا يجعله في ميزان حسناتك يا باشمهندس تحياتى لك
روح ياشيخ ربنا يباركلك ويجعل عملك فى ميزان حسناتك ويرزقك الجنة
اسطورة يا عبد الله بدايتي في البرمجة كنت اتابعك انت و rakno و مازال ما اتعلم منكم يا اساطير
بالتوفيق يا غالي ان شاء الله
الناس بتتكلم عنك ك أفضل 10 قنوات لتعلم البرمجة ..
ملحوظة .. انا خلصت معاك كورس html كامل وداخل على css .. بس انا ملاحظ أنك بتحاول تعلم الناس حاجات فى html كمان 😂 ونت بتشرح css يعنى .. مجهود جامد ❤ عاااش
الله يباركلك ي أستاذ عبدالرحمن وربنا يزيدك كمان وكمان 😍🥰
بارك الله فيك , شرحك واضح
أنت رجل مبدع، جزاك الله خيرا
اول شي جزاك الله خير . على مجهودك وتعبك وصبرك وتصويرك ومنتاجك وتسجيلك ...
وشكر خاص ع طريقة شرحك واسلوبك ..
الله رزقك ويفتح لك ابواب السماء و الارض .. امين
الله يسعدك ، الفديو هذا كنت احتاجه بقوة
بارك الله فيك يابشا مهندس تفصل ودقة بشرح تغنيك عن الكثير من المصادر
حرفيا بدون مبالغه انت من أفضل الناس في البرمجه ماشاء الله...
بس ممكن لو سمحت تعملنا كورس عن git, github... ياريت لاني حاسس اني لسا تايه فيهم... وجزاك الله خير الجزاء...
شكرا جدا ي هندسه والله شرح ممتاز ومتوقع ان القناه ده تبقي حاجه جمده ان شاء الله وجزاك الله خير
الله يكرمك و يرزقك و يوسع عليك، شكراً
الله اكبر عيك يبني والله انت تفوقت ع المينتور اللي انا شغال معاه ❤❤❤❤❤
حقيقة شرح مبسط وجميل بارك الله فيك ❤
شكرا جزيلا من القلب على المجهودات المبدولة والمعلومات القيمة ، استمر يا اسطورة ❤❤❤❤
أستمر ياوحش شكرا كتير ولله انم شخص عظيم ٩ ساعات هاد شئ عظيم بارك الله فيك ياعم
انا بفتح الكورس من هنا ومش بكون عاوزاه يخلص والله ❤تبارك الله فعلا
شكرا لك لكل هاذا المجهود الكبير جدا و استمر يا معلم❤
بجد من كل قلبى
ربنا يجازيك كل خير
شرحك هنا ممتاز بجد
و الفيديو حلو جدا و متميز و واضح انه فيه شغل كتير معمول فى الفيديو منتاز جدا
الصوت حلو واصح
و الصورة ممتازة جدا و افضل شى انك عامل زووم فالناس اصحاب ضعف الابصار بيشوفو كويس و واضح
لا يكفيك شكر و ننتظر منك المزيد
الله يسعدك ويجزاك الخير يا عبدالرحمن جمال
تسلم يغالي ❤️❤️❤️
الله يباركلك والله ❤
سلام عليكم أستاذ عبدالرحمن. انا والله مبسوط جدا ان حضرتك بتعمل هذه الكورسات. انا بدات اتعلم برمجه في اولى ثانوي وتعلمت كل شي في لغه c++ وانتهيت منها وبعدها قررت اني ادخل في تعلم مجال الويب . خلصت لغه html وحاليا بنتهي من تعلم لغه css وكمان سمعت ليك كورس cs50 وكان كورس جميل جدا وشرحك فوق الممتاز . وانا فخور جدا اني بسمع لشرح حضرتك انا في بدايه تعلمي لمجال الويب كنت بسمع المهندس اسامة الزيرو بس حاسس انه لما بيتكلم كانه بيتكلم مع مهندسين ويب مش ناس مبتداءة اما انت فبتشرح بطريقة جميلة جدا . جدا . ونا الان طالب في تانية ثانوي وانشاء الله بعد ما هخلص مجال الويب واكون front end راح ارجع لهذا التعليق واشكرك تاني لان بفضل الله وشرحك الجميل انا مستمر. ربنا يوفقك في كل حياتك . وانا انصح اي احد بيشوف هذا التعليق انه لو عاوز يبدا في البرمجه فاحسن قناه فالوطن العربي هيا قناه عبدالرحمن جمال . وايضا قناه اتعلم ببساطه لاحمد عادل . شرحه ايضا جميل جدا ولو في احد بده يبدا انصحه جدا بهذه القنوات. شكرا ليك يا استاذ عبدالرحمن ، والله يوفقك في حياتك كلها ❤❤.
اتفق اسامه عنده شويه تعقيدات
@@fhijbzxg هو بيشرح كل حاجه وبيقول كل المعلومات . لاكن عنده مشكلة في الشرح المعقد. لاكن في ناس بتفهم منه وفي ناس مثلي لو سمعت شرحه تعتزل البرمجه خالص . بس هو يشكر أنه بيساعد الناس في تعلم البرمجة .
@@Youssef75746 مقلتش انه مش بيشرح ولكن عقدني في اللغات وبالذات جافا اسكريبت لكن هنا حسيت الموضوع سهل اوي
شكرا جزيلا و بارك الله فيك
شكرا جدا لشرحك
شكرا دكتور تعلمت برمجة html من فيديوهاتك شكرا ان شاء الله كلها في ميزان حسناتك
جامد كالعادة ❤❤❤
جزاك الله خير
أخي كريم هل ستعمل على كورس كامل لـ Javascript؟
بالتأكيد
@@AbdelrahmanGamalشكرا عل جهودك
بارك الله فيك و جزاك كل الخير و نفع بك
منتظرين كورس ال JavaScript
@@AbdelrahmanGamal
@@AbdelrahmanGamalقل إن شاء الله
@@AbdelrahmanGamal
اتمنى انك تخليها فيديو واحد مع جميع الأوسمة وكاملة ، والله يجزاك خير الجزاء ويوفقك ❤
شكرا لك الله يسعدك ويحفظك
الله ينور عليك يا هندسة اتمني تنزل لارافيل في القناة ضروري ❤
شكرا جدا خلصتhtmlوقربت الحمد لله اخلص cssوبإذن الله اطبق وادخل علي جافا بس عايزين فديو كامل لجافا ويكون شرح كامل ❤شكرا من القلب
بارك الله فيك يا استاذنا الغالي ❤
حبيبي شكرا ❤️❤️
شكرا كتير على مجهودك لانشاء هدا الكورس ❤
تسلم يا غالي ❤️❤️
You are the best teacher❤❤
شرحك روعة يا استاذ تسلم كتيير💖💖💖
حبيبي شكراااا ❤️❤️
كتب الله أجرك
❤❤❤❤❤❤ شكرا بجد
اكمل يا رجال ❤️
اخوي اتمنى بلمستقبل اذا سويت كورسات لما توصل لمصطلحات انجليزيه تقول ترجمتها الحرفيه عشان توصل المعلومه بشكل اسلس للدماغ زي انو margin معناها هامش بس تقدير كبير لمجهودك ❤️
ربنا يبارك فيك ويخليك لينا يارب ❤❤
تسلم يا غالي ❤️❤️
ربي يوفقك اخونا عبد الرحمن❤❤
حبيبي شكرا ❤️❤️
شكرا جدا بصراحه الفيديو ده محتاجه من زمن
بالتوفيق ان شاء الله
شكرا جزيلا على مجهودك بجد فادني الكورس جدا
من فضلك ممكن تنزل كورس للjavascript في اقرب وقت ❤
ما شاء الله الله يبارك فيك
حبيبي شكرا ❤️❤️
شكرا❤
الله يفقك ويعطيك العفية والصحة والله أفضل أستاذ في الدنيا ❤❤ خاصة كورس cs50 والله كفو عليك بس في سؤال
متي يا عبد الرحمن بتك تنزل باقي كورس cs50
ربنا يبارلك يا بشمهندس افضل حد بفهم منه ❤❤
حبيبي بالتوفيق ان شاء الله ❤️
انت ملك التدريس والفهم والهدوء
الله يسعدو حبيبنا المهندس الفاخر إنتا السبب الأول وشرحك الجميل والواضح عشان تخلينا نحب البرمجه
حبيبي ربنا يوفقك يارب ❤️❤️
ما شاء الله على شرح المبسط و المميز ،مستحيل في شخص يركز مع دورة ومايفهم
ضع لنا دورة JavaScript في اقرب وقت، جزاك لله خير في ميزان حسناتك🇩🇿
الله يعين احسها ١٤ ساعة الدورة لأني سمعت أن لغة جاڤا سكربت عملاقة ، بس الصراحة كل ماكان أطول كل ماكان أفضل
انا قربت انتهي كورس html و هبتدي كورس css صراحة استفدت كتير شكرا جزيلا متابعك من المغرب
حبيبي تسلم ❤️❤️❤️
باراك الله فيك
you are the best
الحمد لله ولله الحمد بفضل ربنا وبفضلك يا بشمهندس انا خلصت كورس html ودلوقتى هنا ناوى ادخل الكورس ده وحابب اشكرك جدا جدا على كل حاجه بتعملها عشان تعلمنا مش بقول كدا من فراغ انا عديت على منصات كتير فى لغة بايثون وتعبت كتير وكنت قربت اصرف نظر عن المجال خصوصا انى تعبت من كتر الشروحات الصعبه لكن حضرتك كلمة شكرا قليله عليك ربنا يجزيك خير هخلص الكورس ده وهاخد معاك بايثون وجافا سكريبت انشاء الله
بص نا لسه طالب ف ثانوي ف حاليا مشغول ف الدراسة مع الشغل واللغة اللي بتعلمها حاليا بايثون ، وعايز اقولك اني ختمت معاك كورس cs50 وانت يمكن احسن عربي شرح الكورس ده ع اليوتيوب بدون مبالغة ، ربنا يباركلك وبجد بدعيلك من كل قلبي وانشاء الله هعمل لايك ع الفيد ده دلوقتي وهرجعلو لما يجي وقتو انشاء الله ❤❤❤
بالتوفيق ان شاءالله
اعتقد انك ثاني ثانوي دام قلت بايثون
@@Abdulrahman45000 اشمعنا + صح
@@crawl9652
ولد خالتي برضوا ثاني ثانوي وقال انه بيتعلم لغة بايثون في المدرسة ، قال انها صعبة الله يعينكم ويوفقكم
استمر في المجال وربنا يوفقك واذا في معاك اي غموض اسال اي شخص وفقك الله اخي
اجمد واحد علي الكوكب في المجال ❤🥷
ربنا يبارك لك❤❤
تسلم يا غالي ❤️❤️
شكرا جزيلا على كل مجهوداتك أستاد أستفدنا منك الكثير يا معلم وأتمنا أن توضع شرح ل php في القريب العاجل إنشاء الله متابعك من المغرب 🇲🇦🇲🇦
عااش
شكرا
ربنا يحفظك يا محترم
حبيبي تسلم ❤️❤️
thank You so much
اعطاك الله من فضله حتى ترضى
احبك يا اخي والله ❤❤❤❤
احبك الله ❤️❤️
استاذنا الكريم عبد الرحمن جمال
الله يجزيك الخير على مجهودك الجبار و انا متابعك من تسع اشهر تقريبا واستفدت من فديوهات حضرتك جدا بس الصراحة حسيت أنه فكرت الفيديوهات الطويلة مرهق جدا سواء كان للاستماع المباشر أو التحميل والسماع لاحقا وتقبل مني كل الاحترام
الله ينور عليك ياهندسه اتمني من حضرتك شرح Javascript
ان شاء الله
يا استاذ عبد الرحمن جهودك العظيمه تشكر , بفضل الله ومن ثم فضلك يا استاذنا تعلمت HTML + CSS ( اسأل الله ان يوفقك ويحفظك ويعلي مراتبك بالدنيا والاخره ع هذا العلم الي تقدمه النه ) .. كل كلمات الشكر ما تكفيك والله 💛💛💛💛💛💛
ياليت لو قلت بفضل الله ثم بفضلك ، لأن جملة بفضل الله وبفضلك ، أنت كذا ساويت الفضل بينه وبين الله
@@Abdulrahman45000 تم التعديل
شكرا الك ع النصيحة 💛💛💛
@@Roy28967
العفو ، عادي النصيحة عمود الدين لازم نعلم بعض عشان لا نستمر في أخطاء لا نعرف أنها خطأ ❤️
اينعم الفديو طويل بس ممنع بجد😊🤍🤍
وغير كده كتر خيرك مجهود انك تطلع فيديو بالجوده دي وتحافظ علي متعه الشرح 🤍🤍
تسلم يا غالي ❤️❤️❤️
نتمنى تنزل كورس php عليه طلب كبير لو سمحت اشكرك على كل مجهوداتك❤
يا باشمهندس عاوزين كورس مصغر data analysis بالبايثون
ماشاء الله شرح ولا اروع متل العادة ❤️🩹
thanks
شكرا على جهودك من فضلك هل تستطيع عمل كورس react nextjs مع مشاريع متقدمة 😊
اتعلمتهم انصحك بphp انا شايف انها انسب في المشاريع الجديدة و الكبيرة
ياريت تشرح react محتاجها اوي بجد
اللهم صل على سيدنا محمد وعلى آله وصحبه وسلم
رمضان مبارك عليكم ❤
يا ريت ي هندسه تعمل كمان بوسترات وجي كويري❤
يا الله اتمنى منك استاذ جمال تعملنا فيديو اطول من هذا ولكن عن البايثون يارب استاذ عبد الرحمن بعرف الموضوع مو سهل ارجو الا تخيبنا
من الحاجات الاساسية اللي هشتغل عليها الفترة الجاية ان شاءالله
لساني عاجز عن الشكر ومهما شكرناك لم نكيفك حقك ولكن اريد ان ادع لك دعاء اسئال الله ان يجعله في ميزانك الهم كل حرف نطقها في سبيل تعلم المسلمين ان تزين له وزن جبل احد وتضعه في ميزان حسناته يارب @@AbdelrahmanGamal
@@AbdelrahmanGamal
كنت عايز رقمك عشان اتفق معاك على كورس باك اند
بدنا course PHP and PHYTON and SQL(back end ,data base) من فضلك
شكراا كتيير على شرحك جزااك الله خيرا
عندي مشكلة بخصوص خاصية text-shadow وكذا الخاصية اللي قبلها مش راضيين يشتغلو ؟؟
the bestttttttttttt
اللهم باااارك
شكرا اخي الكريم الله يحفضك . هل بأمكانك ان تعمل فيديو يشرح كيف تصنع المتجر إلكتروني وكيفية أضافت المنتجات على المتجر بدون استعمال الأكواد يعني مثل متاجر شوبيفاي تضيف المنتجات على المتجر فقط بالضغط على الازرار والعناصر هل بامكانك ان تشرح كيف يتم ذالك
شكرا جزيلا على المجهود الجبار المبدول الله يجعل هذا العمل في ميزان حسناتك
تسلم يا غالي ❤️❤️❤️❤️
شكرا شكرا على مجهودك الرائع .. افضل شخص حببني بال front end .. اتمنى اتمنى اتمنى منك ان تعمل كورس react بأقرب وقت ..
يا رب في ميزان حسناتك ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤
تسلم يا غالي و ان شاء الله حاضر ❤️❤️
بالتوفيق استاذ واصل و شكرا على المجهود
تسلم يا غالي
اول❤❤
يا ليت يوجد كرس مفصل نفس هذا للغة javascript
مااقول الا الله يزوجك💙
ياريت تعمل كمان HTML AND JAVASCRIPT ❤
ان شاء الله
بعد اذنك شرح عن icons