مشروع : انشاء مدونة شخصية كاملة باستخدام HTML + CSS + JS

في

 


حديثنا اليوم راح يكون  عن انشاء مدونة شخصية كاملة باستخدام HTML + CSS + JS 


مقدمة 

في عصرنا الرقمي، أصبح امتلاك مدونة شخصية أكثر من مجرد هواية؛ فهو مشروع تعليمي وتطبيقي يتيح لك تعلم البرمجة من الصفر. لكل مبتدئ يرغب في تعلم HTML وCSS وJavaScript، فإن إنشاء مدونة شخصية هو خطوة عملية مهمة لاكتساب خبرة حقيقية يمكن أن تُظهر مهاراتك للآخرين، سواء في الوظائف أو المشاريع الشخصية أو العمل الحر.

المدونة الشخصية تجمع بين:

  • HTML: لبناء الهيكل الأساسي للصفحات والمحتوى.

  • CSS: لتصميم واجهات جذابة وتنسيق النصوص والصور.

  • JavaScript: لإضافة تفاعلية وحيوية للصفحة، مثل القوائم المنسدلة، الرسائل الترحيبية، والفعاليات عند الضغط أو المرور على الأزرار.

بالإضافة إلى ذلك، تعلمك هذه التجربة إدارة مشروع متكامل: تنظيم الملفات، إضافة الصور، إنشاء أكواد قابلة لإعادة الاستخدام، وتجربة تحسين تجربة المستخدم (UX).

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

1. إنشاء الصفحة الرئيسية: index.html

الصفحة الرئيسية هي قلب المدونة. تحتوي على:

  • رأس الصفحة (Header) مع عنوان المدونة وقائمة التنقل.

  • المقالات (Articles) وهي قلب محتوى المدونة.

  • الشريط الجانبي (Sidebar) للأقسام والمقالات المميزة.

  • التذييل (Footer) لمعلومات حقوق الملكية والروابط المهمة.

كود HTML للصفحة الرئيسية:

مثال على صفحة رئيسية تم إنشاؤها باستخدام HTML وCSS















مثال على صفحة رئيسية تم إنشاؤها باستخدام HTML وCSS















الكود جاهز للنسخ : 
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>مدونتي الشخصية</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>مرحبًا بك في مدونتي الشخصية</h1>
        <nav>
            <ul>
                <li><a href="#">الرئيسية</a></li>
                <li><a href="#">مقالات</a></li>
                <li><a href="#">حول</a></li>
                <li><a href="#">اتصل بنا</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="articles">
            <article>
                <h2>عنوان المقال الأول</h2>
                <p>نص تجريبي للمقال الأول في المدونة مع إضافة صور وروابط داخل المقال.</p>
            </article>
            <article>
                <h2>عنوان المقال الثاني</h2>
                <p>نص توضيحي للمقال الثاني، يوضح كيفية تنسيق المقالات وإضافة أقسام مختلفة.</p>
            </article>
        </section>

        <aside class="sidebar">
            <h3>الأقسام</h3>
            <ul>
                <li><a href="#">تطوير الويب</a></li>
                <li><a href="#">تطبيقات الهواتف</a></li>
                <li><a href="#">Python وتحليل البيانات</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>© 2025 مدونتي الشخصية - جميع الحقوق محفوظة</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>

2. تنسيق الصفحة: style.css

CSS يعطي المدونة مظهرًا جذابًا ويجعل تجربة المستخدم أفضل.

كود CSS:

مثال على CSS لتصميم واجهة المدونة
مثال على CSS لتصميم واجهة المدونة
مثال على CSS لتصميم واجهة المدونة


























الكود جاهز للنسخ : 
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

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

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 0;
}

nav ul li {
    margin: 0 15px;
}

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

nav ul li a:hover {
    color: #ff6600;
}

