كيف تصنع أول موقع لك اليوم 💻! | Html & CSS

Video Description

شكرا لك لإختيارك هذا المقطع! في هذا المقطع راح نصنع موقع شخصي متكامل بكل سهولة، هذا هو الموقع: https://tutorial-project-tz9l8.kinsta.page/ من بداية تحميل بيئة التطوير واللي هي برنامج visual stuido code الشهير، الى بناء كل قسم بشكل واضح وبسيط، راح تقدر تعرض اعمالك وتحط وسائل التواصل الاجتماعي الخاصة فيك، والانتهاء بيكون عند رفع المشروع على منصة github المشهورة بين المبرمجين واستضافة الموقع ونشره للجميع، وفي نهاية المقطع ان شاء الله بيكون معاك رابط موقع شغال وآمن 100% وتقدر ترسله للناس اللي تحب. سواء كنت طالب او طالبة كبير او صغير او اي شخص حاب يدخل عالم برمجة المواقع فا هذا المقطع لك، بنستخدم ان شاء الله اساس لغات برمجة المواقع لغة الhtml ولغة الcss، وما راح نستخدم اي شيء اضافي، عشان كذا هذا الشرح راح يكون مناسب لك اذا كنت مبتدأ وماتعرف اي حاجة في عالم البرمجة، وراح يكون انطلاقتك في عالم صنع المواقع وان شاء الله تستمتع. هذا المقطع بعد الله ماكان صار بسبب اخوي مصعب يعطيه العافية، هو اللي برمج الموقع وجهز المقطع وحتى ساعد في مونتاجه، فا اذا حاب تصنع موقع او تطبيق تواصل مع مصعب على ايميله او حساباته وراح يزبطك ان شاء الله، موقع مصعب الشخصي: https://musaabk.vercel.app/ar ------------------------------------------------------------------------------- المصادر اللي نحتاجها في المقطع: رابط مشروع الموقع اللي تم صناعته في المقطع على منصة Github اذا حاب تشوف كل الاكواد بنفسك: https://github.com/MusaabK99/Portfolio-Tutorial رابط كل الصور والـ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/items?itemName=ritwickdey.LiveServer Material Icon Theme: https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme Auto Close Tag: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag Auto Rename Tag: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag موقع تحميل الخط: 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 اذا واجهتك اي مشاكل اثناء التحميل: https://youtu.be/VUj1ORV_26I?si=FcLymBId0gV6U78K رابط موقع Sevalla لإستضافة الموقع ورفعه ونشره على الانترنت، وشكرا على رعايتهم لهذا الفيديو: https://sevalla.com/static-site-hosting/?utm_source=youtube&utm_medium=video&utm_campaign=sop_static_site_march ------------------------------------------------------------------------------- تقسيم المقطع: 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/ إنستقرام : https://www.instagram.com/sop.dev/ تويتر : https://twitter.com/Sopdevv تيك توك : https://www.tiktok.com/@sop.dev? رابط سيرفري في الدسكورد : https://discord.gg/7zcaPjtpJb الباي بال : https://www.paypal.me/ahmadkubbi جرب العابي من هنا : https://sopdev.itch.io اللهم صلي وسلم على سيدنا محمد .