مهارات سي اس اس متقدمة وموقع رائع للتدرب CSS

أقدم لكم اليوم موقع تحديات سي اس اس الرائع والذي تستطيع فيه اختبار مهاراتك في سي اس اس
الكود النهائي موجود في أول تعليق
فهرس الدرس:
00:05 تعريف بالموقع والتحديث
00:55 تفاصيل التحدي
02:25 بداية التحدي
04:00 خوارزمية التفكير
04:35 الطريقة الأولى
10:15 نهاية الحل الأول والارسال
10:30 اختزال الكود
12:40 الطريقة الثانية للحل
17:00 اختزال الكود
17:35 نهاية الحل الثاني والارسال
18.20 رأيي بالتحدي والموقع
18:40 خدع و حيل لاختزال الكود
20:20 بماذا يفيدني هذا التحدي
@CSSBattle #CSSBattle
------------------------------------------------------------------------
اشترك بالقناة لمتابعة الدروس
/ nourhomsi
اشترك في مجموعة المصمم الأول لمناقشة الدروس:
groups/1designer
لمتابعة الحساب:
nourhomsi.com
drnourhomsi
nourhomsi1
drnourhomsi

[@NourHomsi]

body{background:#f3ac3c;display:grid;place-items:center}p{margin-left:-5;width:30;height:30;transform:rotate(45deg);box-shadow:0+0+0+35px#f3ac3c,0+0+0+65px#998235;display:grid}p:after{content:'';width:100;height:100;border:solid+30px#f3ac3c;transform:translate(-130px,-130px)}s{width:30;height:30;background:#1a4341;z-index:99;position:fixed}

[@fahimaoudia9445]

استاذ نور شكرا لك مافي حد ستفدتو منو مثلك بس لاحضت انك ما حكيت على كيفية عمل لوغن بطريقة بتع Google signe in او Facebook signe يعني مش بطريقة التسجيل فقاعدة البيانات

[@tsneemabujaber6828]

يعطيك العافيه استاذ ارجو الرد هل ضروري صور المجلة يلي تكون موجودة فيها تكون مدفوعة وتكون ذات حقوق الملكية ؟! مابيزبط يعني مجانية

[@NourHomsi]

@@fekerine ضع الكود في تعليق منفصل لو سمحت

[@وليدبنسعدي]

خلصتها كلها 😁😁

[@ابوعمرابوعمر-ي4خ8ع]

السلام عليكم ورحمه الله وبركاته يا اخي انت ينور عبقري وبصراحة نحنى بسوريا مابنفهم غير عليك صحيح في ناس بتشرح من مصر ومن الجزائر ومبدعين بس ياخي مابنفهم غير عليك بس

[@NourHomsi]

كل الناس خير وبركة عزيزي والأمر مشترك بين الطالب والمدرس، هناك كيمياء معينة يجب أن تتبادل بينهما

[@Jrk_Jrk]

مشكور أستاذ نور على عيني❤💕

[@samtic6214]

شخصيا استفدت كثيرا .. رائع .. بارك الله فيك و جعل ما تقدمه في ميزان حسناتك يا رب

[@joudisoft]

شكراً لك استاذنا الفاضل , دائما مميز بمواضيعك

[@NourHomsi]

اغلى تخياتي

[@AntiJahl]

لك انت مميز حقا

[@maaounhajnajeeb957]

يعطيك العافية

[@otma7781]

استاذ نور ياريت تشرحنا شو الفرق بين مكاتب Bootstrap واطار Tailwind cssياريت وشكرا

[@mr_human4721]

عبقري يا اخي

[@SatcomIPTV]

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

[@NourHomsi]

اغلى تحياتي

[@aboubakreakride6310]

منور اخي جزاك الله خيرا ❤️❤️🌹

[@aboal_rem2251]

فيديو اكثر من رائع بارك الله فيك

[@bac1992hir]

انت مبدع ياااا أستاذ .

[@NourHomsi]

الف شكر

[@mehdialjebaay24]

روعة الفيديو والموقع كمان روعة, يا ريت لو تتكرم وتعمل فيديوهات هيك عن مواقع الجافا سكربت حتى نعرفها لأن انا تحمست هههه الله يسعدك يا رب وشكراً عالمجهود

[@nizaelhouari5444]

شرح مفصل شكرا لك 👍👍👍

[@NourHomsi]

اطيب تحياتي

[@صهيبعاطف-ك7ف]

أنت رجل محترم ومتواضع

[@mazenalfar5953]

رائع جدا

[@حيدرنوريطالب]

مشكور استاذ معلومات ثمينة

[@NourHomsi]

أغلى تحياتي

[@kerkouriabdelali8566]

ناس عيون العصافير باتنة 🇩🇿😁

[@HamzaBoumaiza]

اشتقنا اليك استاذنا

[@NourHomsi]

أغلى تحياتي، مشاغل الحياة والله

[@عمرالرغبانابوحفص]

ماشاء الله عليك

[@mohamedmehdi944]

حلقة ممتعة

[@cumaarabi6529]

من كتر ما عجبني الفيديو عم اطلع اذا في كمالة اله 😂💔

[@NourHomsi]

ممكن نعمل فيديو تاني على نفس الشاكلة

[@kouitakouita9392]

ماشاءالله عليك

[@NourHomsi]

شكرا لك

[@KaitoKR-er4ii]

جميل جداً كان بالامكان استعمال div واحد فقط و عمل الشكل بواسطة pseudo elements

[@NourHomsi]

بإمكانك تعمل الكود الخاص فيك وترسله لنا بالتأكيد لنستفيد جميعا

[@moamenmoamen2240]

لو سمحت يا دكتور نور هل يمكننى رؤيه اكواد الاشخاص الى قبلي على اى بروجيكت

[@m0ohannad]

شكراً على الحلقة الحماسية 🌹

[@NourHomsi]

شاركنا التحدي

[@houdasidahmed1626]

طوال لفيديو وقلبي يدق ههههههههه اريد المشاركة انا مبتدأة بس حماس . شكرا نور بتابعك من فرنسا وبلدي الجزائر

[@NourHomsi]

يلا خلينا نشوف

[@رُضاب-و2ر]

انت رااااائع

[@solvetheproblem37]

الحمد لله انا ب الطريقة الأولا حصلة على 391

[@zaynazaynona6987]

شكرا لك على الدروس الرائعة التي تقدمها ودمت متألق دوما ...فقط لدي مشكل واحد لما ارفع الصور من css كخلفية وبعد تكبيرها تكون غير جيدة وغير دقيقة في مظهرها ولم أجد حل لذلك..ارجو منكم مساعدتي

[@fouadmamdouh7789]

مبدع كالعادة يا دكتور نور ❤️❤️

[@NourHomsi]

ألف شكر فؤاد

[@simooelgharbi4902]

إعمل لنا فديو عن تمارين بايثون

[@NourHomsi]

فكرة ممتازة

[@sololearn2138]

Wow !!!

[@almutasimalmutasim7615]

الله يرزقك ويوفقك يارب💙

[@AbbesEssa]

يريت تعلمنا على جانغوا ي معلم

[@fahimaoudia9445]

استاذ نور شكرا لك مافي حد ستفدتو منو مثلك بس لاحضت انك ما حكيت على كيفية عمل لوغن بطريقة بتع Google signe in او Facebook signe يعني مش بطريقة التسجيل فقاعدة البيانات ممكن فيديو كيف؟؟ مالقيت شرح عربي

[@aminemino8053]

اخي نور ممكن تعلمنا عن انميشن css عم ابحث ولم اجد شرح

[@NourHomsi]

kzbin.info/www/bejne/j5-voGmZpKuUb68

[@aminemino8053]

@@NourHomsi عم أتكلم عن website inspiration كل فديوهاتك شاهدتها واسفتد الكثيييير

[@NourHomsi]

onepagelove.com

[@mohammedsaadeh7816]

يوجد شخص اسم قناتو online tutorial شخص فنان ب css وبقدم شغلات حلوة

[@fahimaoudia9445]

@@NourHomsi استاذ نور شكرا لك مافي حد ستفدتو منو مثلك بس لاحضت انك ما حكيت على كيفية عمل لوغن بطريقة بتع Google signe in او Facebook signe يعني مش بطريقة التسجيل فقاعدة البيانات

[@khalidsabih8947]

thank you so mush nour ! can you please add some courses about ExpressJS and Laravel

[@مهندسبرمجيات-م9د]

راااائع😍😍

[@NourHomsi]

اطيب تحياتي

[@tahaaloklaa3934]

رائع الموقع

[@NourHomsi]

و ممتع

[@im_the_raymond]

سو تحدي css مع شخص مثل تحديات الاجانب 🦦

[@NourHomsi]

اقترح علي شخص، واقترح عليه كمان. اذا وافق بالتأكيد انا مستعد

[@الموحد-ك7ت]

🤲 اللهم صل وسلم وبارك على سيدنا ونبينا وقائدنا وحبيبنا وشفيعنا وسيد الخلق والأنام محمد وعلى آله وصحبه وسلم أجمعين صلوات في الأولين وفي الآخرين وفي الملأ الأعلى إلى يوم الدين وصلوات ترضيك وترضيه وترضا بها عنا يا كريم وصلوات بعدد خلقك وزنة عرشك العظيم ومداد كلماتك ورضا نفسك وبعدد ما كان وبعدد ما يكون وبعدد الحركات والسكون وصلوات لا ينتهي عددها ويمتد أمدها إلى أبد الآبدين وصلوات ملأ السماوات السبع وملأ الأراضين السبع وملأ ما بينهن وملأ ما فيهن وملأ ما شاء من شيء بعد وصلوات بعدد ما ذكره الذاكرون وصلوات بعدد ما غفل عن ذكره الغافلون وصلوات تنلنا بها شفاعته وتدخلنا بها جنتك وصلوات تنلنا بها كل الخيرات والبركات وفضائل رحماك وصلوات تحسن بها الاخلاق وتيسر بها الأرزاق وتدفع بها المشاق وتملأ منها الآفاق وصلوات دائمة من يوم خلقت الدنيا إلى يوم التلاق وأسترنا اللهم بين يديك يا عزيز يا خلاق وصلوات ما علمناها وما لم نعلمها وما سألناها وما لم نسألها برحمتك ومنك وجودك وعفوك وكرمك وغفرانك يا الله يا رحيم يا كريم 🌺💐🤲 آمين اللهم آمين 🤲💐🌺

[@ابنالأكابر-ح1ر]

نزلت 264 chars💪😍

[@rnz6626]

ممكن تشارك الكود من بعد اذنك لنستفيد

[@روائعومدهشات]

يعطيك الف عافية بس ممكن تبعتلي رابط للصفحة متصح كروم للغة البرمجة html

[@7oda_alnakeeb]

شيل الديف خالص واستخدم الbody ك div

[@ibrahimboudiaf6305]

ليش ماتبدا بالمربع الاسود ثم بوردر اخضر ثم بوردر البيج منزاح لفوق ثم الكل تعملو روتيت 45 درجة

[@fatemaali4620]

عملت شوية تعديلات على تطبيقك نفسه 329 Character body{background:#f3ac3c;display:grid;place-items:center}p{margin-left:-5;box-shadow:0+0+0+35px#f3ac3c,0+0+0+65px#998235;transform:rotate(45deg);width:30;height:30;background:#1a4341}p:after,p:before{position:absolute;content:'';background:#f3ac3c;width:30;height:30}p:before{left:-66;width:32}p:after{top:-66;height:32}

[@fatemaali4620]

شوية تعديلات: 309 Character body{background:#f3ac3c}p{position:fixed;top:119;left:183;box-shadow:0+0+0+35px#f3ac3c,0+0+0+65px#998235;transform:rotate(45deg);width:30;height:30;background:#1a4341}p:after,p:before{position:fixed;content:'';background:#F3AC3C;width:66;height:30;left:-66}p:after{width:30;height:66;left:0;top:-66}

[@luayabdelbaqi7566]

حلوي ، وكمان فينا نعملها بالاكسل

[@NourHomsi]

وبالرسام

[@ibranassiri1055]

كيفية نستطيع البحث عبر الانترنت ,????????????????????????????????????????????????????????????????????????????????????????????????

[@luayabdelbaqi7566]

الله يعطيك العافية ، هل نستطيع بناء المتجر على ووردبريس وتجهيزه قبل ما نشتري الاضافة؟ يعني مشان نتدرب، انا عملت هيك بس في مشاكل صارت ومابعرف اذا بسبب هالامر، مثلا شهادة https ما كانت تزبط وبس تزبط الموقع كلو بروح، كمان مش عبقدر استورد من aliexpress بالاداة fulfillment والخطأ اللي بيطلع انو بحاجة دومين، مع انو حطيت السيكرت كي. مش معقول نوقف هون !

[@Anime-yw8pv]

ليش ما عملت var حتخصر كتابة كثير اكواد

[@كرتوناطفال-ك9س]

كيف ادخل للموقع

[@Im-mustafa-saeed]

الناس اللي بتوصل لأرقام جدا قليلة في هذا الموقع غالبا للأسف يكونو مستعملين svg علشان كذا ما تقدر توصل للسكور تبعهم بcss عادي

[@gamejs8402]

ألموقع لا يعمل

[@NourHomsi]

ربما في سوريا محجوب

[@danielsalim5643]

فين الصعوبه في cssاشرح لي انا قاعد ادرس Ai حاليا هناك الصعوبه فعلا

[@خالد-ج4ه8ظ]

مرة قوي انت ما شاء الله😀

[@NourHomsi]

الصعوبة هي في الصعب فقط، فاذا وجدت شيئاً ما صعب فهو صعب، ما عدا ذلك فهو ليس صعب

[@NourHomsi]

@@خالد-ج4ه8ظ تحياتي للسعودية

[@danielsalim5643]

@@NourHomsi الله عليك ♥️

[@danielsalim5643]

@@NourHomsi ♥️♥️

[@munirdabbik8755]

239 characters /99.2% match مليت ههههه تعديل 213 characters/99.8% match

[@NourHomsi]

شاركنا الكود النهائي لو سمحت

[@munirdabbik8755]

@@NourHomsi شاركني رأيك

[@NourHomsi]

للأسف ما عم يظهر الكود بسبب سياسة يوتيوب، لو ممكن تنشره على كودبن: codepen.io

[@NourHomsi]

اعجبتني طريقة تفكيرك، وخاصة باستخدام المربع بدل رسمه ولكن للأسف مهما حاولت ما عم تطلع نتيجة التطابق 100% وبالتالي ما عم تنحسب

[@munirdabbik8755]

@@NourHomsi صحيح المشكلة بالborder على كل حال يبدو جميعهم يستخدمو path ، انا اقدرت اختصر كمان دمجت ال style border بأمر واحد حتى صارت 196 يمكن بس ما جبت التطابق 100%

[@bulidempty]

عاشت إسرائيل

[@ibranassiri1055]

كيفية نستطيع البحث عبر الانترنت ,????????????????????????????????????????????????????????????????????????????????????????????????

[@ibranassiri1055]

كيفية نستطيع البحث عبر الانترنت ,????????????????????????????????????????????????????????????????????????????????????????????????

[@ibranassiri1055]

كيفية نستطيع البحث عبر الانترنت ,????????????????????????????????????????????????????????????????????????????????????????????????

[@ibranassiri1055]

كيفية نستطيع البحث عبر الانترنت ,????????????????????????????????????????????????????????????????????????????????????????????????

[@ibranassiri1055]

كيفية نستطيع البحث عبر الانترنت ,????????????????????????????????????????????????????????????????????????????????????????????????

[@ibranassiri1055]

كيفية نستطيع البحث عبر الانترنت ,????????????????????????????????????????????????????????????????????????????????????????????????