أسامة زيادة

في حال كنت متمرس من التقنيات HTML , CSS , JS وأشهر المكتبات التي تستخدم في تطوير المواقع مثل Bootstrap , SCSS . فيمكنك أن تصبح مصمم واجهات أمامية للمواقع (Front-End) ويمكنك أن تجد مشاريع على مستقل لتطوير الواجهات الأمامية ، أو تقوم بإضافة خدمة على موقع خمسات توضح ما تستطيع القيام به ، وفي حال أردت أن تعمل في شركة أو موظف عن بعد ، يفضل أن تكون لديك خبرة أوسع في مجال الويب فبعض الشركات تبحث عن الأكفاء ولهم القدرة على إنجاز المهام المطلوبة منهم بكفاءة عالية ، أيضاً حتى تكون السيرة الذاتية قوية جداً لديك واحتمال قبولك في الوظيفة عالي ، لكن هذا لا يغني أن يمكنك أن يتم توظيف بشكل عقد مع شركة ما في تطوير الواجهات الأمامية فقط . الأن أصبحت بايثون تستخدم مع الويب في تطوير المواقع (Back-End) يمكنك أن تعمل على تطوير نفسك في هذا المجال ، وتصبح لديك المهارتين . 
كما يوجد في الأكاديمية دورة تطوير التطبيقات باستخدام لغة Python ، يمكنك الالتحاق بالدورة لتطوير مهاراتك في تطوير التطبيقات باستخدام Python . 
أما بخصوص الأنيميشن في الجافا سكربت ، نادراً لتجد شرح كامل للأنيميشين باستخدام جافاسكربت ، لكن يمكن البحث عن أنيميشين معين على اليوتيوب مثلاً وسوف تجد شروحات تساعدك أو أمثلة مقاربة لما تريده  . 

كما تلاحظِ يوجد فاصلة منقوطة بجانب الرقم 768px وهذا هو سبب الخطأ أرجو منك إزالة الفاصلة المنقوطة وقومي بالتجربة على المتصفح وأخبريني بالنتيجة . 

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

الخاصية flex تُحدِّد كيف سيتمدد أو يتقلص أحد عناصر flex لكي يملأ المساحة المتوافرة في حاوية flex. هذه الخاصية المختصرة تضبط الخاصيات flex-grow و flex-shrink و flex-basis.
القيمة الابتدائية 
flex-grow: 0 flex-shrink: 1 flex-basis: auto الخاصية flex-grow تُحدِّد معامل التمدد لأحد عناصر flex، وهي تُحدِّد مقدار المساحة التي يجب أن يأخذها العنصر داخل حاوية flex.
مثال على توضيح استخدام  الخاصية 
شيفرة HTML 
<div id="content"> <div class="box" style="background-color: salmon;">A</div> <div class="box" style="background-color: lightblue;">B</div> <div class="box" style="background-color: gold;">C</div> <div class="box1" style="background-color: crimson;">D</div> <div class="box1" style="background-color: lightgreen;">E</div> <div class="box" style="background-color: cadetblue;">F</div> </div> شيفرة CSS 
#content { display: flex; } div { padding: 0.25em; } .box { flex-grow: 1; border: 3px solid rgba(0,0,0,.2); } .box1 { flex-grow: 2; border: 3px solid rgba(0,0,0,.2); } الخاصية flex-basis تُحدِّد القياس الرئيسي (main size) لأحد عناصر flex، وهذه الخاصية تضبط قياس صندوق المحتوى (content box) إلا إذا حُدِّدَ غير ذلك باستخدام الخاصية box-sizing.
هنا مثال لتوضيح الخاصية بشكل دقيق .

الخاصية width تُحدِّد عرض أحد العناصر، وتستخدم هذه الخاصية افتراضيًا لتحديد عرض منطقة المحتوى (content area)، لكن إن كانت الخاصية box-sizing مضبوطة إلى border-box فستُحدِّد عرض العنصر بدءًا من الحافة الخارجية للإطار.
يمكنك أيضاً الإطلاع على المزيد على موسوعة حسوب من هنا : 
الخاصية flex-basis .
الخاصية flex-grow .
الخاصية width .

وعليكم السلام ورحمة الله وبركاته 
هل يمكنك تجربة إعطاء صورة الكرة طول وعرض متساويان بهذا الشكل ، لتظهر بشكل مناسب أكثر مما عليه . 
<img src="/project_1/images/football.png" alt="" width="30" height="30" أيضا يمكنك عمل مسافة صغيرة بين الصورة و والنص Bootstrap . 

