نصائح مفيدة

HTML و CSS التعليمية

Pin
Send
Share
Send
Send


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

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

نعم ، يدللنا WordPress ويسمح لنا بإنشاء مشاريع بسيطة دون معرفة بلغات البرمجة.

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

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

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

لذلك دعونا نذهب ، من أين نبدأ؟

1. أعتقد أنه يجب عليك أولاً تثبيت محرر مريح ومريح للرمز. أحد القادة في الوقت الحالي هو Microsoft VSC أو Visual Studio Code

أوصي تنزيل المحرر من. الموقع وهنا هو رابط التحميل.

كيفية تثبيت اللغة المطلوبة ، أعتقد أنك سوف تجد تعليمات على الشبكة هناك أكثر من كافية. VSC مرن وقابل للتخصيص. لقد تم بالفعل كتابة آلاف الامتدادات. ولكن أعتقد أنه سيكون لديك نسخة محاصر في البداية.

بالنسبة لأولئك الذين يرغبون في تقديم أعذار حول تخصيص المحرر لأنفسهم ، إليك الفيديو ، وليس لي ، لكنني كسول جدًا للتصوير وشرح Alexey (مؤلف الفيديو) ذلك جيدًا وأظهره رائعًا للغاية.

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

1. أكاديمية HTML

مورد رائع لمن يبدأ من الصفر.

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

في وقت من الأوقات ، اعتقدت أن أحصل على حساب هناك من أجل الاحتفاظ بالمشتركين ، لكن كالمعتاد لا يوجد وقت كافي))

HTML ، CSS للمبتدئين من الصفر وما بعده.

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

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

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

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

أنا نفسي الآن في هذه المرحلة ، وأنا أتدرب تدريجياً على دورات ودروس متقدمة ، أدرس إمكانيات HTML5 و CSS3. في الوقت نفسه ، أشعر بسعادة غامرة من الفصول الدراسية ، وكذلك من الشعور بالمرونة والفرص العظيمة والأفكار الجديدة التي ولدت في هذه العملية الرائعة.

2. دورات الفيديو.

في البداية كنت أرغب في نشر قائمة كاملة من المقاطع المجانية ، لكن للأسف كلها تقريبًا قديمة ولا يهتم المؤلفون بالتحديث. نعم ، لقد تغير الكثير مع الانتقال إلى HTML5.

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

مسار ميخائيل روساكوف غني بالمعلومات وأنه جيد في الواجبات المنزلية.

دورة HTML و CSS مجانية

أكثر من 6 ساعات من الدروس + التمارين

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

طريقتي لتعلم HTML و CSS

كانت أول معرفة لي بتنسيق HTML و CSS في الدورات الأولى في المعهد (على الرغم من أنني شاركت في البرمجة قبل ذلك بكثير) ، ثم أدركت أن كل واحد منهم مسؤول عن ذلك. في تلك الأيام ، كان لا يزال من المعتاد استخدام الأنماط المضمّنة بفعالية ، وإنشاء شبكة من الصفحات باستخدام الجداول. تحول عدد قليل فقط إلى divs ، والتي لم أكن أعرف عنها شيئًا ولم أعلق أهمية على هذه النقاط.

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

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

كانت هناك أسئلة لا حصر لها: "كيفية القيام بذلك وليس تدمير كل شيء آخر؟" لا أتذكر أفكاري التي بقيت على مثل هذه الأسئلة لفترة طويلة: "هل من الصواب القيام بذلك في هذا الموقف ، وأنا لا أخترع دراجة ثانية بيدي غير الكفؤة؟"

لقد حان الوقت عندما توقفت هذه الحالة عن يناسبني ، وقررت أخيرًا السيطرة على الموقف. في نهاية العام ، ظهرت هذه الفكرة على صفحات مقال حول خطط السنة المقبلة. لكن الآن يتم تنفيذ هذه الخطط ، ويمكنني أن أفكر فقط: "ما الذي أزعجني ، ولماذا لم أفعل هذا من قبل؟" هذا مشابه لما قمت به في الآونة الأخيرة من إتقان مهارة الكتابة على لوحة المفاتيح بكل الأصابع العشرة وتمكنت الآن من إصلاح الأفكار في شكل جمل.

التدريبات عبر الإنترنت!

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

سأقدم روابط إلى اثنين ، واحد مجاني والثاني مقابل رسوم رمزية ، ولكن مع مرشدين باردين.

