前回はWebエンジニアまでのロードマップでしたので今回はフロントエンドだけに絞ります
HTML/CSSなどはフロントもバックも知っておくべき内容ですがフロントの場合もっとディープな部分まで学ばないといけません
Gitなどプログラミングの範囲外は割愛します
言語に絞りますね
あとスライドショーとかを作る際にライブラリに頼るのはやめてください
自力で作れるようになってからです

ロードマップ

1.HTML/CSS

先ほども書きましたが基礎で終わるのではなく応用も必要です
コーディングなら任せろ！！と声高らかに言えるまでやってください
おすすめの書籍ですがこれはポケットリファレンス
一通りやるべきです
覚えなくていいですから

と思える程度に読むことをおすすめします

2.CSSの応用とフレームワーク

CSSは果がないので全てはできませんが抑えてほしいのは
・アニメーション処理
ここは色々とできるので学んでください
フレームワークはこの2つ
・Bootstrap
・TailwindCSS
この2つは簡単にレスポンシブデザインができます
現場でも使われる技術なので必ず習得しておいてください
どっちがいいですか？と聞かれたらどっちもですが体感TailwindCSSの方が今後伸びてきそうです

3.JavaScript

ここも前回同様ですね
しっかり習得してください
基礎はもちろんですがDOM操作は確実にできるように
あとはタイマー処理など基礎より一歩踏み込んだ領域まで進みましょう

4.JavaScriptのフレームワーク

次はフレームワーク
・React
・Vue
の2つは押さえておきたいです
世界的にはReact、日本ではVueというものが多く使われています
スマホアプリ制作に興味があるならReactをおすすめします
2つともやってほしいですがWebデザイナーだけで考えるなら僕はVueを推します
個人開発なら好き好きでいいのですが現場だとバニラJS(素のJavaScript)で書くことは稀です
何かしらのフレームワークは使っています

あとはおまけ程度ですがjQueryをやっておきましょう
基礎程度でいいです
将来性はないですが現状まだ使われている技術です
案件もらったときにjQueryと遭遇する確率は普通に高めです
がっつりやる必要性はないですが基礎部分は触れておいてください

ライブラリーを触ってみる

D3.jsやAnimeJSなどいろいろと便利なライブラリが存在します
簡単にアニメーションを作成できたりグラフを作れたりします
使い方を覚えて自身でカスタマイズできるようにしてください
JavaScript ライブラリ
で検索すると色々出てきます
ここに関してはロードマップのなかで唯一楽しい項目ですので色々やって見ましょう

作れるようになってほしいもの

動きのあるページを作れるようになってください
パララックスサイトであったりスライドショー、ギャラリーあたりは作れるようになりましょう
不二家のブランドページのようなサイトを目指します

終わったら

Node.js

 余裕のある人はNode.jsに手を出しましょう
問い合わせフォーム、予約フォームなど作れたら最高です
これが出来たら企業ページ、飲食店などのページならバックエンドエンジニア呼ばなくてもあなた一人で解決出来ます

色んなパターンのサイトを作る

企業ページ、飲食店のページ、ギャラリーサイト、商品LP
色々作りましょう
デザイン案がなければパクリましょう
レイアウトなんかに著作権もクソもないです

お疲れ様でした

ざっくり進めるとこうなります
上でも言いましたがスライドショーを作る際にいきなりライブラリを使用するのはやめましょう
勉強として使うのはいいですが
ここらライブラリあるから勉強しなくていいや〜
はどこかで必ず詰みます

これで

ってランサーズなりクラウドワークスなりでアピールして案件を貰いましょう
副業の進め方、はじめ方はまた別記事で書きます