برمجة واجهات الويب - Front-End Diploma

عن هذا الفصل

دبلومة تطوير واجهة المستخدم (Front-End) :

مرحبا بكم في دبلومة تطوير واجهة المستخدم (Front-End)! في هذه الدبلومة الشاملة، ستتعلم جميع المهارات والتقنيات اللازمة لتصميم وتطوير واجهات مستخدم تفاعلية وجذابة لمواقع الويب والتطبيقات.

ما هو تطوير واجهة المستخدم (Front-End)؟

تطوير واجهة المستخدم (Front-End) هو مجال برمجة يركز على تصميم وإنشاء واجهة المستخدم لموقع ويب أو تطبيق. يشمل ذلك جميع العناصر التي يتفاعل معها المستخدم، بما في ذلك النصوص والصور والأزرار والقوائم وغيرها. يلعب المطورون الأماميون دورًا هامًا في إنشاء تجربة مستخدم سلسة وسهلة الاستخدام.

لغات البرمجة المستخدمة في تطوير واجهة المستخدم (Front-End):

HTML: لغة ترميز أساسية لإنشاء بنية صفحات الويب.
CSS: لغة لتنسيق محتوى صفحات الويب وتحكم مظهرها.
JavaScript: لغة برمجة تتيح إضافة وظائف تفاعلية إلى واجهة المستخدم.
TypeScript: لغة برمجة فوقية لـ JavaScript تُساعد على كتابة كود أكثر تنظيمًا وأمانًا.
React: مكتبة JavaScript شائعة لإنشاء واجهات مستخدم قابلة لإعادة الاستخدام.
Angular: إطار عمل JavaScript مفتوح المصدر لإنشاء تطبيقات ويب أحادية الصفحة.
Vue.js: إطار عمل JavaScript خفيف الوزن لإنشاء واجهات مستخدم تفاعلية.

مميزات دبلومة تطوير واجهة المستخدم (Front-End) على منصة بي سمارت:

برنامج شامل ومتكامل: تغطي الدبلومة جميع جوانب تطوير واجهة المستخدم، من الأساسيات إلى التقنيات المتقدمة.
مدربون خبراء: يتم تدريس الدبلومة من قبل مدربين خبراء في مجال تطوير واجهة المستخدم يمتلكون مهارات عالية وخبرة واسعة في مختلف تقنيات البرمجة.
منصة تفاعلية: توفر المنصة بيئة تعليمية تفاعلية تسمح لك بالتفاعل مع المدربين والطلاب الآخرين، وطرح الأسئلة، ومناقشة الأفكار، والحصول على الدعم اللازم.
مشاريع عملية: تتضمن الدبلومة العديد من المشاريع العملية التي ستُساعدك على تطبيق ما تعلمته وبناء مشاريع حقيقية.
أمثلة مواقع حقيقية: ستتعرف على أمثلة لمواقع ويب حقيقية تم تطويرها باستخدام تقنيات Front-End، مما سيساعدك على فهم كيفية تطبيق مهاراتك في مشاريع واقعية.
شهادة معتمدة: بعد إتمام الدبلومة بنجاح، ستحصل على شهادة معتمدة تُثبت مهاراتك في تطوير واجهة المستخدم (Front-End).

المشاريع:

أكثر من مشاريع عملية وتفاعلية لصتميم المواقع فى مختلف المجالات ، لتكوين سيرة ذاتيى وخبرية قوية أثناء الدورة.

الشهادة المعتمدة:

بعد إتمام الدبلومة بنجاح، ستحصل على شهادة معتمدة من منصة بي سمارت تُثبت مهاراتك في تطوير واجهة المستخدم (Front-End). تُعد هذه الشهادة بمثابة دليل قيم على مهاراتك وتُساعدك على تعزيز سيرتك الذاتية وزيادة فرص حصولك على وظائف مناسبة في مجال تطوير المواقع والتطبيقات.

للحصول على الدورات أوفلاين، يرجى التواصل بيدج بلاك أكاديمي، إضغط هُنا.

HTML

27 أقسام

Build a Complete Website

تعلم اساسيات React JS

The Complete Web Developer Course مقدمة عن الكورس

مقدمة الي لغة ال HTML الجزء النظري

install Tools

بناء الهيكل الاساسي للصفحة HTML Basic Structure

تعلم كل ما يخص عناوين النصوص HTML Heading

تعلم عنصر الفقرة النصية Paragraph

تعلم تنسيق العناصر Text Formatting

شرح القوائم Lists

شرح الجداول Table

شرح الروابط Links

كيفية عرض مواقع الاخرين في موقعك Iframe

عرض الصور وكيفية التعامل مع المسارات Images

تدريب عملي Example

تشغيل

