محمد عاطف25

نعم بالطبع يمكنك ربط 3 جداول معا باستخدام JOIN في SQL وبنفس الطريقة التي تربط بها جدولين، ولكن فقط تضيف جدول ثالث بنفس المبدأ. مثال : SELECT * FROM table1 JOIN table2 ON table1.id = table2.table1_id JOIN table3 ON table2.id = table3.table2_id حيث تقوم بربط الجدول الأول بالثاني بشرط معين ومن ثم تقوم بربط الجدول الثالث بأحد الجدولين الأخرين حسب العلاقة لديك. إذا أردت مساعدة في ربط جداول معينة يمكنك توضيح الجداول والعلاقات بينها لمساعدتك.

يمكنك محاولة بناء مدونة بسيطة فهو مشروع جيد للتعامل مع التوجيه (Routing) وعرض المحتوى حيث يجب على المشروع أن يحتوي على قائمة بالمقالات وعرضها حيث كل مقال له صفحته الخاصة به. يمكنك أيضا إضافة تعليقات للمقالات يمكنك محاولة تخزينها مؤقتا في ملف أو في localStorage إذا لم تكن تعلمت الواجهات الخلفية وإنشاء ال API. ويمكنك إنشاء مميزات متقدمة مثل لوحة تحكم لتعديل المقالات وعرضها وحذفها . يمكنك أيضا إنشاء خاصية عرض محتوى المقالات المكتوب بصيغة Markdown أى بلغة HTML . يمكنك أيضا محاولة بناء تطبيق الطقس (Weather App) حيث هو عبارة عن تطبيق يتفاعل ويرسل طلبات إلى واجهات برمجة التطبيقات (APIs) الخارجية فيمكنك عرض حالة الطقس لمدينة معينة وإضافة طريقة البحث عن المدن المختلفة. ويمكنك أيضا عرض توقعات الأيام القادمة . يمكنك أيضا توفير إمكانية : تبديل وحدات القياس بين مئوية وفهرنهايت. وميزة متقدمة وهي إضافة خاصية معرفة الطقس من خلال الموقع GPS. وأخيرا يمكنك إنشاء متجر إلكتروني بسيط (E-commerce Store) فهو مشروع ممتاز لتطبيق مفاهيم React و State Management. حيث يمكنك عرض المنتجات و إضافة المنتجات إلى سلة التسوق. وإدارة الحالة (State Management) من خلال استخدام Context API أو أى إدارة حالة أخرى لسلة التسوق. وأيضا صفحة منفصلة لكل منتج مع وصف وصور. وإضافة نظام التصفية والبحث عن المنتجات وتصفيتها حسب الفئة أو السعر. وإذا لم تتعلم إنشاء API يمكنكاستخدام Mock API لجلب بيانات المنتجات من Mock API مثل JSONPlaceholder أو Fake Store API.

كنت أقصد بيانات الطلب headers . ولكن لا مشكلة من المفترض أن ملف views لديك صحيح لا توجد به مشكلة حيث الكود سليم من ناحية parser_classes في ال ProductViewSet. وغالبا السبب في إعدادات REST_FRAMEWORK في settings.py. لذلك يرجى التحقق إذا كان لديك في settings.py هذا الجزء: REST_FRAMEWORK = { 'DEFAULT_PARSER_CLASSES': [ 'rest_framework.parsers.JSONParser', ], } فإذا كان موجود فهذا يلغي إعداد parser_classes الموجود في الـ ViewSet ويجعل DRF يتوقع دائما JSON. لذلك الحل إما حذف هذا الإعداد أو تعديله وإضافة التالي به : 'DEFAULT_PARSER_CLASSES': [ 'rest_framework.parsers.JSONParser', 'rest_framework.parsers.MultiPartParser', 'rest_framework.parsers.FormParser', ]

لاداعي للشكر . نعم من المفترض أن الكود صحيح ويجب أن يتم إرسال الطلب بشكل صحيح . هل يمكنك إرسال صورة للطلب من خلال نافذة network في أدوات المطور مع بيانات الطلب . وأيضا يرجى إرسال كود Django view فمن الممكن أن المشكلة فيه

