البرمجة والذكاء الاصطناعي · الفصل الثالث · الترم الأول، الدرس 3-3
أساسيات تقنيات الواجهة الأمامية
أي صفحة ويب فيها هيكل وشكل وتفاعل. هنجرّب ده بإيدينا، ونعرف إيه اللي بيخلي الواجهة الأمامية الحديثة ليها معنى (HTML الدلالية)، وبتتظبط على أي شاشة (التصميم المتجاوب)، وأسرع في بنائها (أطر العمل).
مدة الدرس: من 25 لـ 35 دقيقة
الصفحة زي المبنى: هيكل، وديكور، وكهربا. الفيديو لسه بيتصوّر؛ اقرأ نصه أو ابدأ على طول، كل اللي فيه موجود في الشاشات الجاية.
اقرأ نص الفيديو لحد ما يتصوّر
المشهد 1: تلات لغات
HTML بتبني الهيكل، وCSS بتدّي الشكل، وJavaScript بتضيف التفاعل. زي مبنى: الحيطان، والديكور، والكهربا.
على الشاشة: بيت بيترسم على تلات مراحل.
المشهد 2: HTML الدلالية
لما نستخدم عناصر زي header وnav وmain وfooter، قارئ الشاشة بيفهم الصفحة أحسن، ومحركات البحث كمان ممكن تفهم بنيتها.
على الشاشة: صفحة متقسمة لأجزاء عليها أساميها.
المشهد 3: متجاوب وأطر عمل
التصميم المتجاوب بيخلي الصفحة تتظبط على الموبايل والتابلت والكمبيوتر. وأطر العمل زي React وVue وNext.js بتوفر مكونات جاهزة فالشغل يبقى أسرع.
على الشاشة: نفس الصفحة على تلات شاشات مختلفة.
هتتعلم في الدرس ده
- تشرح دور HTML وCSS وJavaScript في بناء صفحة الويب.
- تشرح إزاي HTML الدلالية والتصميم المتجاوب وأطر العمل بيحسّنوا الواجهة الأمامية.
رحلة الدرس
10 شاشات قصيرة، كل شاشة فيها حاجة واحدة. تقدر تفتح أي محطة من هنا أو من «محتوى الدرس».