شرح عناصر ال Block و Inline و الفروق بينهم

شرح عناصر رأس الصفحة Head Section

شرح العناصر المنطقية Semantic Elements

شرح ال Meter tag and Progress tag

Details & Summary

كيفية اضافة مقطع صوت في الموقع Audio

كيفية اضافة مقطع فيديو في الموقع Video

شرح النموذج + حقول الإدخال ج 1 Form & Input

شرح النموذج + حقول الإدخال ج 2 Form & Inpu

شرح النموذج + حقول الإدخال ج 3 Form & Input

شرح النموذج + حقول الإدخال ج 4 Form & Input

شرح الكيانات HTML Entities

CSS

35 أقسام

مقدمة في ال CSS وشرح ما أهميتها في الموقع

كيفية اضافة ال CSS الي مشروعك

كيفية كتابة الاكواد CSS Syntax

شرح الالوان في ال CSS وا ستخدامها CSS Colors

شرح الخلفية في الCSS وخصائصها CSS Background

شرح الحدود في الCSS وخصائصها CSS Border

شرح الهوامش الداخلية والخارجية و كيفية استخدامهم

شرح كل ما يخص ابعاد العناصر Width , Height

شرح كل ما يخص تنسيقات النصوص Text Styling

شرح كل ما يخص الخطوط CSS Fonts

شرح كل ما يخص الايقونات Font Icons

شرح كل ما يخص الروابط CSS Links

شرح كل ما يخص القوائم CSS Lists

شرح الجداول بجميع خواصها

شرح كيفية دمج واختيار العناصر CSS Combinators

شرح جميع خواص الCSS Display

شرح العرض المرن Flex box

شرح كيفية التحكم في مكان العنصر CSS Position

شرح خاصية الOverflow بالتفصيل CSS Overflow

شرح خاصية الFloat & Clear بالتفصيل CSS Float

شرح خاصية ال Pseudo Classes & Pseudo Elements بالتفصيل

شرح خاصية الشفافية CSS Opacity بالتفصيل.

شرح خاصية الظلال Box Shadow - Text Shadow ( CSS Shadow ) بالتفصيل

شرح ال Attribute Selectors & Elements Resize بالتفصيل

شرح ال Border Radius بالتفصيل

شرح ترتيب الطبقات Z-Index بالتفصيل

شرح خاصية ال Transform بالتفصيل CSS Transform

شرح خاصية ال Transform - Matrix بالتفصيل

شرح خاصية ال Transition بالتفصيل ( CSS Transition )

شرح وحدات القياس في ال CSS بالتفصيل ( CSS Units )

شرح ال Animation بالتفصيل ( CSS Animation )

كيفية انشاء Flip Card Animation بالتفصيل ( Create Flip Card )

كيفية إنشاء قائمة منسدلة في ال CSS بالتفصيل ( Dropdown Menu )

كيفية إنشاء مثلث في ال CSS بالتفصيل ( Create a Triangle )

JavaScript

25 أقسام

مقدمة وشرح ما هي لغة ال JAVASCRIPT

اين يكتب كود الجافاسكريبت ؟

كيفية كتابة الاكواد في الجافاسكريبت ؟

كيفية اضافة تعليق في الجافاسكريبت ؟

أنواع البيانات في جافاسكريبت ؟

لمتغيرات في الجافاسكريبت

شرح العمليات الحسابية ( Mathematical operators ) في الجافاسكريبت

درس 068# - شرح عوامل المقارنة ( Comparison Operator ) في الجافاسكريبت

شرح العوامل المنطقية ( Logical Operators ) في الجافاسكريبت

شرح العبارات الشرطية ( IF Else Statement ) في الجافاسكريبت

شرح العبارات الشرطية ( Switch Case ) في الجافاسكريبت

شرح جمل التكرار ( For Loop ) في الجافاسكريبت

شرح جمل التكرار ( While Loop ) في الجافاسكريبت

شرح جمل التكرار ( Do While Loop ) في الجافاسكريبت

شرح الدوال - الجزء الاول ( Functions Part 1 ) في الجافاسكريبت

شرح الدوال - الجزء الثاني ( Functions Part 2 ) في الجافاسكريبت

الدمج في الجافاسكريبت ( Break & Continue ) في الجافاسكريبت

شرح كيفية دمج العناصر في الجافا سكريبت ( Concatenation )

شرح كيفية تحويل النصوص الي ارقام في الجافا سكريبت ( String To Number )

شرح ال String Methods Slice , length , Split , Repeat , index of , last index of

شرح المصفوفات في الجافا سكريبت الجزء الاول ( JavaScript Arrays Part One )

شرح المصفوفات في الجافا سكريبت الجزء الثاني ( JavaScript Arrays Part Two )

