Front Code

26/02/2023

https://youtu.be/Qy7L7wx_QX8

: https://wa.me/+201280608691 #تعلم البرمجه بالممارسه #حمل التاسك من الرابط دهhttps://drive.google.com/file/d/1WvxUptsQXG8ONEFdmrN3KlQq7riPnd...

22/01/2023

طيب ايه ال Semantic HTML ده ايه؟🤔 ✅
بيوصف بل التفصيل محتوي الصفحه الي حضرتك فاتحها للمتصفح
ول html بنسبه للمتصفح بيفقد معناه لما تسئ استخدام ال tags زي انك تعمل اغلب اجزاء الصفحه ب div او span...

تاني حاجه خليني اعرفك عليها هي ال Semantic HTML Tags ✅
و هم ببساطه
-
-
-
-
-
-
-

خليني بقا اشرحلك واحد واحد بيفرق ايه عن زميله 🌚✅

1 - ✅
وهو بيطلق عليه Self Contained او Independently Distributed content
يعني الكلام ده ؟!
يعني انه جزئ مستقل ب ذاته ف الصفحه و ممكن اخده احطه ف اي حته عل انترنت مش شرط ويب سايت بعينه او الموقع الي تم انشائه فيه يعني زي ما بنشوف فل news articles ول blog posts مثلا

2 - ✅
و ده بقا Not self contained مش زي ال article يعني مينفعش تاخده و تحطه ف اي حته علي الانترنت و يفضل شكله منطقي...
في الغالب بيكون جزئ من article او موجود عشان يفصل جزئين اساسيين فل صفحه الحاليه

3 - -- for Introductory content ✅
و دي بقا مش محتاجه شرح كتير...بتستخدم لل introducing الي بيكون موجود ف اي page زي ما سعات بنقول Hero section علي صوره كدا ف اول الصفحه معموله بشكل كويس
و احيانا بتحتوي علي links ال تنقل فل موقع و باقي الصفحات
و في فرق بين ال tag ده ول nav بل مناسبه

4 - ✅
و هو بتستخدمه علي اهم حاجه فل صفحه بتاعتك او الغرض الرئيسي من الصفحه الي مينفعش يتشال و الا هتفقد الصفحه معناها
و مينفعش يكون في اكتر من main tag ف صفحه واحده

5- ✅
ده بقا عكس ال main تماما ده بيستخدم لما يكون عندك جزئ من الصفحه غير مهم علي الاطلاق انه يتشال...لو اتشال مش هتفقد الصفحه معناها خالص

22/01/2023

Do you know about: is() in CSS?

selectors بتاخد مجموعة من function عبارة عن
وعن طريقها تقدر تحدد أي عنصر as argument
clean موجود في القايمه دي بشكل مختصر و

03/01/2023

هو ازي الكمبيوتر بيفهم ؟

علشان نعرف محتاجين نرجع لتاريخ الكمبيوتر نفسه وكان شكله عامل ازي أول ما أُخترع ؟

هل كان بالشكل اللي موجود دلوقتي ولا شكل تاني ؟

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

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

طب تعالي نشوف إزي اصلا بيجمعهم وهو مفيش حتي كيبورد أكتب عليه !!

هقولك عملية إدخال البيانات مكنتش بالشكل السهل اللي موجود حاليا

يعني عشان ادخل رقم 7 علشان لو عاوز اطبعه
كان عندي 8 مفاتيح زي بتاعت الكهرباء كنت بفتح منهم 3 مفاتيح واقفل 5

Off , Off , Off , Off ,Off ,Off ,On ,On ,On

يبقي كل رقم عندي ف الأرقام بتاعتي المعروفه بعرف ادخلها للكومبيوتر بتاعي عن طريق اني افتح شويه مفاتيح واقفل شويه تاني وبالتالي كده الكمبيوتر هيفهم انا عاوز ادخل رقم كام
وقالك لما يبقي المفتاح OFF هنعبره عنه ب O
ولما يكون المفتاح On هعبر عنه ب 1
يبقي كده ال 7 بتاعتي لو عاوز ادخله للكمبيوتر بحولها لاصفار ووحايد
Off , Off , Off , Off ,Off ,Off ,On ,On ,On
00000111

