صديقي مطور الفرونت ايند 🎨
لو شغال على الـ Frontend، دي أفضل VS Code Extensions اللي هتسهل عليك الكود وتوفر وقتك ⏳
🔹 Path Intellisense
بتكمل لك مسارات الملفات أوتوماتيكيًا.
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
🔹 React PropTypes Intellisense
بسرعة اكتب الـProps في React من غير تعب.
https://marketplace.visualstudio.com/items?itemName=OfHumanBondage.react-proptypes-intellisense
🔹 npm Intellisense
مش هتحتاج تفكر في كتابة أوامر npm تاني، الإضافة هتكمل لك كل حاجة.
https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense
🔹 Color Highlight
بيظهر لك الألوان اللي كتبتها في الكود بشكل فوري.
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight
🔹 Auto Rename Tag
غير اسم الوسم مرة واحدة وهيتغير تلقائيًا في المكان المقابل.
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
🔹 Code Spell Checker
تصحيح تلقائي لأخطاء الإملاء في الكود.
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
🔹 JSON Tools
تعامل أسهل مع ملفات JSON.
https://marketplace.visualstudio.com/items?itemName=eriklynd.json-tools
🔹 ESLint
حلل الكود واكتشف الأخطاء بكل سهولة.
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
🔹 Bracket Pair Colorizer
ألوان مختلفة لكل زوج من الأقواس علشان تميز بسهولة.
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
🔹 Live Server
شغل خادم محلي وشوف التعديلات بتاعتك مباشرة.
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
🔹 Live Sass Compiler
حول ملفات Sass إلى CSS بشكل تلقائي.
https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
🔹 Better Comments
اكتب تعليقات منسقة وملونة في الكود.
https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
🔹 Material Icon Theme
أيكونز جديدة ومنظمة لكل ملفاتك.
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
🔹 HTML Snippets
اكتب HTML أسرع مع اختصارات جاهزة.
https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets
🔹 CSS Peek
شوف بسرعة الـCSS المرتبط بأي عنصر HTML.
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
🔹 Quokka.js
عرض فوري لنتائج الأكواد في JavaScript وTypeScript.
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
🔹 Import Cost
اعرف حجم المكتبات اللي بتستخدمها في المشروع.
https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost
🔹 Prettier - Code Formatter
نسيق تلقائي للكود بشكل منظم وجذاب.
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
🔹 SVG Viewer
تعديل سهل لملفات SVG مباشرة من VS Code.
https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer
🔹 REST Client
زي Postman، بعت طلبات HTTP من VS Code وشوف النتيجة.
https://marketplace.visualstudio.com/items?itemName=humao.rest-client
🔹 Thunder Client
بديل لـ Postman لاختبار الـAPIs مباشرة من VS Code.
https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client
🔹 Polacode
لقطات كود مميزة لمشاركتها مع زملائك.
https://marketplace.visualstudio.com/items?itemName=pnp.polacode
🔹 IntelliSense for CSS class names in HTML
اقتراحات تلقائية لأسماء الكلاسات في HTML بناءً على CSS.
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
🔹 Code Runner
تشغيل سريع للكود من داخل VS Code.
https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner
🔹 Peacock
لون واجهة VS Code حسب كل مشروع لسهولة التمييز.
https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock
لو شغال على الـ Frontend، دي أفضل VS Code Extensions اللي هتسهل عليك الكود وتوفر وقتك ⏳
🔹 Path Intellisense
بتكمل لك مسارات الملفات أوتوماتيكيًا.
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
🔹 React PropTypes Intellisense
بسرعة اكتب الـProps في React من غير تعب.
https://marketplace.visualstudio.com/items?itemName=OfHumanBondage.react-proptypes-intellisense
🔹 npm Intellisense
مش هتحتاج تفكر في كتابة أوامر npm تاني، الإضافة هتكمل لك كل حاجة.
https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense
🔹 Color Highlight
بيظهر لك الألوان اللي كتبتها في الكود بشكل فوري.
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight
🔹 Auto Rename Tag
غير اسم الوسم مرة واحدة وهيتغير تلقائيًا في المكان المقابل.
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
🔹 Code Spell Checker
تصحيح تلقائي لأخطاء الإملاء في الكود.
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
🔹 JSON Tools
تعامل أسهل مع ملفات JSON.
https://marketplace.visualstudio.com/items?itemName=eriklynd.json-tools
🔹 ESLint
حلل الكود واكتشف الأخطاء بكل سهولة.
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
🔹 Bracket Pair Colorizer
ألوان مختلفة لكل زوج من الأقواس علشان تميز بسهولة.
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
🔹 Live Server
شغل خادم محلي وشوف التعديلات بتاعتك مباشرة.
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
🔹 Live Sass Compiler
حول ملفات Sass إلى CSS بشكل تلقائي.
https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
🔹 Better Comments
اكتب تعليقات منسقة وملونة في الكود.
https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
🔹 Material Icon Theme
أيكونز جديدة ومنظمة لكل ملفاتك.
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
🔹 HTML Snippets
اكتب HTML أسرع مع اختصارات جاهزة.
https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets
🔹 CSS Peek
شوف بسرعة الـCSS المرتبط بأي عنصر HTML.
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
🔹 Quokka.js
عرض فوري لنتائج الأكواد في JavaScript وTypeScript.
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
🔹 Import Cost
اعرف حجم المكتبات اللي بتستخدمها في المشروع.
https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost
🔹 Prettier - Code Formatter
نسيق تلقائي للكود بشكل منظم وجذاب.
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
🔹 SVG Viewer
تعديل سهل لملفات SVG مباشرة من VS Code.
https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer
🔹 REST Client
زي Postman، بعت طلبات HTTP من VS Code وشوف النتيجة.
https://marketplace.visualstudio.com/items?itemName=humao.rest-client
🔹 Thunder Client
بديل لـ Postman لاختبار الـAPIs مباشرة من VS Code.
https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client
🔹 Polacode
لقطات كود مميزة لمشاركتها مع زملائك.
https://marketplace.visualstudio.com/items?itemName=pnp.polacode
🔹 IntelliSense for CSS class names in HTML
اقتراحات تلقائية لأسماء الكلاسات في HTML بناءً على CSS.
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
🔹 Code Runner
تشغيل سريع للكود من داخل VS Code.
https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner
🔹 Peacock
لون واجهة VS Code حسب كل مشروع لسهولة التمييز.
https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock
👍2❤1
تعلم الآن 🚀
🌐 HTML → من خلال FreeCodeCamp
🎨 CSS → عبر FreeCodeCamp
📜 JavaScript → من FreeCodeCamp
🖼️ تصميم الويب → بواسطة FreeCodeCamp
⚛️ React → من خلال FreeCodeCamp
🐍 Python → عبر FreeCodeCamp
🔧 Git و GitHub → بواسطة FreeCodeCamp
🔗 API → عبر FreeCodeCamp
🟢 Node.js → من FreeCodeCamp
🌐 HTML → من خلال FreeCodeCamp
🎨 CSS → عبر FreeCodeCamp
📜 JavaScript → من FreeCodeCamp
🖼️ تصميم الويب → بواسطة FreeCodeCamp
⚛️ React → من خلال FreeCodeCamp
🐍 Python → عبر FreeCodeCamp
🔧 Git و GitHub → بواسطة FreeCodeCamp
🔗 API → عبر FreeCodeCamp
🟢 Node.js → من FreeCodeCamp
إليك قائمة بأهم المواقع لتطوير مهاراتك في حل مسائل Problem Solving في البرمجة:
1. Codewars
موقع يحتوي على تحديات برمجية بمستويات متنوعة، مناسب للتدريب المستمر.
رابط: codewars.com
2. LeetCode
من أشهر المواقع لتدريب مقابلات العمل في الشركات الكبرى مثل Google و Facebook.
رابط: leetcode.com
3. HackerRank
أنصح به للمبتدئين، يقدم تحديات تغطي العديد من المفاهيم البرمجية.
رابط: hackerrank.com
4. TopCoder
موقع معروف للمسابقات البرمجية العالمية مع مجتمع نشط من المبرمجين.
رابط: topcoder.com
5. Coderbyte
يقدم تدريبات برمجية مثالية لتحسين المهارات.
رابط: coderbyte.com
6. Codeforces
موقع مشهور بالمسابقات البرمجية الحية، مناسب للمحترفين.
رابط: codeforces.com
هذه المواقع ستساعدك على تطوير مهاراتك سواء كنت مبتدئًا أو محترفًا!
1. Codewars
موقع يحتوي على تحديات برمجية بمستويات متنوعة، مناسب للتدريب المستمر.
رابط: codewars.com
2. LeetCode
من أشهر المواقع لتدريب مقابلات العمل في الشركات الكبرى مثل Google و Facebook.
رابط: leetcode.com
3. HackerRank
أنصح به للمبتدئين، يقدم تحديات تغطي العديد من المفاهيم البرمجية.
رابط: hackerrank.com
4. TopCoder
موقع معروف للمسابقات البرمجية العالمية مع مجتمع نشط من المبرمجين.
رابط: topcoder.com
5. Coderbyte
يقدم تدريبات برمجية مثالية لتحسين المهارات.
رابط: coderbyte.com
6. Codeforces
موقع مشهور بالمسابقات البرمجية الحية، مناسب للمحترفين.
رابط: codeforces.com
هذه المواقع ستساعدك على تطوير مهاراتك سواء كنت مبتدئًا أو محترفًا!