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

デザイン・英語

はじめて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制作マスター】勉強方法のまとめ【初心者向け】
フリーランスエンジニアとして「初受注」する際に必要なスキルを解説

実践

1:サーバーを立てる

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

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

2:ドメインをとる

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

 

3:環境づくり

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

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

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

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

4:基礎知識を学ぶ

1-1, HTMLの知識を学ぶ

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

1-2, CSSの知識を学ぶ

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

5:HTMLを書いてみる

自分で借りたレンタルサーバーにHTMLを書く

Hello worldと書くことが出来ました。次のステップはウェブサイトを模倣していく事です。

6:CSSを書いてみる

ストラクチャを知ったら、最初のステップはコピーペーストだと知りました。

参照先
ぐぐるワード!表の枠線を変えたい場合は「CSS table プロパティ」
「W3Schools」のサイトを参照

おわりに

なんとか最初の一歩を踏み出すことが出来ました。ここまでくればなんとかサーバー設定からサイト構築までの流れを知る事ができます。基礎の基礎を知っておくことって大事です。

さて、私のようにエンジニアを目指すわけではなくデザイナーを目指す場合、次は優先順位を考えていく段階です。数ヶ月HTMLをかじったところで、エンジニアさんには叶いません。

まずはテンプレートやWixを使ってでも、「お客様に最短に商品価値をお届けできる方向」を目指していきたいと思います。

時が来たら、portfolio構築やデザイン案件をHTMLやCSSを含めてできるようになりたいです。

タイトルとURLをコピーしました