أساسيات تقنيات الـ Frontend
Fundamentals of Frontend Technology
هدفك من الدرس:- تفرق بين دور HTML وCSS وJavaScript
- تفهم semantic HTML وresponsive design والـ frameworks
التلات تقنيات الأساسية
الصفحة بتتبني بالتلاتة مع بعض.
- HTML: الهيكل (headings، فقرات، صور، روابط) — زي إطار المبنى.
- CSS: الشكل (ألوان، تخطيط، حجم، خطوط) — زي التشطيب.
- JavaScript: السلوك والتفاعل (استجابة الأزرار، تحديث جزء من الشاشة) — زي الكهرباء والسباكة.
Semantic HTML
استخدام tags بتدل على المعنى: <header> أعلى الصفحة، <nav> للتنقل، <main> المحتوى، <footer> أسفل الصفحة.
- بيحسّن Accessibility (قارئات الشاشة تفهم الصفحة، مفيد لضعاف البصر).
- بيحسّن SEO (محركات البحث تفهم محتوى الصفحة).
Responsive design
تصميم بيظبط التخطيط تلقائياً حسب حجم الشاشة (كمبيوتر، موبايل، تابلت). فكرة mobile-first معناها نصمم للشاشات الصغيرة الأول.
Frameworks
بتوفر وظائف ومكونات جاهزة عشان التطوير يبقى أسرع.
- React: من Meta، بيحدّث جزء من الشاشة بكفاءة، مناسب للتطبيقات الكبيرة.
- Vue: هيكل بسيط وتبني بيه بشكل تدريجي.
- Next.js: فيه مميزات React وزيادة آليات لتسريع عرض الصفحات.
مصطلحات الدرس
| HTML | هيكل الصفحة |
| CSS | شكل الصفحة |
| JavaScript | سلوك وتفاعل الصفحة |
| Semantic HTML | tags بتعبر عن المعنى |
| Accessibility | إتاحة الموقع لكل الناس (قارئات الشاشة) |
| SEO | تحسين الظهور في محركات البحث |
| Responsive design | تخطيط يتكيف مع حجم الشاشة |
| Framework | هيكل جاهز بوظائف مكتوبة مسبقاً |
تطبيق تعليمي مستقل وغير تابع لوزارة التربية والتعليم. الكتاب المدرسي هو المرجع الأساسي. سياسة الخصوصية