تعلّم كيف ‹ 🖥️ كمبيوتر

🌐 كيف أتعلم تصميم المواقع HTML وCSS

⏱ قراءة 2 دقائق · فريق Faried

بداية تعلم بناء المواقع: ما هو HTML وCSS وJavaScript، أدوات مجانية، أول صفحة ويب، تصميم متجاوب للجوال، دعم العربية RTL، ومشاريع تدريبية ونشر الموقع.

كل موقع على الإنترنت مبني من ثلاث طبقات: HTML للمحتوى، وCSS للشكل، وJavaScript للتفاعل. البداية بالأولى والثانية سهلة وممتعة لأنك ترى النتيجة فورًا.

الأدوات (مجانية)

محرر أكواد مثل VS Code.
متصفح Chrome أو Firefox، مع أدوات المطور (F12).

أول صفحة

أنشئ ملفًا اسمه index.html واكتب فيه:

<!doctype html><html lang="ar" dir="rtl"><head><meta charset="utf-8"><title>صفحتي</title></head><body><h1>أهلًا بكم</h1><p>هذه أول صفحة لي.</p></body></html>

ثم افتحه بالمتصفح. لاحظ dir="rtl" لاتجاه العربية.

ماذا أتعلم بالترتيب؟

HTML: العناوين، الفقرات، الروابط، الصور، القوائم، الجداول، النماذج.
CSS: الألوان والخطوط، المسافات (margin وpadding)، الحدود.
التخطيط: Flexbox ثم Grid.
التصميم المتجاوب: صفحات تعمل على الجوال والكمبيوتر باستخدام @media.
JavaScript الأساسية: الأزرار، القوائم المنسدلة، التحقق من النماذج.

مشاريع تدريبية

صفحة تعريفية بك (سيرة ذاتية).
صفحة مطعم: قائمة طعام وصور وموقع.
نسخة مبسطة من صفحة موقع تحبه (للتدريب فقط، لا للنشر).
نموذج تواصل.

النشر مجانًا

خدمات مثل GitHub Pages تنشر موقعك الثابت مجانًا برابط، وبعدها يمكنك شراء اسم نطاق خاص.

بعد الأساسيات

اختر: تصميم الواجهات (UI/UX)، أو تطوير الواجهات بإطار مثل React، أو نظام إدارة محتوى مثل WordPress لعمل مواقع للعملاء بسرعة.