كيفية إنشاء بطاقة ملف شخصي مستجيبة Responsive profile card باستخدام HTML و CSS [الشيفرة البرمجية مضمنة]

يُعَدّ إنشاء بطاقة ملف شخصي متحركة في مجال تطوير الويب من العمليات الإبداعية التي تعكس مدى تطور تقنيات التصميم وبرمجة الواجهات.

كيفية إنشاء بطاقة ملف شخصي متحركة باستخدام HTML وCSS [الشيفرة البرمجية مضمنة]

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

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

إنشاء بنية المشروع

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

index.html: ملف HTML الرئيسي.
assets\css\styles.css: ملف CSS الرئيسي.
assets\img\perfil.png: صورة الملف الشخصي.
assets\scss\styles.scss: ملف SCSS الرئيسي.
assets\scss\base\_base.scss: ملف SCSS الأساسي.
assets\scss\components\_card.scss: ملف SCSS للمكونات.
assets\scss\config\_variables.scss: ملف SCSS للمتغيرات.

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

إنشاء ملف index.html الأساسي للبطاقة

في البداية سوف نحتاج إلى إنشاء المجلد الرئيسي للمشروع ثم نسميه "card-info" وبالطبع يمكنك تسميته كما تريد.

بعد ذلك سنقوم بإنشاء الهيكل الأساسي للصفحة، وذلك من خلال إنشاء ملف "index.html"، ويُعَدّ هذا الملف بمثابة القلب النابض للصفحة، فهو يحتوي على الترتيب والتنظيم الأساسي لعناصر الواجهة.

الكود:

<!DOCTYPE html>
    <html lang="ar">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!--=============== الأيقونات ===============-->
        <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"                     rel="stylesheet">

        <!--=============== سي إس إس ===============-->
        <link rel="stylesheet" href="assets/css/styles.css">

        <title>Card info button - Bedimcode</title>
    </head>
    <body>
        <div class="container">
            <!-- البطاقة -->
<!-- Github باقي الكود ستجدونه في مستودع -->

شرح الكود:

السطر <!DOCTYPE html>: يُعَدّ علامة البداية ويُحدد نوع الوثيقة كـ HTML5.
السطر <html lang="ar">: يحدد لغة الصفحة، حيث يكون القيمة "ar" للغة العربية.
السطر <head>: يحتوي على المعلومات الرئيسية للصفحة مثل التعريفات والرموز الوظيفية.
السطر <meta charset="UTF-8">: يحدد ترميز الحروف ليكون UTF-8.
السطر <meta name="viewport" content="width=device-width, initial-scale=1.0">: يُعد تكوين لعرض الصفحة على مختلف أحجام الشاشات.
روابط التنسيق: تشير إلى ملفات الـ CSS المستخدمة لتنسيق الصفحة.
السطر <title>: يعطي الصفحة عنوانًا يظهر في شريط المتصفح.
السطر <body>: يحتوي على محتوى الصفحة الظاهر للمستخدم.

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

إنشاء ملف styles.css الأساسي للبطاقة

في هذا القسم سوف نقوم بإنشاء مجلد نضع بداخله أصول المشروع، وسوف نقوم بتسمية هذا المجلد "assets"، بعد ذلك سوف نقوم بإنشاء مجلد آخر داخل مجلد assets وسوف نقوم بتسميته "css".

الآن سنقوم بإنشاء ملف باسم "styles.css" الذي سيحتوي على التنسيقات الأساسية لصفحتنا، سوف يتضمن هذا الملف القواعد الأساسية للألوان، الخطوط، وترتيب العناصر.

الكود:

