現役エンジニアの立場から、学習におすすめのリソースをご紹介します。
実際に私が使ってきたものをご紹介するので、これからコーダーやフロントエンドエンジニアを目指す方は必見です！
お金をかけずに学びたい人向け
まずは、無料で使えるものの中で私が実際に活用したものをご紹介します。
プロゲート Progate
よく名前聞くやつですよね。初期に使用していました。
エディタの準備をしなくても、サイト上でコーディングできるので便利です。
無料で学べる部分と有料の部分があるので全てのレッスンを受ける場合は有料プランに登録する必要があります。（私は有料プランには登録していません。）
学習レッスンと道場レッスンがあるので、インプットとアウトプット両方を兼ね備えています。
難易度はそこまで難しくはないので、初心者にはちょうどいいなあと感じていました。
コードジャンプ Codejump
こちらは模写用サイトをたくさん用意してくれているサイトです。
私が使用していた頃よりも練習用のサイトがとても豊富になっておりました…！
初級・中級・上級だけではなく、番外編や実案件をモデルにした実践編というのも用意されているので、自分のレベルに合わせて選ぶことができます。
サイトに使用する画像も用意されているので、自分で探してくる必要はありません。
実際によくみるサイト構成ばかりなので、実案件でもかなり役立ちます。
FLEXBOX FROGGY
こちらはCSSのflexboxを学べるゲームです。
カエルを指示通りの位置に動かすことができればどんどんレベルが上がっていきます。
flexboxを使いこなせるようになるとできることが格段に増えるので、一通りやってみると良きです。
お金かけてもいい人向け
ここからは自己投資をして買った教材等をご紹介します。
CSS設計完全ガイド
まずはスタイルの当て方を学ぶと思うのですが、設計まで学んでおくとレベルアップします。
本の著者は「PRECSS」という設計手法を開発された方です。本の中には代表的な設計手法である「BEM」についても触れられており、最適な設計手法を炙り出すためには何を考えれば良いのかが分かりやすく書かれています。
一通り読んでみるとCSS設計についてをふんわり理解できるようになります。
1回読んで全部理解するのは大変なので、実際にサイトを制作する際に意識しながら書いてみて、わからなくなったらまた本を読み返すという形で辞書代わりに持っておくと良いと思います。
Udemy
教材豊富なUdemyさん。私もよくお世話になっています。
実際に私が購入して受けた講座は下記です↓
【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編）
古い情報は定期的にアップデートが施されているので、今から学習を始める方にもおすすめできます。
CSSのアニメーションは個人的にとても勉強になりました。もともと苦手だったこともありますが、講座を経て原理をようやく理解できた感じがします。
クリエイターズファクトリー
クリエイターズファクトリー
こちらは通学orオンラインで学べる卒業のないWebスクールです。私はオンラインで実際に学んでいました。
デザイン〜コーディングまで一通り学ぶことができますし、個人で仕事を受ける場合の流れも教えてくれます。当時の私はコーディングだけでなく、Webデザインやフリーランスという働き方にも興味があったので非常にありがたかったです。
やっぱり独学だと自分で作ったものの良し悪しを判断するのが難しいので、現役のプロに添削していただけるのが良かったです。
講義は毎週土曜日の午前中に受けて、他の時間は課題をこなしてレビュー依頼をして、修正してまた提出してを繰り返していました。
このスクールで学んだことが一番実践で活きています。
無料相談会が毎週実施されているので、オンラインスクールってどんなもんよと思っている方は参加してみると良きです。無理な勧誘をされた記憶は全くなく、ゆる〜い感じの説明会＋お悩み相談みたいな感じでした（当時）
最後に
いかがでしたでしょうか？学習は継続が大事です。
自分に合う学習教材が見つかるとやる気もアップするはずなので、ぜひご紹介したサービスを使ってみてください！
