Get best of the week

إذا علمت Frontend اليوم. نصائح للمبتدئين

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

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

لذلك تريد أن تصبح مطور Frontend. ما هو المطلوب لهذا؟

تعلم HTML ، CSS ، Javascript

HTML و CSS


هاتان التقنيتان ضروريتان لتخطيط الموقع. التخطيط عبارة عن ترتيب للنص والصور والأزرار وعناصر الواجهة الأخرى على الصفحة.

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

موقع بدون CSS ومعه

كيف تتقن


بادئ ذي بدء ، يجب عليك قراءة مقالة أو فيديو المراجعة حول هذه التقنيات. حتى تفهم جوهرها.

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

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

أين يمكن الحصول على أفكار وتخطيطات للتخطيط؟


لقد استخدمت Dribbble و CollectUI ، ولكن يمكن أيضًا البحث في Behance و One Page Love .

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

صورة

جافا سكريبت


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

إذا كنا نقوم بإنشاء صفحة باستخدام HTML و CSS ، فإن JavaScript مسؤولة عن الجزء الديناميكي من الصفحة: الرسوم المتحركة وعرض البيانات ومعالجة الإجراءات وأكثر من ذلك بكثير.

لماذا أحتاجها؟


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

فيما يلي مثال على هذا التنفيذ باستخدام jQuery :



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

كيف تتقن


أفضل رهان لك هو بدء التعلم على learn.javascript.ru . هذا مورد رائع ، وهو قاعدة معرفية للمبتدئين والمطورين المتقدمين.

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

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

صورة

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

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

ماذا بعد؟


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

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

صورة

أوصي بأن تتعرف على خريطة الطريق الأمامية . فيما يلي تقنيات تطوير الواجهة التي ستحتاجها في المستقبل.

في المستقبل ، ربما تكون مهتمًا بأطر التفاعل مثل React أو Vue.. لبناء تطبيقات عليها سوف تتعلم Webpack ، ولتسريع عملية التخطيط ، ستتعلم المعالجات الأولية PUG و SASS . أو ربما تريد التعمق في الرسومات ومعرفة كيفية العمل مع D3 أو WebGL .

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


رافق PS I كل تقنية في هذه المقالة مع ارتباط إلى وثائق أو أمثلة للاستخدام. يمكنك التعرف عليهم للحصول على فهم أوسع لتطوير الويب.

More articles:


All Articles