Hello! Uchii.code
バナー画像

【HTML学習】未経験からフロントエンドエンジニアになる方法 #2

2023-08-29に公開

まえがき

今回の#2ではHTMLの必要性と学習方法について解説していきます。HTML学習は、ウェブ制作の鍵となる基本的なスキルです。ウェブページの骨組みを構築するための言語で、初めて学ぶ方も多いことでしょう。また、HTMLはウェブコンテンツの構造を定義する言語です。見出しや段落、画像、リンクなどの要素を使い、ウェブページの骨格を形成します。正しいHTMLの知識があれば、ウェブページは正しく表示され、検索エンジンにも適切に解釈されます。HTML学習は、ウェブデザインやウェブ開発の入り口として選ばれることが多いです。基本的な構造を理解すれば、CSSやJavaScriptなどの応用的な技術へのステップアップがスムーズになります
ここでみなさんに1つ質問です。エンジニアとしての開発を進める中で最も重要なことは何でしょうか。

それは、問題解決能力です。

どんなにすごいエンジニアの方でも、全てが頭の中に入っているわけではありません。では壁にぶつかったときはどうするのでしょうか。それは、自分で調べて自分で解決するのです。インターネット、書籍、コミュニティ。とにかくありとあらゆるリソースを使い、自己解決できるようになることが重要です。これからエンジニアを目指すにあたり、HTMLはその第一歩といえます。初めはわからないことだらけだと思いますが、少しずつ諦めずに頑張っていきましょう。

HTMLを学習する上での心構えを以下にまとめます

  • HTMLは基礎中の基礎のスキルである
  • 一段重要なことは問題解決能力(ここから逃げてはダメ)
  • わからないことはすぐにググる。答えを見てコードが書ければそれでOK

1.Progateでの学習(2週間)

1-1.ProgateでHTMLを学習する

多くのブログや記事でも紹介されており、すでにご存知の方も多いと思いますが、最初はProgateのHTMLコースの受講から始めましょう。なぜここまで多くの人がProgateを勧めるのでしょうか。自分なりに考えてみた結果をまとめてみました。

  • ハンズオン形式で見本があるため安心
  • ゲーム感覚で進めていける
  • 途中までは無料で受講できる

特に、「ハンズオン形式で見本があるため安心」という部分が大きいと思います。学習を始めたばかりの頃に書籍から入るのはお勧めしません。なぜなら、わからないことがあった時に答えが見れないからです。Progateは見本もわかりやすく、答えも見ることができるため、最悪自分で考えてもダメだった時に頼ることができます。Progateの学習でも自分の中で諦めるタイミングを作ってください。「30分考えてもダメだったら答えを見よう。」「ここまでやってみてダメだったら答えを見よう」自己解決能力が未熟なうちは答えを見て学ぶことも重要です。僕も初めは、答えばっかり見てましたが、「あれ、この前もここでつまずいたな」とか「今回は自分でググってみよう」など、少しずつ自己解決能力をつけていきましたので安心してください。そして今も、毎日つまずき、毎日ググってます。

1-2.HTMLコースを2周する

画像に alt 属性が指定されていません。ファイル名: 903117e907dc5f79e5274f454fd37a94-1024x480.png

ProgateのHTMLコースは2周くらいが目安です。途中からは有料になってしまいますが、1ヶ月分だけ払ってあとは解約もできますのでご安心ください。(月額1,490円 2023/8/29現在)
特に重要なのは、道場編も必ずやることです。答えも見ながらでも良いので、暗記ではなく自分で考えてコードを書けるようにしましょう。道場編、FlexBox編、関連記事3つまで全てを2周しましょう。FlexBoxは#3以降で出てくるCSSに直結しますし、これから嫌でも必要になりますのでここで押さえておきましょう。

2.動画で学習する(2週間)

2-1.UdemyでHTMLを学習する

こちらも有名な学習教材ですが、Progateで基礎を一通りマスターしたらUdemyがお勧めです。ここからは実際に自分の開発環境でコードを書いてみましょう。自分のPCに開発環境をセットして、見本を見ながら0→1でサイトを作ってみる。この0→1が1番の成長につながります。Udemy頻繁にセールも行っているので、購入する際はセールの時期を狙いましょう。

プログラミング言語の人気オンラインコース

その中でも実際に僕が受講したコースを記載しておきます。1つ目は、たにぐちまこと(ともすた)さんの「ちゃんと学ぶ、HTML/CSS + JavaScript」コースです。2つ目は、NEST onlineさんの「未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース」です。こちらの2つをさらっておけば大丈夫かなと思います。もちろんご自身でいいなと思った講座でも大丈夫です。

2-2.YoutubeでHTMLを学習する

これは僕自身も実際に活用していた方法です。ProgateやUdemyなどを活用するのも良いですが、Youtubeは最高の学習教材です。YoutubeでHTMLと検索しただけでもかなりの数がヒットします。もしかすると、これらの動画を見るだけで全て理解できてしまう方もいるかもしれません。

いずれにしても自分自身にあった学習方法で進めてください。どの学習方法でも自己解決能力は高められるはずです。

まとめ

さて、今回の#2ではHTMLの学習方法についてまとめました。Progate、Udemy、Youtubeこれらの3つを駆使すれば今後のCSSや各言語も学習教材に困ることはないと思います。
最後に改めて、HTML学習で重要なことをまとめておきます

  • HTMLは基礎中の基礎のスキルである
  • 一段重要なことは問題解決能力(ここから逃げてはダメ)
  • わからないことはすぐにググる。答えを見てコードが書ければそれでOK

以上の3つを念頭に置きながら、学習を進めていってください。今回のHTML学習方法ではプログラミング学習全体における学習方法と心構えについても触れたので、次回の#3CSS編ではもう少し踏み込んだ実際のテクニック周りを紹介していけたらと思います。

G e t i n T o u c h