俺の食べログ

「グルメ」「仕事」「プログラミング」「趣味」について書いてます。

【初心者向け】HTML&CSSの勉強法、独学の人にオススメな勉強方法

f:id:buried_treasure:20170820191052j:plain

【初心者向け】HTML&CSSの勉強法、独学の人にオススメな勉強方法

HTMLとCSSを勉強し始めた時って、

どうやって進めるのが効率的かよくわからなかった。

 

僕自身は何となくガムシャラに勉強して、何となくで身に付けてしまった。

そして、現在エンジニアとして仕事をしている。

 

今振り返ると、これで勉強すれば良かったなーと思ったものをあげていく。

初心者でこれから勉強していこうと思っている人の参考になると良い。

 

本で勉強する

ネットのオンライン学習サイトとかで勉強するよりも、本の方が情報量が多い。

基礎からしっかりと理解したい場合は、まず本で勉強するのが良い。

 

色々なところでオススメされている本だが、

HTMLとCSSを勉強するならこの本が良い。

 

ものすごく簡単に書かれているので、

初心者でも挫折することなく、最後まで理解することができる。

 

スラスラわかるHTML&CSSのきほん

こちらの記事で勉強した感想を書いているので、

良かったら読んでみて下さい。 

www.2dgod.com

 

スラスラわかるHTML&CSSのきほん」をやった後にオススメの本はこちら。

ちょっとだけ難しい本。

 

HTML5&CSS3デザインブック 

BootstrapやjQueryの使い方に関しても書かれています。

いきなりこの本から初めてしまうと、内容が盛りだくさんなので、

挫折してしまう人もいると思う。

なので、「スラスラわかるHTML&CSSのきほん」をやってから、この本に取り掛かって下さい。

 

本で勉強した後、理解出来ているか確かめる方法

本で勉強すると、本に書いてある内容をそのまま実行しているだけなので、

自分の中で理解出来ているのか怪しいです。

 

僕は独学で勉強していた時に、

本当に理解できているのだろうか?と心配になりました。

 

本だと読み進めていけば、そのまま答えが載っているからです。

書いて動けば、理解した気になってしまう。

 

そんな人に理解出来ているのか確かめる方法があります。

 

本での勉強が終わったら、

TechAcademyというプログラミングスクールの1週間無料体験を利用して勉強するという方法です。

 

TechAcademyの無料体験を知らない人はこちらをご覧ください。

 

▼TechAcademyの詳細&無料体験はこちらをクリック

オンラインブートキャンプ 無料体験 

 

スラスラわかるHTML&CSSのきほん」が終わった後に、

HTML5&CSS3デザインブック」をやらずにTechAcademyを体験しても良いと思います。

 

TechAcademyの無料体験の良いところ

TechAcademyの無料体験は、本での勉強とは違った良さがあります。

それを紹介していきます。

 

わからない所を先生に質問することができる

勉強していてわからなかった部分をTechAcademyの先生に質問できます。

本で勉強していて、ここが納得いかなかったという部分を理解できるまで、

現役エンジニアの先生に質問することができます。

本で勉強して何となくで、理解してしまった部分を正すのにオススメです。

 

コードレビュー

自分の書いたコードを先生にみてもらうことができます。

一人で勉強していると、自分のコードの汚さに気がつくことができません。

TechAcademyでは現役のエンジニアがチェックをしてくれるので、

自分で書いたコードをチェックしてもらうと良いです。

 

僕はエンジニアとして就職するまで、

人に書いたコードをレビューしてもらうということがなかったです。

 

初めて会社の先輩にレビューしてもらった時は、コードが汚さすぎて、

修正点が多く、お客さんに納品できないようなコードになっていました。

 

かなり貴重な機会になると思うので、

是非挑戦してみて下さい。

 

TechAcademyの教材には答えの書いていない応用問題がある

TechAcademyの教材には、答えの載っていない応用問題があります。

答えがわからない場合は、先生に確認を取ります。

 

本で勉強するのとは違って、

