أساسيات التخطيط الحديث - دورة مجانية من هيكسلت، التدريب 9 ساعات، التاريخ: 5 ديسمبر 2023.
Miscellanea / / December 06, 2023
سوف تتعلم المزيد عن ترميز HTML وإمكانيات معيار HTML5 الحديث. ستكتسب أيضًا معرفة أساسية بالتصميم باستخدام CSS: تعرف على كيفية ربط الأنماط واستخدام المحددات والعمل مع التتالي. بالإضافة إلى HTML وCSS، ستتعلم كيفية العمل باستخدام أدوات تصحيح أخطاء التخطيط المضمنة في المتصفح، ولا سيما Google Chrome DevTools. ونتيجة لذلك، سوف تتعلم كيفية استخدام لغة ترميز HTML لتخطيط النص على موقع الويب، وستصبح أيضًا على دراية بالقواعد الأساسية لاستخدام CSS وتصميم النص.
ستكون قادرًا على وضع مهاراتك الجديدة موضع التنفيذ على الفور - وسندرس محررات التخطيط والمكونات الإضافية الخاصة بها. في نهاية كل درس ستجد مهام صغيرة مستقلة. إنها تهدف إلى فهم عملي أكثر للموضوع الذي يتم تناوله، وبالتالي يوصى بشدة بتنفيذها.
ستكون أساسيات التخطيط مفيدة إذا قررت دراسة تطوير الويب، بغض النظر عن الاتجاه. تساعد المعرفة المستمدة من هذه الدورة المبرمجين على ترميز البيانات وعرضها على الموقع. هذه الدورة مناسبة للمبتدئين والمطورين الذين لم يسبق لهم أن واجهوا
مقدمة
دورة "أساسيات التخطيط الحديث" هي الأساس لتعلم أساسيات تخطيط مواقع الويب بتنسيق HTML وCSS. سنتحدث في هذا الدرس بإيجاز عما تعلمناه في الدورة وكيف يمكن تطبيق هذه المعرفة عمليًا.
مقدمة إلى HTML
الدرس مخصص لتخطيط HTML من البداية. نتحدث عن دور السمات وندرس المخطط العام لوصف علامات HTML.
نموذج الكتلة
ما هي العناصر المسؤولة عن إطار الصفحة، والتي تساعد في عملية تصميمه أو إضافة أجزاء وظيفية؟ دعونا نتعرف على عناصر HTML المضمنة والمضمنة وندرس تأثير الأنماط على العرض النهائي للعناصر.
HTML الدلالي
الهدف الرئيسي لأي تخطيط HTML هو نقل معنى الكتل. في هذا الدرس، سنستكشف الإمكانات الدلالية لأحدث معايير HTML5 ونتعرف على إمكانية الوصول إلى الويب.
البنية الأساسية لمستند HTML
يحتوي أي مستند HTML على بنية أساسية تتكون من العلامات وعناصر الخدمة. يحتاج المتصفح إليها لعرض المعلومات بشكل صحيح. في هذا الدرس سوف ننظر إلى كل سطر من هذا الهيكل.
أساسيات CSS
تم إنشاء لغة CSS للتصميم المرئي لصفحة الويب. نحن ندرس القدرات الأساسية للغة، ونكتشف كيفية استخدامها مع HTML. نتعلم كيفية تضمين ملفات CSS والتعرف على الأنواع الأساسية للمحددات.
المتتالية في CSS
ما هو المتتالية وكيف يعمل في CSS؟ الدرس مخصص للاختلافات في أولويات المحدد والقدرة على استخدامها في مشاريعك.
أدوات تطوير كروم
عند تصميم موقع ويب، من المهم العثور على الأخطاء في الوقت المناسب أو فهم كيفية تحويل الكتلة التي نحتاجها بشكل صحيح. في السابق، كان يتم ذلك يدويًا في المقام الأول. في الوقت الحاضر، تتمتع المتصفحات الحديثة بوظيفة مفتش الويب. دعونا نفكر في إمكانيات إحداها - Chrome DevTools.
محرري الكود
لحفظ عملك، تحتاج إلى محرر التعليمات البرمجية. سنتناول في هذا الدرس كيفية تثبيت Visual Studio Code. هذه أداة قوية يمكن استخدامها ليس فقط للتخطيط، ولكن أيضًا للبرمجة بأي لغة.
ايميت
دعونا ندرس أحد المكونات الإضافية الأكثر فائدة لمصممي التخطيط - Emmet. سيؤدي ذلك إلى تسريع عملية ترميز كود HTML وإزالة معظم الخطوات الروتينية.
النشر على شبكة الإنترنت
لوضع مشروع على الإنترنت، تحتاج إلى استخدام الاستضافة - خادم خاص يقوم بتخزين الملفات وتوفير الوصول إليها من خلال اسم المجال. في هذا البرنامج التعليمي سنلقي نظرة على استضافة GitHub المجانية.
محرر الرسوم البيانية
هناك العديد من المحررين الرئيسيين في السوق. بعضها مخصص لنظام تشغيل واحد فقط، والبعض الآخر يمكن تثبيته على أي منها. في هذا القسم، دعونا نلقي نظرة على الخطوات الرئيسية عندما يعمل مصمم التخطيط مع محرر Figma عبر الإنترنت.
عمل مستقل
المهام الإضافية التي تسمح لك بتوحيد النظرية المكتسبة
مواد إضافية
المقالات ومقاطع الفيديو برعاية فريق Hexlet. سوف تساعدك على التعمق في موضوع الدورة