من صفر إلى بطل الواجهة الأمامية (الجزء الأول)

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

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

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

من صفر إلى بطل الواجهة الأمامية (الجزء الثاني)

دليل كامل لتعلم موقع تطوير الواجهة الأمامية

أساسيات HTML و CSS

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

للبدء ، اقرأ دروس HTML و CSS من شبكة مطوري Mozilla (MDN). يوفر MDN تفسيرات فصلاً فصلاً لمفاهيم HTML و CSS المهمة. بالإضافة إلى ذلك ، كل فصل عبارة عن صفحة طويلة فقط ، مع عروض توضيحية تفاعلية مرتبطة بـ CodePen و JSFiddle.

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

للتدرب على CSS ، جرب CSS Diner. إنها لعبة تحدي CSS ممتعة. جانب آخر مهم من HTML و CSS هو التخطيطات. LearnLayout هو برنامج تعليمي تفاعلي يوضح لك كيفية إنشاء تخطيطات باستخدام HTML و CSS.

تعرف أيضًا على كيفية استخدام Google Fonts مع Basics of Google Font API بواسطة CSSTricks. الطباعة هي لبنة أساسية في بناء الواجهات. عندما يكون لديك الوقت ، أوصي بشدة بقراءة هذا الكتاب المجاني عبر الإنترنت ، Professional Web Typography بقلم دوني ترونج. يعلمك كل ما تحتاج لمعرفته حول الطباعة كمطور للواجهة الأمامية.

من خلال هذه الموارد ، لا تقلق كثيرًا بشأن حفظ الأشياء. بدلاً من ذلك ، ركز على فهم كيفية عمل HTML و CSS معًا.

التدرب على أساسيات HTML و CSS

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

التجربة 1

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

باستخدام CodePen ، تقتل عصفورين بحجر واحد. من ناحية ، أنت تمارس HTML و CSS. من ناحية أخرى ، تقوم بإنشاء محفظة تقدم أساسية. سنستخدم أيضًا Dribbble ، وهو موقع مليء بإلهام التصميم.

انتقل إلى Dribbble وابحث عن تصميم بسيط بما يكفي للترميز في غضون ساعات قليلة. لقد اخترت بعض التصميمات لتبدأ: 1 و 2 و 3 و 4 و 5. اخترت تصميمات الويب للجوال أولاً لأنها أقل تعقيدًا من نظيراتها المكتبية. ومع ذلك ، لا تتردد في اختيار تصميمات سطح المكتب أيضًا.

بعد أن تقرر التصميم ، انطلق وجرب ترميزه في CodePen. إذا واجهتك مشكلة ، تذكر أن StackOverflow هو صديقك. هناك ممارسة مفيدة أخرى وهي الانتقال إلى مواقع الويب مثل Medium و AirBnB و Dropbox واستخدام أداة المفتش لمعرفة كيفية تحقيق تخطيطات وأنماط مختلفة. ألق نظرة أيضًا على بعض الأقلام الموجودة على CodePen. لقد اخترت بعض المراجع الجيدة:

  • واجهة تطبيق القائمة
  • القطعة تويتر
  • بطاقة أخبار المادة
  • قائمة مسطحة بسيطة

إذا كانت نسختك تبدو مختلفة عن النسخة الأصلية ، فلا تقلق. استمر في التدرب على تصميمات مختلفة وستلاحظ تحسنًا في كل مرة.

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

التجربة 2

نأمل أن تكون التجربة الأولى قد أعطتك بعض الثقة في كتابة HTML و CSS. بالنسبة للتجربة 2 ، سنلقي نظرة على بعض المواقع ، ثم نبرمج بعضًا من مكوناتها.

تستخدم بعض مواقع الويب أطر CSS أو تخفي أسماء فئات CSS الخاصة بها ، مما يجعل من الصعب عليك قراءة شفرة المصدر الخاصة بها. هذا هو السبب في أنني اخترت عددًا قليلاً من مواقع الويب المصممة جيدًا مع شفرة المصدر سهلة القراءة.

  • Dropbox for Business: حاول نسخ قسم البطل الخاص بهم
  • AirBnB: حاول تكرار تذييلها
  • PayPal: حاول نسخ شريط التنقل الخاص بهم
  • Invision: حاول نسخ قسم التسجيل الخاص بهم في أسفل الصفحة
  • شريط: حاول نسخ قسم المدفوعات الخاصة بهم

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