/*=============== خطوط جوجل ===============*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400");

/*=============== متغيرات سي إس إس ===============*/
:root {
  /*========== الألوان ==========*/
  /*وضع الألوان HSL (تدرج اللون، التشبع، الإضاءة)*/
  --first-color: hsl(175, 55%, 40%);
  --first-color-light: hsl(175, 30%, 48%);
  --first-color-lighten: hsl(175, 40%, 62%);
  --gradient-color: linear-gradient(180deg,
                  hsl(178, 35%, 45%),
                  hsl(178, 55%, 28%));
  --title-color: hsl(175, 40%, 16%);
  --text-color: hsl(175, 8%, 50%);
  --white-color: #fff;
  --body-color: hsl(175, 100%, 99%);
  
  /*========== الخط والطباعة ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Poppins", sans-serif;
  --h2-font-size: 1.25rem;
  --normal-font-size: .938rem;
  --smaller-font-size: .75rem;
}

/*=============== الأساسيات ===============*//*=============== Github باقي الكود ستجدونه في مستودع ===============*/

شرح الكود:

السطر import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");: يتم استيراد خطوط جوجل Poppins لتحسين جمالية الخطوط في الصفحة.
العنصر :root { ... }: يعرف المتغيرات الرئيسية المستخدمة في الصفحة، مثل: الألوان وأحجام الخطوط.
العنصر * { ... }: يقوم بتعيين خصائص عامة لكل العناصر لتحسين التنسيق وتجنب المشاكل في التصميم.
العنصر body { ... }: يضبط خصائص النصوص والألوان الخلفية للصفحة.
العناصر ul, a, img: تحديد التنسيق الأساسي لعناصر القوائم والروابط والصور.
العناصر .container, .card, .info: تنسيقات مخصصة لعناصر الصفحة مثل البطاقة ومعلومات البطاقة.
العنصر .info:hover { ... }: تحديد التنسيق عند تحويل الماوس على معلومات البطاقة.

تمثل هذه التنسيقات الأساسية التي تجعل الصفحة تظهر بشكل جذاب ومرتب، مما يسهم في تحسين تجربة المستخدم.

إضافة صورة الملف الشخصي

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

ولتنفيذ ذلك سوف نقوم بإنشاء مجلد جديد داخل مجلد الأصول assets، وسوف نقوم بتسمية المجلد الجديد "img"، بعد ذلك نقوم بإضافة صورة رمزية تمثل الوجه الخاص بالمستخدم أو الشخصية المقدمة في البطاقة، وبإمكانك تسمية ملف الصورة بأي اسم تريده، ففي حالتنا سوف نقوم بتسمية ملف الصورة بـ "perfil.png".

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

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

إنشاء ملف styles.scss

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

ولتنفيذ ذلك سوف نقوم بإنشاء مجلد جديد داخل مجلد الأصول assets، وسوف نقوم بتسمية المجلد الجديد "scss"، بعد ذلك سنقوم بإنشاء ملف باسم "styles.scss" الذي سوف تكون وظيفته استدعاء الثلاثة ملفات المسؤولة عن تصميم البطاقة.

الكود:

@import 'config/variables';
@import 'base/base';
@import 'components/card';

شرح الكود:

السطر الأول، يتم استيراد ملف `variables` الذي يحتوي على المتغيرات التي تحدد الألوان وحجم الخطوط والخط الرئيسي المستخدم في المشروع، وهذا يتيح إمكانية تحديد الأنماط البصرية بشكل مركزي، مما يسهم في تحسين تجانس التصميم.
السطر الثاني، يتم استيراد ملف `base` الذي يحتوي على الأسلوب الأساسي للمشروع، مثل: تحديد خصائص الهيكل العام للصفحة والأسلوب النصي العام.
السطر الثالث، يتم استيراد ملف `card` الذي يحتوي على تنسيقات البطاقة ومكوناتها، وهذا يجعل الكود أكثر تنظيمًا ويسهم في الحفاظ على هيكلية المشروع.

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

فباستخدام ملف `styles.scss` كنقطة تجميع للأنماط والمتغيرات، يصبح التطوير أكثر فعالية وإدارةً.

إنشاء ملف base.scss_

يُعد ملف `base.scss_` هو النقطة التي تُسلط الضوء على تعريفات الأساسيات اللازمة لجعل الصفحة أكثر قراءة وتصفحًا، ويتضمن هذا الملف تعريفات للعديد من العناصر الأساسية التي تشكل هيكل الصفحة وتحدد سماتها الرئيسية.

ولتنفيذ ذلك سوف نقوم بإنشاء مجلد جديد داخل مجلد scss، وسوف نقوم بتسمية المجلد الجديد "base"، بعد ذلك سنقوم بإنشاء ملف باسم "base.scss_" ثم نكتب بداخله الشيفرة البرمجية التالية.

الكود:

/*=============== الأساسيات ===============*/
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body{
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
}

ul{
    list-style: none;
}

a{
    text-decoration: none;
}

img{
    max-width: 100%;
    height: auto;
}

شرح الكود:

العنصر `*{}`: لتعيين قيم الـ `box-sizing` والتي تحدد كيف يتم حساب حجم العناصر وتخطيطها في الصفحة.
العنصر `body{}`: لتحدد خصائص النصوص الرئيسية للصفحة، مثل: نوع الخط وحجم الخط، ولون الخلفية، ولون النص.
العنصر `ul{}`: لإزالة النقاط السوداء التي تظهر أصلاً مع القوائم.
العنصر `a{}`: لإزالة التأثير الافتراضي للروابط وتحدد النصوص المستخدمة للروابط باللون الافتراضي.
العنصر `img{}`: لتحدد خصائص الصور، مثل: أقصى عرض وارتفاع للصور والتي تساعد في ضمان توافق الصور مع تصميم الصفحة.

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

فمن خلال استخدام ملف `base.scss_`، يتسنى للمطورين توحيد التصميم وتنظيم الأنماط الأساسية، مما يسهم في تحسين تجربة المستخدم.

إنشاء ملف card.scss_

في ملف `card.scss_`، يتم تعريف تصميم وتنسيقات البطاقة الرئيسية للمشروع، حيث يلعب هذا الملف دورًا حيويًا في تحديد شكل وأسلوب العرض للبطاقة، مما يسهم في جذب الانتباه وتوفير تجربة مرئية ممتازة.

ولتنفيذ ذلك سوف نقوم بإنشاء مجلد جديد داخل مجلد scss، وسوف نقوم بتسمية المجلد الجديد "components"، بعد ذلك سنقوم بإنشاء ملف باسم "card.scss_" ثم نكتب بداخله الشيفرة البرمجية التالية.

الكود:

/*=============== البطاقة ===============*/
.container{
    height: 100vh;
    margin-inline: 1.5rem;
    display: grid;
    place-items: center;
}

.card{
    position: relative;
    width: 290px;
    background: var(--gradient-color);
    border-radius: 1rem 1rem 11rem 11rem;
    padding: 2.5rem 1.5rem 3.5rem;
    text-align: center;
    box-shadow: 0 8px 32px hsla(178, 55%, 20%, .15);

    &__img{
        width: 90px;
    }
    &__border{

/*=============== Github باقي الكود ستجدونه في مستودع ===============*/

شرح الكود:

العنصر `.container{}`: يُعيد تعريف خصائص الحاوية الرئيسية للصفحة، حيث يُحدد ارتفاع الحاوية ويوضح التموضع في وسط الصفحة.
العنصر `.card{}`: يحتوي على تعريفات البطاقة الرئيسية، مع تحديد الشكل العام والألوان المستخدمة، وتوفر هذه القواعد تصميمًا فريدًا للبطاقة، مما يبرز العناصر المختلفة بشكل ملفت للنظر.
العنصر `position: relative;`: يقوم بتعيين البطاقة بوضع نسبي لتمكين استخدام مواقع التموضع النسبية داخلها.
العنصر `width: 290px;`: يقوم بتحديد العرض الإجمالي للبطاقة.
العنصر `background: var(--gradient-color);`: يقوم باستخدام تدرج الألوان كخلفية للبطاقة.
العنصر `border-radius: 1rem 1rem 11rem 11rem;`: يقوم بتحديد حواف مستديرة للبطاقة لإضفاء لمسة جمالية.
العنصر `padding: 2.5rem 1.5rem 3.5rem;`: يقوم بتحديد التباعد الداخلي لمحتوى البطاقة.
العنصر `box-shadow: 0 8px 32px hsla(178, 55%, 20%, 0.15);`: يقوم بإضافة ظل للبطاقة لتحسين التباين والعمق.
العنصر `.card__img{}`: يعمل على إضافة تعريفات صورة البروفايل داخل البطاقة.
العنصر `width: 90px;`: يقوم بتحديد عرض الصورة.
العنصر `.card__border{}`: يعمل على إضافة تعريفات لحاشية البطاقة التي تحيط بصورة البروفايل.
العنصر `width: 124px;`: يقوم بتحديد عرض الحاشية.
العنصر `height: 124px;`: يقوم بتحديد ارتفاع الحاشية.
العنصر `background-color: var(--first-color-light);`: يقوم بتعيين لون الخلفية.
العنصر `border-radius: 50%;`: يجعل الحاشية دائرية.
العنصر `.card__perfil{}`: يعمل على إضافة تعريفات للقسم الذي يحتوي على صورة البروفايل داخل الحاشية.
العنصر `width: 104px;`: يقوم بتحديد عرض قسم صورة البروفايل.
العنصر `height: 104px;`: يقوم بتحديد ارتفاع قسم صورة البروفايل.
العنصر `background-color: var(--first-color-lighten);`: يقوم بتعيين لون الخلفية الفاتح.
العنصر `border-radius: 50%;`: يجعل قسم صورة البروفايل دائري.
العنصر `.card__name, .card__profession{}`: يعمل على إضافة تعريفات لاسم المستخدم والمهنة داخل البطاقة، مثل: أن يتخذ الاسم اللون الأبيض، وتحديد حجم الخط والوزن لتحقيق توازن في التصميم.

وتستمر الشيفرة البرمجية لملف `card.scss_` في توفير تفاصيل تصميم البطاقة، مما يسهم في تحقيق توازن بين الجمال والوظائف المطلوبة للمشروع.

إنشاء ملف variables.scss_

يعتبر ملف `variables.scss_` من الأقسام الحيوية في تقسيم المشروع، حيث يقوم بتعريف المتغيرات التي تُستخدم في جميع ملفات الأنماط لتحديد الألوان والخطوط المستخدمة، كما يلعب هذا الملف دورًا هامًا في تحقيق التوحيد وسهولة التعديل على التصميم بشكل شامل.

ولتنفيذ ذلك سوف نقوم بإنشاء مجلد جديد داخل مجلد scss، وسوف نقوم بتسمية المجلد الجديد "config"، بعد ذلك سنقوم بإنشاء ملف باسم "variables.scss_" ثم نكتب بداخله الشيفرة البرمجية التالية.

الكود:

/*=============== خطوط جوجل ===============*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500');

/*=============== متغيرات سي إس إس ===============*/
:root{
    /*========== الألوان ==========*/
    /*وضع الألوان HSL (تدرج اللون، التشبع، الإضاءة)*/
    --first-color: hsl(175, 55%, 40%);
    --first-color-light: hsl(175, 30%, 48%);
    --first-color-lighten: hsl(175, 40%, 62%);
    --gradient-color: linear-gradient(180deg, 
                    hsl(178, 35%, 45%), 
                    hsl(178, 55%, 28%));
    --title-color: hsl(175, 40%, 16%);
    --text-color: hsl(175, 8%, 50%);
    --white-color: #fff;
    --body-color: hsl(175, 100%, 99%);

    /*========== الخط والطباعة ==========*/
    /*.5rem = 8px | 1rem = 16px ...*/
    --body-font: 'Poppins', sans-serif;
    --h2-font-size: 1.25rem;
    --normal-font-size: .938rem;
    --smaller-font-size: .75rem;
}

شرح الكود:

السطر الأول، يقوم باستيراد خطوط Google Fonts من نوع Poppins بوزن 400 و 500 و 600، مما يوفر خيارات متعددة لاستخدامها في المشروع.
العنصر `:root{}`: يعمل على إضافة تعريف المتغيرات الجذرية التي تُستخدم لتحديد الألوان والخطوط في المشروع بشكل عام.
العنصر `first-color--`: يحدد لون أساسي للمشروع باستخدام نموذج HSL.
العنصر `first-color-light--`: يحدد لون أفتح باستخدام نموذج HSL.
العنصر `first-color-lighten--`: يحدد لون أفتح بنسبة أعلى.
العنصر `gradient-color--`: يحدد تدرج الألوان الذي يستخدم كخلفية للبطاقة.
العنصر `title-color--`: يحدد لون العناوين في المشروع.
العنصر `text-color--`: يحدد لون النصوص.
العنصر `white-color--`: يحدد لون الخلفية البيضاء.
العنصر `body-color--`: يحدد لون خلفية الصفحة الرئيسية.

ويتمثل دور ملف `variables.scss_` في تحديد الطابع الجمالي والهيكلي للمشروع، مما يوفر قاعدة قوية للأنماط والتصميم في مكان واحد، وبالتالي يسهل الصيانة والتعديل.

النتيجة النهائية

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

إليكم رابط مستودع المشروع الذي يحتوي على الشيفرة البرمجية لبطاقة الملف الشخصي بمنصة Github.

الخاتمة

وبهذا نكون قد استكملنا رحلة إنشاء بطاقة ملف شخصي مستجيبة Responsive profile card باستخدام HTML و CSS، فقد قمنا بإنشاء كل جزء من هيكل المشروع وفهم الشيفرات البرمجية المستخدمة في كل ملف، بدأً من ملف `index.html` الذي يحدد هيكل الصفحة ومحتواها، إلى ملف `styles.css` الذي يقوم بتحديد تنسيقات الأنماط الأساسية، مرورًا بالملفات الفرعية الأخرى مثل: `styles.scss` و `base.scss_` و `card.scss_` و `variables.scss_` التي تعزز تقسيم المشروع وتجعله سهل الصيانة.

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

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

لذلك ندعوكم إلى متابعة رحلتكم في عالم تطوير الويب والابتكار التكنولوجي، مستعينين بالمعلومات والمهارات التي اكتسبتموها في هذه الرحلة الملهمة.

تعديل المقال

وادي التكنولوجيا | بالعربية

كيفية إنشاء بطاقة ملف شخصي مستجيبة Responsive profile card باستخدام HTML و CSS [الشيفرة البرمجية مضمنة]

إنشاء بنية المشروع

إنشاء ملف index.html الأساسي للبطاقة

إنشاء ملف styles.css الأساسي للبطاقة

إضافة صورة الملف الشخصي

إنشاء ملف styles.scss

إنشاء ملف base.scss_

إنشاء ملف card.scss_

إنشاء ملف variables.scss_

النتيجة النهائية

الخاتمة

مقالات قد تهمك

أقسام الوصول السريع ( مربع البحث )

كيفية إنشاء بطاقة ملف شخصي مستجيبة Responsive profile card باستخدام HTML و CSS [الشيفرة البرمجية مضمنة]

إنشاء بنية المشروع

إنشاء ملف index.html الأساسي للبطاقة

إنشاء ملف styles.css الأساسي للبطاقة

إضافة صورة الملف الشخصي

إنشاء ملف styles.scss

إنشاء ملف base.scss_

إنشاء ملف card.scss_

إنشاء ملف variables.scss_

النتيجة النهائية

الخاتمة

مقالات قد تهمك