今回は、HTML/CSS学習のおすすめの教材3選をご紹介します。
- HTMLを勉強したいけど何から始めれば良いのか分からない
- 初心者におすすめの教材が知りたい
- 文系出身でも理解できるか不安
このような方に向けて、初心者の方にも理解しやすいおすすめの教材を３つ紹介します。
プログラミングの知識が全くない方でも、隙間時間を利用してHTMLの基礎を身につけられますので安心してください。
ちなみに私の経歴は、以下の通りです。
そんな私が実際に使用したHTML/CSS学習サイトとおすすめの学習方法をご紹介します。
【初心者に向け】HTML/CSSおすすめの教材3選
Creator Quest
１つ目にご紹介するのは、Creator Quest （https://creatorquest.jp/）の「HTML入門（全23回）」です。
- 無料でHTMLの基礎を学習できる
- Chapter1〜23のうち、Chapter17まではYouTube動画あり
- 解説の後に練習問題があり、実際に手を動かしながら学習できる
- 登場人物の掛け合いが面白く、楽しみながら学習できる
個人的には今回ご紹介する3つの中で、一番分かりやすいと思っています。
学生の方や、お仕事をされている方が多いと思いますが、解説部分の動画を通勤通学などの隙間時間に見て、家に帰ってから練習問題をするという学習方法がおすすめです。
私もその方法で学習しました！
CSSの方はまだ途中までしか更新されていないようですので、CSSは別の教材を使用する必要がありますが、まず入門としてこの「HTML入門（全23回）」を学習すると基礎が身についてこの後の学習も進めやすくなります。
- 動画になっているのはChapter17まで
- CSS編はまだ充実していないため、CSSを学ぶには他の教材が必要
Progate
次にご紹介するのは、Progate（https://prog-8.com/） の言語別コース「HTML＆CSS」です。
- スライド形式
- ブラウザ上に直接コードを書き込める
- 書いたコードが正しいか添削してくれる
- 無料で学習できるのは初級編まで
Progateはスライド形式になっているので、自分のペースで学習を進めることができます。
また、コードエディタを用意しなくてもブラウザ上にコードを書いていくことができるので、初心者の方には非常に取り組みやすいです。
上級まで進めると、１つのページを完成させることができて、完成品は見た目もかっこいいのでモチベーションが維持しやすいです。
ただ、無料で学習ができるのは初級編までなので中級以降は有料会員になる必要があります。
- 中級からは有料会員になる必要がある（1,078円/月）
様々な言語のコースがあるので、これからプログラミングを学習する方は有料会員になるのがおすすめです。
Web制作ではHTML/CSSの他に、JavaScript、JQuery、PHP、Sassなどの知識も必要になるため、有料会員になっておいて損はないでしょう。
Web制作で稼げるようになりたいから、有料会員になっちゃおうかな！
ドットインストール
最後にご紹介するのが、ドットインストール（https://dotinstall.com/） の「詳解HTML 基礎文法編」「はじめてのWeb制作」です。
- 1つにつき2~3分の動画で学習
- 実際の環境（エディタ、ブラウザ）で学習が進められる
- 「はじめてのWeb制作」は無料で最後まで見られる
1つの動画が2~3分なので、ほんの少しの隙間時間でも学習が可能で続けやすいです。
「はじめてのWeb制作」コースは無料で最後まで学習できますので、試しに学習してみるにはもってこいです。ただし、「詳解HTML 基礎文法編」はプレミアム会員になる必要があります。
- 「詳解HTML 基礎文法編」の視聴には、プレミアム会員になる必要がある（1,080円/月）
Progateと同様に、プレミアム会員になると様々な言語の学習ができます。
Web制作に使えるものとしては、「詳解HTML 基礎文法編」「はじめてのWeb制作」「実践！ポートフォリオサイトを作ろう」「詳解CSS レスポンシブウェブデザイン編」などを私も実際に学習しました。
他にもJavaScriptやPHPなど様々な言語が学習できるようになるので、こちらもプレミアム会員になるのがおすすめです。
おすすめの学習方法
■まずはCreator Questがおすすめ
Creator QuestでHTMLの基礎を固めて、その後にProgate→ドットインストールをすると良いです。
Creator Questは無料なのに本当に分かりやすく、YouTubeで見られるのでこれから学習を始める方に向いていると思います。
■有料会員になるのがおすすめ
実際に進めてみると分かりますが、Progateもドットインストールもこの金額でここまで学べるのはかなりコスパがいいので有料会員にはなった方が良いです！
どちらか一方だけ、ということであれば、私はProgateの方がよく利用しています。
個人的な意見ですが、ドットインストールの「動画を見ながらコードを書く」というやり方についていけず、動画を止めてコードを書いてまた動画を再生して、、、というのが面倒だったからです（笑）
この辺りは人によると思いますので、自分に合うものを探してみてください。
■メモを取ろう
学習したこと（タグの説明や使い方など）をメモしておくと身に付きやすいと思います。
タグの名前などで検索してすぐにメモを見返せるよう、紙ではなくメモアプリやコードエディタを使ってメモするようにしましょう。
私はこのようにテキストエディタでhtmlファイルを作ってメモしていました。
完全なノートにならなくても良いので、要点だけをメモすると良いでしょう。初めは何度も何度も検索して見返すことになります。
■目標を立てよう
何でも良いので目標を立てるとモチベーションアップにつながります。
私は「半年以内に500円以上稼ぐ！」という目標を、勉強時間管理アプリに入れていました。
頻繁に目に付くところにあると良いと思います。
ってこの目標、ほんとに実現してるじゃん！！
実際に学習してみた結果
最後に、私が実際に学習した時間や方法と、その成果をお伝えします。
■勉強時間
平日
- 朝：約30分（通勤電車で動画視聴など）
- 昼：約20分（昼食後カフェで動画視聴など）
- 夜：約1〜2時間（仕事から帰宅後、PCを使って実践）
合計 約2〜3時間
休日
- 約2〜3時間（自宅やカフェなどで動画視聴、PCを使って実践）
改めて振り返ると結構少ないですね。
まあ、平日は仕事もしていましたので、、、。
■期間 （HTML/CSSのみ）
2021年9月中旬〜2022年10月中旬 （約1ヶ月）
一通り学習し終えたのはこれぐらいですが、この期間の後も、分からないことがあれば調べて基礎に立ち返るというように、学習は常に続いています。
■成果
学習開始（2021年9月中旬）から約半年後の2022年3月に初受注し、初月の販売額は87,000円を達成しました。
まとめ
HTML/CSSの学習を始めるのにおすすめの教材を3つご紹介しました。
- Creator Quest
- Progate
- ドットインストール
- まずはCreator Questがおすすめ
- 有料会員になるのがおすすめ
- メモを取ろう
- 目標を立てよう
HTML/CSSの知識をより深めるのにおすすめの教材や、その後の学習の流れ、案件受注のコツなども発信していきますのでこれからもよろしくお願いします。
コメント