New in html6 👋
https://morioh.com/p/6d422fc49bd2

بفضل ربنا وكرمه الحمد لله ، فيديو جديد ازاي تحول الtext ل voice ، وقدامك 87
Option
كل صوت مختلف ع التاني وبلهجة دولة مختلفة ، ودا لينك الفيديو
https://youtu.be/1elwPEph2CY

ودا فيديو انترو بسيط للفيديو
ودا live demo لو حابب تجربه بنفسك
https://texttospeechz.netlify.app/
يارب انصر اخواتنا المرابطين في فلسطين 🖤

بفضل ربنا وكرمه الحمد لله ، من باب أضعف الإيمان حبيت أعمل حاجة في مجالي عن فلسطين ، شرح لموقع فلسطيني بسيط ، الموقع landing page ، بس أنا متأكد انك هتستفيد منه جدا ويعلم ربنا انه أكتر موقع تعبت في شرحه عشان أخرجه بشكل كويس ، ربنا ينصر اخواتنا في فلسطين يارب ويخسف الأرض باليهود ،
دا انترو بسيطة للموقع ودا
لينك الموقع لايف لو حابب تشوفه
https://palestinez.netlify.app/
ودا لينك فيديو الشرح
https://youtu.be/ztIiO4MfUO0

ازاي ألعب وأتعلم في نفس الوقت ؟
جايبلك ألعاب في مجال الweb development هتفيدك ، هتلعب وتتعلم في نفس الوقت ،، وكل لعبة عبارة عن levels كل م تعدي level اللي بعده بيكون أصعب عشان يعلمك أكتر ،
هنبدأ ب ألعاب ال layout ، ناس كتير بيكون عندها مشكلة ف انها تبني الlayout بتاع الموقع وعشان أبني أي layout لازم أكون فاهم كويس أوي ال flex وال grid وإيه فيهم هيسهل عليا أبني الlayout فيهم حسب المطلوب منك ف البروجكت ، ف لازم أكون فاهم عشان أختار صح ،،
___________________
نبدأ بألعاب هتعلمك الflex ،

1 - Flexbox Adventure
https://codingfantasy.com/games/flexboxadventure

2 - Flexbox defense
اللينك مش https ف بالتالي الفيس هيمنعه ف اكتب ف جوجل flexbox defense

3 - Flexbox froggy
https://flexboxfroggy.com/

4 - Flexbox Zombies
https://mastery.games/flexboxzombies/

5 - Flexbox Ducky
https://courses.cs.washington.edu/courses/cse154/flexboxducky/
_______________________


ألعاب للgrid
هي لعبة واحدة بس عشان التانية مدفوعة ف خد الfree ":(
1 - Grid Garden
https://cssgridgarden.com/

_____________________
طيب بمناسبة ان البوست اللي فات وعدتك اني هجبلك مواقع تسهل عليك انك تcreate layout
بس هفضل أنصحك دايما اوعي اوعي اوعي تستعملها الا لو فاهم الgrid وال flex كويس ، دي مجرد tools عشان توفر وقتك وانت شغال مش عشان تستخدمها وانت مش فاهمها !
___
ال tools
-- Grid by exampels
بتجيبلك أمثلة لغالبية الlayouts اللي هتستخدمها بالكود جاهز
https://gridbyexample.com/examples/


-- Interactive grid generator
برضه الفيس مرضاش ينزل لينكه ف اكتب ف جوجل interactive grid layout generator


-- Flexbox layout Exampels
https://www.quackit.com/css/flexbox/examples/



-- flexbox layout Generator
https://flexbox.buildwithreact.com/

______________________
خلصنا الكلام عن الlayout هجبلك بقي
لعبة تعلمك الselectors بتاعة اللغة وازاي ت specific element بعينه وتعمله select بال css
- Css Dinner
https://flukeout.github.io/

_________________
خلصنا كدا خلاص فاضل بس جايزة اخر البوست م انت مقرأتش كل دا ومش هكافئك يعني ، دي tool بتساعدك ت generate أي حاجة محتاجها ف الcss
زي الtransform ، filter ، ال shadow
--
https://css-generator.netlify.app/
______________________

معلش طولت عليك بس أنا عاوز أفيدك وربنا يعلم ، دا لينك لبوست فيه tools تانية جميلة كنت اتكلمت عنها قبل كدا ،
https://www.facebook.com/102090001829572/posts/165976762107562/?sfnsn=scwspmo


