プログラミング初心者でインドに飛び込みましたが、3日でFecebookのログインページの模写をする事ができました！

自分がこんなサイトを作れるなんて1ヶ月もかかるんだろうなぁと思っていましたが、たったの3日でコーディングする事ができました！

こんなページです→ http://misao-it.com/sample/layout/misaobook.html?

こんなカッコイイページが簡単に作れてしまうんです！

プログラミングを始めたけど、中々思うようにサイトが作れない方や、これから始める方でまず何をすれば良いか分からない方も多いでしょう。

そこで今回は、僕がプログラミングを始めて3日間で上記のようなページを作成した過程と勉強方法についてご紹介します。

Facebookページを模写した過程

一見初心者からすると難しそうに思えるこのページですが、HTMLとCSSだけで作られており、このページの模写をする事ができれば、HTML、CSSの基礎はバッチリかなと思います。

多くの方がこのようなページを作るのに1ヶ月かかったりしますが、集中して効率よく勉強すれば3日間で可能です。

ざっくりですがこのような学習時間です。

1日9時間勉強していたので、集中力がない方には向きませんが根気よく頑張れば必ずできます。

ここで大事な事ですが、必ず手を動かして実際にコードを書くという事です。

教材を見たり動画学習もいいですが、コードを書いてアウトプットする事で学習効果が何倍も違います。

HTMLは親要素・子要素の理解が重要

HTMLは<h2>や<img>タグなどの基本的なタグだけ押さえておけばまずはOKです。

このタグを覚える作業に何十日も費やす方がいますが、時間の無駄なのでやめましょう。

実際にコーディングして、分からないタグはその場で、調べて覚える方が効果的です。

HTML学習で大事なのはコードの組み方です。

今書いているコードは最終的にこのように表示されるというイメージを持って書く事が大事です。

親要素・子要素の理解ができていないと、CSSでデザインを整える時に必ず思うようにいきません。

<div>タグの使い方classの設定の仕方などCSSを見据えた学習をするのが効果的です。

CSSはFlexBoxを抑えればOK

初心者の方で最も苦戦する方が多いのが、要素を思い通りの場所に配置する事です。

装飾系（color、font-size、border）は簡単に理解ができますが、要素を移動させたり横並びにするなどは理解するのには時間がかかります。

しかしFlexBoxを理解してしまえば、自由自在にカスタマイズする事が可能です。

僕が作成したFacebookページのレイアウトfloatなどは使わずにFlexBoxしか使っていません。

この2の教材は共にクオリティが高く、チュートリアル道場さんの動画を見た後に、チートシートの文章を見て理解を深めるのがいいでしょう

大事なのは先程も言いましたが、必ず見ながら手を動かしてアウトプットする事です。

トライして分からなかったらすぐググる

HTML、CSSの学習方法をご紹介しましたが、一通り勉強した後はすぐに模写作業に移りましょう。

6割くらい理解していればOKで、何となく理解した程度でいいです。

完成版を見ながらコーディングしていくのですが、100%壁にぶち当たります。

僕も何回もエラーが起こったり、思うように配置できなかったりしました。

諦めたくなる気持ちはわかりますが、すぐに自分で調べて解決するという癖をつけましょう。

HTML、CSSレベルの言語だとググれば100%答えが出てきます。

インプットする→トライする→壁にぶつかる→調べる→トライする

このサイクルがとても重要で、失敗した事を成功に変えると人間は必ず頭に残ります。

壁にぶつかっても成長できるチャンスだと思って、Google先生は無料で教えてくれるので、頼りまくりましょう。

頭痛するぐらいコードを書こう

僕はプログラミング 初心者でモニターに向かって9時間もコードを書き続けると、流石に頭痛になります。

しかし、これぐらいしないと3日間でここまでのレベルには到達できません。

なぜここまで短期集中できたかというと、環境を変えたからです。

一人で自宅で9時間も勉強しろと言われても、８割型の人はできないでしょう。

しかし周りに同じ勉強をしている仲間がいれば9時間の勉強も苦ではありません。

僕がインドでIT留学をしている学校は10人程度と少ないですが、夢のために毎日必死に勉強している仲間がいます。

本気でプログラミングに取り組みたい方は一人でするのではなく、同じ仲間を見つけたり、ITの環境に飛び込んでみるのも一つの手でしょう。

まとめ

プログラミング初心者の学習方法をご紹介しましたが、３日間で目標をクリアするかは自分次第です。

この課題を3日でクリアしてしまえば、この学習方法や期間が今後の学習ベースになるので、PHPやJavaScriptの学習も短期間でこなす事ができるでしょう。

僕が思うにプログラミング学習は最初の3日が肝心だと思います。

ぜひこの学習方法を参考にプログラミングをスタートしてみてはいかがでしょうか！