ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

プログラミング初心者が3日でFacebookページを模写した方法

学習法
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

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

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

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

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

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

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

こんな方にオススメ
  • プログラミング初心者で中々作品が作れない方
  • これから学習を始めようと思っている方
  • 効率よく学習に取り組みたい方

スポンサーリンク

Facebookページを模写した過程

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

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

過程
  • 総学習時間:27時間(1日9時間)
  • HTML:9時間
  • CSS:18時間
  • インド人講師の授業:9時間(英語なのでほぼ理解不能)
  • 自習時間:18時間
  • 使った教材:Google、Youtube

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

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

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

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

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

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

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

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

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

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

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

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

ポイント

HTML学習は<>の種類を覚えるより、親要素・子要素の組み立て方を学ぼう!

スポンサーリンク

CSSはFlexBoxを抑えればOK

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

HikoPro
HikoPro

最後までご覧いただきありがとうございました!

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
学習法
HikoPro Blog

コメント

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