KEMO DEV

بنك الدم 💉 مشروع خفيف باستخدام HTML CSS PHP MYSQL مع مكتبة Bootstrap 5.3.0 تقدر تعمل حساب جديد و تسجل الدخول و تسجل متبرع و كمان تبحث علي حسب نوع فصيلة الدم

رابط تحميل المشروع مجاناً :
https://url-cut.com/Blood_Bank

❤3

992 viewsكامل الطالب, 05:02

KEMO DEV

المقالة الثامنة: المؤثرات الانتقالية المتقدمة (Advanced Transitions)

الانتقالات المتقدمة في CSS تتيح لك التحكم الدقيق في كيفية تغير الأنماط على مدار فترة زمنية محددة. في هذه المقالة، سنتناول كيفية استخدام خصائص الانتقالات لإنشاء تأثيرات انتقالية أكثر تعقيدًا.

خصائص الانتقالات الأساسية:
- transition-property: تحدد الخاصية أو الخصائص التي سيتم تطبيق الانتقال عليها.
- transition-duration: تحدد مدة الانتقال.
- transition-timing-function: تحدد دالة التوقيت التي تتحكم في سرعة الانتقال خلال مدة الانتقال.
- transition-delay: تحدد تأخير بدء الانتقال.

مثال بسيط على الانتقالات:

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 2s ease-in-out, background-color 1s ease-in 0.5s;
}

.box:hover {
  width: 200px;
  background-color: red;
}

في هذا المثال:
- الانتقال على width سيستغرق 2 ثانية مع دالة توقيت ease-in-out.
- الانتقال على background-color سيستغرق 1 ثانية مع دالة توقيت ease-in وتأخير 0.5 ثانية قبل بدء الانتقال.

دوال التوقيت (Timing Functions):
تحدد كيفية تغير القيمة على مدار الزمن. تتضمن دوال التوقيت الشائعة:
- linear: الانتقال يحدث بسرعة ثابتة.
- ease: الانتقال يبدأ ببطء، ثم يتسارع، ثم ينتهي ببطء.
- ease-in: الانتقال يبدأ ببطء ثم يتسارع.
- ease-out: الانتقال يبدأ بسرعة ثم يتباطأ.
- ease-in-out: الانتقال يبدأ ببطء، يتسارع في الوسط، ثم يتباطأ في النهاية.

يمكنك أيضًا استخدام دوال مخصصة باستخدام cubic-bezier:

.box {
  transition: width 2s cubic-bezier(0.42, 0, 0.58, 1);
}

مثال عملي على الانتقالات المتقدمة:
لنفترض أنك تريد إنشاء زر يتغير لونه وحجمه عند التمرير فوقه، مع تأثير انتقالي معقد.

1. أنشئ ملف HTML باسم index.html:

   <!DOCTYPE html>
   <html lang="ar">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
     <title>الانتقالات المتقدمة في CSS</title>
   </head>
   <body>
     <button class="btn">Hover Me</button>
   </body>
   </html>

2. أنشئ ملف CSS باسم styles.css:

   .btn {
     width: 150px;
     height: 50px;
     background-color: blue;
     color: white;
     border: none;
     border-radius: 5px;
     font-size: 16px;
     transition: width 0.5s ease-in-out, background-color 0.5s linear 0.2s, transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
   }

   .btn:hover {
     width: 200px;
     background-color: red;
     transform: rotate(10deg) scale(1.1);
   }

في هذا المثال:
- عرض الزر يتغير مع ease-in-out على مدار 0.5 ثانية.
- لون الخلفية يتغير مع linear على مدار 0.5 ثانية بعد تأخير 0.2 ثانية.
- التحول يتضمن دوران وتكبير الزر مع دالة توقيت cubic-bezier خاصة.

التحدي
استخدم ملف HTML بسيط وملف CSS خارجي. في ملف CSS، قم بإنشاء تأثيرات انتقالية متقدمة لعناصر مختلفة في الصفحة باستخدام خصائص الانتقالات ودوال التوقيت.

مثال:
1. أنشئ ملف HTML باسم index.html:

   <!DOCTYPE html>
   <html lang="ar">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
     <title>الانتقالات المتقدمة في CSS</title>
   </head>
   <body>
     <div class="box">Hover Over Me</div>
   </body>
   </html>

