خلصت مذاكرة HTML, CSS, JS وعايز أطبق عليهم وأعمل مشاريع 🙂
= دي بعض المواقع اللي عليها Templates جاهزة، فيه منها مجاني وفيه مدفوع.
هتفتح الـlive demo بتاع الموقع اللي عايز تعمله وتطبقه بنفسك ولو وقفت في حاجة هتلاقي الـsource code متاح تقدر تبص عليه وتفهم هو حلها ازاي...
معلش طولت عليك...😊
تفضل يا صديقي الروابط أهي:
HTML5Up:
https://html5up.net
Templatemo:
https://templatemo.com
freehtml5:
https://freehtml5.co
Styleshout:
https://lnkd.in/dnQn8vtM
Start Bootstrap:
https://lnkd.in/dK8bVA6q
Zerotheme:
https://www.zerotheme.com
html5xcss3:
https://lnkd.in/d6mVkKD5
Colorlib:
https://lnkd.in/dKnbFUyt
Free-CSS:
https://lnkd.in/dTeSpapj
Hubspot:
https://lnkd.in/dFkDkkxx
Mobirise:
https://lnkd.in/db9RYz-Q
Bootstrap Made:
https://bootstrapmade.com
Theme For App:
https://themesfor.app
Bootstrap Taste:
https://lnkd.in/dwWsbA9U
One Page Love:
https://onepagelove.com
Tool Plate:
https://www.tooplate.com
Cruip
https://lnkd.in/dgGjsH8P
UIDeck
https://uideck.com
----------------
= دي بعض المواقع اللي عليها Templates جاهزة، فيه منها مجاني وفيه مدفوع.
هتفتح الـlive demo بتاع الموقع اللي عايز تعمله وتطبقه بنفسك ولو وقفت في حاجة هتلاقي الـsource code متاح تقدر تبص عليه وتفهم هو حلها ازاي...
معلش طولت عليك...😊
تفضل يا صديقي الروابط أهي:
HTML5Up:
https://html5up.net
Templatemo:
https://templatemo.com
freehtml5:
https://freehtml5.co
Styleshout:
https://lnkd.in/dnQn8vtM
Start Bootstrap:
https://lnkd.in/dK8bVA6q
Zerotheme:
https://www.zerotheme.com
html5xcss3:
https://lnkd.in/d6mVkKD5
Colorlib:
https://lnkd.in/dKnbFUyt
Free-CSS:
https://lnkd.in/dTeSpapj
Hubspot:
https://lnkd.in/dFkDkkxx
Mobirise:
https://lnkd.in/db9RYz-Q
Bootstrap Made:
https://bootstrapmade.com
Theme For App:
https://themesfor.app
Bootstrap Taste:
https://lnkd.in/dwWsbA9U
One Page Love:
https://onepagelove.com
Tool Plate:
https://www.tooplate.com
Cruip
https://lnkd.in/dgGjsH8P
UIDeck
https://uideck.com
----------------
HTML5 UP
Responsive HTML5 and CSS3 site templates designed by @ajlkn and released under the Creative Commons license.
ازاى google maps بيحسبلك اقصر طريق للمكان اللى انتا عايز تروحه ؟!!
ويعنى ايه Breadth First Search وايه علاقته ب google maps ؟!!
✅ خلينا كالعادة نضرب مثال نفهم منه ازاى بتحسب اقصر طريق للمكان اللى انتا عايز تروحه ✨
-- نفترض مثلا انك واقف فى ( ميدان التحرير ) وعايز تروح ( ميدان رمسيس )
-- فانتا اول حاجه هتعملها انك هتشوف هل فيه طرق بتوصل ل ( ميدان رمسيس ) من ( ميدان التحرير ) ولا لأ
-- فهتبص قدامك وهتلاقى قدامك ( طريقين مثلا ) واصلين بين ( ميدان التحرير ) و ( ميدان رمسيس )
-- فخلاص كدا تمام انتا عندك طريقين ممكن يوصلوك للوجهة بتاعتك اللى هيا ( ميدان رمسيس )
-- و انتا دلوقتى عايز تشوف اقصر طريق من الطريقين دول علشان تمشى فيه وتوصل بسرعة لميدان رمسيس
-- وانتا عارف ان كل طريق من الطريقين دول متقسم لمجموعة اجزاء وكل جزء من الاجزاء دى متساوى وبيساوى مثلا 100 متر
-- فانتا علشان تعرف اقصر طريق فيهم فهتعمل التالى :
- هتشوف عدد الاجزاء اللى بيتكون منها كل طريق
- ونفترض مثلا ان اول طريق بيتكون من 4 اجزاء يعنى كدا هيكون طوله 400 متر
- والطريق الثانى مثلا بيتكون من 6 اجزاء مثلا فكدا هيكون طوله 600 متر مثلا
-- فانتا كدا هتستنتج ان الطريق الاول هو اقصر طريق هيوديك للوجهة بتاعتك اللى هيا ( ميدان رمسيس )
✅ خلينا بقا نروح لل breadth first search ونعرف هو بيشتغل ازاى ✨
-- ال breadth first search هو search بيشتغل على ال Graph
-- وهو بيكون مسؤؤل انه يحدد اقصر ( مسار ) بين Two Vertices
-- بس هو بيحدد اقصر مسار بين ال Two Vertices عن طريق انه بيحدد اقصر مسار فيه اقل عدد من ال Vertices اللى هيحتاج يمر عليها فى طريقه بين ال Two Vertices اللى احنا شغالين عليهم
-- وال Two Vertices اللى احنا بنشتغل عليهم مش لازم يكونوا مثلا اماكن وانما بيكون نوعهم على حسب احنا هنستخدم ال Graph بتاعتنا فى تخزين ايه
-- وهو بيشتغل زى المثال بتاعنا اللى اتكلمنا عليه فوق وبيعمل التالى :
- هو بيشوف هل فيه طرق متاحة ( Edges ) بين ال Two Vertices اللى احنا هنشتغل عليهم ولا لأ
- لو موجود طرق متاحة ( Edges ) بين ال Two Vertices اللى احنا هنشتغل عليهم فهو بيروح يحدد عددهم
- وبعد كدا بيروح يشوف ايه اقصر طريق فيهم عن طريق انه يحدد ايه اقصر فيهم من حيث عدد ال Vertices اللى هيحتاج يمر عليها فى طريقه بين ال Two Vertices اللى احنا شغالين عليهم
✅ و فعليا google maps مش بيشتغل بال breadth first search علشان الطرق مش بتكون نفس الطول فبيشتغل ب Algorithm تانى اسمه dijkstras algorithm وهو شبه ال breadth first search بس طريقته مختلفة شوية
✅طب ازاى ننشئ ال Algorithm ده فعليا ؟!!
- هسيبلك لينك فيديو كويس اوى بيفهمك ازاى بننشئ ال Algorithm
https://youtu.be/pNWCCHFw7og
✅ ولو حبيت تقرا شوية فى ال Algorithm وتفهمه بشكل اعمق فهسيبلكم لينك مقالة على موقع كويس بيشرح الموضوع بتعمق شوية
https://www.geeksforgeeks.org/breadth-first-search-or-bfs-for-a-graph/
ويعنى ايه Breadth First Search وايه علاقته ب google maps ؟!!
✅ خلينا كالعادة نضرب مثال نفهم منه ازاى بتحسب اقصر طريق للمكان اللى انتا عايز تروحه ✨
-- نفترض مثلا انك واقف فى ( ميدان التحرير ) وعايز تروح ( ميدان رمسيس )
-- فانتا اول حاجه هتعملها انك هتشوف هل فيه طرق بتوصل ل ( ميدان رمسيس ) من ( ميدان التحرير ) ولا لأ
-- فهتبص قدامك وهتلاقى قدامك ( طريقين مثلا ) واصلين بين ( ميدان التحرير ) و ( ميدان رمسيس )
-- فخلاص كدا تمام انتا عندك طريقين ممكن يوصلوك للوجهة بتاعتك اللى هيا ( ميدان رمسيس )
-- و انتا دلوقتى عايز تشوف اقصر طريق من الطريقين دول علشان تمشى فيه وتوصل بسرعة لميدان رمسيس
-- وانتا عارف ان كل طريق من الطريقين دول متقسم لمجموعة اجزاء وكل جزء من الاجزاء دى متساوى وبيساوى مثلا 100 متر
-- فانتا علشان تعرف اقصر طريق فيهم فهتعمل التالى :
- هتشوف عدد الاجزاء اللى بيتكون منها كل طريق
- ونفترض مثلا ان اول طريق بيتكون من 4 اجزاء يعنى كدا هيكون طوله 400 متر
- والطريق الثانى مثلا بيتكون من 6 اجزاء مثلا فكدا هيكون طوله 600 متر مثلا
-- فانتا كدا هتستنتج ان الطريق الاول هو اقصر طريق هيوديك للوجهة بتاعتك اللى هيا ( ميدان رمسيس )
✅ خلينا بقا نروح لل breadth first search ونعرف هو بيشتغل ازاى ✨
-- ال breadth first search هو search بيشتغل على ال Graph
-- وهو بيكون مسؤؤل انه يحدد اقصر ( مسار ) بين Two Vertices
-- بس هو بيحدد اقصر مسار بين ال Two Vertices عن طريق انه بيحدد اقصر مسار فيه اقل عدد من ال Vertices اللى هيحتاج يمر عليها فى طريقه بين ال Two Vertices اللى احنا شغالين عليهم
-- وال Two Vertices اللى احنا بنشتغل عليهم مش لازم يكونوا مثلا اماكن وانما بيكون نوعهم على حسب احنا هنستخدم ال Graph بتاعتنا فى تخزين ايه
-- وهو بيشتغل زى المثال بتاعنا اللى اتكلمنا عليه فوق وبيعمل التالى :
- هو بيشوف هل فيه طرق متاحة ( Edges ) بين ال Two Vertices اللى احنا هنشتغل عليهم ولا لأ
- لو موجود طرق متاحة ( Edges ) بين ال Two Vertices اللى احنا هنشتغل عليهم فهو بيروح يحدد عددهم
- وبعد كدا بيروح يشوف ايه اقصر طريق فيهم عن طريق انه يحدد ايه اقصر فيهم من حيث عدد ال Vertices اللى هيحتاج يمر عليها فى طريقه بين ال Two Vertices اللى احنا شغالين عليهم
✅ و فعليا google maps مش بيشتغل بال breadth first search علشان الطرق مش بتكون نفس الطول فبيشتغل ب Algorithm تانى اسمه dijkstras algorithm وهو شبه ال breadth first search بس طريقته مختلفة شوية
✅طب ازاى ننشئ ال Algorithm ده فعليا ؟!!
- هسيبلك لينك فيديو كويس اوى بيفهمك ازاى بننشئ ال Algorithm
https://youtu.be/pNWCCHFw7og
✅ ولو حبيت تقرا شوية فى ال Algorithm وتفهمه بشكل اعمق فهسيبلكم لينك مقالة على موقع كويس بيشرح الموضوع بتعمق شوية
https://www.geeksforgeeks.org/breadth-first-search-or-bfs-for-a-graph/
YouTube
#034 [Data Structures] - Breadth First Search Algorithm (BFS)
كورس تراكيب البيانات باللغة العربية
شرح اشهر الطرق بالمرور على عناصر الـ
Graph
مع امثلة
Course Data Structures In Arabic
Breadth First Search Traverse, With Examples
https://www.geeksforgeeks.org/breadth-first-search-or-bfs-for-a-graph/
~
If you like my…
شرح اشهر الطرق بالمرور على عناصر الـ
Graph
مع امثلة
Course Data Structures In Arabic
Breadth First Search Traverse, With Examples
https://www.geeksforgeeks.org/breadth-first-search-or-bfs-for-a-graph/
~
If you like my…
لقيت كنز وحبيت اشاركه معاكم، سلسلة المقالات دي بتشرح مواضيع مهمة في الجافا سكربت عن طريق الأنيميشن زي:
Event loop, Hoisting, Scope Chain, Javascript Engine, Prototypal Inheritance, Generators, Iterators, Promises, and Async/Await.
أنصحك بردو تتابع صاحبة السلسلة دي لانها بتعمل Visualization لمواضيع تانية غير الجافا سكربت زي اوامر Git وغيرها, وده لينك السلسلة:
https://dev.to/lydiahallie/series/3341
Event loop, Hoisting, Scope Chain, Javascript Engine, Prototypal Inheritance, Generators, Iterators, Promises, and Async/Await.
أنصحك بردو تتابع صاحبة السلسلة دي لانها بتعمل Visualization لمواضيع تانية غير الجافا سكربت زي اوامر Git وغيرها, وده لينك السلسلة:
https://dev.to/lydiahallie/series/3341
DEV Community
JavaScript Visualized Series' Articles
View JavaScript Visualized Series' Articles on DEV Community
هل تريد وصفة سحرية لتحقيق النجاح؟
👈 قال أحد الحكماء
"أن لا شيء يستحق العناء سهل المنال".
لا تحسبن المجد تمرا أنت آكله
لن تبلغ المجد حتى تلعق الصبرا
🔷 تتمنى تحقيق الأمنيات، وتأمل في تحقيق الأهداف،
🔴 لا تنتظر فالوقت لا ينتظر
لولا المشقة ساد الناس كلهم
الجود يفقر والإقدام قتال
⏪ هيا انطلق،
سر الانطلاق هو الشغف والطموح اللامحدود،
سر النجاح هو الثقة بالنفس والقدرة على تحقيقه، والجهد المتواصل.
✅ أطلق قواك الكامنة، أنت مخلوق عظيم
والكون بما فيه مسخر لأجلك
✅ إليك بعض الخطوات في رحلة النجاح والتميز:
✔️ الاعتماد والتوكل على الله:
قال عليه الصلاة والسلام "استعن بالله ولا تعجز وإن أصابك شيء فلا تقل لو اني فعلت كان كذا و كذا، ولكن قل قدر الله وما شاء فعل..".
✔️ تهيئة أسباب النجاح:
🔹أهداف طموحة وقابلة للتحقيق
🔹تخطيط جيد بتفكير مستقبلي واع
🔹 استعداد نفسي والخروج من منطقة الراحة.
🔹 تنفيذ مستنير بعزيمة لا تلين،
🔹استمرارية تتخطى كل عقبة،
🔹تقييم ومراجعة واستكشاف،
🔹تحسين مستمر،
🔹الاستفادة من خبرات وتجارب الآخرين،...).
👈 إذا غامرت في شرف مروم
فلا تقنع بما دون النجوم
✔️ اصنع الفرص ولا تخش الفشل.
✔️ ضع الصورة النهائية أمام عينيك وكأنها قريبة.
✔️ كافئ نفسك واحتفل بأي نجاح تحقق.
✔️ ارفع شعارا:
لأستسهلن الصعب أو أدرك المنى
فما انقادت الآمال إلا لصابر
تحدى نفسك،
تحدى أهدافك وآمالك،
تحدى كل المشاكل والعقبات
وثق أنك بمعية الله القادر ستصنع المستحيل.
👈 قال أحد الحكماء
"أن لا شيء يستحق العناء سهل المنال".
لا تحسبن المجد تمرا أنت آكله
لن تبلغ المجد حتى تلعق الصبرا
🔷 تتمنى تحقيق الأمنيات، وتأمل في تحقيق الأهداف،
🔴 لا تنتظر فالوقت لا ينتظر
لولا المشقة ساد الناس كلهم
الجود يفقر والإقدام قتال
⏪ هيا انطلق،
سر الانطلاق هو الشغف والطموح اللامحدود،
سر النجاح هو الثقة بالنفس والقدرة على تحقيقه، والجهد المتواصل.
✅ أطلق قواك الكامنة، أنت مخلوق عظيم
والكون بما فيه مسخر لأجلك
✅ إليك بعض الخطوات في رحلة النجاح والتميز:
✔️ الاعتماد والتوكل على الله:
قال عليه الصلاة والسلام "استعن بالله ولا تعجز وإن أصابك شيء فلا تقل لو اني فعلت كان كذا و كذا، ولكن قل قدر الله وما شاء فعل..".
✔️ تهيئة أسباب النجاح:
🔹أهداف طموحة وقابلة للتحقيق
🔹تخطيط جيد بتفكير مستقبلي واع
🔹 استعداد نفسي والخروج من منطقة الراحة.
🔹 تنفيذ مستنير بعزيمة لا تلين،
🔹استمرارية تتخطى كل عقبة،
🔹تقييم ومراجعة واستكشاف،
🔹تحسين مستمر،
🔹الاستفادة من خبرات وتجارب الآخرين،...).
👈 إذا غامرت في شرف مروم
فلا تقنع بما دون النجوم
✔️ اصنع الفرص ولا تخش الفشل.
✔️ ضع الصورة النهائية أمام عينيك وكأنها قريبة.
✔️ كافئ نفسك واحتفل بأي نجاح تحقق.
✔️ ارفع شعارا:
لأستسهلن الصعب أو أدرك المنى
فما انقادت الآمال إلا لصابر
تحدى نفسك،
تحدى أهدافك وآمالك،
تحدى كل المشاكل والعقبات
وثق أنك بمعية الله القادر ستصنع المستحيل.
Cookies 🍪
Local Storage 💽
Session Storage 💾
أولا: Cookies
هو عباره عن ملف بنفس اسم الserver
بيتخزن في ال Client الخاص بك بيتحفظ فيه مجموعه من البيانات وانت تقدر توصل للملفات دي لانها بتتحفظ داخل الجهاز الخاص بيك
كل البيانات ال بتتحفظ في الCookies
أنت لازم تديهم الصلاحيه لحفظ البيانات دي
مثال:
لما تدخل علي موقع هتلاقي ظهر ليك رساله عباره عن
This website uses cookies
وانت لازم تختار
Yes, I accept Cookies
فانت لازم توافق وتديهم الصلاحية لحفظ البيانات والبيانات دي عباره عن اي عمليه انت عملتها علي الموقع
أو أي بحث عملته داخل الموقع
ثانياً: Sessions
هي عباره عن ملف بيحتوي كل مره علي
Random ID
ومش تقدر توصل للملفات بتاعته لانه بيتخزن في السيرفر بتاع المتصفح في وجود الانترنت لو انت قفلت المتصفح أو النت فصل البيانات بتتمسح وبيحصل لها expire
ثالثاً: Local Storage
البيانات دي بتتحفظ في الbrowser فقط والبيانات دي بتفضل موجوده طول الوقت ملهاش مده انتهاء لازم انت ال تحذفها بنفسك غير كدا هتفضل موجوده
مثال:
لما تيجي تفتح الFacebookلاول مره
لازم تدخل البيانات بتاعتك بعد كدا بيحتفظ بيها في الLocal Storage
وتقدر تدخل بعد كدا بدون ما تسجل بياناتك كل مره
ملحوظه:هو بيحتفظ بيها علي مستوي الbrowserفقط يعني لو جيت تفتح صفحتك من متصفح تاني او جهاز تاني اول مره بس هيطلب منك بياناتك بعد كدا هيحتفظ بيها عنده
ودي مكتبه عباره عن اسكربت بالjsتقدر تستخدمه علشانset,get, delete,read
cookiesلل
وتعرف عدد المرات ال زرت فيها الموقع
Local Storage 💽
Session Storage 💾
أولا: Cookies
هو عباره عن ملف بنفس اسم الserver
بيتخزن في ال Client الخاص بك بيتحفظ فيه مجموعه من البيانات وانت تقدر توصل للملفات دي لانها بتتحفظ داخل الجهاز الخاص بيك
كل البيانات ال بتتحفظ في الCookies
أنت لازم تديهم الصلاحيه لحفظ البيانات دي
مثال:
لما تدخل علي موقع هتلاقي ظهر ليك رساله عباره عن
This website uses cookies
وانت لازم تختار
Yes, I accept Cookies
فانت لازم توافق وتديهم الصلاحية لحفظ البيانات والبيانات دي عباره عن اي عمليه انت عملتها علي الموقع
أو أي بحث عملته داخل الموقع
ثانياً: Sessions
هي عباره عن ملف بيحتوي كل مره علي
Random ID
ومش تقدر توصل للملفات بتاعته لانه بيتخزن في السيرفر بتاع المتصفح في وجود الانترنت لو انت قفلت المتصفح أو النت فصل البيانات بتتمسح وبيحصل لها expire
ثالثاً: Local Storage
البيانات دي بتتحفظ في الbrowser فقط والبيانات دي بتفضل موجوده طول الوقت ملهاش مده انتهاء لازم انت ال تحذفها بنفسك غير كدا هتفضل موجوده
مثال:
لما تيجي تفتح الFacebookلاول مره
لازم تدخل البيانات بتاعتك بعد كدا بيحتفظ بيها في الLocal Storage
وتقدر تدخل بعد كدا بدون ما تسجل بياناتك كل مره
ملحوظه:هو بيحتفظ بيها علي مستوي الbrowserفقط يعني لو جيت تفتح صفحتك من متصفح تاني او جهاز تاني اول مره بس هيطلب منك بياناتك بعد كدا هيحتفظ بيها عنده
ودي مكتبه عباره عن اسكربت بالjsتقدر تستخدمه علشانset,get, delete,read
cookiesلل
وتعرف عدد المرات ال زرت فيها الموقع
دي مجموعة من الكتيبات تقدر تقرأها وأنت في المواصلات كمراجعة على معلوماتك
تتضمن:
- SQL
- Express
- Go
- Swift
- Svelte
- PHP
- HTML
- CSS
- JavaScript
- React
- Python
- Node.js
- Linux
- C
- Next.js
https://lnkd.in/dP9V6WFE
تتضمن:
- SQL
- Express
- Go
- Swift
- Svelte
- PHP
- HTML
- CSS
- JavaScript
- React
- Python
- Node.js
- Linux
- C
- Next.js
https://lnkd.in/dP9V6WFE
lnkd.in
LinkedIn
This link will take you to a page that’s not on LinkedIn
1672002442280.jfif
33.6 KB
CSS Tips
For border-radius in RTL and LTR direction
For border-radius in RTL and LTR direction