Web関連言語のフローチャート

前提

本来は個人に合わせてフローチャートを組んで学んで行くほうが良いでしょう
ここでは大まかに書きます
範囲としては一人でフロントもバックエンドも作れるというところまでにします
また言語の特徴などはこちらをご確認ください

Step1：HTMLとCSS

基礎中の基礎です
フロントに進もうがバックエンドに進もうがついて回ります
まずは確実にここは抑えておきましょう
野球で言うならキャッチボール以上に基礎的な範囲です
ボールの握り方レベルですね
無料の基礎資料があるので載せておきます

Step2：JavaScript

続いてJavaScriptです
HTML/CSSではWebの骨組みを作ります
JavaScriptではそこに動きを加えることが出来ます
例えばスライドショーやスクロールアニメーションといったものが挙げられます
世界に公開されているWebページの95％はJavaScriptが使用されています
資料としては基礎と中級がありますがまずは基礎を紹介させていただきます

Step3：jQuery

jQueryとはJavaScriptのライブラリというものです
平たく言えば強化アイテムですね
JavaScriptをもっと簡単に書こうよ！！っていうアイテムです
もう古い、オワコンなどと言われていますが現在も使われている技術です
回収作業や小規模の構築で必要になりますので学んでおきましょう
JavaScriptが出来たならこれはかなり簡単です

Step4：バックエンド言語

ここは色々と言語が存在していますのでおすすめを紹介します
・Ruby
・PHP
のどちらかをやっておくと良いでしょう
そしてこの2つのどちらかのフレームワークを学んでください
フレームワークとは強化装備です
爆速に便利にバックエンドを開発してしまおうぜというものです
僕のおすすめはRubyなのでRubyとそのフレームワーク資料を紹介します

Step5：フロントの強化

続いてフロントの強化をしていきます
・Sass(CSSのフレームワーク)
・TypeScript(JavaScriptの拡張版)
・Vue.js(JavaScriptのフレームワーク)
・React.js(JavaScriptのライブラリ)
このあたりをして欲しいです
Vue.jsとReact.jsはまずはどちらかを学べばいいと思います
おすすめはVueです

ここまで

とりあえずはここまで出来たらいいと思います
正直ここまで学習したら次にやりたいこととか出てくると思います
バックエンドの強化でGoやJavaをやってみるとか色々出てきます
まずはStep2までやってみてください