DeveloperBreeze

تطوير الويب Development Tutorials, Guides & Insights

Unlock 7+ expert-curated تطوير الويب tutorials, real-world code snippets, and modern dev strategies. From fundamentals to advanced topics, boost your تطوير الويب skills on DeveloperBreeze.

Article

العمل الحر والربح من البرمجة

  • مستقل: الأكبر في العالم العربي، التعامل فيها باللغة العربية.
  • خمسات: مناسبة لبناء التقييمات من خلال خدمات مصغّرة.
  • بحر: منصة سعودية مخصصة للمهنيين المحليين.
  • تطوير الويب: مواقع إلكترونية، تطبيقات ويب، مشاريع Full-stack.
  • تطبيقات الهاتف: تطبيقات Android وiOS وHybrid.
  • تحليل البيانات والذكاء الاصطناعي: لوحات بيانات، تعلم آلة، نماذج ذكية.
  • أتمتة المهام: سكربتات برمجية لأداء وظائف متكررة.
  • مشاريع متخصصة: مثل تطوير الألعاب، IoT، تقنيات البلوكشين.

Mar 29, 2025
Read More
Tutorial
javascript css +1

دليل شامل لتطوير الويب: بناء موقع بسيط باستخدام HTML, CSS وJavaScript

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: white;
    padding: 15px 0;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

section {
    padding: 20px;
    background-color: white;
    margin: 10px 0;
}

h2 {
    color: #333;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}
  • تنسيق الصفحة بالكامل باستخدام body الذي يحدد الخطوط وألوان الخلفية.
  • استخدمنا header لتنسيق الشريط العلوي الذي يحتوي على العنوان.
  • تنسيقات القائمة في nav ul li تظهر الروابط بشكل أفقي.
  • يتم تطبيق التنسيق على الأقسام باستخدام section وh2 لجعل الصفحة تبدو أفضل.
  • footer ثابت في الأسفل بغض النظر عن مكان التمرير في الصفحة.

Sep 27, 2024
Read More
Tutorial
javascript

مكتبة jQuery: استخدام JavaScript بسهولة وفعالية

  • عند النقر على الزر، سيتم إخفاء النص إذا كان ظاهرًا، أو إظهاره إذا كان مخفيًا باستخدام .toggle().
$('#text').fadeOut();  // تلاشي العنصر
$('#text').fadeIn();   // إظهار العنصر مرة أخرى

Sep 26, 2024
Read More
Tutorial
javascript

كيفية بناء تطبيقات تفاعلية باستخدام JavaScript و HTML و CSS

في المثال السابق، تم إضافة شرط للتأكد من أن المستخدم لا يترك حقل الإدخال فارغًا قبل عرض رسالة الترحيب.

يمكننا تحسين تجربة المستخدم بإضافة وظائف أخرى مثل:

Sep 26, 2024
Read More
Tutorial
javascript

التعامل مع JSON في JavaScript: قراءة البيانات وكتابتها

{
    "name": "أحمد",
    "age": 30,
    "isMarried": false,
    "children": ["سارة", "علي"]
}
  • name: المفتاح (key) و "أحمد" هي القيمة (value).
  • age: المفتاح و 30 هي القيمة.
  • isMarried: المفتاح و false هي القيمة (من النوع المنطقي).
  • children: المفتاح و ["سارة", "علي"] هي مصفوفة.

Sep 26, 2024
Read More