يمكنك ترميز هذه التجربة في CodePen أو تخزينها محليًا. إذا اخترت تخزينه محليًا ، فيمكنك إما تنزيل هذا المشروع كمثال معياري أو إنشاء الملفات من البداية. أقترح استخدام محرر مثل Atom أو Sublime.

أيضًا ، ضع في اعتبارك أنه بالنسبة لأي موقع ويب ، يمكنك دائمًا رؤية HTML و CSS الخاص به. ما عليك سوى النقر بزر الماوس الأيمن فوق الصفحة أو أحد المكونات الموجودة بالصفحة ، والنقر فوق فحص ، وستظهر لوحة بها HTML على اليسار و CSS على اليمين. بمجرد الانتهاء أو التعثر ، استخدم المفتش لمعرفة كيفية مقارنة HTML و CSS.

أفضل ممارسات HTML و CSS

ما كنت تتعلمه حتى الآن هو أساسيات HTML و CSS. الخطوة التالية هي تعلم أفضل الممارسات. أفضل الممارسات هي مجموعة من القواعد غير الرسمية التي تعمل على تحسين جودة التعليمات البرمجية الخاصة بك.

الترميز الدلالي

واحدة من أفضل الممارسات لـ HTML و CSS هي كتابة العلامات الدلالية. تعني دلالات الويب الجيدة استخدام علامات HTML المناسبة وأسماء فئات CSS ذات المعنى لنقل المعنى البنيوي.

على سبيل المثال ، تخبرنا علامة h1 أن النص الذي يتم التفافه هو عنوان مهم. مثال آخر هو علامة التذييل ، والتي تخبرنا أن العنصر ينتمي إلى أسفل الصفحة. لمزيد من القراءة ، اقرأ نظرة على دلالات HTML5 المناسبة وما الذي يجعل اسم الفصل الدلالي بواسطة CSSTricks.

اصطلاحات تسمية CSS

أفضل الممارسات التالية المهمة لـ CSS هي اصطلاحات التسمية الصحيحة. اصطلاحات التسمية الجيدة ، مثل الترميز الدلالي ، تنقل المعنى وتساعد في جعل الكود الخاص بنا قابلًا للتنبؤ به وقابل للقراءة ويمكن صيانته. يمكنك أن تقرأ عن اصطلاحات التسمية المختلفة في المقالة OOCSS و ACSS و BEM و SMACSS: ما هي؟ ما الذي يجب علي استخدامه؟

بشكل عام ، أقترح تجربة اصطلاحات تسمية بسيطة تجعلك بديهيًا. بمرور الوقت ، ستكتشف تلك التي تناسبك بشكل أفضل. لمعرفة كيف تستخدم شركات مثل Medium اصطلاحات التسمية مثل BEM ، اقرأ Medium's CSS هو في الواقع جيد جدًا. في هذه المقالة ، ستتعلم أيضًا أن التوصل إلى مجموعة فعالة من اصطلاحات CSS هي عملية تكرارية.

إعادة تعيين CSS

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

عبر دعم المتصفح

يعني دعم المستعرضات المتقاطعة أن التعليمات البرمجية الخاصة بك تدعم معظم المتصفحات الحديثة. تحتاج بعض خصائص CSS مثل الانتقال إلى بادئات البائعين لتعمل بشكل صحيح عبر متصفحات مختلفة. يمكنك قراءة المزيد حول بادئات البائعين في هذه المقالة ، CSS Vendor Prefixes. أهم شيء هو أنه يجب عليك اختبار موقع الويب الخاص بك عبر متصفحات متعددة بما في ذلك Chrome و Firefox و Safari.

معالجات CSS الأولية والمعالجات اللاحقة

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

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

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

عندما تكتشف معالجات CSS الأولية والمعالجات اللاحقة لأول مرة ، فمن المغري استخدامها في كل مكان. ومع ذلك ، ابدأ بسيطًا وأضف ملحقات مثل المتغيرات والمزج عند الضرورة فقط. المقالة التي اقترحتها سابقًا ، Medium's CSS هي في الواقع جيدة جدًا ، وتغطي أيضًا مقدار ما هو أكثر من اللازم عندما يتعلق الأمر بالمعالجات الأولية.