أنا لا أشارك في البرامج التابعة لهذه الموارد ، أنا أوصي بها ببساطة كمصادر جيدة للمعرفة.

بالطبع إعلامي ، نبدأ الدراسة من نقطة الصفر وقبل وضع موقع HTML على الاستضافة. هناك إجابات DZ بسيطة تنشرها في التعليقات الموجودة تحت الدروس ويقوم Artem بفحصها.

بالطبع ، هناك تأخير في التحقق ، لكن عليك أن تفهم أن المشروع مجاني وأن Artem لا يستطيع الجلوس و "يرعى" كل تعليق.

ومع ذلك ، فإن الدورة ضخمة للغاية ، حيث يوجد 55 مقطع فيديو ، لذلك هناك شيء يجب العمل عليه.

التدريب الثاني الذي أريد التوصية به هو Web Layout Getting Started by wayup.in

يتم دفعه ، يكلف ، في رأيي ، 9 دولارات. ولكن هذه الأموال التي تدفعها مقابل مساعدة من معلمه الذي يتحقق من المعارف التقليدية الخاصة بك ويقودك.

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

أعطي رابطًا ، وهو ليس تابعًا ، ولا يزال Wayup "يتهاون" ولن يتم توصيل برنامج تابع.

لكن الدورة جيدة وعملية ، لذا أوصي بها بأمان للمبتدئين.

ربما هذا كل ما أردت أن أخبرك به اليوم.

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

  1. لا تحبط إذا لم تفهم شيئًا من البداية ، فهذا يحدث ، حاول كتابة التعليمات البرمجية ورؤية النتيجة في المتصفح
  2. لا تحاول تعلم وفهم كل شيء في 1 ساعة. يمكنك تعلم علامات HTML ، ولكن يجب عليك استخدام CSS.
  3. ممارسة أكثر. خذها ، وقم بإنشاء مستند HTML نظيف وابدأ في إنشاء بنية الصفحة الأولى.
  4. قم بإنشاء مجلد إشارة مرجعية في المستعرض الخاص بك ووضع نصائح وحيل مفيدة تجدها على الشبكة
  5. ما هو غير واضح ، اسأل ، سأكون سعيدًا لأخبرك.

مراحل تعلم HTML و CSS

من المريح تقسيم العملية بأكملها إلى مراحل:

  • تقديم HTML وتعلم الأساسيات
  • تقديم CSS والمفاهيم الأساسية
  • المستوى المتقدم. تعلم HTML5 و CSS3

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

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

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

أفضل برامج HTML و CSS

وهنا الموارد نفسها ، والتي سأشير إليها والتي أحث على استخدامها بنشاط:

  • مقررات ايفجيني بوبوف
  • دورة لغة الترميز ، HTML و CSS. سوف نستخدم فقط الدروس. يتم دفع الاختبارات والمشاريع هناك ، يمكننا الاستغناء عنها.
  • أكاديمية HTML. يمكنك استخدام الرمز التابع الخاص بي 1115104d039 للحصول على خصم جيد على الدورات المتقدمة.

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

ربما أذكر أيضًا دليل htmlbook.ru ، الذي ستجده غالبًا في المستقبل ، باستخدام محرك بحث.

ليس من قبيل الصدفة أن تأتي دورات E. Popov أولاً. هذا الشخص سيكون دليلك في المراحل المبكرة.

أوصي Codecademy لتعلق. المهام هنا باللغة الإنجليزية ، ولكنها بسيطة للغاية ولا ينبغي أن تسبب مضاعفات.

أنا أعتبر أتش تي أم أل أكاديمية أن تكون أقوى وأخطر مدرسة للموارد باللغة الروسية ، وهناك أتلقى الآن دورات متقدمة متاحة فقط عن طريق الاشتراك ، ولكنها ليست باهظة الثمن على الإطلاق (300 روبل شهريًا) مقارنة بمدرسة Code (السعر من 20 إلى 30 دولار اعتمادا على الأسهم التي عقدت). باستخدام الرمز التابع الخاص بي في HTML Academy - 1115104d039 ، تحصل على خصم على اشتراكك.

سنقوم بالاتصال بأكاديمية HTML في كل مرة بعد دورات Popov و Codecademy ، مما سيتيح لك الشعور بالهدوء والثقة عند حل المشكلات ، بعضها خطير للغاية. بعد كل شيء ، ليس الجميع لديه أعصاب الحديد.

