Skip to main content

Front-End Development Diploma


Programming_and_Technology

حول الدورة التدريبية:

توفر هذه الدبلومة التي تبلغ مدتها 80 ساعة أساسًا شاملاً في تطوير الواجهة الأمامية، دبلومة تطوير الواجهة الأمامية هي البداية احتراف فن وعلم إنشاء واجهات مستخدم متميزة. من أساسيات HTML وCSS وJavaScript إلى الـ frameworks المتقدمة مثل React، ستكتسب المهارات الشاملة اللازمة لبناء مواقع ويب ديناميكية وتفاعلية ومستجيبة. سواء كنت مبتدئ أو محترف هتزودك الدبلومة بالأدوات اللازمة للنجاح في عالم تطوير الويب

ما ستتعلمه في هذه الدورة:

    1) مقدمة ومفاهيم عن Front End:

    هتتعلم كيفية عمل مواقع الويب وطريقة بناء أول صفحة ويب، هتتعلم أساسيات Command Line و Git وأدوات التطوير وتصحيح الأخطاء في واجهة المستخدم، هتتعلم لغة HTML لبناء الهياكل وتتعرف على الـ Modules الخاصة بيها، هتتعلم لغة الـ CSS عشان تضيف جماليات أكتر على الصفحة والتصميم (Selectors - pseudo classes - pseudo elements - basic styles)، بالإضافة لإنك هتتعلم العناصر الأكثلا تنظبماً (Flexbox - Grid)، هتتعلم إدارة واجهة المستخدم بطريقة responsive بحيث تكون مناسبة لكل الأجهزة، وأخيراً هتتعرف على CSS frameworks و UI toolkits

    2) لغة JavaScript

    هتتعلم أدوات الجافا سكريبت وطرق تصحيح الأخطاء وكيفية كتابة JavaScript، هتتعرف على المتغيرات وأنواع البيانات والـ Arrays والـ objects، هتتعرف على الـ Loop والشروط وأهم الـ funtions (Arrow -callback.. وغيرها)، هتتعلم إدارة المحتوى عن طريق الـ JavaScript والـ Browser Events و Storages، هتتعلم مفاهيم backend مهمة مثل: HTTP Requests، وهتتعرف على أساسيات الـ OOP في JavaScript، هتبني أول Webpack وتتعلم الـ JS Modules بالإضافة لـ SCSS بدل CSS

    3) الـ Frameworks ومكتبات الجافا سكريبت

    هتتعرف على تاريخ تطبيقات Single Page وليه بنستخدم ReactJS، هتتعرف على JSX والـ Components والـ Lifecycle، هتتعلم الـ Hooks والـ Custom Hooksوالـ Routing في React، هتتعلم استخدام الـ Dev tools والـ debugging، هتتعلم الـ State Management والـ Styling ضمن React (CSS Modules - Styled Component)

    TypeScript مع React

    هتتعلم أساسيات Type Script واستخدام الـ Type Script مع React، وتطبيق Type Script على تطبيق TODO مع تطبيق بسيط للتجارة الإلكترونية، هتتعرف على مقدمة عن SSR مقابل CSR ومقدمة عن Micro frontend، وفي النهاية بيتم مراجعة المشورع النهائي مع المتدربين

لمن هذه الدبلومة:

  • الراغبين في تعلم برمجة front-end
  • حديثي التخرج في مجال علوم الحاسب
  • المبتدئين في مجال البرمجة
  • مصممو واجهات المستخدم الراغبين في تعلم الـ front-end

About the Training Diploma:

This 80-hour diploma provides a comprehensive foundation in front-end development. The Front-End Development Diploma is your gateway to mastering the art and science of creating outstanding user interfaces. From the basics of HTML, CSS, and JavaScript to advanced frameworks like React, you will acquire the essential skills to build dynamic, interactive, and responsive websites. Whether you are a beginner or an experienced developer, this diploma equips you with the necessary tools to succeed in the web development industry.

What You Will Learn in This Course:

    1) Introduction and Front-End Concepts:

    You will learn how websites work and how to build your first web page. You will be introduced to Command Line, Git, development tools, and debugging UI issues. You will learn HTML for structuring content, including its various modules, and CSS to enhance design aesthetics (Selectors, Pseudo Classes, Pseudo Elements, Basic Styles). Additionally, you will explore more organized layout techniques (Flexbox, Grid) and learn how to create a responsive UI suitable for all devices. Lastly, you will be introduced to CSS frameworks and UI toolkits.

    2) JavaScript Language

    You will learn JavaScript tools, debugging techniques, and how to write JavaScript code. You will explore variables, data types, arrays, and objects, as well as loops, conditions, and essential functions (Arrow functions, Callbacks, etc.). You will manage web content using JavaScript, browser events, and storage solutions. You will also gain an understanding of key backend concepts such as HTTP Requests and the basics of Object-Oriented Programming (OOP) in JavaScript. Additionally, you will build your first Webpack and work with JavaScript Modules, along with SCSS instead of CSS.

    3) JavaScript Frameworks and Libraries

    You will learn about the history of Single Page Applications (SPAs) and why ReactJS is widely used. You will understand JSX, Components, and the Component Lifecycle. You will explore Hooks, Custom Hooks, and Routing in React. Debugging and using React DevTools will be covered, as well as State Management and Styling in React (CSS Modules, Styled Components).

    TypeScript with React

    You will learn the fundamentals of TypeScript and how to use it with React. You will apply TypeScript to a To-Do application and a basic e-commerce project. You will get an introduction to Server-Side Rendering (SSR) vs. Client-Side Rendering (CSR) and an introduction to Micro Frontend. Finally, you will review the final project with the trainees.

Who Is This Diploma For?

  • Aspiring front-end developers
  • Computer science graduates
  • Beginners in programming
  • UI designers who want to learn front-end development