【HTML入門】初心者でもホームページ作成が学べるサイト5選

こんにちは!フリーランスエンジニア兼フリーライターの ワキザカ サンシロウ です。

ホームページを作りたい!と思ったときに、

何から始めていいかわからず始めて見たけど続かなかった・・・

そんな経験ありませんか?また、初めてプログラミングを学ぶ際、本を購入して学習を開始する人も多いと思います。しかし、大抵の本は、前半に数十ページ以上基礎内容が書かれているケースが多く、

読むだけで疲れてしまい、結果的にやめてしまった・・・

という方も多いのでは?そこで今回は、全くプログラミングを触ったことがない方や、触ったことがあるけれど挫折してしまった方を対象に、初心者でも楽しくプログラミングが習得できるWEBサービスをご紹介いたします!

目次

HTMLとは?

HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページを作るための部品を配置するためのマークアップ言語です。

WEB上で作られているサイトは基本的にHTMLで作成されており、HTML内でCSSやjavascriptを利用することで、色のついたおしゃれなデザインとなっております。そのため、ホームページを作るための第一歩として、HTMLを学ぶ必要があります。

また、HTMLはとてもシンプルに書くことができるので、簡単なページであれば数時間で作ることも可能です。なんだか・・・ワクワクしませんか?また、楽しんでホームページ作成を学んでいただくために、私が実際に使ったことがあるWEBサービスだけを厳選し、以下でご紹介いたします。

1位:Progate 【スライド + 実践形式】

progate1

引用元:Progate  https://prog-8.com/

概要

パワーポイントのようなスライド形式で内容確認後、実際に手を動かして課題を解いていくため、【とにかく楽しんでプログラミングを学ぶ】ことに特化した学習サービスです。また、アカウントにはレベルがあり、学習を進めていけばいくほどレベルが上がっていきます。

progate-service3
引用元: https://prog-8.com/

モチベーションを維持しつつ、楽しんで学びたい方に最適です!

こんな人におすすめ

  • とにかく楽しんでプログラミングをしたい人
  • 動画よりもスライド形式が好きな人
  • アウトプットの達成感を感じながら継続したい人
  • ゲーム感覚で学びたい人

2位:ドットインストール 【動画 + 実践形式】


引用元:ドットインストール https://dotinstall.com/

概要

こちらは、3分1コマの動画を見ながらプログラミングを学んでいくサービスです。ドットインストール最強説を唱えている人も多いのですが、その理由はなんといっても動画視聴の手軽さですね。

1コマ3分程度なのでyoutubeを見るような感覚で学習を進めることができます。まずは一通りざっくりと動画を確認し、2回目以降で実際にプログラミングをしながら学習を進める方法がおすすめなので、ドットインストールを利用する方はぜひ参考にしてみてください。

こんな人におすすめ

  • 動画を見ることが好きな人
  • 手を動かすよりも、まずは実際にできる人のやり方を見たい人
  • アウトプットを作ることで学習を継続していきたい人

3位:paizaラーニング【動画 + 実践形式】


引用元:paizaラーニング https://paiza.jp/works

概要

こちらもドットインストール同様、動画で学んでいくことができるWEBサービスです。スキルチェック機能があり、自分がどの程度実力があるのか確認しながら学習を進めることができます。また、スキルチェックで点数が高いとランクが上がり、このランクを転職時のポートフォリオとしても利用できます。

こんな人におすすめ

  • 動画を見ることが好きな人
  • エンジニアへの転職を考えている人
  • 自分の実力を確認しつつ、学んでいきたい人

4位:CODECREP 【穴埋めドリル式】

codecrep1

引用元:CODECREP https://codeprep.jp/

概要

今までご紹介させていただいたサービスとは異なり、穴埋めテスト形式でプログラミングを学習することができます。プログラミング初心者で、自分が知識を習得できているか確かめながら学習していきたい方に最適です!

こんな人におすすめ

  • 中学、高校時代に穴埋め形式で勉強していた人
  • 一問一答という言葉が好きな人
  • 短い時間を積み重ねて学習していきたい人

5位:SCHOO【動画】

SCHOO

引用元:SCHOO https://schoo.jp/guest

概要

ドットインストール、paizaラーニングと同様に、動画を見ながら学ぶことができるサービスです。プログラミング以外の動画も豊富に取り揃えており、さまざまな動画を視聴することができます。

また、プログラミング以外にも面白い動画が多いため、少し覗いてみるだけでも価値があります。

こんな人におすすめ

  • とにかくたくさんの情報を見て学習していきたい人
  • 動画だけでHTMLを理解したい人

おまけ:コードモンキー


引用元:コードモンキー https://codemonkey.jp/

そもそもプログラミングをすることがアレルギーという方も多いと思います。そんな人にこそ試してほしいサービスとして、「コードモンキー」があります。

コードモンキーは、『子供から大人まで、ゲーム感覚で実践的なプログラミングを学習すること』をコンセプトにしているため、まずはプログラミングに対する抵抗を限りなく薄めたい!といった方に最適です。プログラミングの楽しさがダイレクトに伝わると思います。

まとめ

今回は、HTMLを学習するための入門サービスに特化して、いくつかご紹介させていただきました。最後に、これからプログラミングに挑戦しようと思っている方向けに、私が意識している継続させるためのコツをご紹介させていただきます。

1. 累計で考える
2. 期間を決める
3. 誰かと一緒にやる

毎日プログラミングを続けるぞ!と意気込んでうまくいく人もいるかと思いますが、想いだけで毎日継続することは本当に難しいと思います。また、継続できなかった際にやる気をなくしてしまう可能性もあるので、 期間と累計を決めて誰かと共有することをお勧めします。

例 ) 3ヶ月以内にHTML入門編を2周するぞ!
わからなかった場合はteratailsに共有して、悩みを相談しつつ頑張るぞ!

ぜひ、楽しんで挑戦してみてくださいね!

この記事を書いた人

北海道出身の30歳で、フリーランスエンジニア兼テックライターとして活動中。新卒入社したメーカー系のIT企業で、システムエンジニアとして約5年勤務。

Webアプリ、業務アプリ開発において、要件定義 ~ 運用保守まで様々な経験あり。また3歳の娘がいる1児のパパで、日々娘との時間を確保するために仕事を頑張っています!
侍エンジニアでは、【誰でもわかるレベルのわかりやすさ】を意識して、記事を執筆中。

目次