【完全初心者】HTML/CSSをマスターして、ポートフォリオサイトを作るまでの流れ

どうも、スエヒロ(@basu_28)です。

 

Progateからプログラミングの勉強を始め、今ではデザインからコーディングまで自力でサイトを作れるようになりました。

 

そこで今回は、

  • 初心者がHTML/CSSの学習をする流れ
  • 今思えばこうすべきだった

ということを、今からHTML/CSSの勉強を始める方に、順番に解説していきます。

 

Progate初級編

まずはProgateから始めましょう。

 

初級編では名前の通り、「HTML/CSSとはどういうものか」を学習します。

 

1周目は時間がかかると思いますが、2周目, 3周目と回を重ねるごとに、自然とできるようになるので、ガンガン進めましょう。

 

Progateを進めるポイントとしては、「10分考えてor調べて分からなければ答えを見る」ということです。

プログラミングは暗記ゲーではありません。答え見放題です。

 

Progate中級編

Progateの中級編では、初級編で学んだ基礎知識をベースに、実際にWebサイトを作っていきます。

 

分からないところがあれば、初級編のスライドを復習したり、ググったり、後述のテキストを参考にして、なんとか自分で問題を解決しましょう。

 

エンジニアにとって、自分で調べて問題を解決するスキルはとても重要です。

 

この際も、10分調べて分からなければ、答えを見ましょう。

 

 

答えを見て終わりにするのではなく、Evernoteなどにメモしておくことが重要です。

Evernoteの優れているところは、検索できるということです。

大体同じところを間違えるので、検索してすぐに見直すことができます。

 

 

基礎テキスト

Progateの中級編まで一通りやって、なんとなくHTML&CSSの感じが掴めたら、1冊テキストを買ってやりましょう。

 

Progateで雰囲気をつかむ→テキストで体系的に学ぶというイメージです。

 

テキストはどれでも大丈夫ですが、僕は全ページカラーかつ図解多めで見やすい以下の本で学習しました。

Progate上級編

Progateの上級編はレスポンシブ対応についてです。

 

レスポンシブ対応というのは、できあがったPC画面幅のサイトにスマホ画面幅のcssを足していく作業なので、中級編よりもカンタンだと思います。

 

新しく学ぶことも少なく、「実践のなかで理解できるという感覚的な部分」もあると思うので、サラッと理解できればOKです。

 

余裕があれば、Bootstrapの勉強もしましょう。
Bootstrapを使うと、要素を並べるのとレスポンシブ対応が爆速になります。

Bootstrap4のグリッドだけ使う方法

 

応用テキスト

Progate上級編と基礎テキストを終えれば、HTML/CSSの知識は十分身についているはずです。

 

しかし、いざゼロからWebサイトを作っていこうとなると、勝手がわからないのではないかと思います。

 

そこで、以下のテキストで実践的なWebサイト制作について学んでいきます。

の3つのレイアウトのサイトを作りながら学んでいきます。

 

特に大事なのは、シングルページレイアウトで、LPや最近のWebサイトはこの型で作られてることが多いです。

僕は自分のポートフォリオサイトを作る際にも、このシングルページレイアウトを参考にしました。

サイト模写コーディング

もうあとは、どんどんサイトを作って実践あるのみです。

 

サイト模写をする際に、どのサイトにするか迷うと思うので、サイトを選ぶ基準を紹介します。

  • テキストベース(画像で置き換えしてない)
  • ページが長すぎない
  • レスポンシブ対応している

ちなみに以下は、模写コーディングにオススメのWebサイトです。

ポートフォリオサイト制作

いくつか既存のWebサイトを模写コーディングしたら、自分のポートフォリオサイト制作を始めましょう。

 

HTML/CSSを学習している方の多くは、その先に就職やフリーランスとしての独立を目指しているのだと思います。

 

その際に自分のスキルを、企業やクライアントにアピールするために、成果物が必要となります。

 

ポートフォリオサイトの作り方

 

デザインに悩んでいるひと

どんなデザインにしたらいいんだろう

 

そういう方は、他人のポートフォリオサイトをパクりましょう

Aさん、Bさん、Cさんのサイトから少しずつパクれば、それはもはや自分のオリジナルです。

 

そもそもWebサイトはどれも似たような作りになるので、気にせずどんどんパクりましょう。

 

ぜひ僕のサイトもパクってくださいw

 

参考(パクリ)にさせていただいた方

Ziziさん
はにわまんさん
Yukiさん
しょーごさん

Twitterで見つけたので、パクらせていただきました。

 

最低限おさえるべきデザインの基礎

デザインとアートは違います。

デザインには法則があり、それを知っていれば誰でもそれなりのデザインすることができます。

 

しかし、Webエンジニア含め、多くの人はデザインの基礎を学んだことがありません。

 

なので、あなたはデザインの基礎を学ぶだけで、その他大勢の人から頭ひとつ抜け出すことができます。

 

以下の本は、デザイナー入門書の鉄板と呼ばれ、

・近接
・整列
・反復
・コントラスト

というデザインの4原則を学ぶことができます。

 

 

初心者の方に伝えたいこと

Twitterなどでは、

「プログラミング始めて〇ヶ月で☓☓円稼いだ」

という人を見ることがあると思います。

 

そういう人を見て、刺激を受けるのはいいですが、焦りすぎないようにしましょう。

 

周りに惑わされず、焦らずに自分のペースで、無理なく楽しくプログラミング学習をすすめてもらえればと思います。