素晴らしい！ Web デザイナーとフロントエンド向けに収集する価値のある実用的なツールのリスト_html/css_WEB-ITnose

経験豊富なフロントエンド デザイナーであっても、初心者のデザイナーであっても、実際の Web デザイナーや開発者向けのこれらの実用的なツール、オンライン サービス、リソース、コード スニペットは、自然かつ合理的に使用できます。 Web デザインと開発は半分の労力でより効果的になります。

今回まとめたツールは全部で40個あり、基本的には大きく8つのカテゴリーに分類できます

・インスピレーションと読書: このタイプの素材は通常、デザインケースやクールなウェブサイトであり、インスピレーションを与え、あなたにインスピレーションを与えます経験

·オンラインコミュニティ: Web開発者とデザイナーの優れたコミュニティ

·Web速度テストツール:最高のWebサイト速度テストツールの一部

·コミュニケーションとプロジェクト管理:Webやモバイルを含むコミュニケーションと管理に適したツール

・コード共有とエディター: 最高の Markdown エディター、コード共有ツール

・CSS/HTML: Web ページをより美しくするツール、より明確な CSS コードの作成に役立ちます

・フレーム: 最も人気があり、最も便利な Web 開発フレームワーク

· Git クライアント: 説明しなくても簡単に使えます

次に、お楽しみください!

インスピレーションと読書

Web 開発読書リスト

これは、Web 開発関連リソースの厳選されたリストであり、購読し、フォローし、使用するだけです。

WEB TOOLS WEEKLY

Web Tools Weekly は、フロントエンド開発ツールと Web デザイン ツールに焦点を当てたニュースレターです。

Web Operations Weekly

同様に、Web Operations Weekly も毎週更新されるニュース ブリーフィングで、主にネットワーク運用、ネットワーク インフラストラクチャ、ネットワーク パフォーマンスとツールなどに関する内容が含まれます。

Freshbrewed.co

この Web サイトには、読んで収集する価値のある Web デザインと開発に関する最新の記事、テクノロジー、ベスト プラクティスがまとめられています。

オンライン コミュニティ

フロントエンド フロント

フロントエンド開発者は、フロントエンド フロントで質問したり、興味深いコンテンツを共有したり、開発プロジェクトを紹介したりできます。

Refind

Refind はインターネット上の最高の Web サイトとリンクを収集しており、毎日ここで最高のデザイン プロジェクトを見てインスピレーションを得ることができます。

LinkedIn PHP 開発者グループ

PHP、Mysql、Drupal、Joomla、Zend、Cake、MVC に精通している場合、この LinkedIn コミュニティは最適です。

ウェブページ速度テストツール

ウェブサイト速度テスト

これは非常に実用的なウェブサイト速度テストツールであり、ページプレビュー機能も含まれています。

Google Chrome DevTools

Google Chrome DevTools は、Google Chrome の Web ページ作成およびデバッグ ツールで、トラバース、デバッグ、監視に使用できます。

Pingdom

Pingdom の使い方は非常に簡単で、ウェブサイトの URL を入力することで読み込み時間をテストできます。

Google PageSpeed Insights

この速度テスト ツールは、ウェブサイトを分析して最適化するためのベスト プラクティスを参照できます。

WebPageTest

通常のブラウザを使用して、WebPage Test を使用して、世界中の Web サイトの接続速度を無料でテストできます。

GTmetrix

GTmetrix は、PageSpeed と YSlow を備えた無料の Web 接続速度テスト ツールで、ページのスコア付けに役立ちます。

コミュニケーションとプロジェクト管理

Slack

Slack は、リアルタイムのチャット、コラボレーション、アーカイブを通じてチーム、リソース、プロジェクトを管理できるオンライン統合チーム コミュニケーション ツールです。

Glip

Glip は、タスク管理、ファイル共有、コンテンツ検索に使用できるリアルタイム会話/ビデオ コミュニケーション ツールです。

Jira

Jira は、アジャイル ソフトウェア開発チーム向けの柔軟なプロジェクト管理ツールです。

Trello

Trello は、クロスプラットフォームのタスク割り当ておよびプロジェクト管理ツールで、チームの共同作業でも、タスク リストの作成でも、簡単に操作できます。

Asana

Asana は、Facebook が所有するチームコラボレーション、タスク割り当て、およびプロジェクト管理ツールです。使いやすく、すぐに始めることができます。

コードシェアとエディタ

コードシェア

これは、開発者がコード スニペットを無料で共有するためのツールです。

Dabblet

これはインタラクティブな CSS テストおよびコード共有ツールであり、Github への保存や多くの便利な編集機能もサポートしています。

Beyond Compare

