【HTML/CSS】学習に役立つツールと効率的なやり方④【その他編】
さて、今回で最後です。
HTML/CSSを勉強するときに役立った学習ツールのまとめの続きからやっていきます。
HTML/CSSの学習に欠かせないツールとは
前回までの3回の記事でプログラミング学習する方法として、以下を挙げました。
- 学習サイト
- 動画
- 参考書
- スクール
- その他
以前も書きましたが、私はスクールには通わず独学で勉強を進めているのでそこはよくわかりません。
しかし、それ以外に関しては色々と使ってきました。
今回は主にその他の勉強方法について私が使っていて感じたこと、オススメの手順を書いていきます。
その他の学習方法とは
noteやブログ、Twitterを活用する
学習サイトや動画、参考書での学習の他にできる学習方法とは何でしょうか？
それは他の先輩エンジニアのnote、ブログ、Twitterなどの媒体を活用して学習を進めることです。
活用方法としてはざっくりと2つに分かれて、
- 教材などの実践するツールとして活用
- 進め方などのスケジュール管理を参考にして活用
このどちらかになります。
分かりにくいので一言で言うと、
前者が学習そのもののやり方で、後者が学習を効率良く進める為のやり方です。
それぞれ詳しく書いていきます。
実践ツールとして活用する学習方法
前者の実践ツールとして使う場合はこれまでの自分の学習スケジュールの中に埋め込むもので、前回までの記事でも紹介してきた参考書や動画、学習サイトと進め方は同じようなものです。
例を出すと有料noteや、Twitterで発信している方の作っているコーディング教材などです。
では、私が使ってよかったものを挙げます。
くりのすけさんのnote教材
難易度的には、Progateやドットインストールを終えて次にアウトプットの学習を進めたいときにどうしよう、、といった方向けです。
実際にWeb制作で活躍している方の実践で活用できるnoteですから、これほど貴重なものはないですよね。。
私もかなり勉強になりました！
時間短縮の為にサクッと成長したい人には1番オススメです。また、前回の記事含め私のように色々な学習ツールを使ってみたい方は、順序としてはProgateの道場やドットインストールで｢ウェブサイトを作れるようになろう｣を終えた段階で取り組む方がいいと思います！
【無料公開】
— くりのすけ＠WEB制作×副業 (@kurinosuke32) 2020年1月2日
昨年から、コーディング練習note①～⑥を投稿してます！
現在、note①に関しては無料公開してます！
興味ある方は、この機会に勉強してみてください💪
✅Progateの後、悩んでいる方
✅サイト模写に挫折しそうになっている方にオススメです❗https://t.co/kDWpW4cEI6
個人的にはこのnoteと前回に紹介した｢HTML5/CSS3 モダンコーディング ｣の参考書の2つを活用するのが1番の効率良く成長できると思ってます。
色々と試してきた中で特に成長できたものだからです。
これすけさんのnote教材
HTML/CSSを勉強している方でも、特にデザイン系のことが知りたい！という方には特にオススメです！
コーディング作業自体の難易度は先ほどのくりのすけさんのnoteとさほど変わらないと思いますが、こちらはデザインカンプの作り方から紹介されているので、デザイン方面でめちゃくちゃ勉強になります！
ですので、HTML/CSSを勉強し始めた方が今すぐに、という訳ではないですが、その後でPhotoshopやIllustrator、XDなどのAdobe系を勉強したいなぁ、という方は将来的に絶対買っておいて損は無いnoteであると言えます。
コーディングは出来るけどデザインは出来ない…という方に1からWebサイトをデザインするノウハウをまとめてます✍️
— こばやす✍️Webデザイナー (@kobayas_s) 2020年1月10日
①現場で使う構成の見本
②ワイヤーフレームの作り方
③デザインレイアウト
④デザインのブラッシュアップ
⑤レスポンシブデザイン方法
が全て詰まってます👍https://t.co/nbClZjuQTm
進捗管理などの参考として活用する方法
後者のこちらはTwitterやブログで発信されている学習の進め方などのまとめですね。(有名な例を出すとデイトラ、マナブさんの学習ロードマップなど)
ブログタイトル的には先ほどの前者の方を指すのでしょう、なので少しタイトルとはズレるかもしれませんが、それらを含め効率的に学習を進めていくためのスケジュール管理に他の先輩エンジニアたちの経験を活かすというのは非常に大事なことですので、一緒に紹介します。
私はこのスケジュール管理を初めに参考にしつつ、学習を開始しましたが途中で迷走せずに済みました。
30DAYSトライアル
これは先ほど少し触れましたし、以前記事でも紹介しました。
自分の最終目標に向けて、30日間を1セットとして、1st～3rdまで段階的に学習を進めていけるもので、東京フリーランスさんのブログで紹介されています。
特に勉強し始めた初心者の方だとまず初めにスケジュール管理に困るはずです。
ですので、これを使えば次に何をどう勉強すればいいかが明確になるので、自分で中長期的なスケジュールを立てられない方は絶対に活用するほうがいいです。
マナブログさんのロードマップ
マナブさんの学習ロードマップですね。
私はこのロードマップを見て、それを自分なりに変えつつ進めていきました。
ざっくりと学習の順序とモチベーションをあげるにはオススメの記事です。
おわりに
さて、今回は前回までのように引き続き学習サイトや動画、参考書以外の学習方法をまとめました。
学習のやり方は人それぞれです。
Progateのように有名な学習サイトからやるもよし、手っ取り早くYoutubeを見ながら始めるもよし、参考書を買って進めるもよしです。
ただ、今回までの記事でも書いてきたように、私がHTML/CSSの学習をやる上で一番効率のよい方法だと思うのは、
- 学習のスケジュールを明確にする
- 学習サイトを使って勉強を開始
- note教材などを使って実践的なアウトプット
- モダンコーディングの参考書
この順番かなと思います。
参考にしてもらいつつ色々な学習ツールの中から方法を選んでいただければ幸いです！
それでは
