JavaScriptの開発環境について

MDNを教材にしたHTML/CSS/JavaScriptの自習に取り組んでいます。
「ウェブ開発を学ぶ」に忠実に従い、htmlの基本からなぞっています。
CSSは、idとclassの違いや継承等を理解できたのが良かった。偽装セレクターあたりは日本語訳がないので、後で調べなくては。。
それで、いよいよJavaScriptに突入ですが、そのまえに開発環境について。
基本的に、VS CodeとGoogle Chromeで問題ないんですが、Web上で開発できるサイトがいくつもあり、目移りしてしまいます。結局はThimbleに落ち着きそうですが、試した４つのサイトについて簡単に説明します。
１．playcode.io

〇ご覧のように縦に５つに分かれてすべて表示されています。例えば、CSSは表示しないで、そのほかを広げることもできます。
×画面が大きければすべて一覧できるのでお勧めですが、我が家の21インチではやや狭い。MacBook Airでは相当厳しい。
〇JSファイルやCSSファイルを複数作成できます。
〇JQuerryやfont-awesomeなどを登録できます（最初の画面に入っています）。＋ボタンを押せばこれ以外も設定できます。
〇しっかりと画面で確認したいときは、「public」ボタン（ログイン後出てきます）で、確認可能です。
×ファイルのドラッグアンドドロップができない。

２．jsfiddle

〇こちらのいいところは、設定画面があって、自分なりに見やすい構成にできます。

〇複数のjsファイルCSSファイルの指定ができます。
〇jsの設定の際にJQuerryなどの選択が可能です。
△font-awesomeの指定はhttps://から指定する必要があります。（これが普通かも）
×ファイル名が指定できないみたいです。また、複数ファイルも無理みたいです。
×iPadアプリのJSAnywhereのsampleのjsが動きませんでした。
〇ファイルのドラッグアンドドロップができる。
※画面の設定が可能なところはいいのですが・・・

３．codepen

〇こちらも画面の設定ができます。
〇ファイルのドラッグアンドドロップができる。
×ファイル名が指定できない（みたい）
×複数のファイルが使えない（みたい）
×無料ユーザが登録できるプロジェクトは１つだけ

４．thimble

〇ドラッグアンドドロップができます。
〇ファイル名の指定ができます。
〇jsファイルとcssファイル、画像はフォルダ事登録できるなど、複数ファイルの登録ができます。
△JQuerryやfont-awesomeの呼び出しはhtmlに追記が必要です。

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

〇ファイルのダウンロードが簡単にできます（thimble-project）。
×iPadからchromeでプロジェクトを開くことができません。そのほかの３つは動きますので、メールで照会しています。（残念）
△ファイルをダウンロードしてDropBoxに保存すれば、JSAnywhereというアプリで動きます。
※公開するとこんな感じになります。