كورس فاير بيز وفلاتر من الصفر الى الاحتراف🔥🔥

https://youtube.com/playlist?list=PL93xoMrxRJIvHhxhB21YzzeimEEzzAz6g&si=70qZFaiDZwz6wtPV

موقع خرافي لأي Front End يحتار في اختيار الألوان

بيجرب لك الألوان على موقع حقيقي، مع إمكانية تخصيصها وحفظها

رابط الموقع : https://www.realtimecolors.com/?colors=180202-fafafa-ff6d4d-e6e6e5-d12600&fonts=Poppins-Poppins

..
خارطة طريق كامله لتعلم AI & Data Scientist الذكاء الاصطناعي وعلم البيانات🤖 ..
يبدأ معك من الصفر ..

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

https://roadmap.sh/ai-data-scientist

📌 انا متأكد ما يخليك تتعلم وتحترف بالبرمجة الا لما تشوف فيديوهات تطبيق عملي على كيفية تستخدم كل لغة او تقنية 👌
هذا فيديو مدته اكثر من 7 ساعات يعلمك كيف تبني موقع مثل Notion  (Notion Clone)
وباستخدام التقنيات

Next.js 13
React
Convex
Tailwind

https://youtu.be/0OaDyjB9Ib8

جايبلك 15 اختصار حرفيا هيغيروا استخدامك للـ VS Code

1. Ctrl + Shift + \
الاختصار دا لو انت واقف على فاتحة قوس هياخدك للقفلة بتاعته وطبعا دا مفيد جدا في حالة الـ Nesting

