文系新卒の私がどう勉強したのか? ~HTML・CSS編~

全くの初心者だった私がHTML・CSSをどのように学習したか、また、学習しているかついてご紹介します。

 

 

学習の流れ

1.Progateで「学習コース初級編」学習     

2.見本のサイトを見ながら複製      

3.Progateで学習再開       

4.本『HTML&CSSレイアウトブック』で学習

 

それぞれの学習の詳しい内容を順番に説明していきます。

 

 

   [目次]

1.Progateで「学習コース初級編」学習     

2.見本のサイトを見ながら複製      

3.Progateで学習再開        

4.本『HTML&CSSレイアウトブック』で学習

5.まとめ

 

 

 

1.Progateで「学習コース初級編」学習 

HTMLとCSSについて簡単に説明していただき、

Progateという学習サイトに登録し、学習を始めました。

prog-8.com

 

まず、 HTML/CSSの「学習コース初級編」のみ学習しました。

初級編までであれば、会員登録すると無料で使えます。

 

 HTML・CSSがどんなものか知りたいという方やProgateがどんな学習サイトか気になる方は、まずはProgateの「学習コース初級編」だけやってみるというのは、いかがでしょうか?

 

 

 

(Progateの学習方法)

1.スライドを見る。

一つ一つの学習項目で演習問題を解く時に必要な知識がスライドにまとめられています。

絵が多く、わかりやすいスライドです。

 

スライド検索もできます。

確認したいスライドがある時に検索できるのは、良いですね。

 

2.演習問題を解く。

演習問題に指示が書かれているので、その通りに記入していきます。

右側に作成中のプレビュー画面、その下に見本があります。

問題をクリアするごとに自分のレベルが上がります。

 

わからない時は、ヒント、答えを見ることもできます。

(答えを見るとレベルが上がるのに必要な経験値が半減しますが…)

 

レッスンを進めるごとにサイトがだんだん完成していくので、達成感があります。

HTML、CSS以外の他のプログラミング言語も学べます。

 

ちなみに「学習コース初級編」のレッスンに沿って演習を解いていくと、最後にはこちらのページを作成できます。

 

         f:id:tamesue:20170726181027p:plain

 

 

 

 

2.見本のサイトを見ながら作成

Illustratorの操作方法を学ぶために複写したサイトと同じ2つのサイトを見本に、

HTML・CSSで模写して作成しました。

 

  • 「サンプルサイトMenuページ」複製

f:id:tamesue:20170726181823p:plain

 

 

 

  • クロスセルホームページ「企業情報ページ」複製

  

              f:id:tamesue:20170726181913p:plain

 

 

「サンプルサイトMenuページ」は、比較的シンプルな作りなので、作りやすかったです。

クロスセルホームページ「企業情報ページ」は、複雑なので、最初は全く思うように作れなかったです。

 

自分で作れるところまで作成し、わからなかった点は質問し、作りました。

 

 

3.Progateで学習再開

「学習コース初級編」の続きのコースを学習しました。

HTML・CSSの全8コースを3往復、学習しました。

 

 

4.本『HTML&CSSレイアウトブック』で学習

こちらの本を使って学習しています。

 

HTML&CSS3 レイアウトブック | 外間 かおり |本 | 通販 | Amazon

          f:id:tamesue:20170726182308p:plain

 

 

CSSの説明が多く載っています。

 HTMLよりもCSSを勉強したいという方にオススメです。

 

見本のサイトのレイアウトを作るには、どのようなコードを書けばいいのか、説明されています。

この本に載っている見本は、サンプルファイルをダウンロードして

見ることができます。

 

5.まとめ

Illustratorの学習と同じように基礎を学んだあとは、サイトを多く作ってみて、慣れていくことが大切だと思います。

 

Progateは、初心者の方でも学習しやすいのでお勧めです。

 

 本の種類は沢山あり、それぞれ内容もどのくらいのレベルの人を対象にしているかもバラバラです。

本で学習する場合は、慎重に選びましょう。

 

HTML・CSSだけでも覚えることは沢山あるので、全てを覚えておくというのは、厳しいと思います。

よく使うことのみを覚えて、こういうのを作る時には、こういう操作をすると良かったということを覚えて、メモに取っておいて必要な時にそれを見返して、また同じように作れるように勉強しましょう!