تجاوز إلى المحتوى

HTML وCSS: أول خطوة عملية في تطوير الويب

إعلان

دليل عملي من الصفر — مشاريع حقيقية

HTML وCSS: أول خطوة عملية في تطوير الويب

مش هتقرأ عن البرمجة. هتكتب أول صفحة ويب شغالة بإيدك قبل ما تخلص أول جزء من الدليل. HTML وCSS خطوة بخطوة، بمشاريع صغيرة، من غير حشو.

إعلان

أول سطر كود في عشر دقايق

خليني أوفر عليك وقت كتير في النقطة دي: HTML وCSS مش محتاجين ذكاء خارق ولا رياضيات. محتاجين حاجة واحدة بس — إنك تكتب بإيدك من أول يوم. المقال ده مش هيشرحلك نظريات، هيخليك تبني.

افتح المفكرة (Notepad) على جهازك دلوقتي. أيوه، المفكرة العادية. انسخ الكود ده فيها واحفظ الملف باسم test.html على سطح المكتب، وبعدين افتحه بالمتصفح:

<!– أول صفحة ويب في حياتك –> <h1>أنا بدأت أتعلم تطوير الويب</h1> <p>السطر ده اتكتب بكود HTML حقيقي.</p>

شفت اللي حصل؟ المتصفح فهم الكود وعرضه كصفحة ويب. السطر الأول بقى عنوان كبير، والتاني بقى فقرة. ده بالظبط اللي بيعمله مطور الويب كل يوم — بيكتب تعليمات، والمتصفح بينفذها. الفكرة كلها إنك بتتكلم لغة المتصفح بيفهمها.

طيب، السؤال اللي في دماغك دلوقتي: “هو الموضوع كله بالسهولة دي؟” — الإجابة الصادقة: البداية سهلة فعلًا، والاحتراف محتاج ممارسة. لكن الخبر الكويس إن المسافة بين “أول سطر” و”صفحة شكلها محترم” أقصر بكتير مما تتخيل. الدليل ده هياخدك في الرحلة دي خطوة بخطوة، وبنهايته هتكون بنيت صفحة بورتفوليو كاملة بإيدك.

قاعدة الدليل الذهبية: كل ما تقرأ كود، اكتبه بنفسك وجرّبه. القراءة من غير تطبيق في HTML وCSS بتساوي صفر. المتصفح هو معملك — جرّب، اغلط، عدّل، شوف النتيجة فورًا.

HTML وCSS: كل واحد بيعمل إيه بالظبط؟

قبل ما نغوص، لازم الصورة تبقى واضحة في دماغك. أي صفحة ويب في العالم مبنية من تلات طبقات. انت هتتعلم أول طبقتين — وهما الأساس اللي كل حاجة تانية بتتبني عليه.

الطبقة اللغة وظيفتها تشبيه بسيط
المحتوى والهيكل HTML بتحدد إيه اللي موجود في الصفحة: عناوين، فقرات، صور، روابط، أزرار هيكل البيت والطوب — الجدران والأبواب والشبابيك
الشكل والتنسيق CSS بتحدد الشكل: الألوان، الخطوط، المسافات، التوزيع على الصفحة الدهان والديكور والأثاث — اللي بيخلي البيت شكله حلو
التفاعل والسلوك JavaScript بتخلي الصفحة تتفاعل: قوائم بتتفتح، أزرار بتنفذ أوامر، بيانات بتتحدث الكهربا والأجهزة — اللي بيخلي البيت “عايش”

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

HTML: لغة الوصف مش لغة البرمجة

HTML اختصار HyperText Markup Language — لغة توصيف النص التشعبي. خلّي بالك من كلمة “توصيف” (Markup) مش “برمجة” (Programming). انت مش بتكتب أوامر منطقية ولا معادلات — انت بتوصّف للمتصفح: “السطر ده عنوان، والفقرة دي نص عادي، والصورة دي حطها هنا”.

الوصف بيتم بوسوم (Tags). الوسم له شكل ثابت: بيفتح بـ <h1> وبيقفل بـ </h1>، واللي بينهم هو المحتوى. معظم عناصر HTML ماشية على نفس النمط ده — وده معناه إنك لو فهمت الفكرة مرة واحدة، هتفهم 90% من اللغة.

CSS: لغة الشكل

CSS اختصار Cascading Style Sheets — أوراق الأنماط المتتالية. وظيفتها الوحيدة: الشكل. بتقول للمتصفح: “العنوان ده لونه أزرق وحجمه كبير، والفقرة دي خطها مريح، والصورة دي في النص”.

القاعدة في CSS بسيطة: بتختار العنصر (Selector)، وبعدين بتحدد الخصائص (Properties) والقيم (Values). مثال:

h1 { color: blue; font-size: 32px; }

الكود ده بيقول: “كل عنوان h1 لونه أزرق وحجمه 32 بكسل”. شايف البساطة؟ انت بتختار مين (h1)، وبتقول عاوزه يبقى شكله إزاي. مفيش منطق معقد، مفيش خوارزميات. وصف شكلي مباشر.

الخلاصة اللي تثبتها في دماغك: HTML = المحتوى والهيكل. CSS = الشكل والتنسيق. أي حاجة في صفحة ويب إما محتوى أو شكل. لما تتعلم تميّز بين الاتنين، هتعرف دايمًا تدور على الحل فين لما حاجة متظبطش.

ليه HTML وCSS هما البداية الصح؟

سؤال منطقي: ليه مضيّعش وقت وأبدأ بلغة “حقيقية” زي بايثون أو JavaScript على طول؟ الإجابة فيها خمس أسباب عملية، مش كلام تسويقي:

1. نتيجة فورية تشجعك تكمل

تكتب سطرين، تفتح المتصفح، تشوف النتيجة قدامك. مفيش لغة برمجة تانية بتديك الإحساس ده بالسرعة دي. والدافع في البداية أهم من أي منهج.

2. مفيش حاجة تتثبت ولا بيئة معقدة

أي جهاز فيه متصفح ومفكرة كفاية. مش محتاج تسطيب ولا إعدادات ولا حسابات. العائق التقني صفر.

3. أساس كل مسارات الويب

عاوز تبقى Front-End؟ لازمهم. Back-End؟ هتحتاج تفهمهم عشان تتعامل مع الواجهات. ووردبريس؟ هتحتاجهم عشان تعدّل القوالب. مفيش مفر منهم.

4. سوق شغل حقيقي

تعديل القوالب، صفحات الهبوط، تحسين مواقع ووردبريس، التحويل من تصميم لكود — كلها خدمات مطلوبة وبتتباع، وكلها HTML وCSS في الأساس.

5. بتتعلم “التفكير البصري”

هتتعلم تشوف أي صفحة وتفككها في دماغك: ده عنوان، ده عمودين، دي مسافة. المهارة دي هي اللي بتفرّق المطور عن اللي حافظ كود.

6. بوابة JavaScript الطبيعية

