بوست جديد لا تنسو اللايك والحفظ😍😍
https://www.instagram.com/p/CofSbBtt2x1/?igshid=OGQ2MjdiOTE=

10 مشاريع Frontend رهيبة للتدريب وتطوير مهارتك.. باستخدام HTML و CSS فقط 👏🏻⚡️


1:: بناء موقع بخلفية فيديو
https://www.youtube.com/watch?v=8MgpE2DTTKA


2:: بناء صفحة هبوط احترافية
https://www.youtube.com/watch?v=X1dz0xRbSJc


3:: بناء صفحة دخول وتسجيل احترافية
https://www.youtube.com/watch?v=cxm5bCCa9OA&t=6s


4:: صفحة هبوط بصورة خلفية بكامل الشاشة
https://www.youtube.com/watch?v=hVdTQWASliE


5:: متجر إلكتروني
https://www.youtube.com/watch?v=yQimoqo0-7g


6:: بناء موقع وكالة إبداعية
https://www.youtube.com/watch?v=lvYnfMOUOJY


7:: بناء موقع زجاجي
https://www.youtube.com/watch?v=O7WbVj5apxU


8:: بناء سكشن فريق العمل بطريقة إبداعية
https://www.youtube.com/watch?v=Q22Tli-D4mw


9:: صفحة هبوط لمنتج واحد
https://www.youtube.com/watch?v=61R5kn_kYwY


10:: صفحة الأسعار أو الباقات
https://www.youtube.com/watch?v=SWyuQMCTxCQ

ريلز جديد ومفيد🔥🔥
https://www.instagram.com/reel/CohxcZrAeRH/?igshid=YmMyMTA2M2Y=

ما هو إطار ANGULAR، أهم ميزاته، سلبياته و متى تستخدمه ؟
للـ Angular تاريخ كبير، فهي أول إطار عمل (Framwrok) من تطوير شركة جوجل ، أول إصدار لها كان سنة 2016 و حملت إسم AngularJS، و كانت حينها تستخدم بشكل كبير فقط في صناعة صفحات الويب SAP (Single Application Page) و هي مواقع الويب التي تقوم بعملها دون تحديث الصفحة ( مثلا عند البحث في موقع ستجد انه أخذك لصفحة نتائج البحث  وخرج من الصفحة التي كنت انت بها لكن مع هذه التقنية سوف يظهر لك النتائج دون تحديث الصفحة سوف تظل بنفس الصفحة )، ثم بعدها جائت إصدارات أخرى مثل إصدار Angular 2 سنة 2017 إلى حين إصدار Angular 10 والان الاصدار 11 ولكن هو مازال غير مستقر بالقدر الكافي  .
تعتمد الـ Angular على معمارية MVC  اختصار لــ (Model–view–controller)
بحيث تفصل بين العمل الخلفي الذي يتم من خلاله بناء قواعد المشروع، و العمل الأمامي الذي يتم من خلاله بناء واجهة المشروع، و هو ما يميز Angular على إطارات جافاسكربت أخرى.

ميزات الـ Angular :

حين تتوجه الى الـ Angular ستصادف الكثير من الميزات في هذا الإطار:

أولا  الـ Angular يعتمد على الـ TypeScript فإنك ستجد سهولة كبيرة في كتابة الكود البرمجي بالجافاسكربت و ستختصر عليك الكثير في أسطر قليلة.



ثانيا سهولة تعديل الكود في الـ Angular مثالية جدا، فبفضل تقسيم الـ Compontents سيمكنك صناعة التحكم في جزء واحد من المشروع دون التأثير على باقي الأجزاء، و لإعتمادها على الجافاسكربت سيمكنك تنصيب مكتبات أخرى او إستخدام تقنيات أخرى تتماشى معها في المشروع البرمجي مثل Webpack (هو مجمعة وحدات جافا سكريبت مفتوحة المصدر.)لإدارة موارد المشروع.

-ثالثا  الميزة الأكبر للـ Angular أنها ليست محصورة فقط على مواقع الويب، بل متاحة لتطوير حتى تطبيقات الموبايل و تطبيقات سطح المكتب.

-ربعا  يعتمد الـ ANGULAR في بيئة عمله على صناعة COMPONENTS و هي أجزاء في صفحة الويب مثلا COMPONENT خاص بالتسجيل، و COMPONENT خاص بالبحث و ما الى ذلك، و في الصفحات التي تقوم ببنائها كل ما عليك فعله هو تركيب الوسم (TAG) الخاص  
بالـCOMPONENT من أجل إشتغاله، مثلا <LOGIN></LOGIN>،

و هذا يبرز سهولة في إنشاء صفحات الويب بكل سهولة.
سلبيات الـ Angular :

بالرغم من أنه إطار إحترافي و مثالي، لكن انصحك بتعلم الـ Angular في نسخته الأخيرة، فللأسف نجد أحيانا تغيير جذري او كبير جدا في الكود الخاص بالـ Angular بين النسخ .

