# إنشاء موقع سيرة ذاتية باستخدام vscode.dev _ما مدى روعة أن يطلب منك مسؤول التوظيف سيرتك الذاتية فتقوم بإرسال رابط له؟_ 😎 ## الأهداف بعد هذا التمرين، ستتعلم كيفية: - إنشاء موقع إلكتروني لعرض سيرتك الذاتية. ### المتطلبات الأساسية 1. حساب على GitHub. قم بزيارة [GitHub](https://github.com/) وأنشئ حسابًا إذا لم يكن لديك واحد بالفعل. ## الخطوات **الخطوة 1:** أنشئ مستودعًا جديدًا على GitHub وأعطه اسم `my-resume`. **الخطوة 2:** أنشئ ملفًا باسم `index.html` في المستودع الخاص بك. سنضيف ملفًا واحدًا على الأقل أثناء وجودنا على github.com لأنك لا تستطيع فتح مستودع فارغ على vscode.dev. انقر على رابط `creating a new file`، اكتب الاسم `index.html`، ثم اختر زر `Commit new file`. ![إنشاء ملف جديد على github.com](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.ar.png) **الخطوة 3:** افتح [VSCode.dev](https://vscode.dev) واختر زر `Open Remote Repository`. انسخ رابط المستودع الذي أنشأته للتو لموقع سيرتك الذاتية والصقه في مربع الإدخال: _استبدل `your-username` باسم المستخدم الخاص بك على GitHub._ ``` https://github.com/your-username/my-resume ``` ✅ إذا نجحت العملية، ستظهر لك مشروعك وملف `index.html` مفتوحًا في محرر النصوص على المتصفح. ![إنشاء ملف جديد](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.ar.png) **الخطوة 4:** افتح ملف `index.html`، الصق الكود أدناه في منطقة الكود واحفظه.
كود HTML المسؤول عن محتوى موقع سيرتك الذاتية. ضع اسمك هنا!

نبذة عني

اكتب نبذة قصيرة عن نفسك!

الخبرة العملية

المسمى الوظيفي

اسم المؤسسة هنا | شهر البداية – شهر النهاية

  • المهمة 1 - اكتب ما قمت به!
  • المهمة 2 - اكتب ما قمت به!
  • اكتب النتائج/الأثر الذي حققته

المسمى الوظيفي 2

اسم المؤسسة هنا | شهر البداية – شهر النهاية

  • المهمة 1 - اكتب ما قمت به!
  • المهمة 2 - اكتب ما قمت به!
  • اكتب النتائج/الأثر الذي حققته
قم بإضافة تفاصيل سيرتك الذاتية لاستبدال النصوص المؤقتة في كود HTML. **الخطوة 5:** مرر فوق مجلد My-Resume، انقر على أيقونة `New File ...` وأنشئ ملفين جديدين في مشروعك: `style.css` و `codeswing.json`. **الخطوة 6:** افتح ملف `style.css`، الصق الكود أدناه واحفظه.
كود CSS لتنسيق تخطيط الموقع. body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 16px; max-width: 960px; margin: auto; } h1 { font-size: 3em; letter-spacing: .6em; padding-top: 1em; padding-bottom: 1em; } h2 { font-size: 1.5em; padding-bottom: 1em; } h3 { font-size: 1em; padding-bottom: 1em; } main { display: grid; grid-template-columns: 40% 60%; margin-top: 3em; } header { text-align: center; margin: auto 2em; } section { margin: auto 1em 4em 2em; } i { margin-right: .5em; } p { margin: .2em auto } hr { border: none; background-color: lightgray; height: 1px; } h1, h2, h3 { font-weight: 100; margin-bottom: 0; } #mainLeft { border-right: 1px solid lightgray; }
**الخطوة 6:** افتح ملف `codeswing.json`، الصق الكود أدناه واحفظه. { "scripts": [], "styles": [] } **الخطوة 7:** قم بتثبيت إضافة `Codeswing` لمعاينة موقع السيرة الذاتية في منطقة الكود. انقر على أيقونة _`Extensions`_ في شريط النشاط واكتب Codeswing. انقر على زر _التثبيت الأزرق_ في شريط النشاط الموسع لتثبيت الإضافة أو استخدم زر التثبيت الذي يظهر في منطقة الكود بمجرد تحديد الإضافة لتحميل معلومات إضافية. بعد تثبيت الإضافة مباشرة، لاحظ التغييرات التي طرأت على مشروعك 😃. ![تثبيت الإضافات](../../../../8-code-editor/images/install-extension.gif) هذا ما ستراه على شاشتك بعد تثبيت الإضافة. ![إضافة Codeswing قيد العمل](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.ar.png) إذا كنت راضيًا عن التغييرات التي أجريتها، مرر فوق مجلد `Changes` وانقر على زر `+` لتسجيل التغييرات. اكتب رسالة الالتزام _(وصف للتغيير الذي أجريته على المشروع)_ وقم بتأكيد التغييرات بالنقر على علامة `check`. بمجرد الانتهاء من العمل على مشروعك، اختر أيقونة القائمة في الزاوية العلوية اليسرى للعودة إلى المستودع على GitHub. تهانينا 🎉 لقد أنشأت للتو موقع سيرتك الذاتية باستخدام vscode.dev في خطوات قليلة. ## 🚀 التحدي افتح مستودعًا بعيدًا لديك أذونات لإجراء تغييرات عليه وقم بتحديث بعض الملفات. بعد ذلك، حاول إنشاء فرع جديد مع تغييراتك وقم بإنشاء طلب سحب. ## المراجعة والدراسة الذاتية اقرأ المزيد عن [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) وبعض ميزاته الأخرى. --- **إخلاء المسؤولية**: تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.