لما توصل لـ JavaScript هتلاقي نفسك بتتعامل مع عناصر HTML وبتنسقها بـ CSS. اللي اتعلم الاتنين الأول بيفهم JavaScript أسرع بكتير.

والنقطة الأهم: HTML وCSS بيعلموك عادة البناء. البرمجة في جوهرها مش حفظ — البرمجة إنك تبني حاجة شغالة. واللغتين دول بيخلوك تبني من أول يوم، فبتتعود على أهم عادة في المجال كله.

نقطة صراحة مهمة: HTML وCSS لوحدهم مش هيخلوك “مطور ويب متكامل” — دي البداية مش النهاية. لكن أي حد بيقولك “اتخطاهم وابدأ بالتقيل” بيضرك. الأساس الضعيف = كل حاجة بعده مهزوزة.

اقرأ المزيد“>البرمجة كمسار دخل: أي لغة تبدأ بها ولماذا

جهّز عدّتك في ربع ساعة

قبل أول درس حقيقي، جهّز بيئة الشغل. الموضوع أبسط مما تتخيل — تلات حاجات بس:

  1. محرر كود (Code Editor): نزّل Visual Studio Code — مجاني، وهو المعيار اللي أغلب المطورين بيستخدموه. بييجي مع تلوين تلقائي للكود وإكمال تلقائي بيوفر عليك أخطاء كتير. البدائل الموجودة كتير، لكن VS Code هو الاختيار الآمن للمبتدئ.
  2. متصفح حديث: Chrome أو Edge أو Firefox — أي واحد شغال. المهم تعرف تفتح “أدوات المطور” (بتدوس F12) لأنها هتبقى أهم أداة عندك في رحلة CSS. هنتكلم عنها بالتفصيل.
  3. مجلد للمشاريع: اعمل مجلد على جهازك سميه web-projects، وجواه مجلد لكل مشروع. التنظيم من أول يوم عادة هتشكر نفسك عليها بعدين.

أدوات المطور: سلاحك السري

دوس F12 في المتصفح دلوقتي على أي موقع. اللي اتفتح ده اسمه DevTools — أدوات المطور. دي أهم حاجة هتتعلمها في CSS، وأهم من أي كورس. منها تقدر:

  • تشوف كود HTML لأي صفحة في العالم وتفهم مبنية إزاي
  • تجرّب تغيير أي لون أو مقاس وتشوف النتيجة لحظيًا من غير ما تحفظ حاجة
  • تعرف بالظبط ليه عنصر معين شكله كده ومين اللي بيأثر عليه من قواعد CSS

القاعدة: لما حاجة في التنسيق متظبطش، أول حاجة تعملها تفتح الـ Inspector وتشوف. مش تخمن، مش تجرب عشوائي — تشوف. المحترفين بيعملوا كده كل يوم، وانت هتعمل كده من أول أسبوع.

<!– هيكل أي ملف HTML هتكتبه –> <!DOCTYPE html> <html lang=“ar” dir=“rtl”> <head> <meta charset=“UTF-8”> <title>صفحتي الأولى</title> </head> <body> <!– المحتوى اللي بيظهر في المتصفح بيتكتب هنا –> </body> </html>
افهم الهيكل ده كويس — هتستخدمه في كل مشروع

السطر الأول بيقول للمتصفح “ده ملف HTML5”. وسم <head> فيه معلومات عن الصفحة مش بتظهر (العنوان اللي في تاب المتصفح، ترميز الحروف). وسم <body> فيه كل اللي القارئ بيشوفه. احفظ الهيكل ده — هو البداية الرسمية لأي صفحة.

إعلان

HTML: الهيكل — المشروع الأول

هنا بقى الشغل الحقيقي. هنبني صفحة تعريفية بسيطة (بطاقة شخصية) باستخدام أهم عناصر HTML. كل عنصر هتتعلمه، هتستخدمه فورًا في المشروع.

HTML فيه حوالي 100 عنصر، لكن الحقيقة المريحة: انت محتاج 20 عنصر بس عشان تبني 95% من الصفحات. الباقي هتقابله تدريجيًا. خلينا نبدأ بالأساسيات اللي هتستخدمها النهاردة:

العنصر وظيفته مثال الاستخدام
<h1> لحد <h6> العناوين بدرجاتها — h1 أهم عنوان في الصفحة عنوان المقال، اسمك في البطاقة الشخصية
<p> الفقرات النصية أي نص عادي — الوصف، النبذة، التفاصيل
<a> الروابط — أهم اختراع في الويب رابط حسابك، رابط صفحة تانية
<img> الصور صورتك الشخصية، صور المشاريع
<ul> و <ol> القوائم — غير مرتبة ومرتبة قائمة المهارات، خطوات، مميزات
<div> و <span> حاويات للتجميع والتنسيق تقسيم الصفحة لمناطق عشان تنسقها بـ CSS
<button> الأزرار زر “تواصل معايا”، زر تحميل السيرة الذاتية
<header> / <main> / <footer> عناصر دلالية لتقسيم الصفحة ترويسة، المحتوى الرئيسي، تذييل الصفحة

المشروع الأول: بطاقتك الشخصية

افتح ملف جديد في VS Code، احفظه باسم card.html جوه مجلد المشاريع، واكتب الكود ده بنفسك — مش نسخ ولصق:

<!DOCTYPE html> <html lang=“ar” dir=“rtl”> <head> <meta charset=“UTF-8”> <title>بطاقتي الشخصية</title> </head> <body> <h1>أحمد محمد</h1> <p>مصمم ومطور ويب مبتدئ — بتعلم HTML وCSS</p> <h2>مهاراتي</h2> <ul> <li>HTML</li> <li>CSS</li> <li>التصميم المتجاوب</li> </ul> <h2>تواصل معايا</h2> <a href=“mailto:[email protected]”>ابعتلي إيميل</a> </body> </html>

افتح الملف في المتصفح. مبروك — دي صفحة ويب حقيقية بمحتوى منظم: عنوان رئيسي، فقرة تعريفية، عنوان فرعي، قائمة مهارات، ورابط تواصل. شكلها بسيط؟ أيوه. لكن الهيكل صح 100%، والهيكل الصح هو اللي بيتبني عليه كل حاجة بعد كده.

قواعد ذهبية في كتابة HTML

  • وسم h1 مرة واحدة بس في الصفحة: هو العنوان الرئيسي. العناوين الفرعية h2، واللي تحتها h3. الترتيب الهرمي ده مهم لمحركات البحث وقارئات الشاشة.
  • اقفل كل وسم بتفتحه: <p> لازم يتقفل بـ </p>. النسيان هنا من أشهر أسباب “الصفحة بايظة ومش عارف ليه”.
  • الصور لازم لها وصف بديل: خاصية alt في وسم <img> بتوصف الصورة للي مش شايفها ولمحركات البحث. متسيبهاش فاضية أبدًا.
  • استخدم العناصر الدلالية: <header> للترويسة و<nav> للتنقل و<main> للمحتوى — مش كله <div>. الكود الواضح أسهل في الصيانة وأحسن في الـ SEO.
  • الروابط النسبية للملفات المحلية: لو عندك صفحة تانية اسمها about.html في نفس المجلد، الرابط يبقى href="about.html" — مش المسار الكامل على جهازك.