يبقي كده كل رقم عندي ف الأرقام اللي اعرفها
1,2,3,4,5.....
بيكون ليها قيمة مقابله عبارة عن اصفار وواحايد
3 = 00000011
7 = 00000111

آه طب إحنا كده الاصفار و الوحايد دي علي حسب اي ما انا عاوز أفهم.

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

فأنا علشان اتواصل مع الكمبيوتر لازم هو كمان يكون ليه لغة
فمن هنا اخترعوا للكمبيوتر لغة عبارة عن أصفار ووحايد

بناءاً علي أن الكمبيوتر ليه حالتين لاما on لاما off
وقالك هنسمي اللغة دي binary code

وبقا كل رقم عندي بقا ليه كود مكون من 1 و 0
وبالتالي أن حفظت اللغة بتاعته لو عاوز ادخل رقم معين فأنا حافظ الكود بتاعه ..

هتقولي أن عندي أرقام كبيرة اوي هل هقعد احفظ كل الأكواد دي أكيد مستحيل !!

مش انا قولتك انهم ف الأول مكنوش بيعرفوا يعملوا غير عمليات حسابيه بسيطه ؟

السبب بقا أن كل ما الرقم االي عاوز ادخله زاد كل ما زاد الاصفار والوحايد كل ما زاد عدد المفاتيح
اللي هعملها on و off بالتالي محتاج مجهود كبير جدا

فكان لازم ندور ع حل للموضوع ده ..

فبالتالي كنت محتاج حاجه وسيطه بحيث اني اقدر اكتب رقم 7 عادي مثلا ويكون في حاجه تكون في الكمبيوتر هي اللي تترجم الكلام ده لاصفار ووحايد

وبالتالي الكمبيوتر يقدر يفهما لان زي ما قولنا الكمبيوتر مش بيفهم غير 0 , 1

وهي دي بقا وظيفه الـ Compiler اللي بنكتب عليه لغات البرمجه الحاليه
فاحنا بنكتب اللغات دي وبعدين الـ Compiler ياخد الكود بتاعنا ده يحوله لاصفار ووحايد وبالتالي الكمبيوتر يفهمه وينفذ اللي الكود اللي إحنا كتبناها
بس كده.

19/12/2022

11/12/2022

✅ تقدر تتعلم برمجة من البيت ؟ ( نعم وبشدة )
✅ اوعي تعيش حياتك مجبر علي مجال معين بسبب الظروف
✅ الشغل موجود ومتاح بس انت اتعلم
✅ الحاجة اللي مش مريحاك بلاش منها
✅ الاحتراف معتمد علي عوامل كتيرة
✅ ايه اللي خلي شخص يفرق عنك وتشوفه في مكانه اعلي منك وشغال في وظيفة محترمة وحياته كويسة ..
الحاجة الوحيدة انه هو خد الخطوة قبلك وبدأ ✨
✨ كلنا عندنا ظروف كانت كفيلة تخلينا منوصلش ( متستسلمش )✨

03/12/2022

