مشروع: صفحة هبوط كاملة لمحل حقيقي
أسبوع شغل واحد بـHTML وCSS فقط — وبيطلع معك أول قطعة حقيقية بمعرض أعمالك: صفحة لمحل موجود فعلاً، من النوع اللي بينطلب حرفياً على خمسات ومستقل كل يوم.
لأنه أول بضاعة بتقدر تبيعها فعلاً
افتح خمسات أو مستقل هلق وفلتر طلبات البرمجة: نسبة كبيرة منها «بدي صفحة تعريفية لمحلي/عيادتي/مطعمي». هاد المشروع مو تمرين مدرسي — هو بروفة كاملة على الخدمة اللي رح تبيعها بأول أشهرك. لما تخلصه بتكون جربت دورة الشغل الحقيقية من أولها لآخرها: فهم حاجة صاحب محل، تحويلها لأقسام صفحة، تنفيذها نظيفة، ونشرها برابط حي.
وللعميل اللي بيشوفه بمعرضك، هالمشروع بيثبت ثلاث أشياء دفعة وحدة: إنك بتفهم شو بيحتاج زبون المحل (مو بس شو بيحلى للمبرمج)، إن صفحتك بتشتغل صح عالموبايل — وهي القناة اللي بيجي منها معظم زوار المحلات عندنا — وإنك بتقدر تسلّم قطعة كاملة، مو نص شغلة. صاحب المطعم ما بيفرق معه Grid ولا Flexbox؛ بيفرق معه إن رقم الواتساب بينضغط وبيفتح محادثة.
والميزة الخفية: لأنك اخترت محلاً حقيقياً بتعرفه، القرارات كلها بتصير ملموسة. مو «نص تجريبي هون» — بل قائمة أسعار حقيقية، عنوان حقيقي، وصور بتمثل المحل. هالواقعية هي بالضبط اللي بتفرق بين بورتفوليو بيقنع وبورتفوليو بيتجاهله العميل.
الخطوات التنفيذية الكاملة — 8 خطوات بأسبوع
المدة محسوبة على 2–3 ساعات شغل يومياً. لا تقفز خطوة: الترتيب نفسه جزء من التمرين.
- الخطوة 1 — اختر المحل واجمع «مواده الخام» (نص يوم): اختر محلاً بتعرفه شخصياً: مطعم، صيدلية، محل ألبسة، صالون. اكتب بورقة: اسم المحل، شو بيقدم، أهم 5–8 خدمات أو أصناف بأسعارها، رقم الواتساب، العنوان، وساعات الدوام. صوّر المحل بموبايلك أو اطلب صوراً من صاحبه — وإذا ما توفرت، استخدم صوراً مجانية من Pexels كبديل مؤقت واذكر ذلك لنفسك.
- الخطوة 2 — اختر تصميماً مرجعياً والتزم فيه (ساعة): دوّر على صفحات هبوط حقيقية لمحلات مشابهة وخذ لقطة شاشة لأفضل وحدة. المرجع بيحميك من أسوأ عدو للمبتدئ: التصميم الارتجالي اللي بيتغير كل ساعة. قرارك هون: ترتيب الأقسام، لوحة ألوان من 2–3 ألوان، وخط عربي واحد واضح.
- الخطوة 3 — خطط الأقسام عالورق قبل الكود (ساعة): ارسم مستطيلات بسيطة: بطل فيه اسم المحل وجملة وحدة وزر واتساب، قسم الخدمات/الأسعار، قسم «ليش نحنا»، قسم الموقع وساعات الدوام، وتذييل فيه كل وسائل التواصل. اكتب جنب كل قسم شو عنصر HTML المناسب له. خمس دقايق تخطيط بتوفر ساعة تعديل.
- الخطوة 4 — ابنِ هيكل HTML كاملاً بلا أي تنسيق (يوم): اكتب الصفحة بوسوم دلالية:
headerوmainوsectionوfooter، عناوين متدرجة h1 ثم h2، وقوائم فعلية للأسعار. افتحها بالمتصفح وهي «بشعة» — إذا المعلومات مفهومة ومرتبة منطقياً بلا CSS، فالأساس سليم. لا تفتح ملف التنسيق قبل ما يخلص الهيكل كله. - الخطوة 5 — نسّق للموبايل أولاً (يومان): ابدأ CSS وعرض المتصفح مضيّق بحجم موبايل: خطوط مقروءة، مسافات مريحة، أزرار بحجم إصبع. بعد ما تظبط الموبايل، وسّع الشاشة وأضف Media Query وحدة أو اثنتين للشاشات الكبيرة — خلّي الخدمات تصطف بأعمدة بـGrid والبطل يصير صفين متجاورين بـFlexbox. هالترتيب (موبايل ← كمبيوتر) أسهل بكثير من العكس.
- الخطوة 6 — فعّل التواصل: واتساب وخريطة (نص يوم): زر الواتساب لازم يكون رابط
wa.meحقيقياً بيفتح محادثة برسالة جاهزة، ورقم الهاتف رابطtel:بيتصل من أول ضغطة. أضف رابط موقع المحل على خرائط Google. جرّب التلاتة من موبايلك فعلياً — هي الأزرار اللي بتحوّل الصفحة من «ديكور» لأداة بتجيب زبائن. - الخطوة 7 — اضغط الصور وافحص السرعة (نص يوم): مرّر كل الصور على أداة ضغط مجانية (Squoosh مثلاً) وصدّرها بمقاسات معقولة — صورة بطل أقل من 200 كيلوبايت. افتح الصفحة على نت موبايل حقيقي: إذا أخدت أكثر من 3–4 ثواني ببيئة نت سوري، في شي بدو تخفيف. السرعة معيار جودة عند العميل حتى لو ما بيعرف يسميه.
- الخطوة 8 — انشر برابط حي ووثّق (نص يوم): ارفع المشروع على GitHub وفعّل GitHub Pages ليصير للصفحة رابط بيفتح من أي جهاز. اكتب ملف README قصيراً: شو المشروع، شو استخدمت، وشو أصعب مشكلة حليتها. الرابط الحي + الكود المرتب هما اللي رح ترسلهما بكل عرض.
معايير التقييم الذاتي — 7 بنود قبل ما تعتبره منجزاً
- الصفحة سليمة على الموبايل والكمبيوتر معاً. جرّبها على عرض 360 بكسل وعلى شاشة كبيرة: لا نص طالع عن حدوده، لا تمرير أفقي، لا صور مبعوجة. كسر واحد بالتخطيط بيسقط الانطباع كله.
- فيها كل ما يحتاجه زبون المحل فعلاً. اسأل نفسك سؤال الزبون: شو بيقدموا؟ قديش الأسعار؟ كيف بحكيهم؟ وين محلهم؟ إذا جواب واحد ناقص، الصفحة ناقصة مهما كانت حلوة.
- أزرار التواصل شغالة من موبايل حقيقي. واتساب بيفتح محادثة، الرقم بيتصل، والخريطة بتفتح الموقع الصحيح — جرّبتها بإيدك، مو افترضتها.
- كل سطر كود مكتوب بإيدك وبتقدر تشرحه. لو سألك حدا «ليش استخدمت Grid هون؟» بتجاوب بثقة. الكود المنسوخ بلا فهم بينكشف بأول تعديل بيطلبه عميل.
- النتيجة قريبة من المرجع اللي اخترته. حط لقطة المرجع جنب صفحتك: التقارب بالترتيب والتوازن دليل إن عينك وإيدك عم يشتغلوا سوا — مش مطلوب تطابق، مطلوب مستوى.
- الصفحة خفيفة وسريعة. الصور مضغوطة، ما في ملفات بلا داعي، وبتفتح خلال ثوانٍ على نت موبايل عادي.
- الرابط الحي والكود منشوران ومرتبان. GitHub Pages شغال، والمستودع فيه README واضح وأسماء ملفات منطقية — لأن العميل الجاد (والشركة) بيفتحوا الكود مو بس الصفحة.
كيف تعرضه بمعرض أعمالك؟
الصياغة: لا تكتب «صفحة HTML وCSS» — هاد وصف أدوات، مو قيمة. اكتب: «صفحة هبوط لمطعم [الاسم]: تعريف بالمنيو والأسعار مع تواصل واتساب مباشر — مصممة للموبايل أولاً وبتفتح بأقل من 3 ثواني». العميل بيشتري النتيجة، والأدوات بتنذكر بسطر تقني بالآخر.
اللقطات: جهّز ثلاث صور: لقطة كاملة للصفحة عالكمبيوتر، لقطة موبايل (أهم وحدة — خليها الأولى)، ولقطة مركّزة على قسم الأسعار أو زر الواتساب. وطبعاً الرابط الحي فوق كل شي: «شوف الصفحة شغالة» أقوى من عشر صور.
قصة القطعة: سطران بيرفعوا قيمتها فوراً: ليش اخترت هالترتيب للأقسام؟ شو أصعب مشكلة واجهتك (تجاوب الجدول عالموبايل مثلاً) وكيف حليتها؟ العميل اللي بيقرأ قصة تفكير بيثق أكثر من اللي بيشوف صورة صامتة. والتفاصيل الكاملة لبناء معرض كامل من الصفر عندك بدليل بورتفوليو بلا خبرة.
الأخطاء القاتلة بهالمشروع
محل خيالي بمحتوى «لوريم إيبسوم»
صفحة بنصوص حشو وأسعار وهمية بتبين فوراً إنها تمرين. المحل الحقيقي بمعلوماته الحقيقية هو نص قوة المشروع — لا تفرّط فيه كرمى للسهولة.
البدء بالتنسيق قبل الهيكل
ساعتان على ظل الزر قبل ما يكون في قسم أسعار أصلاً. النتيجة صفحة «حلوة» ناقصة وظيفياً — والوظيفة هي اللي بتبيع.
قالب جاهز أو Bootstrap «للتسريع»
الهدف من المشروع إثبات إنك بتبني بإيدك. قالب جاهز بهالمرحلة بيلغي التمرين كله، وأول طلب تعديل خارج القالب بيفضحك قدام العميل.
تلميع بلا نهاية
أسبوع هو السقف. اللي بيضل شهراً «يكمّل» صفحة الهبوط بيتأخر شهراً عن JavaScript. سلّم قطعة جيدة اليوم أفضل من مثالية ما بتخلص.
سؤالان قبل ما تبلّش
لازم آخد إذن صاحب المحل؟
للتمرين والنشر بمعرضك كنموذج: الأدب بيقول خبّره، خصوصاً إذا رح تستخدم اسمه وصوره — وغالباً رح ينبسط. والأذكى من هيك: فرجيه النتيجة. كتير من المبتدئين أخذوا أول شغلة مدفوعة (أو أول شهادة تزكية) من نفس المحل اللي تمرنوا عليه. وإذا ما بدك تحكي معه، غيّر الاسم لاسم متخيَّل وخلّي الباقي واقعياً.
بس أنا لسا ما خلصت CSS منيح — أبلّش؟
إذا خلصت أساسيات HTML وCSS مع Flexbox وGrid (المرحلة الأولى بخارطة المسار)، بلّش حتى لو حاسس حالك مو جاهز — الإحساس هاد طبيعي وما بيروح بمزيد من الدروس، بيروح بمشروع. واللي رح تعلق فيه أثناء الشغل هو بالضبط اللي كان ناقصك تتعلمه.
خلصته؟ هي خطوتك الجاية
هالمشروع أول حلقة بسلسلة ثلاثية بمسار البرمجة: بعده مشروع تطبيق المهام بـJavaScript اللي بينقلك من ترتيب الصفحات للبرمجة الفعلية، وبعدها بيجمعهم كلهم موقعك الشخصي — معرض أعمالك الحي. وإذا حاسس إن القطعة الأولى صارت جاهزة للسوق، اقرأ دليل أول عميل فريلانس — لأن في ناس أخذت أول شغلة بصفحة هبوط وحدة بس.