Mustafa Suleiman

وما الذي تنوي التطبيق عليه؟ هل HTML, CSS, JS، أم جافاسكريبت على وجه الخصوص؟، أم HTML, CSS فقط؟ أم مشروع React؟

ما المقصود بمهارة؟ تقصد فكرة لمشروع أو تمرين للتطبيق عليه؟

Dedication أو الإهداء قسم شخصي وعاطفي بحت، يجب توجيهه إلى أشخاص لهم مكانة خاصة في حياتك الشخصية أو حتى شخصيات ملهمة، والذين قدموا لك الدعم المعنوي والإلهام بشكل عام، وليس بالضرورة دعم مباشر للمشروع نفسه. من خلال جملة أو جملتين للتعبير عن مشاعر شخصية، وذلك في بداية التقرير، قبل صفحة الشكر والتقدير أو حتى قبل الملخص، وليكن مثلاً، إلى والديّ، لدعمهما اللامحدود وحبهما الذي لا يقدر بثمن. والـ Acknowledgements هو شكر وتقدير مهني وأكاديمي أكثر، للتعبير عن الامتنان للأفراد والمؤسسات الذين قدموا مساعدة ودعم مباشر وملموس لإنجاز المشروع. وهو أكثر تفصيلاً من الإهداء، ويوضح ويذكر مساهمات محددة واللهجة تكون رسمية ومهنية، وذلك بعد الإهداء إن وجد وقبل جدول المحتويات أو الملخص. مثلاً، أتقدم بجزيل الشكر والتقدير إلى مشرفي الدكتور/ فلان الفلاني، على توجيهاته القيمة ومتابعته الحثيثة طوال فترة إعداد المشروع، كما أود أن أشكر الزميل/ فلان، لمساعدته في جمع البيانات الأولية، والشكر موصول لشركة ما لتوفيرها بيئة الاختبار اللازمة، وهكذا تستطيع المتابعة. والـ System Architecture ستوضح من خلالها المكونات الرئيسية للنظام، وكيف تتفاعل مع بعضها البعض، وما هي المسؤوليات والوظائف لكل مكون، لتوفير شرح واضح وعالي المستوى لكيفية عمل النظام ككل. أي اذكر المكونات الرئيسية التي يتألف منها النظام، فكر فيها كأنها أقسام أو وحدات رئيسية لها وظائف محددة، مثلاً يتكون نظام إدارة الطلبات من ثلاثة مكونات رئيسية: واجهة مستخدم ويب Web UI، وواجهة برمجة تطبيقات خلفية Backend API، وقاعدة بيانات Database، وهكذا. ثم استخدم مخطط Diagram وهو الجزء الأهم فالرسم التوضيحي أفضل طريقة لتوضيح المعمارية، وأبسط نوع هو Block Diagram. ثم لكل مكون رئيسي ذكرته في المخطط، قدم وصف موجز لوظيفته الأساسية ومسؤولياته، وبعد ذلك وضح التفاعلات وصف كيف تتفاعل المكونات مع بعضها البعض. ثم اذكر بإيجاز التقنيات الرئيسية سواء لغات البرمجة، الأطر، قواعد البيانات والأدوات المستخدمة في كل مكون.

الإصدار 4

عليك تعلم tailwind

بالأصح ذلك إطار عمل قائم على لغة CSS، ويوفر هيكلية ومنهجية محددة لتصميم الواجهات باستخدام كلاسات Utility-First، أي أنه يفرض طريقة معينة للتعامل مع التصميم من خلال الكلاسات الجاهزة، باستخدامها مباشرة لتصميم واجهات المستخدم دون الحاجة إلى كتابة CSS مخصص من الصفر، فبدلاً من تقديم مكونات جاهزة مثل Bootstrap، يوفر Tailwind كلاسات صغيرة ومحددة مثل text-center، bg-blue-500، p-4 تستطيع دمجها مع بعضها البعض لإنشاء تصاميم مخصصة بسرعة. ستجد تفصيل هنا:

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