main {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.articles {
    width: 70%;
}

.sidebar {
    width: 25%;
    background-color: #fff;
    padding: 15px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

article {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

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

3. إضافة تفاعلية: script.js

JavaScript يعطي المدونة ديناميكية وتفاعل مع المستخدم.

كود JS:

مثال على JavaScript لتفاعل المستخدم مع المدونة














الكود جاهز للنسخ : 
document.addEventListener("DOMContentLoaded", function() {
    const navLinks = document.querySelectorAll("nav ul li a");
    navLinks.forEach(link => {
        link.addEventListener("mouseover", () => {
            link.style.color = "#ff6600";
        });
        link.addEventListener("mouseout", () => {
            link.style.color = "white";
        });
    });
});

4. تنظيم الملفات والمجلدات

الهيكل النهائي للمدونة:

تنظيم الملفات داخل مشروع مدونة HTML + CSS + JS







الهيكل جاهز للنسخ : 

/my-blog

  ├── index.html

  ├── style.css

  ├── script.js

  ├── images/

  │   ├── post1.jpg

  │   └── post2.jpg

  ├── README.md

  ├── LICENSE

  ├── CONTRIBUTING.md

  └── CODE_OF_CONDUCT.md

5. مشاريع إضافية داخل المدونة

أ. مشروع آلة حاسبة بسيطة

مثال على مشروع آلة حاسبة باستخدام JavaScript








الكود جاهز للنسخ : 
<article>
  <h2>مشروع آلة حاسبة بسيطة</h2>
  <img src="images/calculator.png" alt="مشروع آلة حاسبة">
  <p>شرح المشروع خطوة بخطوة مع الأكواد والصور التوضيحية.</p>
</article>

ب. مشروع صفحة ملاحظات
مثال على تطبيق ملاحظات باستخدام HTML وJS







الكود جاهز للنسخ : 
<article>
  <h2>تطبيق ملاحظات للهاتف</h2>
  <img src="images/notes-app.png" alt="تطبيق ملاحظات">
  <p>يمكنك إضافة وحذف الملاحظات وحفظها في LocalStorage لتجربة تفاعلية كاملة.</p>
</article>

6. نصائح لتطوير المدونة

  1. ابدأ بمشاريع صغيرة: اكتب مقالات قصيرة، أضف صورًا، وأكواد تفاعلية.

  2. نظّم ملفاتك جيدًا: إنشاء مجلدات للصور، الملفات، والأكواد.

  3. تعلم التدرج: أضف وظائف جديدة تدريجيًا مثل البحث، التعليقات، ونماذج الاتصال.

  4. التفاعل مع المستخدم: JavaScript يساعدك على إضافة تفاعلية تجعل المستخدم يبقى أطول وقت ممكن.

  5. التجربة العملية: جرب كل وظيفة على متصفحك وتأكد من توافقها مع أجهزة مختلفة.

7. أهمية المدونات الشخصية في التعلم والعمل الحر

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

الفوائد في التعلم:

  • تكرار كتابة الأكواد يوميًا يعزز المهارة ويجعلها عادة.

  • البحث عن حلول للمشاكل اللي تواجهك أثناء بناء المدونة (مثل مشاكل التنسيق أو ربط الأكواد) يساعدك على تعلم طرق التفكير المنطقي وحل المشكلات.

  • بناء المدونة يمنحك خبرة في استخدام أدوات المطور مثل VS Code و Git، وهي مهارات أساسية لأي مبرمج.

الفوائد في العمل الحر:

  • المدونة الشخصية تعتبر محفظة أعمال (Portfolio) تعرض فيها مشاريعك بدلاً من مجرد الكلام عن مهاراتك.

  • العميل اللي يشوف مدونتك بيشوف شغلك بشكل عملي، وهذا يزيد فرصك في الحصول على مشاريع.

  • بعض المبرمجين يحولون مدوناتهم إلى مصادر دخل جانبية من خلال الإعلانات أو بيع الدروس أو القوالب.

بمعنى آخر: مدونتك ليست مجرد تدريب، بل استثمار طويل الأمد يفتح لك أبواب التعلم والعمل الحر.

8. أمثلة واقعية لمبرمجين بدأوا بمدونة وصاروا ناجحين

هناك قصص كثيرة لمبرمجين حول العالم بدأوا بمدونات بسيطة، ومع الوقت صارت نقطة انطلاق لمسيرتهم المهنية:

  1. جون ريسيج (John Resig) – مبتكر مكتبة jQuery:
    بدأ بمدونة شخصية يكتب فيها عن تجاربه مع JavaScript، وبفضل نشره للمقالات التعليمية والأفكار البرمجية، أصبح معروفًا في مجتمع المطورين، ثم طور مكتبة jQuery اللي صارت الأكثر استخدامًا عالميًا.

  2. سكوت هانسمان (Scott Hanselman) – مهندس في Microsoft:
    مدونته الشخصية كانت البداية لنشر شروح برمجية وتجارب تقنية. اليوم هو شخصية مؤثرة في المجتمع البرمجي، وحصل على فرص وظيفية ضخمة بفضل مدونته.

  3. مطورين مستقلين في GitHub وDev.to:
    كثير من المبرمجين نشروا مشاريعهم الأولى عبر مدونات شخصية مرتبطة بـ GitHub. بعضهم حصل على وظائف عن بعد أو دخل مجال العمل الحر لأن العملاء شاهدوا مشاريعهم حية عبر هذه المدونات.

الدرس هنا: لا تقلل من قيمة مشروع بسيط مثل مدونة شخصية؛ لأنه ممكن يكون نقطة البداية لبناء اسمك في المجتمع التقني أو جلب فرص عمل كبيرة.

9. ربط المدونة بـ GitHub أو استضافتها على الإنترنت

بعد ما تبني مدونتك باستخدام HTML + CSS + JS، يبقى السؤال: كيف تخلي الناس يشوفونها؟ هنا يجي دور الاستضافة.

أ. رفع المدونة على GitHub Pages (أسهل حل مجاني)

  1. أنشئ حساب على GitHub.

  2. أنشئ مستودع جديد باسم: my-blog.

  3. ارفع فيه ملفات مدونتك (index.html, style.css, script.js).

  4. من إعدادات المستودع (Settings) → GitHub Pages → اختر الفرع main والمجلد root.

  5. الآن مدونتك متاحة على رابط مجاني مثل:
    https://username.github.io/my-blog

هذه الطريقة مجانية 100% وتعتبر مثالية للمبتدئين.

ب. الاستضافة على منصات مجانية أخرى:

  • Netlify: تربط حسابك على GitHub ويعمل نشر تلقائي.

  • Vercel: مناسب جدًا لمشاريع JavaScript ويدعم التطوير السريع.

ج. شراء استضافة مدفوعة (مثل Bluehost أو Hostinger):

  • إذا تبغى دومين خاص (مثل myblog.com) ومميزات أكثر، ممكن تشتري استضافة.

  • ترفع ملفاتك عبر FTP أو من خلال لوحة التحكم الخاصة بالاستضافة.

ميزة الاستضافة: تجعل مدونتك متاحة للجميع 24/7 وتظهر بشكل احترافي سواء للعملاء أو أصحاب الوظائف.

10. خاتمة 

إن إنشاء مدونة شخصية كاملة باستخدام HTML + CSS + JS هو مشروع شامل للمبتدئين، لأنه يجمع بين التعلم العملي، تجربة مهارات البرمجة، وتنظيم مشروع متكامل.

  • ستتعلم كيفية بناء صفحات متكاملة وكتابة أكواد نظيفة.

  • إضافة تنسيقات CSS تجعل الواجهة جذابة للمستخدم.

  • JavaScript يضيف تفاعلية تجعل الموقع ديناميكيًا.

  • تنظيم الملفات والمجلدات يعطيك خبرة احترافية في إدارة المشاريع.

  • تجربة مشاريع إضافية (آلة حاسبة، تطبيق ملاحظات) تقوي مهاراتك وتزيد من محفظة أعمالك.

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

تعليقات

إرسال تعليق