
جميلة هي المواقع التي تعطي امكانية التعلم بشكل احترافي وبذات الوقت بطريقة بسيطة وسهلة والأهم بشكل مجاني كلياً, مع هذا الموقع لليوم, سيكون بامكانكم تعلم كل مايخطر على بالكم فيما يتعلق بتصميم وتطوير مواقع الويب, وبشكل مجاني, الدورات باللغة اللإنكليزية, صحيح لكنها لغة بسيطة سهلة يمكن لك أن تفهمها أخي الكريم بدون عناء, من الممكن أن تواجه بعض الصعوبات في البداية لكن بعد ذلك ستجد أنها أسهل وأقرب للفهم ثم إن هناك الكثير من الأمثلة التوضيحية والتطبيقية والتي ستجعل الفهم أسهل وأسرع بإذن الله فحاول ولا تحكم على الموضوع بدون تجربته.
طبعاً لا أنصح أبداً بترجمة الموقع عن طريق غوغل, فالترجمة بهذه الطريقة كما تعرفون ستكون سيئة ولربما لن توصل الفكرة الصحيحة الموجودة في الموقع, كذلك هذه الطريقة ستؤذيك أخي المتعلم لأنها تقتل فيك الرغبة لتعلم الإنكليزية والتي هي مهمة لك أياً يكن مجال عملك أو دراستك, كما أن هذه الطريقة غير جيدة كونها ستقوم بترجمة الكود المضاف بكمثال كذلك لذا أرجو الحذر عند استخدامها. إن كان ولا بد من استخدامها فأرجو أن تكون وقت الضرورة فقط ومن باب الإستئناس والتوضيح لا أكثر. لبندأ على بركة الله.
نبدأ برابط الموقع من هنا
عند دخولك إلى الموقع, ستجد أمامك التصنيفات الرئيسية لمحتويات الموقع, الخيارات كثيرة ولعلي لا أعرف الفرق مابين أغلبها لكنني واثق أنكم تعرفون إن شاء الله
, يوجد 3 تصنيفات رئيسية لمحتويات الموقع, يوجد لدينا الدورات وهي تنطلق بكم من المستوى المبتدئ باتجاه الخبير, كذلك يوجد لديكم مراجع, حيث يقوم الموقع بتزويدكم بمرجع ( أو يمكنك تسميته قاموس ) بالنسبة لكل دروة تعليمية, يذكر فيه الوسم أو الأمر البرمجي و وصف قصير له ليساعدك على التذكر السريع له مع امكانية التوسع بالشرح حوله كما سنرى بعد قليل إن شاء الله, ثم لدينا تصنيف خاص بالأمثلة حيث يقدم الموقع لكم امكانية تصفح الكثير من الأمثلة في كل اللغات المتاحة مما يساعدكم على الفهم أكثر.
كذلك يمكنك الوصول إلى هذه التصنيفات من على يمين ويسار الموقع, دعونا نبدأ دورة تعلم لغة الأوسمة HTML
- مفردات الدورة الخاصة بلغة HTML, لاحظ أنها تبدأ معك منذ الصفر
. - للعودة إلى الصفحة الرئيسية, عند التقدم إلى الصفحة الثانية من الدورة, سيظهر هنا رابط العودة للصفحة السابقة.
- الإنتقال للصفحة التالية.
- صندوق المثال وهو أداة مهمة جداً حيث تمكنك هذه الأداة من تجربة الكود الذي تدرسه الآن والتدرب عليه من خلال الموقع مباشرةً دون الحاجة لأي أداة اضافية. اضغط على الزر المشار إليه من فضلك.
- إذا أعجبتك الدورة ومفرداتها, يمكنك بدء التعلم بالضغط على هذا الرابط, طبعاً لايوجد حاجة للتسجيل في الموقع.
بالعودة إلى النقطة الرابعة أعلاه وعند الضغط على زر Try it yourself “ جرب القيام بالمثال بنفسك “ ستحصل على نافذة أو تبويب جديد فيه الشكل التالي وهو عبارة عن أداة تمكنك كما ذكرنا منذ قليل من تجربة الوسوم والأكواد لتعرف كيف ستظهر في المتصفح. لليسار, يمكنك الكتابة, التعديل على الكود واضافة النص الخاص بك لترى كيف سيظهر وذلك من خلال رؤيته في القسم الأيمن من الأداة, طبعاً أنت لست ملزماً باستخدام هذه الأداة فقط مع المثال الموجود فيها, إذ يمكنك استخدامها مع أي كود آخر للغة HTML أي أنه يمكنك ابقاء هذه النافذة مفتوحة لاستخدامها لتجربة الأمثلة التي ستمر عليك فيما بعد, طبعاً ستجد رابط هذه الأداي في أي مثال تمر عليه. بخصوص باقي اللغات, لا أعرف كيفية تطبيق الأمثلة فيها, هذه ستكون مهمتكم أنتم
.
- اكتب أو عدل على الكود في هذا الجزء.
- عند الإنتهاء من كتابة الكود, اضغط على الزر أعلاه.
- هكذا ستكون نتيجة الكود الذي كتبته منذ قليل.
دعونا ننتقل إلى الصفحة التالي من الدورة.
لاحظ أنه وإلى اليسار, يمكنك الإنتقال إلى أي درس مباشرةً في حال رغبت بذلك. كذلك لاحظ أنه وكما ذكرت في بداية هذا الموضوع, اللغة المستخدمة هنا لغة انكليزية بسيطة من الممكن لك تفهمها بدون تعب يذكر فلا تفزع منها. يعتمد الموقع حسب رأيي على طريقة اعطاء دروس قصيرة أقرب ماتكون إلى النصائح مما يسهل على المتلقي فهم المعلومة رويداً رويداً.
يوجد طريقة أخرى لبدء التعلم من هذا الموقع, لنرجع إلى الصفحة الرئيسية وللأسفل قليلاً من فضلك.
يعرض علينا الموقع هنا اجابته على السؤال الذي قد يتبادر إلى أذهاننا, “” ماذا على مطور الويب أن يعرف ويتقن ؟؟؟ “
الجواب يتمثل في سبع نقاط كالتالي:
- How the WWW works
- The HTML language
- The use of CSS (style sheets)
- JavaScript programming
- The XML standards
- Server Scripting technologies
- Managing data with SQL
لاحظ أنه يعطيك هنا لمحة عن كل بند من هذه البنود ثم يتيح لك بالغالب رابطين للتعلم, للمبتدأين وذوي المعرفة المسبقة. يمكنك الضغط على أي منهما لتبدأ عملية التعلم.
هذا بخصوص تصنيف الدورات لكن اعتقد بأنك تذكر أننا ذكرنا وجود تصنيفين آخرين هما المراجع والأمثلة.
- للوصول إلى الصفحة الثانية من المراجع…
- الوسوم مرتبة أبجداً مع رابط للوصول إلى شرح أكبر في حال أردت الإستزادة عن أي منها.
- وصف بسيط لعمل الوسم أو الكود المحدد.
اما بخصوص الأمثلة, فهذا مثال عن صفحة الأمثلة المتاحة للغة HTML
بقي لدينا أن ننبه إلى أنه يوجد منتدى ملحق بهذا الموقع ليتم من خلال مناقشة الدروس وما إلى ذلك, يمكنكم زيارته للبحث عن أجوبة اسفساراتكم,
- للبحث ضمن الموقع.
- للإنتقال إلى المنتدى.
ختاماً, لا يسعني إلا أن أتمنى لكم تمام الصحة والعافية والإفادة. أترككم برعاية الله وحفظه.