2. Ctrl+] / [
الاختصار دا هينسيك الـ Tab لو عايز تعمل Indent للسطر او تلغيه من أي مكان في السطر فدا الحل بدل بقا ما تروح لأول السطر عشان تعمل تاب أو شيفت تاب

3. Ctrl + G
هو انت لسه هتعمل سكرول للسطر اللي انت عايزه؟ يعمل اعمل الاختصار دا واكتب رقم السطر على طول ودوس انتر

4. Ctrl + P
هو انت بردو لسه هتقعد تدور على الملف اللي عايز تفتحه يعم بردو اعمل الاختصار دا واكتب اسمه على طول

5. Ctrl + D
الاختصار دا مهم جدا بيعملك تحديد لأول ما يطابق الكلمة اللي انت واقف عندها او الجزء اللي انت محدده وكل ما تضغط كل ما يحدد وبالتالي مثلا تقدر تغيرهم كلهم مرة واحدة

6. Ctrl + Shift + L
دا زي اللي قبله بس دا بقا بيحدد كل النتايج للجزء اللي انت محدده مرة واحدة يعني لو عايز تغير اسم variable مثلا وانت مستخدمه اكتر من مرة فدا منقذك

7. Ctrl+F2
دا بردو زي اللي قبله بس دا للكلمة اللي انت واقف عندها مش تحديد

8. Alt + ↑ / ↓

الاختصار دا يحركلك السطر اللي واقف عليه سطر فوق او سطر تحت

9. Shift + Alt + ↓ / ↑
الاختصار دا بيعملك نسخة من السطر اللي واقف عليه فوقه او تحته

10. Ctrl + Enter
الاختصار دا بيعملك سطر جديد تحت السطر اللي انت واقف عليه

11. F12
لو عندك function او class او اي حاجة ومستخدمه مثلا في مكان معين وعايز ترجعله على طول تعدل فيه اعمل بس الاختصار دا وهو هيوديك ع المكان اللي عرفت فيه الـ function ولو العكس هيجبلك انت مستخدم الـ function دي فين

12. Ctrl + Shift +
هيفتحلك نافذة تيرمينال جديدة

13. Ctrl + B
هيظهر او يخفي الـ side bar

14. F3 / Shift+F3
هيعمل بحث سريع ع الكلمة اللي انت عندها ويجيبلك النتايج قبلها او بعدها

15. Ctrl+ L
بيحدد السطر اللي انت واقف عنده

#تعلم_برمجة_الشركات
#احترف_البرمجةجايبلك 15 اختصار حرفيا هيغيروا استخدامك للـ VS Code

1. Ctrl + Shift + \
الاختصار دا لو انت واقف على فاتحة قوس هياخدك للقفلة بتاعته وطبعا دا مفيد جدا في حالة الـ Nesting

2. Ctrl+] / [
الاختصار دا هينسيك الـ Tab لو عايز تعمل Indent للسطر او تلغيه من أي مكان في السطر فدا الحل بدل بقا ما تروح لأول السطر عشان تعمل تاب أو شيفت تاب

3. Ctrl + G
هو انت لسه هتعمل سكرول للسطر اللي انت عايزه؟ يعمل اعمل الاختصار دا واكتب رقم السطر على طول ودوس انتر

4. Ctrl + P
هو انت بردو لسه هتقعد تدور على الملف اللي عايز تفتحه يعم بردو اعمل الاختصار دا واكتب اسمه على طول

5. Ctrl + D
الاختصار دا مهم جدا بيعملك تحديد لأول ما يطابق الكلمة اللي انت واقف عندها او الجزء اللي انت محدده وكل ما تضغط كل ما يحدد وبالتالي مثلا تقدر تغيرهم كلهم مرة واحدة

6. Ctrl + Shift + L
دا زي اللي قبله بس دا بقا بيحدد كل النتايج للجزء اللي انت محدده مرة واحدة يعني لو عايز تغير اسم variable مثلا وانت مستخدمه اكتر من مرة فدا منقذك

7. Ctrl+F2
دا بردو زي اللي قبله بس دا للكلمة اللي انت واقف عندها مش تحديد

8. Alt + ↑ / ↓

الاختصار دا يحركلك السطر اللي واقف عليه سطر فوق او سطر تحت

9. Shift + Alt + ↓ / ↑
الاختصار دا بيعملك نسخة من السطر اللي واقف عليه فوقه او تحته

10. Ctrl + Enter
الاختصار دا بيعملك سطر جديد تحت السطر اللي انت واقف عليه

11. F12
لو عندك function او class او اي حاجة ومستخدمه مثلا في مكان معين وعايز ترجعله على طول تعدل فيه اعمل بس الاختصار دا وهو هيوديك ع المكان اللي عرفت فيه الـ function ولو العكس هيجبلك انت مستخدم الـ function دي فين

12. Ctrl + Shift +
هيفتحلك نافذة تيرمينال جديدة

13. Ctrl + B
هيظهر او يخفي الـ side bar

14. F3 / Shift+F3
هيعمل بحث سريع ع الكلمة اللي انت عندها ويجيبلك النتايج قبلها او بعدها

15. Ctrl+ L
بيحدد السطر اللي انت واقف عنده

ما هي المدة التي أحتاجها لتعلم البرمجة؟

قبل الإجابة على هذا السؤال سأطرح عليك بعض الأسئلة:
1- لماذا ترغب بتعلم البرمجة؟
2- لم العجلة في التعلم؟
3- هل تريد معرفة المدة بهدف إجتياز المقررات الدراسية؟
4- هل هو الإرتباط بوقت محدد لإنجاز مشروع معين؟
5- هل ترغب بمنافسة المبرمجين المعروفين في المجال؟
6- هل تريد تطوير نفسك و مهاراتك في هذا المجال بوقت قصير؟
7- هل تطمح للحصول على وظيفة مبرمج؟

التعلم بأسرع وقت ممكن

حين يكون سبب تعلمك للبرمجة مرتبط بوقت محدد, مثلاً مشروع مطلوب في المقرر الدراسي حتى تتمكن من إجتياز مادة ما، أو مشروع التخرج، أو مشروع شخصي إلخ.. لا بد من مضاعفة مجهود التعلم لأنك محدد بوقت ضيق جداً يجبرك على ذلك.
مرورك على كمية كبيرة من المعلومات سيجبرك حتماً على تخطي الكثير من المواضيع و المفاهيم المهمة في بناء المشروع. فمثلاً بعد أن تنهي المشروع بمدة و تبدأ بالتعلم بشكل صحيح ثم تعود و تشاهد الكود الذي كتبته سابقاً ستستغرب من نفسك كم كان أسلوبك في كتابة كود المشروع سيئاً.
التعلم بسرعة لن يجعل منك مبرمجاً مُتقناً و مُتمكناً، و ستواجه العديد من الإشكاليات و الصعوبات و العقد في برمجة أي مشروع تعمل عليه، و سيكون إخراجك له في النهاية ضعيفاً نوعاً ما و سيُلاحظ أنك غير مُتمكن كثيراً لكونك شخصاً جديداً لا يعرف ما المشاكل التي قد يسببها الكود الذي فعله أو ما هي نقاط الضعف الموجودة فيه. بالإضافة لذلك فإن التعلم بسرعة قد يجعلك تفعل الأشياء بصعوبة كبيرة جداً في حين أنك لو كنت على إضطلاع أكثر لفعلت نفس الشيء بسهولة تامة و مدة أقصر.

التعلم بشكل صحيح و مدروس

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

الفرق بين التعلم السريع و التعلم المدروس

مشاريع و منجزات من يتعلم كل الأسس و المفاهيم التي يحتاجها خطوة خطوة ستكون دقيقةً في الإنتاج لأبسط و أصغر التفاصيل في إخراج العمل، و السبب أنه يتبع بنية صحيحة في العمل و لديه تصور مسبق عن كيفية أداء المطلوب بالشكل الصحيح. بالإضافة إلى أنه سيستمر في التعلم بحب و شغف و رغبة عالية، و سيستطيع إنجاز العديد من المهام البرمجية و المشاريع مهمها تعددت أفكارها و كانت صعبة فهو سيتعلم أسلوب التعامل معها لإنجازها.
أما عندما يتعلم الشخص بسرعة فإنه سيبرمج و يخرج برامج و أنظمة ضعيفة جداً لعدم تمكنه من اللغة البرمجية التي يستخدمها و لجهله بالطرق و الأساليب المتبعة في إنجاز بعض المهام و الأفكار في بعض المشاريع.

نصائح للمبتدئين في البرمجة

1- لا تفكر بتعلم البرمجة بسرعة ما لم تكن مرتبطاً بوقت معين لإنجاز مهمة معينة.
و إذا حدث و واجهت ذلك، عُد مرة أخرى بعد إنجازك لها و تعلم و طور و مهاراتك.
2- إستمر بالتعلّم و بناء المشاريع لزيادة خبرتك و قدراتك.
3- لا تتوقف بشكل مفاجئ لمدة طويلة عن البرمجة حتى لا تنسى المفاهيم التي درستها.

نصائح لتعلم البرمجة بطريقة فعّالة

تعتبر مهارة البرمجة من المهارات الممتعة في تعلمها وتطبيقها، فيما تعد مهنة البرمجة ( مبرمج ) من المهن عالية الطلب ( وعالية الأجر )  في وقتنا الحالي، و بحكم عملي بتدريس البرمجة تصلني العديد من الأسئلة منها: “كيف استذكر البرمجة “، ” كيف يمكنني تحقيق أقصى فائدة من المعلومات البرمجية التي أدرسها “، ” كيف أتعلم البرمجة  بشكل فعّال ” ..
تعلم البرمجة بطبيعة الحال لن يحدث بين ليلة وضحاها فالبرمجة تحتاج إلى وقت وجهد ومثابرة يسبقها عزيمة وانضباط وتركيز لتحقيق هدفك بالتعلم، أستطيع أن أصف تعلمها بالسهل الممتنع! فيما يلي مجموعة من النقاط المساعدة في عملية تعلم البرمجة:
افهم الأساسيات بشكل جيد

عملية كتابة الكود البرمجي شبيهة جدًا بعملية البناء لابد من أن تكون أساسيات البناء متينة وصلبة حتى يمكن أن تضع عليها بقية تفاصيل المبنى وإلا سيكون البنيان متهالك وقد يسقط، لذلك من المهم أثناء تعلمك البرمجة التركيز على الأساسيات وعدم تجاوزها، لأنه بطبيعة الحال لتتمكن من فهم الموضوعات المتقدمة لابد أن تكون استوعبت الأساسيات بشكل جيد .
الأساسيات تشمل:

تراكيب البيانات وأنواعها  –  Data Structures and Data types

أدوات الإدخال والإخراج – Input and Output Tools

المتغيرات البرمجية –  variables

جمل التحكم  – control structures

قواعد كتابة اللغة –  syntax

البرنامج الذي تستخدمه لكتابة الأكواد –  text editors

تعلم بالممارسة والتطبيق

البرمجة من الموضوعات التي لا يمكن الاكتفاء بقراءة كتاب أو قراءة أكواد جاهزة فيها لتعلمها بل لا بد من التجربة والممارسة وتطبيق كل ما يتم تعلمه، الكثير من الاختصارات والأفكار والحيل البرمجية لا يمكن تعلمها إلا بالممارسة المستمرة. من السهل قراءة كود جاهز واستيعاب مافيه لكن الصعوبة تكمن في فهم كيف توصلنا لطريقة كتابة هذا الكود وكيف تسلسلت الأفكار للوصول لهذا الحل البرمجي، وهذا ما ستتعلمه أثناء ممارستك ورحلة تعلمك.
أكتب أكواد بشكل أكثر ستخطئ أكثر وتتعلم أكثر، عدل في كودك، غير طريقة حلك، جرب أكثر من طريقة ممكنة كل ذلك يزيدك خبرة، جرب بناء مشاريعك الخاصة وحاول تطبيق التحديات البرمجية، مواقع الإنترنت مليئة بالأمثلة والأفكار البرمجية.
استخدم الورقة والقلم

قد تستغرب فكرة الكتابة اليدوية حيث لا يمكنك من خلالها تجربة كودك وتشغيله، لكنها في واقع الأمر مفيدة جداً، تشير الدراسات أن تدوين الأفكار والملاحظات يدويًا مهم في عملية التعلم ويساعد على بقاء المعلومات على المدى الطويل، ابدأ بترتيب أفكارك على ورق واكتب اكوادك، عدم وجود اكمال تلقائي و مصحح آلي يزيد من كفاءتك كمبرمج و يزيد عمق فهمك لقوانين اللغة ويساعدك على سبيل المثال في المقابلات الوظيفية حيث قد يطلب منك كتابة أكواد بدون استخدام برنامج.
أحط نفسك بالمبرمجين ومتعلمي البرمجة

تبادل الخبرات مع من هم في مستواك، جرب أن تقوم بشرح معلوماتك وتدريسها فذلك يساعد على تثبيت المعلومة، ابحث في المنتديات البرمجية جرب أن تجيب على ما تعرفه من الأسئلة واسأل عن ما يصعب عليك فهمه ستجد الكثير ممن يساعدك ويثري معلوماتك لا تخجل من طلب المساعدة، قد يساعدك أن تجد مبرمج يرشدك ويوضح لك ما يستصعب عليك فهمه.
استفد من الأكواد الجاهزة

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

ارتكاب الأخطاء أمر وارد الحدوث أثناء كتابة الأكواد، اقرأ رسائل الخطأ التي تظهر من الكود بتمعن فنصف الإجابة فيها. تعلم كيفية الإستفادة من خصائص التصحيح إن وجدت في برنامجك واستفد من مميزاتها وتعلم من أخطائك.

نوع مصادر معرفتك

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

كورس Next Js من الصفر الى الاحتراف انصح به جدا 🔥🔥

https://youtu.be/_t4c-vxalp4?si=twghECBSNzE7k3iT

تطبيقات لتعلم البرمجة 🔥👏
تقدر تتعلم البرمجة من جوالك وباي مكان😍
⬇

تطبيق SoloLearn
Android
https://play.google.com/store/apps/details?id=com.sololearn
IOS
https://apps.apple.com/us/app/sololearn-learn-to-code/id1210079064


تطبيق Enki
Android
https://play.google.com/store/apps/details?id=com.enki.insights


IOS
https://apps.apple.com/sa/app/enki-learn-coding-programming/id993753145?l=ar


تطبيق Mimo

Android
https://play.google.com/store/apps/details?id=com.getmimo

IOS
https://itunes.apple.com/us/app/mimo-learn-how-to-code-through/id1133960732?mt=8&at=1000lpyT

تطبيق Codecademy Go‏
Android
https://play.google.com/store/apps/details?id=com.ryzac.codecademygo&hl=ar&gl=US

IOS
https://apps.apple.com/us/app/codecademy-go/id1376029326


تطبيق Encode

Android
https://play.google.com/store/apps/details?id=com.upskew.encode

IOS
https://apps.apple.com/us/app/encode-learn-to-code/id1198851756


تطبيق Programming Hub
Android
http://bit.ly/2KcdCq0

IOS
http://bit.ly/2O3mpLP

📌 4 دورات مجانية وبالعربي لتعلم Flutter من الصفر 🔥🚀
يعتبر flutter حاليا من اشهر التقنيات المستخدمة لتطوير تطبيقات لجميع الانظمة 🔥
🔽🔽


1️⃣ دورة كاملة وشاملة لتعلم Flutter من الصفر إلى مستويات متقدمة ,من قناة Wael abo hamza.

https://bit.ly/3RFUqCx

2️⃣دورة كاملة لتعلم Flutter من الصفر للمبتدئين ,مع التطبيق العملي مقدمة من قناة Ammar Alkhatib .
https://bit.ly/3JVQviX

3️⃣ تقدم منصة سطر عدة دورات لتعلم Flutter بعدة مستويات (حاليا متوفر مستوى مبتدئ ومتوسط) .
http://bit.ly/3x5W8U7

4️⃣ كورس كامل وبشرح مميز من قناة اتعلم في ساعة ،يشرحلك كل ماتحتاجه لتعلم Flutter  من الصفر 👌
http://bit.ly/3MjcKRb

‎افضل المواقع لتعزيز وتطوير نفسك في Front end

1. Frontend Mentor
https://www.frontendmentor.io/

2. Codewars
https://www.codewars.com/

3. Codewell
https://www.codewell.cc/

4. JavaScript30
https://javascript30.com/

5. Coderbyte
https://coderbyte.com/

6. CSS Battle
https://cssbattle.dev/

7. FreeCodeCamp
https://www.freecodecamp.org/learn/

8. Frontend Practice
https://www.frontendpractice.com/

9. CodePen Challenges
https://codepen.io/challenges/?ref=blog.codewell.cc

10. Dev Challenges
https://devchallenges.io/

فكرة انك تعتمد على ChatGPT وانت مش فاهم حاجة في البرمجة فكرة فاشلة واوعى تتخيل انك هتطلب منه يعملك تطبيق وتاخد الكود Copy + Paste دي فكرة فاشلة تماما ولا مفر من انك تتعلم برمجة علشان تعرف تفهمه انت عاوز ايه وتراجع على الكود اللي هيطلع منه الموضوع مش بالتفاهة دي علشان شوفت أكتر من شخص بيقول حاولت اتعلم برمجة معرفتش فروحت ل ChatGPT قولتله يعملي تطبيق وعملهولي دة واحد بيحلم الا لو كان التطبيق انك تعمل Print In Console ومسمي دة تطبيق :)