2. أنشئ ملف CSS باسم styles.css:

   .box {
     width: 100px;
     height: 100px;
     background-color: blue;
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     transition: width 1s ease-in-out, height 1s ease-in-out, background-color 0.5s linear 0.5s;
   }

   .box:hover {
     width: 200px;
     height: 200px;
     background-color: red;
   }

بهذا تكون قد أنهيت المقالة الثامنة من كورس CSS. نلتقي في المقالة التاسعة للحديث عن النماذج (Forms) وكيفية تنسيقها وتحسينها باستخدام CSS.
لا تنسي متابة الهاشتاغ لمشاهدة جميع الدروس فقط اضغط علي 👈 #تعلم_css_مع_كيمو_تكنولوجي

👍1

800 viewsكامل الطالب, 05:00

KEMO DEV

المقالة التاسعة: تنسيق وتحسين النماذج (Forms) باستخدام CSS

النماذج (Forms) تعتبر جزءًا أساسيًا من صفحات الويب حيث يتم استخدامها لجمع البيانات من المستخدمين. في هذه المقالة، سنتعلم كيفية تنسيق وتحسين النماذج باستخدام CSS.

العناصر الأساسية للنماذج:
النماذج تتكون من عدة عناصر مثل:
- input (نص، بريد إلكتروني، رقم، إلخ.)
- textarea
- select
- button

تنسيق عناصر النماذج:
يمكنك استخدام CSS لتنسيق هذه العناصر بشكل جذاب وسهل الاستخدام.

1. تنسيق حقول الإدخال (input):

   input[type="text"],
   input[type="email"],
   input[type="number"] {
     width: 100%;
     padding: 10px;
     margin: 10px 0;
     box-sizing: border-box;
     border: 2px solid #ccc;
     border-radius: 4px;
   }

   input[type="text"]:focus,
   input[type="email"]:focus,
   input[type="number"]:focus {
     border-color: #555;
   }

في هذا المثال، قمنا بتحديد العرض ليكون 100%، وأضافنا حواف وحشو لجعل الحقول تبدو أفضل، وكذلك أضفنا تأثيرًا عند التركيز على الحقل (:focus).

2. تنسيق منطقة النص (textarea):

   textarea {
     width: 100%;
     height: 150px;
     padding: 10px;
     margin: 10px 0;
     box-sizing: border-box;
     border: 2px solid #ccc;
     border-radius: 4px;
   }

   textarea:focus {
     border-color: #555;
   }

3. تنسيق القوائم المنسدلة (select):

   select {
     width: 100%;
     padding: 10px;
     margin: 10px 0;
     box-sizing: border-box;
     border: 2px solid #ccc;
     border-radius: 4px;
   }

   select:focus {
     border-color: #555;
   }

4. تنسيق الأزرار (button):

   button {
     background-color: #4CAF50; /* أخضر */
     color: white;
     padding: 15px 20px;
     margin: 10px 0;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     font-size: 16px;
   }

   button:hover {
     background-color: #45a049;
   }

تنسيق النموذج بالكامل:
يمكنك تنسيق النموذج بالكامل باستخدام CSS لتحسين مظهره ووظائفه.

1. أنشئ ملف HTML باسم index.html:

   <!DOCTYPE html>
   <html lang="ar">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
     <title>تنسيق وتحسين النماذج في CSS</title>
   </head>
   <body>
     <form class="form">
       <label for="name">الاسم:</label>
       <input type="text" id="name" name="name">

       <label for="email">البريد الإلكتروني:</label>
       <input type="email" id="email" name="email">

       <label for="message">الرسالة:</label>
       <textarea id="message" name="message"></textarea>

       <label for="gender">الجنس:</label>
       <select id="gender" name="gender">
         <option value="male">ذكر</option>
         <option value="female">أنثى</option>
       </select>

       <button type="submit">إرسال</button>
     </form>
   </body>
   </html>