أنظمة الشبكة والاستجابة

أنظمة الشبكة هي هياكل CSS تتيح لك تكديس العناصر أفقيًا وعموديًا.

توفر أطر عمل الشبكة مثل Bootstrap و Skeleton و Foundation أوراق أنماط تدير الصفوف والأعمدة في التخطيطات. بينما تكون أطر عمل الشبكة مفيدة ، من المهم أيضًا فهم كيفية عمل الشبكات. يعد فهم أنظمة شبكة CSS وعدم التفكير في الشبكات نظرة عامة رائعة.

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

يمكنك قراءة المزيد حول استعلامات الوسائط في مقدمة إلى استعلامات الوسائط. أيضًا ، نظرًا لأننا دخلنا حقبة الجوّال أولاً ، تحقق من مقدمة إلى استعلامات Mobile-First Media Queries.

ممارسة أفضل ممارسات HTML و CSS

الآن بعد أن أصبحت مسلحًا بأفضل الممارسات ، دعنا نختبرها. الهدف من هاتين التجربتين التاليتين هو التدرب على كتابة كود نظيف ومراقبة التأثير طويل المدى لأفضل الممارسات على قابلية القراءة والصيانة.

التجربة 3

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

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

إليك بعض الأشياء التي يجب أن تسألها لنفسك عند إعادة هيكلة التعليمات البرمجية الخاصة بك.

  • هل أسماء صفك غامضة؟ 6 أشهر من الآن ، هل ستستمر في فهم معنى اسم فصلك الدراسي؟
  • هل HTML و CSS دلالات؟ عند إلقاء نظرة خاطفة على الكود الخاص بك ، هل أنت قادر على تمييز المعنى البنيوي والعلائقي بسرعة؟
  • هل تعيد استخدام نفس رمز اللون السداسي مرارًا وتكرارًا في شفرتك؟ هل سيكون من المنطقي إعادة بنائه إلى متغير Sass؟
  • هل يعمل الرمز الخاص بك على Safari كما هو الحال في Chrome؟
  • هل يمكنك استبدال بعض رموز التخطيط الخاصة بك بنظام شبكة مثل Skeleton؟
  • هل تستخدم علامة ! المهمة كثيرًا؟ كيف يمكنك اصلاح ذلك؟

التجربة 4

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

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

للبدء ، اتبع مع مقال Adham Dannaway ، سير العمل الخاص بي (البسيط) لتصميم وتطوير موقع محفظة

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

ابقى جاهزا

على الرغم من أن HTML و CSS لن يخرجا عن المألوف في أي وقت قريبًا ، فمن المهم مواكبة المشهد الأمامي.

يوجد أدناه قائمة بمواقع الويب والمدونات والمنتديات الممتعة للقراءة والغنية بالمعلومات.

  • CSSTricks
  • مجلة التحطيم
  • أخبار المصمم
  • جوز +
  • معالج CSS

تعلم بالقدوة

أخيرًا ، أفضل طريقة للتعلم هي بالقدوة. فيما يلي مجموعة من أدلة الأنماط واصطلاحات التعليمات البرمجية التي ستعلمك كيف تكون واجهة أمامية أكثر فعالية.

Styleguides

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

  • Mapbox
  • كوكب وحيد
  • قوة المبيعات
  • ميل تشيمب

اتفاقيات التعليمات البرمجية

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

  • إرشادات CSS
  • مجموعة أدوات وإرشادات CSS الداخلية من Github
  • دليل نمط CSS الخاص بـ AirBnB

يتم إحتوائه

نأمل بنهاية هذه المقالة أن تكون على دراية بـ HTML و CSS ولديك بعض المشاريع تحت حزامك. أفضل طريقة لتعلم الواجهة الأمامية هي بناء المشاريع والتجريب. تذكر أن كل مطور للواجهة الأمامية يجب أن يبدأ من مكان ما. ومن الأفضل أن تبدأ اليوم بدلاً من الغد.

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

من صفر إلى بطل الواجهة الأمامية (الجزء الثاني)

دليل كامل لتعلم موقع تطوير الواجهة الأمامية

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

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