Interactive Hover Button
code : https://youtu.be/tHgsdsWCR0A
#application

Amazing Hover Images Accordion
code : https://youtu.be/YNFGPPkYyZA
#application

Custom Password Validation
code : https://youtu.be/y7ms419UQEQ
#application

Glass Form With 3D Background
code : https://youtu.be/j1dPGdmNVu0
#application

QR Code Generator
code : https://youtu.be/rOps3SnacOE
#application

Custom Tabs Selector
code : https://youtu.be/izlLIXlLV_0
#application

Hamburger Menu Toggler
Code : https://youtu.be/16ohjMPsh0Y
#application

Custom label with wave Animation
Code : https://youtu.be/HvV27mX8zVA
#application

Random Ayat Genetator
Code : https://youtu.be/7jy9UzunzNA
#application

The loading attribute specifies whether a browser should load an image immediately or to defer loading of off-screen images until for example the user scrolls near them
#tips

You can create a shortcut key for an element to come on focus using the "accesskey" attribute.
#tips

عشان توصل لكل حاجة بشكل أسهل وأسرع فيه هشتاجات للشانل بمجرد ما تضغط عليها هتنقلك للجزء اللي حابب تشوفه سواء تطبيقات أو tips and tricks
#application
#tips

الحمد لله كرم ربنا وفضله عليا كان كبير ، ربنا وفقني اني أعمل
موقع إسلامي فيه أحاديث نبوية ، وقرآن كريم وكل م تضغط ع صورة يظهرلك آياتها كاملة ، وأوقات الصلاة حسب اللوكيشن اللي انت عاوزه ، وكل البيانات دي من api ، كل خطوة من دول مشروحة بالتفصيل في بلاي ليست كاملة ، ازاي تصمم موقع إسلامي كامل وتقدر تعمل كل دا بنفسك وهتفهم كل سطر كود اتكتب ، البلاي ليست دي للناس اللي ف البداية ومحتاجة توظف وتطبق اللي اتعلمته ، دا فيديو intro بسيط عن محتوي الموقع ، ودا لينك الموقع لو حابب تجربه بنفسك
http://mohamedsaad2021-001-site6.itempurl.com/
ودا لينك playlist الشرح
https://youtube.com/playlist?list=PLnD96kXp-_pMo0m5hAltTJmrTAaMdxWFF

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

الحمد لله كرم ربنا وفضله كبير ، ربنا وفقني إني أعمل QuranPlayer ودا لينك لو حابب تجربه
http://quranplayer.netlify.app
، وشارحه كامل في الفيديو دا مطبق بhtml css js
https://youtu.be/eEzwCcON-PQ
_____

لما بتضغط ع سورة بيظهرلك آيات الصورة بالترتيب ورا بعض والآية بتتغير للي بعدها بمجرد م الصوت بتاع الآية يخلص ، تقدر تتنقل بين الآية اللي قبلها واللي بعدها أول م الصورة بتخلص بيطلعلك sweet alert ان الصورة خلصت وبيرجعها تاني من أول آية لو حابب تعيدها، ودا فيديو انترو بسيط بجرب فيه كل حاجة قدامك 🖤
تقدر تاخد الفكرة من الفيديو وتطبقها ب features أكتر وديزاين أجمل وتنشرها ونشارك كلنا ف الثواب والخير 🖤
#تحدي_الخير

لو انت فرونت اند أو باك اند ف البوست دا مهم ليك ، دي أهم مكتبات javaScript هتحتاجها في شغلك بنسبة كبيرة باذن الله ،،

1- Algolia Places
المكتبة دي بتُستخدم في ال
address autocomplete Search
يعني لو انت بتبحث عن مكان معين وكتبت بس أول حرف بيظهرلك كذا option بالأماكن اللي بادئة بالأول حرف دا "autoComplete" ،
مش بس كدا لو ضفت معاها مكتبة "leaflet"
انت ممكن كمان تضيف خريطة للبحث وتعرض فيها اللوكيشن اللي بتبحث عنه ،،
______________________

2- مكتبات الscroll
النقطة دي فيها أكتر من مكتبة وكلهم أجمل من بعض ، وهنقسمها لكذا نوع ،
كتير بتفتح مواقع ولما تيجي تسكرول في الموقع بتلاقي ان العناصر فجأة بتظهر من مكان ما وتبقي في مكانها الطبيعي في الموقع سواء بايفكتات كتير زي انها تيجي من اليمين للشمال و زي ال fade ، flip ، zoom ، وغيرهم ايفكتات كتير وتقدر تعمل بيهم حاجات خيالية عند الscroll والمكتبات دي أشهرهم
- Aos Animate On Scroll
- scroll Reveal
- jQuery Aniview
- wow js
- scrollissimo
- scroll me
- scroll magic ==>
ودي لو كتبت ع جوجل
scroll magic js examples
أو فتحت الdocumentation بتاعتها هتشوف حاجات خيالية حرفيًا ،،

