مُلخص للنقاط الأساسية التي تم تناولها خلال دورة تطوير واجهات المستخدم للاستعداد للإختبار

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

لديك موسوعة حسوب كمرجع لك، وأيضًا مقالات البرمجة التي بالأكاديمية.

وبشكل عام، حجر الأساس هي لغة HTML والتي من خلالها نبني هيكل المحتوى، حيث يجب أن تكون قادر على بناء هيكل سليم ومنطقي لصفحات الويب، وتذكر أهمية العناصر الدلالية Semantic HTML لتنظيم المحتوى وتحسين قابلية الوصول ومحركات البحث، وفكر في كيف استخدمت <div>, <nav>, <header>, <footer>, <article>, <section> وغيرها في المشاريع المختلفة.

ثم CSS، حيث درسنا الأساسيات وهي المحددات، خصائص التنسيق (ألوان، خطوط، هوامش، مسافات داخلية)، ونموذج الصندوق Box Model.

ثم التخطيط Layout وفهمك لـ Flexbox و Grid ضروري لبناء تخطيطات معقدة ومتجاوبة، وتذكر كيف استخدمتها في بناء الصفحات الرئيسية، القوائم، وتوزيع العناصر.

ثم Sass لمعالجة التنسيقات المتقدمة، وتم تقديمه في مشروع المتجر الإلكتروني، مما يعني أنك يجب أن تفهم فوائده مثل المتغيرات، التضمين، المكسنات والوراثة وغيرهم، وكيف يساعد في كتابة CSS أكثر تنظيمًا، خاصة في المشاريع الكبيرة.

ثم أساسيات JS ودرسنا المتغيرات، الدوال، التحكم في DOM للوصول للعناصر وتعديلها، والتعامل مع الأحداث Events.

ثم درسنا jQuery لتسهيل كتابة كود JS، وعلى الرغم من أن الاتجاه الحديث يقلل من الاعتماد على تلك المكتبة، إلا أن الدورة غطتها لأنّ هناك مشاريع قائمة تعتمد عليها بالفعل في الواقع العملي، وتذكر كيف تُسهل jQuery تحديد العناصر، التلاعب بالـ DOM، وإضافة التأثيرات والتعامل مع AJAX.

ثم انتقلنا للتصميم المتجاوب Responsive Design، وذلك مفهوم محوري في الدورة، حيث يجب أن تفهم كيف تجعل واجهاتك تعمل بشكل جيد على مختلف أحجام الشاشات (موبايل، تابلت، ديسكتوب)، وتقنيات مثل Media Queries، واستخدام وحدات القياس النسبية (%, vw, vh)، وتخطيطات Bootstrap المرنة هي كلمة السر لذلك وهو النظام الشبكي Grid System.

للتذكير Bootstrap يوفر لك كلاسات مثل .col-sm-12 للشاشات الصغيرة، .col-md-6 للشاشات المتوسطة، .col-lg-4 للشاشات الكبيرة لتحقيق ذلك بسهولة بدون كتابة Media Queries معقدة بنفسك لكل عنصر.

أي كلاسات sm, md, lg هي الخاصة بمقاسات الشاشات.

وللعلم نظام الشبكة يجب استيعابه، أي فهم كيفية تقسيم الصفحة إلى صفوف وأعمدة container, row, col-* فهو أساس بناء تخطيطات متجاوبة بسرعة.

أيضًا المكونات الجاهزة من أزرار، قوائم تنقل، بطاقات، نماذج، إلخ، تذكر كيف استخدمتها لتوفير الوقت والجهد وضمان مظهر متناسق.

والترقية إلى Bootstrap 5، عليك استيعاب الفروقات الأساسية وكيفية الانتقال بين الإصدارات.

ثم قمنا بدراسة Hugo وهو إطار مولد للمواقع الساكنة static، واستخدمناه لبناء مواقع ثابتة لشركة، شخصية، مدونة بسيطة.

ومن ميزاته السرعة، الأمان، سهولة النشر، وعليك استيعاب معمارية القوالب Templates به وفهم كيفية استخدام وتعديل القوالب في Hugo.

