Web Development Code

Username :<input type = "text يعني قيمة الحقل نصي" name = "هو قيمة هذا 👈👈👈الحقل 👆👆 وهي مخصصة للنصوص العادية /> Userpass : <input type = "password هنا تظهر الحروف على شكل نقاط " /> Submit : <input type = "submit" value = "Login" المعنى واضح من خلال المثال/> <input type = "Reset" value = "clean" لمسح كل ماهو موجود داخل الحقول/> <input required= "required يعني هذا الحقل مطلوب يعني لن يتم الارسال الا عندما يكتب شيء داخل هذا الحقل/> <input placeholder="هذه خاصية لكتابة النايم بلون رمادي عندما تضغط عليه ك "اكتب تعليقا... " الفرق بين get و post Post تستخدم لارسال البيانات بشكل مخفي اي لايعطينا اي شي في الرابط من فوق Get تظهر ما تم ارساله في الحقول السابقة يجب استخدام post في الرسائل وكلمات السر وغيرها للحماية اما get فتستخدم عادة في محركات البحث ----------- <input type = "hidden تستخدم لانشاء حقل مخفي " <textarea rows =" هنا تكتب الارقام لتوسيع المساحة النصية " cols = "نفس rows ولكن هذه للاعمدة"> تستخدم للنصوص الطويلة كالتعليقات </textarea> <select name = "اسم القائمة" > <optgroup label = "اسم من يترأس هذه المجموعات "> </optgroup> <option selected ="selected" اختيار واحد من القائمة disabled = "disabled" >الخيارات داخل القائمة</option> قائمة منسدلة تندرج تحتها قيم</select> <button>نفس فكرة سابميت والفرق هو ان الفاليو تكتب هنا </button> <input type = "radio تستخدم لانشاء دائرة اختيار"/> <input type = "checkbox" نفس فكرة راديو ولكن مربعات اي اكثر من خيار واحد/> ويمكن استخدام selcted & disabled فيهما HTML Entities اكتبها في جووجل فلا يمكن شرحها هنا وهي تستخدم لكتابة الاشياء التي لا يمكن كتابتها بلوحة المفاتيح <fieldset>اضافة جميلة تتمثل في وضع الكتابة داخل اطار <legend>عنوان الاطار</legend> </fieldset> </form> <form action = "djaber.html" method = "post" enctype = "multipart/form-data" <input type = "file" name = "my file "/> لاظهار زر اختيار ملف --------****------ تستخدم iframe لاظهار موقع اخر داخل موقعك <iframe src ="عنوان الموقع المراد تصفحه" width ="النسبة المئوية التي يحتلها حجم الموقع الخارجي داخل موقعك "hight ="ارتفاع الموقع" frameborder="اطار الموقع" scrolling = "no - yes - auto"> هنا تكتب اشياء تظهر للمتصفحات التي لا تدعم الفريمات مثلا <h2>يجب ترقية المتصفح لرؤية هذا المحتوى</h2> </iframe> ---------------------- الروابط التشعبية لاستخدام رابط تشعيبي نستخدم <a></a> <a href ="رابط الموقع" target ="_خصائص اتجاه الصفحة" title = "عنوان الموقع لما تمر عليه بالماوس"> للتوجه الى الاعلى 👈👈👈👈👈👈👈👈👇👇👇👇👇 <a href = "#">^TOP^</a> للتوجه الى مكان xxx 👈👈👈👈👈👇👇👇👇👇👇👇 <a href ="#xxx">^xxx^</a> خصائص اتجاه الصفحة target Target = "_self "----> فتح في نفس النافذة Target ="_top"------> // // // // Target ="_blank" ------> فتح في نافذة جديدة target ="_parent "-----> // // // // ------------------- روابط البريد : <a href=" mailto:addelec?subject= كتابة رسالة ولترك %20&مسافة نكتبbody=مكان الرسالة" >click her فتح برامج المحادثة</a> ------------------- الصور <img src="اسم الصورة" alt="وصف الصورة الجملة التي تظهر اذا كانت الصورة غير موجودة" border = "اطار الصورة بالارقام"/> ___________________ تشغيل الملفات الصوتية <audio controls="controls لاظهار شريط التحكم" ></audio> </body> </html>

