الفصل الحادي عشر المشروعات العملية في CSS

Byahmed nabel كورس CSS

إليك كورس كامل عن المشروعات العملية في CSS:

1. مقدمة عن المشروعات العملية في CSS

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

2. المشروع الأول: تصميم صفحة هبوط (Landing Page)

الهدف:

  • تصميم صفحة هبوط بسيطة وجذابة باستخدام CSS فقط.

الخطوات:

  1. هيكل HTML:
    • قم بإنشاء ملف HTML يحتوي على هيكل صفحة هبوط مع رأس (header) ونص رئيسي (main content) وتذييل (footer).

    مثال:

    html
    <html>
    <head>
    <title>صفحة هبوط</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <header>
    <h1>مرحبًا بكم في موقعنا!</h1>
    <p>استكشف خدماتنا وتعلم المزيد</p>
    </header>
    <main>
    <section>
    <h2>خدماتنا</h2>
    <p>نحن نقدم مجموعة متنوعة من الخدمات لتلبية احتياجاتك.</p>
    </section>
    <button>احصل على عرض</button>
    </main>
    <footer>
    <p>حقوق الطبع والنشر © 2024</p>
    </footer>
    </body>
    </html>
  2. التنسيق باستخدام CSS:
    • استخدم CSS لتنسيق الصفحة وجعلها جذابة، مثل إضافة خلفيات، أنماط النصوص، وأزرار قابلة للنقر.

    مثال:

    css
    body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    }    header {
    background-color: #3498db;
    color: white;
    text-align: center;
    padding: 50px 20px;
    }

    main {
    padding: 20px;
    }

    button {
    background-color: #2ecc71;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    }

    footer {
    text-align: center;
    padding: 20px;
    background-color: #2c3e50;
    color: white;
    }

  3. التطوير:
    • يمكن تحسين المشروع بإضافة ميديا كويريز لجعل الصفحة متجاوبة، إضافة تأثيرات عند التمرير (hover effects)، وتنظيم محتوى الصفحة بشكل أفضل باستخدام Flexbox أو Grid.

3. المشروع الثاني: تصميم قائمة تنقل باستخدام Flexbox

الهدف:

  • بناء قائمة تنقل متجاوبة باستخدام Flexbox، مع خيارات لتوسيع وتجميع العناصر عند تغيير حجم الشاشة.

الخطوات:

  1. هيكل HTML:
    • قم بإنشاء قائمة تنقل تحتوي على روابط.

    مثال:

    html
    <html>
    <head>
    <title>قائمة تنقل</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <nav>
    <ul>
    <li><a href="#">الرئيسية</a></li>
    <li><a href="#">الخدمات</a></li>
    <li><a href="#">عن الموقع</a></li>
    <li><a href="#">اتصل بنا</a></li>
    </ul>
    </nav>
    </body>
    </html>
  2. التنسيق باستخدام CSS:
    • استخدم Flexbox لتنظيم العناصر أفقياً، وضبط محاذاة الروابط.

    مثال:

    css
    nav ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
    padding: 0;
    background-color: #2c3e50;
    }    nav li {
    margin: 10px;
    }

    nav a {
    color: white;
    text-decoration: none;
    padding: 10px;
    }

    nav a:hover {
    background-color: #3498db;
    border-radius: 5px;
    }

  3. التطوير:
    • إضافة ميديا كويريز لتحسين التفاعل على الأجهزة الصغيرة (مثل تحويل القائمة إلى قائمة منسدلة).
    • استخدم :hover لتقديم تأثيرات عند التمرير فوق العناصر.

4. المشروع الثالث: تصميم بطاقة (Card Design)

الهدف:

  • تصميم بطاقة تحتوي على صورة، نص، ورابط باستخدام CSS.

