#46 |شرح كامل ل CSS Grid
Рет қаралды 60,776
Жыл бұрынيمكنك مذاكرة درس ال Grid و حل الاختبار من هنا من هنا |
nouvil.net/css-play-ground/cs...
-----------------------------------
للتواصل معي :
instagram |
/ abdelrahman_noufal
-----------------------------------
facebook |
/ abdelrahman.g.nofal
-----------------------------------
جروب الفيسبوك الخاص بنا |
/ 1810581845642171
-----------------------------------
خاصية CSS Grid هي إحدى الخصائص الأساسية في CSS التي تسمح للمطورين بإنشاء نظام شبكي لتنظيم وتوزيع العناصر في صفحة الويب. تسمح هذه الخاصية بإنشاء صفوف وأعمدة من العناصر المتناسقة والمنظمة في الصفحة، مما يوفر إمكانية التحكم الكامل في تنظيم العناصر بشكل مرن وسهل.
تعمل خاصية Grid عن طريق تحديد العناصر الرئيسية وتقسيمها إلى صفوف وأعمدة، وتحديد حجم وعرض وارتفاع هذه الصفوف والأعمدة، وتحديد مسافات الفراغات بين العناصر. يمكن استخدام هذهالخاصية لتصميم صفحات الويب المتعددة الأعمدة والمتنوعة في التصميم، مثل صفحات الألعاب، المتاجر الإلكترونية، ومواقع الأخبار والمجلات.
تتميز خاصية Grid بسهولة استخدامها ومرونتها في التصميم، حيث يمكن للمطورين تخصيص العناصر بشكل دقيق وتحديد تنسيقها بالشكل الذي يناسب التصميم المطلوب. وتوفر هذه الخاصية إمكانية إنشاء تصميمات متعددة ومختلفة بسهولة وتغييرها بسرعة دون الحاجة إلى تعديل العناصر بشكل فردي.
يمكن استخدام خاصية Grid بشكل واسعفي تصميم صفحات الويب الحديثة، وتعتبر إحدى الخصائص الأكثر استخداماً في تصميم الواجهات الأمامية. وتتيح هذه الخاصية إنشاء تصميمات مرنة وسهلة التعديل، مما يساعد على تحسين تجربة المستخدم وتحسين أداء الصفحة بشكل عام. يجب الانتباه إلى أن دعم الخاصية يختلف بين المتصفحات، ويجب التأكد من توافر الدعم قبل استخدامها في تصميم الصفحات.
@AbdelrahmanGamal Жыл бұрын
متنساش بعد ما تخلص الدرس تدخل تختبر نفسك و تحل اختبار css grid عشان تآكد على فهمك nouvil.net/css-play-ground/css-playground-grid/
@osamaelgendy8893 Жыл бұрын
تمام يا جميل#👨🏫👨🏫👨🏫👨🏫👨🏫👨🏫
@mhnds6136 Жыл бұрын
ياعبد الرحمن الموقع اللي تبع كورس ال cs50 فيجوال استديو كود اتقفل اليوم .. ممكن تعمل لنا حل .. انا لازلت في الكورس اتعلم
@MouadDrouiche Жыл бұрын
@@mhnds6136 هو الأستاذ مكملش الكورس على اليوتيوب , ممكن ألاقيها في مكان اخر ؟
@tik429 Жыл бұрын
عبد الرحمن انشر مشاريع نطبق فيه الي تعلمناه
@mhnds6136 Жыл бұрын
ايوه ابحث على الكورس الاصلي مترجم
@Nicola_Tesla452 Жыл бұрын
يا ريت كورس PHP و SQL قواعد البيانات ❤
@ksbordz6351 10 ай бұрын
اتفق معاك )))))))
@hadoolxxx 10 ай бұрын
ياريت فعلا
@SimbaForest 4 ай бұрын
طبعا الشيء الوحيد لي ناقص في القناة هو ذا لكن الشرح رهيب نتمنى أن يعمل كورس phpو SQL و حتى Api
@abdullahabdullazyz 2 ай бұрын
@@SimbaForestايش المقصود في api
@SimbaForest 2 ай бұрын
@@abdullahabdullazyz هو الذي يقوم بربط الباك آند مع فرونت آند
@hamzazakar5006 7 ай бұрын
الله يرحم من ولدك و علمك ما علمتنا إياه ، جزاك الله عنا كل الخير 💓
@Mariamali-tg1ep Жыл бұрын
افضل واحد بيشرح برمجة سمعته في حياتي
@DodokhKheriba Ай бұрын
انت احسن واحد شرح grid. جزاك الله خيرا
@ahmedanwar3899 Жыл бұрын
بجد اسلوبك جميل وشرحك ممتاز ومنظم والمعلومة بتوصل بكل سهولة بجد الله ينور عليك والله ❤
@mostafadewedar3864 11 ай бұрын
ما شاء الله شرح ممتاز يا هندسة أول مرة أفهمه بالبساطة دي كنت أتعقدت منه من كورس اجنبي ومدفوع جزاك الله خيراً ❤
@ammarbouzenka1577 Жыл бұрын
أفضل محتوى ببساطة
@animegaza6284 Жыл бұрын
الافضل ❤❤❤
@user-lm1fc6ky9v 9 ай бұрын
الف الف شكر لك استاذنا عبد الرحمن جمال والله استفدت منك كثير
@MostafaAtef-ko1oy Жыл бұрын
اقسم بالله روعه يهندسه احبك ف الله والله 😍😍😍
@peacefullworld5858 Жыл бұрын
Thank you for the wonderful explanation.
@streettalent7811 5 ай бұрын
شكرا لك من صميم وأعماق قلبي❤
@Shopzom 4 ай бұрын
شرح ممتاز 👍👏جزاك الله خيرا
@aamergebreel Жыл бұрын
انت بسم الله ماشاء الله عليك شرحك ممتاز جدا 🎉 نفع الله بك
@hodasalah1663 Ай бұрын
شرح فوق الرائع جزاك الله كل خير
@supergeniuspro 9 ай бұрын
ما شاء الله شرح جميل وفهمت من غير اعادة للفيديو
@paryshary3552 Жыл бұрын
والله انت احسن واحد بيشرح
@laithnobani8291 12 күн бұрын
بارك الله فيك شرح مبسط واسلوب جميل شكرا الك
@wassim2863 8 ай бұрын
يا راجل شكرا ليك أنت الوحيد لي فهمت من عندو الgrid
@MonderMosbah-gr5ss 9 ай бұрын
بارك الله فيك وبارك الله في اللي دلني عليك
@RMj-qi6lp Жыл бұрын
❤ والله محتو جميل جدا كمل ❤
@user-jq8mv4cv7m 8 ай бұрын
الله ينورك اخي عبد الرحمان المعلومة وصلت 💯 / 💯
@osamaelgendy8893 Жыл бұрын
عايز مشاريع JavaScrapt يكون تحتوي على API "اشكرك على المجهود الذي تبذوله فى نشر العلم " #اكاديمية نوفل 😎😎😎😎😚😚😚😚😚😙😙😗😗
@rawdaomar1821 8 ай бұрын
"اشكرك على المجهود الذي تبذوله فى نشر العلم " #اكاديمية نوفل
@medabdarrahemanemoneya540 10 ай бұрын
بجد شرحك منظم ومعلومات كويس من موريتانيا الله ينور عليك
@simpleman1496 Жыл бұрын
مشكور يا هندسة
@YousefAl-Nashar 8 ай бұрын
الله يجزيك الخير يا أخي
@AdamFekairi 3 ай бұрын
مشاء الله على شرحك🐱
@cgt1066 5 ай бұрын
شرح ممتاز و مفصل و واضح 👍
@YCRTOR 4 ай бұрын
merci exelent explication de grid te merite tous les remerciment bon courage monsieur Abdelrahman .
@mahmoudamier 7 ай бұрын
ما شاء الله عليك أنت بتعرف تشرح وتحط نفسك مكان المتلقي أو المتعلم منك أنصحك تكمل في الشرح ولعلها تدخلك الجنة لكن أخلص النية جزاك الله خيرا
@abdullahibrahim6649 11 ай бұрын
شرح جميل وممتع
@odaimajed3708 Жыл бұрын
أفضل من يشرح برمجه الويب
@SCr_20 5 ай бұрын
والله اسطورة
@chakabani123taftouf7 6 ай бұрын
very good, continue
@PearlFlux 3 ай бұрын
الدقيقة 51:47 هاي الي كنت ادور ع شرحها وشكرا بعد مشاهدة سلسة افلام ومسلسلات مشان افهم الغرد شرحك كان سوبر سيمل وممتاز
@MOZAZOKA Жыл бұрын
والله افتقدناك يا هندسه ...انا بحبك في الله ..وربنا يجعل العمل ده في ميزان حسناتك ❤❤❤❤❤
@sayedzakaria1906 6 ай бұрын
احلا استاذ والله
@user-xk5op3nu8l 9 ай бұрын
جميل ماشاء الله
@user-mr5de3yq8l 3 ай бұрын
أتمنى أن تعمل كورس php وsql جزاك الله خير على هاذ درس استفدت كثيرا
@mongihaker 7 ай бұрын
حقيقة افضل من شرح الgrid
@user-pn8ku2bd9q Жыл бұрын
متى ب تحدث bootstrap الاصدار الخامس 😊
@user-wo1qw7ub8z 10 ай бұрын
الله وفقك بحق محمد وال محمد
@aepraepr2204 2 ай бұрын
thaaaaaaaaank you ✌✌✌
@omaralmohamad4643 6 ай бұрын
بحبك في الله من سوريا
@OmarAhmed-xn6gl 27 күн бұрын
شكرا على الشرح ❤+هل معنى كده ان احنا ممكن نستغنى عن ال flex box ؟
@heshamrafat681 Жыл бұрын
يا بشمهندس لو سمحت ممكن كورس c# انته احسن واحد بيشرح مش عارف افهم من حد غيرك
@snowden-IT Жыл бұрын
طوالت الغيبه يا محترم
@cr7cris-j2y Күн бұрын
thanks you😊😊😊😊😊😊
@ezoomanaseer 8 ай бұрын
ما شاء الله غليك تجنن
@user-py4ym3hf6o Жыл бұрын
نفس التعليق اللي قلته لحضرتك في كورس ال flex لما علقت على شرحك لل order وبرضو شرحك هنا لموضوع grid column وتوضيحك له من خلال ال gap عايز اقولك اني فضلت يوم كامل احاول افهم ازاي اقدر اعمل قيم سالبة هنا وايه معناها ودخلت عند ناس تقيلة اوي بس تهت زيادة وكالعادة لقيت عندك الحل انت عملاق وعبقري بجد ياهندسة وواضح انك كنت بتتعب على نفسك وبتحاول تفهم كل تفصيلة اتمنى بجد تستمر في شرح مختلف كورسات البرمجة لانك بجد سابق الكل ربنا يحفظك❤❤
@user-kb4wh2er2w Жыл бұрын
انا تعلمت بايثون بس مش عارف اذا لازم اني اتعلم tkinter معاه ولا لا علما اني بدي ادخل مجال الالعاب
@ProgrammingProgramming Жыл бұрын
يا استاذ عبد الرحمن هتكمل كورس Cs50امتي انا عايز ادخل علي حاجة جديدة وخايف انسي الي فات
@coacomarhorany 3 ай бұрын
أل MINMAX بنستخدمها امتى وهل لازم مع ال responsive بنستخدمها
@AhmedMohamed-mh1bj Жыл бұрын
معلش سؤال ي هندسه هو انا ازاي بعرف اخر تحديثات وتطورات اللغه الي شغال بيها ؟؟
@AhmedMahmoudMMD 5 ай бұрын
اللهم صل وسلم علي سيدنا محمد
@mohmmadraji8049 10 ай бұрын
هل grid تغنينا عن استخدام flex box ؟؟
@hajarjumaa12 5 ай бұрын
ممكن تشرح ال sql رجاءاً
@sayedzakaria1906 6 ай бұрын
❤❤❤❤❤
@VERSCODE Жыл бұрын
كورس php يا بشمهندس😍❤️
@gamingpro-qj4ni Жыл бұрын
اه انا اتمنى والله
@a3ygames172 Жыл бұрын
ي مستر بعد ازنك دلوقت لو احنا عايزين نعمل الموقع بتاعنا ب فلوس و مثلا ب اشتراك شهري نعملها ازاي بلغه ال css وhtml؟؟؟
@mhnds6136 Жыл бұрын
ياعبد الرحمن الموقع اللي تبع كورس ال cs50 فيجوال استديو كود اتقفل اليوم .. ممكن تعمل لنا حل .. انا لازلت في الكورس اتعلم
@youssefahmed-hf4fm Жыл бұрын
شرح عظيم وشكرا على كورس css ولكن هل انتهى القرص لانك لم تذكر دروس CSS Selectors بعد ام هناك تكملة لهذه الدروس :first-child :last-child :nth-child ...................
@zbtamd258 Жыл бұрын
اخي متى موعد نزول كورس react?
@melek_ayadi8166 Жыл бұрын
ممكن المحاكي الي تخدم عليه 3>
@user-lq5ui1bn9o 7 ай бұрын
✨✨✨
@user-ee1ls6bl7j 4 ай бұрын
اتمنى منك ترد علي القنوات الغربية يشرحو دورات كاملة ومشاريع كاملة كما تشرح في هذا الكورس ونحن بالوطن العربي لا نجد ذلك حتىى ان وجدت ستلاحظ انهم يشرحون بمستوى متقدم ولا يناسب المشاهد المبتدء مما يجعل الكثير يياس ويكرة البرمجة فنريد تنزل لنا جافا سكريبت في فيديو واحد وكمان تكمل لنا باقي مسار front-end بالمكتبات الخاصه به
@webb-developer 6 ай бұрын
✅
@abdelrahmanelmahdi9477 11 ай бұрын
هل من الممكن عدم معرفة ال flex-box طالما ال grid افضل ولا لازم نعرف ال الاثنيين
@mariemmohamed-xx3ns 9 ай бұрын
لا لازم تعرفها
@ahmedTECH925 Жыл бұрын
لماذا كورس js لا يحتوي علي oop
@AhmedAboelez Жыл бұрын
يا اخى انا بحبك ف الله ، اتمنى نتكلم واقدر اتعلم منك وتعتبرنى مشروع ونتفق على مقابل مجزي وتكسب ايضا ثواب العلم
@faresblack4374 Жыл бұрын
بارك الله فيك وجزاك الله خيرا لكن اظنك نسيت وضع الدرس 45 . لانك انتقلت من 44 الى 46 مباشرة .ربما 45 هو flexbox
@AbdelrahmanGamal Жыл бұрын
لا طبعا الدرس رقم 45 موجود اهو kzfaq.info/get/bejne/eNCHmNtoteCcmY0.html انصحك تشوف الكورس في قائمة التشغيل الخاصة به لاني عامله هناك مرتب قائمة التشغيل اهي kzfaq.info/sun/PLknwEmKsW8Os7rKViMCL8x6irVJT7McSS
@faresblack4374 Жыл бұрын
@@AbdelrahmanGamal فعلا معك حق بارك الله فيك اخي بالتوفيق
@gamingpro-qj4ni Жыл бұрын
❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤
@gaminggemo3403 Жыл бұрын
ممكن تعمل كورس php
@user-nj5tr2jk1p Жыл бұрын
اتممى ترجعلنا لكورس cs50 ارجوك😢
@paryshary3552 Жыл бұрын
كنت محتاج من حضرتك عايز تصميم لعبه زي لعبه thimbles هتبقي محتاج ايه يا ريت تفدني
@johnatef1918 8 ай бұрын
32:54
@mrraf6769 Жыл бұрын
لو حد يعرف شخص عندو شرح للbootstrap الرجاء يقول لي لان ما عم اعرف اشتغل فيه
@hagargamal7696 Жыл бұрын
عايزين ال sass يابشمهندس
@tahazed Жыл бұрын
اذا هيك الflex ما عنده فايدة طالما ان الgrid تقريبا عنده خصائصه ما عدا الdirection
@TG.R Жыл бұрын
السلام عليكم اخي اخي لدي كود برمجي اريد التعديل عليه هل تستطيع مساعدتي؟
@SocieteNAJA Жыл бұрын
من فضلك اي نوع حواسيب بتستخدم اجب بسرعة من فضلك😊😅
@naneeszts9622 Жыл бұрын
MacBook pro
@seahmadnailal-darabi8985 9 ай бұрын
PHP please
@user-lm1fc6ky9v 9 ай бұрын
بس لو تعاملنا مجموعة في الوتس وكل واحد يضيف رقمة الوتس وهذا مجرد اقتراح
@kralammar9421 Жыл бұрын
ليش وقفت تشرح cs50
@user-fr9ft3ho5l 14 күн бұрын
Php et sql pleaaaaaase 😢😢😢😢😢
@user-so1hr4pr2c Жыл бұрын
يا بشمهندس عرفنا ليه حضرتك مش عاوز تكمل كورس CS50 ؟؟!!!
@AbdelrahmanGamal Жыл бұрын
اقسم بالله بسجله حاليا بس انا عندي شغل و عندي التزامات في حياتي مش فاضي ف حقيقي انا مش قصدي اني مكملش بمزاجي
@user-so1hr4pr2c Жыл бұрын
اقسم بالله عاذرك يا غالي بس انا كنت فاكر انك مش هتكملو ربنا يعينك ويفقك ويوسع رزقك وحققلك اللي حضرتك تتمناه ♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️
@ahmedmourad2521 Жыл бұрын
لوسمحت يا باشمهندس أنا بكتب الكود دة علشان أعمل أعمدة ومافيش أى نتيجة بتظهر .container { display: grid; grid-template-columns: 50% 50%; } .box { text-align: center; background-color: aqua; } أرجو الرد من حضرتك ضرورى لأنى مش عارف أكمل الفيديو
@tahazed Жыл бұрын
ممكن لازم تحدد الطول و العرض للcontainer و ضيفله لون للخلفية عشان تعرف هل اذا هو اخذ مساحة او لا
@EasternBoss 11 ай бұрын
شوف الفيديو كامل اول مرة و بعدها عيده و مع كل نقطة طبق
@paryshary3552 Жыл бұрын
ومحتاج اشترك في الكورسات ممكن رقم ابعتلك عليه الاشتراك
@bebo7696 Жыл бұрын
كورس cs50 مش هتكملو ولا اي
@AbdelrahmanGamal Жыл бұрын
في فيديوهات هتنزل النهاردة او بكرة في كورس cs50 انا بكلمك و انا بحضر عشان اسجل والله حاليًا
@bebo7696 Жыл бұрын
@@AbdelrahmanGamal ربنا معاك ولله ويجعلو في ميزان حسانتك يا رب 🤲🏻
@magicgames7281 10 ай бұрын
هذه الطريقة مجرد تعلمك كيف تقسم المحتوى لا تكتب
@orio101_yt9 5 ай бұрын
اول درس ما افهمه كويس
@user-ee1ls6bl7j 4 ай бұрын
كرر الدرس كثيرا واقرا عن الخاصية مع الوقت تستوعبها وتفهمها انا مثلا في flex-box ما كنت فاهمه كويس ومع الوقت ترسخ وبقيت قادر انفذ الافكار اللى في دماغي بيه لاني لم استسلم وكررت المعلومات اكثر من مرة وشفت مصادر اخرى وياريت تجيب كتاب تطلع عليه كل فترة
@orio101_yt9 4 ай бұрын
@@user-ee1ls6bl7j شكرا على معلومه حين فاهمها كويس و دخلت على جافا سكريبت وقربت اخلصه و لله حمد
@user-ee1ls6bl7j 4 ай бұрын
ياالله ما شاء الله حلو كثير @@orio101_yt9
@mouhaned851 4 ай бұрын
Thank you for this wonderful explantaion😍
@mohamedfarhoud7802 Жыл бұрын
رقمك لو سمحت
@rawdaomar1821 8 ай бұрын
"اشكرك على المجهود الذي تبذوله فى نشر العلم " #اكاديمية نوفل
@rawdaomar1821 8 ай бұрын
"اشكرك على المجهود الذي تبذوله فى نشر العلم " #اكاديمية نوفل
@rawdaomar1821 8 ай бұрын
"اشكرك على المجهود الذي تبذوله فى نشر العلم " #اكاديمية نوفل
@rawdaomar1821 8 ай бұрын
"اشكرك على المجهود الذي تبذوله فى نشر العلم " #اكاديمية نوفل
@rawdaomar1821 8 ай бұрын
"اشكرك على المجهود الذي تبذوله فى نشر العلم " #اكاديمية نوفل
notebook-31
Рет қаралды 41 М.
PRO Hi-Tech
Рет қаралды 126 М.
Brother-live_mob
Рет қаралды 517 М.