#~ منقول.... نعتمد في css على كتابة محدد العنصر (selector) المراد تنسيقه متبوع بحاضنتين {} والتي تحوي بداخلها خصائص الcss Selector #=> id, .=> class { color : لون النص ; direction : اتجاه العناصر في الصفحة اذا اردنا اليمين نكتب rtl; letter-spacing : البعد بين الحروف بالبكسل; line-height :% البعد بين الاسطر عن طريق البكسل او; text- align : موقع النص داخل الصفحة ; text-decoration : تزيين النص كالتسطير; text-indent : بياض امام الفقرة; text-transform :حساسية الحروف; vertical-align : الابتعاد عن النص الاعتيادي بالبكسل; white-space : لعمل سطر جديد كل ما ضغطت انتر ;حسب الخصائص والتعامل مع النص كما هو مكتوب word-spacing : المسافة بين الكلمات بالبكسل; border : اطار بالبكسل; outline : التحكم في حدود الاطار الخارجي ; padding : المسافة بين شيئين بشكل داخلي ; margin : عكس بادينغ اي الهوامش الخارجية او البعد ; font-family :نوع الخط ; font-size : حجم الخط بالبكسل; font-stylالخاصية ;لخط عادي او مائل... ; font-variant:تحويل الحروف من صغيرة الى كبيرة ;والعكس font-weight: عرض النص ; width : العرض; height :الارتفاع ; min/max-width: اكبر / اصغر قيمة للعرض والتي لا يمكن ان يتخطاها; min/max-height: نفس الشي; float : )ازاحة )حذف الاتجاه الذي تحدده الخاصية position :الوضعيات وسيتم شرح الخصائص اسفله; z-index :تستخدم لتحديد اي عنصر يظهر فوق الاخر background :الخلفية; clear : تستخدم للفصل عن فلوت; cursor : شكل مؤشر الماوس; } الخصائص : text-align : justify, center, right, left. text-decoration: none, underline, overline, line-through blinke text-transform : capitalize, uppercase, none, lowercase. vertical-align : baseline, sub, super, top, text-top, middle, bottom. white-space : normal, pre, nowrap. font-family : Tahoma, Arial, sans-serif font-style: normal, italic... font-size: small, x-small, large, x-large, xx-small/large ...Or by px font-variant: normal, small-caps font-weight: bold, bolder, normal border: dashed, solid, dotted,..... float : right, left,... background-color : لون الخلفية background-image : url(اختياار صورة كخلفية) background-repeat: اعادة الصورة background-attachment : scroll list-style-type : decimal ترقيم القائمة بالرقام list-style-image : url("اظهار الصورة لترقيم") clear : left, right, both, none visiblity :hidden خاصية لاخفاء العنصر مع ترك بياض مكانها Selector :hover {عند المرور عليه بالمؤشر} Selector :visited {عند الضغط عليه ولكنه يختفي} Selctor :active { عند الضغط عليه يتغير اللون الى اللون المحدد } Selector :focus { التظليل او التركيز على مكان معين بعد الضغط عليه} Selector :link { لتوضيح ان هذا العنصر هو رابط} Selector :first-child { الابن الاول للعنصر} Selector Selector :before{ content : اضافة محتوى قبل محتوى العنصر; } Selector :after{ content : اضافة محتوى بعد محتوى العنصر; }

الاجابه : var items = products.filter((item)=>{ return item.name == "honda" && item.price <= 18000 })

هل انت جاهز للتمرين القادم ؟؟؟ 💣🛠🧰 في التمرين التالي ، سنحاول تطبيق شيء نستخدمه كل يوم في الحياة الواقعية ، إنه التصفية. على سبيل المثال ، عندما تذهب لاستلام مشروع ، ولدى العميل قائمة كبيرة من المنتجات المختلفة ولا يريد عرض جميع المنتجات في الصفحة دفعة واحدة ، لكنه يريد عرض المنتجات حسب طلب زوار الصفحة. #JavaScript @codedevelopment

قريبا 😂❤

soon...

soon...

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css" media="all"> *{ padding: 0; margin: 0; box-sizing: border-box; } body{ width: 100%; height: 600px; } .load{ position: relative; top: 50%; left:50%; transform: translate(-50%,-50%); background: #42445A; } .load span{ position: absolute; padding: 100px; background: #646572; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); border:15px solid #000; } .load span:before{ content: ""; position: absolute; padding: 100px; border-width: 15px; border-color: transparent; border-left-color: green ; border-style: solid; top: -15px; right: -15px; border-radius: 50%; animation: animate 2.1s infinite linear } .load span p { position: absolute; display: inline-block; background: ; padding:100px; border:15px solid transparent; top:-15px; right:-15px; border-radius:50%; animation:animate 2.1s infinite linear; } p:after{ content: ""; position: absolute; padding: 20px ; background: green; border-radius: 50%; top: -10px; left: 13px; } @keyframes animate{ 0%{ transform: rotate(0deg) } 100%{ transform: rotate(360deg) } } </style> </head> <body> <div class="load"> <span><p></p></span> </div> </body> </html>

create a load css animation

chat app soon 🔥😈

Ui Ux Windows/Mac -> Photoshop Linux -> Gimp

simple connect database with pdo ...

تم الإستغناء عن الوندوز و الإنتقال الى الكالي انتظرونا مع مشاريع كاملة front + back على موقع الجيت هاب في الأيام المقبلة 😁❤

Pug: <div class='page'> header .image img(src='https://cdn.vox-cdn.com/thumbor/2R2bpBopHntKQJcJZ3Rk_8eBhAQ=/0x33:640x393/1600x900/cdn.vox-cdn.com/imported_assets/1035935/Anonymous-Logo.png' alt='Anonymous') ul li.active li li p Welcome To Community! nav .search input(type='search' placeholder='Search') span i.las.la-search .members h3 Members hr ul li <a href='#'>Newest</a> li <a href='#'>Active</a> li <a href='#'>Popular</a> .member

pug + scss source code: here

نسيت غير الخط بس يلا كله تدريب 🐸