أولا: من هو مصمم الويب؟

 

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

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


ثانيا: ماذا نَعني بـ تمصمم الويب Web Design؟

 

تصميم الويب: هى عملية انشاء واجهات صفحات الويب والانترنت عموما ، مثل واجهة المواقع التى نتصفحها يوميا ( TwitterFacebookYoutube ).

 

عند انشاء موقع، اذا كنت تريد تسهيل الأمر عليك عند التصميم فاتبع ما يلى:

  • ابدأ بتصميم التصميم بالكامل على ورقة خارجية أو أى برنامج أو أداة تقدم لك هذه الخدمة، حيث تساعدك بشكل كبير على ( ترتيب محتوى الصفحة وتنسيقة – خريطة فى ذهنك تسير عليها عند التصميم الفعلى – …ِ إلخ ).
  • انتقل إلى التصميم الفعلى بإستخدام لغات البرمجة الخاصة ببناء هيكل صفحات الويب مثل HTML، ولغة CSS لتنسيق الصفحة (Interface) واضافة الألوان وأنواع الخط…إلخ ، ثم استخدام لغات برمجة أكثر تفاعلية مثل Javascript.

ثالثا: يجب عليك الأن التعرف على الفرق بين Front-end و Back -end.


 

لغات البرمجة التى يجب عليك تعلمها

front-end map
تم أخذ الرسمة التوضيحية السابقة من Kamranahmedse عن طريق موقع Github.

 

1. HTML and CSS 

 

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

إذا كنت تريد أن تصبح مطورًا جديداً للواجهة الأمامية Front-end، فيجب عليك أن تتقن هذين الأمرين وأن تبدأ بهم.

 


 

2. HTML5 & CSS3

 

بعد تعلم HTML & CSS الإصدارات القديمة، ابدأ بتعلم الاصدارات الجديدة مباشرا حيث تم تطوير كل من اللغتين واضافوا عناصر جديدة وتم وضع بعض المزايا الجديدة التى توفر عليك الوقت والجهد،

وفي CSS3 اضافوا مزايا كتيرة جدا من أهمهم (FlexboxAnimation ) والكثير من المزايا التى ستساعدك على التنسيق بشكل أفضل وأسرع.

 


3. Javascript

 

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

 


4. Jquery

 

بعد تعلم لغة Javascript ، ابدأ بتعلم مكتبة الـ Jquery المبنية على Javascript، هذه المكتبة الأشهر على الإطلاق ، ومستخدمة من قبل مواقع كثيرة مشهورة على الانترنت.

 


5. Responsive Design

 

ابدأ بتعلم التصاميم المتجاوبة من أجل تشغيل موقعك على جميع الأجهزة ، لأن موقعك ممكن المستخدم يتصفحة عن طريق Tablet أو Mobile أو Laptop أو عن طريق أى شىء أخر ، يجب أن يكون موقعك Responsive.

 


6. CSS Framework

 

يجب ولابد أن تتعلم أُطر عمل Framework لأنه هيوفر لك إطار عمل كامل لمشروعك وهيسهل عليك ساعات تكتب فيها Pure CSS وهيساعدك بمكونات Components تستخدمها بمشروعك ، وممكن تجعل تصميمك Responsive عن طريقة أيضًا.

 

💡 أشهر الـ Frameworks هم ( BootstrapBulma ).

 


7. CSS Preprocessors

 

تعلم بعض CSS Preprocessor اللى هتسهل عليك أشياء كثيرة جدا فى CSS ، وستتعلم كيفية وضع المتغيرات وأشياء أخرى كثيرة.

 

💡 أمثلة لـ CSS Preproccessors هم ( LessSassStylus ).

 


8. HTML Preprocessors

 

تعلم بعض HTML Preprocessor أيضا اللى هتسهل عليك حاجات كتير جدا فى HTML وهضيف مزايا كثيرة.

 

💡 من أشهر الـ HTML Preprocessor هو PugJS.

 


9. Javascript Frameworks

 

يجب عليك تعلم اطارات عمل Javascript لتسهيل كود JS ولجعل موقعك أسرع ، لو كنت بدور على الـ Performance الخاص بموقعك ، واضافة بعد المميزات الاخرى.

 

– بعض الأمثلة لأُطر الـ JS :

  • ReactJS 
  • Angular
  • VueJS

 


 

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

 


👈 مسار مبرمج تطبيقات الأندرويد.


 

Quote This Article: ” If you’re already a front-end developer, well, pretend you’re also wearing a pirate hat. “

 


💡 تابعنا على مواقع التواصل الاجتماعى لمعرفة كل جديد أول بأول.