- علي الرغم من تعدادية دعم المنصات الويب والموبيل وسطح المكتب الا  ان تطوير تطبيق ويب بالـ Angular مختلف عن تطوير تطبيق موبايل و مختلف عن تطوير تطبيق سطح المكتب، و ستجد نفسك كما لو كنت تطور بإطار آخر كليا.

- آداء الـ Angular ضعيف نسبيا مقارنة مع الـ Vuejs و React ، قد تلاحظ ان الـ vuejs أسرع من حيث الآداء مثلا.

متى تستخدم الـ Angular ؟

-في كل مرة تريد إنشاء منصة ويب متكاملة و حركية ذات ديناميكية وحيدة (SPA) تطبيقات الويب أحادية الصفحة، او حين تريد فقط إنشاء موقع بشكل أكثر إحترافية فإن الـ Angular رائعة لهذا .

- يمكن أيضا إعتماد الـ Angular في تطوير تطبيقات سطح المكتب بحيث توفر سهولة في الإستخدام و العمل.

الافضل لا تستخدام الـ Angular في تطوير تطبيقات الموبايل الا البسيط منها لانها لم ترقي الي التخصصية في هذا الجزاء بعد ولكنها قادمة وبقوه في التحديثات القريبة

🔰    مـواقـع مُـفـيـدة

أغلبية الباحثين  يلجؤون إلى Google, و لايعودون إلَّا بالقليل أو معلوماتٍ غير مؤكدة، وفي هذا المنشور تجدون أهم 12 موقع جاد في شؤون العلم والثقافة.

🔹 موقع Refseek :
محركُ بحث يوفر المصادر الأكاديمية بطريقة سهلة أكثر من مليار مصدر من الكتب والمجلات والأخبار والموسوعات
🌐 رابط الموقع :
https://www.refseek.com

🔹 موقع WorldCat :
محركُ بحث سهل الإستخدام يبحث في أكثر من 20 ألف مكتبة ويحتوي على أكثر من 2 مليار مصدر ويُمكنك من إيجاد أقرب مكتبة لك.
🌐 رابط الموقع :
https://www.worldcat.org

🔹 موقع Springer :
يحتوي على أكثر من 3 مليون مصدر في مختلف المجالات العلمية من مقالات وأوراق ومؤتمرات وأجزاء من كتب.
🌐 رابط الموقع :
https://link.springer.com

🔹 موقع Microsoft Academic :
يحمل نتائج بحث واسعة المحتوى للأكاديميين ويتم تحديثها باستمرار يحتوي على أكثر من 120 مليون مطبوعة.
🌐 رابط الموقع :
https://academic.microsoft.com

🔹 موقع Bioline :
محرك بحث تطوعي يعمل على جمع المقالات المنشورة في المجلات العلمية بالدول النامية مثل مصر و تركيا والعراق والأردن وغيرها
🌐 رابط الموقع :
http://www.bioline.org.br

🔹 موقع EThOS :
يحملُ أكثر من 500 ألف رسالة ماجستير و دكتوراة في جميع المجالات.
🌐 رابط الموقع :
https://ethos.bl.uk

🔹 موقع Research Paper’s in Economics :
محرك بحث يحتوي على أكثر من مليوني بحث في علم الإقتصاد والعلوم الأخرى ذات صلة.
🌐 رابط الموقع :
http://repec.org

🔹 موقع Science.gove :
محرك بحث علمي تابع للحكومة الأمريكية يجمع أكثر من 2000 موقع علمي ويحتوي على أكثر من 200 مليون ورقة و نتائج موثوقة.
🌐 رابط الموقع :
https://www.science.gov

🔹 موقع Kotobgy :
محركُ بحث كُتبي رائع جداً يحتوي على الملايين من الكتب العربية القابلة للتحميل.
🌐 رابط الموقع :
https://www.kotobgy.com

🔹  موقع Pdfdrive :
أكبر وأفضل موقع لتحميل الكتب في جميع التخصصّات بصيغة PDF يحتوي أكثر من 225 مليون كتاب جاهز للتحميل المباشر ويمكن استخدامه للدراسة.
🌐 رابط الموقع :
https://www.pdfdrive.com

🔹 موقع ISEEK Education :
محركُ بحث ممتاز يستهدف الطلاب والمعلمين والإداريين وغيرهم يحتوي على مواد موثوقة ومحررة.
🌐 رابط الموقع :
https://education.iseek.com

🔹 موقع Base-search :
من أفضل وأقوى محركات البحوث الأكاديمية توجد أكثر من 100 مليون وثيقة علمية ويقوم بالبحث في 3 آلاف مصدر، %70من المقالات مجانية.
🌐 رابط الموقع :
https://www.base-search.com

أدوات ما استغني عنها كمبرمج🚀
https://www.instagram.com/reel/Com9VxRAf8A/?igshid=YmMyMTA2M2Y=

📌موقع جدا رهيب لمطورين Front-End 👌😍
يعطيك قائمة بالاشياء اللي لازم تسويها لما تعمل تصميم جديد ب HTML / CSS / JAVASCRIPT  وحتى ال SEO ✅
ومقسم لك المهام على حسب الاهمية 🏅