ودا لينك لبوست فيه معظم مكتبات الjs اللي هتحتاجها ف شغلك ولسه ليه تكملة باذن الله تعالي ،
https://www.facebook.com/102090001829572/posts/162328812472357/?sfnsn=scwspmo



متنساش تسيب لايك للبيدج وتعمل فولو عشان البوست الجاي يوصلك ، ودا لينك شانل التليجرام
https://t.me/agcoding
لو حابب تتابع معانا كل حاجة بتنزل وأي tips أو tricks جديدة في الfrontend ،
ودا لينك قناة اليوتيوب عليها تطبيقات كنت شارحها هتفيدك جدا باذن الله توظف اللي اتعلمته لو انت حد لسه بادئ🖤
https://youtube.com/c/AbdoELAzizGamal

لو اطلب منك فكرة موقع زي uber أو careem أو موقع دليفري ازاي تقدر تضيف خرائط google map للموقع بتاعك ،
دا فيديو الشرح : https://youtu.be/3Cwn1-Ms-oA
دي انترو بسيطة ،،
ودا live demo لو حابب تجرب
https://abdoelazizgamal.github.io/mapboxgl/
بس متنساش تشغل اللوكيشن الأول من موبايلك 🙏

JavaScript Arrays quick sheet👇

This is an image that contains all array methods with explanations and examples

🔗https://t.co/o3XAQ4YeYw https://t.co/cJqzRmUqVN

بلاي ليست جديدة عن الproblem solving with javascript ودا intro بسيط ، ونزل لحد الآن فيديوهين بطريقيتين لحل نفس المشكلة ، الplaylist هتكون كبيرة باذن الله 🙏🌻
https://youtube.com/playlist?list=PLnD96kXp-_pNKynhx8yYhpG5B7SGKOQT4

نزل فيديوهين جداد ف البلاي ليست بتاعة الproblem solving ،
ودا لينك فيديو فيهم 🌻
https://youtu.be/Umc04NeCTt8

الحمد لله ، ازاي تبعت email لأي شخص ب استخدام pure javascript ، بدون استخدام node js أو php mailer أو أي حاجة server side ،، دا لينك الفيديو ، https://youtu.be/d9KyTarmRiY
والplaylist دي بص عليها بصة سريعة بس متأكد انها هتفيدك باذن الله 🌻❤
https://youtube.com/playlist?list=PLnD96kXp-_pNqlUDk72ugJ7UQYQHypS0e

الحمد لله ، نزل فيديوهين جداد ف الproblem solving ،
ودي اللينكات 🌻
https://youtu.be/OsSrsTr0DQI
https://youtu.be/xXo5tcqT8J4

الحمد لله ، ازاي تعمل google search by voice ، https://youtu.be/3WlNQgCx5-8
دا انترو بسيط 🌻
ودا لينك بلاي ليست تطبيقات هتفيدك جدا باذن الله تعالي 🙏

https://youtube.com/playlist?list=PLnD96kXp-_pNqlUDk72ugJ7UQYQHypS0e

ودا لينك playlist للproblem solving by javascript
https://youtube.com/playlist?list=PLnD96kXp-_pNKynhx8yYhpG5B7SGKOQT4

💡Did you know about the awesome scroll-padding-top CSS Property?

No more JavaScript is needed for this 💪
#copied

الحمد لله ، نزل فيديو جديد problem solving بال js ، الفيديو بيحل نفس المشكلة من أسوأ سيناريو بالتدريج لغاية أحسن حل ممكن ، يعني ف الأول حليت بطريقة سيئة جدا وف اخر الفيديو حليت نفس المشكلة بسطرين ، عشان بس تتعلم ازاي تفكر وتوصل لأكتر من حل وتوصل للصح فيهم 🍂
https://youtu.be/F-2p67cBUho

الحمد لله ، فيديو introduction عن الfirebase Basics وشرحها من الdocumentation ، ولو انت شخص متعرفش يعني اي أصلا firebase ف متقلقش أنا شارح كأنك شخص بتفتح الdoc لأول مرة ،
ازاي تعمل crud operations زي
read و write و update و delete
للداتا عن طريق الrealtime firebase وال javascript
وكل دا هنشوفه ف الفيديو 🌻
https://youtu.be/NYlthz0_wyo

الحمد لله ، فيديو جديد في بلاي ليست ال problem solving ، لينك الفيديو ، الفيديو ٦ دقايق بس ،فضلاً خش شوف محتواه وسيب رأيك لأنه هيفيدني ،
https://youtu.be/5Zz2Ked4koA