وعليكم السلام ورحمة الله وبركاته. لاحظ الخطأ يخبرك أنه لا يمكن قبول الصور من خلال الطلب من نوع application/json كما تفعل . فهذه المشكلة شائعة عند رفع ملفات كالصور باستخدام Django REST Framework. والسبب أنك عندما ترسل الطلب مع صورة يجب أن ترسل البيانات باستخدام multipart/form-data وليس application/json أو أى نوع أخر. ولا يجب أن تقوم بتعيين Content-Type يدويا إلى application/json حيث بما أنك تستخدم FormData فإنه يتم إضافة Content-Type المناسب (multipart/form-data). فمثلا لو قمت بإرسال طلب ال API من خلال java script فيجب أن يكون كالتالي: const formData = new FormData(); formData.append('name', 'example'); formData.append('image', fileInput.files[0]); fetch('/api/upload/', { method: 'POST', body: formData }); ولو كنت ترسل الطلب من خلال postman فيجب إختيار form-data من ال body وإرسال الصور منها :

نعم إن Next.js مبني بالفعل على React ويوفر العديد من الميزات الإضافية التي تجعله خيار جدي للعديد من المشاريع ولكن الاختيار بين React وNext.js يعتمد على ما تحتاجه في مشروعك وخصائصه. فأولا إن next هو إطار عمل كامل (Framework) وليس مكتبة فقط ويوفر .js حلول جاهزة لل (Routing) وجلب البيانات (Data Fetching) وتحسين الأداء مثل التحميل المسبق Pre-rendering. وإن React هي مكتبة وتحتاج إلى إضافة مكتبات أخرى مثل react-router لل (Routing) وaxios أو fetch لجلب البيانات. وnext يوجود به التصيير المسبق (Pre-rendering) لتحسين SEO والأداء حيث يدعم SSR (Server-Side Rendering) و SSG (Static Site Generation) بشكل مدمج مما يجعله مثالي للمواقع التي تحتاج إلى تحسين محركات البحث (SEO). ولكن React يعتمد عادة على CSR (Client-Side Rendering) مما قد يؤثر بشكل سئ على SEO إذا لم يتم تحسينه. ولكن إذا كنت تبني تطبيق Single-Page Application (SPA) ولا يحتاج إلى SEO مثل لوحات التحكم (Dashboards) أو التطبيقات الداخلية التي لا تحتاج إلى تصيير من الخادم فإن React هو الأفضل في هذا الجزء. وأيضا إذا كنت تريد تحكم كامل في إعدادات البناء (Custom Config) . وبينما next يقوم بفرض بعض القيود على هيكلة المشروع. فإن React مع Webpack يمكنك من تخصيص كل شيء. وأيضا إذا كان المشروع صغير ولا يحتاج إلى ميزات next فإن React هو الأفضل. وأيضا إضافة Next لمشروع بسيط قد يكون مبالغة إذا كنت لا تحتاج إلى SSR أو SSG. ويجب عليك معرفة أن React مخصص لبناء واجهات المستخدم فقط. أي أنه يركز على بناء المكونات (Components) وإدارة الحالة داخل الواجهة. وإذا لا نستعمل next دائما لأننا أحيانا لا نحتاج كل ما يقدمه Next خاصة في تطبيقات واجهات المستخدم البسيطة وإن Next كما وضحت لك يفرض بنية مشروع معينة وآليات عمل محددة وهذا قد يكون معقد على المشاريع الصغيرة . وأخير فإن Next.js لا يستبدل React بل يبني عليه ويوفر بيئة عمل كاملة حوله.

سيتم توصيل مشكلتلك للإدارة وسنعمل على حلها إذا كانت المشكلة من جهة الموقع هنا.

إن SWC (Speedy Web Compiler) هو مصرف سريع للغة JavaScript و TypeScript وهو مكتوب بلغة Rust ويستخدم لتحويل الشيفرة الحديثة مثل ES6+ أو TypeScript إلى شيفرة متوافقة مع المتصفحات القديمة أو بيئات Node.js. ومن مميزات SWC أنه سريع جدا فهو أسرع بكثير من Babel ويعتمد على لغة Rust المحسنة للأداء. ويدعم أحدث معايير JavaScript و TypeScript ويدعم ES Modules و JSX و Decorators وغيرها. ويمكنه تحويل TypeScript إلى JavaScript بدون استخدام tsc. ويستطيع العمل مع Webpack و يدعم Bundling وهو متكامل مع Next.js .

لقد لاحظت الصورة السابقة التي أرفتها وهي تظهر أنك قد قمت بحذف ال session storage ولكن الصحيح هو local storage هنا :