أرفق ملف HTML و CSS لتفقد ما المشكلة، فبدون رؤية اللكود لن نعرف أين المشكلة، عامًة من المفترض أن يكون كالتالي كمثال: <div class="header" id="myHeader"> <h2>My Header</h2> </div> CSS: .header { position: fixed; top: 0; width: 100%; padding: 10px 16px; background: #555; color: #f1f1f1; }

أنت حددت ذلك لعنصر الذي به كلاس container الصحيح هو تحديد ذلك للـ nav أو header حسب هيكل HTML لديك.

لو أصبحت شفافة فسيظهر لون أبيض خلفها وهو اللون الإفتراضي، والشكل لن يكون جيد، ما تحتاجه هو تغيير لون الخط إلى اللون الأبيض، لكي يكون هناك تباين بين لون الخط والخلفية ويظهر بشكل جيد وواضح. كحل آخر تستطيع إضافة خلفية شبه شفافة خلف الخط من خلال خاصية backdrop-filter وستحصل على تأثير يسمى frosted glass، فلو كود HTML كالتالي: <div class="image-container"> <div class="text-content-area"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dolore minus architecto porro vel quod ea odio voluptas aperiam nam doloribus id modi, ?corrupti est mollitia magni commodi doloremque hic.</p> <button class="action-button">أبدأ الآن</button> </div> </div> سنكتب التنسيق التالي: .text-content-area { background-color: rgba(255, 255, 255, 0.15); backdrop-filter: blur(8px) brightness(110%); padding: 20px 30px; border-radius: 10px; max-width: 600px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } .text-content-area p { color: black; font-size: 1.1em; line-height: 1.6; margin-bottom: 20px; }

أرجو الضغط على CTRL + 0 وسيتم ضبط مستوى التقريب zoom للوضع الطبيعي، وتستطيع التقريب من خلال CTRL + أو خفضه من خلال CTRL - أي علامة الطرح في الكيبورد التي بلوحة الأرقام على اليمين.

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

لم يتم التطرق للتعامل مع التواريخ في مسار أساسيات PHP، تلك من المفاهيم التي ستحتاج إلى تعلمها لاحقًا عند الحاجة إليها في المشاريع، وعامًة الأمر يتم من خلال كائن DateTime والدوال التي يوفرها. وفي لارافل، التعامل مع التواريخ يختلف قليلاً عن PHP لكونه يوفر أدوات ومكتبات تُسهل العملية، من خلال مكتبة Carbon التي تأتي مدمجة معه، وبالطبع يظل المبدأ الأساسي للتعامل مع التواريخ مبنيًا على PHP من خلال كائن DateTime، ولكنه يضيف طبقة من التبسيط. ستجد درس هنا يوضح لك كيفية التعامل مع التواريخ: وفي حال واجهت صعوبة في استيعاب أمر ما تستطيع السؤال.

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

بدون توضيح لما تريده ستحصل على إجابة عامة، ما هو التخصص البرمجي الذي اخترته هل هو Full-Stack؟ وأيضًا طالما اخترت دورة إدارة تطوير المنتجات فأنت مُهتم بالجانب الإداري للمشاريع والتعرف على تطوير المشاريع من منظور الـ Business وليس من خلال الكود فقط، وذلك من شأنه إفادتك لتطوير مشاريع تخدم الواقع العملي سواء من كنت مبرمج أو قائد لفريق عمل تقني. في الفترة القادمة لمدة عام ما الذي تنوي فعله؟

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

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

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

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

لا يتوفر captions للدروس أو مُلخصات، لكن تستطيع تشغيلها والاستماع إليها في الخلفية بالنسبة للدروس النظرية. لكن تستطيع الإعتماد على المقالات المتاحة في أكاديمية حسوب وأيضًا المراجع الموجودة في موسوعة حسوب لمختلف اللغات. إذا أردت ملخص للغة أو إطار معين أو مكتبة تستطيع البحث عن cheat sheet ثم اسم اللغة مثلاُ وليكن js إذا ستبحث عن cheat sheet for js.

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

ذلك تم شرحه في دورة جافاسكريبت بالفعل، ستجده في مسار تطبيق دردشة يشبه WhatsApp، حيث سيتم التطوير من خلال React و Node.js لذا يجب إتمام المسارات التي قبله لتتمكن من دراسة ذلك المسار، وتستطيع تخطي مسار تطوير تطبيق جوال باستخدام React Native لكونه خاص بالهواتف وحاليًا أنت تريد تطوير تطبيق ويب للمتصفح.

تقصد تطبيق تواصل إجتماعي مثل فيسبوك؟ أم إضافة ميزة الدردشة بين مستخدمي الموقع من خلال غرف؟

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

ما تريده يُسمى animation on scroll أو Scroll-triggered Animations الأسهل لك استخدام مكتبة GSAP، تستطيع البحث على اليوتيوب عن GSAP ScrollTrigger، وعامًة إليك مثال، ستحتاج أولاً إلى تضمين المكتبة عبر روابط CDN: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script> ولنقم بالتطبيق على مثال بسيط: <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GSAP Scroll Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div class="logo">Charlotte <span>Smith</span></div> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Skills</a></li> <li><a href="#">Service</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <section class="hero"> <div class="hero-text"> <p class="intro-line">Hey I'm</p> <h1 class="name-line">Charlotte Smith</h1> <p class="tagline">A Creative Web Developer & Designer.</p> </div> <div class="hero-image-container"> <div class="halo halo1"></div> <div class="halo halo2"></div> <div class="halo halo3"></div> <img src="https://avatar.iran.liara.run/public/73" alt="Charlotte Smith" class="profile-image"> </div> </section> <section class="spacer" style="height: 100vh; background: #1a1a1a; display: flex; align-items: center; justify-content: center; color: white; font-size: 2em;"> Scroll down to see effects </section> <section class="spacer" style="height: 100vh; background: #2a2a2a; display: flex; align-items: center; justify-content: center; color: white; font-size: 2em;"> More Content Here </section> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script> <script src="script.js"></script> </body> </html> وكود CSS: body { margin: 0; font-family: sans-serif; background-color: #0a0a0a; color: #f0f0f0; overflow-x: hidden; /* لمنع التمرير الأفقي غير المرغوب فيه */ } header { position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 50px; box-sizing: border-box; z-index: 100; background: rgba(10, 10, 10, 0.5); backdrop-filter: blur(5px); } .logo { font-size: 1.8em; font-weight: bold; } .logo span { color: #e60000; } nav ul { list-style: none; padding: 0; margin: 0; display: flex; } nav ul li { margin-left: 30px; } nav ul li a { text-decoration: none; color: #f0f0f0; font-size: 1em; transition: color 0.3s ease; } nav ul li a:hover { color: #e60000; } .hero { min-height: 100vh; display: flex; align-items: center; justify-content: space-around; padding: 100px 50px 50px; box-sizing: border-box; position: relative; overflow: hidden; } .hero-text { flex-basis: 50%; padding-right: 50px; } .hero-text .intro-line { font-size: 2em; color: #aaa; margin-bottom: 0; /* سيتم تحريكه بواسطة GSAP */ opacity: 0; transform: translateY(30px); } .hero-text .name-line { font-size: 4em; font-weight: bold; color: #fff; margin-top: 0; margin-bottom: 10px; /* سيتم تحريكه بواسطة GSAP */ opacity: 0; transform: translateY(30px); } .hero-text .tagline { font-size: 1.5em; color: #ccc; /* سيتم تحريكه بواسطة GSAP */ opacity: 0; transform: translateY(30px); } .hero-image-container { flex-basis: 40%; position: relative; display: flex; justify-content: center; align-items: center; } .profile-image { max-width: 70%; height: auto; border-radius: 50%; z-index: 5; position: relative; /* سيتم تحريكه بواسطة GSAP */ opacity: 0; transform: scale(0.8) translateX(50px); } .halo { position: absolute; border-radius: 50%; background-color: rgba(220, 0, 0, 0.2); opacity: 0; transform: scale(0.5); z-index: 1; } .halo1 { width: 100%; padding-bottom: 100%; max-width: 400px; max-height: 400px; z-index: 3; background-color: rgba(220, 0, 0, 0.15); } .halo2 { width: 120%; padding-bottom: 120%; max-width: 480px; max-height: 480px; z-index: 2; background-color: rgba(220, 0, 0, 0.1); } .halo3 { width: 140%; padding-bottom: 140%; max-width: 560px; max-height: 560px; z-index: 1; background-color: rgba(220, 0, 0, 0.05); } /* إخفاء العناصر قبل تحميل GSAP للتحكم بظهورها */ .logo, nav ul li { opacity: 0; } ثم كتابة كود جافاسكريبت باستخدام GSAP وقمت بإضافة تعليقات لشرح ما يحدث: // تسجيل إضافة ScrollTrigger gsap.registerPlugin(ScrollTrigger); // 1. تحريكات عند تحميل الصفحة (بدون ScrollTrigger مبدئياً) // ----------------------------------------------------- const tlOnLoad = gsap.timeline({ defaults: { ease: "power2.out" } }); tlOnLoad .from(".logo", { opacity: 0, x: -30, duration: 0.8, delay: 0.2 }) .from("nav ul li", { opacity: 0, y: -20, stagger: 0.1, duration: 0.5 }, "-=0.5") // يبدأ مع اللوجو تقريباً .to(".hero-text .intro-line", { opacity: 1, y: 0, duration: 0.8, delay: 0.3 }) .to(".hero-text .name-line", { opacity: 1, y: 0, duration: 0.8 }, "-=0.5") // يبدأ بعد النص التمهيدي بقليل .to(".hero-text .tagline", { opacity: 1, y: 0, duration: 0.8 }, "-=0.6") .to(".profile-image", { opacity: 1, scale: 1, x: 0, duration: 1 }, "-=0.8") // الصورة تظهر .to(".halo", { // الهالات تظهر بشكل متتالي opacity: 1, scale: 1, duration: 1.2, stagger: 0.2, // تأخير بين كل هالة ease: "elastic.out(1, 0.5)" }, "-=0.7"); // 2. تحريكات عند التمرير (ScrollTrigger) // -------------------------------------- // مثال: تأثير parallax على الصورة عند التمرير gsap.to(".profile-image", { yPercent: -30, // تحريك الصورة لأعلى بنسبة 30% من ارتفاعها ease: "none", scrollTrigger: { trigger: ".hero", // العنصر الذي يبدأ عنده التأثير start: "top top", // متى يبدأ (عندما يصل أعلى الـ .hero إلى أعلى الـ viewport) end: "bottom top", // متى ينتهي (عندما يصل أسفل الـ .hero إلى أعلى الـ viewport) scrub: true, // يجعل الحركة متزامنة مع التمرير (true أو رقم لـ "تنعيم" الحركة) // markers: true // لإظهار علامات تساعد في تحديد نقاط البدء والنهاية (للتطوير فقط) } }); // مثال: تأثير parallax على الهالات (بسرعات مختلفة) gsap.utils.toArray(".halo").forEach((halo, i) => { gsap.to(halo, { yPercent: -20 * (i + 1), // كل هالة تتحرك أسرع قليلاً scale: 1.1 + (i * 0.1), // تكبير قليل مع التمرير opacity: 0.5 - (i * 0.1), // تتلاشى قليلاً مع التمرير ease: "none", scrollTrigger: { trigger: ".hero", start: "top top", end: "bottom top", scrub: 1.5, // تنعيم أكثر // markers: {startColor: "blue", endColor: "blue", indent: 40 * i} } }); }); // مثال: تلاشي نصوص الـ hero عند التمرير لأسفل gsap.to(".hero-text", { opacity: 0, yPercent: -50, // تحريك النص لأعلى ease: "power1.in", scrollTrigger: { trigger: ".hero", start: "center center", // عندما يصل منتصف الـ .hero إلى منتصف الـ viewport end: "bottom center", // عندما يصل أسفل الـ .hero إلى منتصف الـ viewport scrub: 1, // markers: {startColor: "green", endColor: "green"} } }); // مثال: تغيير خلفية الهيدر عند التمرير (إذا لم يكن fixed بالفعل) // أو تثبيت الهيدر بعد تجاوز قسم معين ScrollTrigger.create({ trigger: ".hero", // يمكن أن يكون body أو أي عنصر آخر start: "bottom top", // عندما يتجاوز أسفل قسم الـ hero أعلى النافذة toggleClass: { targets: "header", className: "scrolled" }, // أضف كلاس CSS // markers: true, onEnter: () => console.log("Header scrolled class added"), onLeaveBack: () => console.log("Header scrolled class removed") });