الخطوات:

  1. هيكل HTML:
    • أنشئ بطاقة تحتوي على صورة، عنوان، وصف، وزر للانتقال إلى رابط.

    مثال:

    html
    <div class="card">
    <img src="image.jpg" alt="صورة بطاقة">
    <div class="card-content">
    <h2>عنوان البطاقة</h2>
    <p>وصف قصير عن محتوى البطاقة.</p>
    <a href="#">اقرأ المزيد</a>
    </div>
    </div>
  2. التنسيق باستخدام CSS:
    • قم بتنسيق البطاقة باستخدام CSS لجعلها جذابة ومرنة.

    مثال:

    css
    .card {
    width: 300px;
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }    .card img {
    width: 100%;
    height: auto;
    }

    .card-content {
    padding: 20px;
    }

    .card-content h2 {
    font-size: 24px;
    margin-bottom: 10px;
    }

    .card-content p {
    font-size: 16px;
    margin-bottom: 20px;
    }

    .card-content a {
    text-decoration: none;
    color: #3498db;
    }

    .card-content a:hover {
    text-decoration: underline;
    }

  3. التطوير:
    • استخدام Flexbox أو Grid لتنظيم أكثر من بطاقة بشكل متجاوب.
    • تحسين التصميم ليشمل تأثيرات التمرير (hover effect).

5. المشروع الرابع: تصميم صفحة ملف شخصي (Profile Page)

الهدف:

  • تصميم صفحة ملف شخصي تحتوي على صورة شخصية، معلومات شخصية، وروابط للتواصل الاجتماعي.

الخطوات:

  1. هيكل HTML:
    • قم بإنشاء صفحة تحتوي على صورة، اسم، وصف، وروابط للتواصل الاجتماعي.

    مثال:

    html
    <div class="profile">
    <img src="profile.jpg" alt="صورة شخصية">
    <h1>أحمد نجيب</h1>
    <p>مطور ويب ومصمم واجهات مستخدم.</p>
    <div class="social-links">
    <a href="#">فيسبوك</a>
    <a href="#">تويتر</a>
    <a href="#">لينكدإن</a>
    </div>
    </div>
  2. التنسيق باستخدام CSS:
    • تنسيق الصفحة باستخدام Flexbox أو Grid لجعل المحتوى مرنًا ومنظمًا.

    مثال:

    css
    .profile {
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
    }    .profile img {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: cover;
    }

    .profile h1 {
    font-size: 24px;
    margin-top: 20px;
    }

    .profile p {
    font-size: 16px;
    color: #777;
    }

    .social-links a {
    margin: 0 10px;
    text-decoration: none;
    color: #3498db;
    }

  3. التطوير:
    • إضافة ميديا كويريز لتحسين العرض على الأجهزة الصغيرة.
    • إضافة تأثيرات التمرير (hover effects) على الروابط الاجتماعية.

6. المشروع الخامس: تصميم نموذج تسجيل دخول (Login Form)

الهدف:

  • تصميم نموذج تسجيل دخول باستخدام HTML وCSS.

الخطوات:

  1. هيكل HTML:
    • قم بإنشاء نموذج يحتوي على حقول لإدخال البريد الإلكتروني وكلمة المرور وزر للإرسال.

    مثال:

    html
    <form class="login-form">
    <h2>تسجيل الدخول</h2>
    <label for="email">البريد الإلكتروني:</label>
    <input type="email" id="email" name="email" required>
    <label for="password">كلمة المرور:</label>
    <input type="password" id="password" name="password" required>
    <button type="submit">دخول</button>
    </form>
  2. التنسيق باستخدام CSS:
    • قم بتنسيق النموذج وجعله جذابًا باستخدام CSS.

    مثال:

    css
    .login-form {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #fff;
    }    .login-form label {
    font-size: 16px;
    margin-bottom: 8px;
    }

    .login-form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    }

    .login-form button {
    width: 100%;
    padding: 10px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    }

  3. التطوير:
    • إضافة تأثيرات عند التمرير فوق الأزرار (hover effect) أو عند التركيز على الحقول.

7. ملخص المشروعات العملية

  • في هذا الكورس، تعلمت كيفية بناء مشروعات عملية باستخدام CSS مثل صفحة هبوط، قائمة تنقل، بطاقة، صفحة ملف شخصي، ونموذج تسجيل دخول.
  • لكل مشروع، تم التركيز على استخدام تقنيات CSS مثل Flexbox و Grid و الميديا كويريز لتطوير تصميمات متجاوبة.
  • قم بتطبيق هذه المشاريع لتعزيز مهاراتك في تصميم واجهات المستخدم.

إذا كنت بحاجة إلى مساعدة إضافية أو تفاصيل حول أي مشروع، لا تتردد في سؤالي!

 

    Similar Posts

    اترك تعليقاً

    لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *