どうも！新卒の就職活動で飲食店しか採用されず10年以上飲食店の店長として働いてきたおざっきと申します。
この記事をご覧になられているということは色々な独学ロードマップを見てきたのではないでしょうか。
実は私もスクールに通えるお金、時間がなく独学で勉強を行ってきました。
・自分に出来るか不安、自信がない
・この理解力でいいの？
・スクールにやっぱり行かないとだめ
今回、私みたいにみんなが出来ることをめちゃくちゃ努力しないと出来るようにならない、もしくはうまく出来ないと自分のスペックに不安な人が少しでも自信に繋がるような独学ロードマップになっております。
今回の記事で得られるもの
どれくらいの理解力で学習を取り組んでいったのか
この記事を書いたのは
おざっき
2児のお父さんでデスクワークに憧れてい中年のおじさんです。
33歳までは約10年飲食店で働いてきました。現在は生産現場で働いており、パソコンとは無縁の仕事を行っております。人のせいにはしない！環境のせいにはしない！をモットーに頑張り2020年9月から学習を初めて2023年3月に目標の月5万円を稼ぐことが出来ました。全てが亀よりもノロまで、金魚よりも物忘れが激しいただのおっさんです。
前提：悩むな！とりあえず進めよう！
成果が十分で優秀な方のWEB制作のブログと成果があまりない成果がないブログがあります。この2つはブログには大きな違いがあります。成果が十分で優秀な方のブログは学習を進めていく中で躓いたときに心を折る原因になるということです。
やっぱり私には無理なんだ
私の理解力では足りなかったんだ
独学では無理だったんだ。
このブログではそんな想いを共感していただきながら学習を進めて行くことが出来ます。
大学受験で一日10時間も勉強をして偏差値が50しかない私でも出来ました。
大学生活で友人からお前の頭だと人生ハードモードだなと言われた私でも出来ました。
実際にハードモードです。笑
悩まないでくだい。諦めずに最後までやりましょう。
手を動かしましょう！
Progate
Progateとは
Progate（プロゲート）は、オンラインでプログラミング学習を行うためのプラットフォームです。
Progateは、初心者向けに作られており、ビジュアルなエディタや解説動画、クイズなどを使って、分かりやすく学習を進めることができます。
また、自分でコードを書いて実際に動かすことで、より実践的な学習ができます。
さらに、テキストエディタの環境構築をしなくても使うことが出来ます。
Progateは、日本発のプログラミング学習プラットフォームとして、日本語にも完全対応しており、初心者でも分かりやすい内容となっています。
WEB制作って楽しいし私でも出来そうだなと是非感じていただきたいです。
Progateの学習方法
HTML・CSSの学習コースは必ず1周はした方がいいです。
ポイント
覚えるのではなく知らないことを知らないをなくすことに専念してください。
理解度：暗記は全く出来ておりませんが書いてある内容は理解できる程度
簡単すぎて逆につまらない
理解度：初級編と同様に暗記は全く出来ていないが書いてある内容は理解できる程度
ようやくサイトを作っている感じが出てきて楽しくなってきた
理解度：初見で全く手が動かないくらいわからない。答えを見ながら進める。
全く覚えれてなくて焦る。
理解度：初見で全く手が動かないくらいわからない。2回目でようやく1/3程答えを見ずに出来た程度
焦りすぎて初級編と中級編をノートに書きながら行う。←全く持って無駄！一度も見返しませんでした。
理解度：中級編と同様に暗記は全く出来ていないが書いてある内容は理解できる程度
初級編と中級編も覚えていないのに不安になりながら新しいことが出てきすぎてさらに不安になる。
理解度：初見で全く手が動かないくらいわからない。
覚えなくてもいいやと開き直る。復習程度に答えを見まくってクリア。
理解度：書いてある内容はなんとなく理解できる程度。どこでどんなふうに使うかわからない状態。
もう早く終わってほしいしか思わず、大変でした。
Progateが終わった段階での理解度
・書いてある内容を見たらわかる
・調べながら中級の道場編が出来る程度
・いつどこで何を使うかよくわからない
VsCode（テキストエディタ）
テキストエディタとは
テキストエディタには、Windows標準のメモ帳やMacのTextEditなどのシンプルなものから、EmacsやVimなどの高度な機能を持つものまで、様々な種類があります。また、プログラミング言語に特化したエディタもあり、例えばVisual Studio CodeやSublime Textなどが挙げられます。
おすすめのテキストエディタ
様々な種類のテキストエディタの中でVisual Studio Code（VsCode）をお勧めします。
私達の目的は我流は捨てて人の真似をすることによって再現性が高い月5万円を目指すことです。
選択肢は様々な種類があるので無数にあります。
ここでVsCodeを選んだ判断基準は多くの情報があるからです。
・これから紹介する書籍
上記は全てVsCodeでWEB制作を行っております。
VsCodeでやること
- 拡張機能をインストールする
Visual Studio Codeは、様々なプログラミング言語やフレームワークに対応する拡張機能を提供しています。必要な拡張機能をインストールして、作業効率を上げましょう。
- ショートカットキーを覚える
Visual Studio Codeには、多くのショートカットキーがあります。頻繁に使用する機能のショートカットキーを覚えておくことで、作業効率が向上します。
- カラーテーマを変更する
デフォルトのカラーテーマは見やすく、美しいですが、個人の好みに合わせてカスタマイズすることもできます。オプションからカラーテーマを変更するか、拡張機能からカスタムカラーテーマをダウンロードすることができます。
- フォントサイズを調整する
Visual Studio Codeのデフォルトのフォントサイズは比較的小さいため、長時間の作業で目の疲れを引き起こす場合があります。オプションからフォントサイズを調整し、作業中の快適性を向上させましょう。
- 自動保存を有効にする
Visual Studio Codeには、自動保存機能があります。ファイルを自動的に保存することで、作業中にファイルを失うことがなくなり、作業効率を向上させることができます。
- タブを使用する
Visual Studio Codeでは、ファイルをタブで開くことができます。これにより、複数のファイルを同時に開いて切り替えることができ、作業効率を向上させることができます。
VsCodeおすすめカスタマイズ！みんなやっている！
現段階でも私自身全てを使いこなせれていないです。必要だと感じたときに覚えればいいと思います。ショートカットなんてほとんど使えておりません。知らないことが一番ダメだと思うので知ってほしい内容とはなっております。
1冊で全て身につくHTML&CSSとwebデザイン入門講座
どういう内容なの？
この書籍は、Webデザイン入門のためのHTMLとCSSの基礎を丁寧に解説しています。
最新のWebデザインのトレンドに合わせたカラフルなデザイン例を用いて、基本的なHTMLの書き方やCSSのスタイルシートの設定方法、レスポンシブデザインの実装などを解説しています。
この書籍を読むことで、Webデザインの基本的な技術を身につけることができます。
Webデザインの初心者から、HTMLとCSSをもう一度復習したいという人まで、幅広い層におすすめの書籍です。
現在でも確認をしたい場合やFlexBoxを見返す場合などで辞書代わりに使用しております。
1冊で全て身につくHTML&CSSとwebデザイン入門講座の学習方法
理解度：わかったようなわからないような。これを知ってどこでどう活かすかはわからない。
ドメインやアドレスが非常にわかりやすく読んでいて楽しかった。
理解度：覚えているかどうかは別として、書いてある内容はほぼ理解が出来ている状態。
ファイルの階層構造だけやって、後は読むだけでいいと思う。
理解度：覚えているかどうかは別として、書いてある内容はほぼ理解が出来ている状態。
ファイルの階層構造で2日位躓きました。
理解度：覚えているかどうかは別として、書いてある内容はほぼ理解が出来ている状態。
ファイルの階層構造で2日位躓きました。
躓いたときの参考サイト
1冊で全て身につくHTML&CSSとwebデザイン入門講座が終わった段階での理解度
無料のデザインカンプを配布しているサイト
最初にやるデザインカンプ１つ
BEM、CSS設計
Sass
意識してデザインカンプ１つ
jquery
中級課題２つ
WordPress教科書
しょーごさんデザインカンプ