خطة تعليمية لإتقان HTML و CSS بسهولة

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

  1. هاء بوبوف دورة HTML. ما تعلمته هناك وكيف تحصل عليه ، انظر مقالتي.
  2. دورة لغة الترميز ، HTML و CSS. الوحدة 1 ، الوحدة 2 ، الوحدة 3
  3. أتش تي أم أل أكاديمية ، الدورات الست الأولى قبل دورة "التعرف على CSS" ، في وقت لاحق
  4. E. Popov CSS بالطبع. انظر التفاصيل في مقالتي.
  5. دورة لغة الترميز ، HTML و CSS. الوحدة 4 ، الوحدة 5 ، الوحدة 6. في هذه المرحلة سوف ننتهي من استخدام Codecademy.
  6. أتش تي أم أل أكاديمية ، بدءا من التعارف مع دورة CSS 5 سنوات ، تنتهي مع دورة الكتابة النصية CSS
  7. بالطبع: الممارسة HTML5 و CSS3
  8. أتش تي أم أل أكاديمية ، جميع الدورات المتبقية من المستوى الأساسي ، بدءا من "نموذج كتلة الوثيقة" وتنتهي مع دورة "اختبارات الانتهاء". قد يبدو للبعض أن دورة تخطيط Popov ينبغي أن تؤخذ بعد HTML Academy (أي ، تبادل الخطوتين الأخيرتين). تستحق وجهة النظر هذه أيضًا الاحترام ، لكن يبدو لي أنك ستكون أكثر مسؤولية في أخذ دورات من أكاديمية HTML بعد الانتهاء من الصفحات التي اقترحها يوجين ، وسيتم تذكرها بشكل أفضل وأفضل.
  9. المستوى المتقدم. لدينا فقط مدرسة أكاديمية HTML حيث نحتاج إلى المرور بمستويات إضافية من خلال الاشتراك. لا تنسى الكود التابع الخاص بي ، والذي ذكرته أعلاه. تعلم الدورات المتقدمة والمعالجات. في وقت كتابة هذا التقرير ، كنت في دورة التدرجات الخطية. أخطط لأخذ كل هذه الدورات إلى النهاية.

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

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

دورات في HTML5 و CSS3 ، تصميم عصري وتصميم ويب

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

  • أساسيات التخطيط التكيفي في HTML5 و CSS3
  • HTML5 و CSS3 من الصفر إلى Pro
  • ممارسة تخطيط الموقع للأجهزة المحمولة
  • تصميم مواقع الويب: دورة عملية في إنشاء صفحة مقصودة
  • مصمم الويب هو محترف. إنشاء تخطيطات شعبية
  • اتجاهات تطوير الويب
  • كل شيء عن إنشاء المواقع
  • خطة إنشاء موقع خطوة بخطوة
  • جافا سكريبت & مسج من الصفر إلى الايجابيات
  • أسرار عملية سيو
  • PHP الحديثة: العمل مع فكونتاكتي
  • تعرف على كيفية إنشاء صفحات اشتراك ومبيعات جميلة وحديثة.
  • مدرسة التدوين

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

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

هل تعلم أن هناك الكثير من العمل عن بُعد المتعلق بـ HTML و CSS؟ اليوم ، يعمل الكثيرون عبر الإنترنت ويسافرون حول العالم! ما هي أكثر المهن المطلوبة بعد على الإنترنت؟ كم من الوقت يستغرق للتعلم؟ تعلم من الكتاب

شكرا لك على اهتمامك ، أتمنى أن تكون المقالة مفيدة. التعبير عن أفكارك ، وتبادل انطباعاتك! كل هذا مرحب به.

المرحلة الأولى

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

المرحلة الرابعة:

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

  • نص سامية
  • ذرة
  • رمز الاستوديو البصري

يمكنك بسهولة العثور على تخطيطات PSD المجانية على Google.

المرحلة الخامسة:

وأخيراً ، بعض الموارد المفيدة أكثر:

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

مطور الواجهة الأمامية على N-iX ،
محاضر في كلية هيليل للكمبيوتر.

شاهد الفيديو: تعلم HTML و CSS خطوة بخطوة بطريقة سهلة ومبسطة - دورة كاملة (أغسطس 2022).

Pin
Send
Share
Send
Send