هل كنت قد أرسلت رسالة لمركز الدعم وحدثت تلك المشكلة ؟ هل يمكنك تجربة متصفح أخر على جهاز الحاسوب والتأكد من الإنترنت لديك وإخبارى بالنتيجة .

هل يمكنك توضيح ما يظهر لك ؟

هل يمكنك توضيح سؤالك أكثر هل تقصد رفع مشاريع الموجودة في الدورة أم ماذا ؟ إذا كان كذلك فلايتم رفع المشاريع في قسم المحادثة أو في خانة تحدث معنا. بل يجب رفعها على موقع github وإليك تفاصيل أكثر حول كيفية رفعها والمطلوب رفعه : وبعد أن تقوم بالإنتهاء من الدورة وتريد التقدم للإختبار يجب محادثة مركز المساعدة من خلال الرابط التالي : https://support.academy.hsoub.com/conversations وإخبار مركز المساعدة أنك تريد التقدم للإختبار وبعد ذلك يتم طلب منك رابط git الخاص بك ويمكنك إرسال الرابط لهم في المحادثة.

المشروع يعمل دون أى مشكلة لقد قمت بتجربته ولا تحدث به أى أخطاء. ولكن توجد مشكلة في المنطق حيث عند تحديث الصفحة يتم حذف جميع المهام لتصبح قائمة المهام فارغة في التخزين المحلي. والسبب هو إستخدامك لإثنين من useEffect حيث ال useEffect الثانية يتم تنفيذها في البداية والتي يكون فيها قيمة todos بمصفوفة فارغة . وإليك الكود التالي الصحيح للحل : import React, { useState, useRef, useEffect } from "react"; import './App.css' import logo from './assets/react.svg' function App() { const [todos, setTodos] = useState([]); const inpRef = useRef(); /// قراءة البيانات من التخزين المحلي عند تحميل الصفحة أول مرة useEffect(() => { const storedTodos = localStorage.getItem("todos",); if (storedTodos) { setTodos(JSON.parse(storedTodos)); } }, []); // حفظ المهام في التخزين المحلي عند كل تغيير في القائمة // useEffect(() => { // localStorage.setItem("todos", JSON.stringify(todos)); // }, [todos]); const handelButtonClick = () => { const text = inpRef.current.value; const newTodos = { compiled: false, text } inpRef.current.value = ''; setTodos([...todos, newTodos]) localStorage.setItem("todos", JSON.stringify([...todos, newTodos])); } const handelItemClick = (i) => { const newItem = [...todos]; newItem[i].compiled = !newItem[i].compiled; setTodos(newItem) localStorage.setItem("todos", JSON.stringify(newItem)); } const handelDeleteClick = (i) => { const newDelete = [...todos]; newDelete.splice(i, 1) setTodos(newDelete); localStorage.setItem("todos", JSON.stringify(newDelete)); } return ( <> <img src={logo} alt="" /> <div className="App"> <h2>To Do List</h2> <ul> {todos.map(({ text, compiled }, i) => { return <div className="item"><li key={i} className={compiled ? 'done' : ''} onClick={() => handelItemClick(i)}>{text}</li><span onClick={() => handelDeleteClick(i)}>❌</span></div> })} </ul> <input ref={inpRef} placeholder="Enter item..." /> <button onClick={handelButtonClick}>Add</button> </div> </> ) } export default App;

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

ينبغي عليك معرفة أولا كيف تعمل وما فائدتها وإذا ما واجهتك مشكلة تستطيع map حلها يمكنك إستخدامها. فإذا ما واجهتك أى مشكلة أو تريد تحويل عناصر مصفوفة ما إلى شكل مختلف تماما فهنا map هي المناسبة لك . تخيل مثلا لدينا منتجات ونريد عرضها في مكون React كيف سنفعل ذلك ؟ يمكننا إستخدام حلقة for ولكن هنا map أفضل وأسرع هكذا مثلا : const products = [ { id: 1, name: "iPhone", price: 999 }, { id: 2, name: "Samsung", price: 899 } ]; function ProductList({ products }) { return ( <div className="grid"> {products.map(product => ( <div key={product.id} className="product-card"> <h3>{product.name}</h3> <p>{product.price} USD</p> <button>Add to Cart</button> </div> ))} </div> ); } لاحظ كيف إستخدمنا map وقمنا بتحويل كائن المنتج إلى عناصر HTML بها بيانات هذا الكائن . مثلا لدينا تعليقات للمستخدمين نريد عرضها : const comments = [ { id: 1, user: "Mohamed", message: "good Product" }, { id: 2, user: "Ahmed", message: "Good Price" } ]; function CommentSection({ comments }) { return ( <div> <h4>}comments:</h4> {comments.map(comment => ( <div key={comment.id}> <strong>{comment.user}</strong>: {comment.message} </div> ))} </div> ); } لاحظ هنا أيضا إستخدمنا map وقمنا بتحويل كائن التعليق إلى عناصر يتم عرض التعليقات بها. وهكذا في مشروع React يمكنك إستخدام map لعرض المصفوفة التي لديك والعناصر التي بها إلى عناصر HTML