واحده من أهم ال CSS Frameworks اللى بتستخدمها فى بناء ال website 👌
حاجه كده open source فى اللذيذ
سمعنا عنها فى منتصف 2010 وطلع منها أول إصدار فى أغسطس 2011
بس قبل منتكلم عنها خلينا نقول تعريف صغير ... ألا وهو ايه هو ال Framework أصلا !🧐
ال Framework هى حاجه reusable ، حاجه مش هنضطر اننا كل منحتاج نعملها نعيد العجله من الصفر لاننا already عملناها قبل كده
إحنا النهارده هنتكلم عن ال Bootstrap .... واحده من أهم ال CSS Frameworks اللى بنستخدمها فى بناء ال website الخاص بينا
فى منتصف 2010 فيه اتنين من ال Developers واللى كانوا وقتها شغالين فى Twitter سابو شغلهم وأعلنوا إنهم هيشتغوا على Framework يسهلوا من خلال على ال Developers التانيين الشغل وكمان يختصروا عليهم وقت 🕘 وفلوس 💵
وفعلا فى 19 أغسطس 2011 ينزل أول إصدار من ال Bootstrap واللى كان وقتها اسمه Twitter Blueprint
وفى 21 يناير 2012 طلعوا علينا بالاصدار التانى واللى كان بيدعم ال mobile responsive 📲وانك تقدر تتعامل مع الشاشات المختلفه فى الحجم بسهوله
فى 19 أغسطس 2013 رجعوا لينا بالاصدار الثالث واللى أعادوا تصميم ال GUI علشان يظهر بشكل كويس فى ال mobile كمان إهتموا شويه بال namespace events ، بس من أهم الاضافات اللى حصلت انهم دعموا ال Internet Explorer 7 وال Firefox 3.6 🥳
نيجى بقى للاصدار الرابع واللى إشغلوا عليه من 29 أكتوبر 2014 لحد 18 يناير 2018 .... وقت كبير بيطورا ويحدثوا
فمن الطبيعى إننا نلاقى إضافات كتيره جدا .... خد عندك مثلا
◾ دعم التحويل من والا ال sass
◾ دعم ال CSS Flexbox
◾ إضافة components زى ال styling ، buttons ، drop-down menus ، media objects وكمان image classes
◾ زيادة ال global font size من 14px ل 16px
◾ التحويل ما بين ال CSS Units المختلفه ......... و services تانيه كتير جدا تقدروا تقرؤوا عنها
وأخيرا الاصدار الخامس واللى طلع للنور فى 5 مايو 2021 ..... واللى حصل فيه إضافات كتير كان من أهمها
◾ وقف دعم Internet Explorer الله يرحمه و jQuery 😅
وبكده نكون وصلنا لنهاية اليوم
نشوفكم فى يوم جديد واستفاده جديده 👋❤️

02/12/2022

الجافا سكريبت 🙂
عود نفسك دايما لازم اول سؤال يجي فى دماغك لما تسمع عن لغه برمجه .. يكون ايه هيا المشكله اللى جات حليتها لغه البرمجه دى؟🤔
وقبل ما اجاوبك على السؤال ده تعالى الاول نعرف ايه هيا الجافا اسكريبت ؟👀
الجافا اسكريبت باختصار هيا عباره عن لغه برمجه اتعملت عشان تخللي الموقع تفاعلى اكتر 🗣
وده يخلينا نجاوب على اول سؤال وان ال js جات حلت مشكله التفاعل مع الموقع من غير ما اعمل تحديث للصفحه 👌👌
زى مثلا ماتضغط على الزار اللى مكتوب عليه log in فيدخلك صفحه تانيه وتسجل دخول
او تضغط على زرار يعرضلك شويه صور او تحرك حاجه بمجرد الضغط عليها
كل دى تفاعلات فى الصفحه بتتعمل بالجافاسكريبت
↙️ ونيجي بقا للسؤال اللى بعده وعاوزين نعرف مين اول اخترع لغه الجافا سكريبت ؟🤔🤔
__ كان فى شركه اسمها NetScape الشركه دى كان فيها حد اسمه برندان ايش فى سنه 1995 م قرر يبتكر لغه الجافا سكريبت ولكن تحت مسمى موكا
فى الاول مكنش فى حد مهتم للموضوع ولكن مع تحديثات كتيره فيها اصبحت لغه بنعتمد فيها على حاجات كتيره وبقت من اهم اللغات عند المبرمجين ...
طيب بما ان اسمها جافا سكريبت ف هل هيا ليها علاقه بلغه الجافا؟؟
لا ملهاش اى علافه بيها غير انهم اخدوا نفس الاسم عشان التسويق وعشان تكون معروفه اكتر ..😃🤍
ونيجي بقا للنقطه او السؤال المهم وهيا الجافاسكريبت بتشتغل ازاى ؟؟؟
بكل بساطه فيه حاجه اسمها ex*****on context وهوا عباره عن مربع او صندوق مكون من حاجتين اول حاجه memory تاني حاجه code 📦
🎯 ال memory بياخد منى اى variable بكتبه فى ملف ال js
🎯 وال code بياخد باقى الكود اللى كتباه
ال memory له اسم تاني وهوا variable environment وال code لما يجي يعدي عليه بيعدي عليه سطر ورا سطر
✍ وحسب استطلاع موقع stake over flow ف الجافاسكريبت هى من اشهر لغات البرمجه والاكثر استخدام فى العالم 🤫
هاااا هتذاكر جافاسكريبت امته 👀؟؟؟؟

