はじめてHTMLでHello worldした時の話

Webデザイナーを目指す前はHTMLが何なのか考えたこともありませんでした。2020年、仕事を通して初めてHTMLに触れる機会があり自分でも勉強をし始めたので、いずれportfolioをHTMLでゼロからかけるようになりたいと思うようになりました。HTML、CSSを含めたデザイン案件を受注することをゴールに、まずは自分でサーバーを立ててHello world を書いてみるところから始めました。

独学でどう学んでいくか
実践
おわりに

独学でどう学んでいくか

目標

「サーバー設定からサイト構築までの流れを知る！！」

可能であれば
HTML、CSSを含めたデザイン案件を受注！！
自分のportfolioをコーディングで書いて、いつかUXmilkのようなストラクチャを作ってみたい！！

コーディングを学ぶ順序

HTML→CSS→WordPress（→jQuery→JavaScript→PHP）

学ぶ

サーバーを立てる
ドメインをとる
HTMLとCSSの基礎学習
サンプルサイトを模写ドットインストール
Githubを使ってみる

-HTML/CSSを覚える
-jQueryのライブラリが使える
-PHPの基礎が分かる
-WordPressテーマをカスタマイズできる
-BootstrapといったHTMLフレームワークが分かる

【独学でWeb制作マスター】勉強方法のまとめ【初心者向け】
フリーランスエンジニアとして「初受注」する際に必要なスキルを解説

実践

１：サーバーを立てる

レンタルサーバーを自分で借りて、HTMLでHello world と書くまでの流れを自分自身でやる事で、インターネットの流れを学ぶことが出来るとの主人の勧めで、自分のサーバーを契約してみる事になりました。

無料のサーバーは後から面倒らしいので有料サーバーを借りることにしました。UdemyにておすすめされたXサーバーは月1000円。しかし今の私にはそんな複雑な機能はいらないのでお手頃サーバーを借りることにしました。お手頃サーバーの有名どころのさくらとロリポップを比べたところ、とりあえずHTMLにHello world と書くだけの目標の私には、ロリポップの月額500円のスタンダードプランがいいということで、そちらを契約することにしました。

２：ドメインをとる

レンタルサーバーで使う為のドメインは、お名前.comで月額25円のを買いました。お名前.comは気が付かないうちにオプションや自動更新をつけてくるから要注意でした。

３：環境づくり

*CotEditorをインストール
元エンジニアの主人曰く、THMLを書くテキストエディターとしてCotEditorがオススメだそうです。色分け等が分かりやすいそうです。

*Atomエディターをインストール
私が見ていたUdemyの動画ではAtomエディターをお勧めしていました。

*Sublime textをインストール
仕事ではこれを指定されて使っていたので、少しだけ知見があったのでダウンロードしました。

色々使ってみて一番自分にあう物を使ってみたいです。

４：基礎知識を学ぶ

1-1, HTMLの知識を学ぶ

CSSはHTMLに書くものなので、まずはHTMLの基礎を知識として学ぶところから始めました。オンライン学習のUdemyにはWebデザイナー向けのコーディングのコースがたくさんあります。私は日本語で学べるHTML5＆CSS3＋JavaScript 講座【初級レベル】のコースを選びました。主人から指定された選定基準は以下の３つでした
*短時間でまとまっている動画である事
*サーバーを借りるところまで教えてくれる事
*身の丈にあった初心者レベルの動画である事

1-2, CSSの知識を学ぶ

HTMLを学んだ際に見た、Udemyのチュートリアルを見て、まずはCSSの基礎知識を学びます。