ثم درسنا إظهار بيانات من API داخل القالب في مشروع الموقع الإخباري، وذلك للربط بين عالم المواقع الساكنة والمحتوى الديناميكي، للتوضيح أن مواقع الويب هي أكثر من مجرد صفحات HTML ثابتة، وستحتاج إلى مراجعة مفهوم الـ API:

والآن ما عليك فعله بعد المراجعة هو التطبيق العملي فهو الأهم حيث يجب تخصيص 60% من وقت الدراسة للتطبيق العملي ولا تشتت نفسك وتنجرف وراء المشاهدة والقراءة فقط وذلك يُعرف باسم Tutorial Hell، وبعد مدة زد النسبة إلى 70-80% الفكرة هي أن يكون الجزء الأكبر من وقتك مخصصًا للكتابة الفعلية للكود، بناء المشاريع، وحل المشكلات.

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

ثم البدء في مشاريع شخصية جديدة حتى لو كانت بسيطة، لتطبيق ما تعلمته بأفكار وتطبيقات مختلفة، أي حاول بناء صفحة بسيطة من الصفر باستخدام HTML, CSS, و JS.

وجرب استخدام مكونات Bootstrap لإنشاء تخطيط سريع، وفكر في كيفية تطبيق مبادئ التصميم المتجاوب على أي واجهة تراها.

بشكل مُتدرج ستحتاج إلى القيام بما تم ذكره هنا:

قم ببناء جزء صغير من الموقع باستخدام html و CSS وأنصحك بتنفيذ التحديات على موقع Frontend mentor مع تحديد التمارين الخاصة بالمستوى المبتدئ newbie ثم  junior ثم تستطيع زيادة الصعوبة فيما بعد إلى intermediate، وإليك التمارين مباشرًة:

• https://www.frontendmentor.io/challenges?difficulty=1&type=free%2Cfree-plus

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

ثم التمارين التالية:

ثم بعد ذلك تدرج في الصعوبة نحو إنشاء موقع بالكامل، ثم تدرج في الصعوبة نحو إنشاء موقع متعدد الصفحات.

ثم الإنتقال لمرحلة تعلم الـ JS والتعمق بها من خلال المسار الأول من دورة جافاسكريبت هنا بالأكاديمية فهو مجاني لك كحال باقي المسارات الأولى من جميع الدورات، بعد أن تصبح قادرًا على رؤية تصميم وقادر على تنفيذه أي أنك قادر على بناء موقع بالكامل باستخدام HTML و CSS على الأقل التصاميم المتوسطة في الصعوبة، أي بعد إنشاء تصميمين كاملين.

الإختبار سيكون كالتالي:

1. إجراء محادثة صوتيّة لمدة 30 دقيقة يطرح المدرّب عليك أسئلة متعلّقة بالدورة والأمور التي نفّذتها خلالها.
2. يحدد لك المدرّب مشروعًا مرتبطًا بما قمت به أثناء الدورة لتنفيذه خلال فترة محددة تتراوح بين أسبوع إلى أسبوعين.
3. إجراء محادثة صوتيّة أخرى لمدّة 30 دقيقة يناقش بها مشروعك وما نفذته وتطرح أسئلة خلالها.

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

وعليكم السلام ورحمة الله وبركاته.

أولا أهنئك على إنهاء محتوى الدورة وبالتوفيق لك في الإختبار إن شاء الله ومبارك لك مقدما .

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

وإليك الروابط التالية :

• واجهات المستخدم
• css
• html
• موسوعة حسوب

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

وإذا أردت اولا إختبار نفسك والتدرب قليلا فإليك الإجابات التالية لكثير من المواقع التي تستطيع من خلالها التدرب وإختبار مستواك في CSS :

بعد ذلك وهذه الخطوة إضافة وهي أن تقوم بالبحث على تصاميم على الإنترنت ومن ثم إنشاء مواقع مثلها والتدرب عليها مما سيطعيك أفكارا كثيرة وخبرة كبيرة في التصميم والتنسيقات وإليك المواقع التي تستيطع إستلهام التصاميم منها :