02/12/2022

هنتكلم انهاردا عن ال UI/UX
انت اكيد سمعت كتير عن المصطلحين دول وسالت نفسك هل هما حاجه واحده ؟؟ 🤔
واي اللى مخليهم مع بعض دايما يعني اي اللى رابطهم ببعض ؟ 🤷
فيه مهندس معمارى اسمه دون نورمان وهوا اول شخص اهتم بالموضوع ال UI/UX سنه 1986 م 👨‍💻👏
ال UI/UX معناها بالعربي تصميم واجهات المستخدم ووظيفتها الاساسيه اننا نخللى مستخدم التطبيق او الويبسايت يكون اسهل عليه فى الاستخدام وفى الشكل والالوان .✨❤️
وافضل واجهه مستخدم هيا انى كمستخدم اعمل مهمه معينه بكل سهوله ومن غير اى تعقيدات سواء على تطبيق معين هستخدمه او ويب سايت
تعالوا الاول نعرف هما اختصار ل ايه 👀👀
ال UX اختصار ل User Experience
ال UI اختصار ل User Interface
تمام جدا .......
⭕️هنبدا ب ال UX وقبل ما تعرف هيا ايه عاوز اعرفك على مصطلح جديد اسمه wireframe
يعني ايه ؟
ال wireframe ده هوا تقسيمه الصفحه بتاعتنا يعني هحط الصوره فى المكان ده وتلت سكاشن جنب بعض فى المكان ده والنَص هيكون ع اليمين مثلا وهكذا ...
تقسيمه فقط من غير الوان ولا خطوط ولا صور ولا اى حاجه .
تمام كده ..
هنا يجي دور ال UX و وظيفته انه بيعمل ال wireframe ده ..
بيكون مهمته الاساسيه انه يعمل تقسيمه يخللى المستخدم للموقع ده يقعد اكبر فتره ممكنه فيه من غير ما يحس انه تايهه فى الموقع او مش عارف يتعامل معاه ..
بيحاول ب كل الطرق يبسط استخدام الموقع ده عن طريق التقسيمه اللى هيعملها ده ب اختصار وظيفه ال UX .
بيعرفك اماكن كل حاجه فى الصفحه ..✅
⭕️نيجي بقا لل UI
وبرده قبل ما نتكلم عنها هعرفك مصطلح تاني اسمه (prototype) ده عباره عن الموقع او الصفحه بتاعتنا جهزت بالالوان وحجم الخط وشكله والصور وهكذا.
تعالوا بقا نعرف ال UI بيعمل ايه ..
ال UI بياخد التقسيمه اللى ال UX عملها واللى احنا قولنا ان اسمها ال wireframe ويحولها ل صور والوان ويظبط الخطوط واشكالها والاحجام..
والشكل النهائي اللى بيخرجه ال UI بنسميه ال prototype .✅
‼️بص باختصار ال UX بيروح يقول لل UI حط الصوره فى المكان ده والنص فى المكان ده وال UI بياخد منه التعليمات دى ويروح هوا يحطهم ويظبط فى الالوان والحجم والخطوط ويقوم عطيها لل UI developer هوا ده بقا اللى بيكتب اكواد الصفحه وبيدينا الشكل النهائي ليها .
بس كده يا سيدى 😄
نشوفكم فى يوم جديد ❤️✨

02/12/2022