منقول من الزيرو😍😍

كورس كوتلن من الصفر الى الاحتراف مجانا انصح به جدا🔥🔥
https://youtube.com/playlist?list=PLStwsNXljjnFHThSlJHnruWGvbpsLxmfx&si=8SyBT0ZyzCzL5_om

نصيحة لك كمبرمج اذا تبي تتوظف او تشتغل بسرعة
- لازم يكون عندك معرض لاعمالك ..
- لازم يكون عندك المهارات الاساسية بالحاسب 👌
- لازم تكون تعرف المفاهيم بالبرمجة وقادر تنفذ المهام اللي تطلب منك ✅
- تكون مرن وتتعلم بشكل مستمر 📖


وبالاخير مهارة التواصل مهمة جداً جداً👏

منقول😍

هذا الموقع يفيدك لو بتدرب على إنشاء الAPI يوفر لك قائمة بالمستخدمين
بيانات وهمية .. تقدر تستخدمها وتتعلم على التعامل مع الapi من خلالها✈

RANDOM USER GENERATOR  :

https://randomuser.me/

اضافات رهيبة لمطورين Flutter تقدر تثبتها على Vs Code .. وتسهل لك الكثير🤩👌

1. Flutter Widget Snippets
https://marketplace.visualstudio.com/items?itemName=alexisvt.flutter-snippets