تمرين: عدّل صفحة البطاقة — ضيف صورتك (أي صورة عندك) بوسم <img> مع alt مناسب، وضيف قسم “هواياتي” بقائمة مرتبة <ol>. لو عرفت تعمل ده من غير ما ترجع للشرح، يبقى فهمت الدرس فعلًا.

CSS: الشكل — أول تنسيق حقيقي

صفحة البطاقة شغالة، لكن شكلها “خام”. دلوقتي هنلبسها. CSS هتحول نفس المحتوى من صفحة باهتة لصفحة شكلها محترم — من غير ما نلمس سطر واحد في الـ HTML.

قبل ما نكتب، افهم التلات طرق لربط CSS بالصفحة — وهتستخدم واحدة منهم على طول:

الطريقة إزاي إمتى تستخدمها
ملف خارجي <link rel="stylesheet" href="style.css"> في الـ head دايمًا — دي الطريقة الاحترافية لأي مشروع حقيقي
داخل الصفحة وسم <style> جوه الـ head للتجارب السريعة وصفحات التجربة الواحدة
مباشر على العنصر خاصية style="..." على الوسم نفسه نادرًا — للاستثناءات السريعة بس، مش أسلوب شغل

اعمل ملف جديد اسمه style.css في نفس مجلد card.html، واربطه في الـ head بتاع الصفحة بالسطر ده:

<link rel=“stylesheet” href=“style.css”>

أول قواعد تنسيق: المحددات (Selectors)

المحدد هو “مين اللي هينطبق عليه التنسيق”. فيه تلاتة أساسيين لازم تتقنهم قبل أي حاجة:

