Written with AI assistance from the source video. The video is the authority.
Log in to leave a comment
No posts yet
تبدو ملفات HTML التي يقدمها Claude جيدة في البداية، ولكن بمجرد تجاوز عدد الصفحات 3 صفحات، يصبح التعديل كابوساً. إن فتح 10 ملفات لتغيير حجم خط واحد هو مضيعة للوقت. قم بفصل الكود.
/assets/css والصور في /assets/img والتنسيقات (Layouts) في /components.main-header.html. هذا يقلل من احتمالية أخطاء Claude في مسارات الملفات.<link> في أعلى ملفات HTML الرئيسية لإدارة التنسيقات من مكان مركزي.من خلال القيام بذلك، إذا قمت بتعديل جزء الهيدر (Header) مرة واحدة، فسيتم تطبيق التعديلات على جميع الصفحات فوراً. لن تحتاج إلى إضاعة الوقت في تعديل كل ملف على حدة.
لا تدخل أكواد الألوان مباشرة في كل مكون. سيتعين عليك البحث في آلاف الأسطر في كل مرة ترغب فيها بتغيير لون زر. بدلاً من ذلك، استخدم متغيرات CSS.
/assets/css/global.css.:root { --main-color: #000000; --sub-color: #ffffff; }.background-color: var(--main-color);.لاحقاً، إذا تغيرت ألوان العلامة التجارية، ستحتاج فقط لتعديل ملف واحد في 3 ثوانٍ. سيتغير لون الأزرار في جميع الصفحات دفعة واحدة. هذا أكثر كفاءة بكثير من تعديل التصميم يدوياً في كل مرة.
تتشتت التركيز إذا كنت تقوم بتعديل الكود ثم العودة للمتصفح وإعادة تحميل الصفحة باستمرار. قم بتثبيت إضافة Live Server في VS Code.
شاهد التغييرات في الوقت الفعلي دون الحاجة لإعادة تحميل الصفحة. سينخفض الوقت المستغرق في تعديلات التصميم إلى النصف.
يكتب Claude الكود بطريقة مختلفة في كل مرة تطلب منه ذلك. حدد القواعد مسبقاً قبل بدء المحادثة. قم بإنشاء ملف CLAUDE.md في المجلد الجذر للمشروع.
CLAUDE.md.<code>).CLAUDE.md عند الكتابة".سيقل بشكل ملحوظ حدوث أي تعقيدات عشوائية في الكود من قبل الذكاء الاصطناعي.
لا تشغل بالك بإعدادات الخادم أو تكوينات البيئة المعقدة. باستخدام Vercel، سيعمل موقعك بمجرد رفع الكود.
لا حاجة لإدارة الخادم بنفسك. يتم إنشاء عنوان النطاق (Domain) تلقائياً، وإذا حدثت مشكلة، يمكنك دائماً العودة إلى الإصدار السابق. ارفع الكود الآن.