في حال كنت لم تفهم بعض النقاط وظهرت لديك مشاكل ولا تعرف حلها يمكنك الاستفسار عنها بالتعليقات أسفل كل درس والمدربون من خلال كتابة المشكلة وسوف يساعدوك على فهمها وحل المشاكل لديك . 

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

في حال كان لديك في الشاشات الكبيرة ثلاث عناصر ولها التنسيقات المناسبة ومعروضة بشكل مناسب على الصفحة ، وفي عرض الشاشات الصغيرة تريد إخفاء العنصر الثالث يمكنك إعطائه خاصية لإخفائه في الشاشات الصغيرة وترتيب التنسيقات للعنصرين الأول والثاني . 
هنا مثال لتوضيح الطريقة لديك . في حال كان لديك أربع عناصر وأردت إخفاء عنصر ما في الشاشات الصغيرة يمكنك إعطائه الخاصية display: none; أو visibility: hidden; بهذا الشكل . 
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>aa</title> <style type="text/css"> .box-1{width: 50px; height: 50px; background-color: red;} .box-2{width: 50px; height: 50px; background-color: green; } .box-3{width: 50px; height: 50px; background-color: gray;} .box-4{width: 50px; height: 50px; background-color: yellow;} @media (max-width: 600px) { .box-4{width: 50px; height: 50px; background-color: yellow; visibility: hidden; } .box-3{width: 50px; height: 50px; background-color: gray; display: none;} } </style> </head> <body> <section> <div class="box-1"></div> <div class="box-2"></div> <div class="box-3"></div> <div class="box-4"></div> </section> </body> </html>  

القاعدة ‎@keyframes في CSS تتحكم بالخطوات البينية (intermediate steps) ضمن سلسلة حركات CSS عبر تعريف أنماط للإطارات المفتاحية (keyframes)، مما يعطي تحكمًا كبيرًا في أنماط العنصر في الخطوات البينية بالمقارنة مع الانتقالات transition. 
@keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } يجب أن يكون لكل قاعدة ‎@keyframes سلسلة من مُحدِّدات الإطارات (keyframe selectors)، التي تُحدِّد النسبة المئوية التي سيقع عندها الإطار المفتاحي. لاحظ أنَّ بالإمكان ذكر النسب المئوية بأي ترتيب نشاء، وستُستخدَم حسب ترتيب وقوعها (وليس تعريفها).
أيضاً يمكنك الإطلاع على المزيد من هنا على موسوعة حسوب  

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

ممتاز لقد كانت البداية موفقة جداً ، قمت بعمل التالي حسب ما فهمته من التمرين لديك أولاً أضفت كلاسات جديدة مع كلاس main كما هو موضح 
<body> <div class="father"> <div class="full-width"> FULL WIDTH </div> <div class="clear"></div> <div class="main main-3"> 1/3 </div> <div class="main main-3"> 1/3 </div> <div class="main main-3"> 1/3 </div> <div class="main main-2"> 1/2 </div> <div class="main main-2"> 1/2 </div> <div class="main main-4"> 1/4 </div> <div class="main main-4"> 1/4 </div> <div class="main main-4"> 1/4 </div> <div class="main main-4"> 1/4 </div> </div> </body> ثم قمت بإعطاء تنسيقات عرض مناسبة حتى تظهر مثل الصورة 
.main{ background-color: rgb(202, 202, 202); font-weight: 300 ; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; border-radius: 5px ; text-align: center ; height: 100px ; font-size: 50px ; float: left ; margin-top: 10px ; padding-top: 15px; padding-bottom: 15px; margin-left: 15px; } .main-3 {width: 250px;} .main-2 {width: 385px;} .main-4 {width: 185px;} يمكنك تجربة الشيفرة وإخباري بالنتيجة 

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

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

هل يمكنك وضع الأكواد البرمجية التي تتوقع بها المشكلة ، حتى أستطيع مساعدتك 

المشكلة لديك في مكان الفاصلة المنقوطة في ملف style.css كما تلاحظ في ليست بعد نهاية التنسيق بل بعد القوس ، في التنسيقات المعطى  
.projects .content { margin-top: 30px}; // هنا .content .project-card { background-color: aliceblue; border: solid 1px white; min-height: 14em; width: 23em; } يجب عليك إصلاحها لتالي 
.projects .content { margin-top: 30px; } .content .project-card { background-color: aliceblue; border: solid 1px white; min-height: 14em; width: 23em; }  

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

