Hand-Coding SVG Lines and Paths in HTML5
Learn to craft, style, and optimize custom vector lines and paths directly in HTML code for responsive and accessible web designs.
حول هذه الدورة
Creating vector graphics directly in your HTML code gives you unparalleled control over web design, performance, and scalability. This text-based course teaches you how to hand-code SVG lines and complex paths without relying on heavy graphic design software. You will transition from basic HTML layouts to writing clean, semantic SVG markup, mastering the math and syntax behind vector coordinates, stroke styling, and responsive scaling. What you'll learn: - Understand the foundational structure of SVG elements within HTML5 documents. - Master the SVG path element syntax to hand-code precise straight and curved lines. - Style vector lines using stroke, stroke-width, stroke-linecap, and stroke-linejoin properties. - Apply modern responsive design techniques to ensure your SVGs scale perfectly on all screen sizes. - Implement web accessibility best practices for SVGs, including ARIA roles and descriptive tags. - Integrate SVG paths with CSS for interactive hover effects. The course begins with core vector concepts and foundational HTML5 SVG syntax before guiding you through hands-on coding exercises for paths, advanced styling, and modern accessibility standards. This course is designed for beginner web developers, designers, and HTML enthusiasts with no prior SVG coding experience. Start writing clean, lightweight vector graphics directly in your code today.
ما الذي ستحصل عليه
-
📜
شهادة إتمام
أضفها إلى ملفك على LinkedIn -
💬
مدرّس AI شخصي
عالق في درس؟ اسأل مدرّسك المدمج أي شيء، في أي وقت. -
🎧
النسخة الصوتية مضمَّنة
تعلَّم أثناء تنقُّلك — دون شاشة -
♾️
وصول مدى الحياة
عُد متى شئت، بلا انتهاء -
📱
الهاتف أو الكمبيوتر
يعمل في أي مكان وعلى أي جهاز -
💸
استرداد خلال 14 يومًا
دون أسئلة -
⚡
قصير ومركَّز
41 دقيقة من المحتوى التطبيقي
المراجعات
لا توجد مراجعات بعد — كن أول من يشارك تجربته.
المتعلمون أخذوا أيضًا
⚡ الأفضل للبداية
🎓 بشهادة
مبادئ فيجما لتصميم المواقع الشبكية الحديثة
شهادة
تطبيق عملي
SR 90.00
→
🌟 اختيار الطلاب
🎓 بشهادة
أسس تصميم المواقع الشبكية: إنشاء مواقع شبكية حديثة وسريعة الاستجابة
شهادة
تطبيق عملي
SR 90.00
→
💼 جاهز لسوق العمل
🎓 بشهادة
تصميم واجهة مستجيبة باستخدام برنامج Figma
شهادة
تطبيق عملي
SR 90.00
→
🌟 اختيار الطلاب
🎓 بشهادة
تصميم وبناء حافظات الويب المتجاوبة مع Figma & AI
شهادة
تطبيق عملي
SR 90.00
→
الأسئلة الشائعة
ما الذي أحتاجه لأخذ هذه الدورة؟ +
يكفي هاتف أو كمبيوتر متصل بالإنترنت. بدون تثبيتات أو أجهزة خاصة.
كيف يمكنني الدفع؟ +
بالبطاقة عبر Stripe. لا نخزن بيانات البطاقة — يتولى Stripe ذلك بأمان.
هل يمكنني استرداد المال؟ +
نعم — استرداد كامل خلال 14 يومًا، دون أسئلة.
إلى متى يستمر وصولي؟ +
إلى الأبد. بمجرد الشراء، الدورة لك تعود إليها متى شئت.
هل سأحصل على شهادة؟ +
نعم. عند الإتمام ستحصل على شهادة يمكنك إضافتها إلى ملفك في LinkedIn.
مصمَّم للعاملين في
التقنية
التصميم
المالية
التسويق
الرعاية الصحية
التعليم
الضيافة
التصنيع
×2
اشحن مرة واحدة وادفع النصف
أضف SR 380 → احصل على 200 أرصدة. كل فئة تكلف SR 47.50 بدلاً من SR 90.00. الأرصدة لا تنتهي أبداً.
SR 380
200 رصيد
SR 47.50 / درس
أفضل قيمة
SR 950
550 رصيد
SR 43.18 / درس
SR 1,900
1200 رصيد
SR 39.58 / درس
بدون اشتراك. الرصيد يصلح لأي درس ولا ينتهي.