التنمية في الواجهة الأمامية
أهلاً
هذا مستودع مفتوح المصدر لجميع الذين يرغبون في تعلم التنمية الأمامية.
التنمية في الواجهة الأمامية
تطوير الويب الأمامي هو ممارسة تحويل البيانات إلى واجهة رسومية ، من خلال استخدام HTML و CSS و JavaScript ، بحيث يمكن للمستخدمين عرض هذه البيانات والتفاعل معها.
تأكد من إظهار دعمك من قبل Star Mark ومشاركة المستودع
قائمة الموارد المفيدة لمطوري الواجهة الأمامية
جدول المحتويات
- التنمية في الواجهة الأمامية
- أهلاً
- قائمة الموارد المفيدة لمطوري الواجهة الأمامية
- جدول المحتويات
- خريطة الطريق
- مفيد
- تعلُّم
- a11y
- قنوات يوتيوب
- المدونات
- البودكاست
- محرري الرمز
- امتدادات رمز الاستوديو البصرية
- أدوات
- أطر CSS
- أيقونات
- الألوان
- الطباعة
- إلهام التصميم
- أطراف الرسوم المتحركة
- موارد الأسهم
- تحديد الموقع الجغرافي
- واجهات برمجة التطبيقات
- النماذج
- كتب
- التحديات / الألعاب
- أدوات مجانية للطلاب
- مقاطع فيديو يوتيوب
- الاختبار
خريطة الطريق
- خريطة الطريق-للحصول على خريطة طريق خطوة بخطوة موصوفة جيدًا للمطورين في الواجهة الأمامية.
مفيد
- BGJAR - مولد خلفية SVG مجاني لمواقع الويب الخاصة بك والمدونات والتطبيق.
- فحص - فحص وتصحيح تطبيقات الويب والمواقع على شبكة الإنترنت على أجهزة iOS مباشرة من Mac أو Windows.
تعلُّم
- دليل كامل إلى FlexBox | CSS -Tricks - دليل شامل لتخطيط Flexbox.
- دليل كامل لشبكة | CSS -Tricks - دليل شامل لتخطيط الشبكة.
- مستخدم طاقة سطر الأوامر - سلسلة فيديو لمطوري الويب على تعلم سير عمل خط الأوامر الحديث مع ZSH و Z والأدوات ذات الصلة.
- شبكة CSS - دورة فيديو كاملة كل شيء عن شبكة CSS
- Best Of JS موقع للتحقق من أفضل repos github لإطار عمل JS المفضل لديك
- Codecademy - سلسلة من الدورات التفاعلية التي تدرس العالم كيفية الترميز. تقديم اشتراكات مجانية ومدفوعة عبر مجموعة متنوعة من اللغات.
- Codementor - أداة للحصول على مساعدة من المطورين ذوي الخبرة في لغات الترميز المختلفة في رحلة التعلم الخاصة بك.
- مواضيع Scaler - منصة لتعلم لغات البرمجة مثل HTML و Java و JavaScript و Python وما إلى ذلك.
- تخطيطات قهر الاستجابة - صنعها كيفن باول (https://twitter.com/kevinjpowell). يأخذك هذه الدورة عبر كل ما تحتاج إلى معرفته لإنشاء تخطيطات سريعة الاستجابة في دورة مدتها 21 يومًا.
- Coursera - مجموعة مختارة من الدورات من المدارس ذات السمعة الطيبة مثل ستانفورد وييل.
- CSS Almanac | CSS -Tricks - دليل مرجعي سريع للعديد من ميزات CSS.
- CSS Grid Playground - دليل مرئي برعاية فريق Mozilla لمساعدتك في تعلم ميزات تخطيط شبكة CSS مع الكثير من الأمثلة من التعليمات البرمجية والعروض التوضيحية.
- موارد التصميم - تصميم الموارد من Skullface.
- Dev.To - حيث يشارك المبرمجون الأفكار ويساعدون بعضهم البعض على النمو.
- DevProjects - يتكون مجتمع مجاني من مشاريع منسقة من كبار المطورين لمساعدتك في سد الفجوة بين النظرية والممارسة. !
- أكاديمية Dicoding - حيث يمكن للجميع تعلم البرمجة من الأساسيات ( متوفرة فقط في باهاسا إندونيسيا ).
- EDX - سلسلة من الدورات على مستوى الجامعة من هارفارد ، معهد ماساتشوستس للتكنولوجيا ، وارتون ، وأكثر من ذلك.
- EGGHEAD - دروس فيديو تطوير الويب في شرائح "Size -Size". لديه كل من عضوية مجانية و "برو" (مدفوعة).
- enboard | الموارد الأمامية - الموارد المنظمة حول التنمية الأمامية.
- Flexbox - رفع مستوى معرفتك Flexbox - دورة قصة عبر الإنترنت تتمحور حول الزومبي.
- Freecodecamp - مورد مجاني يتضمن مشاريع البرمجة وإعداد المقابلة لوظائف المطورين.
- Frontend Masters - دروس فيديو تطوير الويب من قادة الصناعة (تم تحديثها بشكل متكرر). على حد سواء مجاني (وقت محدود) وعضوية مدفوعة الأجر.
- Open Stack Open - دورة على تطوير الويب الكامل المكدس من جامعة هيلسينسكي. تعلم React و Redux و Node.js و MongoDB و GraphQL و TypeScript في واحد! ستقدمك هذه الدورة التدريبية لتطوير الويب القائم على JavaScript الحديثة. ينصب التركيز الرئيسي على بناء تطبيقات صفحات واحدة باستخدام ReactJs التي تستخدم واجهات برمجة التطبيقات REST مصممة مع Node.js.
- Geeksforgeeks - بوابة علوم الكمبيوتر للمهوسون.
- أكاديمية خان - منصة تعليمية عالمية عبر الإنترنت توفر أيضًا الدورات المهمة للمطورين.
- Learnanything - ابحث عن خرائط العقل التفاعلية لتعلم أي شيء.
- تعلم JavaScript - تعلم JavaScript في بيئة تفاعلية. اقرأ الدروس القصيرة ، وتدوين الملاحظات ، وتحديات كاملة مباشرة في متصفحك.
- Mastering Markdown - سلسلة مصغرة ستغير كيفية كتابة الوثائق.
- شبكة مطور Mozilla - أحدث المعلومات حول تقنيات الويب المفتوحة.
- أكمل دروس تطوير الويب -lyty.dev الكاملة دروس تطوير الويب مع أمثلة موضحة جيدًا مجانًا.
- Pluralsight - تدريب مطور غير محدود عبر الإنترنت من خبراء الصناعة.
- سايلور - حل تعليمي مفتوح عبر الإنترنت يوفر فرص ائتمان للكلية للطلاب.
- Scrimba-التعلم القائم على الرمز القائم على الكود في مجموعة متنوعة من اللغات.
- سكوتش - العديد من دورات تطوير الويب. لديه كل من عضوية مجانية و "قسط" (مدفوع).
- دورات البحث - مجموعة مختارة من الدورات والدروس التعليمية.
- Sololearn- بوابة مجانية لتعلم تطوير الويب.
- Team Treehouse - التعلم ذاتيًا عبر مجموعة متنوعة من اللغات والمواد.
- البرنامج التعليمي JavaScript الحديث - كل شيء عن لغة JavaScript.
- مشروع ODIN - منهج مفتوح المصدر لتعلم تطوير الويب
- نقاط البرامج التعليمية - دروس للعديد من اللغات المختلفة مع أمثلة التعليمات البرمجية التفاعلية.
- Udacity - تعلم أي شيء عبر الإنترنت - التعلم العميق ، التعلم الآلي ، لغات الواجهة الأمامية.
- Udemy - سوق التعلم والتدريس عبر الإنترنت.
- شاهد ورمز - مدرسة علوم الكمبيوتر للطلاب الذين يطالبون بالصرامة الفكرية والعمق.
- W3School - مكتبة مرجعية لتطوير الويب. يغطي HTML و CSS و JavaScript (jQuery و Ajax والمزيد) ، وكذلك بعض اللغات من جانب الخادم. يتضمن الأوصاف والأمثلة التفاعلية.
- ويب واجهات برمجة التطبيقات | MDN - كل شيء يحتاج المبتدئ إلى معرفته عن واجهات برمجة تطبيقات الويب.
- تصميم الويب في 4 دقائق من قبل جيريمي توماس منشئ من Bulma CSS و Marksheet.io.
- Wesbos - دورات مجانية ومتميزة في تطوير الويب
- Web Dev Tricks - جميع رموز Trending CSS و JS و JQuery مع رموز المصدر في مكان واحد. شريكك المفيد لجميع أنواع تطوير الويب الحديثة والتصاميم.
- Web.dev - أدلة وموارد لمواقع الويب السريعة الحديثة من قبل مطوري Google.
- كن مطور ويب في الواجهة الأمامية - قم بتطوير الكفاءة مع HTML و CSS و JavaScript و JQuery.
- webglossary.info - مسرد لتطوير وتصميم الويب ، مع أكثر من 3500 مشاركة (حسب أغسطس 2023)
- مهارات الويب - نظرة عامة مرئية على المهارات المفيدة للتعلم كمطور ويب.
- App Brewery - كل ذلك في منصة واحدة لتغطية مهارات تطوير الويب الخاصة بك
- Full Stack Open 2021 - تعمل هذه الدورة كمقدمة لتطوير تطبيقات الويب الحديثة مع JavaScript.
- DevTools Tech - منصة إعداد مقابلة مجانية لمهندسي الواجهة الأمامية مع التركيز على أسئلة برمجة العالم الحقيقي عالية الجودة.
⬆ العودة إلى الأعلى
a11y
- دليل نمط A11y - دليل نمط المعيشة أو مكتبة أنماط ، تم إنشاؤها من أنماط KSS الموثقة ... مع تطور إمكانية الوصول.
- AX - مجموعة أدوات اختبار الوصول.
- محلل تباين الألوان - يساعدك CCA على تحديد وضوح النص وتناقض العناصر المرئية ، مثل عناصر التحكم الرسومية والمؤشرات المرئية.
- جامعة ديك - دورات على الإنترنت حول مهارات الوصول إلى الويب والهاتف المحمول.
- مقدمة W3C لإمكانية الوصول إلى الويب - الاستراتيجيات والمعايير والموارد اللازمة لجعل الويب متاحًا للأشخاص ذوي الإعاقة.
⬆ العودة إلى الأعلى
قنوات يوتيوب
- Apna College- دروس في HTML ، CSS ، Bootstrap ، JavaScript ، Git ، Github ، SQL
- دروس Adrian Twarog- على HTML ، CSS ، Bootstrap ، JavaScript ، React ، React
الأصلي ، واجهة المستخدم/UX وأشياء رائعة التصميم - 1stWebDesigner - دروس على WordPress ، PSD إلى HTML
- Brad Hussey - دروس في Bootstrap و Sass و JQuery و PHP و Freelancing
- CSS Tricks - قناة YouTube من Tricks CSS Development Design Design With CSS من قبل Chris Coyier.
- دروس CSS - دروس في اللغة الهندية من قبل Husain Sir تغطي جميع أساسيات CSS.
- دليل المبرمج - البرامج التعليمية على HTML و CSS و JavaScript و Bootstrap
- CodeVolution - دروس على React ، Vue ، Angular ، MongoDB ، JavaScript ، Mean Stack ، HTML ، CSS.
- مبرمج ذكي - دروس على React و MongoDB و JavaScript و Mern Stack و HTML و CSS و React Native.
- Derek Banas - دروس في C#، Visual Basic ، Django ، Python ، Nodejs ، AngularJS ، Mongodb ، Jquery ، JavaScript ، CSS ، Ruby on Rails ، Java ، Sqlite ، Android ، HTML ، PHP ، Positive C
- DevTips - دروس على HTML5 ، CSS ، Sass ، Bootstrap ، Foundation ، JQuery ، Ruby on Rails ، Github.
- DesignCourse - دروس في تصميم UI/UX أو HTML5 ، CSS ، SASS ، مكتبة الرسوم المتحركة.
- Dennis Ivy - دروس في مشاريع تطوير الويب Django & Flask Full -Stack
- مدرسة Elzero Web - اللغة العربية فقط
- FreeCodecamp - دروس حول jQuery ، JavaScript ، React ، الرياضيات ، العلوم ، هندسة البرمجيات ، البرمجيات المفتوحة المصدر
- وظيفة ممتعة ممتعة - دروس في جافا سكريبت ، رد فعل ، البرمجة الوظيفية ، GraphQL ، الحياة كمطور
- Google Chrome Developers - أحدث وأكبر محادثات حول تطوير الويب الحديثة مع Pro -Tips ، الرؤى ، والتقنيات لمساعدتك على رفع مستوى مهارة تطوير الويب الخاصة بك.
- Kevin Powell - دروس في HTML ، CSS ، مما يساعد على فهم CSS بشكل أفضل بطريقة بسيطة
- LearnCode.Academy - دروس على HTML ، CSS ، JQuery ، JavaScript ، React JS / Redux ، العقدة JS
- Levelupuputs - دروس على HTML ، CSS ، Sass ، WordPress ، Magento ، Drupal ، React ، Meteor
- Mackenzie Child - Design to Code Challenge - البرامج التعليمية على واجهة المستخدم ، كيفية تصميم ورمز أنماط متعددة من المواقع.
- قطار الترميز - البرامج التعليمية على JavaScript ، العقدة ، التعلم الآلي ، الشبكات العصبية ، الخوارزميات
- NET NINJA - البرامج التعليمية على HTML و CSS و JQuery و JavaScript و Git و Github و Bootstrap و MangoDB و PSD إلى WordPress و PSD إلى HTML ، وغيرها الكثير.
- Thedigicraft - دروس على HTML ، CSS ، jQuery ، PHP ، AJAX ، BOOTSTRAP ، MYSQL.
- Thenewboston - دروس في ECMASCRIPT 6 ، React JS / REDUX ، DJANGO ، Angular 2 ، GULP ، GIT ، PYTHON ، SEO ، SASS ، SCS ، GRUNT ، Illustrator ، Mongodb ، PHP ، Java ، Ruby ، Object C
- Medialsy Media - دروس في HTML ، CSS ، JQuery ، PHP ، AJAX ، Bootstrap ، MySQL ، ECMASCRIPT 6 ، React JS / REDUX ، DJANGO ، Angular ، Ionic ، Gulp ، GIT ، PYTHON ، NODE JS ، PHP ، LARAVEL ، CAKE PHP ، SYMFONY ، CODEGINT
- Codewithharry - دروس على HTML ، CSS ، JavaScript ، Node JS ، MongoDB والاستضافة.
- البرمجة مع Mosh - البرنامج التعليمي على React و Nodejs و Python و JavaScript و Angular و Typescipt و C#.
- Dev Ed - تعلم تطوير الويب ، تصميم الويب ، النمذجة ثلاثية الأبعاد ، أدوات مثل Figma والمزيد
- Web Dev Simplified - تعلم تطورات موقع الويب مع HTML و JavaScript و CSS والأطر الأخرى مع نفس المشاريع والمزيد
- Mozilla Developer - مقاطع فيديو لمساعدتك في عملك كمصمم ويب أو مطور ويب أو شخص متورط في إنشاء مواقع ويب أو تطبيقات ويب
- Academind - هناك دائمًا شيء يجب تعلمه. سواء كنت ترغب في إلقاء نظرة على البرامج التعليمية الزاوية أو الأدلة أو Vue.js أو محتوى تطوير الواجهة الأمامية الأخرى أو موضوعات علم البيانات أو أي شيء آخر - ربما تكون على حق
- دروس مشروع Sonny Sangha على React ، Redux ، Next JS & React Native
- WB Web Development - دروس على HTML و CSS و Bootstrap و Sass و JavaScript و Git و Github و Mongodb و NodeJS و ReactJS
- الدروس عبر الإنترنت- محتويات فئة أعلى على تطوير الويب الأمامي. لديه دروس حصرية على HTML و CSS و JavaScript مع تأثيرات مذهلة. يجب زيارة لجميع مطوري الواجهة الأمامية
- Akshay Saini- مقاطع فيديو على نصائح المقابلة في المقابلة ، وتجارب المقابلة ، والمفاهيم الأساسية الخاصة لجافا سكريبت.
- DevTools Tech- مقاطع فيديو حول مفاهيم الواجهة الأمامية المتقدمة ، وأسئلة المقابلة والخبرات ، والتركيز على مفاهيم JavaScript المتوسطة إلى المتقدمة.
⬆ العودة إلى الأعلى
المدونات
- 10 بحاجة إلى معرفة دورات JavaScript Concepts - من BASIC إلى تقدم مفهوم JavaScript الذي أوضح بطريقة بسيطة أن كل مطور JavaScript يحتاج إلى معرفته.
- 100 طريقة لتكون أكثر إبداعًا - 100 طريقة لتكون أكثر إبداعًا من شونتا غرايمز.
- 2017 Design Roundup - مجموعة من جميع موارد تطوير الويب Codrops لعام 2017.
- 50 الأشياء التي [ربما] نسيت التصميم - أدوات الطاقة UX - متوسطة - 50 أشياء ربما نسيت تصميمها من جون مور
- ACM Month of Code 2K17: Building Moodify - ACM Month of Code 2K17: Building Moodify from Ajay ns.
- دليل مصور لإعداد موقع الويب الخاص بك باستخدام Github & CloudFlare - دليل مصور لإعداد موقع الويب الخاص بك باستخدام GitHub و CloudFlare من Karan Thakkar.
- Brad Frost Blog - مؤلف كتاب Atomic Design وأنظمة تصميم البناء في CSS & HTML.
- أفضل الخطوط المجانية - 70+ أفضل خطوط مجانية للمصممين - مجانًا للاستخدام التجاري في عام 2019
- الرسوم المتحركة CSS مقابل واجهة برمجة تطبيقات الرسوم المتحركة على الويب: دراسة حالة
- CSS Tricks - مقالات يومية حول CSS و HTML و JavaScript وجميع الأشياء المتعلقة بتصميم الويب وتطويرها.
- ونقلت التصميم والإبداع - 72 ونقلت عن التصميم والإبداع من مارغريت كيلسي.
- موارد التصميم - قائمة الموارد للعمل في التصميم والتعلم.
- تصميم من أجل التغيير - مقال عن التصميم التجديدي والمستدام بواسطة Viba Mohan.
- مسجل النطاق DNS واستضافة - مسجلات المجال ، DNS ، والاستضافة من Kirby Kohlmorge
- دليل المبتدئين إلى Gatsby - Gatsby.js: كيفية إعداد واستخدام مولد موقع React Static من Aman Mittal
- أمثلة على كل شيء في Ecmascript في 2016 ، 2017 ، 2018
- Flavio Compes الدروس - البرامج التعليمية اليومية حول JavaScript وتطوير الويب بواسطة Flavio Copes
- من عنوان URL إلى التفاعل - شرح لكيفية عمل الويب العالمي لدينا.
- Frontend Dogma - أخبار وأدوات لتطوير الواجهة الأمامية ، وعادة ما يتم تحديثها مرتين في اليوم
- Frontend Week - أفضل المقالات والروابط والأخبار المتعلقة بتطوير الواجهة المقدمة التي يتم تسليمها مرة واحدة في الأسبوع إلى صندوق الوارد الخاص بك.
- كيف قمت بتحريك شعار BitsofCode مع مقالة CSS - معالجة على الرسوم المتحركة CSS مخصصة.
- كيف تعمل وظيفة minmax () - شرح وظيفة CSS Minmax () ، والتي يمكن استخدامها لتخطيطات شبكة CSS.
- كيفية بناء محفظة مثيرة للإعجاب عندما تكون جديدًا في Tech - كيفية بناء محفظة مثيرة للإعجاب عندما تكون جديدًا في Tech من Randle Browning
- كيفية بناء مولد اقتباس عشوائي مع JavaScript و HTML ، للمبتدئين المطلقين - كيفية بناء مولد اقتباس عشوائي مع JavaScript و HTML ، للمبتدئين المطلقين من Sophanarith Sok.
- كيفية إنشاء مكون VUE الأول - برنامج Beginner Project Beginner لبناء مكون VUE من سارة دايان.
- دعونا نعود ترميز شبكة عصبية من نقطة الصفر - الجزء 1 - Typeme - متوسطة - دعنا نشهد شبكة عصبية من نقطة الصفر من تشارلز فريد
- Inspirations Player Inspirations - Music Player Inspiration 2017 من Muzli.
- قائمة المراجعة الأمامية - قائمة شاملة بجميع العناصر التي تحتاجها/اختبارها قبل إطلاق موقع الويب الخاص بك إلى الإنتاج.
- ما يشبه بناء وتسويق chatbot عندما يبلغ من العمر 14 عامًا فقط - ما يشبه بناء وتسويق chatbot عندما يكون عمرك 14 عامًا فقط من أليك جونز
- ما هي الصفقة مع الهوامش القابلة للطي؟ - شرح ميزة الهوامش المنهارة لـ CSS.
- قائمة منسقة جيدًا لـ UX - قائمة الموارد المنسقة لـ UX بواسطة Fernandocomet.
- Airbnb Open Source - المقالات الهندسية وعلوم البيانات والمشاريع المفتوحة المصدر.
- تكلفة JS - كيفية توصيل JavaScript بكفاءة لتجربة المستخدم القيمة من قبل Addy Osmani.
- CSS SCROLL -SNAP - البرنامج التعليمي على CSS SCROLL CHAPPING ، والذي يتيح لك قفل منفذ العرض بعد انتهاء المستخدم من التمرير.
- التحميل المسبق ، الجلب المسبق والأولويات في Chrome - مقالة حول كيفية عمل Primitives تحميل الويب على مكدس Neworking من Chrome بواسطة Addy Osmani.
- تعلم غيت لنفسك - الصينية التقليدية
- IDES لمطوري الويب - العوامل التي يجب مراعاتها عند اختيار IDE لتطوير الويب وأمثلة من الخيارات الجيدة.
- أفضل 8 واجهات برمجة تطبيقات الطقس لعام 2020 - أفضل 8 واجهات برمجة التطبيقات في الطقس لعام 2020 - أفضل واجهات برمجة تطبيقات الطقس المجانية للمطورين
- دروس مجتمعية في المحيطات الرقمية - مجموعة تعليمية مجانية من الخبراء. ساهمت جميعها من مجتمع المحيط الرقمي.
- رد الفعل للمبتدئين - كتيب React.js لمطوري الواجهة الأمامية - كتيب React.js لمطوري الواجهة الأمامية
- Ultimate React Resources - تتضمن المدونة منشورات المدونة ، والكتب الإلكترونية المجانية ، و github repos مع قوائم منسقة ، والتنفيذ العملي لـ React.js في العالم الحقيقي مع رمز العمل.
- مقدمة كاملة لشبكة CSS - مدونة لتعلم أساسيات شبكة CSS عن طريق بناء تخطيطات معقدة مختلفة.
- مدونة Rado) - مدونة تتطلب مقالات حول تبعيات React والتنفيذ ، GraphQL والمزيد!
- ROBLOG - مقدمة لجميع الأشياء المتعلقة بالتكنولوجيا ، JavaScript ، Node.js ، وتطوير الويب.
- Monica Powell Blog - مدونة رائعة على JavaScript و React و Gatsby و Git.
- DevTools Tech - موارد عالية الجودة برعاية بعناية لمهندسي الواجهة الأمامية.
التوظيف
البودكاست
- كتل الترميز - تنمية البرمجيات البودكاست من قبل فريق من المبرمجين المحترفين.
- Frontend Happy Hour - الواجهة الأمامية والبرمجيات والتطوير الوظيفي من قبل أعضاء فريق الصناعة.
- JavaScript Jabber - Podcasts لمطوري JavaScript. يقدم موقع الويب أيضًا العديد من البودكاست المتعلق بالبرمجة الأخرى.
- بناء الجملة - بودكاست تطوير الواجهة الأمامية من Wes Bos و Scott Tolinski من مستوى التوتس.
⬆ العودة إلى الأعلى
محرري الرمز
ATOM - ATOM هو محرر نصوص حديث ، ودود ، ولكنه قابل للاختراق - أداة - يمكنك تخصيصها لفعل أي شيء ولكن أيضًا الاستخدام بشكل منتج دون لمس ملف التكوين. مفتوح المصدر | جميع المنصات
Brackets - مع الأدوات المرئية المركزة ودعم Preprocessor ، Brackets هو محرر نصية حديثة تجعل من السهل التصميم في المتصفح. تم تصميمه من الألف إلى الياء لمصممي الويب والمطورين في الواجهة الأمامية. مفتوح المصدر | جميع المنصات
Geany - Geany هي بيئة تنمية صغيرة وخفيفة الوزن.
Intellijidea - IDE العالمي من Jetbrains. يحتوي على كمية الكود ، وتكامل ، ونظام التحكم في الإصدار (VCS).
Notepad ++ - Notepad ++ هو مجاني (كما هو الحال في "حرية التعبير" وأيضًا كما هو الحال في "الحرة البيرة") محرر الكود المصدري واستبدال Notepad يدعم عدة لغات. Windows فقط -PyCharm المستخدم بشكل خاص للغة Python ، ويوفر تحليل التعليمات البرمجية ، وتصحيح الأخطاء الرسومية ، واختبار وحدة متكاملة ، وتكامل مع أنظمة التحكم في الإصدار ويدعم تطوير الويب مع Django وكذلك علم البيانات مع Anaconda. جميع المنصات | المصدر المفتوح
Sublime Text - محرر نصوص متطور للرمز والارتياح والنثر. جميع المنصات
VIM - VIM هو محرر نصية قابلة للتكوين لإنشاء وتغيير أي نوع من النص بكفاءة. يتم تضمينه على أنه "VI" مع معظم أنظمة UNIX ومع Apple OS X.
Visual Studio Code - رمز تحرير إعادة تعريف. يحتوي على بناء جملة تسليط الضوء والإكمال التلقائي مع أوامر Intellisense و GIT مدمجة وقابلة للتمديد وقابلة للتخصيص. مفتوح المصدر | جميع المنصات
WebStorm - أذكى JavaScript IDE ، WebStorm هي بيئة تطوير متكاملة لجافا سكريبت والتقنيات ذات الصلة. جميع المنصات
UltraEdit - UltraEdit هو محرر HTML ومحرر رمز قوي متاح لنظام التشغيل Mac و Windows و Linux. إنه يأتي مع أداة مقارنة الملفات المدمجة ، والإكمال التلقائي ، والتخطيط المتقدم ، والمحررين متعدد الأجزاء ، والمحررين متعدد الأجزاء ، وإبراز بناء الجملة لغات البرمجة الأكثر شعبية.
Nano - Gnu Nano هو محرر نصية لنظام التشغيل Unix.
StackBlitz - محرر رمز قوي على الإنترنت مفتوح المصدر لأطر ومكتبات JavaScript ، مع بعض الميزات الرائعة مثل GitHub واردات وخادم مباشر والالتزام المباشر من المحرر إلى Github!
⬆ العودة إلى الأعلى
امتدادات رمز الاستوديو البصرية
- علامة إعادة تسمية تلقائية - عند إعادة تسمية علامة HTML/XML واحدة ، أعد تسمية علامة HTML/XML المزدوجة تلقائيًا.
- تعليقات أفضل - يرمز ملونة التمديد هذا إلى أنواع مختلفة من التعليقات لمنحهم أهمية مختلفة وتبرز من بقية التعليمات البرمجية الخاصة بك.
- Colorizor زوج بين قوسين - ألوان مطابقة بين قوسين لجعل الكود الخاص بك أكثر قابلية للقراءة - مفيدة للغاية.
- Code Spell Checker - مدقق إملائي أساسي يعمل بشكل جيد مع رمز Camelcase.
- ES Lint - JavaScript Linter لتسليط الضوء على أخطاء الكود وأفضل الممارسات.
- تبديل التنسيق - امتداد VS Code الذي يسمح لك بتبديل formatter (أجمل ، تجميل ، ...) على وإيقافها بنقرة بسيطة.
- GIT History - عرض سجل GIT ، سجل الملف ، مقارنة الفروع أو الالتزامات
- Gitlens - Supercharge إمكانيات GIT المضمنة في رمز Visual Studio - تصور تأليف الرمز في لمحة عن طريق التعليقات التعليقات التوضيحية واللوم على الكود ، والتنقل بسلاسة واستكشاف مستودعات GIT ، واكتساب رؤى قيمة من خلال أوامر مقارنة قوية ، وأكثر من ذلك بكثير.
- قصاصات JS - يحتوي هذا الامتداد على مقتطفات رمز لـ JavaScript في بناء جملة ES6 لمحرر VS Code (يدعم كل من JavaScript و TypeScript).
- Server Live - خادم مباشر للتطوير المباشر مع إعادة تحميل المتصفح المباشر.
- موضوع أيقونة المواد - حزمة أيقونة مواد Google.
- Path Intellisense - عندما تبدأ في كتابة مسار في الاقتباسات ، ستحصل على Intellisense للأدلة وأسماء الملفات.
- Peacock - قم بتغيير لون مساحة العمل في مساحة العمل الخاصة بك. مثالي عندما يكون لديك مثيلات متعددة مقابل رمز وتريد تحديد أي ما هو.
- Polacode - هل تعرف لقطات الشفرة الفاخرة التي تراها في المقالات والتغريدات؟ حسنًا ، على الأرجح جاءوا من Polacode. إنه سهل الاستخدام. انسخ قطعة من الرمز إلى الحافظة الخاصة بك ، افتح الامتداد ، وصق الرمز ، وانقر لحفظ صورتك!
- أجمل - تنسيق الكود الخاص بك تلقائيا على حفظ.
- Quokka.js - Quokka.js هي أداة إنتاجية للمطور للنماذج الأولية JavaScript / TypeScript السريعة. يتم تحديث قيم وقت التشغيل وعرضها في IDE بجانب الكود الخاص بك ، كما تكتب.
- SETTSS SYNC - SETTSS SYNC Extension حفظ الإعداد الخاص بك في github. بعد ذلك ، يمكنك تحميلها على أي إصدار جديد من Code مع أمر واحد.
⬆ العودة إلى الأعلى
أدوات
- دليل API | programmableWeb
- Animista - CSS الرسوم المتحركة المسبقة/المولد
- Better Code Hub - يتحقق من قاعدة بيانات GitHub مقابل إرشادات هندسة البرمجيات ويعطي ملاحظات.
- Browserling - اختبار المتصفح التفاعلي المباشر على الأجهزة الافتراضية.
- Lambdatest - اختبار مواقع الويب وتطبيقات الويب على 2000+ متصفحات ونظام التشغيل.
- Browserstack - اختبار مواقع الويب وتطبيقات الأجهزة المحمولة على متصفحات مختلفة وأجهزة محمولة.
- هل يمكنني استخدام ... - جداول دعم لـ HTML5 و CSS3 ، إلخ
- CheckBot - امتداد المتصفح الذي يختبر مواقع SEO والسرعة والأمان
- CODEPEN - بيئة التنمية الاجتماعية حيث يمكنك كتابة التعليمات البرمجية في المتصفح ورؤية النتائج عند إنشاءها.
- CODEPLY - ملعب محرر HTML و CSS و JavaScript للمصممين والمطورين لمقارنة أطر النموذج الأولي واختبار الواجهة الأمامية.
- CODESANDBOX - IDE الفوري وأداة النماذج الأولية لتطوير الويب.
- قم بإنشاء كمان جديد - JSFIDDLE - اختبار JS أو CSS أو HTML أو Coffescript في محرر رمز عبر الإنترنت.
- مولد CSS CSS CRIGUT - بواسطة Jonas Ohlsson - يقلل من كمية CSS التي يتعين على المتصفح أن يمر بها لتقديم صفحة ويب.
- تطبيق CrossBrowSertesting - خدمة الويب لتشغيل اختبارات الويب الوظيفية على متصفحات الويب للهاتف المحمول وسطح المكتب.
- ورقة الغش CSS - سهلة الاستخدام للغاية مرجع صفحة واحدة لمحددات وخصائص CSS. ويشمل أيضًا فئات لـ Flexbox و Grid.
- CSS Minifier - Minify ملفات CSS الخاصة بك!
- مرجع CSS - دليل مرئي مجاني لـ CSS.
- مشغلات CSS - يخبرك بما يتم تشغيله عند تحوير خاصية CSS معينة.
- مرشحات CSS - مولد مرشح CSS التفاعلي
- Colorlisa - مولد لوحة الألوان على أساس فنانين رائعين
- DirtyMarkup - ترتيب رمز HTML و CSS و JavaScript.
- ExtendsClass - يوفر أدوات لإضافة ميزات قابلة للاستخدام مباشرة في المتصفح.
- Favicon Generator - قم بتحميل صورة وإنشاء Favicon لموقع الويب الخاص بك.
- المولد Favicon لنظام التشغيل iOS/Google Progressive Web App - أداة عبر الإنترنت لاختبار Favicons على منصات مختلفة.
- أشياء مطور مجانية - قائمة بالأشياء المجانية للمطور من قبل المطور لاستخدامها. بعض الخدمات مجانية إلى الأبد أو لديها طبقة مجانية على الأقل لمدة سنة واحدة.
- مجاني للمطورين - يحتوي هذا الموقع على كمية واسعة من قوائم الموارد المجانية والمدفوعة ، ليس فقط لمطوري الواجهة الأمامية ولكن أيضًا لأي نوع من المطورين.
- قم بإنشاء Favicon استنادًا إلى النص - قم بإنشاء Favicon من النص أو الصورة أو الرموز التعبيرية.
- Get Waves - قم بإنشاء العديد من أنواع موجات SVG للاستخدام في تصميم الويب.
- Glitch - Glitch يشبه العمل معًا في مستندات Google - يمكن للأفراد أن يعمل الأشخاص في نفس المشروع في نفس الوقت.
- مولد الرسوم - يولد الرسومات لبعض التطبيقات الأمامية الشائعة.
- Google Analytics - خدمة الويب التي تتتبع وتقارير حركة مرور الموقع.
- Google APIS Explorer - أداة لاستكشاف مختلف واجهات برمجة التطبيقات في Google.
- وحدة تحكم JavaScript في Sublime Text - البرنامج التعليمي لاختبار JavaScript وتنفيذه عبر أنظمة الإنشاء في Sublime Text 3.
- ورقة غش jQuery Mega - ورقة الغش في jQuery Selectros ، التلاعب ، الأحداث ، والمزيد بتنسيق PDF.
- JS Bin - Live Pastebin لـ HTML و CSS و JS ، بالإضافة إلى مجموعة من المعالجات.
- Lighthouse - المصدر المفتوح ، الأداة الآلية لتحسين جودة صفحات الويب.
- ورقة غش JavaScript الحديثة - هذه مجموعة ممتازة من نصائح JavaScript والمفهوم من قبل Manuel Beaudru تعمل كنظرة عامة لطيفة على العديد من الأشياء التي ستحتاج إلى أن تكون على دراية بها إذا كنت بدأت للتو مع JavaScript وغيرها من الأطر ذات الصلة.
- MANGARE NODE Package (NPM) - مدير الحزمة لجافا سكريبت.
- الغزل - مدير الحزمة لجافا سكريبت ، مثل NPM.
- مستجيب - تكرار كيف ستنظر المواقع الاستجابة على الأجهزة الشائعة.
- React Cheat Sheet - موقع ويب يعتمد على الوثائق أيضًا تطبيق ويب تقدمي مما يعني أنه يعمل بشكل جيد حتى في وضع عدم الاتصال. يمكنك البحث عن طريق الكلمة الرئيسية أو تحديد أحد المرشحات المحددة مسبقًا.
- نظام الشبكة المستجيبة - قم بإنشاء شبكات مرنة لإنشاء موقع ويب سريع الاستجابة.
- محرر التعبير العادي (Regex) - يساعد على إنشاء تعبيراتك المعتادة والتحقق منها.
- Sans Francisco - أداة للمصممين - مجموعة من الأدوات للمصممين
- ScreenSizEmap - مقارنة لأحجام الشاشة في بكسل مستقل عن الجهاز.
- Sizzy: أداة اختبار المتصفح - أداة لتطوير واختبار التصميم المستجيب على أجهزة متعددة في وقت واحد.
- Stack Overflow - مجتمع عبر الإنترنت للمطورين لطرح الأسئلة والحصول على إجابات.
- خدمة التحقق من صحة علامة W3C - تحقق من صحة ترميز مستندات الويب في HTML ، XHTML ، SMIL ، Mathml ، إلخ.
- خدمة التحقق من صحة W3C CSS - تتحقق من صحة مستندات CSS و XHTML مع أوراق الأنماط.
- مساعد الوقت - يساعد في تحويل Millis إلى DateTimes والعكس بالعكس.
- Tinypng - PNG و JPEG Compression/Optimizer
- قائمة مراجعة مطور الويب - قائمة مرجعية مصنفة للأشياء التي يجب تغطيتها أثناء تطوير الويب.
- الأدوات التدريجية لتحسين أدائك على الويب - قائمة الأدوات التي يمكن استخدامها لتحسين أداء الصفحة.
- StackBlitz - IDE عبر الإنترنت لمشاريع Angular و React التي يمكن مشاركتها عبر Link.
- Postman (أداة لاختبار واجهات برمجة التطبيقات) - عميل API لإنشاء وتبادل واختبار وتوثيق واجهات برمجة التطبيقات.
- ورقة الغش المجانية Bootstrap 5 - إنها قائمة تفاعلية لفئات Bootstrap 5 والمتغيرات والمزيج.
- JSONT - أداة تنسيق JSON بسيطة وقوية على الإنترنت.
⬆ العودة إلى الأعلى
أطر CSS
- Bootstrap - تصميم وتخصيص المواقع المسؤولة الأولى.
- Bulma CSS - إطار عمل مفتوح المصدر يعتمد على FlexBox.
- Caramel - إطار موقع ويب بسيط وحديث ومستجيب.
- الكاردينال - إطار عمل MOPLORT -FIRST للأداء وقابلية التوسع.
- العنصر CSS - مكتبة مكون Vue 2.0.
- مؤسسة CSS - عائلة الأطر الأمامية المستجيبة.
- Halfmoon - إطار عمل أمامي قابل للتخصيص بالكامل وسريع الاستجابة لبناء لوحات المعلومات والأدوات.
- JEET - نظام الشبكة الكسري لـ Sass و Stylus.
- أقل - نظام شبكة CSS لتصميم مواقع الويب التكيفية.
- تصميم المواد لايت - تنفيذ مكونات تصميم المواد في الفانيليا CSS و JS و HTML.
- يهدف إطار عمل CSS - CSS إلى السماح بتجربة مستخدم موحدة في جميع المنتجات على أي منصة.
- ملليغرام - إطار CSS الحد الأدنى.
- أنيق - شبكة ساس خفيفة الوزن ومرنة.
- Petal CSS - إطار عمل CSS Light CSS على أساس أقل.
- CSS النقي - مجموعة من وحدات CSS الصغيرة الاستجابة.
- واجهة المستخدم الدلالية - إطار واجهة المستخدم المصممة للتصميم المستجيب.
- الهيكل العظمي CSS - بلاتية بسيطة وسريعة الاستجابة لبدء أي مشروع مستجيب.
- SPECTER CSS - إطار CSS خفيف الوزن ، استجابة وحديث للتنمية الأسرع والقابلة للتمديد.
- ضمن - إطار بدائي ولكن جذاب للمبتدئين في التصميم الجرافيكي.
- Tailwindcss - إطار CSS منخفض التخصيص ، منخفض المستوى.
- مجموعة واجهة المستخدم - إطار عمل خفيف الوزن والواجهة الأمامية لواجهات الويب.
- نظام الشبكة غير غير المتفوقة - على أساس النسب المئوية ، بدلاً من عدد محدد من الأعمدة.
- CSS Vital - إطار CSS الغازي الحد الأدنى لتطبيقات الويب المصممة مع SASS و SLIM.
⬆ العودة إلى الأعلى
أيقونات
- برانديكونون - مولد خط الرمز والمشاهد.
- أيقونة مسطحة - قاعدة بيانات للأيقونات المجانية في تنسيقات PNG و SVG و EPS و PSD و BASE64.
- Font Awesome - مجموعة أيقونة المصدر المفتوح ومجموعة الأدوات مع أنماط متسقة.
- Glyphicon - أيقونات للاستخدام مع Bootstrap ، وأطر أخرى CSS ، وأي مشاريع ويب.
- أيقونات تصميم مواد Google - نظرة عامة على أيقونات المواد وكيفية دمجها في المشاريع.
- ICOMOON - مولد خط الرمز ومجموعة الأيقونات.
- Icongram - مجموعة من حزم الأيقونات من مصادر مختلفة.
- iconsvg - أيقونات قابلة للتخصيص سريعة لمشاريعك
- ICONS8 - حزم أيقونة مصممة بشكل ثابت وقابل للتخصيص.
- Ionicons - أيقونات مفتوحة المصدر في SVG و WebFont.
- Mapicons - ICON FONT للاستخدام مع Google MAPS API و Google API باستخدام علامات SVG وعلامات الأيقونات.
- تصميم المواد الأيقونية - مجموعة كاملة من أيقونات تصميم المواد لسهولة SVGs على موقع الويب أو سطح المكتب.
- MFGLABS -CONSET - تم تعيين أيقونة MFG LAB للاستخدام في WebFonts و CSS.
- Micon - Windows Font و CSS Toolkit.
- مشروع الاسم - مجموعة الأيقونات الشاملة.
- الثمن - مجموعة من أيقونات جيثب للمشاريع.
- Open Iconic ، مجموعة رمز مجانية ومفتوحة - أيقونة مفتوحة المصدر تم تعيينها بتنسيقات SVG و WebFont و Raster.
- OpenWebicons - WebFont لرموز المتجهات القابلة للتطوير والشعارات.
- reacticons -SVG رموز رموز حزم الأيقونات الشعبية.
- Remixicon - نظام رمز نمط محايد مفتوح المصدر.
- شكل. لذا - مجموعة من الرموز والرسوم المتحركة.
- Stackicons - أيقونات قابلة للتخصيص للعلامات التجارية الاجتماعية.
- Typicons-أيقونات متجه مجانية للاستخدام مضمن في Webfont.
- أيقونات الطقس - أيقونة الطقس تحت عنوان و CSS.
- Zocial | مجموعة زر CSS3 - إنشاء أزرار اجتماعية باستخدام CSS وتقديم الرموز الاجتماعية كخط.
⬆ العودة إلى الأعلى
الألوان
- Adobe Color - عجلة الألوان ، موضوع استخراج ، استخراج التدرج ، أدوات إمكانية الوصول والمزيد
- رموز الألوان BADA55 - تحويل كلمات Leet إلى ألوان CSS Hex.
- ألوان Branition - مجموعة من لوحات الألوان المدمجة يدويًا بشكل أفضل للعلامات التجارية.
- مطاردة اللون - مجموعات مفتوحة من لوحات الألوان الجميلة
- نظرية اللون من قبل ناتاليا شيلبورن - نظرية الألوان العملية للأشخاص الذين رمزون: البرنامج التعليمي حول استخدام اللون مع أمثلة
- عجلة اللون | مخططات الألوان - Adobe Color CC - عجلة ألوان تفاعلية مع قواعد ألوان مختلفة (تعديلات ممكنة)
- أدوات Colordesigner - الغرض الرئيسي من هذه الأداة هو المساعدة في بناء لوحة ألوان وإنشاء صبغات وظلال بناءً عليها. مجرد اختيار لون ، والتطبيق يفعل الباقي. يمكنك استخدام الألوان المحددة مسبقًا أو منتقي الألوان لمزيد من التحكم. تحقق أيضًا من الأدوات الأخرى هنا
- ColorMind - Bootstrap - ColorMind هو مولد مخطط الألوان يستخدم التعلم العميق لتطبيق الباليت الملونة تلقائيًا على نموذج للمواقع الحية.
- Coolors- خالق نظام ألوان سريع للغاية مع الكثير من الوظائف
- التدرج CSS - قائمة من المواقع المنسقة لاستكشاف التدرجات وألوان ألوان.
- منتقي ألوان البيانات - قم بإنشاء لوحات ألوان بألوان متساوية بصريًا. مفيد لتصورات البيانات.
- التصميم بالألوان - دليل كامل للتصميم بالألوان (مقال عن الوسط)
- ألوان واجهة المستخدم المسطحة - منتقي الألوان للتصميمات المسطحة
- منتقي ألوان الصورة - منتقي ألوان الصور ومولد اللوحة
- ألوان LOL - إلهام لوحة ألوان منسقة
- لوحة المواد - مولد لوحة الألوان لتصميم المواد
- Palettable - Interactive color picker: creates a color scheme based on your preferences and palettes on the Internet
- Paletton - The Color Scheme Designer - Advanced tool for creating color schemes
- Picular - Google, but for colors - Primary color generator using Google's image search.
- Pigment - Palette Generator - Generate color palettes based on lighting and pigment.
- UI Gradients - Scroll through or pick from beautiful gradients, download JPG and copy CSS Code
- W3school Color Picker - Find the perfect color from the color wheel, easy control
- UI Color Picker - Best colors in few selected shades to choose from very helpful for quickly choosing and adding color to design. ![حر]
⬆ back to top
الطباعة
- A Crash Course in Typography: The Basics of Type - First article of a series on Typography
- Circular Font Combinations | Free Alternatives | Typewolf - A great resource for everything related to Typography
- Font Pair - Helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs. - Clean web-tool on How to pair Google Fonts
- Fontspiration - An iOS app for creating custom typographic designs
- Fontsquirrel - A resource for FREE, hand-picked, high-quality, commercial-use fonts
- Google Fonts - A catalog of free & open source fonts, great details and font pair suggestions
- Just My Type - A collection of font pairings
- Table of Contents | The Elements of Typographic Style Applied to the Web - A practical guide to web typography
- Typekit - "Quality fonts from the world's best foundries"
- Typography Terms - An infographic on Typography Terms + explanations
⬆ back to top
إلهام التصميم
- Admire The Web - Admire the Web is where we showcase the very best in website design inspiration - carefully curated and organised to keep you inspired.
- Awwwards - The Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.
- Dribble - Dribbble is where designers gain inspiration, feedback, community, and jobs and is your best resource to discover and connect with designers worldwide.
- Site Inspire - siteInspire is a showcase of the finest web and interactive design.
- Web design Inspiration - Find inspiration for your next web design project. We help web designers, digital agencies and entrepreneurs to be inspired. Everyday, our team of experts hand picks the best new web designs from all over the world.
- Behance - Behance is a social media platform to showcase and discover creative work like Graphic Design, Illustration, Game Design and many more things
- Pinterest - Pinterest has a host of design inspirations in a variety of forms and styles.
- Pixpa - Pixpa features some nice modern designs and inspirations for web designers and photographers.
- Lapa Ninja - Lapa Ninja is a gallery featuring the best 4127 landing page examples, free books for designers and free UI kits from around the web.
- Landings - Find the best landing pages for your design inspiration based on your preference.
⬆ back to top
Animation Frameworks
- Animate CSS - Choose, try out and get the CSS-Code for different animation types (over 70)
- Anime JS - It's easy to use, has a small and simple API, and offers everything you could want from a modern animation engine.
- Bounce JS - Tool and JS Library, creating CSS3 powered animations(adjustments possible) & export CSS code
- Magic Animations - Showcase of different animations with link to GitHub repo
- MO JS - The library provides built-in components to start animating from scratch like HTML, shape, swirl, burst, and stagger but also brings you tools to help craft your animation in a most natural way.
- Particles JS - A lightweight JavaScript library for creating particles.
- Typed JS - A JavaScript typing animation library with a great documentation on GitHub
- Wow JS - JavaScript library: Reveal CSS animation as you scroll down a page
⬆ back to top
Stock Resources
- Burst - Free, high-resolution images. All our pictures are free to download for personal and commercial use.
- Canva - 8,000+ free templates and thousands of free photos
- Free stock images and Videos - A great collection of stock photos, videos and other resources. Most of them under the CC0-License, all of them free.
- Gratisography - Photographer Ryan McGuire provides this collection of high-resolution pictures for free. You can use them on your personal or commercial project free of copyright restrictions.
- Humaaans - Library of editable people illustrations. Free for both commercial and personal use.
- I'd Pin That! - Created to help bloggers and non-designers create high quality images like those often seen on Pinterest. I'd Pin That is more than just a source for free images — it is an image editor! Use the tools provided here to add your own text and edit the images right on the site.
- Illlustrations - 120+ Awesome free illustrations made by the artist vijay verma on a 100 days challenge.
- MakerBook - The best free resources for creatives - A directory of sites to get free resources (Photography, Mockups, Graphics, Textures, Fonts, Colours, Video, Audio & Tools).
- Morguefile - Founded in 1996 by college student Michael Connors.Photographers contribute images to Morguefile for visitors to use in their creative projects. Yes, they're all completely free. The website does ask that you credit the photographer when possible.
- Open Doodles - A Free Set of Open-Source Illustrations.
- The Open Photo Project - The Open Photo Project is a photo sharing platform created in 1998 by Michael Jastremski. Contributors have offered their images free of charge under terms of Creative Commons licensing.
- Pexels - Exclusively stock photos of high quality, great feature: Filter photos by color.
- Picalls - Free photos and wallpapers licensed under the Creative Commons CC0 license.
- Pixabay - In addition to photos, Pixabay offers video, vectors and illustrations.
- Pikwizard - Free stock photo library for commercial and editorial use. Huge library of stunning, high quality, royalty free images. No attribution required
- Public Domain Archive - “a public domain image repository” created by Matt a graphic designer, web designer and photographer.Vintage and modern images.
- StockSnap.io - High quality stock photos free to download and use. Licensed under the Creative Commons CC0 license.
- The Stocks - Another awesome directory sharing sites for resources, loading directly on the webpage
- UnDraw - "MIT licensed illustrations for every project you can imagine and create
- UnSplash - "Beautiful, Free Photos" & themed collections of photos
- 3D Bay - "Free, 3D Illustrations" A collection of High-quality 3D Illustration resources
- Design Stripe - "Create beautiful illustrations, no design skills needed
⬆ back to top
Geolocation
- Geocomplete-location autocomplete - An advanced jQuery plugin that wraps the Google Maps APIs Geocoding and Places Autocomplete services into a dropdown for an input-form.
- Google maps API | Google - Google Map APIs including documentation & learning resources - extensive
- Google maps API | Traversy - Great YouTube tutorial on using the Google Maps APIs
- OpenCage Geocoder - Free to use forward (lat/long to text) and reverse (text to lat/long) geocoding API
- GeoJS - Free to use API for geolocation lookup by IP address
⬆ back to top
واجهات برمجة التطبيقات
- Alexa API | Codecademy - Learn to develop a custom Amazon Alexa skill that respond to the user's voice with custom messages.
- Abstract APIs - Free utility API's for compressing images, creating user avatars, validating emails, and more
- jsonplaceholder - Fake Online REST API for Testing and Prototyping
- A list of public APIs
- Lorem Picsum - Easy to use and customize placeholder photos
- OpenWeatherMap - Weather API with free and paid licenses
- Random famous quotes | Rapid APIs - Gets a random quote in JSON format.
- TMDB API - API Service for those who are interested in displaying data/images about different movies, TV Shows or actors in their application.
- Unsplash Source - API to retrieve random images from Unsplash.com
- Web APIs | MDN
- News API - Locate articles and breaking news headlines from news sources and blogs across the web with our JSON API.
- Spotify API - Spotify's Web API allows you to find music and podcasts, manage your Spotify collection, control audio playing, and do a variety of other things.
⬆ back to top
Mockups
- Am I Responsive - This is a tool to check the responsiveness of a website and take a screenshot on multiple devices in a single frame. Go to the site and enter the URL to capture the screenshot. You should have separate screen capture tool to take the proper screenshot.
- Figma - Free app with a simple to use surface for designing, prototyping and sharing your website and app ideas
- Adobe XD - One of the best tool for UI/UX Design, Wireframe, animate, prototype, collaborate, and more
- Magic Mockups - Place your product in realistic environment! Free real-life product/app mockup generator. Laptop, Phone, Tablet, Imac.
- Rotato 3D Mockup Generator - Make video 3D mockups and images. No experience required. Unlimited renders. MacOS.
- The MockUp Club - Website that offers free downloads of design mockups (mostly Photoshop format).
- MockupsJar - Build mockups with screenshots of your application or web Design for free to share with customers and clients
- MockUPhone - Free and simple screenshots device mockups generator. Wrap your design in mobile devices or Laptop/Desktop in a few clicks!
- Multi Device Website Mockup Generator - Multi device website mockup generator is free online tool to test your responsive website on apple devices including Apple iMac, MacBook, iPad and iPhone. This tool is very helpful for theme developers to mockup the web template on various apple devices with a single click. You should have a proper screen grabber tool to take the screenshot from the browser.
- Wireframe.cc - Great tool for sketching out ideas and layouts, super minimalistic
⬆ back to top
كتب
- Ebook Foundation-free programing books: GitHub Repository - A directory of free learning resources, categorized by language
- HTML Basics - A workshop covering the basics of HTML (free pdf/18 pages)
- HTML5 for Masterminds, 2nd Edition - A complete course from Beginner to Mastermind
- HTML5 Pocket Reference (Pocket Reference (O'Reilly) - A comprehensive compact reference for HTML 5
- HTML Tutorialspoint - A thorough tutorial on HTML (free pdf/486 pages)
- Learn How To Code In HTML5 and CSS3 - A free e-book about making websites in HTML5 and CSS for absolute beginners
- Responsive Web Design with HTML5 and CSS3 - A comprehensive book about making RWD
- You don't know JS - Book series diving deep into the core mechanisms of the JavaScript language.
- Guide to Git and Github - A beginner friendly guide to using git and working with Github.
- Introduction to HTTP - Introduction to HTTP, the stateless protocol underlying all of the web.
- Introduction to the Command Line - A short and beginner friendly introduction to the command line, covering common commands that will make you immediately productive.
- HTML & CSS Books ![Free]
- Web Design Playground, Second Edition - Modern HTML, CSS, and web design standards.Paid
- Build a Frontend Web Framework (From Scratch) - Learn how a frontend web framework works by coding your own.Paid
⬆ back to top
Challenges / Games
- Ace Front End - Ace Front End has complete and practical coding challenges, with a detailed walk through of a perfect interview solution.
- Codepen Challenges - Each month has a theme and every week there is a new challenge prompt that you can use to build a project online using HTML, CSS and JavaScript. The best projects are featured on Codepen's homepage.
- Codewars - Improve your skills by training with others on real code challenges.
- CSS Battle - CSSBattle is an online CSS Code Golfing game. Here, players from all around the world try to visually replicate Targets in smallest possible CSS code and battle it out to get to the top of the leaderboard.
- CSS Diner - It's a fun game to learn and practice CSS selectors.
- CSS Zen Garden - A demonstration of what can be accomplished through CSS-based design, and a chance to do your own.
- Dev Challenges - Made by Thu Nghiem. devChallenges.io is a community driven platform for anyone who wants to solve practical tasks. It has some tricky and curated challenges.
- Flexbox Defense - It is a game that covers the flex properties align-items, justify-content, flex-direction, align-self and has 12 different levels.
- Flexbox Froggy - This game is also about Flexbox and it covers even more flex properties: align-items, justify-content, align-content, flex-direction, align-self, flex-wrap, flex-flow and has 24 different levels.
- Front End Mentor - Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs. Join 192,401 developers building projects, reviewing code, and helping each other get better.
- Grid Garden - Interactive CSS code game. Practice your CSS skills by watering your garden! It has 28 different levels to learn CSS Grid Layout.
- Hackerrank - Practice coding, prepare for interviews, and solve interview style coding challenges.
- JavaScript30 - A free challenge course, building 30 little projects with HTML, CSS and plain JavaScript.
- Leetcode - Coding problems to solve in a range of categories and difficulties
- Project Euler - Challenging computer science and mathematical problems.
- 100DaysOfCode - Regardless of your coding skills or your language of choice, this challenge invites you to code for at least 1 hour a day.
- Devtools Tech - Devtools Tech is a free platform for Frontend Engineers to practice high quality real world programming interview questions, follow curated learning paths, read blogs, and track progress across various frontend domains.
⬆ back to top
Free Tools For Students
- JetBrains Student License : Free individual licenses of the award-winning professional developer tools from JetBrains for students and faculty members.
- Student Developer Pack : The best developer tools, free for students via @githubeducation
⬆ back to top
YouTube Videos
- Flexbox in 20 minutes - Quick crash-course on the CSS Flexbox model.
- SVGs can do that ? - Sarah Drasner's talk on nontypical pratical uses of SVGs.
- CSS Grid Tutorial - Use CSS grid to structure and position websites with ease.
- Git and GitHub for Beginners - Crash Course - Ad-free tutorial by freeCodeCamp.
- 12HR Coding Bootcamp 2021! - Complete frontend bootcamp!
⬆ back to top
الاختبار
- Jest - JavaScript testing framework
- Mocha - JavaScript testing framework
- Karma - JavaScript test runner
- Istanbul - JavaScript test coverage tool
- TestCafe - Node.js end-to-end testing
- Cypress - JavaScript end-to-end testing framework
- Puppeteer - Google's Chrome automation tool for E2E testing.
- Playwright - Microsoft's browser automation tool for E2E testing.
- Sinon.JS - Standalone test spies, stubs and mocks for JavaScript
- Chai - Assertation library for JavaScript testing
- PactumJS - REST API Testing Tool used to automate e2e, integration, contract & component (or service level) tests
- Vitest - Vitest is a blazing fast unit test framework powered by Vite
⬆ back to top
