ゼロから最短でHTML/CSSを学習する方法[たった3ステップ]

未分類

今回は、知識ゼロの状態から最短でHTML/CSSを学習する方法をご紹介します。

私はフロントエンドエンジニアとして、絶賛活動中です。

私はHTML/CSSを、たった2週間ほどで身につけることができました。

今回は、その学習方法についてご紹介します。

本記事はタイトルの通り、プログラミングを一切勉強していない、
これから初めてHTML/CSSを学習する方向けの記事になります。

この記事を読むことで、たったの3ステップで最短でHTML/CSSをスムーズに習得することができます。

最短でHTML/CSSを学習する方法

1、YouTubeを視聴する

まずは、HTML/CSSについて解説されているYouTubeを視聴してください。

この段階では、まだコーディングは行わなくて良いです。

最初にYouTubeを見る理由は、いきなりコーディングをすると、難しくて挫折するからです。

なので、まずはYouTubeを見て、
HTML/CSSではどのようなことができるのか、全体像を把握することが大切です。

これは、他のプログラミング言語を学習するときも同じです。

最初に全体像を把握しておくことで、いざ学習するときに、
何も知らない状態よりもインプットが早くなります。

電車の中など隙間時間に視聴すると良いでしょう。
2倍速で見るのもアリかと思います。

おすすめのYouTube動画は、「渋谷で働くエンジニア福」のHTML講座一択です。

この講座は全てで12個の動画でできており、再生時間は全て合わせるとおよそ100分ほどです。

2倍速で見れば、1時間弱で見終えることができます。

2、Progateで学習

次は、「Progate」と言うサービスを使って、実際にコーディングをしながらHTML/CSSの学習をします。

Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

Progateとは、WEB上で様々なプログラミングコードを学習できるWEBサービスです。

プロゲートを使えば、わざわざ自分でコードを書くための環境を用意する必要が一切不要なので、
初めてのコーディングのスタートダッシュに向いています。

プロゲートは、月1000円ほどで、HTML/CSSやJavaScript、
PHPやPythonなど様々なプログラミング言語を学習することができます。

そのうちのHTML/CSSコースは、1週間かからない程度の量です。

ちなみに私は、HTML/CSSコースを2日ほどで終えました。

ここで注意して欲しいのが、途中で「道場コース」というものがあるのですが、
そちらは無理してやらなくても大丈夫です。

見本があって、それ通りにWEBページを作成するというコースなのですが、
明らかに見本通りにコーディングしたのに、エラーが起きることがあるからです。

しっかり模写したのにエラーが出たら、無理して取り組まず、次に進んでしまいましょう。

3、模写コーディング

模写コーディングで、Progateで身につけたスキルをより実践的なものにします。

HTML/CSSの学習は、むしろここからが本番です。

模写コーディングとは、実在するWEBページをそっくりにコーディングすることです。

模写におすすめなサイトは以下の3つです。

iSara[イサラ]|バンコクのノマドエンジニア育成講座
iSaraとは「稼ぐこと」にフォーカスしたエンジニア育成講座です。なお、iSaraで「基本的なプログラミングスキル」は教えません。基礎的なプログラミングスキルは無料で学べる時代。iSaraでは、基礎知識学習は事前課題とチャットサポートのみ。今なら月15万円稼げるまで永久サポート付きです。
irina's Puti Roll Cake
『可愛い』と『美味しい』を両立させるため、何度も試作を重ねて生み出された、個性豊かなirinaのスイーツ。手作りにこだわりながら、厳選した素材を使用し、甘すぎず上品な味わいに仕上げました。
PAS-POL -旅のモノづくりブランド-|TABIPPO
PAS-POLはTABIPPOのモノづくりブランドです。 ⾃分と世界を繋げる新しい時代のパスポートのようなモノを作りたいと思い、PAS-POLという名前をつけました。

模写コーディングで作成したWEBページはあなたのポートフォリオにもなるので、
未経験からの就活や転職に役立ちます。

最初はわからないことだらけだと思いますが、ひたすらググってググって、
ポートフォリオを一つ完成させましょう。

おわりに

以上の学習を終えたら、次はJavaScript、jQueryの学習をおすすめします。
こちらのプログラミング言語も、フロントエンドには必須のスキルとなります。

コメント

タイトルとURLをコピーしました