https://frontendchecklist.io

مواقع مفيدة جدا ستتمنى لو عرفتها من قبل :

dictation.io
موقع يقوم بتحويل صوتك وكلامك إلى نص ، لن تحتاج للكتابة بعد الآن

3dicons.co
افضل موقع للحصول على صور 3D و ملحقات للتصميم مجانا


ilovepdf.com
موقع يسمح لك ان تقوم بالتحويل بين جميع أنواع الملفات... PDF, WORD, EXEL

shortlyai.com
موقع اعطيه عنوان البحث وسيكتب لك مقالات بإستخدام الذكاء الاصطناعي

typingclub.com
موقع رائع جدا يساعدك على ان تصبح سريع في الكتابة على الكيبورد ب 10 أصابع

موقع يوفر اكواد جاهزه لمصممين المواقع 🚀🚀
https://www.instagram.com/reel/CoxU7eljknU/?igshid=OTJlNzQ0NWM=

افضل 5 افلام للمصممين


Abstract: The Art of Design
للمشاهدة : https://www.netflix.com/tr-en/title/80057883



The Social Dilemma
للمشاهدة : https://www.netflix.com/tr-en/title/81254224



The Pixar Story:
للمشاهدة : https://www.disneyplus.com/en-gb/movies/the-pixar-story/5aLi1N5xRzf1



Highscore
للمشاهدة : https://www.netflix.com/tr-en/title/81019087



Print The Legend
للمشاهدة : https://www.netflix.com/tr-en/title/80005444

5 مواقع للأيقونات المتحركة، رهيبـــة لمطوّرين الـ Frontend 😍😍

1️⃣ Lordicon
https://lordicon.com/

2️⃣ Icons8
https://icons8.com/animated-icons

3️⃣ Loading
https://loading.io/icon/

4️⃣ Lottieflow
https://www.finsweet.com/lottieflow/

5️⃣ UseAnimation
https://useanimations.com/#explore

مصادري السرية في التصميم الجزء الثاني
كل مصمم لديه مصادر تساعده وتسهل عليه العمل ك مصمم. سأشارك معك مجموعة من المصادر.

لتحميل للأيقونات المتحركة
Lordicon
lordicon.com/
Lottiefiles
lottiefiles.com/animation/icon
Icons8
icons8.com/animated-icons
Iconscout
iconscout.com/animated-icons
لتحميل للرسومات
Themeisle
themeisle.com/illustrations/
drawkit
drawkit.com/
Drawer Avatar
https://2u.pw/YVLhg
UIMaterial
uimaterial.com/
للموكاب
Graphic Wave
graphicwave.net/
Dribbble
dribbble.com
Behance
behance.net
Figma
figma.com/community

لعمل تدرجات لونية
Mesh Gradient
meshgradient.com
Gradienta
gradienta.io
Coolors Gradients
coolors.co/gradients

وظائف array javascript

كورس عمل مشاريع html css js
https://youtu.be/HSnObp6eAyE

📌 الكثير مايعرف أهمية وسوم HTML  HEAD او ينسى بعض الوسوم 🤖

هذا الموقع الرهيب يختصر لك كل شيء تبي تعرفه عن HTML Head 👌🔥
ويعرض لك قائمة بكل الوسوم اللي تحتاجها 👇

https://htmlhead.dev/

تطبيقات عملية على جافا سكريبت
https://youtube.com/playlist?list=PL0NXc3SfXYNTi48PixMjLY-CanLxI04x1

zamericanenglish
افضل قناة يوتيوب لتعلم الانجليزية يعلمك بطريقة ممتعة و مميزة جد

inglisi.com
موقع رائع جدا اكتشفته مؤخرا يساعدك على تعلم الانجليزية من الصف

taleek
تطبيق طليق من أفضل التطبيقات لتعلم اللغات و منها الانجليزية

duolingo
دولینجو اشہر تطبیق مخصص لتعلم اللغات يساعدك على التعلم بطريقة ممتعة

free4talk.com
موقع رائع للقيام بدردشات صوتية مع متعلمين آخرين من مختلف دول العالم

📌لو تتابع شروحات فيديو للبرمجة او اي مهارة اخرى هذا الموقع جدا بطل 😍

تقدر تسجل ملاحظاتك او اي شيء باسفل المقطع ويتوقف المقطع تلقائي اذا بديت تكتب وتقدر تحدد نوعها سوا كان ملاحظة او سؤال
كل اللي عليك تنسخ رابط المقطع وتحطه بالموقع ✅


يستحق التجربه 👏
https://moocnote.com/

📌موقع كنز لمطورين FrontEnd 🔥😍

فيه ادوات كثيرة تفيدك وتختصر لك الوقت مثل
SVG Generator
CSS Cubic Bezier Generator
CSS Gradient Generator
CSS Minifier
@pro2dev
JavaScript Minifier

يستحق التجربة 👨‍💻
🔗 https://10015.io

تصميم موقع تواصل اجتماعي من الصفر إلى الاحتراف
https://youtu.be/AiFfDjmd0jU