/* 1. محدد العنصر: بيأثر على كل العناصر من النوع ده */ h1 { color: #0d6efd; text-align: center; } /* 2. محدد الكلاس: بيأثر على أي عنصر واخد الكلاس ده */ .card { background: #ffffff; padding: 24px; border-radius: 12px; } /* 3. محدد الـ ID: بيأثر على عنصر واحد محدد */ #main-title { font-size: 36px; }

الفرق بينهم ببساطة: محدد العنصر (h1) بيأثر على كل العناوين من النوع ده في الصفحة. الكلاس (.card — بنقطة في الأول) بتديه لأي عناصر عاوزها تاخد نفس الشكل، وممكن يتكرر. الـ ID (#main-title — بشباك في الأول) لعنصر واحد فريد في الصفحة كلها.

قاعدة عملية: في الشغل الحقيقي هتستخدم الكلاسات 90% من الوقت. محدد العنصر للتنسيقات العامة، والـ ID نادرًا. لو لقيت نفسك بتستخدم ID كتير، يبقى فيه حاجة غلط في تنظيم الكود.

هننسق صفحة البطاقة دلوقتي

اكتب الكود ده في ملف style.css واحفظ، وبعدين اعمل Refresh للصفحة في المتصفح:

body { font-family: Tahoma, Arial, sans-serif; background: #f4f7ff; color: #1e293b; line-height: 1.8; margin: 0; padding: 40px 20px; } h1 { color: #0d6efd; text-align: center; } h2 { color: #be123c; border-bottom: 2px solid #fda4af; padding-bottom: 8px; } p { text-align: center; font-size: 18px; } ul { background: #ffffff; border-radius: 12px; padding: 20px 40px; max-width: 500px; margin: 0 auto; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } a { display: inline-block; background: #0d6efd; color: #ffffff; padding: 12px 28px; border-radius: 8px; text-decoration: none; }

حدّث الصفحة. شايف الفرق؟ نفس الـ HTML بالظبط — ولا حرف اتغير فيه — لكن الصفحة بقت شكلها مختلف تمامًا. دي قوة CSS: الفصل بين المحتوى والشكل. غيّر أي لون أو مقاس في ملف الـ CSS، والمحتوى ثابت. المبدأ ده هو اللي بيخلي المواقع الكبيرة تتدار بسهولة.

إعلان

أهم خصائص CSS اللي هتستخدمها كل يوم

CSS فيه مئات الخصائص، لكن دول الـ 15 اللي هتستخدمهم في 90% من شغلك. احفظهم بالتجربة مش بالحفظ:

الخاصية بتعمل إيه مثال
color لون النص color: #be123c;
background لون أو صورة الخلفية background: #f4f7ff;
font-size حجم الخط font-size: 18px;
font-weight سُمك الخط (عادي / عريض) font-weight: bold;
text-align محاذاة النص text-align: center;
margin مسافة خارجية حوالين العنصر margin: 20px;
padding مسافة داخلية جوه العنصر padding: 16px;
border إطار حوالين العنصر border: 1px solid #ccc;
border-radius تدوير زوايا الإطار border-radius: 12px;
width / height العرض والارتفاع width: 300px;
max-width أقصى عرض مسموح max-width: 800px;
display طريقة عرض العنصر display: flex;
box-shadow ظل حوالين العنصر box-shadow: 0 4px 12px rgba(0,0,0,.1);
line-height المسافة بين سطور النص line-height: 1.8;
text-decoration زخرفة النص (خط تحته إلخ) text-decoration: none;

الألوان في CSS: اختار طريقتك

فيه أربع طرق لكتابة الألوان، وكلهم شغالين. الأهم إنك تختار طريقة وتلتزم بيها في مشروعك:

  • الأسماء: red، blue، white — سهلة لكن محدودة (حوالي 140 لون بس).
  • HEX: #0d6efd — الأكثر استخدامًا في الشغل الحقيقي. 6 خانات: كل اتنين بيمثلوا الأحمر والأخضر والأزرق.
  • RGB: rgb(13, 110, 253) — نفس فكرة الـ HEX بس بأرقام عشرية من 0 لـ 255.
  • RGBA: rgba(13, 110, 253, 0.5) — زي RGB بس مع خانة رابعة للشفافية من 0 لـ 1.

نصيحة عملية: استخدم الـ HEX للألوان الأساسية في مشروعك، والـ RGBA لما تحتاج شفافية (زي الظلال والطبقات فوق الصور). ولو عاوز تختار ألوان متناسقة من غير ما تكون مصمم، أي أداة Color Palette على النت هتديك مجموعات جاهزة — انسخ الكود والصقه.

تمرين: غيّر ألوان صفحة البطاقة كلها — خلّيها بألوانك المفضلة. جرّب قيم مختلفة لـ padding وborder-radius وشوف التأثير. الهدف مش الشكل النهائي، الهدف إن إيدك تتعود على “غيّر — حدّث — شوف”.

Box Model: المفهوم اللي بيحل 80% من مشاكل التنسيق

لو فيه مفهوم واحد في CSS يستاهل تفهمه بعمق قبل ما تكمل، فهو ده. أغلب الأسئلة من نوع “ليه العنصر ده مش في مكانه؟” إجابتها: الـ Box Model.

الفكرة ببساطة: كل عنصر في الصفحة هو صندوق (Box). والصندوق ده مكوّن من أربع طبقات من بره لجوه — أو من جوه لبره حسب ما تحب تتخيلها:

  1. المحتوى (Content): النص أو الصورة نفسها — المنطقة اللي فيها الحاجة الفعلية. بتتحكم في حجمها بـ width وheight.
  2. الحشو الداخلي (Padding): مسافة بين المحتوى وحدود الصندوق. لما تعمل padding لزر، النص بيبعد عن أطراف الزر من جوه.
  3. الإطار (Border): الخط اللي حوالين الصندوق. ممكن يبقى ظاهر أو شفاف، سميك أو رفيع.
  4. الهامش الخارجي (Margin): المسافة بين الصندوق ده والصندوق اللي جنبه. بيفصل العناصر عن بعض من بره.

شوف الكود ده وتخيل الصندوق:

.box { width: 200px; /* عرض المحتوى */ padding: 20px; /* 20px من كل جهة جوه */ border: 2px solid #0d6efd; margin: 30px; /* 30px بعيد عن جيرانه */ }

العرض الكلي اللي العنصر هياخده في الصفحة = 200 (محتوى) + 40 (padding يمين وشمال) + 4 (border يمين وشمال) = 244px. الـ margin مش بيتحسب جوه العرض، هو مسافة خارجية.

الفخ الأشهر للمبتدئين: بتحط width: 50% لعنصرين جنب بعض، وتتفاجئ إنهم مش جنب بعض! السبب: الـ padding والـ border بيزودوا على العرض. الحل السحري اللي كل المحترفين بيستخدموه — سطر واحد في أول ملف CSS:
* { box-sizing: border-box; }

السطر ده بيقول للمتصفح: “لما أقول width: 200px، يبقى 200px شامل الـ padding والـ border”. بيخلّي الحسابات منطقية وبيمنع 90% من مشاكل “العناصر مش راضية تقعد جنب بعض”. حطه في أول أي ملف CSS هتكتبه في حياتك.

Margin ولا Padding؟ القاعدة اللي تحسمها

ده السؤال اللي بيحيّر كل مبتدئ. القاعدة البسيطة:

  • عاوز مسافة جوه العنصر (النص يبعد عن أطراف الزر أو البطاقة) → Padding
  • عاوز مسافة بين عنصرين (البطاقة تبعد عن البطاقة اللي تحتها) → Margin

مثال عملي: بطاقة فيها عنوان ونص — الـ padding هو اللي بيخلي النص مش لازق في حرف البطاقة. وبين البطاقة والبطاقة اللي بعدها — الـ margin هو اللي بيعمل المسافة. لما تفكر بالطريقة دي، القرار بيبقى تلقائي.

توسيط العناصر: الحالات الشائعة

توسيط عنصر في النص من أكتر الحاجات اللي المبتدئ بيضيع فيها وقت. احفظ الحالتين دول:

/* توسيط صندوق (block) أفقيًا */ .centered-box { width: 600px; margin: 0 auto; /* صفر فوق وتحت، تلقائي يمين وشمال */ } /* توسيط نص جوه عنصره */ .centered-text { text-align: center; }

لاحظ الشرط المهم: margin: 0 auto بتشتغل بس لو العنصر له عرض محدد (width). من غير width، العنصر واخد العرض كله أصلًا فمفيش حاجة تتوسّط. التفصيلة الصغيرة دي بتحل لغز كبير لناس كتير.

إعلان

Flexbox: رصّ العناصر زي المحترفين

عاوز تحط 3 بطاقات جنب بعض؟ عاوز توزّع عناصر بالتساوي؟ عاوز توسّط حاجة رأسيًا وأفقيًا مع بعض؟ زمان ده كان كابوس. دلوقتي فيه Flexbox — وهتتعلمه في عشر دقايق.

الفكرة: بتحوّل العنصر الأب لـ “حاوية مرنة” بكلمة واحدة display: flex، والأبناء جواه بيترصوا تلقائيًا. وبعدين بتتحكم في التوزيع بخاصيتين بس:

.container { display: flex; justify-content: center; /* التوزيع الأفقي */ align-items: center; /* التوزيع الرأسي */ gap: 16px; /* مسافة بين العناصر */ }

justify-content: التوزيع على المحور الرئيسي

دي أشهر خاصية في Flexbox. بتحدد العناصر تتوزع إزاي في المساحة الفاضية:

القيمة النتيجة تستخدمها إمتى
flex-start العناصر متجمعة في الأول الوضع الافتراضي — قائمة عادية
center العناصر متجمعة في النص توسيط مجموعة أزرار أو أيقونات
flex-end العناصر متجمعة في الآخر أزرار في آخر سطر
space-between أول عنصر في الأول وآخر عنصر في الآخر والباقي متوزع شريط علوي: اللوجو يمين والقائمة شمال
space-around مساحة متساوية حوالين كل عنصر توزيع مريح لبطاقات أو أيقونات
space-evenly مساحات متساوية تمامًا بين كل العناصر والأطراف أدق توزيع متساوي

align-items: التوزيع على المحور العمودي

لو العناصر أطوالها مختلفة، align-items بتحدد هيتصرفوا إزاي رأسيًا: stretch (الافتراضي — يتمددوا لقد بعض)، center (في النص)، flex-start (فوق)، flex-end (تحت). جرّبهم بنفسك في الـ DevTools وشوف الفرق بعينك — دي أسرع طريقة للفهم.

مثال عملي: شريط علوي (Navbar) بـ Flexbox

ده أكتر مكوّن هتبنيه في حياتك كمطور. الـ HTML:

<nav class=“navbar”> <span class=“logo”>موقعي</span> <div class=“links”> <a href=“#”>الرئيسية</a> <a href=“#”>أعمالي</a> <a href=“#”>تواصل</a> </div> </nav>

والـ CSS:

.navbar { display: flex; justify-content: space-between; align-items: center; background: #0a2a5e; padding: 16px 24px; border-radius: 12px; } .logo { color: #ffffff; font-weight: bold; font-size: 20px; } .links { display: flex; gap: 20px; } .links a { color: #dbeafe; text-decoration: none; }

لاحظ حاجتين: space-between حطّ اللوجو في ناحية والروابط في الناحية التانية تلقائيًا. وgap عملت مسافة بين الروابط من غير ما نحسب margins يدويًا. ده Flexbox — بيخلّي التوزيع “يتحل لوحده”.

تمرين Flexbox: اعمل صفحة فيها 3 بطاقات جنب بعض باستخدام Flexbox وgap. كل بطاقة فيها عنوان وفقرة. بعدين جرّب تغيّر justify-content للقيم المختلفة وشوف النتيجة. التمرين ده لوحده هيخليك تفهم 70% من Flexbox.

الموبايل أولًا: التجاوب الحقيقي

أغلب زوار أي موقع بييجوا من الموبايل. صفحة شكلها حلو على اللابتوب ومكسورة على الموبايل = صفحة فاشلة. التجاوب (Responsive Design) مش رفاهية — هو الاختبار الحقيقي لشغلك.

والخبر الكويس: التجاوب أسهل مما تتخيل. القاعدة الذهبية: صمّم للموبايل الأول، وبعدين وسّع للشاشات الكبيرة — مش العكس. ليه؟ لأن إضافة مساحة أسهل بكتير من ضغط تصميم كبير في شاشة صغيرة.

الـ Viewport: السطر اللي ناس كتير بتنساه

أي صفحة متجاوبة لازم يبقى فيها السطر ده في الـ head — من غيره الموبايل هيعرض الصفحة كأنها شاشة كمبيوتر مصغرة:

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

السطر ده بيقول للموبايل: “اعتبر عرض الصفحة هو عرض شاشتك الحقيقي”. كل الهياكل اللي بنيناها في الدليل ده فيها السطر ده — لاحظته؟

Media Queries: غيّر التنسيق حسب الشاشة

الـ Media Query بتقول للمتصفح: “القواعد دي طبّقها بس لو الشاشة بالمواصفات دي”. أشهر استخدام: لما الشاشة تصغر عن حد معين، غيّر التوزيع:

/* الوضع الافتراضي: موبايل — البطاقات فوق بعض */ .cards { display: flex; flex-direction: column; gap: 16px; } /* لما الشاشة تبقى 768px أو أكبر: البطاقات جنب بعض */ @media (min-width: 768px) { .cards { flex-direction: row; } }

شايف المنطق؟ الافتراضي (اللي بيتكتب الأول) هو تصميم الموبايل: عمود واحد. وبعدين الـ Media Query “بتضيف” تحسينات للشاشات الأكبر. ده هو الـ Mobile-First بالظبط — مش مجرد شعار، دي طريقة كتابة الكود نفسه.

نقاط التوقف (Breakpoints) العملية

متعقدش نفسك بعشرات المقاسات. في الشغل الحقيقي، نقطتين كفاية لمعظم المشاريع:

النقطة الكود بتغطي إيه
التابلت @media (min-width: 768px) من التابلت وطالع — عمودين بدل عمود واحد
الديسكتوب @media (min-width: 1024px) الشاشات الكبيرة — 3 أعمدة والتوزيع الكامل

القاعدة: متزودش Breakpoints إلا لو التصميم فعلًا محتاج. كل Breakpoint زيادة = كود زيادة = صيانة أصعب. البساطة هنا ميزة مش نقص.

وحدات مرنة بدل البكسل الثابت

من أسباب كسر التصميم على الموبايل: عرض ثابت بالبكسل أكبر من الشاشة. الحلول المرنة:

  • النسب المئوية: width: 100% — العنصر بياخد عرض الأب مهما كانت الشاشة.
  • max-width: max-width: 800px; width: 100% — بيكبر لحد حد معين وبعدين يقف. دي أشهر تركيبة في المواقع.
  • الصور المرنة: img { max-width: 100%; height: auto; } — السطرين دول بيمنعوا أي صورة إنها تخرج بره شاشة الموبايل. حطهم في كل مشروع.
اختبار إلزامي: بعد كل صفحة تبنيها، صغّر نافذة المتصفح بالماوس لحد ما تبقى بعرض الموبايل، أو استخدم وضع الموبايل في الـ DevTools (أيقونة الموبايل فوق). لو حاجة خرجت بره الشاشة أو اتكسرت — صلّحها قبل ما تكمل. المحترف بيختبر وهو بيبني، مش في الآخر.
إعلان

مشروعك الأول الكامل: صفحة بورتفوليو

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

هنبنيه على مراحل. كل مرحلة بتستخدم اللي اتعلمته. ابدأ بملف portfolio.html جديد:

المرحلة 1: الهيكل الكامل

<!DOCTYPE html> <html lang=“ar” dir=“rtl”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>أعمالي — بورتفوليو</title> <link rel=“stylesheet” href=“portfolio.css”> </head> <body> <nav class=“navbar”> <span class=“logo”>اسمي</span> <div class=“links”> <a href=“#about”>عني</a> <a href=“#works”>أعمالي</a> <a href=“#contact”>تواصل</a> </div> </nav> <header class=“hero” id=“about”> <h1>أهلًا، أنا مطور ويب مبتدئ</h1> <p>ببني صفحات ويب نظيفة ومتجاوبة بـ HTML وCSS</p> <a href=“#works” class=“btn”>شوف أعمالي</a> </header> <main> <section id=“works”> <h2>أعمالي</h2> <div class=“cards”> <div class=“work-card”> <h3>بطاقة شخصية</h3> <p>أول مشروع: صفحة تعريفية بـ HTML وCSS</p> </div> <div class=“work-card”> <h3>صفحة هبوط</h3> <p>تصميم متجاوب بفليكس بوكس وميديا كويري</p> </div> <div class=“work-card”> <h3>معرض صور</h3> <p>شبكة صور مرنة بتتكيف مع كل الشاشات</p> </div> </div> </section> <section id=“contact”> <h2>تواصل معايا</h2> <form> <input type=“text” placeholder=“اسمك”> <input type=“email” placeholder=“بريدك الإلكتروني”> <textarea placeholder=“رسالتك”></textarea> <button type=“submit”>ابعت الرسالة</button> </form> </section> </main> </body> </html>

المرحلة 2: التنسيق الكامل

دلوقتي ملف portfolio.css — لاحظ إنه بيجمع كل المفاهيم: Box Model، Flexbox، والتجاوب:

* { box-sizing: border-box; } body { font-family: Tahoma, Arial, sans-serif; margin: 0; background: #f4f7ff; color: #1e293b; line-height: 1.8; } .navbar { display: flex; justify-content: space-between; align-items: center; background: #0a2a5e; padding: 16px 24px; } .logo { color: #fff; font-weight: bold; } .links { display: flex; gap: 20px; } .links a { color: #dbeafe; text-decoration: none; } .hero { text-align: center; padding: 80px 20px; background: linear-gradient(135deg, #0a2a5e, #0d6efd); color: #fff; } .btn { display: inline-block; background: #be123c; color: #fff; padding: 12px 32px; border-radius: 8px; text-decoration: none; margin-top: 16px; } section { padding: 50px 20px; max-width: 1000px; margin: 0 auto; } h2 { text-align: center; color: #0a2a5e; } .cards { display: flex; flex-direction: column; gap: 20px; } .work-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } form { display: flex; flex-direction: column; gap: 12px; max-width: 500px; margin: 0 auto; } input, textarea { padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-family: inherit; } button { background: #0d6efd; color: #fff; border: none; padding: 14px; border-radius: 8px; font-size: 16px; cursor: pointer; } /* التجاوب: من 768px البطاقات جنب بعض */ @media (min-width: 768px) { .cards { flex-direction: row; } .work-card { flex: 1; } }

شغّل الصفحة وجرّبها على الموبايل والديسكتوب. دي صفحة بورتفوليو حقيقية: شريط علوي بتوزيع Flexbox، قسم ترحيبي بخلفية متدرجة، بطاقات أعمال بتترص جنب بعض على الشاشات الكبيرة وفوق بعض على الموبايل، ونموذج تواصل منسق. كل ده بـ HTML وCSS بس — من غير أي مكتبات.

التحدي: ضيف قسم “مهاراتي” بين الأعمال والتواصل — 4 بطاقات صغيرة بأسماء مهاراتك ونسبة إتقان لكل واحدة (شريط تقدم بسيط بـ div جوه div). لو عملت ده لوحدك، انت رسميًا بتبني صفحات.

النماذج والجداول: عناصر عملية

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

النموذج: أكتر من مجرد حقول

النموذج الصح مش مجموعة حقول مرمية — له بنية واضحة: تسميات (Labels) مربوطة بالحقول، أنواع حقول مناسبة، وزر إرسال واضح. شوف المثال:

<form action=“/send” method=“post”> <label for=“name”>الاسم بالكامل</label> <input type=“text” id=“name” name=“name” required> <label for=“email”>البريد الإلكتروني</label> <input type=“email” id=“email” name=“email” required> <label for=“service”>الخدمة المطلوبة</label> <select id=“service” name=“service”> <option value=“design”>تصميم صفحة</option> <option value=“fix”>إصلاح موقع</option> </select> <label for=“msg”>تفاصيل الطلب</label> <textarea id=“msg” name=“msg” rows=“4”></textarea> <button type=“submit”>ابعت الطلب</button> </form>

تلات تفاصيل بتفرّق النموذج الاحترافي عن العشوائي:

  • الـ label مربوط بالحقل: خاصية for في الـ label بتساوي id الحقل. ده بيخلي الضغط على النص يفعّل الحقل — ومهم جدًا لقارئات الشاشة.
  • نوع الحقل الصح: type="email" بيخلي الموبايل يطلّع كيبورد فيه @، وtype="tel" بيطلّع كيبورد أرقام. تفصيلة صغيرة بتفرق في تجربة المستخدم.
  • خاصية required: بتخلي المتصفح نفسه يمنع الإرسال لو الحقل فاضي — تحقق مجاني من غير JavaScript.

الجداول: للبيانات مش للتوزيع

قاعدة مهمة: الجداول للبيانات الجدولية (أسعار، مقارنات، إحصائيات) — مش لتوزيع عناصر الصفحة. زمان كانوا بيستخدموها للتخطيط، وده بقى من الماضي. للتخطيط عندك Flexbox.

<table> <tr> <th>الخدمة</th> <th>المدة</th> <th>السعر</th> </tr> <tr> <td>صفحة هبوط</td> <td>3 أيام</td> <td>—</td> </tr> </table>

<th> لخلايا العناوين (بتظهر عريضة وفي النص افتراضيًا)، و<td> لخلايا البيانات. وبتنسيق CSS بسيط — حدود فاتحة وصفوف ملونة بالتناوب — الجدول بيبقى شكله محترم زي الجداول اللي شفتها في الدليل ده.

إعلان

علاقتهم بالووردبريس والشغل الحقيقي

طيب، سؤال عملي: “أنا هستخدم ووردبريس — محتاج HTML وCSS ليه؟” الإجابة: ووردبريس بيسهّل، لكن اللي بيفهم الكود بيقدر يعمل اللي غيره ميقدرش يعمله.

ووردبريس بيولّد HTML وCSS تلقائيًا — أي صفحة ووردبريس في الآخر هي ملف HTML بتنسيق CSS. الفرق إنك مش بتكتبه بإيدك. لكن لما تحتاج:

  • تعديل تصميم القالب: لون زر، مقاس عنوان، مسافة بين أقسام — كلها CSS مباشر. من غيره هتفضل محبوس في اختيارات القالب.
  • إضافة عنصر مخصص: صندوق مميز، جدول أسعار، قسم أسئلة شائعة بتصميم خاص — ده HTML وCSS بتكتبه في محرر المخصصات.
  • إصلاح مشكلة في العرض: عنصر خارج عن الشاشة على الموبايل، تنسيق متكسر بعد تحديث — اللي فاهم Box Model بيحلها في دقايق.
  • تحسين السرعة: فهمك للكود بيخليك تعرف إيه اللي بيبطّئ الصفحة وإزاي تخففه.

ولو عاوز تتعمق في تطوير مواقع ووردبريس نفسها كمسار — من التثبيت لحد التخصيص الكامل — هتلاقي دليل تطوير مواقع ووردبريس على الموقع بيكمل الصورة من ناحية المنصة، والدليل ده بيكملها من ناحية الكود.

خدمات HTML/CSS اللي بتتباع فعلًا

خلينا نتكلم بصراحة عن الفلوس. المهارات دي لوحدها بتفتح أبواب خدمات مطلوبة:

الخدمة إيه المطلوب ليه مطلوبة
صفحات الهبوط صفحة واحدة بتصميم مقنع ومتجاوب أصحاب المنتجات والكورسات محتاجينها باستمرار للحملات
تعديل قوالب ووردبريس CSS مخصص وتعديلات على القالب أصحاب المواقع عاوزين شكل مميز من غير ما يغيروا القالب كله
تحويل تصميم لكود تاخد صورة تصميم وتحولها لصفحة شغالة المصممين كتير بيحتاجوا حد ينفذ تصميماتهم
إصلاح مشاكل العرض تشخيص وإصلاح تنسيق متكسر مشاكل الموبايل والتوافقية شائعة ومحتاجة حد فاهم
تحسين السرعة والموبايل تنظيف CSS وتحسين التجاوب السرعة بتأثر على الترتيب والمبيعات مباشرة
نصيحة المسار: متستناش “تخلص التعلم” عشان تبدأ تشتغل. بعد ما تبني 3-4 مشاريع كويسة (زي البورتفوليو اللي بنيناه)، اعرض خدمات بسيطة. الشغل الحقيقي هيعلمك أسرع من أي كورس — والعميل الأول هييجي من معرض أعمالك مش من شهاداتك.

أخطاء بيقع فيها كل مبتدئ

الأخطاء دي مش عيب — كلنا وقعنا فيها. الفرق إنك هتعرفها من دلوقتي وتتجنبها، بدل ما تكتشفها بعد شهور من العادات الغلط.
  1. نسيان إغلاق الوسوم: تفتح <div> وتنسى </div>، فالصفحة كلها تتلخبط. الحل: VS Code بيقفل الوسوم تلقائيًا — استخدمه. ولو الصفحة بايظة، أول حاجة تدور عليها: وسم مفتوح من غير قفل.
  2. استخدام div لكل حاجة: صفحة كلها <div> في <div>. الكود بيبقى صعب القراءة والفهم. الحل: استخدم العناصر الدلالية — <header>، <nav>، <main>، <section>، <footer>.
  3. التنسيق المباشر على العناصر (Inline Styles): كتابة style="..." على كل وسم. في الأول مريح، وبعدين بيبقى كابوس صيانة. الحل: كل التنسيقات في ملف CSS خارجي — من غير استثناءات إلا للضرورة.
  4. تجاهل الـ box-sizing: عناصر مش راضية تقعد جنب بعض والمقاسات مش محسوبة صح. الحل: * { box-sizing: border-box; } في أول الملف — دايمًا.
  5. عرض ثابت بالبكسل على الموبايل: width: 900px لعنصر، فيخرج بره الشاشة على الموبايل. الحل: max-width مع width: 100%، والصور max-width: 100%.
  6. نسيان الـ viewport: الصفحة متجاوبة بالكود لكن الموبايل عارضها مصغرة. الحل: سطر الـ viewport في الـ head — اتأكد إنه موجود في كل صفحة.
  7. أسماء كلاسات عشوائية: .box1، .test، .aaa — بعد أسبوع مش هتعرف ده كان إيه. الحل: أسماء وصفية بالإنجليزية — .navbar، .work-card، .btn-primary.
  8. الإفراط في !important: لما تنسيق مش شغال، الحل السهل !important. المشكلة إنه بيكسر ترتيب الأولويات وبيخلّي أي تعديل بعده أصعب. الحل: افهم الـ Specificity (الأولوية) بدل ما تهرب منها — المحدد الأدق بيكسب.
  9. عدم اختبار على الموبايل: بتبني على شاشة كبيرة وتتفاجئ بالنتيجة على الموبايل. الحل: اختبر كل صفحة على عرض الموبايل أثناء البناء مش في الآخر.
  10. حفظ الكود من غير فهم: نسخ أمثلة من النت ولصقها من غير ما تفهم كل سطر بيعمل إيه. الحل: أي كود تنسخه، اقرأه سطر سطر وغيّر فيه وجرّب — لحد ما تبقى عارف وظيفة كل جزء.
عن !important تحديدًا: القاعدة الصارمة — متستخدمهوش إلا لو بتتعامل مع كود مش بتاعك ومش قادر تعدّله (زي بعض إضافات ووردبريس). في كودك الخاص، وجود !important علامة على إنك محتاج تراجع ترتيب المحددات مش إنك محتاج “قوة أكبر”.
إعلان

خطة 30 يوم: من الصفر لأول مشروع

المعلومات من غير خطة بتتبخر. دي خطة عملية لـ 30 يوم — ساعة ل ساعتين يوميًا — تطلع منها بمهارة حقيقية ومشاريع في معرض أعمالك.
  • اليوم 1-3: الأساسيات

    جهّز VS Code والمجلدات. اتعلم هيكل صفحة HTML والعناصر الأساسية (عناوين، فقرات، روابط، صور، قوائم). ابنِ صفحة تعريفية بسيطة من غير أي تنسيق.

  • اليوم 4-7: أول CSS

    المحددات التلاتة (عنصر، كلاس، ID). أهم 15 خاصية. الألوان والخطوط. نسّق صفحة البطاقة بتاعتك لحد ما شكلها يعجبك.

  • اليوم 8-10: Box Model

    الفرق بين margin وpadding بالتجربة. box-sizing: border-box. التوسيط. ابنِ 3 بطاقات مختلفة كل واحدة بتنسيق مختلف.

  • اليوم 11-14: Flexbox

    justify-content وalign-items وgap. ابنِ شريط علوي، وصف بطاقات جنب بعض، وفوتر بسيط. جرّب كل قيم التوزيع.

  • اليوم 15-17: التجاوب

    الـ viewport والـ media queries. حوّل مشاريعك القديمة لمتجاوبة. اختبر كل حاجة على عرض الموبايل.

  • اليوم 18-20: النماذج والجداول

    نموذج تواصل كامل ومنسق. جدول أسعار أو مقارنة. اتعلم الـ labels والتحقق الأساسي.

  • اليوم 21-25: المشروع الكبير

    ابنِ صفحة البورتفوليو الكاملة من الدليل ده — بس بشخصيتك وألوانك ومحتواك. ده أهم مشروع في الخطة.

  • اليوم 26-28: مشروع ثاني

    صفحة هبوط لمنتج وهمي (كورس، تطبيق، خدمة). طبّق كل اللي اتعلمته من غير ما ترجع للشرح إلا للضرورة.

  • اليوم 29-30: المراجعة والنشر

    راجع كل مشاريعك وصلّح العيوب. انشر البورتفوليو على استضافة مجانية (GitHub Pages مثلًا). اكتب ملخص للي اتعلمته.

قواعد الالتزام بالخطة

  • الكود يتكتب مش يتقرأ: كل مثال في أي مصدر، اكتبه بنفسك. القراءة السلبية أكبر مضيعة وقت في تعلم البرمجة.
  • مشروع كل أسبوع: حتى لو صغير. المشاريع هي اللي بتثبت المهارة وهي اللي هتعرضها بعدين.
  • الـ DevTools صاحبك: أي حاجة مش فاهمها، افتح الـ Inspector والعب فيها. التجربة المباشرة أسرع من السؤال.
  • متقفزش لخطوة قبل ما تتقن اللي قبلها: Flexbox قبل التجاوب، والتجاوب قبل المشروع الكبير. الترتيب ده مقصود.
  • اليوم اللي تفوته عوّضه: مش لازم الكمال — الاستمرارية أهم. ساعة واحدة أحسن من صفر.

جاهز تبدأ فعلًا؟

افتح VS Code دلوقتي واعمل ملف card.html من أول الدليل. أول صفحة هتبنيها النهاردة — مش بكره.

اكتب أول سطر كود النهاردة

مصادر موثقة للتعلم

كل مصدر هنا اتفتح واتأكد منه فعليًا. الروابط مباشرة للمحتوى نفسه مش للصفحة الرئيسية، والشارة بتوضح المجاني من المدفوع بصراحة.
المصدر إيه اللي هتلاقيه اللغة التكلفة
Elzero Web School — كورس HTML كامل شرح عربي مفصل لـ HTML من الصفر مع تطبيقات وتكليفات بعد كل مجموعة دروس عربي 100% Free
Elzero Web School — كورس CSS كامل شرح عربي شامل لـ CSS: المحددات، Box Model، Flexbox، والتجاوب — مع تكليفات عملية عربي 100% Free
Elzero Web School — قوالب HTML وCSS عملية بناء قوالب مواقع كاملة خطوة بخطوة — أفضل تدريب عملي بعد الكورسين الأساسيين عربي 100% Free
freeCodeCamp — Responsive Web Design منهج تفاعلي: بتبني مشاريع حقيقية (تطبيق صور قطط، معرض صور، تصميم مجلة) وانت بتتعلم إنجليزي 100% Free
The Odin Project — Foundations مسار متكامل يبدأ من إزاي الويب بيشتغل لحد HTML وCSS وFlexbox — بمشاريع حقيقية زي صفحة هبوط إنجليزي 100% Free
web.dev — Learn HTML كورس HTML من فريق جوجل: من البنية الأساسية لحد العناصر الدلالية والنماذج — مرجع موثوق إنجليزي 100% Free
web.dev — Learn CSS مرجع CSS متجدد باستمرار: Box Model، Flexbox، Grid، والحركات — من نفس فريق جوجل إنجليزي 100% Free
MDN — توثيق HTML المرجع الرسمي الأشمل لكل عناصر وخصائص HTML — هترجعله كل يوم كمطور إنجليزي 100% Free
MDN — توثيق CSS المرجع الرسمي لكل خصائص CSS والمحددات — مع أمثلة تفاعلية لكل خاصية إنجليزي 100% Free
W3Schools — HTML Tutorial شرح مختصر بأمثلة ومحرر تجربة فوري — ممتاز للمراجعة السريعة (الشهادات المدفوعة اختيارية) إنجليزي Mostly Free
Codecademy — Learn HTML كورس تفاعلي للمبتدئين بمشاريع واختبارات — المحتوى الأساسي مجاني والشهادة ضمن الخطة المدفوعة إنجليزي Freemium
إزاي تستخدم المصادر دي؟ ابدأ بمصدر عربي واحد (Elzero) وامشِ معاه بالترتيب — متشتتش نفسك بين خمسة مصادر في نفس الوقت. لما تخلص الأساسيات، استخدم MDN كمرجع يومي وfreeCodeCamp أو Odin Project للمشاريع الإضافية. مصدر واحد مخلص أحسن من عشرة مفتوحين.
إعلان

اقرأ المزيد“>جافاسكريبت للمبتدئين: خارطة التعلم الصحيحة

الأسئلة الشائعة

هل HTML وCSS لغات برمجة فعلًا؟
تقنيًا لأ — HTML لغة توصيف وCSS لغة تنسيق، ومفيهوش منطق برمجي زي الشروط والحلقات. لكن ده مش معناه إنهم “سهلين” أو مش مهمين. إتقانهم بياخد وقت وممارسة حقيقية، وهم الأساس اللي كل لغات الويب بتتبني عليه. متخليش حد يقلل منهم قدامك.
أبدأ بـ HTML ولا CSS؟ ولا الاتنين مع بعض؟
ابدأ بـ HTML الأول لحد ما تعرف تبني صفحة منظمة بالعناصر الأساسية، وبعدين دخّل CSS تدريجيًا. لكن متنستناش “تخلص” HTML تمامًا — بعد أول أسبوع ابدأ تدمج الاتنين في مشاريع صغيرة، لأنهم في الشغل الحقيقي بيشتغلوا مع بعض دايمًا.
محتاج أكون شاطر في الإنجليزي عشان أتعلم؟
لأ. الكلمات الإنجليزية المستخدمة في الكود محدودة وبتتحفظ بالتكرار من غير ما تكون شاطر في اللغة. والمصادر العربية (زي Elzero Web School) بتشرح كل حاجة بالعربي. الإنجليزي هيفيدك لما تتعمق وتقرأ التوثيق الرسمي، لكنه مش شرط للبداية.
محتاج جهاز قوي أو برامج مدفوعة؟
لأ تمامًا. أي جهاز بيشغل متصفح حديث كفاية، وVisual Studio Code مجاني. مفيش أي تكلفة مادية لتعلم HTML وCSS — ودي من أكبر مميزات البداية بيهم.
إعلان

قد إيه وقت محتاج عشان أبقى جاهز للشغل؟
لو بتذاكر ساعة ل ساعتين يوميًا بتركيز وبتبني مشاريع، من شهر لتلات شهور توصلك لمستوى تقدر تعرض فيه خدمات بسيطة (صفحات هبوط، تعديلات قوالب). المدة بتختلف حسب الالتزام، لكن القاعدة الثابتة: اللي بيبني مشاريع بيتعلم أسرع بكتير من اللي بيكتفي بالمشاهدة.
أتعلم JavaScript إمتى؟
بعد ما تبقى مرتاح في HTML وCSS: بتبني صفحات متجاوبة من غير مساعدة، وفاهم Flexbox والـ Box Model كويس. الاستعجال على JavaScript قبل كده بيخليك تتعثر في الأساسيات والتقدم كله يبقى بطيء. لما توصل للمرحلة دي، هتلاقي خارطة تعلم JavaScript للمبتدئين بتكمل من هنا.
إيه الفرق بين id وclass وإمتى أستخدم كل واحد؟
الـ class ممكن يتكرر على عناصر كتير وبتستخدمه للتنسيقات المشتركة (زي .btn لكل الأزرار) — وهو اللي هتستخدمه 90% من الوقت. الـ id لعنصر واحد فريد في الصفحة (زي #main-header) وبيستخدم أكتر في JavaScript. لو محتار، استخدم class.
ليه التنسيق بتاعي مش شغال مع إني كاتب الكود صح؟
الأسباب الشائعة بالترتيب: ملف CSS مش مربوط صح (اتأكد من اسم الملف والمسار)، خطأ إملائي في اسم الخاصية أو الكلاس، قاعدة تانية بأولوية أعلى بتغلب عليها (راجع الـ Specificity)، أو المتصفح عارض نسخة قديمة (اعمل Refresh قوي بـ Ctrl+F5). وافتح الـ DevTools — هيقولك بالظبط إيه اللي مطبق وإيه اللي متجاهل.
إعلان

إزاي أخلي موقعي شغال كويس على الموبايل؟
أربع حاجات: سطر الـ viewport في الـ head، تجنب العروض الثابتة الكبيرة بالبكسل (استخدم max-width والنسب)، الصور بـ max-width: 100%، واختبر بنفسك على عرض الموبايل أثناء البناء. ولو بتستخدم Flexbox، خلي الاتجاه الافتراضي عمودي وغيّره لأفقي في الـ media query للشاشات الكبيرة.
هل أقدر أشتغل بـ HTML وCSS بس من غير JavaScript؟
أيوه — في نطاق محدد. خدمات زي صفحات الهبوط الثابتة، تعديلات قوالب ووردبريس، تحويل التصميم لكود، وإصلاح مشاكل العرض كلها HTML وCSS في الأساس وبتتباع فعلًا. JavaScript بتوسع نطاق شغلك، لكنها مش شرط عشان تبدأ تكسب من المهارة.
إعلان

إيه أحسن طريقة أثبت بيها اللي اتعلمته؟
ابنِ مشاريع من غير ما ترجع للشرح. اختار فكرة (صفحة مطعم، معرض صور، صفحة هبوط لمنتج) وحاول تنفذها لوحدك — ولما تتعطل ارجع للمصدر. كمان اشرح اللي اتعلمته لحد تاني أو اكتبه: الشرح بيكشف الفجوات اللي المشاهدة السلبية بتخبيها.
بعد ما أخلص HTML وCSS أعمل إيه؟
الخطوة الطبيعية: JavaScript — عشان تضيف التفاعل للصفحات. وبعدها تتعلم إطار عمل زي React لو عاوز مسار الـ Front-End، أو تدخل عالم ووردبريس بعمق لو عاوز مسار أسرع للشغل الحر. المهم: متبدأش الخطوة الجاية قبل ما تبني 3-4 مشاريع كويسة باللي اتعلمته.
إعلان

إعلان