مجال تطوير الويب اصبح من اكبر المجالات التي يميل لها المبرمجين في العالم.
ولتعدد الادوات والخطوات التي عليك تعلمها اصبح المبتدئين يرون صعوبة في كيفية الابتداء بهذا المجال.
فكيف تبدأ في مجال Front-end؟ وهل هنالك خارطة يمكنك اتباعها؟🤔
هذا ما سأحاول شرحه بشكل عام في هذا لثريد:
ولتعدد الادوات والخطوات التي عليك تعلمها اصبح المبتدئين يرون صعوبة في كيفية الابتداء بهذا المجال.
فكيف تبدأ في مجال Front-end؟ وهل هنالك خارطة يمكنك اتباعها؟🤔
هذا ما سأحاول شرحه بشكل عام في هذا لثريد:
تعريف المجال:
ويكيبيديا:
ممارسة لتحويل البيانات إلى واجهة رسومية ، من خلال استخدام HTML و CSS و JavaScript ، بحيث يمكن للمستخدمين عرض هذه البيانات والتفاعل معها.
Udacity:
الواجهة الأمامية لموقع الويب هي الجزء الذي يتفاعل معه المستخدمون. كل ما تراه أثناء التنقل عبر الإنترنت.
ويكيبيديا:
ممارسة لتحويل البيانات إلى واجهة رسومية ، من خلال استخدام HTML و CSS و JavaScript ، بحيث يمكن للمستخدمين عرض هذه البيانات والتفاعل معها.
Udacity:
الواجهة الأمامية لموقع الويب هي الجزء الذي يتفاعل معه المستخدمون. كل ما تراه أثناء التنقل عبر الإنترنت.
كيف تبدأ في المجال:
1- اختر المحرر الذي تريد التعلم عليه، وانصحك بالمحرر VS code الذي يختص بسهولة اضافة extensions تفيدك في تنسيق الكود.
2 - عليك اولا تعلم اساسيات تصميم المواقع والتي تتضمن تعلم اللغات:
HTML - CSS - JavaScript
وكيفية تفاعلهم مع بعض داخل صفحات الويب
1- اختر المحرر الذي تريد التعلم عليه، وانصحك بالمحرر VS code الذي يختص بسهولة اضافة extensions تفيدك في تنسيق الكود.
2 - عليك اولا تعلم اساسيات تصميم المواقع والتي تتضمن تعلم اللغات:
HTML - CSS - JavaScript
وكيفية تفاعلهم مع بعض داخل صفحات الويب
HTML:
هي لغة تساعدك في بناء اساسيات وعناصر موقعك، تعلمها سهل ولن يأخذ الكثير من الوقت.
CSS:
لغة تنسيقات تعدل على شكل عناصر HTML، قد يأخذ تعلمها بعضا من الوقت فأنصحك بتصميم موقعك الخاص او اي موقع بسيط لتتعلمها بشكل افضل.
هي لغة تساعدك في بناء اساسيات وعناصر موقعك، تعلمها سهل ولن يأخذ الكثير من الوقت.
CSS:
لغة تنسيقات تعدل على شكل عناصر HTML، قد يأخذ تعلمها بعضا من الوقت فأنصحك بتصميم موقعك الخاص او اي موقع بسيط لتتعلمها بشكل افضل.
بعض من مهارات CSS المهمة:
- توسيط العناصر.
- تعديل الالوان والخطوط.
- margins & padding
- Media query جعل الموقع يظهر بشكل جيد في جميع الشاشات
- توسيط العناصر.
- تعديل الالوان والخطوط.
- margins & padding
- Media query جعل الموقع يظهر بشكل جيد في جميع الشاشات
JavaScript:
لغة برمجة تعمل في web browsers، وتعمل على تفاعل العناصر في الموقع واضافتها وتعديلها بالاضافة الى تنفيذ الاوامر البرمجية كأي لغة اخرى.
مقال كتبته عن اساسيات جافا:
لغة برمجة تعمل في web browsers، وتعمل على تفاعل العناصر في الموقع واضافتها وتعديلها بالاضافة الى تنفيذ الاوامر البرمجية كأي لغة اخرى.
مقال كتبته عن اساسيات جافا:
3- الان بعد تعلمك اساسيات تصميم المواقع يمكنك تعلم CSS framework يساعدك على اختصار الوقت حيث انه يحتوي على اكواد جاهزة يمكنك استخدامها في تصاميمك.
مثال على CSS framework:
bootstrap - Tailwind
مثال على CSS framework:
bootstrap - Tailwind
4- يمكنك بعد ذلك تعلم التعامل مع اوامر git وكيفية حفظ وتعديل مشروعك داخل موقع Github الذي يسهل عليك الوصول الى مشاريعك وتعديلها في أي وقت.
5 - يمكنك في نفس الوقت تعلم Webpack و مدير الحزم nodejs اللذان يسهلان جلب مختلف انواع الحزم والملفات لسهولة تضمينها في مشروعك.
5 - يمكنك في نفس الوقت تعلم Webpack و مدير الحزم nodejs اللذان يسهلان جلب مختلف انواع الحزم والملفات لسهولة تضمينها في مشروعك.
6- الان يمكنك تعلم framework خاص بمطوري الويب ومنها:
Vue - React - Angular
حتى الان ستكون لديك خبرة كافية لتعمل بشكل حر وتصمم جميع انواع المواقع المختلفة، انصحك بتصميم موقع تجاري مثلا لتطبق كل ما تعلمته.
Vue - React - Angular
حتى الان ستكون لديك خبرة كافية لتعمل بشكل حر وتصمم جميع انواع المواقع المختلفة، انصحك بتصميم موقع تجاري مثلا لتطبق كل ما تعلمته.
بهذه الطريقة انتهيت من واحدة من خرائط تعلم تطوير واجهات الويب.
اتمنى انكم استفدتم وبامكان اي مطور ان يعدل او يضيف أي نقطه لم اذكرها او اخطأت في ذكرها.
شكرا للقراءة🙏🌹
اتمنى انكم استفدتم وبامكان اي مطور ان يعدل او يضيف أي نقطه لم اذكرها او اخطأت في ذكرها.
شكرا للقراءة🙏🌹
جاري تحميل الاقتراحات...