2. أنشئ ملف CSS باسم styles.css:

   body {
     font-family: Arial, sans-serif;
     background-color: #f2f2f2;
     padding: 20px;
   }

   .form {
     background-color: #fff;
     padding: 20px;
     border-radius: 5px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   }

   .form label {
     display: block;
     margin-bottom: 8px;
   }

   .form input[type="text"],
   .form input[type="email"],
   .form textarea,
   .form select,
   .form button {
     width: 100%;
     padding: 10px;
     margin-bottom: 10px;
     border: 1px solid #ccc;
     border-radius: 4px;
     box-sizing: border-box;
   }

   .form input[type="text"]:focus,
   .form input[type="email"]:focus,
   .form textarea:focus,
   .form select:focus {
     border-color: #555;
   }

   .form button {
     background-color: #4CAF50; /* أخضر */
     color: white;
     border: none;
     cursor: pointer;
   }

   .form button:hover {
     background-color: #45a049;
   }

في هذا المثال، قمنا بتنسيق النموذج بالكامل وجعلناه يبدو جذابًا وسهل الاستخدام.

التحدي
استخدم ملف HTML بسيط وملف CSS خارجي. قم بإنشاء نموذج يتضمن عناصر إدخال متنوعة وتنسيقها باستخدام CSS لتحسين مظهر النموذج وتجربة المستخدم.

👍1🔥1

869 viewsكامل الطالب, 05:00

KEMO DEV

بهذا تكون قد أنهيت المقالة التاسعة من كورس CSS. نلتقي في المقالة العاشرة والأخيرة للحديث عن تطبيق عملي وبناء مشروع صغير لتطبيق ما تم تعلمه.
لا تنسي متابة الهاشتاغ لمشاهدة جميع الدروس فقط اضغط علي 👈 #تعلم_css_مع_كيمو_تكنولوجي

🔥2

804 viewsكامل الطالب, 05:00

KEMO DEV

المقالة العاشرة: التطبيق العملي وبناء مشروع صغير

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

المتطلبات:
1. نموذج اتصال يحتوي على حقول الاسم والبريد الإلكتروني والرسالة.
2. زر إرسال مع تأثيرات انتقالية ورسوم متحركة.
3. تصميم متجاوب يعمل بشكل جيد على مختلف الأجهزة.

خطوات التنفيذ:

1. إنشاء هيكل HTML:
أنشئ ملف HTML باسم index.html:

   <!DOCTYPE html>
   <html lang="ar">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
     <title>مشروع الاتصال</title>
   </head>
   <body>
     <div class="container">
       <h1>اتصل بنا</h1>
       <form class="contact-form">
         <label for="name">الاسم:</label>
         <input type="text" id="name" name="name" required>

         <label for="email">البريد الإلكتروني:</label>
         <input type="email" id="email" name="email" required>

         <label for="message">الرسالة:</label>
         <textarea id="message" name="message" required></textarea>

         <button type="submit">إرسال</button>
       </form>
     </div>
   </body>
   </html>

2. إنشاء ملف CSS لتنسيق الصفحة:
أنشئ ملف CSS باسم styles.css:

   body {
     font-family: Arial, sans-serif;
     background-color: #f2f2f2;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     margin: 0;
   }

   .container {
     background-color: #fff;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
     width: 100%;
     max-width: 500px;
     box-sizing: border-box;
   }

   h1 {
     text-align: center;
     color: #333;
   }

   .contact-form {
     display: flex;
     flex-direction: column;
   }

   .contact-form label {
     margin-bottom: 5px;
     color: #555;
   }

   .contact-form input,
   .contact-form textarea {
     padding: 10px;
     margin-bottom: 15px;
     border: 1px solid #ccc;
     border-radius: 4px;
     box-sizing: border-box;
     font-size: 16px;
   }

   .contact-form input:focus,
   .contact-form textarea:focus {
     border-color: #007BFF;
     outline: none;
   }

   .contact-form button {
     background-color: #007BFF;
     color: #fff;
     border: none;
     padding: 15px;
     border-radius: 4px;
     cursor: pointer;
     font-size: 16px;
     transition: background-color 0.3s ease;
   }

   .contact-form button:hover {
     background-color: #0056b3;
   }

   /* تأثيرات انتقالية ورسوم متحركة */
   .contact-form button {
     animation: buttonAnimation 2s infinite alternate;
   }

   @keyframes buttonAnimation {
     from {
       transform: scale(1);
     }
     to {
       transform: scale(1.05);
     }
   }

   /* تصميم متجاوب */
   @media (max-width: 600px) {
     .container {
       padding: 15px;
     }

     .contact-form button {
       padding: 10px;
       font-size: 14px;
     }
   }