--------------------------

وفي مكتبات بتضيفلك parallax scrolling effect ودا النوع التاني ،،
زي
- parallax js
- simple parallax Scrolling
- tilted page scroll
- parallax image Scroll
- full page js
- universal parallax

-----------------------

وف مكتبات بتخليك تعمل blur ع السكشن اللي انت بتسكرول لآخره ووصلت للسكشن اللي بعده
زي ال
- crossFade js
وتقدر تعمل كل دا بيور ببساطة من غير مكتبات لو حابب ، بس لو حابب تسهل الدنيا علي نفسك مش أكتر ،
النوع التاني دا كان عنيف وطويل أوي :"D

-----------------------

3 - عارف الadmin dashboard ؟
في معظم المواقع بتلاقي فيها charts وأشكال بيانية وبتسأل نفسك دي اتعملت ازاي ؟ المكتبات دي اسمها
data Visualization libraries
دول أشهر مكتبات بتعمل الأشكال دي وتقدر منها ت customize الداتا اللي بتظهر ع الcharts دي ،، أشهرهم ال

- chart js
- D3 js
- Apexchart js
- Rechart js
وجوجل نفسها مقدمالك الخدمة دي وعملالك charts خاصة بيها وكمان مقدمالك geo chart هتقولي يعني اي ، يعني بتقدملك خريطة لأي بلد وكمان interactive معاك وتقدر ت customize ليها الداتا اللي انت عاوزها ، اكتب بس انت google charts ،،
كل اللي عليك انك تفتح الdocumentation بتاعة المكتبات دي وهتلاقي شرح كل حاجة وازاي تبدأ تستعملها بشكل بسيط جدا ولو مستصعب الموضوع وفي حاجة واقفة معاك أو مش فاهم ازاي تستخدم مكتبة معينة وبيقابلك مشكلة فيها ، سيب كومنت وهحاول باذن الله أعمل فيديو في شرح بسيط لأي مكتبة انت محتاج تستعملها ،،
دا أول بوست باذن الله في سلسلة بوستات كتير مفيدة جدا في مجالنا هتنزل قريب باذن الله ، متنساش تسيب لايك للبيدج وتعمل فولو عشان البوست الجاي يوصلك ، ودا لينك شانل التليجرام
https://t.me/agcoding
لو حابب تتابع معانا كل حاجة بتنزل وأي tips أو tricks جديدة في ال frontend ،،
ودا لينك قناة اليوتيوب عليهم تطبيقات هتفيدك جدا توظف اللي اتعلمته ❤
https://youtube.com/c/AbdoELAzizGamal

بفضل ربنا وكرمه تم شرح تطبيق admin dashboard ودا لينك البلاي ليست ،، لو انت حد لسه بادئ ومبتعرفش تطبق ف صدقني البلاي ليست دي هتساعدك جدا ، شارح كل حاجة فيها بالتفصيل الممل ،
https://youtube.com/playlist?list=PLnD96kXp-_pNMQqlhvftNADK2frTt_j-0
ودا فيديو بسيط intro ليها ،
ودا لينك الlive demo لو حابب تشوفها بنفسك ..
https://admindashboardz.netlify.app/

ودي بلاي ليست تطبيق ع موقع اسلامي كامل وquran player بصوت الشيخ مشاري راشد العفاسي ،،
https://youtube.com/playlist?list=PLnD96kXp-_pMo0m5hAltTJmrTAaMdxWFF

#application

البوست دا مهم للui ux ولل frontend developers ، كتير بتشوف مواقع كتير تعجبك أوي ، رغم بساطتها ، وانك بعينك كمبرمج بتقول ان المواقع دي بسيطة مش صعبة ككودينج بس فعلا الموقع بيسيب أثر رجعي كويس في عينك ، طيب سواء انت ui أو frontend ف عاوز تعرف أكيد السر في جمال المواقع دي رغم بساطتها ، هقولك السر انك تعرف تختار values دقيقة للproperties بتاعتك ، انت عارف الproperty ووظيفتها بس مش قادر توظفها صح ، من أول تناسق الألوان مع بعضها لحد درجات الgradient والbox-shadow ودا اللي أنا جاي أتكلم عنه النهاردة جايبلك tools كتير هتسهل عليك حياتك في مجالنا ،، دا أنا حتي جايبلك tools تسهل عليك انك تcreate layout بس مش البوست دا ، بس دي مبحبذش تستعملها ، عشان لازم تكون فاهم كويس أوي ازاي تبني الlayout لموقعك ،، نبدأ في الtools ع طول بقي
_______
شاطر في التصميم بس مبتعرفش تختار ألوان متناسقة مع بعضها وتريح العين ، المواقع دي بتقدملك plattes جاهزة بالألوان اللي ممكن تكون متناسقة مع بعض
Colorhunt =>
يعتبر أشهرهم وبتلاقي فيه plattes محطوطة فيفورت عند عدد كبير من الناس وبيديك الhexacolors values للألوان بتاعتك ،

