HTMLとCSSを1ヶ月で習得する独学勉強法【無料学習ツールも紹介】
HTML&CSS
2023年1月8日
こんにちは、ゆうきです。
「週休2日の社会人でもHTMLとCSSを独学で習得できる勉強法を知りたい」
「できるだけお金もかけたくないから、無料で勉強できる学習サイトがあれば助かる！」
上記の疑問に答えます。
ぼく自身、働きながらHTMLとCSSを独学で学んでいたので、そのノウハウを本記事で紹介します！
本記事では、毎日忙しい社会人向けに1ヶ月でHTMLとCSSを独学で習得できる勉強法を紹介します。
なるべくお金をかけずに休日や平日の隙間時間でHTMLとCSSを習得したい方には必見です。
本記事の主な内容
- ・HTMLとCSSを1ヶ月で習得してポートフォリオを作る
- ・独学の見方、無料学習ツールを活用しまくる
- ・独学する際の3つのポイント【挫折率を下げる】
目次
- HTMLとCSSを1ヶ月で習得する独学勉強法
- HTMLとCSSを独学する際のポイント
- HTMLとCSSの学習スケジュール
- HTMLとCSSを習得したあとは？
- まとめ：仕事を受注してみよう【課題を見つける】
① 自分に合った教材で基礎を理解【無料あり】
② ググりつつ簡単なサイトを作る
③ ポートフォリオを作る
さっそく、みていきましょう。
HTMLとCSSを1ヶ月で習得する独学勉強法
HTMLとCSSだけでポートフォリオを作れるようになるまでの勉強法を紹介します。
ざっくり3ステップです。
- ① 自分に合った教材で基礎を理解【無料あり】
- ② ググりつつ簡単なサイトを作る
- ③ ポートフォリオを作る
① 自分に合った教材で基礎を理解【無料あり】
今は無料でも有料級の学習教材がたくさんあります。
有料でも高く見積もって2,000円で買えます。
以下、ぼくがおすすめする教材で基礎を理解しましょう【理解度は、5割でOK！】
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
なんの勉強にせよ最初の入り口は「本」で勉強に限る。
理由は、個人で発信している情報より信頼性が高く、基礎から実践レベルまで網羅的に解説されているからです。
基礎本は、この1冊を読んでおけばOKです。
Progateで実際にコードを書く
Progateは、ゲーム感覚でHTMLとCSSを学べる学習サイトです。
イラストで、コードを説明 → 実際にユーザーがコードを書く
シンプルな学習スタイルですが、ユーザーを楽しませるように作られているなぁって感じです。
イラスト中心のスライドで作られているので、初心者向けのハードルが低い学習サイトです。
基本、基礎は無料で学べますのでよかったら活用してみてください。
有料版は、1,078円/月です。
公式サイト：Progate
Progateで、学習をする方向けに、Progateが終わったら次にやるべき3つの行動で脱・初心者になれるは、参考になると思います。
ドットインストールを使ってスキマ時間でも勉強
ドットインストールは、通勤中やお昼休憩のスキマ時間に活用するのがおすすめです。
短い時間(3分程度)で、HTMLとCSSを学べる動画アプリです。
音声で解説付きなので、通勤中などに活用できます。
忙しい社会人の味方ですね。
こちらも基本無料なので、ぜひ試してみてください。
公式サイト：ドットインストール
Udemyで基礎から応用まで網羅的に学ぼう【有料です】
Udemyは、自分が習得したいスキルを学べるオンラインの講座サイトです。
プロのプログラマーやWebデザイナーが、HTMLとCSSの基礎から実践レベルの応用まで教えてくれる動画視聴型のサイトです。
本やProgateなどのサイトでは、教えてくれないHTMLとCSSのコツもプロの視点から教えてくれるのでおすすめです。
Udemyは、あたり・はずれがある
HTMLとCSSだけでも多くのコースがあるので、自分に合った教材を見つけないといけません。
その中にも当然、あたり・はずれがあります。
Udemyは、有料ですが、定期的にSALEをしているので、SALE期間を狙って購入すると良いです。
公式サイト：Udemy
② ググりつつ簡単なサイトを作る
5割程度の基礎理解ができれば、実際にサイトを作ってみましょう。
サイトは、模写でOKです。
模写サイトの選び方
最初は、自分ができそうなサイトでOKです。
「シンプル サイト 参考」でググれば、いくらでも出てきます。
ぼくの「すだブログ」もシンプルな構成なのでよけれ使ってみてください。
わからなければ「ググる」
模写コーディングは、教材のように答えが用意されているわけではありません。
なのでわからなければ、ググって解決策を探す必要があります。
この「問題解決能力」は、実際の現場でも必要スキルなので、今のうちに癖づけておきましょう。
③ ポートフォリオを作る
転職、副業、フリーランスいずれもポートフォリオは、必須アイテムです。
「でも実績ないのに、ポートフォリオを作る意味って何？」と思っていますよね、、、
結論、小さな実績でぜんぜんOkですよ。
小さな実績とは、「架空サイト」です。
例えば、以下です。
- ・オーガニックに特化したカフェのオンラインサイト
- ・雑記ブログのTOPページ
- ・日本ではここだけ！深海魚が集まる水族館
ペルソナ選定からサイト設計、デザイン、コーディングまで自分でやり、それを実績としてポートフォリオに掲載します。
【悲報】架空サイトをいくら作っても、採用されません。
上記の架空サイトもアリですが、架空サイトだけでは物足りないです。
実績ゼロの初心者が、架空サイトをポートフォリオに掲載するのは、あなただけではないからです。
結論、実案件をオリジナルで作ろう
やり方は、クラウドソーシングで実案件の内容を自分なりに変えて、サイトを作ってみる感じです。
詳しくは、未経験者Webデザインナー向けポートフォリオの作り方から公開までで解説しています。
HTMLとCSSを独学する際のポイント
独学は、挫折率が高めなので勉強するコツも知っておくと良きです。
- ・目標は明確に立てよう
- ・脱・完璧主義になろう
- ・相談相手を見つけよう
目標は明確に立てよう
わりと明確に目標を決めずに勉強している人がいますが、挫折率上げてますよ。
HTMLとCSSを勉強して何をしたいのか、どうなりたいのか、などゴールを明確に決めることで最短かつ効率的な勉強ができます。
例えば以下の感じ。
- ・「3ヶ月後に1万円稼ぐぞ！」
- ・HTMLとCSSで1万円稼ぐには、何をどこまで勉強すればいいの調べる
- ・あとは勉強するだけ
要するに、HTMLとCSSで1万円稼げるスキルレベルから逆算して勉強するだけです。
脱・完璧主義になろう
HTMLとCSSの勉強でありがちなダメな例
例えば以下の感じ。
- 「よしこの本を完璧に覚えてやる！」
- 「Progateの初級編が完璧にできないから次に進めない、、」
上記、ぼくがそうでした。
HTMLとCSSの勉強をノートにまとめるのもNGです。
基本、コードは覚えなくても問題ないですよ。
実際の現場もググりながらコードを書くので安心してください。
プログラミングを習得したいなら「完璧」を捨てましょう。
相談相手を見つけよう
プログラミング独学の挫折率は、9割です。
事実、ほとんどの人が挫折しています。
ぼくも３回挫折しました！
理由は、「相談できる相手がいないから」です。
独学は孤独との長期戦になるので、モチベ維持がかなり大変です。
なので自分と同じタイミングで勉強を始めた方とSNS等で繋がると良きライバルになるので勉強も捗ります。
SNSは、Twitterでいいと思います。
HTMLとCSSの学習スケジュール
忙しい社会人が学習できる時間は、「休日」と「スキマ時間」ですよね。
本気で頑張りたい方は、以下のスケジュール感で勉強しましょう。
- ・平日：1.5時間
- ・休日：6時間
「いや、自分の時間がないわ！」と思うかもですが、正直これくらいやらないとダメです。
社会人で勉強する時間がないと言うのは「勘違い」
通勤中・お昼休憩に、思考停止でスマホをいじるのをやめてHTMLとCSSの勉強をする時間にする。
休日は、土曜日6時間HTMLとCSSの勉強する時間にして、日曜日は友達と遊ぶ前に、1時間勉強する。
上記のように、工夫すれば社会人でも時間は作れます。
HTMLとCSSを習得したあとは？
残念ながらHTMLとCSSができる人なんて世の中にたくさんいます。
なのでさらに稼ぐには、HTMLとCSSのスキル以外のスキルも習得できると良きです。
例えば以下のスキルです。
- ・JavaScript
- ・デザインスキル
- ・WordPress
JavaScript
JavaScriptは、サイトに「動き」をつける言語です。
スライドショーやドロワー、ポップアップウィンドウなどはJavaScriptが使われています。
少し難しいですが、習得できれば仕事の幅が広がります。
デザインスキル
Webデザイナーを目指すなら、デザインスキルは必須です。
主にAdobeのデザインソフトを使ってWebサイトのデザインやバナーなどを作成します。
使い方は、ググりつつ使っていく感じで問題ないです。
おすすめのデザインソフト
WordPress
WordPressに抵抗感ある人多いですが、WordPressも独学可能です。
WordPressは、PHPで作られているCMSの一つで、世の中のWebサイトやブログサイトのほとんどはWordPressで作られています。
Web制作の現場で幅広く活躍するならWordPressは必須スキルです。
独学勉強法は、WordPressを独学で習得する手順はシンプル【初心者向け】で解説しています。
まとめ：仕事を受注してみよう【課題を見つける】
結論、HTMLとCSSは社会人でも1ヶ月あれば独学で習得できます。
手順は以下の通りです。
- ① 自分に合った教材で基礎を理解
- ② ググりつつ簡単なサイトを作る
- ③ ポートフォリオを作る
ポートフォリオサイトが作れたら、積極的に仕事を受注することをおすすめします。
実践のコーディングは、めちゃめちゃ勉強になりまし、スキルUPも早いです。
クラウドワークス
は、案件数も多いのでおすすめです。よかったらどうぞ。
と言うわけで今回は、以上です。
良いプログラミングライフを！
