أسامة زيادة

السبب في هذه المشكلة هو طريقة وصولك إلى الصورة ، أنت لم تصل إلى الصورة بشكل صحيح في ملف css لذلك قمت بعمل التعديلات الازمة حتى تستطيع الوصول إلى الصورة . في section الذي له الكلاس main يحتوي بداخله أيضا على إثنين من الوسم div لذلك قمت بإعطاء كل div إلى كلاس معين مثلا title و img-class . هذا في صفحة index .html <section class="main"> <div class="title"> <h1>Welcome, To Khalid World</h1> <p>Here Iam gonna share everything about my life. Books Iam reading, Games Iam Playing, Stories and Events </p> </div> <div class="img-class"> <img src="landing-image.png"> </div> </section> أما في ملف css هذه الطريقة غير صحيحة للوصول إلى الصورة ، كون الصورة في div آخر داخل div الذي له الكلاس main .main img {} لذلك قمت بإعطاء div الذي بداخله الصورة الكلاس img-class حتى أستطيع الوصول للصورة بهذا الشكل .main .img-class img{} لقد قمت بعمل بعض التعديلات هنا في هذه الأقسام في ملف css مختلفة قليلاً يمكنك المقارنة فيها مع ملفك حتى أستطيع التعامل بحرية مع تحريك الصورة . .main{ width: 100%; min-height: 150vh; background-color: #ECECEC; } .title { width:50%; float:left; } .img-class { width:50%; } .main .img-class img{ position: absolute; width: 600px; top:100px; } بخصوص تحريك الصورة يمكنك من الخاصية top تحديد الموضع المناسب لك

تعتبر الخوارزميات وقواعد البيانات غير مهمة لمن يريد تعلم واجهات أمامية لذلك لن تلزمه في دورة تطوير واجهات المستخدم .

لا تقلق مشكلتك تعتبر مشكلة طبيعية لدى كثير من المصممين ، مع مزيد من التدريب بـ إذن الله يمكنك التغلب عليها ، لكن بما أنك أردت الاستمرار في تعلم مسار Back end فحاول تطوير نفسك به الأن.

بالطبع سوف تعمل كمستقل في مجال Back end وهناك كثير من الأعمال والمشاريع تطلب خصيصاً للمتخصصين في Back end ، أما عن تعاملك مع css أتوقع أنك لن تحتاج التعامل معها في الأمور المتعلقة في Back end ، تحتاج css كثيراً في الأمور المعلقة في Front End وما يتعلق في تصميم المواقع ككل ، لكن كنصيحة لك وجود خلفية لو بسيطة في مجال Front End يكون جيد لك لأنه ربما تحتاج في أحد المشاريع التعامل مع Front End ، يمكنك العمل جاهداً في تطوير نفسك في مجال Back end ، يوجد دورات في الأكاديمية يمكنك الاطلاع عليها وترى الدورة المناسبة لك .

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

برمجة موقع متعدد اللغات يعتمد على جزئيتين أساسية وهي : اتجاه اللغة من اليمين الى اليسار او العكس. هذه الجزئية مرتبطة بطريقة هيكلة الموقع وتعتمد على لغتي HTML - CSS بشكل أساسي، فإذا كانت اللغة الافتراضية للموقع اتجاهها من اليسار الى اليمين فيتم إنشاء ملف css جديد بنفس محتويات ملف css الافتراضي ويحذف منه الخصائص المشتركة في الاتجاهين مع تغيير قيم بعض الخصائص من اليمين الى اليسار او العكس ومن أشهر الخصائص التي يتم تغيير قيمها في الغالب هي : float - text-align - margin - text-decoration ترجمة الكلمات والجمل. هذه الجزئية متعلقة بترجمة الكلمات والجمل فيتم استخدام معها عدة طرق مثل المصفوفات ويمكنك استخدام PHP تستطيع من خلالها عمل موقع بعدّة لغات بطريقة سهلة وفعالة أو مثلاً استخدام إطار عمل مثل Laravel يساعدك في عمل ترجمة للغات ، حيث تعتبر PHP , Laravel تقنيات خاصة بـ Back-End و يجب عليك تعلمهم جيداً لتستطيع عمل ذلك .

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

الدوال التي تستخدميها تتعلق بمكتبة jquery لذلك عليك تضمين مكتبة jquery ، يمكنك تضمينها بهذا الشكل <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> ملاحظة يجب وضعه قبل تضمين Bootstrap ، هكذا <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script src="js/index.js"></script> وبعدها قومي بوضع الخلفية المناسبة ، أنتِ هنا تستخدمين كلاس noTransparrent قومي باستخدام الدالة بهذا الشكل وأتوقع سوف تنجح القائمة لديكِ $(window).scroll(function () { if ($(window).scrollTop() > 400) { $("#navBar").css("background-color","black"); } else { $("#navBar").css("background-color","rgba(16, 22, 54, 0.2)"); } });

لحل المشكلة عليك حذف هذه الأسطر البرمجية <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"> <i class="fa fa-bars" aria-hidden="true"></i> </span> </button> وإضافة الـ button الصحيح الذي سوف يعمل مع القائمة <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> وبعدها سوف تعمل القائمة ، ولكن سوف تحتاجين إلى إعادة تنسيق الـ button فهو يظهر بحجم كبير جداً ، يجب عليك التعامل مع هذه التنسيقات حتى يصبح الـ button بشكل مناسب button{ border:none; color:white; padding:15px 32px; text-align:center; text-decoration:none; display:imline-block; font-size:47px; margin:10px 8px; cursor:pointer; background-color:#FB4934; width: 364px; // تحتاج للحذف height: 249px; // تحتاج للحذف } أيضاً باستخدام CSS يمكنك من ترتيب موضوعه في الشاشة وتنسيقه بشكل جميل

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

سوف تحتاج إلى تعطيل الملف التالي .htaccess لحل المشكلة لأنه أحياناً يتسبب في بعض مشاكل قم بالدخول إلى المجلد الذي قمت بتثبيت الورد بريس فيه ، ثم الذهاب إلى المجلد wp-content ، ثم الملف الذي يحتوي على الإضافات plugins ، من ثم الملف التالي akismet وسوف تجد الملف .htaccess حسب هذا المسار في إصدار وردبريس 5.8.2 wordpress\wp-content\plugins\akismet\.htaccess من بعدها قم بتغير اسم الملف .htaccess إلى أي اسم مثلاً .htaccess-stop

لقد قمت بإضافة نص على أحد الصور بالشكل التالي:- أولاً قمت بإضافة وسم HTML جديد لإضافة الوصف <div class="slider-item s1"> <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Nature and sunrise"> <p class="text">Hello World</p> </div> ثم ثانياً أعطيت الكلاس text التنسيقات في CSS حتى يتمكن من الظهور فوق الصورة . .text { color: black; font-size: 20px; position: absolute; bottom: 5px; width: 100%; text-align: center; } يمكنك التحكم في موضع النص كما تريد. هذا ملف لتطلع عليه index.html

يمكنك ذلك عبر استخدام الأمر التالي npm install --save the-noun-project ثم في ملف webpack.config.js يمكنك استخدامها بهذا الشكل var NounProject = require('the-noun-project'), nounProject = new NounProject({ key: 'foo', secret: 'bar' }); يمكنك الاطلاع أكثر من هنا حول كيفية استخدامها داخل الملفات .

أقترح عليك استخدام موقع GTmetrix ، يقدم لك الموقع تقرير وتحليل كامل حول الموقع ، مثلاً مدة فتح الصفحة وحجم الصفحات وعدة مميزات كثيرة يمكنك تصفحها في الموقع ومعرفتها لزيادة سرعة الموقع . هنا مثال من الموقع لملفات الجافا سكربت يمكنك الاطلاع عليها من waterfall لعرض جميع الملفات المستخدمة والغير مستخدمة .

مفهوم "Front end" يتضمن كلا الجانبين من مواقع الويب أو تطبيقات الويب التي يمكن للمستخدم التفاعل معها من خلال النص والصور والألوان والأزرار والجداول والتنقل بين الصفحات . أما مفهوم "Front end developer" يتضمن الشخص المسؤول عن تصميم مواقع الويب من خلال تطبيق مبادئ التصميم البصري والتفاعلي من خلال استخدام لغات برمجية مثل HTML و CSS و JavaSctipt . => مهام Front end developer تصميم واجهة المستخدم "‘User Interface" تحسين عملية التنقل بين صفحات الموقع بناء الحلول التي التناسب العملاء لتسهيل عملية التصفح في الموقع التأكد من معاير التصميم بما يتناسب مع العلامة التجارية للمؤسسة كذلك كتابة السطور البرمجية باستخدام HTML , CSS , JavaSctipt. مساعدة فريق التطوير في إطلاح الأخطاء وتقديم الحلول الاطلاع على أحدث تقنيات الويب يمكنك الاطلاع على هذا المقال لفهم مصمم الويب بشكل جيد

عالم البرمجة عالم كبير وواسع لذلك يرجى تحديد هدفك من تعلم البرمجة مثلاً هناك لغات برمجية لتطوير مواقع الويب ولغات برمجية لتطوير تطبيقات الجوال وأخرى لتطوير تطبيقات سطح المكتب ، وهناك لغات برمجية كثيراً ، يجب أن تدرك هدفك من تعلم البرمجة ، حتى لا تسطيع أن تقلق من البرمجة ، يجب عليك تعلمها وفهمها جيداً ومواكبة التطور الدائم للغات البرمجة . أنا لا أعلم مجالك وما لغة البرمجة الذي تريد تعلمها ، لكن يوجد في الأكاديمية عدة دورات برمجية مختلفة ، يمكنك الاطلاع عليها ، الدورات مفيدة جداً وسوف تساعدك خلال مرحلة تعلمك البرمجة . دورة علوم الحاسوب دورة تطوير واجهات المستخدم دورة تطوير التطبيقات باستخدام لغة JavaScript دورة تطوير تطبيقات الويب باستخدام لغة PHP دورة تطوير تطبيقات الجوال باستخدام تقنيات الويب دورة تطوير تطبيقات الويب باستخدام لغة Ruby

أنماط التصميم: تعتبر نماذج لحل مشكلات متكررة في تصميم البرمجيات ،هي عبارة عن طريقة لحل مشكلات المعتادة أثناء تصميم البرمجيات بحيث يمكنك استعمال الحلول في حالات مختلفة وهي ليست كود برمجي . تعتبر أنماط التصميم سهلة التعديل وسهلة الاختبار ومن أشهرها MVC و MVVM و Singleton وغيرها من أنماط التصميم . هناك أنواع متعلقة بإنشاء الكلاس نمط Singleton نمط Builder نمط Prototype نمط Factory Method نمط Abstract Factory أنماط متعلقة بشكل الكلاس وكيفية عمله نمط Adapter نمط Composite نمط Facade نمط Bridge نمط Decorator نمط Proxy نمط Flyweight أنماط متعلقة بسلوك الكائنات : هذه الأنماط تتعلق بكيفية التواصل بين الكائنات بشكل منفصل نمط Mediator نمط Observer نمط Null Object نمط Memento نمط State نمط Visitor وهناك أنماط أخرى في هذا النمط MVC Model : يحتوى على البيانات . view : عرض المعلومات للمستخدم. controller : يعالج البيانات التي تأتي من المستخدم.

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

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

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

هل يمكنكِ إرفاق ملف المشروع لمساعدتك ولرؤية الأكواد بشكل أفضل ؟

يمكنك فعل ذلك باستخدام مكتبة font awesome من خلال جلب الرابط cdn الخاص بها وتضمينه بهذا الشكل <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> وكتابة الأيقونات بالشكل التالي <body> <i class="fab fa-facebook-square"></i> <i class="fab fa-linkedin"></i> <i class="fab fa-twitter-square"></i> </body> وهذا مرفق لرؤية كيفية ظهورها icon.html

لا مشكلة عدلته لك كما كان باضافة تنسيق padding-top إلى مجموعة تنسيقات section . fokir.zip

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

وعليكم السلام لقد قمت بإنشاء div آخر وأعطيته الكلاس overlay داخل الـ div الذي يحتوي على كلاس home وهو الذي يحتوي على جميع العناصر في الصفحة وأعطيته التنسيقات التالية في ملف التنسيقات style.css ، أيضاً يمكنك التغير في درجة اللون كما تريد. .overlay{ background:rgba(2,2,2,0.8); min-height:100%; } وهكذا أصبحت لديك الخلفية ، يبدو أنك متعلم جديد في تصميم مواقع الويب ، حاول دائماً إعطاء أسماء إلى الكلاسات بأسماء منطقية أكثر تدل على القسم في الصفحة ، وحاول جعل العناصر مرتبة بشكل أفضل يسهل قراءته وفهمه. fokir.zip