読み進めるだけでは答えにたどり着けないので、勉強するのが楽しいと感じられます。

 

それも良い感じの難易度で作られているので、楽しめます。

理解を深めたい人は無料なので、是非挑戦してみて下さい。

 

▼TechAcademyの詳細&無料体験はこちらをクリック

オンラインブートキャンプ 無料体験 

 

ここまで勉強すれば、だいたい理解出来ていると思います。

HTMLとCSSを使って作りたいページもある程度作れると思うので、

好きなページを作ってみると良いです。

 

好きなページが何か思い浮かばない場合は、

「自分の通っている学校や会社のホームページ」、

「これから就職をしようと考えている会社のホームページ」などを作ってみると良いです。

 

動きが必要な部分に関しては作れない可能性はありますが、

基本的なページの見た目は作ることができると思います。

 

作ったページをネットに公開してみる

自分の作ったページをサーバーとドメインを取得して、

ネットに公開するとポートフォリオとして使うことが出来ます。

 

ポートフォリオがあると、

どんなことが自分は出来るのかが相手に伝わりやすいので、

面接などにも使えます。

 

良かったら公開までやってみて下さい。

 

僕はエックスサーバーとお名前ドットコムを利用してサイトを公開しました。

エックスサーバーは無料期間もあるので、公開だけやってやめるという手もあります。

公開の手順を理解するのにこの方法はオススメです。

 

お名前.comのドメインは1円から取得することが出来るので、

ほとんどお金をかけずに公開まで進められます。

 

良かったらやってみて下さい。

 

▼エックスサーバーの詳細はこちらをクリック

エックスサーバー

 

▼お名前.comの詳細はこちらをクリック 

お名前.com

 

これよりさらに勉強したい場合

ここから先は仕事で使うレベルになるんですけど、

こちらの参考書を利用すると良いです。

理解する必要のない方はやらなくても良いです。

 

Web制作者のためのCSS設計の教科書 

内容は最初の本と比べると難しいですが、

どうすればコードが綺麗に書けるのかについて書かれています。

 

良かったら目を通してみて下さい。

僕が勉強した感想はこちらで書いています。

www.2dgod.com

 

最後に効率良くCSSコーディングができるSassについても勉強すると良いです。

Sassはこの本で勉強したというエンジニアがうちの会社では多かったです。

 

Web制作者のためのSassの教科書

こちらの記事で勉強した感想について書いています。

www.2dgod.com

 

これらを全てやった後にオンライン学習サイトを利用して勉強すると、

簡単に理解できると思います。

 

オススメのオンライン学習サイト

オススメのオンライン学習サイトも紹介しておきます。

 

プロゲート

初心者が勉強するにはこのサイトがオススメです。

オンライン学習サイトの中では、一番初心者向けのサイトです。

 

▼プロゲートの詳細はこちらをクリック 

プロゲート

 

プロゲートの紹介についてはこちらの記事で紹介しているので、

良かったら読んでみて下さい。

www.2dgod.com

 

ドットインストール

動画学習サイトで、ざっくりと大枠を理解するのに便利なサイトです。

エンジニアの人も利用しています。

初心者には少し進むペースが早くて難しいかも。

慣れれば問題ないんですけどね。

 

▼ドットインストールの詳細はこちらをクリック 

ドットインストール

 

まとめ

僕がオススメする勉強方法をまとめるとこんな感じです。

この手順で進めればしっかり理解できると思います。

 

  • スラスラわかるHTML&CSSのきほん
  • HTML5&CSS3デザインブック
  • TechAcademyのオンラインブードキャンプ
  • 自分でサイトを作って公開
  • Web制作者のためのCSS設計の教科書(やらなくても良い)
  • Web制作者のためのSassの教科書(やらなくても良い)
  • オンライン学習サイト(本で勉強した後に利用)

 

本で勉強した後に、オンライン学習サイトを使うと良いでしょう。

自分でサイトを作って公開するとすごく力が付きます。

ぜひやってみて下さい。

 

以上。