select elements by JavaScript الجزء الاول ( JavaScript DOM Part 1 )

select elements by JavaScript الجزء الثاني ( JavaScript DOM Part 2 )

select elements by JavaScript الجزء الثالث ( JavaScript DOM Part 3 )

Git & GitHub

14 أقسام

المقدمة والتعرف علي ما هو ال Git & GitHub

كيفية تحميل وتنصيب Git علي جهازك

تعريف ال User name + Email علي برنامج ال Git

إنشاء المستودع او Repository علي برنامج ال Git

إضافة التعديلات الي المخزن او ال Repository عن طريق برنامج ال Git

كيفية انشاء فروع (branches) والتحكم فيها عن طريق برنامج ال Git

كيفية ازالة الملفات بأستخدام Checkout & Reset عن طريق Git

كيفية معرفة ومراجعة التعديلات بالتفصيل بأستخدام Diff

كيفية حذف ملفات من المشروع عن طريق برنامج ال Git

شرح كيفية التسجيل علي موقع جيت هاب

شرح كيفية إنشاء مستودع خارجي علي موقع جيت هاب

تعلم كيفية استخدام ال Pull Request - الجزء الاول

تعلم كيفية استخدام ال Pull Request - الجزء الثاني

نهاية الكورس The End

Bootstrap

10 أقسام

INTRO

Getting Started

Customize

Layout

Content

Forms

Helpers

Utilities

Components

Project

react sessions

49 أقسام

Why frameworks & JavaScript recap

Why frameworks & JavaScript recap (2)

Why frameworks & JavaScript recap (3)

Why frameworks & JavaScript recap (4)

Props, useState in depth (1)

Props, useState in depth (2)

Props, useState in depth (3)

Props, useState in depth (4)

Props, useState in depth (5)

Render Phase and useEffect in-depth (1)

Render Phase and useEffect in-depth (2)

Render Phase and useEffect in-depth (3)

Render Phase and useEffect in-depth (4)

Render Phase and useEffect in-depth (5)

Render Phase and useEffect in-depth (6)

React Hooks Rules, useEffect cleanup, useRef (1)

React Hooks Rules, useEffect cleanup, useRef (2)

React Hooks Rules, useEffect cleanup, useRef (3).

React Hooks Rules, useEffect cleanup, useRef (4)

React Router DOM v6.4, Loaders & ErrorElement (1)

React Router DOM v6.4, Loaders & ErrorElement (2).

React Router DOM v6.4, Loaders & ErrorElement (3)

React Router DOM v6.4, Loaders & ErrorElement (4)

React Router DOM v6.4, Loaders & ErrorElement (5)

React Router DOM v6.4 - Part 2 & Practice (1).

React Router DOM v6.4 - Part 2 & Practice (2)

React Router DOM v6.4 - Part 2 & Practice (3)

React Router DOM v6.4 - Part 2 & Practice (4)

React Router DOM v6.4 - Part 2 & Practice (5)

Setting up an E-Commerce project (1)

Setting up an E-Commerce project (2)

State Lifting Up, Props Drilling & Practice (1)

State Lifting Up, Props Drilling & Practice (2)

State Lifting Up, Props Drilling & Practice (3)

Stateful Components, Controlled Inputs, useReducer, Formik & Yup (1)

Stateful Components, Controlled Inputs, useReducer, Formik & Yup (2)

Stateful Components, Controlled Inputs, useReducer, Formik & Yup (3)

Stateful Components, Controlled Inputs, useReducer, Formik & Yup (4)

JWT (JSON Web Token) & ContextAPI (1)

JWT (JSON Web Token) & ContextAPI (2)

JWT (JSON Web Token) & ContextAPI (3)

Advanced data mutation with Context API (1)

Advanced data mutation with Context API (2)

Advanced data mutation with Context API (3)

Advanced data mutation with Context API (4)

Mutating products in Cart, payment with Stripe & building orders page (1)

Mutating products in Cart, payment with Stripe & building orders page (2)

Building Wishlist, Handling forgotten passwords & Handling notifications (1)

Building Wishlist, Handling forgotten passwords & Handling notifications (2)

مراجعات (0)

برمجة واجهات الويب - Front-End Diploma

عن هذا الفصل

دبلومة تطوير واجهة المستخدم (Front-End) :

التعليقات (0)

مراجعات (0)

الدورة المواصفات

ENG/ ALAA

ابلاغ

شارك

Buy with points

GDPR

برمجة واجهات الويب - Front-End Diploma

عن هذا الفصل

دبلومة تطوير واجهة المستخدم (Front-End) :

التعليقات (0)

مراجعات (0)

الدورة المواصفات

ENG/ ALAA

ابلاغ

شارك

Buy with points

Your privacy matters

GDPR