HikoPro Blog

IT・テクノロジーで生活と仕事をもっと豊かに

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

約6分
About|HikoPro

About|HikoPro

1998年生まれ|ITライフクリエイター
Webクリエイター|YouTuber|Blogger

学生時代は、タイピングのテストでクラス最下位レベルのパソコン音痴。
もっと自分の市場価値を高めたいと思い、、、
▷バンコク不動産▷インドIT留学▷ベトナムIT企業エンジニアを経て
Web系のフリーランスとして独立。

その後もっと大きい市場でインパクトのあることをしたいと思い、
ITメガベンチャーに就職。

#GoProAwards受賞 #14ヵ国渡航 #Z大学創業者 #ネコ好き

YouTube

I make videos of computer hack information and useful applications that
enrich people's work and life.


PC Hack

Web Create

Life Style

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

こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していますHikoProです! 最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています!

プログラミング初心者でインドに飛び込みましたが、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

Leave A Reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)