フロントエンド学習ロードマップ中間報告

ABOUTこの記事をかいた人

大学でプログラミングを学ぶ→経営に興味を持ち勉強→月2桁は稼ぐフリーランスに→プログラミング初心者向けのオンラインメンタリング Udemy講師もやってます→u0u1.net/MGfz

はい、今回は学習ロードマップの中間報告ということで現状考案しているものを公開しちゃいます。
正直全然浅いんですが、あんまり寝かせるとやるやる詐欺になりかねないので。笑

観点としては、半分キャリアのロードマップも含んでいるイメージです。かつフリーランスの場合の目線です。会社に入る場合であればいきなりサーバーサイドの言語を学ぶのも全然ありな気がしているので。なので、技術的に綺麗に順を追っていない箇所もあります。

さて、ここからレベルごとに羅列していきます。

レベル1:HTML/CSS

HTMLの基本
・基本的なタグを覚える
・inline/blockの理解
CSSの基本
・セレクタの種類
・レイアウトを覚える
・positionの理解
・flexboxの理解
・box-sizingの理解
・リセットCSS、デフォルトCSSの理解
・ラジオボタン、チェックボックスのカスタマイズ
・メディアクエリを使ったレスポンシブ対応
テスト
・SangoのHTML/CSSだけの模写(SANGO | 心地良さを追求したWordPressテーマ)

—初級HTMLコーダーの壁—

レベル2:最低限のjQuery

・addClass、removeClass、toggleClass
・上記を使ってタブメニューやハンバーガーメニュを作る
テスト
・SangoのjQuery部分の制作(SANGO | 心地良さを追求したWordPressテーマ)

レベル3:JSライブラリの利用

・Swiper.jsなどの理解
テスト
・サツドラの模写(サツドラ(サッポロドラッグストアー)|サッポロドラッグストアーは、2016年春、「サツドラ」に生まれ変わりました。)

—中級HTMLコーダーの壁 ここまでで十分仕事になる—

レベル3.5:ツール系

・emmet
・自動コード整形
・git初級

レベル4:Sass/Less/Stylus初級

・メディアクエリの簡略化
・セレクタのネスト

レベル5:CSS設計

・クラスの命名規則
・Sass/Less/Stylusによるコンポーネント設計

—上級HTMLコーダーの壁 
ここからはフロントエンドエンジニアかバックエンドエンジニアに—

レベル5-A:生JavaScript–フロントエンドエンジニアへ

・DOM操作
・外部APIの呼び出し
・ここからVue.jsやReact.jsへ発展

レベル5-B:wordpress

・wordpress独自の関数の理解
・PHP初級
・各種プラグイン
・ここからサーバーサイド言語へ発展

だいぶざっくりした内容ですが、大枠の流れはこんな感じになります。今後の制作の中で多少順番が入れ替わったりする可能性はありますが。

とはいえこれでもそれなりに初心者の方に役立つという自信はあるので、勉強に関してお困りの方は参考にしてみてください!

この記事を読んだ方におすすめの記事

プログラミング学習者が仕事を取れない2つの理由 〜1週間に10人以上と面談して分かった〜

2019年3月10日

スクールでは教えてくれない!プログラミング言語の分類と選び方

2019年2月24日

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください