آموزش ابزارهای توسعه وب: افزایش گردش کار و کیفیت کد

معرفی Introduction

• جریان کار توسعه وب خود را افزایش دهید (در حال انجام) Supercharge your web development workflow (In progress)

• آنچه شما باید بدانید What you should know

• نحوه استفاده از فایل های تمرین How to use the exercise files

1. تست مرورگر و ابزار 1. Browser Testing and Tools

• تست مرورگر متقابل Cross browser testing

• دسترسی به ابزارهای توسعه دهنده Accessing the developer tools

• HTML را بررسی کنید Inspect HTML

• CSS را بررسی کنید Inspect CSS

• فلکس باکس و گرید را بررسی کنید Inspect flexbox and grid

• کنسول جاوا اسکریپت The JavaScript console

• تست طرح‌بندی‌های واکنش‌گرا و موبایل Testing responsive and mobile layouts

• ابزارهای اعتبارسنجی و کاربردهای لینتر Validation tools and linter applications

2. ویرایشگرهای متن 2. Text Editors

• ویرایشگرهای متن در مقابل IDE ها Text editors vs. IDEs

• با ویرایشگر متن خود آشنا شوید Getting to know your text editor

• استفاده از میانبرهای صفحه کلید Using keyboard shortcuts

• بسته ها و افزونه های برنامه افزودنی Extensions packages and plugins

• تکمیل خودکار کد Code autocompletion

• تکمیل خودکار با Emmet Autocompletion with Emmet

3. فریم ورک های فرانت اند و پیش پردازنده های CSS 3. Front-End Frameworks and CSS Preprocessors

• برگه های سبک CSS را بازنشانی کنید CSS reset stylesheets

• چارچوب های CSS برای توسعه front-end CSS frameworks for front-end development

• مولدهای سایت استاتیک ساخت وب سایت CMS Static site generators CMS website building

• پیش پردازنده های CSS CSS preprocessors

• Git و کنترل نسخه Git and version control

نتیجه Conclusion

• مراحل بعدی Next steps