2. Flutter Tree
https://marketplace.visualstudio.com/items?itemName=marcelovelasquez.flutter-tree

3. Json to Dart Model
https://marketplace.visualstudio.com/items?itemName=hirantha.json-to-dart

4. Pieces for Vs Code
https://marketplace.visualstudio.com/items?itemName=MeshIntelligentTechnologiesInc.pieces-vscode


5. Pubspec Assist
https://marketplace.visualstudio.com/items?itemName=jeroen-meijer.pubspec-assist

كورس تعلم بوتستراب من الصفر إلى الاحتراف مجانا من أهم المكتبات الي رح تساعدك جدا ب تصميم المواقع🔥🔥🔥
https://youtu.be/b3ROWmXZ7iA?si=uFzNwat5DWVukm7F

🔰 مـعـلـومـة

💬 معاني أرقام الأخطاء التي قد تراها على مواقع الإنترنت

🔸 301 : تم نقل تلك الصفحة نهائياً.
🔸 307 : تم نقل تلك الصفحة مؤقتاً.
🔸 401 : رؤية الصفحة تحتاج ترخيص (كلمة سر).
🔸 403 : ممنوع أن تصل لهذه الصفحة.
🔸 404 : صفحة غير موجودة.
🔸 405 : لقد وصلت لتلك الصفحة بطريقة خاطئة.
🔸 408 : إنتهى وقت محاولة وصولك للصفحة قبل أن تصل إليها.
🔸 414 : عنوان الصفحة\الموقع URL أطول من الطبيعي.
🔸 500 : مشكلة في الموقع نفسه.
🔸 503 : الخدمة غير متوفرة ربما بسبب الضغط الكبير على الموقع.
🔸كل أرقام الـ 100 : تعني معلومات إضافية (لن تراها في الغالب).
🔸كل أرقام الـ 200 : تعني النجاح (لن تراها في الغالب).
🔸كل أرقام الـ 300 : تعني إعادة توجيه Redirection.
🔸كل أرقام الـ 400 : تعني فشل من العميل “أنت”.
🔸كل أرقام الـ 500 : تعني فشل من السيرفر (الخادم الذي يستضيف “الموقع نفسه”).

🔰 مـا الـفـرق بـيـن UI و UX ؟

الـ UI هي اختصار لــ "User Interface" والتي تعني "واجهة المستخدم"، في عالم التصميم والبرمجةنقصد بها الواجهة الرسومية التي تجعل من المواقع، الأنظمة أو التطبيقات أسهل استخداماً وأقل ترتيباً.

الـ UX هي اختصار لــ "User Experience" والتي تعني "تجربة المستخدم"، المقصود بتجربة المستخدم هو السلوك والتأثر الذي يشعر به المستخدم من خلال المنتج (الموقع أو التطبيق ..) فمثلاً إذا أردنا تصميم موقع فيجب علينا أن نضع جميع المرافق والأزرار ونفكر في تصرفات المستخدم عندما يستخدم المنتج.

الفرق بينهما كبير، فواجهة المستخدم (UI) مرئية وهي الواجهة الموجودة عند تصفحك لأي موقع وذلك من أزرار وصور وألوان وغيرها.
أما تجربة المستخدم (UX) غير مرئية، هي فقط السلوك والتأثير الذي يشعر به المستخدم.