シンプルだが強力なコマンドを使用してファイルとフォルダーを比較し、注目すべき違いに焦点を当てることができます。

StackEdit

StackEdit は、PageDown に基づくフル機能のオープンソース MarkDown エディターであり、Stack Overflow や他の Stack Exchange Web サイトではその Markdown ライブラリがよく使用されます。

Mou

これは Mac OS で最高の Markdown エディタの 1 つです最も重要なのは、中国語のサポートが非常に優れていることです。

MarkdownPad

MarkdownPad は、Windows プラットフォーム上のフル機能の Markdown エディターです。

Sublime Text

Sublime Text は、優れた機能と優れたパフォーマンスを備えた高度にカスタマイズ可能なコード エディターです。

Dillinger

Dillinger は、クラウドベースでモバイル端末をサポートし、オフラインで保存できる AngularJS と HTML5 に基づく Markdown エディターです。

Texts

Texts は、主に Windows および iOS プラットフォームに存在するルーンクロス エディタです。

ByWord

ByWord は、よりスムーズで興味深い編集エクスペリエンスを提供することを目的とした Markdown エディターでもあります。

CSS/HTML

Sass

Sass は、強力な機能と専門性を維持しながら、現在最も成熟した安定した CSS 拡張言語です。

Stylus

Node.JS をすでにお持ちの場合、Stylus のインストールは非常に簡単です。Stylus は、Node.js に強力で機能が豊富で優れたパフォーマンスの CSS 言語サポートを提供します。

Less

Less は、CSS 言語の拡張機能であり、機能を強化し、多くの追加サポートを提供します。

フレームワーク

Bootstrap

Bootstrap は、レスポンシブなモバイルファーストのページやプロジェクトの作成に役立つ最も人気のある HTML/CSS/JS フレームワークです。

Semantic UI

Semantic UI は、HTML を使用して美しく応答性の高いレイアウトを作成できる開発フレームワークです。

Foundation

Foundation は、美しいレスポンシブ Web ページ、APP ページ、クールな電子メールをより簡単にデザインするのに役立つ一連のレスポンシブ フロントエンド フレームワークです。

Uikit

Uikit は、開発者が強力な Web インターフェイスを迅速に設計できるように設計された軽量のモジュール式フロントエンド フレームワークです。

Git クライアント

SourceTree

SourceTree は、Windows と Mac の両方のプラットフォームをカバーする無料の Git および Mercurial クライアントです。 SourceTree を使用すると、すべてのローカル ファイル、ホスティング、リポジトリを管理できます。

Tower 2

Git Tower は、Mac プラットフォームで最高の Git クライアントです。Git のパワーと使いやすさを兼ね備えていることが、Mac ユーザーが Git Tower を選ぶ主な理由です。

Gogs

Gogs を使用すると、Windows、Mac、Linux、ARM など、Go が実行できるほぼすべてのプラットフォームでコンパイルすることができます。 Gogs には高いパフォーマンス要件はなく、Raspberry Pi 上でもスムーズに実行できます。

GitKraken

GitKraken は、Windows、Mac、Linux 上で動作する美しく直感的な Git クライアントです。

GitLab

GitLab は、個人またはパブリックの無料ソフトウェア開発プロジェクトをホストするのに役立ちます。

【多くのスキルを持ちながらも圧倒されないデザイナーだけが高給取りです！ 】

1. グラフィックデザイン: 「すごい！デザイナーのための完全な独習ガイド」
2. インタラクション デザイン: 「インタラクション デザイナーとしてのトレーニングのガイド!優れたインタラクション デザイナーになる方法をゼロから教えます。"
3. UI デザイン: "超実践的な初心者向けガイド!基礎ゼロで UI デザインを独学するにはどうすればよいですか? 》
4. フロントエンド開発：『Tmallの専門家が教えます！フロントエンド開発をゼロから体系的に学ぶにはどうすればよいですか? 》
5. 切り抜きスキル: 》初心者からマスターまで！ PHOTOSHOPで写真を切り抜く徹底ガイド》
6. 配色：「素早く色合わせ！」カラー マッチングを完了するための 3 つの実践的な方法」
7. DPI ガイド: 「基本を学びましょう!デザイナー向け DPI ガイド』
8. インタラクションデザイン独習パスマップ: 『基礎ゼロから始める！非専攻学生のための自習パスマップ - インタラクションデザイン」

元のアドレス: webdesigndev

Youshe 翻訳: @陈子木

この記事は元々 Youshe.com によって翻訳されたものです。著作権と著作権を尊重してください。翻訳者の業績、再版へのリンクを添付してください。違反者は起訴されます。編集者の皆様、ご協力ありがとうございました。

【元記事 by Youshe.com 投稿メールアドレス: 2650232288@qq.com】