مرحبًا بعودتك.
لذلك تعلمنا أساسيات القارورة.
نحن نفهم ما تفعله الخوادم ونعرف أيضًا ما تفعله المتصفحات.
لكن لنكن صادقين هنا.
هذا ممل نوعًا ما.
أعني ، هذا ليس مثيرا للإعجاب.
إذا أظهرت هذا لصاحب عمل محتمل ، فسوف ينظرون إليك كشخص مجنون.
لذلك دعونا في الواقع نبني محفظة ذات مظهر جميل بناءً على ما تعلمناه حتى الآن.
الآن ، لدي هدية صغيرة لك.
هذه هي حقيقة أنك لن تضطر إلى كتابة HTML و CSS و JavaScript الخاصة بك لأنه مرة أخرى ، هذه ليست
دورة تطوير الويب.
ولحسن الحظ بالنسبة لنا ، إذا كنت تستخدم Google في أي مكان عبر الإنترنت للحصول على شيء مثل القوالب المجانية أو القوالب المجانية
بتنسيق HTML ، فيمكنك العثور على بعض مواقع الويب الرائعة التي يمكنك استخدامها مجانًا.
على سبيل المثال ، دعنا ننظر إلى الكون هنا وسأرتبط بهذا المورد حتى تتمكن من إلقاء
نظرة بنفسك أيضًا إذا قمت بمعاينته.
تحقق من ذلك.
لديك موقع ويب صغير لطيف أو صفحة محفظة يمكنك استخدامها فقط.
كم ذلك رائع؟
وهو بالفعل متوافق مع الأجهزة اللوحية والجوّال ، لذا فقد تم تصميم كل شيء مسبقًا من أجلك.
هذا رائع ، أليس كذلك؟
فكيف يمكننا استخدام هذا؟
حسنًا ، دعنا فقط ننزله.
وبالمناسبة ، كما تتابع ، يمكنك في الواقع استخدام أيهما تريد.
لكن في الوقت الحالي ، دعنا نستخدم الكون فقط.
فقط لأن هناك رائد فضاء صغير هنا ، يبدو رائعًا.
دعنا فقط ننزِّل هذا ونرى ما سيحدث.
حسنًا ، لدي سؤال صغير يقول ، كيف نريد تنزيل النموذج؟
في حالتنا ، نريد اختيار HTML.
وها أنت ذا.
نحصل على مجلد مضغوط صغير لطيف والآن قمنا بتنزيله.
لذلك دعونا نفتح هذا.
ويا فتى ، هذه مجموعة كبيرة من الملفات والمجلدات.
إذن ما الذي يجب أن نحصل عليه من هنا؟
حسنًا ، هناك بعض الأشياء.
أولاً ، هذه هي الصفحة النموذجية.
نحن في الواقع لسنا بحاجة إلى هذا ، لذلك دعونا فقط ننقله إلى سلة المهملات.
بعد ذلك ، لدينا أصول.
هذه ، حسنًا ، أصول مختلفة لكي تعمل صفحتنا ، مثل صفحة رائد الفضاء.
لذلك سنحافظ على ذلك.
ثم لدينا صفحات HTML الخاصة بنا.
الذي نحتاجه بالتأكيد.
ومن ثم يبدو أن لدينا بعض ملفات JavaScript وملفات CSS.
الآن هناك نقطة GZ هنا ، والتي نسميها ملف مضغوط ، ملف مضغوط GZ.
هذه مجرد طريقة للخادم لإرسال ملف أو ملف جافا سكريبت ، والذي يمكنك رؤيته هو 138 كيلو
بايت ، ولكن بشكل مضغوط ، أي 44 كيلو بايت.
بهذه الطريقة نرسل بيانات أقل إلى الواجهة الأمامية.
ومن ثم لدينا أيضًا شيء مثل MAP ، والذي يساعدنا بالفعل أثناء تصحيح الأخطاء.
لكن في حالتنا ، لا داعي للقلق بشأن هذا في الوقت الحالي.
لذلك دعونا نزيل كل ملفات GZIP والخريطة.
لذلك سننقلها إلى المهملات بحيث يكون لدينا ملف CSS واحد وملف JavaScript واحد ، وبعد ذلك تكون جميع الملفات
الأخرى عبارة عن ملفات HTML لصفحاتنا المختلفة.
الآن ما سنفعله هو أننا سنقوم بنسخ هذا ونقله إلى مجلد مشروعنا.
تذكر هذا المجلد هنا؟
لذلك من الناحية المثالية ، ننقل ملفات HTML إلى القوالب والملفات الثابتة ، وهي ملفات CSS و JavaScript
وربما الأصول الموجودة هنا.
هذه هي الصور هنا.
لذلك دعونا نفعل ذلك.
لدي خادم الويب الخاص بي هنا.
سأقوم أولاً بنسخ ولصق ما قمنا بنسخه للتو.
ودعنا ننقل جميع ملفات HTML الخاصة بنا.
في قوالبنا.
وأنت تعرف ماذا ، دعنا نزيل قوالبنا الحالية أيضًا لأننا لم نعد بحاجة إليها.
لدينا ملف HTML الجميل الآن.
وبعد ذلك فقط احصل على كل هؤلاء.
لدينا فهرس جديد. html سيكون أجمل بكثير من مواقعنا القديمة ، لذلك نريد استخدام
ذلك.
لذلك دعونا ننقل كل ذلك إلى قوالب.
وبعد ذلك ، لنقم بملف JS و CSS بالإضافة إلى مجلد الأصول في الملف الثابت.
رائع.
والآن بعد أن قمنا بهذا الإعداد ، دعنا نعود إلى مشروعنا وننظر إليه.
لدينا الكثير من HTML الذي لم نكتبه ، لكن لحسن الحظ تم إنشاؤه بالفعل لنا.
الآن آخر جزء من الإعداد هو أنه نظرًا لأننا نقلنا ملفاتنا ، نحتاج إلى ضبط الروابط بين HTML و
CSS وجافا سكريبت وجميع ملفات الأصول.
لذلك إذا قمنا بالتمرير إذا انتقلنا إلى فهرسة HTML.
نرى أننا نبحث عن أيقونة الفاتيكان والأصول.
ولكن نظرًا لوجود هذا في مجلد ثابت ، يتعين علينا إضافة ثابت هنا.
لذلك دعونا نكتشف أي مكان آخر نستخدم فيه الأصول هنا.
حسنا.
لذلك يبدو أننا نجعل هذا أكبر قليلاً.
لذلك يبدو هنا لصورة الخلفية لدينا.
نحن نبحث مرة أخرى عن صورة الفضاء ، ولكن هذا كما نعلم في المجلد الثابت.
ودعونا نرى أين لدينا هنا أيضًا.
لنقم بالثبات.
لنستمر.
ثابتة.
حسنا.
كل شيء على ما يرام.
الآن لدينا مجلد ثابت.
أوه ، وعلينا التأكد من إضافة شرطة مائلة أمام النقطة.
تعني النقطة فقط الدليل الحالي ثم ابحث في المجلد الثابت.
لذا دعنا نعود ، ونتأكد من أننا نفعل ذلك في كل شيء.
هناك نذهب.
وها نحن ذا.
الآن دعونا نحفظ هذا.
ولا أعتقد أننا انتهينا تمامًا بعد ، ولكن في الوقت الحالي ، دعنا ننتقل إلى خادمنا.
فطيرة نقطية.
وبالنسبة لمسار المنزل ، فلنقم بإزالة ما كان لدينا من قبل.
ودعونا نسميها وظيفتي المنزلية.
هذا لا يتطلب أي معايير ، وبدلاً من ذلك سيعود لنا.
فهرسنا.
HTML مع عدم وجود ماضي في المعلمات.
لذلك دعونا نحفظ.
العودة إلى صفحتنا.
أو موقع الويب الخاص بي.
ونرى ما نحصل عليه عندما نقوم بتحديث.
حسنا.
هذا موقع ويب جميل وقبيح جدًا ، لكن يبدو أننا على الأقل نعرض شيئًا ما.
لكن على الفور ، نلاحظ أنه لا يوجد CSS مطبق.
يبدو أن لدينا بعض HTML ، لكن الروابط لا تعمل أيضًا.
مرة أخرى ، هذا لأنه يتعين علينا تحديث الروابط بين الملفات.
إذن ما سنفعله هو في الواقع العودة إلى فهرسة نقطة HTML وفي علامة الرأس نرى أن لدينا ورقة الأنماط الخاصة بنا ، ملف
CSS الخاص بنا.
ولكن مرة أخرى ، يتعين علينا تحديث هذا لجعله ثابتًا.
مجلد.
بالإضافة إلى ملف JavaScript ، والذي إذا مررنا حتى النهاية ، فلدينا ملف JS
هنا.
والذي سيكون مرة أخرى في المجلد الثابت.
حسنًا ، دعنا نحفظ.
وعد إلى الوراء ومعرفة ما إذا كان ذلك يجعل الأمور أفضل.
مهلا ، انظر إلى ذلك.
هذا رائع.
ضع في اعتبارك أن هذا يبدو كبيرًا بعض الشيء لأنني أزيد من حجم موقع الويب الخاص بي عن طريق القيام بأمر زائد وناقص
فقط حتى نتمكن من الرؤية بشكل أفضل.
لكن هذا رائع جدًا.
الآن ، إذا قمت بالنقر فوق دعنا نقول يعمل.
حسنًا ، لدي محطة عمل.
HTML غير موجود.
فكيف يمكننا إصلاح ذلك؟
نحن نعلم بالفعل كيف نفعل ذلك ، أليس كذلك؟
كل ما نحتاج إلى القيام به هو تحديث هذه المسارات المختلفة بحيث تشير إلى القالب المناسب.
الآن ، في الفيديو التالي ، سأوضح لك كيفية القيام بذلك ، لكني أريدك أن تحاول القيام
بذلك بنفسك ، لأننا تعلمنا ذلك الآن.
لذا حاول أن تجعل موقع الويب يعمل تمامًا كما كان لدينا.
هنا في قوالب المزج الخاصة بنا وسأراكم في الفيديو التالي.