【HTML/CSS】学習に役立つツールと効率的なやり方①【学習サイト編】
マサです。
今回は、HTML/CSSを勉強するときに役立った学習ツールをまとめてみました。
HTML/CSSの学習に欠かせないツールとは
最近はプログラミング学習する方法が色々とありますよね。
- 学習サイト
- 動画
- 参考書
- スクール
- その他
大まかに分けるとこんな感じでしょうか。
私はスクールには通わず独学で勉強を進めているのでよくわかりませんが、それ以外に関しては色々と使ってきました。
そこで、個人的に使ってよかったものやそれぞれの特徴を順に記事にして挙げていこうと思います。
今回は主に学習サイトの活用について私が使っていて感じたこと、オススメの手順を書いていきます。
学習サイト
これは有名な2つがありますね。
Progateとドットインストールです。
Progate
Progateは言語ごとにレッスンがあり、それぞれ指示されたコードを書いていくわけですが、自分の書いたコードが直感で分かり、エラーもどこがミスしているのかが分かりやすい作りになっているので、楽しさを実感しやすく、挫折しにくいです。
ただ、その反面このコースを終えただけでは自力で何か作るということは難しいです。本当に導入ですね。
ドットインストール
ドットインストールは個人的にProgateより難易度が高いと感じました。コードも自分のPC上のテキストエディタを使うので、Progateに比べてコードを自分で打ってる感があって、初期の頃はちょっとテンションが上がりました。
ですので、初めにドットインストールからやると、環境構築で時間を取られる方もいるんじゃないかと思いますので(もちろん説明はされてますが)、Progateで少し慣れてからが良いと思います。
この2つを使う上でオススメの学習順序
オススメの学習順序ですが、その前にProgateはスマホで簡易版ができることもご存知でしたか？
これ、手軽にできて便利なんですが、あんまり勉強した気にならないので注意です。
というのも、私の初期の学習順序が、Progate(スマホ版)→ドットインストール→Progateという何ともまあ変な順序で勉強を初めたんですが、その時の状況として、「とりあえずHTMLから勉強するとして、難しかったら嫌だしスキマ時間でできるProgateのスマホ版で勉強を初めてみよう！」といった感じでした。
これが失敗で、ほとんど知識が定着しないままドットインストールの難しさに打ちのめされたわけです。笑
受験勉強でも「教科書を読む前にスマホの勉強アプリで先に勉強しよう！」という方はなかなかいないですよね。あくまで副次的なものとして扱うのが正しいです。
ですので、基本はサイトにある順番をやるべきで、おおまかな手順は
- Progate初級・中級レッスン
- Progate初級・中級道場
- Progate上級レッスン・道場
- Progate Flexbox編
- ドットインストール「ウェブサイトを作れるようになろう」①②
- ドットインストール「ウェブサイトを作れるようになろう」④
これでいいでしょう。
そして、Progateのスマホ版は1と2の間、もしくは2と3の間、またはドットインストールに進んでから、のどこかのスキマ時間で復習のように使うほうがいいです。
また、Progateの初級以降とドットインストールの①②以降は有料プランになるのですが、とりあえず手順の1～5は必須でやっておいた方がいいです。
理由は次に説明します。
無料で始めたい！という人は以前にとりあえず1ヶ月勉強してみよう、という概要の記事を書いた時に軽く触れているので、こっちを見ていただけるといいのではと思います。
Progateとドットインストールを有料プランにすべきか
さて、ではこの手順通りに学習を進めるのに有料プランが必要かどうかですが、半分は○で半分は×です。
なぜなら、この段階ではProgateの有料プランは絶対に必要ですが、ドットインストールの有料プランは必ずやっておくべきと言えないからです。
Progateは初級だけでは本当に必要なスキルが学べません、、
中級～上級のスキルを組み合わせてやっと知識が少しついたかな？といったレベルです。
対して、ドットインストールの「ウェブサイトを作れるようになろう」は①と②までは無料、そのあと私は有料にして学習しましたが、③と⑤に関しては詳解シリーズです。
これは使えるコードなどが順に紹介されているだけなので、「実際どこでどう使うんだろう、、？」とイメージ
しにくく、あまり身につきませんでした。
ただ、④の「ウェブサイトをゼロから制作してみよう」はかなり勉強になりました。
ですので、効率よく極力安く進めるなら、
- Progateの有料プランを1ヶ月(すぐに解約しても1ヶ月は使えます)
- 上記の手順で学習を進める(1～2週目)
- ドットインストールで有料プラン→④の学習(2,3日)
- (ここでアウトプットするために自主制作を入れる)(3週目)
- 次の言語に進む
- Progateで学習(有料プランが終わる前に→4週目)
- ドットインストールで学習
この順にやります。次の言語というのは、HTML/CSSでのあとにフロントエンドの学習をするならJavascriptなどですね。
これはどちらにしても有料プランですので、Progateの最初の有料プランが終了する日までに6まで終わらせておけばいいと思います。
Progateは税込み980円、ドットインストールは税込み1080円です。
