はじめまして！岡崎です。
今回は、入学までプログラミングが全くできなかった私が当時勉強したこと、そして今の自分ならすることをまとめてみました！
最近勉強を始めた方の参考になればと思います！
※技能五輪全国大会という、24 歳以下が出場できるフロントエンド・バックエンド・CMS のモジュールがある全国大会で 2 位獲りました。力試しで出場したので力を入れて対策をしていた感じではないです。

はじめに

プログラミングの勉強は基本的にしんどいです。
わからないことばかりで、楽しくない時間やしんどくなる時期がたくさんくると思います。
広告でよく見る、
web のプログラミングは簡単で稼ぎやすい
というのはプログラミングが簡単という意味ではなく、

という意味です。
簡単だと思って勉強を始めると心が折れると思います。
ですが、時間をかけて根気よく向き合うことができれば誰でもある程度は書けるようになると思うので頑張りましょう！
外部との通信が出来るようになると一気に作れるものの幅が広がり、楽しくなってくるのでひとまずの目標は通信でデータを取ってきて便利なアプリを作ってみることで良いと思います！

勉強をする上で意識しておきたいこと

プログラミングは暗記する必要はないので、暗記をしようと思わないでください！
覚えるしかないものもありますが、100%覚える必要は全くありません！
色々触ってみることが成長への一番の近道だと思います！
色々なプログラミング言語を触るよりかは、何か 1 つに絞って習得した方が絶対に良いです！
書き方が変わるだけで本質的にはどの言語を使っても変わらないので、とりあえず 1 つの言語をがんばりましょう！
お金を払うことを躊躇しないでください！
知識は力です。無料のコンテンツでも勉強はできると思いますが、最初のうちは体型的に学べる書籍などで勉強するのが良いと思います。

勉強した順番

1. HTML, CSS
2. JavaScript
3. vue / react + typescript

HTML, CSS

まず初めにプロゲートの HTML, CSS のコースを 2 周しました。（途中から有料会員になる必要があります。）
1 周目はヒントやスライドを振り返りながらなんとなくで進めてゆき、2 周目はできるだけヒントを見ずにスライドを中心に進めてゆきました。
なんとなく流れが掴めたら udemy にて html, css の内容があるコースを購入し進めるのが良いと思います。
自分は CodeMafia 様のこちらのコースを購入し進めました。
勉強中、プロパティの仕様などを確認したい場合が出てきた場合は検索エンジンにて、「プロパティ名 mdn」と検索し勉強することをお勧めします。
mdn は firefox の会社が作成している説明書みたいなものです。他のサイトよりも信頼できる情報源なので web 関連の調べ物をする場合は積極的に使用しました

• プロゲート - HTML
• 【JavaScript＆CSS】ガチで学びたい人のための WEB 開発徹底実践（フロントエンド編）

JavaScript

HTML, CSS がなんとなく書けるようになったら、HTML, CSS と同様にプロゲートにて JavaScript のコースを 2 周しました。
様々なサイトやサービスを使ってみた結果一番プロゲートが楽しく、わかりやすかったです。
そして udemy にて JavaScript のコースを購入し進めました。私の場合は前回購入したコースの中に JavaScript が含まれていたのでそちらを使用し、学習を進めました。
コースの中でわからない用語が都度都度出てきたので調べて理解していました。
udemy を進めながら、jsprimer で概要の復習をしていました。

• プロゲート - JavaScript
• jsprimer

vue / react + typescript

HTML / CSS / JavaScript でいろいろ作れるようになった方は vue や react を勉強してみると仮想 DOM の概念に感動すると思います。
フロントエンドエンジニアとして働くことを想定している場合は、vue か react どちらか好きな方を触ることを強くお勧めします！

おわりに

勉強で何をしたらいいのか分からなくなった時は roadmap などを参考にしてみると良いかもしれません！
そして一通りフロントを触ったあとは、サーバーサイドや linux の基礎など自分の興味のままに勉強していきましょう〜！
いろいろな勉強方法がある中、この記事がどなたかの参考になれば幸いです！
それではよいエンジニアライフを！