#46 |شرح كامل ل CSS Grid
HTML-код
- Опубликовано: 17 окт 2024
- يمكنك مذاكرة درس ال Grid و حل الاختبار من هنا من هنا |
nouvil.net/css...
-----------------------------------
للتواصل معي :
instagram |
/ abdelrahman_noufal
-----------------------------------
facebook |
/ abdelrahman.g.nofal
-----------------------------------
جروب الفيسبوك الخاص بنا |
/ 1810581845642171
-----------------------------------
خاصية CSS Grid هي إحدى الخصائص الأساسية في CSS التي تسمح للمطورين بإنشاء نظام شبكي لتنظيم وتوزيع العناصر في صفحة الويب. تسمح هذه الخاصية بإنشاء صفوف وأعمدة من العناصر المتناسقة والمنظمة في الصفحة، مما يوفر إمكانية التحكم الكامل في تنظيم العناصر بشكل مرن وسهل.
تعمل خاصية Grid عن طريق تحديد العناصر الرئيسية وتقسيمها إلى صفوف وأعمدة، وتحديد حجم وعرض وارتفاع هذه الصفوف والأعمدة، وتحديد مسافات الفراغات بين العناصر. يمكن استخدام هذهالخاصية لتصميم صفحات الويب المتعددة الأعمدة والمتنوعة في التصميم، مثل صفحات الألعاب، المتاجر الإلكترونية، ومواقع الأخبار والمجلات.
تتميز خاصية Grid بسهولة استخدامها ومرونتها في التصميم، حيث يمكن للمطورين تخصيص العناصر بشكل دقيق وتحديد تنسيقها بالشكل الذي يناسب التصميم المطلوب. وتوفر هذه الخاصية إمكانية إنشاء تصميمات متعددة ومختلفة بسهولة وتغييرها بسرعة دون الحاجة إلى تعديل العناصر بشكل فردي.
يمكن استخدام خاصية Grid بشكل واسعفي تصميم صفحات الويب الحديثة، وتعتبر إحدى الخصائص الأكثر استخداماً في تصميم الواجهات الأمامية. وتتيح هذه الخاصية إنشاء تصميمات مرنة وسهلة التعديل، مما يساعد على تحسين تجربة المستخدم وتحسين أداء الصفحة بشكل عام. يجب الانتباه إلى أن دعم الخاصية يختلف بين المتصفحات، ويجب التأكد من توافر الدعم قبل استخدامها في تصميم الصفحات.
متنساش بعد ما تخلص الدرس تدخل تختبر نفسك و تحل اختبار css grid عشان تآكد على فهمك
nouvil.net/css-play-ground/css-playground-grid/
تمام يا جميل#👨🏫👨🏫👨🏫👨🏫👨🏫👨🏫
ياعبد الرحمن الموقع اللي تبع كورس ال cs50 فيجوال استديو كود اتقفل اليوم ..
ممكن تعمل لنا حل ..
انا لازلت في الكورس اتعلم
@@almaklani_nasser هو الأستاذ مكملش الكورس على اليوتيوب , ممكن ألاقيها في مكان اخر ؟
عبد الرحمن انشر مشاريع نطبق فيه الي تعلمناه
ايوه ابحث على الكورس الاصلي مترجم
الله يرحم من ولدك و علمك ما علمتنا إياه ، جزاك الله عنا كل الخير 💓
انا مش عارف اشكرك ازاي حقيقي شرحك كلو بسيط ومهم 😇
بجد اسلوبك جميل وشرحك ممتاز ومنظم والمعلومة بتوصل بكل سهولة
بجد الله ينور عليك والله ❤
افضل واحد بيشرح برمجة سمعته في حياتي
ما شاء الله شرح ممتاز يا هندسة أول مرة أفهمه بالبساطة دي كنت أتعقدت منه من كورس اجنبي ومدفوع جزاك الله خيراً ❤
يا ريت كورس PHP و SQL قواعد البيانات ❤
اتفق معاك )))))))
ياريت فعلا
طبعا الشيء الوحيد لي ناقص في القناة هو ذا لكن الشرح رهيب نتمنى أن يعمل كورس phpو SQL و حتى Api
@@SimbaForestايش المقصود في api
@@abdullahabdullazyz هو الذي يقوم بربط الباك آند مع فرونت آند
نفس التعليق اللي قلته لحضرتك في كورس ال flex لما علقت على شرحك لل order وبرضو شرحك هنا لموضوع grid column وتوضيحك له من خلال ال gap عايز اقولك اني فضلت يوم كامل احاول افهم ازاي اقدر اعمل قيم سالبة هنا وايه معناها ودخلت عند ناس تقيلة اوي بس تهت زيادة وكالعادة لقيت عندك الحل
انت عملاق وعبقري بجد ياهندسة وواضح انك كنت بتتعب على نفسك وبتحاول تفهم كل تفصيلة
اتمنى بجد تستمر في شرح مختلف كورسات البرمجة لانك بجد سابق الكل ربنا يحفظك❤❤
أشكرك بشدة
شرحك أكثر من رائع الله يبارك لك
يا راجل شكرا ليك أنت الوحيد لي فهمت من عندو الgrid
شكرا لك من صميم وأعماق قلبي❤
انت بسم الله ماشاء الله عليك شرحك ممتاز جدا 🎉 نفع الله بك
انت احسن واحد شرح grid.
جزاك الله خيرا
بجد شرحك منظم ومعلومات كويس من موريتانيا الله ينور عليك
الدقيقة 51:47 هاي الي كنت ادور ع شرحها وشكرا بعد مشاهدة سلسة افلام ومسلسلات مشان افهم الغرد شرحك كان سوبر سيمل وممتاز
"اشكرك على المجهود الذي تبذوله فى نشر العلم " #اكاديمية نوفل
ما شاء الله عليك أنت بتعرف تشرح وتحط نفسك مكان المتلقي أو المتعلم منك أنصحك تكمل في الشرح ولعلها تدخلك الجنة لكن أخلص النية جزاك الله خيرا
merci exelent explication de grid te merite tous les remerciment bon courage monsieur Abdelrahman .
شكرا على الشرح ❤+هل معنى كده ان احنا ممكن نستغنى عن ال flex box ؟
الله يجزيك الخير من سورية
بارك الله فيك شرح مبسط واسلوب جميل شكرا الك
الله ينورك اخي عبد الرحمان المعلومة وصلت 💯 / 💯
الف الف شكر لك استاذنا عبد الرحمن جمال والله استفدت منك كثير
ربنا يباركلك ، شرح رائع مبسط ، شكرا 🤍🤍
والله افتقدناك يا هندسه ...انا بحبك في الله ..وربنا يجعل العمل ده في ميزان حسناتك ❤❤❤❤❤
متى ب تحدث bootstrap الاصدار الخامس 😊
شرح عظيم وشكرا على كورس css ولكن هل انتهى القرص لانك لم تذكر دروس CSS Selectors بعد ام هناك تكملة لهذه الدروس
:first-child
:last-child
:nth-child
...................
شرح ممتاز 👍👏جزاك الله خيرا
ما شاء الله شرح جميل وفهمت من غير اعادة للفيديو
هل من الممكن عدم التركيز على flrx box او والعمل فقط ب ال grid ام ان هناك بعض الامور سوف نحتاج فيها ال flex box
43:00
☝️ شغل عالي
شرح فوق الرائع
جزاك الله كل خير
بارك الله فيك
وبارك الله في اللي دلني عليك
عايز مشاريع JavaScrapt يكون تحتوي على API "اشكرك على المجهود الذي تبذوله فى نشر العلم " #اكاديمية نوفل 😎😎😎😎😚😚😚😚😚😙😙😗😗
أفضل من يشرح برمجه الويب
Thank you for the wonderful explanation.
اقسم بالله روعه يهندسه احبك ف الله والله 😍😍😍
والله انت احسن واحد بيشرح
ممتاز شكرا
أتمنى أن تعمل كورس php وsql جزاك الله خير على هاذ درس استفدت كثيرا
أفضل محتوى ببساطة
يا بشمهندس لو سمحت ممكن كورس c# انته احسن واحد بيشرح مش عارف افهم من حد غيرك
مُبدع 🎉
حقيقة افضل من شرح الgrid
الله يجزيك الخير يا أخي
يا استاذ عبد الرحمن هتكمل كورس Cs50امتي انا عايز ادخل علي حاجة جديدة وخايف انسي الي فات
هل grid تغنينا عن استخدام flex box ؟؟
بحبك في الله من سوريا
أل MINMAX بنستخدمها امتى وهل لازم مع ال responsive بنستخدمها
شرح ممتاز و مفصل و واضح 👍
بالتوفيق ان شاء الله
الله وفقك بحق محمد وال محمد
مشاء الله على شرحك🐱
ي مستر بعد ازنك دلوقت لو احنا عايزين نعمل الموقع بتاعنا ب فلوس و مثلا ب اشتراك شهري نعملها ازاي بلغه ال css وhtml؟؟؟
اخي متى موعد نزول كورس react?
شرح جميل وممتع
❤ والله محتو جميل جدا كمل ❤
الافضل ❤❤❤
هل من الممكن عدم معرفة ال flex-box طالما ال grid افضل ولا لازم نعرف ال الاثنيين
لا لازم تعرفها
احلا استاذ والله
شرحك رائع, للأسف نتعلم من اليوتيوب افضل من الجامعات والمدارس. ضيعوا سنين حياتناً.
معلش سؤال ي هندسه هو انا ازاي بعرف اخر تحديثات وتطورات اللغه الي شغال بيها ؟؟
ياعبد الرحمن الموقع اللي تبع كورس ال cs50 فيجوال استديو كود اتقفل اليوم ..
ممكن تعمل لنا حل ..
انا لازلت في الكورس اتعلم
والله اسطورة
ما شاء الله غليك تجنن
Thank you for this wonderful explantaion😍
جميل ماشاء الله
من فضلك اي نوع حواسيب بتستخدم اجب بسرعة من فضلك😊😅
MacBook pro
انا تعلمت بايثون بس مش عارف اذا لازم اني اتعلم tkinter معاه ولا لا علما اني بدي ادخل مجال الالعاب
ممكن تشرح ال sql رجاءاً
very good, continue
مشكور يا هندسة
Good 👍
طوالت الغيبه يا محترم
ما شاء الله شرح جميل💗
لوسمحت يا باشمهندس أنا بكتب الكود دة علشان أعمل أعمدة ومافيش أى نتيجة بتظهر
.container {
display: grid;
grid-template-columns: 50% 50%;
}
.box {
text-align: center;
background-color: aqua;
}
أرجو الرد من حضرتك ضرورى لأنى مش عارف أكمل الفيديو
ممكن لازم تحدد الطول و العرض للcontainer و ضيفله لون للخلفية عشان تعرف هل اذا هو اخذ مساحة او لا
شوف الفيديو كامل اول مرة و بعدها عيده و مع كل نقطة طبق
بارك الله فيك وجزاك الله خيرا
لكن اظنك نسيت وضع الدرس 45 . لانك انتقلت من 44 الى 46 مباشرة .ربما 45 هو flexbox
لا طبعا الدرس رقم 45 موجود اهو
ruclips.net/video/BjWex7Pz8iY/видео.html
انصحك تشوف الكورس في قائمة التشغيل الخاصة به لاني عامله هناك مرتب
قائمة التشغيل اهي
ruclips.net/p/PLknwEmKsW8Os7rKViMCL8x6irVJT7McSS
@@AbdelrahmanGamal
فعلا معك حق
بارك الله فيك اخي
بالتوفيق
اتمنى منك ترد علي القنوات الغربية يشرحو دورات كاملة ومشاريع كاملة كما تشرح في هذا الكورس ونحن بالوطن العربي لا نجد ذلك حتىى ان وجدت ستلاحظ انهم يشرحون بمستوى متقدم ولا يناسب المشاهد المبتدء مما يجعل الكثير يياس ويكرة البرمجة فنريد تنزل لنا جافا سكريبت في فيديو واحد وكمان تكمل لنا باقي مسار front-end بالمكتبات الخاصه به
كورس php يا بشمهندس😍❤️
اه انا اتمنى والله
ممكن المحاكي الي تخدم عليه 3>
thanks you😊😊😊😊😊😊
thaaaaaaaaank you ✌✌✌
كنت محتاج من حضرتك عايز تصميم لعبه زي لعبه thimbles هتبقي محتاج ايه يا ريت تفدني
عااش
اللهم صل وسلم علي سيدنا محمد
شكرااااااااااااااااااااااااا
يا اخى انا بحبك ف الله ، اتمنى نتكلم واقدر اتعلم منك وتعتبرنى مشروع ونتفق على مقابل مجزي وتكسب ايضا ثواب العلم
اذا هيك الflex ما عنده فايدة طالما ان الgrid تقريبا عنده خصائصه ما عدا الdirection
يا بشمهندس عرفنا ليه حضرتك مش عاوز تكمل كورس CS50 ؟؟!!!
اقسم بالله بسجله حاليا بس انا عندي شغل و عندي التزامات في حياتي مش فاضي ف حقيقي انا مش قصدي اني مكملش بمزاجي
اقسم بالله عاذرك يا غالي
بس انا كنت فاكر انك مش هتكملو
ربنا يعينك ويفقك ويوسع رزقك وحققلك اللي حضرتك تتمناه ♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️
لماذا كورس js لا يحتوي علي oop
اتممى ترجعلنا لكورس cs50 ارجوك😢
THEREis a porblem in the website please check it
السلام عليكم اخي اخي لدي كود برمجي اريد التعديل عليه هل تستطيع مساعدتي؟
بس لو تعاملنا مجموعة في الوتس وكل واحد يضيف رقمة الوتس وهذا مجرد اقتراح
عايزين ال sass يابشمهندس
ممكن تعمل كورس php
وربنا توب
❤❤❤❤❤
salaam
ليش وقفت تشرح cs50