مسار بناء مواقع ويب تفاعلية ومتجاوبة باستخدام HTML و CSS
الطلب على مطوري مواقع الويب في ازدياد مستمر؛ فلا يوجد مُقدم خدمة أو منتج في هذا العصر الرقمي إلا وله موقع ويب يستخدمه للتواصل مع عملائه. هذا المسار يأخذ بيدك من الصفر وحتى الاحتراف لتتعلم تصميم وبناء مواقع ويب احترافية وعالية الجودة، ويُكسبك المهارات اللازمة للحصول على وظيفة من أعلى الوظائف أجرًا.
- المعرفة المُسبقة
لا يلزم وجود أي خبرة سابقة في البرمجة للتسجيل في هذا المسار.
- المهارات المكتسبة
- HTML
- CSS
- CSS layouts
- SASS
- CSS Animations
- responsive web design
- الوقت المقدر
2-3 شهور بواقع 5-10 ساعات أسبوعيًا
ماذا ستتعلم في هذا المسار؟
لا تقلق إن كنت مبتدئًا!
تم تصميم مسارنا ليعلمك كل ما تحتاجه لتصبح مطورًا محترفًا يستطيع بناء مواقع ويب تفاعلية وعالية الجودة.
- 1
الدورة 1 من 7دورة أساسيات HTML
ستبدأ رحلة تعلمك للواجهات الأمامية بتعلم أساسيات لغة HTML، حيث ستتعرف كيفية بناء الهيكل الأساسي لأي موقع بطريقة احترافية.
المشاريع العملية 1
- مشروع مدونة شخصيةستقوم ببناء أول مشروع لك عن طريق إنشاء وتصميم صفحة ويب بسيطة باستخدام HTML تحتوي على نصوص وصور وروابط. أثناء تقدمك في المسار، ستتعلم المزيد عن كيفية دمج HTML مع CSS لإنشاء صفحات ويب أكثر تفاعلية.
- 2
الدورة 2 من 7دورة أساسيات CSS
بعد تعلم أساسيات HTML وبناء هيكل الموقع، ستتعلم عن طريق CSS كيف تضيف لموقعك لمسة جمالية وشكل متناسق عن طريق إضافة الألوان وعناصر التصميم الأخرى، لنقل صفحات الويب الخاصة بك إلى مستوى أكثر احترافًا.
المشاريع العملية 1
- مشروع تنسيق المدونة الشخصيةبعد تعلمك لأساسيات CSS ستقوم بتطبيق ما تعلمته في هذه الدورة على المشروع السابق من دورة HTML لتضيف للصفحة التي أنشأتها لمسة جمالية وشكل متناسق عن طريق إضافة الألوان وعناصر التصميم الأخرى.
- 3
الدورة 3 من 7دورة CSS Layouts
ستنتقل بعد ذلك إلى إنشاء تخطيطات احترافية لموقعك باستخدام CSS و Flexbox و CSS Grid و Float وغيرهم، حيث ستتعلم الطرق المختلفة لإنشاء تخطيطات صفحات موقعك باستخدام أحدث الأدوات لأحدث جيل من CSS؛ لتتمكن من إنشاء مشروع حقيقي بنفسك بنهاية هذه الدورة.
المشاريع العملية 1
- إعادة بناء المدونة الشخصية ب flexbox و gridالأن وقد تعلمت أساسيات CSS ستقوم بإعادة تطبيق المشروع من الدورة السابقة باستخدام felxbox و grid لتعلم مدى سهولة التصميم باستخدام هذه الأدوات.
- 4
الدورة 4 من 7دورة Advanced CSS
ستتعلم في هذه الدورة مواضيع مهمة ومتقدمة تُساعدك على تصميم وبناء مواقع الويب بصورة أكثر إبداعية واحترافية، مثل Responsive web design لتتعرف كيفية تطوير مواقع ويب تتناسب مع جميع أحجام الأجهزة المختلفة، و SASS حيث تعرف كيفية استخدامه لتسهيل وتنظيم كتابة كود CSS الخاص بك، و CSS Animations لتعرف كيف تضيف حركات وتأثيرات جذابة وتفاعلية لموقعك.
المشاريع العملية 1
- مشروع بناء ملف شخصيبنهاية هذه الدورة ستخرج بمشروع تطبيقي عملي مستخدمًا HTML و CSS لبناء Portfolio قوي تستطيع أن تعرض فيه كل مشاريعك الحالية والقادمة بصورة جذابة واحترافية، ستطبق في هذا المشروع ما تعلمته في الدورات السابقة من بناء الهيكل الأساسي للموقع عن طريق HTML، وإضافة عناصر التنسيق المختلفة عن طريق CSS، وستجعل الموقع أكثر تفاعلية واحترافية عن طريق تطبيق ما تعلمته في دورة Advanced CSS من Responsive web design و Animations وغيرهم.
- 5
الدورة 5 من 7دورة HTML and CSS Projects
ستُطبق في هذه الدورة على كل ما تعلمته من مهارات HTML و CSS خلال الأربع دورات السابقة لتبني بنفسك 3 مشاريع حقيقية، وستكتسب أيضًا مهارات جديدة تساعدك على فهم كيفية بناء مواقع وصفحات ويب متجاوبة وتفاعلية وباستخدام بيانات حقيقية لبرامج من سوق العمل الواقعي.
المشاريع العملية 3
- مشروع Profile card componentستقوم في هذا المشروع بترسيخ ما تعلمته من مهارات في دورتي HTML و CSS لعمل موقع بسيط تعرض فيه معلوماتك الشخصية كصورتك وروابط التواصل الخاصة بك وغيرهم. ستطبق وتتعلم كيفية بناء الهيكل الأساسي لأي موقع باستخدام HTML، وكذلك كيفية استخدام CSS لتنسيق عناصر HTML وتحسين شكل الموقع.
- مشروع Personal website (Portfolio)ستقوم في هذا المشروع بعمل موقع شخصي (Portfolio) تعرض فيه كل مهاراتك ومشاريعك التي قمت بعملها وكذلك أي مشاريع ستقوم بعملها مستقبلًا من خلال التغيير في شكل أو تصميم هذا الموقع الشخصي. ستتعلم استخدام أفضل الممارسات وستتطبق علىCSS Grid و CSS variables وغيرهم، لتبني موقع ويب متجاوب يعمل على الأجهزة المختلفة بشكل سلس.
- مشروع Quran tab landing pageستقوم في هذا المشروع ببناء صفحة هبوط (Landing page)، وهي صفحة خاصة بالشركات للترويج عن خدماتها أو منتجاتها، وهذه الصفحات أو المواقع هي الشائعة في بيئة العمل الواقعية، مما يكسبك مهارات تنافسية في سوق العمل الحقيقي. ستقوم ببناء الهيكل الأساسي للصفحة، وتنسيقها، وكذلك إضافة مميزات الخدمة أو المنتج وغيرهم الكثير باستخدام HTML و CSS فقط، وبدون كتابة سطر كود واحد بجافا سكريبت.
- 6
الدورة 6 من 7دورة CSS Animations
ستتعلم في هذه الدورة كيفية إنشاء حركات مميزة ومؤثرات بصرية باستخدام CSS. ستتعلم كيفية تطبيق transitions و keyframes لتخصيص تجربة المستخدم من التنقل عبر الروابط إلى التفاعل مع الأزرار والنصوص والصور وغيرهم من العناصر. هذه الحركات البسيطة تلعب دورًا كبيرًا في تعزيز تجربة المستخدم، حيث تجعل العناصر الموجودة بالموقع أكثر وضوحًا، وتوفر شعورًا طبيعيًا أثناء التنقل بين الصفحات والعناصر، وهذا ما تفعله شركة مثل Apple، حيث تعتمد على الحركات لجعل تجربة المستخدم على موقعها مبهرة.
وبنهاية الدورة، ستكون قادرًا على إنشاء animations احترافية تضيف لمسة جمالية لموقعك وتجذب المستخدمين بطريقة فريدة. - 7
الدورة 7 من 7دورة CSS Responsive Design
ستتعلم في هذه الدورة كيفية تصميم مواقع ويب متجاوبة بشكل احترافي باستخدام CSS Media Queries وتقنيات أخرى، لضمان عرض موقعك بشكل مثالي على مختلف الأجهزة والشاشات. سنغطي أيضًا كيفية اختيار Breakpoints بشكل دقيق، واستخدام استراتيجيات مثل Mobile-first و Desktop-first، بالإضافة إلى التعامل مع Viewports و Meta Tags لضبط الأداء بشكل أفضل.
تشمل جميع مساراتنا
- تطبيق عملي على مشاريع حقيقيةطبق ما تتعلمه في الدورات المختلفة في إنشاء مشاريع تُحاكي العالم الواقعي؛ لتكتسب خبرة قيمة تُميزك عن الآخرين.
- التوجيه والدعم الأكاديمي والتقنيستتلقى دعمًا فرديًا من الموجهين (Mentors) ذوي الخبرة، والذين يتواجدون باستمرار لتقديم التوجيه والدعم، وتحفيزك، والإجابة على أسئلتك.
- الاتصال المباشر مع المحاضرتواصل مع المحاضر ومشرفي الدورات مباشرةً عن طريق المجموعات، والدردشة، وغيرها، لتحصل على المساعدة التي تحتاجها، وتعرف الإجابات الموثوقة لكل تساؤلاتك، وتبقى على المسار الصحيح دائمًا.
- شهادة إتمامستحصل على شهادة إتمام في نهاية كل دورة من دورات المسار تقديراً لعملك الجاد وتفانيك، وتشجيعًا لك، بالإضافة لشهادة إتمام المسار كاملًا بعد الانتهاء منه.
ما الذي يميز هذا المسار؟
- محاضرون وخبراء يعلمون بالعربية
- تعلم على يد محاضرون يتحدثون لغتك العربية
- لديهم شغف بالتدريس وثروة من المعرفة
- خبراء يعملون في شركات كبرى كجوجل
- مراجعة مخصصة لمشاريعك
- راجع مشاريعك أكثر من مرة
- مراجعات مخصصة من مراجعين ذوي خبرة
- مصادر إضافية مقترحة لتحسين مهاراتك ومشروعك
- مشاريع تستطيع مشاركتها على portfolio الخاص بك
- لقاءات أونلاين مع مشرفي الدورات
- تواصل مباشر مع المشرفين عبر تطبيق زووم
- مناقشة لأهم النقاط التي تمت دراستها في الدورات
- الرد على تساؤلاتك ومساعدتك في إنجاز مشاريعك
- توصيات ونصائح عملية وأفضل الممارسات لتحسين مهاراتك
- التعليم الترفيهي
- تعلم بطريقة ممتعة وتشويقية (Edutainment) وغير تقليدية
- ستستطيع تذكر ما تتعلمه من دروس لفترة زمنية طويلة
- اختبارات تفاعلية وتحديات
- اختبارات تفاعلية لقياس مدى فهمك وتحصيلك للدورة
- تحديات لتقوية وترسيخ ما تعلمته لكل قسم في الدورة
- قياس مستوى التقدم والانجاز عبر الدورة
- +37 ألفطالب وطالبة
- +120 ألفساعة تعلّم
- +6 آلافمشروع منجز
- +1500منحة دراسية
تعلّم من الأفضل
م. محمد أبوسريعChief Media Officer & Co-Founder of Almdrasaمهندس برمجيات ذو خبرة أكثر من 10 سنوات في كبرى شركات البرمجيات في المنطقة العربية وأوروبا. يعمل حاليًا ككبير مهندسي البرمجيات في شركة QbDVision الرائدة في مجال تصنيع الأدوية والتكنولوجيا الحيوية. لديه خبرة كبيرة في تطوير الواجهات الأمامية، بجانب خبرته كمحاضر في الجامعات داخل مصر.
اسمع من طلاب المدرسة
لديك استفسار؟
نرحب بكافة استفساراتكم ويسعدنا خدمتكم والعمل على توفير بيئة تعليمية سهلة ومتطورة.
اشترك في قائمتنا البريدية
ابقَ على اطلاع بكل جديد من دورات وعروض ومقالات.
الأسئلة الشائعة
الطلب على مطوري الواجهات الأمامية Front end web developer في ازدياد مستمر، سيزودك هذا المسار بالمهارات والمعرفة اللازمة لتصميم وبناء مواقع ويب جميلة وتفاعلية، والحصول على وظيفة كمطور محترف للواجهات الأمامية.
نرحب بالجميع، ولا يتطلب مسار بناء المواقع التفاعلية باستخدام HTML و CSS هذا أي خبرة سابقة في البرمجة.
نحن نستخدم أدوات وبرامج البرمجة المجانية والمستخدمة على نطاق واسع مثل VS Code والتي يمكن الوصول إليها على معظم الأجهزة وأنظمة التشغيل. وتم تصميم مسارنا ليكون سهل الوصول والاستخدام، حتى للمبتدئين. كل ما تحتاجه فقط جهاز حاسوب واتصال بالإنترنت.
يختلف وقت التعلم من شخص لآخر نتيجةً لاختلاف الظروف والوقت المتاح لكل شخص، ولكن في المتوسط، فإن هذا المسار يُتوقع الانتهاء منها في خلال شهرين إلى ثلاثة شهور تقريبًا.
مسار بناء مواقع ويب تفاعلية ومتجاوبة باستخدام HTML و CSS
ابدأ الآن واحصل على وصول مدى الحياة لكل دورات المسار وأي دورة جديدة تُضاف إليه.