10 قنوات يوتيوب لتعلم تطوير الواجهة الأمامية الأساسية

نشرت: 2021-01-14

تعلم البرمجة أسهل الآن من أي وقت مضى.

يمكنك العثور على الكثير من البرامج التعليمية المجانية التي تغطي أساسيات تطوير الواجهة الأمامية. ويتلخص ذلك في الواقع في 3 لغات فقط: HTML و CSS وجافا سكريبت.

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

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

DevTips

DevTips يوتيوب

اسأل حول مجتمعات مطوري الويب وسترى دائمًا إشارات إلى قناة DevTips.

إنها مليئة بالبرامج التعليمية المطولة التي تغطي مجموعة من موضوعات الواجهة الأمامية. تتضمن بعض هذه العناصر الأساسيات مثل Vanilla JS أو خصائص CSS3 الأحدث.

لكن البرامج التعليمية الأخرى تدخل في أطر عمل أكثر تقدمًا مثل Vue و React و Ember.

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

LearnCode.academy

LearnCode Academy YouTube

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

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

يتضمن ذلك برامج تعليمية لإدارة الحزم مثل npm & Bower جنبًا إلى جنب مع الموضوعات الموجهة نحو الخادم باستخدام أدوات مثل Docker & AWS.

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

ليفيلوبتتس

قناة LevelUpTuts

أنا من أشد المعجبين بالبرامج التعليمية خطوة بخطوة لأنها توضح لك ما يجب عليك فعله بالضبط ولماذا تفعل ذلك.

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

جميع برامج LevelUpTuts على YouTube التعليمية عبارة عن أدلة كاملة من البداية إلى النهاية ، وستكون مجانية إلى الأبد.

النينجا الصافي

النينجا الصافي

The Net Ninja هي قناة ضخمة تقدم مجموعة واسعة من مواضيع تطوير الواجهة الأمامية. لقد حفز موقعًا فرعيًا يحتوي على قوائم منسقة من البرامج التعليمية المجانية مرتبة حسب الموضوع.

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

يمكنك اختيار TypeScript و Angular و Vue و ES6 و Bootstrap بسرعة من مكان واحد.

تتميز مقاطع الفيديو بجودة عالية أيضًا بأسلوب سرد رائع حتى لا تشعر بالملل أبدًا.

ترافيرسي ميديا ​​(TechGuyWeb)

ترافيرسي ميديا ​​يوتيوب

لا شك أن قناة Traversy Media على YouTube هي واحدة من أفضل القنوات المتوفرة للمطورين.

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

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

إذا كنت ترغب في القيام بعمل مطور ويب بشكل احترافي ، فلن يؤلمك تعلم بعض الترميز الخلفي.

لهذا السبب يجب أن تكون Traversy Media قناة فرعية لا غنى عنها لأي شخص في ترميز الويب بغض النظر عن مستوى المهارة.

دورة الترميز

برنامج الترميز يوتيوب

تحتوي قناة Codecourse على الكثير من مقاطع الفيديو المجانية تمامًا مثل مقاطع الفيديو الأخرى المذكورة في هذه القائمة.

ما يعجبني في Codecourse هو كيفية تمويلهم لمقاطع الفيديو من خلال موقعهم الرئيسي. هذا يعني أنك ستجد الكثير من الأشياء المجانية على YouTube مع ترقيات اختيارية إذا كنت تريدها.

أعتقد أن هناك الكثير للبحث فيه فقط على موقع YouTube وحده ، لذا فهو حقًا أفضل مكان للبدء.

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

ويس بوس

ويس بوس يوتيوب

قام المطور Wes Bos ببناء اسم لنفسه من خلال الكثير من البرامج التعليمية الرائعة عبر الإنترنت.

بعضها مجاني ، والبعض الآخر يكلف المال ، ولكن حتى المجانية منها تقدم الكثير من القيمة.

هذا هو بالضبط ما ستجده على قناته على YouTube التي تقدم مقاطع فيديو مجانية لتشفير الواجهة الأمامية لجميع الجماهير. وفي الحقيقة ، هذه تشبه 99٪ من جميع رموز الواجهة الأمامية.

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

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

LearnWebCode

قناة LearnWebCode

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

يتحدث LearnWebCode حصريًا عن ترميز الواجهة الأمامية. يتضمن ذلك بعض الموضوعات التفصيلية مثل إدارة مشروع Git وكائنات SVG ذات الترميز المخصص باستخدام عنصر canvas. لكن العديد من المتدربين هم مستوى مبتدئ وهو أمر جيد.

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

رائع للجميع من جميع الخلفيات لأنه حتى المطورين المحترفين قد يعثرون على موضوع لم يدرسوه من قبل.

كود الويب (غاريت لوف)

Garret Love YT

قناة Garrett Love على YouTube “CodeTheWeb” صغيرة ولكنها تنمو بسرعة.

يمكنك التحقق من صفحة مقاطع الفيديو لمعرفة ما يقدمه ونوع الجودة التي تتوقعها هنا.

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

بالإضافة إلى ذلك ، هناك مزيج جيد من البرامج التعليمية الطويلة (20-60 دقيقة) جنبًا إلى جنب مع مقاطع الفيديو الإرشادية الأقصر حول الوظائف المستقلة والوظائف.

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

وظيفة ممتعة وممتعة

FunFunFunction يوتيوب

Last هي المفضلة الشخصية لي عند 144 ألف مشترك: Fun Fun Function.

ينشر مضيف قناتك Mattias Petter Johansson مقاطع فيديو تفصيلية حول ترميز JavaScript من البداية. هذه حقًا دورة كاملة للمبتدئين لتعلم JavaScript حتى المستويات المتقدمة. كل هذا مجانا.

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

لن تجد الكثير من أدوات HTML / CSS هنا ، ولكن هذا مثالي لأي شخص يتعمق في JavaScript للويب.