عرفنا ال html وعرفنا انها بتحدد نوع العنصر والخصائص الاوليه بتاعته 👀
تخيل كده معايا موقع كامل فيه html بس ؟؟
هيكون كله ابيض واسود من غير اى تنسيقات ! اكيد مش طبيعي ومحدش هيفتح الموقع اصلا لو بالشكل ده 🙄
ف عشان كده منظمه W3C فى 1996 م قررت تعملنا حاجه اسمها Cascading Stylesheet اللى اختصارها css
جات عشان تخللى الموقع يكون متقسم كويس وفيه الوان ومظهره يكون فضل
يبقى باختصار ال css دى بتتحكم فى الشكل النهائي اللى المفروض العنصر يظهر بيه
زمان الصفحات كانت محدوده فى الشكل مكنش فيه تخطيط للصفحه
كان عباره عن نص عادي وروابط ومكنش فيه خلفيه ولا الوان
ال css سمحتلنا ب اننا نغير شكل الخط ولون وحجم النص والروابط
وبدانا نقسم الصفحه مربعات ونعمل تنسيقات افضل ومرتبه
طب ياترى بنكتب اكواد ال css دى فين وازاى؟؟
عندنا تلت طرق نقدر نكتب بيهم Css
اول طريقه هيا اننا بنستخدم حاجه اسمها Style وده بيكون عباره عن Attribute بيتكتب جوا عنصر ال css اللى عاوزينه بشكل معين
يعني مثلا عاوزين الكلمه دى
FrontCode
يتغير لونها ل لون احمر
ف نروح نعمل جواه Attribute اسمه style ونكتب جواه
Color :red
بالشكل ده
FrontCode
تاني طريقه عندنا هيا اننا بنستخدم tag فوق كده عند تاج ال
هنسميه وجواه هتحدد العنصر اللى عاوز تعمله تنسيق وتعمل كل ال Css جواه
فيه بقا طريقه تالته وافضل طريقهم فيهم (وهقولك دلوقتى هيا ليه افضل طريقه )
وهى اننا بنعمل ملف كامل لوحده يكون فيه كل حاجه متعلقه ب اكواد ال Css هتقوللى طب ازاى ملف ال html هيعرف ان الفايل ده تبعه هقولك بنعمله حاجه tag اسمه فوق برده جوا تاج ال head اللى ف ال html كاننا بنقوله ي html فيه ملف Css تبعك وهربطه بيك عن طريق التاج ده..
عارف بقا ليه دى افضل طريقه ؟
عشان لو عندك مشروع كبير ومليان اكواد كتير هيكون سهل عليك تخللى كل ملف لوحده وهيكون كل حاجه مترتبه بشكل افضل وسهل على العين تقراه 😃
متنساش ان اهم من الشغل تظبيط الشغل❤️

02/12/2022

هنتعرف انهاردا على HTML 🤩
خلينا نجيب الموضوع من البداااااايه خالص 😅
سنة 1969 شركة IBM أعلنت انها عملت لغة ترميز اسمها SGML إختصار ل Standardized General Markup Language
وده كان قبل ظهور الانترنت
وكانت لغه وصفيه بنقدر نبنى بيها مستند 📃
يعنى ممكن نقول انها كانت بديل عن ال word او ال pdf دلوقتى
وكان ال syntax بتاعها مبنى بال tags ، بس كانت ليها عيوب كتير زى إنها صعبه جدا فى التعامل نظراً لعدم ترجمتها لبعض القواعد النحويه والهندسيه 📊
كمان كان ال software بتاعها أو تعريفها على جهازك مكلف جدا
وفى سنة 1992 وبعد ظهور الانترنت 🖥️
فيه عالم برمجه من أصول انجليزيه اسمه Tim Berners-Lee 🧐
وكان مهتم وقتها بتطوير ال web وازاى ينظم شكل المستندات اللى موجود فال site أو يرتب الكلام اللى بيطلعلنا فى البحث
واستعان بلغة ال SGML وقدر يشتق منها الاصدار الاول من ال HTML
وهى إختصار ل HyperText Markup Language
من وقتها للنهارده خرج 4 إصدارات كان آخرهم HTML5 فى 2012
ال html بتتكون من مجموعة tags ، كل tag عباره عن مكعب بنركبه علشان يكمل المبنى الكبير اللى بالنسبالنا ال website
لغه لا غنى عنها على الاطلاق ، بنستخدمها فى كل مكان فى ال site حرفيا
وبكده نكون خلصنا كلامنا انهاردا عن HTML 😁
نشوفك فى بوست ويوم جديد ❤️