نستخدم دالة map عندما نريد تحويل كل عنصر في المصفوفة إلى شيء جديد أو قيمة جديدة مع الاحتفاظ بعدد العناصر. فإذا كنت تريد مصفوفة جديدة بنفس الطول ولكن كل عنصر فيها تم تعديله قم بإستخدم map. فمثلا إليك الأمثلة التالية : تحويل الأرقام: const numbers = [1, 2, 3, 4]; const doubled = numbers.map(n => n * 2); console.log(doubled); // [2, 4, 6, 8] لاحظ استخدمنا map هنا لأننا نريد تحويل جميع الأرقام في المصفوفة إلى ضعف الرقم نفسه ولكن نحتفظ بعدد العناصر الأساسية. مثلا لو أردنا إستخراج خاصية من الكائنات : const users = [ { name: "Mohamed", age: 20 }, { name: "Zen", age: 20 } ]; const names = users.map(user => user.name); console.log(names); // ["Mohamed", "Zen"] هنا إستخدمنا map لأننا نريد مصفوفة جديدة تحتوي فقط على أسماء المستخدمين. تنسيق البيانات وعرضها بطريقة معينة : const products = [ { id: 1, price: 100 }, { id: 2, price: 200 } ]; const formatted = products.map(p => `${p.id}: ${p.price} USD`); console.log(formatted); // ["1: 100 USD", "2: 200 USD"] هنا قمنا بتحويل كل كائن إلى نص.

إن useRef هو خطاف (Hook) يستخدم لإنشاء مرجع (ref) يمكن ربطه بعنصر DOM أو لتخزين قيمة لا تؤدي إلى إعادة التصيير (re-render) عند تغييرها. الكائن ref هو كائن يحتوي على خاصية واحدة فقط مهمة اسمها: ref.current وهو الشكل الذي تحصل عليه من useRef(). والخاصية current هي التي تخزن القيمة المرجعية للعنصر وهي تتغير حسب الاستخدام: فإذا تم استخدام ref مع عنصر DOM: const myRef = useRef(null); return <div ref={myRef}>Hello</div>; بعد التصيير وبناء العنصر فإن myRef.current سيحتوي على العنصر DOM الفعلي مثل HTMLDivElement: console.log(myRef.current); // <div>Hello</div> وستلاحظ أن الخاصية ref للعنصر هنا تخبر React أن يقوم بإعطاء هذا العنصر DOM مرجع (Reference) وحفظه داخل الكائن myRef.current" إذا تم استخدام ref لتخزين قيمة داخلية لا تؤدي إلى إعادة التصيير وإعادة بناء المكون : const countRef = useRef(0); countRef.current += 1; هنا countRef.current مجرد قيمة رقمية يتم تخزينها وتحديثها بدون أن تقوم بإعادة تصيير المكون.

يوجد العديد من الأدوات والموقاع المتخصصة في ذلك. أولا Sora من OpenAI : حيث تعتبر Sora من أحدث وأقوى الأدوات في مجال تحويل النص إلى فيديو فإنها تتيح إنشاء مقاطع فيديو واقعية واحترافية من وصف نصي فقط وهي مناسبة لسرد القصص المرئية وتصور المفاهيم والمشاهد السينمائية. ثانيا InVideo AI : وهي منصة شاملة تتيح تحويل النص إلى فيديو بجودة عالية مع واجهة سحب وإفلات سهلة الاستخدام.وتوفر مكتبة ضخمة من الصور والفيديوهات والموسيقى المجانية بالإضافة إلى أدوات الذكاء الاصطناعي لتحويل النص إلى كلام وإنشاء فيديو تلقائيا.وهي مناسبة للإعلانات و الشروحات. ثالثا Lumen5 : وهو يركز على تحويل المقالات والمشاركات إلى فيديوهات و يقدم قوالب جاهزة ومكتبة وسائط كبيرة وتختار بشكل تلقائي الصور والمقاطع الصوتية المناسبة للنص. وهو مناسب أكثر للمسوقين ومنشئي المحتوى الذين يرغبون في إعادة استخدام محتواهم المكتوب في شكل فيديوهات. رابعا CapCut AI : وهي أداة سهلة الاستخدام تتيح تحويل النص إلى فيديو خلال دقائق مع إمكانية إضافة ترجمات أو ملصقات أو موسيقى أو مؤثرات أوصور. وهي تدعم إنشاء فيديوهات قصيرة احترافية تناسب TikTok وInstagram و YouTube. خامسا Renderforest : وهي تتيح تحويل النص إلى فيديو بشكل تلقائي مع إمكانية تخصيص الأسلوب والألوان والموسيقى والتعليق الصوتي.