3. شرح الكود:
- قمنا بإنشاء هيكل HTML للنموذج.
- أضفنا بعض الأنماط الأساسية لتنسيق النموذج والصفحة بأكملها.
- استخدمنا تأثيرات انتقالية ورسوم متحركة للزر لجعله أكثر جاذبية.
- أضفنا تصميمًا متجاوبًا لضمان أن النموذج يظهر بشكل جيد على جميع الأجهزة.

التحدي
حاول تحسين النموذج بإضافة مزيد من التأثيرات والأنماط. يمكنك تجربة إضافة مؤثرات انتقالية لعناصر أخرى مثل حقول الإدخال أو تجربة ألوان وخطوط مختلفة لتحسين المظهر العام.

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

نتمني منك متابعتنا للمذيد من الدروس و الكورسات و عمل لايك و كتابة تعليق محفز
لا تنسي متابة الهاشتاغ لمشاهدة جميع الدروس فقط اضغط علي 👈 #تعلم_css_مع_كيمو_تكنولوجي

1.08K viewsكامل الطالب, 05:01

KEMO DEV

اكبر و افضل تجميعة لكورسات البرمجة و لغات البرمجة من PDF الي فيديوهات و صور و ملخصات هذة التجميعة هي طريقك ادخول عالم البرمجة حيث تحتوي علي اغلب لغات البرمجة و اطر العمل و المكتبات :
C++ , JAVA , C# , PHP , MYSQL , Kotlin , JavaScript , Perl , Matlab , Rust , Ruby , Swift ,TypeScript , و الكثير من الغات ...
و يحتوي أيضاً علي كورسات في الامن السبراني و امن المعلومات و تعلم كالي لونكس ..الخ
رابط تحميل مكتبة البرمجة 2024 :
https://drive.google.com/drive/folders/1OuZc6AO7z1CfRd1AEkEMDkwmFxkyd3U7?usp=sharing
لا تنسي متابعتنا لكل ما هو جديد و اذا واجهتك اي مشكلة لا تتردد في التواصل معنا

❤6👍5🥰1

1.38K viewsكامل الطالب, 03:46

KEMO DEV

السلام عليكم صباح النور و مساء الانجاز 😍❣️
بحمدالله اليوم اطلقت اول مكتبة JavaScript عاملها انا براي ايوا مكتبه جافاسكربت اسمها Dakwa و ما تسالوني سبب التسميه الغريب دا 😂😂🙌
طيب فائد المكتبة شنو ؟ الموضوع اشبه بمكتبة React js ايوا انا عملت مكتبة Single Page Web Application باستخدام جافاسكربت العادية و الكود بتاعها بسيط جداً
خصائص المكتبة :
- سهلة
- بسيطة
- سريعة
اكيد عندها عيوب و انا ما عملتها عشان منافسة الكبار ديل React , Vue , Angular لكن الفكرة بسيطة بس و بحاول اطبق اي شي اتعلمتو في السنين السابقة .
حالياً الـ Documentation جاهز بس باقي ارفعو علي الاستضافة و كمان شارح فيديو علي اليوتيوب ان شاء الله و حيكون في دروس عنها و مشاريع بسيطة .
مكونات المكتبة شنو :
- Components
- Pages
- Router
- Hooks
ديل اهم النقاط فيها .
المكتبة مرفوعة علي Github اي شخص يقدر يصل ليها و يحملها عندو و يستخدمها و هي مجانيه ميه الميه 💸 و كمان مرفوعة علي npm يعني تقدر تعمل ليها install
npm install dakwa@^0.0.4
عشان تشغل السيرفر كل العليك تكتب
npm run server
في التعليقات ح تلاقيو مزيد من المعلومات و فيديو يوتيوب و شكراً 😍🌹

❤6👏2🔥1

1.25K viewsكامل الطالب, 03:21

KEMO DEV

924 viewsكامل الطالب, 03:26

About

Blog

Apps

Platform