صحيح هناك قاعدة بيانات واحدة ، ويتم الربط من خلال restful api ويكون هذا restful api مبرمج باستخدام لغات back end مثل php , python, nodejs و من ثم تكون البيانات المرجعة من api أما json , xml , و لكن الأكثر شعبية هو إرجاع البيانات بصيغة json و في لغات البرمجة المستخدمة في برمجة التطبيقات مثل Dart, Java, cordova, swift , ionic هناك مكتبات تتواصل مع apis و تتعامل مع البيانات المرجعة بصيغة json. 

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

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

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

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

المشكلة لديك في ترتيب الأكواد التالية 
<tr> <td rowspan="2">Monsters</td> <td rowspan="2"><img src="https://via.placeholder.com/40/000"></td> <td rowspan="2">Mohamed Hany</td> <td rowspan="2">m@nn.sa</td> <td rowspan="2">&reg;</td> <td rowspan="2"><a href="#">Profile</td> </tr> لقد عالجت لك المشكلة في وضع أكواد الصف الثاني داخل  وسم tbody آخر ليظهر بالشكل المطلوب تنفيذه ، بهذا الشكل 
<tbody> <tr> <td rowspan="2">Monsters</td> <td rowspan="2"><img src="https://via.placeholder.com/40/000"></td> <td rowspan="2">Mohamed Hany</td> <td rowspan="2">m@nn.sa</td> <td rowspan="2">&reg;</td> <td rowspan="2"><a href="#">Profile</td> </tr> </tbody> حاول دائماً ترتيب الأكواد ليسهل عليك فهم المشكلة ، يمكنك الاطلاع على النتيجة أرفقت لك الملف بعد التعديل index.html .

في إصدار webpack 5.0 يمكن التعامل مع أداة file-loader, url-loader, raw-loader بصورة طبيعية بدون تثبيتها. 

سبب مشكلة ظهور واختفاء القائمة هو أنك قمت بإعطاء كلاس show  تنسيق يجعل من القائمة تختفي position: absolute
.show { position: absolute; left: 0; bottom: 0; z-index: -1; } فقط قم بحذف position: absolute; وسوف تبقى القائمة ظاهرة ولن تختفي لن يكون لحذفها أي تأثير على الصفحة 
لقد قمت بضبط طبقة overlay بتعديل على خاصية transform وإضافة خاصية  margin-top على كلاس overlay
.overlay { position: fixed; height: 100vh; background-color: rgba(0, 0, 0, 0.6); top: 0px; right: 0px; z-index: -1; margin-top: 150px; transform: skew(100deg,40deg); } مرفق ملفات المشروع مع التعديلات 
templete_1.zip

يمكنك إنشاء كلاس فيPHP عن طريق التعليمة التالية 
<?php class ClassName { } ?> وفي حالتنا نريد إنشاء كلاس و يكون اسمه mailC 
<?php class mailC { } ?> ثم نقوم ببرمجة دالة بداخل هذا الكلاس و ليكن اسمه send 
<?php class mailC { public function send($to, $from, $subject, $message) { } } ?> ولاحظ أن الدالة send تحمل عدة متغيرات مثل 
$to وهو بريد الشخص الذي نود إرسال بريد إليه 
$from البريد الذي قام بارسال الرسالة إلى هذا الشخص 
$subject عنوان الرسالة و 
$message هو نص الرسالة التي نود إرسالها. ثم يمكننا إنشاء header الخاص بالرسالة 
<?php class mailC { public function send($to, $from, $subject, $message) { $header = "From: ".$from."\r\n"; $header .= "Reply-To: ".$to."\r\n"; $header .= "MIME-Version: 1.0\r\n"; $header .= "Content-type:text/plain; charset=iso-8859-1\r\n"; $header .= "Content-Transfer-Encoding: 7bit\r\n\r\n"; $header .= "$message\r\n"; } } ?> حيث الهيدر يكون مضمن بداخله بريد الشخص الذي قام بإرسال الرسالة و بريد الشخص مستقبل الرسالة و ترميز النص, ثم يمكننا أخيراً من استخدام دالة mail التي تكون مهمتها إرسال الرسالة و هي دالة من PHP و يتم تمرير إليها كل من بريد الشخص المستقبل و بريد المرسلو عنوان الرسالة و نص الرسالة ( أو الهيدر ) .
<?php class mailC { public function send($to, $from, $subject, $message) { $header = "From: ".$from."\r\n"; $header .= "Reply-To: ".$to."\r\n"; $header .= "MIME-Version: 1.0\r\n"; $header .= "Content-type:text/plain; charset=iso-8859-1\r\n"; $header .= "Content-Transfer-Encoding: 7bit\r\n\r\n"; $header .= "$message\r\n"; mail($to, $subject, "", $header); } } ?>