سلام عليكم
اريد مساعدة من فضلكم وجزاكم الله وهي كاالتالي:
تعلمت html5 وcss3و css3 html واريد توجيه او استراتيجية في كيفية الاحتراف اللغتين و كيفية الاستثمار فيهما و كيف اصبح محترفا فيهما ..ماهي الخطة التي يجب اتباعها لاصبح مثقن نافع..
وجزاكم الله ووفقكم...
أهلًا محمد، شكرًا لترشيحك وكلامك المشجع :)
لكن بصراحة لا أضن مدونتي مناسبه له، فهو يريد تعلم تطوير الوب، بينما مدونتي تتحدث عن التصميم وبعض الأمور الأخرى ولا تتطرق نهائيًا للأمور البرمجية لأنها خارج خبراتي.
لاشكر على واجب اخونا المبدع :)
صراحة نظرت لمحتوى الموضوع ولم اتمعن جيدا في العنوان اي انه يريد ان يكون مطور ويب . كنت اظن انه يريد المواصله في تعلم باقي لغات ومهارات مصممي الويب وكنت انت اول من خطر في بالي ^_^
على العموم حبيبنا @mahboubayoub
اذا كنت تريد ان تستمر في تعلم تطوير الويب Back-end اتبع هذا المسار
واذا كنت التوجه لمجال تصميم الويب اتبع هذا المسار
كذلك يمكنك الاطلاع على هذه الخارطة للمزيد من الاستفادة
و عليكم السلام و رحمة الله تعالى و بركاته
تعلمت html5 وcss3و css3 html
ما الذي تعلمته منهم بالتحديد , هل تعلمت الأساسيات فقط ؟
هل صممت صفحة كاملة ؟ إذا نعم شاركنا إياها لنرى أولا .
إذا كنت لم تصمم صفحة أو عدة صفحات فهذا يعني أنك مبتدأ .. قبل أن أجيبك على تساؤلاتك :
لما إخترت مجال الفرونت آند ؟
لما تريد إحترافه ؟ هل من أجل العمل (فريلانس مثلا) ؟ أو كهواية ؟ تصمم موقعك الخاص ؟ ... إلخ ؟
هل تنوي أن تتعلم تطوير الويب بشقيه FrontEnd / BackEnd ؟ أو تريد أن تتخصص في فرونت آند ؟
اريد توجيه او استراتيجية في كيفية الاحتراف اللغتين و كيفية الاستثمار فيهما و كيف اصبح محترفا فيهما
لا تتسرع في إلتهام الدروس .
أكثر من التطبيق .
قم بصنع تصميم طبق الأصل عن أي موقع تريد لكن بدون النظر إلى التكويد الأصلي للموقع .. هذا من شأنه أن يمتحن قدراتك الحالية و أيضا يضعك في تحديات لم تمر عليك من قبل (و هذا أفضل خيار) , بعد ذلك قم بقراءة التكويد الأصلي .. فهذا أيضا من شأنه أن يريك طرق جديدة كليا عليك في التصميم و التنظيم .
قم بالإطلاع على كيفية عمل Compiler المتصفح , مثلا هل تعلم أن المتصفح عندما يبدأ بقراءة أكواد ال css و تطبيقها فهو يبدأ من الأعلى إلى الأسفل (أنا أعلم أنك تعرف هذا) , لكن ما لا تعلمه و ما لا لن يعلمه لك أحد هو أن قراءة تكون من اليمين إلى اليسار و ليس العكس (الكثيرين يظنونه من اليسار إلى اليمين) , ماذا ستستفيد من معرفتك لهذه المعلومة الأخيرة ؟ سأجيبك : معرفتك لها ستغير طريقة تعاملك مع ملفات ال css ﻷنه عندما يقوم بالقراءة من اليمين إلى اليسار فإنه سيستغرق جهد إضافي عكس لو أنه قرأه من اليسار إلى اليمين , ذلك الجهد نتيجته بطأ في تحميل الصفحة بمليثواني هذه المليثواني عند كتابة المزيد من الأكواد و المزيد ستصبح ثواني .
أعطيك مثال عن ما تعنيه من اليسار إلى اليمين :
{list li{margin:0
الكود بالأعلى سيقوم بالبحث عن عنصر إسمه list# ثم يقوم بالبحث بداخله على كل li ثم يقوم بتطبيق عليها ال margin:0 .. في الحقيقة هذا ما يحصل لو أنه كان يقرأ من اليسار إلى اليمين ... لكن بما أنه يقرأ من اليمين إلى اليسار فإنه سيقوم بجهد مضاعف .. تابع معي ... أولا سيبدأ بالقراءة فيجد li يقوم بالزحف في كامل الصفحة ليستخرج من جميع ال li المجودة في الصفحة ثم سيقرأ list# فيختص بتطبيق margin:0 على ال li فقط الموجودة بداخل list# .
خلاصة القول أنه في كل مرة سيقوم بجمع كل عناصر حتى الغير مستهدفة , فبدل أن يذهب مباشرة إلى المكان المناسب فهو يقوم بزيارة كل الأماكن ... ما هو الحل ؟ الحل هو إستخدام التخصيصات قدر الإمكان (التخصيصات هي id و class) لكي لا يضيع وقته في البحث عن عناصر لا فائدة من إحصائها . (هذا مجرد مثال فقط)
إقرأ حول Css Triggers .. و هي تدخل أيضا في compiler المتصفح . هذه مفيدة جدا .. في الشركات الأجنبية دائما ينصحون بإستخدام ال opacity و ال transition فقط في الأنميشن و عدم إستخدام أي نوع آخر من الأنميشن عداهما , لأنهما أقل إجهادا لل compiler و بالتالي الصفحة ستكون أسرع .
تعلم ال Developer Tools الخاص بأي متصفح تستخدمه .. فوائدها قوية و كثيرة جدا جدا , منها أنك ستعرف ما هي الأكواد التي لا فائدة منها , سطوير سرعة صفحاتك , تعلم ال render و تأثيره على سرعة الصفحة .. إلخ .
تعلم طريقة التنسيق ال css المسماة بال BEM , هي فقط طريقة تسمية و تنظيم لا غير .. لكن من خلالها ستعرف شكل تقسيمات الصفحة من دون حتى النظر إلى ال Html , مثلا : ستعرف أن هذه ال div بجوار هذه list# و هذه ال list# بداخلها item. ...إلخ
تعلم الفرق بين الأنواع ال Position , ما هو absolute متى نستخدمه و ما الفرق بينه و بين relative ...إلخ .
تعلم ال FlexBox و Grid .
تعلم ال after:: و ال befor:: .
تعلم كتابة الأكواد بالصيغو المختصرة , مثلا : ;animation: example 2s linear infinite بدل كتابتها في 5 أسطر هذا من شأنه أن يقلل عدد أسطر الملف و أيضا حجم الملف و بالتالي زيادة في سرعة الموقع .
بعد الإنتهاء من تكويد الصفحة قم بجمع الأكواد المتماثلة لبعض العناصر في سطر واحد , مثلا :
{body, #list, .items, a{margin:0
هذا أيضا سيقلل عدد أسطر الملف إلى حوالي النصف و بالتالي يقلل حجم الملف إلى حوالي النصف و بالتالي زيادة في سرعة الموقع .
قم بصنع تصميم طبق الأصل لمواقع أنت حددها لكن حدد فقط المواقع التي تبدو لك صعبة و بالطبع من دون أن تنظر إلى الكود الأصلي .
قم بمشاهدة فيديو ﻷحد المصممين و هو يصمم موقع أو صفحة و شاهده من البداية إلى النهاية , لماذا ؟ ﻷنك سترى طريقة تكويده و سترى طرق جديدة كليا أيضا و لم يسبق لك تجربتها من قبل , كما سترى أنه سيقوم بشيئ معين لكن بطريقة مختلفة عن طريقتك , هذا بالطبع فهو سيقوم بشرح كل خطوة يقوم بها و هذا سيثري رصيدك ... إلخ .
قم بالتركيز على جزء معين في الصفحة أو التقنية و قم بتطبيقه بأشكال متنوعة , مثلا قم بصنع navbar ثم قم بصنع navbar آخر لكن بشكل مختلف .. مثلا قم بصنع dropdwon menu ثم قم بصنع mega dropdown menu ثم قم بصنع mega dropdown menu آخر بشكل مختلف .
تعلم الريسبونسيف تعلم ال moz , -webkit- .. إلخ .
تعلم منطق الألوان و التنسيق بينهم في التصميم .
و لائحة تطوووووول .
و في الأخير تفضل :
التعليقات