يمكنك البحث عن فكرة لديك تريد تنفيذها وهذا الأمر سيطعيك حافز ودافع للإستمرار في هذا المشروع . أو يمكنك البحث في المواقع وتطبيق أى فكرة تراها جيدة ومناسبة لك. وبما أنك مشترك في دورة جافاسكريبت فيمكنك أنشاء مشروع الملاحظات بنفسك دون الإستعانة بالدروس . أو يمكنك مشروع قائمة المهام (To-Do List) من حيث إضافة وحذف المهام وتعديلها وتعينها كمكتملة أو قيد التنفيذ وأيضا يمكنك إضافة تاريخ للمهام يجب أن يتم إنجازه فيها مثلا و إنشاء مهام لها أولية عليا عن الأخرين . ويمكنك محاولة إنشاء إشعارات بقرب وقت إنتهاء المهمة وهكذا أى فكرة أخرى تجدها مناسبة أثناء التطوير يمكنك إضافتها للمشروع. يمكنك أيضا محاولة آلة حاسبة بسيطة (Calculator). وإذا كنت درست كيفية التعامل مع API فيمكنك أنشاء مشروع عن أحوال الطقس أو المباريات أو أى مشروع يتطلب إرسال طلبات API وإستقبال البيانات منها. وأيضا أنصحك بمشاهدة مسار "تطبيق دردشة يشبه WhatsApp" حيث سيتطيعك معلومات مفيدة وجيدة وأيضا خبرة لك للتعامل مع ال API وأيضا إدارات الحالات في مشروع React.

الفرق بين أيقونات Font Awesome وأيقونات React يكون في طريقة الاستخدام والأداء وسهولة التخصيص. فإن Font Awesome هي مكتبة أيقونات تستخدم في الويب منذ فترة من الزمن ويمكن استخدامها من خلال CDN أى رابط خارجي أو من خلال تثبيت الحزمة من خلال npm أو كعناصر SVG. وهي سهلة الاستخدام مع HTML و CSS وتحتوي على الكثير جدا من الأيقونات المشهورة والمستخدمة بكثرة . ويمكن تخصيص الحجم واللون و الاتجاه بسهولة باستخدام CSS وهي لا تتطلب أى معرفة ب React. ولكن من عيوبها أنه يجب تحميل كل الحزمة حتى الأيقونات التي لا تستخدمها مما قد تؤثر على أداء الموقع . وهي ليس مكتوبة ب React بل تقوم بتضمينها كملف CSS . وتقوم بإستخدامها هكذا مثلا : <i class="fas fa-home"></i> أما React Icons فهي أيقونات مبنية خصوصا للعمل داخل React وتعمل كمكونات (Components). وهي تعمل كمكونات React وتستطيع استيراد فقط الأيقونات التي تحتاجها وليس جميعها كما كان سابقا في font-awesome . ويمكنك التحكم فيها بسهولة عبر props المكونات. ويمكنك إستخدامها وتخصيها هكذا مثلا: import { FaHome } from 'react-icons/fa' <FaHome size={24} color="blue" /> إذا Font Awesome أنسب لك لو كان مشروعك بسيط أو لا يستخدم React بالكامل أو لو أنك معتاد على إستخدامه. أما React Icons لو كنت تعمل بمشروع React وتحتاج لأداء أفضل وأيضا التعامل مع الأيقونات كمكونات.

نعم بالطبع مع مرور الأشهر والتطبيق كثيرا ستكون لك الخبرة الكافية لبناء وتنفيذ أى مشروع.

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

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

