Web開発をする前の学習ステップ（全般編）
注意：この記事は完全に個人の裁量で書いています。出来たからなにかに成れたりすることは有りません。
誰が読んでほしいか？
- Web系の開発を行う会社や可能性がある新社会人
- 個人的にWeb開発に興味があるが何を学習すればわからない人
著者
仕事でもWeb系の開発をやっている人。
どちらかといえばバックエンド系だが、フロントエンドのほうが好き。
しかし、フロントエンドの仕事はない。
内容
ざっくり説明して、練習問題を記載しておきます。
あとはGoogleなどのサイトを活用して、説いてみてください。
超初級
1. ローカルパソコンでサーバー構築
ローカルパソコンでサーバ構築を行ってください。
ブラウザでhttp://localhostとかでアクセスができるようになったらクリアです。
※Index.htmlがない場合は追加してください。
2. HTML編集
１で立ち上げたサーバのHTMLを編集してください。
HTMLのbody内に文字を追加して、http://localhostとかで確認したときに、変更内容が反映されてればクリアです。
3. CSS編集
１で立ち上げたサーバのHTMLを編集してください。
HTML内にCSSを追記or追加してください（styleタグなど）。
H1タグの背景色を赤色にして、http://localhostとかで確認したときに、変更内容が反映されてればクリアです。
※H1タグが存在しない場合は追記してください。
4. Javascript
１で立ち上げたサーバのHTMLを編集してください。
HTML内にJavascriptを追記or追加してください（scriptタグなど）。
buttonタグを配置して、ボタンをクリックしたらalertでメッセージボックスが表示されるようにしてください。
※このときにJavascriptフレームワークは利用しないでください。
（JqueryやReact、Vue.jsなど利用しない！）
5. Javascript #2
１で立ち上げたサーバのHTMLを編集してください。
HTML内にJavascriptを追記or追加してください（scriptタグなど）。
buttonタグを配置して、ボタンをクリックしたらHTML内にカウントを設置して、カウントが増加するようにしてください。
※このときにJavascriptフレームワークは利用しないでください。
（JqueryやReact、Vue.jsなど利用しない！）
6. CSS #2 (難易度高)
１で立ち上げたサーバのCSSを編集してください。
下記の絵をCSSにて表現してください。
パブリッククラウド
1. 契約
Azure,GCP,AWS,IBM,アリババなど好きなパブリッククラウドと契約し、アカウントを作成してください。
2. コンピュータ作成
仮想マシンを作成し、SSHにて接続してください。
3. サーバ構築
NginxやApacheなどをインストールして、サーバを構築してください。
仮想マシンからcurl localhostなどで、index.htmlが返ってくればOKです。
4. サーバ公開
パブリッククラウドの設定も含めて変更して仮想マシン内で構築したサーバーを世界に公開してください。
ローカルのマシンから、仮想マシンのパブリックIPにアクセスしてIndex.htmlが確認できればOKです。
5. index.html編集
index.htmlを変更して、ローカルから4で構築したサーバのindex.htmlが変更されることを確認してください。
6. サーバ側スクリプト
PHP,Pythonなどの言語を使える環境を整えてください。
別のポート（81など）で仮想マシン上に別の言語でサーバを立ち上げるか、利用可能な環境を整えてください。
立ち上げたサーバについて、公開まで行ってローカルマシンから該当のサーバ側スクリプトが実行されている事を確認できればOKです。
7. サーバ側スクリプト #2
サーバ側スクリプトで要求が来た場合にカウントを返信するような仕様に変更してください。
カウントはリクエストが来た回数をカウントするようにしてください。
ローカルから該当のURLにアクセスするたびにカウントが増加することが確認できればOKです。
8. ブラウザからの呼び出し
7で準備したサーバ側スクリプトを5で編集したIndex.htmlによりブラウザから呼び出すようにします。
5で作成したindex.htmlを変更し、ロード時に7のURLを呼び出して、結果をIndex.htmlに表示するように変更してください。
ブラウザを開くたびにカウントが増加していくのが確認できればOKです。
Discussion