Скачать или смотреть كيف تصنع أول موقع لك اليوم 💻! | Html & CSS

شكرا لك لإختيارك هذا المقطع!

في هذا المقطع راح نصنع موقع شخصي متكامل بكل سهولة، هذا هو الموقع:
https://tutorial-project-tz9l8.kinsta...

من بداية تحميل بيئة التطوير واللي هي برنامج visual stuido code الشهير، الى بناء كل قسم بشكل واضح وبسيط، راح تقدر تعرض اعمالك وتحط وسائل التواصل الاجتماعي الخاصة فيك، والانتهاء بيكون عند رفع المشروع على منصة github المشهورة بين المبرمجين واستضافة الموقع ونشره للجميع، وفي نهاية المقطع ان شاء الله بيكون معاك رابط موقع شغال وآمن 100% وتقدر ترسله للناس اللي تحب.

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

هذا المقطع بعد الله ماكان صار بسبب اخوي مصعب يعطيه العافية، هو اللي برمج الموقع وجهز المقطع وحتى ساعد في مونتاجه، فا اذا حاب تصنع موقع او تطبيق تواصل مع مصعب على ايميله او حساباته وراح يزبطك ان شاء الله، موقع مصعب الشخصي: https://musaabk.vercel.app/ar


-------------------------------------------------------------------------------
المصادر اللي نحتاجها في المقطع:


رابط مشروع الموقع اللي تم صناعته في المقطع على منصة Github اذا حاب تشوف كل الاكواد بنفسك:
https://github.com/MusaabK99/Portfoli...

رابط كل الصور والـAssets اللي نحتاجها لصنع الموقع من صور وايكونز والى آخره:
https://sop-dev.com/Portfolio-Tutorial

روابط اي شيء تم ذكره انك تقدر تنسخه مثل هيكل ـHTML والى آخره:
https://sop-dev.com/Portfolio-Tutorial





رابط موقع تحميل بيئة التطوير فيجوال ستوديو كود (Visual Studio Code):
https://code.visualstudio.com/download


اسماء الاضافات اللي استخدمناها على بيئة التطوير:

Live Server ( مهمة جدا لعرض الموقع وتحديثاته بشكل مباشر مثل المقطع ):
https://marketplace.visualstudio.com/...

Material Icon Theme:
https://marketplace.visualstudio.com/...

Auto Close Tag:
https://marketplace.visualstudio.com/...

Auto Rename Tag:
https://marketplace.visualstudio.com/...


موقع تحميل الخط:
https://fonts.google.com/

وهذا النص اللي نسخناه عشان نحمل النص على الموقع حقنا:
https://sop-dev.com/Portfolio-Tutorial

تعديلات الـCSS عشان نخلي الموقع مستجيب مع احجام الشاشات المختلفة اذا حاب تنسخها ( ننصحك تكتبها بنفسك عشان تتعلم):
https://sop-dev.com/Portfolio-Tutorial


رابط موقع Github اللي نحتاجه في الرفع:
https://github.com/

رابط تطبيق Github desktop عشان نستفيد من مزاياه بالتحديث المباشر:
https://github.com/apps/desktop

رابط موقع git اللي نحتاجه لتشغيل تطبيق Github desktop:
https://git-scm.com/

مقطع شرح لتحميل git اذا واجهتك اي مشاكل اثناء التحميل:
   • كيفية تثبيت Git على نظام التشغيل Windows 1...  


رابط موقع Sevalla لإستضافة الموقع ورفعه ونشره على الانترنت، وشكرا على رعايتهم لهذا الفيديو:
https://sevalla.com/static-site-hosti...



-------------------------------------------------------------------------------

تقسيم المقطع:

0:00 المقدمة ( مهمة جدا )
1:10 القسم الأول: تحميل بيئة التطوير وشرحها ( Visual Studio Code )
5:38 القسم الثاني: بداية البرمجة وبناء المشروع ( Starting )
13:10 القسم الثالث: صنع الهيدر ( Header )
24:41 القسم الرابع: تحميل الخط (Downloading the font)
25:44 القسم الخامس: صنع الواجهة الرئيسية للموقع ( Hero )
33:43 القسم السادس: صنع قسم التعريف ( About Me )
37:48 القسم السابع: صنع قسم عرض الأعمال ( Works )
44:59 القسم الثامن: صنع قسم التواصل ( Contact Me )
50:05 القسم التاسع: صنع الفوتر ( Footer )
51:16 القسم العاشر: جعل الموقع مستجيب او مناسب لكل احجام الشاشات ( Responsiveness )
54:16 القسم الحادي عشر والأخير: استضافة الموقع ( Hosting )

-------------------------------------------------------------------------------

للتواصل أو الإعلان: [email protected]

اذا حاب تتعلم تطوير الألعاب:
https://linktr.ee/Sopdev


لاتنسى الاشتراك ولاتنسى تتابعني في حساباتي تشرفني :

جميع روابطي في مكان واحد: https://linktr.ee/Sopdev

القناة الاساسية : ‪@Sop_dev‬

رابط موقعي : https://sop-dev.com/

إنستقرام :   / sop.dev  

تويتر :   / sopdevv  

تيك توك :   / sop.dev  

رابط سيرفري في الدسكورد :   / discord  

الباي بال : https://www.paypal.me/ahmadkubbi



جرب العابي من هنا :

https://sopdev.itch.io


اللهم صلي وسلم على سيدنا محمد .