Awwwards =>
الموقع دا من أعظم المواقع اللي هتعرفها ، دايما بيهتم انه يسلط الضوء علي الweb trends وأحسن الديفلوبرز والديزاينرز ، كمان بيعمل منافسة ليهم ،،
اكتب بس في جوجل
Trendy web color plattes and color schemes and tools awwwards
هيقدملك صور لtrendy websites وبمجرد م تعمل hover ع الصورة هيجبلك الvalue بتاعة الplatte colors للموقع دا

Adobe color wheel =>
دي tool شركة adobe بتقدمهالك عشان تgenerate color platte

Coolros.co =>
الموقع دا بيقدملك features عظيمة غير انه بيجبلك list بالtrending color plattes
الموقع دا تقدر من خلاله ت customize ال
Color platte
بتاعتك تضيف ألوان وتجرب عليها وتتحكم في الhue ، saturation ، brightness دا غير
Features for blindnees
وحاجاات غيرها كتير هسيبك تستكشفها لواحدك ،
طيب أظن كدا كفاية أوي في حوار ال color plattes ،
________
الbox shadow خاصية عظيمة أوي بس مبعرفش أحددلها values كويسة ، انت متخيل ان في ديفلوبر ع موقع codepen رسم موناليزا بقيم الbox shadow !!!!!!!!!!!

Neumorphism.io =>
دا أفضلهم من وجهة نظري المتواضعة لانه بقي trendy أوي في كل الwebsites ، دا غير شكله الجميل جدا ، تخيل ان الخلفية بتاعتك كلها بيضة والعنصر اللي جوا الخلفية دي خلفيته برده أبيض هل هتقدر تفرق مكان العنصر فين ف العنصر الكبير بتاعك ؟ هقولك مستحيل ، دي اتحلت بقي دلوقتي بالموقع دا ، غير انه بيخلي شكلها جميل أوي ومريحة للعين كيوزر ، كمان أشهر الwebsites دلوقتي بقت معظمها بتستخدم الموضوع دا ، متنساش دي مجرد tool بتساعدك تgenerate قيم ، شطارتك انك تختار قيم صح
Cssmatic =>
الموقع دا مش بس boxshadow generator رغم ان دي اكتر حاجة تميزه ، لا دا فيه كمان
Gradient generator
واتقل جايبلك ليها مواقع جميلة ،
وفيه border raduis generator
و noise texture يعني اي noise texture ببساطة الtool دي بتعملك background بباترن معينة من البكسلة والnoise

Cssgenerator.org
واللي بيقدملك خدمات كتير أوي غير الbox shadow أهمهم الfilter وال transform ، هتقولي برده انا مش فاهمك ازاي ب generate الحاجات دي ، اقولك انه بكل بساطة بيكون جايبلك box بيطبق عليه قيم ، القيم دي انت اللي بتحددها من خلال range جنبها انت اللي بتلعب فيه بالماوس لحد م توصل قدام عينك للنتيجة اللي عاوزها بتاخد القيم ، الحوار بسيط أوي ي خال ،،
_____________

Gradient color
انك تضيف الالوان بتدريج بقت تخلي شكل ألوان الموقع أجمل بكتير وعندك مثال لك لوجو انستجرام ، أنا هكتفي لك بذكر موقعين لأنهم هيغنوك عن كل حاجة مستقبلا
Uigradients =>
ودا هتلاقي فيه قيم جاهزة لgradients كتير منها المُستخدم في شركات عالمية ، زي netflix والعياذ بالله ، وانستجرام و twitch وغيرهم كتير أوي
Cssgradient.io =>
غير انه فيه generator لكن الموقع دا بيقدملك code snippets جاهزة ل
Gradient buttons
وfeatures تانية كتير جميلة ، الموقعا لما تدخله مش هتطلع من جمال الديزاين بتاعه


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