يجب عند تفعيله أن يتم حل المشكلة . يرجى إغلاق النافذة الحالية لديك وجميع النوافذ الأخرى ومن ثم فتح نافذة بحث جديدة ويجب أن يعمل معك. إذا ظلت المشكلة يرجى توضيح صورة من تفعيل javascript لديك .

يجب عليك تنظيم التخصصات بشكل واضح ومنطقي من خلال تقسيم التخصصات إلى فئات رئيسية مثل الطب و الهندسة و التجارة والتكنولوجيا وغيرها مع توفير أيقونات أو صور بصرية توضح وتعبر عن كل فئة. أيضا قم بإستخدام بطاقات معلومات (Cards) من خلال عرض كل تخصص في بطاقة تحتوي على معلومات مفصلة ومختصرة مثل: اسم التخصص. الجامعات التي تقدمه. متوسط درجة القبول. رسوم الجامعات لكل تخصص. نظرة عامة مختصرة عن فرص العمل. أيضا قم بتقديم جدول مقارنة تفاعلي حيث يكون عبارة عن أداة تتيح للطالب اختيار تخصصات مختلفة ومتعددة لعرض مقارنة جنبا إلى جنب لكل تخصص وتشمل الجامعات المتاحة مثلا الرسوم ومدة الدراسة وغيرها . أما بالنسبة إلى البحث فهو أمر ضروري ويجب توفير الفلاتر للطلاب الذين لديهم فكرة واضحة عما يريدون البحق عنه لتتيح لهم التحكم الدقيق في النتائج مثل: الموقع الجغرافي (مثلا المحافظات أو المناطق). نوع الجامعة (حكومية أم خاصة أم أهلية). درجة القبول (الحد الأدنى للتنسيق). الرسوم الدراسية. مدة الدراسة. وغيرها من الفلاتر الأخرى المهمة للطلاب ويفضل جعل الفلاتر مرئية وسهلة الاستخدام مع خيارات واضحة مثل القوائم المنسدلة أو إستخدام checkbox كإختيارات للفلاتر المستخدمة لتضمين أكثر من فلتر معا. وأيضا يفضل أن تضيف خاصية "إعادة ضبط الفلاتر" لتسهيل تجربة المستخدم. أيضا بالنسبة إلى نظام البحث الذكي فيمكنك توفيره لأنه مناسب للطلاب الذين لا يعرفون من أين يبدأون ويمكن أن يعتمد على كلمات مفتاحية مثل "هندسة" أو "طب" مع اقتراحات تلقائية (Auto-suggest) أثناء الكتابة. أما بخصوص عناصر الصفحة الرئيسية فإن الصفحة الرئيسية هي واجهة الموقع ويجب أن تكون جذابة و سهلة الاستخدام وتعكس الهدف الأساسي للموقع لجذب المستخدمين وجعلهم يستخدمون موقعك لفترات طويلة . والعناصر الأساسية تشمل: شعار جيد (Hero Section): فيمكنط توفير صورة أو فيديو قصير يعكس هدف موقعك مثل صور للطلاب بداخل الجامعات. عنوان رئيسي واضح مثل "اكتشف التخصص والجامعة المناسبين لمستقبلك". أيضا توفير شريط بحث بارز ويتيح للطالب البحث السريع عن تخصص أو جامعة. أيضا توفير أقسام رئيسية (Navigation): مثل قائمة تنقل بسيطة تحتوي على التخصصات و الجامعات و نصائح للطلاب مثلا و اتصل بنا وقسم للإستبيان مثلا أو المقترحات . ويفضل جعل القائمة مثبتة (Sticky Navigation) لتسهيل التنقل. أيضا عرض التخصصات الشائعة من خلال قسم يبرز التخصصات الأكثر طلبا مثل الطب و الهندسة و تكنولوجيا المعلومات مع روابط لاستكشاف المزيد من تلك التخصصات لتوفير الوقت على المستخدمين . أيضا توفير قسم الجامعات المميزة من خلال عرض قائمة مختصرة لأفضل الجامعات الحكومية والخاصة مع شعاراتها وروابط لصفحاتها أو موقعها. وأيضا تأكد من التوافق مع الهواتف المحمولةفيجب أن يكون التصميم متجاوب (Responsive) لأن معظم الطلاب سيستخدمون الهواتف وليس الحواسيب وإستخدام خطوط واضحة ومناسبة .